/* 星桐 TOTAL · design tokens and components. Source of truth: 星桐TOTAL一体化平台v3_设计规范与受访者端交互说明.md
   Orange only marks "where you are" and the main action; green is status; everything else is ink-green lightness. */
:root{
  --bg:#FFFFFF;--surface:#FFFFFF;--wash:#F4F7F5;--ink:#0B2E25;--ink2:#2F4A40;--muted:#51675D;--line:#E2E8E4;--line2:#C9D4CD;
  --nav:#062319;--nav-on:#0F3A2C;--nav-ink:#9DBBAE;--brand:#0B382C;
  --orange:#FF6A00;--orange-ink:#B84900;--orange-soft:#FFF7F0;--orange-mid:#FFE6D2;--on-orange:#0B2E25;
  --green:#1F6B54;--green-soft:#E3F1EA;--gold:#D9B84A;--risk:#C62B4B;--risk-ink:#A8203E;--risk-soft:#F9DDE3;
  --room:#0E1A16;--room-2:#15271F;--room-line:#24413A;--room-ink:#E8EFEA;--room-mut:#A9BDB4;
  --r-ctl:10px;--r-pan:16px;--r-pop:20px;--gx:clamp(20px,3.4vw,48px);--ease:cubic-bezier(.2,.8,.2,1);
  --f:"Geist","Noto Sans SC","Noto Sans Tamil","PingFang SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0A1612;--surface:#11211B;--wash:#0E1C17;--ink:#EAF2EE;--ink2:#BCCFC6;--muted:#9DB3A9;--line:#1F362D;--line2:#2C4A3E;
  --nav:#040F0B;--nav-on:#0C2A20;--orange-ink:#FF9A55;--orange-soft:#241B14;--orange-mid:#3F2812;--green:#6FD3A6;--green-soft:#17342A;
  --risk-ink:#FF9DB0;--risk-soft:#3A1620;color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0A1612;--surface:#11211B;--wash:#0E1C17;--ink:#EAF2EE;--ink2:#BCCFC6;--muted:#9DB3A9;--line:#1F362D;--line2:#2C4A3E;
  --nav:#040F0B;--nav-on:#0C2A20;--orange-ink:#FF9A55;--orange-soft:#241B14;--orange-mid:#3F2812;--green:#6FD3A6;--green-soft:#17342A;
  --risk-ink:#FF9DB0;--risk-soft:#3A1620;color-scheme:dark}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{font:14px/1.6 var(--f);font-variant-numeric:tabular-nums;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
a{color:var(--orange-ink)}
h1,h2,h3{margin:0;text-wrap:balance}
h1{font-size:30px;line-height:38px;font-weight:700;letter-spacing:-.012em}
h2{font-size:18px;line-height:26px;font-weight:700;margin:0 0 10px}
h3{font-size:15px;font-weight:650;margin:0 0 6px}
p{margin:0 0 10px}
.mut{color:var(--muted)}.sm{font-size:14px}.lead{font-size:14.5px;line-height:24px;color:var(--ink2);max-width:70ch}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.sp{flex:1}
:focus-visible{outline:2px solid var(--orange);outline-offset:2px;border-radius:6px}
::selection{background:#FFD3B0;color:#0B2E25}

/* ---------- buttons: background sweeps in from the left on hover (a pseudo-element, so contrast stays measurable) ---------- */
button,.btn{font:inherit;font-weight:600;font-size:14px;height:38px;padding:0 16px;border-radius:var(--r-ctl);border:1px solid var(--line2);background:var(--surface);color:var(--ink);
  cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;position:relative;overflow:hidden;z-index:0;
  transition:color .22s ease .06s,border-color .2s,transform .12s var(--ease)}
button::before,.btn::before{content:"";position:absolute;inset:0;background:var(--ink);transform:translateX(-101%);transition:transform .36s var(--ease);z-index:-1}
button:hover:not(:disabled),.btn:hover{color:var(--bg);border-color:var(--ink)}
button:hover:not(:disabled)::before,.btn:hover::before{transform:none}
button:active:not(:disabled),.btn:active{transform:scale(.97)}
button.p,.btn.p{background:var(--orange);border-color:var(--orange);color:var(--on-orange);font-weight:700}
button.p::before,.btn.p::before{background:var(--brand)}
button.p:hover:not(:disabled),.btn.p:hover{color:#fff;border-color:var(--brand)}
button.dk,.btn.dk{background:var(--ink);border-color:var(--ink);color:var(--bg)}
button.dk::before,.btn.dk::before{background:var(--orange)}button.dk:hover:not(:disabled),.btn.dk:hover{color:var(--on-orange);border-color:var(--orange)}
button.warn,.btn.warn{color:var(--risk-ink);border-color:var(--risk-ink)}
button.warn::before,.btn.warn::before{background:var(--risk)}button.warn:hover:not(:disabled),.btn.warn:hover{color:#fff;border-color:var(--risk)}
button.s,.btn.s{height:32px;padding:0 12px;font-size:12.5px;border-radius:8px}
/* disabled: grey with a dashed border, still readable (no transparency: the text must keep 4.5:1 contrast) */
button:disabled,button.p:disabled{background:var(--wash);border:1px dashed var(--line2);color:var(--muted);cursor:not-allowed;font-weight:600}
button:disabled::before{display:none}
.btn[aria-disabled=true],.btn[aria-disabled=true]:hover{background:#E2E8E4;border-color:#E2E8E4;color:#51675D;cursor:not-allowed}
.btn[aria-disabled=true]::before{display:none}
button.lnk{height:auto;min-height:32px;padding:4px 2px;border:0;background:none;color:var(--orange-ink);text-decoration:underline;text-underline-offset:3px}
button.lnk::before{display:none}button.lnk:hover:not(:disabled){color:var(--orange-ink)}

/* ---------- tags (pills): green = ok / done, orange = to do, red = risk / recording, grey = neutral ---------- */
.tag{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:600;background:var(--wash);color:var(--muted);white-space:nowrap}
.tag.ok{background:var(--green-soft);color:var(--green)}
.tag.o,.tag.live{background:var(--orange-mid);color:#8A3600}
.tag.bad{background:var(--risk-soft);color:var(--risk-ink)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tag.o,:root:not([data-theme="light"]) .tag.live{color:#FFB27A}}
:root[data-theme="dark"] .tag.o,:root[data-theme="dark"] .tag.live{color:#FFB27A}

/* ---------- forms ---------- */
input,select,textarea{font:inherit;font-size:14px;color:var(--ink);background:var(--surface);border:1px solid var(--line2);border-radius:var(--r-ctl);padding:8px 11px;max-width:100%;
  transition:border-color .15s,box-shadow .15s}
input,select{min-height:40px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(31,107,84,.18)}
select{-webkit-appearance:none;appearance:none;padding-right:32px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2362776D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
label.f{display:block;margin:0 0 14px}label.f>span{display:block;font-size:14px;font-weight:500;color:var(--ink2);margin-bottom:6px}
label.f input,label.f select,label.f textarea{width:100%}
input[type=checkbox],input[type=radio]{width:20px;height:20px;min-height:0;accent-color:var(--orange);flex:0 0 auto;margin:2px 0 0}
label.chk{display:flex;gap:12px;align-items:flex-start;padding:10px 0;min-height:44px;margin:0;cursor:pointer}

/* ---------- panels, tables ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pan);padding:22px;margin:0 0 16px;min-width:0}
.card .card{border:0;background:var(--wash);border-radius:12px;padding:16px}
.note{background:var(--wash);border-radius:12px;color:var(--ink2);padding:12px 14px;line-height:21px;font-size:13.5px}
.empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:40px 16px;color:var(--muted);text-align:center}
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{text-align:left;font-size:12px;font-weight:500;color:var(--muted);padding:10px 12px;border-bottom:1px solid var(--line2);white-space:nowrap}
.tbl td{padding:13px 12px;border-bottom:1px solid var(--line);vertical-align:middle;white-space:nowrap}  /* narrow screens scroll the table sideways instead of breaking names and codes */
.tbl tbody tr{transition:background .15s}.tbl tbody tr:hover td{background:var(--wash)}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl .num{text-align:right}.tbl td.acts{white-space:nowrap;text-align:right}
.code{font-family:"Geist Mono",ui-monospace,Menlo,Consolas,monospace;font-size:14px;color:var(--ink2)}
.stats{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.stats button{height:34px;padding:0 12px;font-size:13px;font-weight:500;border-radius:999px}
.stats button b{font-weight:700}
.stats button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.quote{border-left:3px solid var(--orange);padding:6px 12px;margin:8px 0;background:var(--wash);border-radius:0 10px 10px 0}

/* ---------- staff shell: dark-green nav + white canvas ---------- */
.app{display:flex;min-height:100vh}
nav.side{flex:0 0 244px;width:244px;background:var(--nav);color:var(--nav-ink);padding:22px 14px 18px;display:flex;flex-direction:column;gap:6px;position:sticky;top:0;height:100vh;overflow:auto}
nav.side .brand{display:flex;align-items:center;padding:0 8px 14px}
nav.side .brandsvg{width:132px;height:auto;display:block}
nav.side .sec{font-size:12px;letter-spacing:.04em;color:#7FA394;padding:14px 12px 4px}
nav.side .sec b{display:block;color:#E8EFEA;font-size:13px;letter-spacing:0;font-weight:600;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
nav.side a.nv{display:flex;align-items:center;gap:10px;height:38px;padding:0 12px;border-radius:10px;color:var(--nav-ink);text-decoration:none;font-size:13.5px;font-weight:500;position:relative;white-space:nowrap}
nav.side a.nv:hover{background:rgba(255,255,255,.07);color:#fff}
nav.side a.nv[aria-current=page]{background:var(--nav-on);color:#fff;font-weight:600}
nav.side a.nv[aria-current=page]::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:2px;background:var(--orange)}
nav.side a.nv .ic{width:18px;display:inline-flex;justify-content:center;color:#FF8A3D}
nav.side a.nv.sub{padding-left:40px;height:36px}
nav.side .me{margin-top:auto;padding:14px 8px 0;border-top:1px solid #12392C;display:flex;flex-direction:column;gap:8px;font-size:12.5px;color:#BFD9CE}
nav.side .me b{color:#fff;font-weight:600}
nav.side .me button{height:36px;background:#0A2F23;border-color:#1A4A39;color:#E8EFEA;font-size:12.5px}
nav.side .me button::before{background:var(--orange)}nav.side .me button:hover:not(:disabled){color:var(--on-orange);border-color:var(--orange)}
.work{flex:1;min-width:0;display:flex;flex-direction:column}
.top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:14px;min-height:60px;padding:10px var(--gx);background:color-mix(in srgb,var(--bg) 90%,transparent);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line)}
.top .crumb{font-size:12.5px;color:var(--muted);white-space:nowrap}
.top .crumb a{color:var(--muted);text-decoration:none}.top .crumb a:hover{color:var(--orange-ink);text-decoration:underline}
.top .pname{font-size:17px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.top .meta{display:flex;gap:6px;align-items:center;margin-left:auto}
main{padding:24px var(--gx) 72px;display:flex;flex-direction:column;gap:18px;width:100%;max-width:calc(1240px + 2*var(--gx))}
.head{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap}
.head .sp{min-width:8px}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{display:inline-flex;align-items:center;height:44px;padding:0 16px;color:var(--muted);text-decoration:none;font-weight:600;white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs a:hover{color:var(--ink)}.tabs a.on{color:var(--ink);border-bottom-color:var(--orange)}
a.back{display:inline-flex;align-items:center;min-height:36px;font-size:13px;color:var(--muted);text-decoration:none}a.back:hover{color:var(--orange-ink)}

/* transcript lines */
.seg{display:grid;grid-template-columns:64px 74px 1fr;gap:10px;padding:12px 0;border-bottom:1px solid var(--line)}
.seg .t{color:var(--muted);font-size:13px}.seg .s{font-size:13px;font-weight:600}.seg .s.participant{color:var(--orange-ink)}
.seg .zh{color:var(--muted);margin-top:2px}
.segacts{display:flex;gap:6px;margin-top:2px}.segacts a{display:inline-flex;align-items:center;padding:6px 10px 6px 0;min-height:36px}
.seg .t a.sk{display:inline-flex;align-items:center;min-height:36px;min-width:44px;font-size:13px}

/* login */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px;background:var(--wash)}
.login .box{width:100%;max-width:420px}
.login .logo{background:var(--brand);border-radius:var(--r-pan) var(--r-pan) 0 0;padding:22px 24px}
.login .logo .brandsvg{width:200px;height:auto;display:block}
.login form{border-radius:0 0 var(--r-pan) var(--r-pan);border-top:0;margin:0}

/* ---------- overlays ---------- */
.modal{position:fixed;inset:0;background:rgba(6,35,25,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:50;padding:16px;animation:fadein .18s ease both}
.modal>div{background:var(--surface);color:var(--ink);border-radius:var(--r-pop);padding:26px;max-width:560px;width:100%;max-height:90vh;overflow:auto;box-shadow:0 28px 80px rgba(6,35,25,.3);animation:pop .26s var(--ease) both}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:99;display:flex;align-items:center;gap:10px;max-width:90vw;background:var(--ink);color:var(--bg);padding:11px 16px 11px 12px;border-radius:12px;font-weight:600;font-size:13.5px;box-shadow:0 12px 36px rgba(6,35,25,.28)}
.toast::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--orange);flex:none}
.toast.err{background:var(--risk)}.toast.err::before{background:#fff}
code.copy{display:block;background:var(--wash);border:1px solid var(--line);padding:10px 12px;border-radius:10px;word-break:break-all;font-size:14px}
@keyframes fadein{from{opacity:0}}@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.98)}}
main.enter>*{animation:viewin .34s var(--ease) both}@keyframes viewin{from{opacity:0;transform:translateY(6px)}}

/* ---------- phone: the nav becomes a horizontal strip ---------- */
@media (max-width:820px){
  .app{flex-direction:column}
  nav.side{position:static;height:auto;width:auto;flex:none;flex-direction:row;align-items:center;gap:4px;padding:8px 10px;overflow-x:auto;scrollbar-width:none}
  nav.side::-webkit-scrollbar{display:none}
  nav.side .brand{padding:0 6px 0 2px}nav.side .brandsvg{width:92px}
  nav.side .sec{display:none}
  nav.side a.nv,nav.side a.nv.sub{height:38px;padding:0 12px;flex:none}
  nav.side a.nv[aria-current=page]::before{display:none}
  nav.side .me{margin:0 0 0 4px;padding:0;border:0;flex-direction:row;align-items:center;flex:none}
  nav.side .me span{display:none}
  .top{position:static;backdrop-filter:none;-webkit-backdrop-filter:none;min-height:52px}
  .top .crumb a{display:inline-flex;align-items:center;min-height:36px}
  button.s,.btn.s,.stats button{height:38px}  /* phone tap targets: at least 36px (design spec 1.8) */
  .top .meta .tag:not(.keep){display:none}
  h1{font-size:25px;line-height:32px}
  main{padding:18px 16px 72px}
  .card{padding:16px}
  .seg{grid-template-columns:50px 1fr}.seg .s{grid-column:2}.seg .x{grid-column:1/-1}
}

/* ---------- participant side: bright, one thing at a time ---------- */
.pbar{background:var(--brand);height:52px;display:flex;align-items:center;padding:0 16px}
.pbar .brandsvg{height:40px;width:auto;display:block}
.pwrap{max-width:440px;margin:0 auto;padding:18px 16px 40px;color:#0B382C}
.pwrap h1{font-size:24px;line-height:32px}
.pwrap p,.pwrap .mut{color:#55645C}
.psteps{display:flex;gap:4px;margin:0 0 6px}.psteps i{flex:1;height:6px;border-radius:3px;background:#E2E8E4}
.psteps i.done{background:#1F6B54}.psteps i.on{background:#FF6A00}
.pstep{font-size:14px;color:#55645C;margin:0 0 14px}
.pbig{width:100%;height:52px;border-radius:16px;font-size:16px;font-weight:700;margin-top:14px}
.pcheck{display:flex;align-items:center;gap:12px;min-height:50px;padding:10px 14px;border:2px solid #EAE3D3;border-radius:14px;margin:0 0 10px;font-weight:600}
.pcheck .st{margin-left:auto;font-weight:700;font-size:13px}
.pcheck.ok{border-color:#1F6B54}.pcheck.ok .st{color:#1F6B54}
.pcheck.bad{border-color:#C62B4B}.pcheck.bad .st{color:#A8203E}
.pcheck .lvl{flex:1;height:8px;border-radius:4px;background:#E2E8E4;overflow:hidden;max-width:120px}.pcheck .lvl i{display:block;height:100%;width:0;background:#FF6A00;transition:width .1s}
.perr,.pwrap .perr{color:#A8203E;font-weight:700}  /* errors: red, bold, and say what to do (design spec part 2) */
.pwait{display:flex;align-items:center;gap:12px;padding:14px;border-radius:14px;background:#F4F7F5;margin:12px 0}
.pwait .dot{width:10px;height:10px;border-radius:50%;background:#FF6A00;flex:none}
.pwait.go .dot{background:#1F6B54}
@media (prefers-reduced-motion:no-preference){.pwait:not(.go) .dot{animation:rec 1.4s ease-in-out infinite}}
.pwrap .card{border-color:#E2E8E4;background:#fff}
.pwrap label.chk{border-bottom:1px solid #E2E8E4}
.pwrap input,.pwrap select{background:#fff;color:#0B382C}
body.participant,.stage.t-light{--bg:#FFFFFF;--surface:#FFFFFF;--wash:#F4F7F5;--ink:#0B382C;--ink2:#2F4A40;--muted:#55645C;--line:#E2E8E4;--line2:#C9D4CD;
  --orange-ink:#B84900;--orange-soft:#FFF7F0;--orange-mid:#FFE6D2;--green:#1F6B54;--green-soft:#E3F1EA;--risk-ink:#A8203E;--risk-soft:#F9DDE3;color-scheme:light}
body.participant{background:#fff;color:#0B382C}
body.participant .tag.o,body.participant .tag.live,.stage.t-light .tag.o,.stage.t-light .tag.live{color:#8A3600}

/* ---------- video room: white light theme by default, dark green on request (remembered in this browser) ---------- */
.stage.t-light{--r-bg:#FFFFFF;--r-pan:#F4F7F5;--r-line:#E2E8E4;--r-ink:#0B382C;--r-mut:#51675D;--r-h:#B84900;--r-tile:#E9EEEB;--r-offink:#2F4A40;
  --r-bar:rgba(255,255,255,.97);--r-btn:#FFFFFF;--r-btnink:#0B382C;--r-btnline:#C9D4CD;--r-sweep:#0B382C;--r-sweepink:#FFFFFF;
  --r-dis:#EEF2EF;--r-disink:#51675D;--r-bad:#FFFFFF;--r-badink:#A8203E;--r-badline:#C62B4B}
.stage.t-dark{--r-bg:#0E1A16;--r-pan:#15271F;--r-line:#24413A;--r-ink:#E8EFEA;--r-mut:#A9BDB4;--r-h:#FF9A55;--r-tile:#1B3128;--r-offink:#CFE3DA;
  --r-bar:rgba(6,35,25,.96);--r-btn:#1B3128;--r-btnink:#E8EFEA;--r-btnline:#24413A;--r-sweep:rgba(255,106,0,.45);--r-sweepink:#FFFFFF;
  --r-dis:#18241F;--r-disink:#93A79E;--r-bad:#3A1620;--r-badink:#FFB3C1;--r-badline:#C62B4B;color-scheme:dark}
.stage{background:var(--r-bg);min-height:100vh;color:var(--r-ink)}
.rhead{display:flex;align-items:center;gap:12px;padding:10px 16px;flex-wrap:wrap;background:var(--brand);color:#fff;border-bottom:1px solid var(--r-line);min-height:56px}
.stage.t-dark .rhead{background:var(--nav)}
.rhead .brandsvg{height:34px;width:auto;display:block}
.rhead .thm{margin-left:auto;height:36px;background:#0F3A2C;border-color:#2C6A55;color:#E8EFEA;font-size:13px}
.rhead .thm::before{background:var(--orange)}.rhead .thm:hover:not(:disabled){color:var(--on-orange);border-color:var(--orange)}
.rwho{font-weight:700}
.recdot{color:#FFD9D3;font-weight:600;display:inline-flex;align-items:center;gap:8px}
.recdot::before{content:"";width:10px;height:10px;border-radius:50%;background:#FF5A45;flex:none}.recdot:not([hidden])::before{animation:rec 1.4s ease-in-out infinite}
@keyframes rec{50%{opacity:.55}}
.rwarn{color:#FFD9A8;font-size:14px}
.rmsg{padding:10px 16px;color:var(--r-ink);font-size:14px}
.rmsg b{color:var(--r-ink)}
.rbody{display:grid;grid-template-columns:260px minmax(0,1fr) 320px;gap:12px;padding:0 12px 96px}
.rpan{background:var(--r-pan);border:1px solid var(--r-line);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:10px;min-width:0;align-self:start}
.rpan h3{font-size:13px;color:var(--r-h);letter-spacing:.04em;margin:0}
.rpan .kv{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;padding:4px 0;border-bottom:1px dashed var(--r-line)}
.rpan .kv span{color:var(--r-mut)}
.rpan p{color:var(--r-mut);font-size:14px;margin:0}
.rpan .wst{font-size:14px;font-weight:600}
.rpan .row button{flex:1;background:var(--r-btn);border-color:var(--r-btnline);color:var(--r-btnink)}
.rpan .row button::before{background:var(--r-sweep)}.rpan .row button:hover:not(:disabled){color:var(--r-sweepink)}
.rpan .row button.p{background:var(--orange);border-color:var(--orange);color:var(--on-orange)}
.rpan .row button.p::before{background:var(--brand)}.rpan .row button.p:hover:not(:disabled){color:#fff}
.rpan .row button:disabled{background:var(--r-dis);border:1px dashed var(--r-btnline);color:var(--r-disink)}
.vgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:10px}
.tile{position:relative;background:var(--r-tile,#1B3128);border-radius:12px;aspect-ratio:16/9;overflow:hidden;border:2px solid transparent}
.tile.me{border-color:#FF6A00}
.tile video{width:100%;height:100%;object-fit:cover;display:block}
.tile .nm{position:absolute;left:10px;bottom:8px;background:rgba(0,0,0,.62);color:#fff;padding:2px 10px;border-radius:8px;font-size:13px}
.tile .off{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--r-tile);color:var(--r-offink);font-size:14px}
.tile .tnote{position:absolute;left:0;right:0;bottom:44px;text-align:center;color:#CFE3DA;font-size:14px}
.bar{position:fixed;left:0;right:0;bottom:0;display:flex;gap:10px;justify-content:center;padding:12px;background:var(--r-bar);border-top:1px solid var(--r-line);flex-wrap:wrap;z-index:5}
.bar button,.bar .btn{background:var(--r-btn);border-color:var(--r-btnline);color:var(--r-btnink)}
.bar button::before,.bar .btn::before{background:var(--r-sweep)}
.bar button:hover:not(:disabled),.bar .btn:hover{color:var(--r-sweepink);border-color:#FF9A55}
.bar button.p,.bar .btn.p{background:var(--orange);border-color:var(--orange);color:var(--on-orange)}
.bar button.p::before{background:var(--brand)}.bar button.p:hover:not(:disabled){color:#fff}
.bar button.bad{background:var(--r-bad);border-color:var(--r-badline);color:var(--r-badink)}
.bar button.bad::before{background:#C62B4B}.bar button.bad:hover:not(:disabled){color:#fff}
.bar button[aria-pressed=true]{border-color:#FF6A00;box-shadow:inset 0 0 0 1px #FF6A00}
.bar button:disabled{opacity:1;background:var(--r-dis);border:1px dashed var(--r-btnline);color:var(--r-disink)}
@media (max-width:1100px){.rbody{grid-template-columns:1fr}.rpan.side{order:2}}

/* ---------- AI moderation: the text chat (participant) and the AI panel (team) ---------- */
.chat{display:flex;flex-direction:column;gap:8px}
.chat .log{display:flex;flex-direction:column;gap:8px;max-height:340px;min-height:96px;overflow:auto;padding:2px}
.chat .m{max-width:90%;padding:8px 12px;border-radius:12px;font-size:14.5px;line-height:1.5;background:var(--r-tile);color:var(--r-ink);overflow-wrap:anywhere;align-self:flex-start}
.chat .m .who{display:block;font-size:12.5px;color:var(--r-mut);margin-bottom:2px}
.chat .m.me{align-self:flex-end;background:var(--r-btn);border:1px solid var(--orange)}
.chat .m.whisper{background:transparent;border:1px dashed var(--r-btnline);align-self:stretch;max-width:100%}
.chat .m.human{border:1px solid var(--r-btnline)}
.chat .m details{margin-top:4px;font-size:13px;color:var(--r-mut)}
.chat .m details summary{cursor:pointer;min-height:24px}
.chat form{display:flex;gap:8px;align-items:flex-end}
.chat form textarea,.rpan textarea{flex:1;min-width:0;min-height:44px;resize:vertical;font:inherit;font-size:15px;padding:8px 10px;border-radius:10px;border:1px solid var(--r-btnline);background:var(--r-btn);color:var(--r-btnink)}
.chat form button,.rpan form button{flex:none;min-height:40px;background:var(--r-btn);border-color:var(--r-btnline);color:var(--r-btnink)}
.chat form button.p,.rpan form button.p{background:var(--orange);border-color:var(--orange);color:var(--on-orange)}
.chat form button:disabled,.rpan form button:disabled{background:var(--r-dis);border:1px dashed var(--r-btnline);color:var(--r-disink)}
.chat .closed{font-size:14px;color:var(--r-mut);margin:0}
.rpan form{display:flex;flex-direction:column;gap:6px}
.rpan form label{font-size:13px;color:var(--r-mut)}
.alertbox{padding:10px 12px;border-radius:10px;border:1px solid var(--r-badline);background:var(--r-bad);color:var(--r-badink);font-size:14px;font-weight:600;display:flex;flex-direction:column;gap:8px}
.alertbox.yellow{border-color:var(--r-h);color:var(--r-ink);background:var(--r-pan)}
.alertbox button{align-self:flex-start;min-height:36px;background:var(--r-btn);border-color:var(--r-btnline);color:var(--r-btnink)}
.stage.solo .rpan.chat{margin-top:12px;align-self:auto}
/* the participant sees one simple column, never the internal side panels */
.stage.solo .rbody{display:block;max-width:960px;margin:0 auto}
/* ---------- list tables become cards on phones (labels come from the header row) ---------- */
@media (max-width:640px){
  .tbl.rc thead{display:none}
  .tbl.rc,.tbl.rc tbody{display:block}
  .tbl.rc tr{display:block;border:1px solid var(--line);border-radius:12px;padding:6px 14px;margin:0 0 10px;background:var(--surface)}
  .tbl.rc tbody tr:hover td{background:none}
  .tbl.rc td{display:flex;justify-content:space-between;align-items:center;gap:12px;border:0;padding:7px 0;white-space:normal;text-align:right}
  .tbl.rc td::before{content:attr(data-l);color:var(--muted);font-size:12.5px;text-align:left;flex:none}
  .tbl.rc td.acts{justify-content:flex-end;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:4px;padding-top:10px}
  .tbl.rc td.acts::before{display:none}
  .card.scroll:has(.tbl.rc){border:0;padding:0!important;background:none}
}
.group{display:flex;align-items:center;gap:10px;margin:6px 0 -6px}.group h2{margin:0;font-size:16px}

/* ---------- project cards ---------- */
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.filters input[type=search]{flex:1;min-width:200px;max-width:360px}
.pcard{display:flex;flex-direction:column;gap:12px;text-decoration:none;color:var(--ink);transition:border-color .2s,transform .2s var(--ease)}
.pcard:hover{border-color:var(--ink)}
.pcard h3{font-size:16px;margin:0}
.pcard .nums{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pcard .nums div{background:var(--wash);border-radius:10px;padding:8px 10px}
.pcard .nums b{display:block;font-size:20px;line-height:26px;font-weight:650}
.pcard .nums span{font-size:12px;color:var(--muted)}

/* ---------- project home ---------- */
.hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(16px,3vw,40px);align-items:stretch}
.hero-k{font-size:13px;color:var(--muted)}
.hero-n{display:flex;align-items:baseline;gap:10px;margin:4px 0 14px}
.hero-n b{font-size:clamp(52px,6vw,80px);line-height:1;font-weight:650;letter-spacing:-.04em}
.hero-n span{font-size:16px;color:var(--muted)}
.meters{display:grid;gap:12px;margin:0}
.meter{display:grid;grid-template-columns:88px 1fr auto;gap:12px;align-items:center;font-size:13.5px}
.meter dt{color:var(--ink2);font-weight:600}.meter dd{margin:0;color:var(--ink2)}
.pbar6{height:6px;border-radius:3px;background:var(--line);overflow:hidden}.pbar6 i{display:block;height:100%;background:var(--green);border-radius:3px;transform-origin:left center}
.pbar6.o i{background:var(--orange)}
main.enter .pbar6 i{animation:grow 1s var(--ease) .15s both}@keyframes grow{from{transform:scaleX(0)}}
.next{border-left:4px solid var(--orange);display:flex;flex-direction:column;gap:12px}
.next p{font-size:16px;font-weight:600;margin:0}
.feed{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.feed li{display:grid;grid-template-columns:96px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.feed li:last-child{border-bottom:0}.feed time{color:var(--muted);font-size:13px}
@media (max-width:900px){.hero{grid-template-columns:1fr}}

/* share page watermark */
.wm{position:absolute;inset:0;pointer-events:none;display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;color:rgba(255,255,255,.22);font-size:13px;overflow:hidden}
.wm span{display:flex;align-items:center;justify-content:center;transform:rotate(-18deg);white-space:nowrap}

/* ---------- logo animation (plays once on load) ---------- */
.brandsvg{display:block}
.brandsvg .lg-wl-a,.brandsvg .lg-wr-a{transform-box:view-box;transform-origin:0 0}
.brandsvg .lg-disc{transform-box:fill-box;transform-origin:50% 50%}
.brandsvg .lg-body{transform-box:fill-box;transform-origin:50% 100%}
/* the phoenix is unveiled from its tail up (a clip that rises), while the wings slowly unfold from raised-and-closed to open */
.brandsvg.play .lg-disc{animation:lgDisc .8s cubic-bezier(.2,.8,.2,1) backwards}
.brandsvg.play .lg-rain use{animation:lgRain .5s ease-out backwards}
.brandsvg.play .lg-bird{animation:lgRise 1.5s cubic-bezier(.33,0,.2,1) .2s backwards}
.brandsvg.play .lg-body{animation:lgLift 1.5s cubic-bezier(.33,0,.2,1) .2s backwards}
.brandsvg.play .lg-wl-a{animation:lgWl 1.9s cubic-bezier(.3,.1,.2,1) .55s backwards}
.brandsvg.play .lg-wr-a{animation:lgWr 1.9s cubic-bezier(.3,.1,.2,1) .55s backwards}
.brandsvg.play .lg-word{animation:lgWord .7s cubic-bezier(.2,.8,.2,1) 1.7s backwards}
@keyframes lgDisc{from{opacity:0;transform:scale(.8)}}
@keyframes lgRain{from{opacity:0;transform:translateY(-16px)}}
@keyframes lgRise{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes lgLift{from{transform:translateY(40px)}}
@keyframes lgWl{0%{transform:scaleX(.28) rotate(10deg)}100%{transform:none}}
@keyframes lgWr{0%{transform:scaleX(.28) rotate(-10deg)}100%{transform:none}}
@keyframes lgWord{from{opacity:0;transform:translateX(-14px)}}

@media (prefers-reduced-motion:reduce){
  *,*::before{transition:none!important}
  .modal,.modal>div,main.enter>*,main.enter .pbar6 i{animation:none!important}
  .brandsvg.play *{animation:none!important}
  .recdot:not([hidden])::before{animation:none}
}