/* War Room — design system (from the War Room design prototype). Plain CSS, strict CSP: no inline styles anywhere;
   runtime values (widths, positions, scale) arrive as CSS custom properties set from JS. */

/* ---------- fonts (self-hosted, OFL) ---------- */
@font-face { font-family: 'Geist'; src: url('/fonts/Geist-Variable.woff2') format('woff2'); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('/fonts/GeistMono-Variable.woff2') format('woff2'); font-weight: 400 600; font-style: normal; font-display: swap; }

/* ---------- tokens ---------- */
:root {
  --bg: #07060b;
  --panel-a: rgba(28,25,38,.72); --panel-b: rgba(16,14,22,.72);
  --panel: linear-gradient(180deg, var(--panel-a), var(--panel-b));
  --line: rgba(255,255,255,.08); --line-2: rgba(255,255,255,.1); --line-3: rgba(255,255,255,.12);
  --text: #f1edf7; --text-2: #e6e1ee; --text-3: #d9d3e4; --text-4: #c9c2d6;
  --muted: #a39cb4; --dim: #8a83a0; --dim-2: #6f6880;
  --ember: #ff6a3d; --ember-hi: #ff7f4d; --ember-lo: #ec5328; --ember-soft: #ff8a5c; --ember-softer: #ffb38f; --ember-pale: #ffd2bf;
  --gold: #f5b94a; --gold-hi: #ffd27a;
  --ok: #4fc08d; --ok-hi: #6fd6a5; --warn: #e0a43a; --warn-hi: #f5c46a; --bad: #ff5d6c; --bad-hi: #ff8a95;
  --violet-a: #4a4178; --violet-b: #8b7cff;
  --input-bg: rgba(6,5,10,.7);
  --mono: 'Geist Mono', ui-monospace, Consolas, monospace;
  --ease: cubic-bezier(.2,.8,.2,1);
  --primary: linear-gradient(180deg, var(--ember-hi), var(--ember-lo));
  --main-pb: 64px; --toast-b: 28px; --sticky-b: 16px;
  color-scheme: dark;
}
@media (max-width: 759px) { :root { --main-pb: 100px; --toast-b: 90px; --sticky-b: 84px; } }
@media (max-width: 759px) { body.is-debate { --main-pb: 130px; --toast-b: 100px; } }

/* ---------- base ---------- */
/* touch: the page only pans up/down (pinch-zoom kept); no sideways drag or rubber-band of the whole page */
html { overflow-x: hidden; } /* on html only: it goes to the viewport, so the sticky top bar keeps working */
html, body { overscroll-behavior: none; }
body { touch-action: pan-y pinch-zoom; }
.stabs, .strip, .btabs, .dec-filters, .code-box code, .path, .diff, .lib-text, .md-pv, .md-ed, .pills { overscroll-behavior-x: contain; }
.stabs, .strip, .btabs, .dec-filters { touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: Geist, system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
a { color: var(--gold); text-decoration: none; } a:hover { color: var(--gold-hi); }
button, input, select, textarea { font-family: inherit; }
input::placeholder, textarea::placeholder { color: var(--dim-2); }
::selection { background: rgba(255,106,61,.35); }
:focus-visible { outline: 2px solid var(--ember-softer); outline-offset: 2px; }
input[type=range] { accent-color: var(--ember); }
select option { background: #15131d; color: var(--text); }
::-webkit-scrollbar { width: 10px; height: 8px; } ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-track { background: transparent; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.grow { flex: 1; }
.mono { font-family: var(--mono); }

/* ---------- animations (exact copies) ---------- */
@keyframes wrPing { 0% { transform: scale(1); opacity: .7 } 100% { transform: scale(2.8); opacity: 0 } }
@keyframes wrPulse { 0%, 100% { transform: scale(1); opacity: 1 } 50% { transform: scale(.7); opacity: .55 } }
@keyframes wrRipple { 0% { transform: scale(1); opacity: .8 } 100% { transform: scale(1.5); opacity: 0 } }
@keyframes wrSpin { to { transform: rotate(360deg) } }
@keyframes wrSpinRev { to { transform: rotate(-360deg) } }
@keyframes wrRise { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }
@keyframes wrSweep { 0% { transform: translateX(-100%) } 100% { transform: translateX(100%) } }
@keyframes wrWave { 0%, 100% { transform: scaleY(.2) } 50% { transform: scaleY(1) } }
@keyframes wrCaret { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } }
@keyframes wrBreathe { 0%, 100% { transform: scale(1) } 50% { transform: scale(1.03) } }
@keyframes wrDot { 0%, 80%, 100% { transform: translateY(0); opacity: .35 } 40% { transform: translateY(-4px); opacity: 1 } }
@keyframes wrFlicker { 0%, 100% { transform: scale(1) skewX(0) } 30% { transform: scale(1.05,.96) skewX(-3deg) } 60% { transform: scale(.97,1.04) skewX(2deg) } }
@keyframes wrGrid { from { background-position: 0 0 } to { background-position: 0 64px } }
@keyframes wrDrift { 0%, 100% { transform: translate(0,0) } 50% { transform: translate(4%,3%) } }
@keyframes wrDrawer { from { transform: translateX(48px); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes wrSheet { from { transform: translateY(60px); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes wrToast { from { transform: translateY(16px) scale(.96); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes wrShine { 0% { transform: translateX(-120%) skewX(-20deg) } 55%, 100% { transform: translateX(320%) skewX(-20deg) } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important } }
.rise { animation: wrRise .55s ease var(--d, 0s) backwards; }

/* ---------- background ---------- */
.bg { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; background: var(--bg); }
.bg-glow { position: absolute; inset: -20%; background: radial-gradient(40% 35% at 18% 8%, rgba(255,106,61,.18), transparent 70%), radial-gradient(35% 30% at 92% 4%, rgba(124,106,255,.14), transparent 70%); animation: wrDrift 18s ease-in-out infinite; }
.bg-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 75%); }
.app { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; container-type: inline-size; overflow-x: clip; }

/* ---------- flame logo ---------- */
.flame { animation: wrFlicker 2.4s ease-in-out infinite; transform-origin: 50% 90%; }
.flame .f1 { fill: var(--ember); } .flame .f2 { fill: var(--gold); }
.logo-sm { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 70%, rgba(255,106,61,.35), #120e16 70%); box-shadow: inset 0 0 0 1px rgba(255,140,90,.35), 0 0 18px rgba(255,106,61,.35); }

/* ---------- top bar ---------- */
.top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 14px; height: 62px; padding: 0 clamp(14px, 3cqi, 28px); background: rgba(9,8,13,.7); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); border-bottom: 1px solid rgba(255,255,255,.07); }
.brand { display: flex; align-items: center; gap: 10px; background: none; border: 0; color: var(--text); cursor: pointer; padding: 0; height: 44px; }
.brand-name { font-weight: 650; font-size: 16px; letter-spacing: -.01em; }
.live-pill { display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 11px; border-radius: 999px; border: 1px solid rgba(255,106,61,.5); background: rgba(255,106,61,.12); color: var(--ember-pale); font-family: var(--mono); font-size: 11px; letter-spacing: .14em; cursor: pointer; }
.ping { position: relative; width: 8px; height: 8px; flex: 0 0 auto; }
.ping > i { position: absolute; inset: 0; border-radius: 50%; background: var(--ember); }
.ping > i:first-child { animation: wrPing 1.6s ease-out infinite; }
.ping.lg { width: 10px; height: 10px; } .ping.glow > i:last-child { box-shadow: 0 0 12px var(--ember); }
.desk-nav { display: flex; align-items: center; gap: 4px; }
.nav-btn { position: relative; height: 38px; padding: 0 14px; border-radius: 10px; border: 0; background: transparent; color: var(--muted); font-size: 14.5px; font-weight: 500; cursor: pointer; transition: color .2s, background .2s; }
.nav-btn:hover { color: #fff; }
.nav-btn.on { background: rgba(255,255,255,.06); color: #fff; }
.nav-btn .bar { position: absolute; left: 14px; right: 14px; bottom: 3px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--ember), var(--gold)); opacity: 0; transition: opacity .3s; }
.nav-btn.on .bar { opacity: 1; }
.nav-sep { width: 1px; height: 22px; background: rgba(255,255,255,.1); margin: 0 6px; }
.name-pill { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px 0 4px; border-radius: 999px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); color: var(--text-2); font-size: 14px; cursor: pointer; }
.name-pill:hover { border-color: rgba(255,255,255,.22); }
.init { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #3a2a3a, #1c1926); font-weight: 600; font-size: 13px; color: var(--ember-pale); flex: 0 0 auto; }
.logout { height: 38px; padding: 0 12px; border-radius: 10px; border: 0; background: none; color: var(--muted); font-size: 14.5px; cursor: pointer; }
.logout:hover { color: #fff; }
.phone-av { width: 44px; height: 44px; border-radius: 50%; border: 0; background: none; display: grid; place-items: center; cursor: pointer; }
.phone-av .init { width: 34px; height: 34px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); font-size: 14px; }
.top-sweep { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; overflow: hidden; }
.top-sweep > i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, transparent 30%, var(--ember) 48%, var(--gold) 52%, transparent 70%); animation: wrSweep 2.8s linear infinite; }

/* ---------- main ---------- */
.main { flex: 1; width: 100%; max-width: 1240px; margin: 0 auto; padding: clamp(18px, 3cqi, 32px) clamp(16px, 3cqi, 32px) var(--main-pb); position: relative; z-index: 1; }
.back { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0; margin-bottom: 6px; border: 0; background: none; color: var(--muted); font-size: 14px; cursor: pointer; }
.back:hover { color: #fff; }

/* ---------- type ---------- */
.eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; color: var(--muted); text-transform: uppercase; }
.eyebrow.ember { color: var(--ember-soft); } .eyebrow.gold { color: var(--gold); } .eyebrow.dim { color: var(--dim); }
.eyebrow.g115 { font-size: 11.5px; }
.h-page { margin: 6px 0 4px; font-size: clamp(28px, 4.4cqi, 40px); font-weight: 650; letter-spacing: -.03em; }
.h-page.mb20 { margin-bottom: 20px; } .h-page.mb0 { margin-bottom: 0; }
.sub { color: var(--muted); font-size: 14.5px; }
.lead-p { margin: 0 0 18px; color: var(--muted); font-size: 14.5px; line-height: 1.55; max-width: 760px; }

/* ---------- buttons ---------- */
.btn { height: 46px; padding: 0 18px; border-radius: 12px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: var(--text); font-size: 15px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; transition: filter .2s, transform .1s, background .2s, border-color .2s; }
.btn:hover { background: rgba(255,255,255,.08); }
.btn.primary { border: 0; background: var(--primary); color: #fff; font-weight: 600; padding: 0 20px; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 10px 28px -10px rgba(255,106,61,.75); }
.btn.primary:hover { filter: brightness(1.08); background: var(--primary); }
.btn.primary:disabled { opacity: .4; cursor: default; filter: none; }
.btn.primary.flat { box-shadow: none; }
.btn.h44 { height: 44px; } .btn.h48 { height: 48px; } .btn.h40 { height: 40px; } .btn.h36 { height: 36px; font-size: 13px; border-radius: 9px; padding: 0 12px; }
.btn.danger { border-color: rgba(255,93,108,.35); background: rgba(255,93,108,.06); color: #ffb3ba; }
.btn.ghost { background: none; color: var(--text-4); }
.btn.icon { width: 44px; padding: 0; color: var(--text-2); }
.btn svg { flex: 0 0 auto; }
.btn-flex { flex: 0 0 auto; }
@media (max-width: 759px) { .btn-flex { flex: 1 1 100%; } }
.link-btn { height: 36px; padding: 0; border: 0; background: none; color: var(--gold); font-size: 14px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.link-btn:hover { color: var(--gold-hi); }
.link-btn .chev { transition: transform .3s; } .link-btn.open .chev { transform: rotate(90deg); }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ---------- chips ---------- */
.chip { height: 24px; padding: 0 10px; display: inline-flex; align-items: center; border-radius: 999px; font-size: 12px; white-space: nowrap; border: 1px solid rgba(255,255,255,.1); color: var(--muted); }
.chip.proj { border: 0; background: rgba(255,255,255,.06); color: var(--text-2); font-family: var(--mono); }
.chip.st-live, .chip.st-running { color: var(--ember-pale); border-color: rgba(255,106,61,.6); background: rgba(255,106,61,.16); }
.chip.st-starting { color: var(--ember-pale); border-color: rgba(255,106,61,.6); background: rgba(255,106,61,.1); }
.chip.st-awaiting { color: var(--gold); border-color: rgba(245,185,74,.55); background: rgba(245,185,74,.08); }
.chip.st-approved { color: var(--ok-hi); border-color: rgba(79,192,141,.5); background: rgba(79,192,141,.08); }
.chip.st-declined { color: #ff9aa3; border-color: rgba(255,93,108,.45); background: rgba(255,93,108,.07); }
.chip.st-cancelled { color: var(--muted); border-color: rgba(255,255,255,.14); background: transparent; }
.chip.mono-sm { font-family: var(--mono); font-size: 12px; padding: 3px 9px; height: auto; border-color: rgba(255,255,255,.14); color: var(--text-2); }

/* ---------- inputs ---------- */
.lbl { display: flex; flex-direction: column; gap: 8px; }
.lbl > .t { font-size: 13px; font-weight: 500; color: var(--text-4); }
.lbl > .t .dimmed { color: var(--dim); font-weight: 400; }
.in { width: 100%; height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,.1); background: var(--input-bg); color: var(--text); font-size: 16px; outline: none; transition: border-color .2s, box-shadow .2s; }
.in:focus { border-color: rgba(255,106,61,.7); box-shadow: 0 0 0 4px rgba(255,106,61,.15); }
textarea.in { height: auto; padding: 12px 14px; line-height: 1.5; resize: vertical; }
select.in { padding: 0 12px; }
.in.h46 { height: 46px; } .in.h42 { height: 42px; padding: 0 10px; border-radius: 10px; font-size: 14.5px; border-color: rgba(255,255,255,.12); }
.in.f15 { font-size: 15px; }
.pw-wrap { position: relative; }
.pw-wrap .in { padding-right: 52px; }
.eye { position: absolute; right: 2px; top: 2px; width: 44px; height: 44px; border: 0; background: none; color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.eye:hover { color: var(--text); }
.err-line { font-size: 14px; color: var(--bad-hi); display: flex; gap: 8px; align-items: center; }
.err-line .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--bad); flex: 0 0 auto; }
.rules { display: flex; flex-direction: column; gap: 6px; }
.rule { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--dim); transition: color .3s; }
.rule .mk { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; border: 1px solid currentColor; font-size: 11px; }
.rule.ok { color: var(--ok-hi); }

/* ---------- switch / stepper ---------- */
.switch-track { position: relative; flex: 0 0 auto; width: 42px; height: 24px; border-radius: 999px; background: rgba(255,255,255,.15); transition: background .25s; }
.switch-track > i { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .25s; }
[aria-checked="true"] > .switch-track, [aria-checked="true"] .switch-track { background: var(--ember); }
[aria-checked="true"] > .switch-track > i, [aria-checked="true"] .switch-track > i { left: 21px; }
.switch-track.sm { width: 38px; height: 22px; } .switch-track.sm > i { width: 16px; height: 16px; }
[aria-checked="true"] .switch-track.sm > i { left: 19px; }
.stepper { display: flex; align-items: center; border-radius: 12px; border: 1px solid rgba(255,255,255,.1); background: var(--input-bg); overflow: hidden; }
.stepper button { width: 48px; height: 48px; border: 0; background: none; color: var(--text-2); font-size: 20px; cursor: pointer; }
.stepper button:hover { background: rgba(255,255,255,.06); }
.stepper input { width: 64px; height: 48px; border: 0; background: none; color: #fff; text-align: center; font-family: var(--mono); font-size: 17px; outline: none; -moz-appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------- cards ---------- */
.card { border-radius: 18px; border: 1px solid var(--line); background: var(--panel); }
.card.r20 { border-radius: 20px; }
.empty-box { padding: 40px; text-align: center; color: var(--muted); border: 1px dashed rgba(255,255,255,.14); border-radius: 18px; }

/* ---------- avatars (photo or hue monogram) ---------- */
.av { position: relative; flex: 0 0 auto; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--mono-bg, #1c1926); color: var(--mono-fg, var(--ember-pale)); font-weight: 600; }
.av > img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); }
.av.s34 { width: 34px; height: 34px; font-size: 13px; } .av.s36 { width: 36px; height: 36px; } .av.s38 { width: 38px; height: 38px; }
.av.s40 { width: 40px; height: 40px; font-size: 15px; } .av.s42 { width: 42px; height: 42px; } .av.s52 { width: 52px; height: 52px; } .av.s56 { width: 56px; height: 56px; font-size: 20px; }

/* ---------- login ---------- */
.login { position: relative; flex: 1; display: grid; place-items: center; padding: 40px 16px; overflow: hidden; min-height: 640px; }
.login-floor { position: absolute; left: -50%; right: -50%; bottom: -6%; height: 50%; background-image: linear-gradient(rgba(255,106,61,.3) 1px, transparent 1px), linear-gradient(90deg, rgba(255,106,61,.22) 1px, transparent 1px); background-size: 64px 64px; transform: perspective(520px) rotateX(64deg); transform-origin: 50% 100%; -webkit-mask-image: linear-gradient(to top, #000 5%, transparent 85%); mask-image: linear-gradient(to top, #000 5%, transparent 85%); animation: wrGrid 2.6s linear infinite; opacity: .6; }
.login-horizon { position: absolute; left: 10%; right: 10%; top: 48%; height: 220px; background: radial-gradient(50% 50% at 50% 50%, rgba(255,106,61,.32), transparent 70%); filter: blur(24px); }
.login-card { position: relative; width: 100%; max-width: 400px; padding: 36px 28px 26px; border-radius: 22px; background: linear-gradient(180deg, rgba(26,23,36,.84), rgba(12,10,17,.9)); border: 1px solid rgba(255,255,255,.09); box-shadow: 0 40px 120px -40px rgba(255,106,61,.45), inset 0 1px 0 rgba(255,255,255,.06); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); animation: wrRise .8s var(--ease) both; }
.hud { position: absolute; width: 16px; height: 16px; border: 0 solid rgba(255,140,90,.7); }
.hud.h-tl { top: -6px; left: -6px; border-top-width: 1.5px; border-left-width: 1.5px; } .hud.h-tr { top: -6px; right: -6px; border-top-width: 1.5px; border-right-width: 1.5px; }
.hud.h-bl { bottom: -6px; left: -6px; border-bottom-width: 1.5px; border-left-width: 1.5px; } .hud.h-br { bottom: -6px; right: -6px; border-bottom-width: 1.5px; border-right-width: 1.5px; }
.logo-lg-wrap { display: flex; justify-content: center; }
.logo-lg { position: relative; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 70%, rgba(255,106,61,.4), #120e16 70%); box-shadow: inset 0 0 0 1px rgba(255,140,90,.4), 0 0 40px rgba(255,106,61,.45); }
.logo-lg > .ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(255,106,61,.5); animation: wrPing 2.4s ease-out infinite; }
.login-card h1 { margin: 18px 0 6px; text-align: center; font-size: 32px; font-weight: 650; letter-spacing: -.03em; }
.login-card .tagline { margin: 0 0 26px; text-align: center; color: var(--muted); font-size: 15px; line-height: 1.5; }
.login-form { display: flex; flex-direction: column; gap: 16px; }
.login-form .btn.primary { height: 50px; font-size: 16px; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 12px 32px -10px rgba(255,106,61,.8); }
.login-form .btn.primary:active { transform: scale(.98); }
.login-foot { margin-top: 22px; text-align: center; font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em; color: var(--dim-2); }

/* ---------- restricted ---------- */
.restricted { max-width: 520px; margin: 8vh auto 0; text-align: center; padding: 36px 24px; border-radius: 20px; border: 1px solid var(--line); background: rgba(21,19,29,.7); }
.restricted h1 { margin: 10px 0 8px; font-size: 24px; font-weight: 650; }
.restricted p { margin: 0 0 20px; color: var(--muted); line-height: 1.5; }
.restricted .btn { height: 44px; }

/* ---------- choose / account ---------- */
.choose { max-width: 480px; margin: 2vh auto 0; animation: wrRise .6s both; }
.choose h1 { margin: 8px 0 8px; font-size: clamp(26px, 4cqi, 34px); font-weight: 650; letter-spacing: -.025em; }
.choose .lead { margin: 0 0 22px; color: var(--muted); font-size: 15.5px; line-height: 1.55; }
.choose-box { padding: 22px; border-radius: 18px; background: linear-gradient(180deg, rgba(28,25,38,.75), rgba(16,14,22,.75)); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 16px; }
.acct-row { margin-top: 16px; padding: 20px 22px; border-radius: 18px; background: rgba(21,19,29,.7); border: 1px solid var(--line); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.acct-row .init { width: 44px; height: 44px; font-size: 15px; }
.acct-row .who { flex: 1 1 200px; min-width: 0; } .acct-row .who b { display: block; font-weight: 600; } .acct-row .who span { font-size: 13.5px; color: var(--muted); }
.acct-row .btn { height: 44px; }

/* ---------- sessions ---------- */
.page-head { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.page-head .ttl { flex: 1 1 260px; min-width: 0; }
.page-head .acts { display: flex; gap: 10px; flex: 0 0 auto; }
@media (max-width: 759px) { .page-head .acts { flex: 1 1 100%; } }
.page-head .acts .btn { flex: 1; } .page-head .acts .btn.primary { flex: 2; }
.banner-bad { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; margin-bottom: 18px; border-radius: 16px; border: 1px solid rgba(255,93,108,.4); background: linear-gradient(90deg, rgba(255,93,108,.1), rgba(255,93,108,.02)); animation: wrRise .5s both; }
.banner-bad .ex { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: rgba(255,93,108,.18); color: var(--bad-hi); font-weight: 700; }
.banner-bad .tx { flex: 1; min-width: 0; }
.banner-bad b { display: block; font-weight: 600; color: #ffd0d4; } .banner-bad p { margin: 3px 0 0; font-size: 14px; color: #c9a9b0; line-height: 1.5; }
.live-card { position: relative; border-radius: 22px; padding: 1px; overflow: hidden; margin-bottom: 26px; animation: wrRise .6s both; }
.live-card .conic { position: absolute; left: 50%; top: 50%; width: 2400px; height: 2400px; margin: -1200px 0 0 -1200px; background: conic-gradient(from 0deg, transparent 0 68%, rgba(255,106,61,.9) 80%, var(--gold) 86%, transparent 95%); animation: wrSpin 5s linear infinite; }
.live-card .in-card { position: relative; border-radius: 21px; background: radial-gradient(120% 140% at 0% 0%, rgba(255,106,61,.14), transparent 50%), linear-gradient(180deg, #17121b, #0d0b12); padding: clamp(18px, 3cqi, 26px); display: flex; flex-direction: column; gap: 16px; }
.live-card .meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.live-card .lbl-live { font-family: var(--mono); font-size: 12px; letter-spacing: .18em; color: var(--ember-softer); }
.live-card .mode { height: 24px; padding: 0 10px; display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); font-size: 12px; color: var(--text-3); }
.live-card .date { font-size: 13px; color: var(--muted); }
.live-card .stg { font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; color: var(--muted); }
.live-card h2 { margin: 0; font-size: clamp(19px, 2.6cqi, 25px); line-height: 1.3; font-weight: 640; letter-spacing: -.015em; text-wrap: pretty; max-width: 900px; }
.live-card .now { display: flex; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 14px; background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.06); }
.av-stack { display: flex; }
.av-stack .av { width: 38px; height: 38px; margin-right: -8px; border: 2px solid #0d0b12; background: #120f18; transition: transform .4s, border-color .4s; z-index: var(--z, 1); }
.av-stack .av.on { border-color: var(--ember); transform: scale(1.15); box-shadow: 0 0 16px rgba(255,106,61,.7); z-index: 10; }
.live-card .now .txt { flex: 1; min-width: 0; padding-left: 8px; }
.live-card .now .spk { font-size: 13px; color: var(--ember-softer); font-weight: 600; }
.live-card .now .snip { font-size: 14px; color: var(--text-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live-card .btn { height: 46px; } .live-card .btn.primary { padding: 0 22px; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 10px 28px -10px rgba(255,106,61,.8); }
.sess-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); gap: 14px; }
.sess-card { width: 100%; text-align: left; padding: 18px; border-radius: 18px; border: 1px solid var(--line); background: var(--panel); color: inherit; font: inherit; display: flex; flex-direction: column; gap: 12px; cursor: pointer; transition: transform .25s, border-color .25s, box-shadow .25s; animation: wrRise .55s ease var(--d, 0s) backwards; }
.sess-card:hover { transform: translateY(-2px); border-color: rgba(255,106,61,.4); box-shadow: 0 18px 50px -24px rgba(255,106,61,.5); }
.sess-card .chips { display: flex; gap: 6px; flex-wrap: wrap; }
.sess-card .q { font-size: 16.5px; line-height: 1.4; font-weight: 600; letter-spacing: -.01em; text-wrap: pretty; }
.sess-card .foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lead-badge { display: flex; align-items: center; gap: 8px; }
.lead-badge .l { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; color: var(--muted); }
.lead-badge .k { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; background: var(--primary); color: #fff; font-family: var(--mono); font-size: 12px; font-weight: 600; }
.lead-badge .v { font-family: var(--mono); font-size: 14px; color: var(--gold); font-weight: 600; }
.mini-bar { width: 60px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; }
.mini-bar > i { display: block; height: 100%; width: var(--w, 0%); background: linear-gradient(90deg, var(--ember), var(--gold)); }
.sess-card .date { font-size: 13px; color: var(--dim); }
.empty-table { padding: 56px 24px; text-align: center; border-radius: 20px; border: 1px dashed rgba(255,255,255,.14); background: rgba(21,19,29,.5); }
.orb { position: relative; width: 84px; height: 84px; margin: 0 auto 18px; }
.orb > i { position: absolute; border-radius: 50%; }
.orb > i:nth-child(1) { inset: 0; border: 1px dashed rgba(255,106,61,.45); animation: wrSpin 20s linear infinite; }
.orb > i:nth-child(2) { inset: 14px; border: 1px solid rgba(245,185,74,.3); }
.orb > i:nth-child(3) { inset: 34px; background: var(--ember); box-shadow: 0 0 24px var(--ember); animation: wrPulse 2.4s ease-in-out infinite; }
.empty-table b { display: block; font-size: 18px; font-weight: 600; } .empty-table p { margin: 6px 0 0; color: var(--muted); }
.section-lbl { margin-bottom: 12px; }

/* ---------- new debate ---------- */
.blocked { padding: 24px; border-radius: 18px; border: 1px solid rgba(255,106,61,.4); background: rgba(255,106,61,.06); display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.blocked .t { flex: 1 1 260px; } .blocked b { display: block; font-weight: 600; font-size: 17px; } .blocked p { color: var(--muted); margin: 4px 0 0; }
.nd { border-radius: 20px; border: 1px solid var(--line); background: var(--panel); overflow: hidden; }
.nd-step { display: flex; flex-wrap: wrap; gap: 14px 28px; padding: clamp(18px, 3cqi, 26px); border-bottom: 1px solid rgba(255,255,255,.06); animation: wrRise .5s ease var(--d, 0s) backwards; }
.nd-step .lab { flex: 1 1 180px; max-width: 240px; display: flex; gap: 12px; align-items: flex-start; }
.nd-step .n { font-family: var(--mono); font-size: 12px; color: var(--ember-soft); padding-top: 2px; }
.nd-step .lab b { display: block; font-weight: 600; font-size: 16px; } .nd-step .lab span { display: block; font-size: 13px; color: var(--muted); margin-top: 3px; line-height: 1.45; }
.nd-step .body { flex: 999 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.opt-in { position: relative; }
.opt-in .k { position: absolute; left: 8px; top: 8px; width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; background: rgba(255,255,255,.07); color: var(--dim); font-family: var(--mono); font-weight: 600; font-size: 13px; transition: background .3s; }
.opt-in.filled .k { background: var(--primary); color: #fff; }
.opt-in .in { padding-left: 50px; }
.sm-lbl { font-size: 13px; color: var(--text-4); } .sm-lbl.mt { margin-top: 6px; }
.pills { display: flex; gap: 8px; flex-wrap: wrap; }
.pill { height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03); color: var(--text-4); font-size: 14px; cursor: pointer; transition: all .2s; }
.pill.mono { font-family: var(--mono); }
.pill.on { border-color: rgba(255,106,61,.6); background: rgba(255,106,61,.14); color: var(--ember-pale); }
.pill.sm { height: 38px; padding: 0 14px; font-size: 13.5px; flex: 0 0 auto; white-space: nowrap; }
.mode-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 10px; }
.mode-card { text-align: left; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.02); color: var(--text); cursor: pointer; transition: all .25s; }
.mode-card .tt { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; }
.radio-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--dim-2); display: grid; place-items: center; flex: 0 0 auto; }
.radio-dot > i { width: 6px; height: 6px; border-radius: 50%; background: transparent; }
.mode-card .hh { font-size: 13px; color: var(--muted); margin-top: 5px; line-height: 1.45; }
.mode-card.on { border-color: rgba(255,106,61,.6); background: rgba(255,106,61,.1); box-shadow: 0 10px 30px -16px rgba(255,106,61,.8); }
.on > .tt .radio-dot, .on > .radio-dot, .on .radio-dot { border-color: var(--ember); } .on .radio-dot > i { background: var(--ember); }
.mem-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 8px; }
.mem-tile { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 8px 12px 8px 8px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.02); color: var(--text); text-align: left; cursor: pointer; transition: all .2s; }
.mem-tile .nm { flex: 1; min-width: 0; } .mem-tile .nm b { display: block; font-weight: 600; font-size: 14.5px; } .mem-tile .nm span { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.checkbox { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid rgba(255,255,255,.25); background: transparent; display: grid; place-items: center; transition: all .2s; }
.checkbox svg { opacity: 0; }
.mem-tile.on { border-color: rgba(255,106,61,.55); background: rgba(255,106,61,.08); }
.mem-tile.on .checkbox { border-color: var(--ember); background: var(--ember); } .mem-tile.on .checkbox svg { opacity: 1; }
.mem-note { font-size: 13px; color: var(--dim); } .mem-note.warn { color: var(--gold); }
.nd-foot { padding: clamp(18px, 3cqi, 26px); display: flex; flex-direction: column; gap: 14px; }
.nd-foot .hint { flex: 1 1 240px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.nd-foot .btn { height: 48px; } .nd-foot .btn.primary { font-size: 16px; padding: 0 24px; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 10px 28px -10px rgba(255,106,61,.8); }
.confirm-card { padding: 20px; border-radius: 16px; border: 1px solid rgba(255,106,61,.55); background: linear-gradient(135deg, rgba(255,106,61,.14), rgba(255,106,61,.03)); box-shadow: 0 20px 60px -30px rgba(255,106,61,.8); animation: wrRise .4s both; }
.confirm-card b { display: block; font-weight: 650; font-size: 18px; } .confirm-card p { margin: 6px 0 16px; color: #d9cfd8; line-height: 1.5; }
.confirm-card .btn { height: 48px; } .confirm-card .btn.primary { box-shadow: none; font-size: 16px; padding: 0 24px; }

/* ---------- starting ---------- */
.starting { max-width: 560px; margin: 3vh auto 0; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; animation: wrRise .6s both; }
.radar { position: relative; width: 200px; height: 200px; }
.radar > i { position: absolute; border-radius: 50%; }
.radar .ticks { inset: 0; background: repeating-conic-gradient(rgba(255,170,120,.55) 0deg 1.5deg, transparent 1.5deg 9deg); -webkit-mask-image: radial-gradient(circle, transparent 64%, #000 65%, #000 70%, transparent 71%); mask-image: radial-gradient(circle, transparent 64%, #000 65%, #000 70%, transparent 71%); animation: wrSpin 14s linear infinite; }
.radar .dash { inset: 24px; border: 1px dashed rgba(245,185,74,.5); animation: wrSpinRev 10s linear infinite; }
.radar .sweep { inset: 24px; background: conic-gradient(from 0deg, rgba(255,106,61,.45), transparent 22%); animation: wrSpin 2.4s linear infinite; }
.radar .pingr { inset: 64px; border: 1px solid rgba(255,106,61,.6); animation: wrPing 2s ease-out infinite; }
.radar .core { inset: 64px; display: grid; place-items: center; background: radial-gradient(circle at 50% 70%, rgba(255,106,61,.5), #120e16 70%); box-shadow: 0 0 50px rgba(255,106,61,.55); }
.radar .core .flame { animation-duration: 2s; }
.start-lbl { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .18em; color: var(--ember-softer); }
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ember); animation: wrPulse 1.2s ease-in-out infinite; flex: 0 0 auto; }
.pulse-dot.sm { width: 7px; height: 7px; box-shadow: 0 0 8px var(--ember); }
.starting h1 { margin: 0; font-size: clamp(24px, 4cqi, 32px); font-weight: 650; letter-spacing: -.025em; }
.starting p { margin: 0; color: var(--muted); line-height: 1.5; }
.start-seats { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.start-seat { display: flex; flex-direction: column; align-items: center; gap: 6px; opacity: .25; transform: scale(.88); transition: all .5s var(--ease); }
.start-seat .av { box-shadow: 0 0 0 1px rgba(255,255,255,.12); }
.start-seat .nm { font-size: 12px; color: var(--text-3); }
.start-seat .st { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; color: var(--dim-2); }
.start-seat.on { opacity: 1; transform: scale(1); } .start-seat.on .av { box-shadow: 0 0 0 2px var(--ember), 0 0 20px rgba(255,106,61,.5); } .start-seat.on .st { color: var(--ok-hi); }
.start-line { font-family: var(--mono); font-size: 12px; color: var(--dim); min-height: 18px; }
.starting .btn { height: 46px; padding: 0 20px; }

/* ---------- debate ---------- */
.live-bar { position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 12px 10px 16px; margin-bottom: 14px; border-radius: 16px; border: 1px solid rgba(255,106,61,.5); background: linear-gradient(90deg, rgba(255,106,61,.16), rgba(255,106,61,.04)); box-shadow: 0 0 40px -12px rgba(255,106,61,.6); }
.live-bar .sw { position: absolute; inset: 0; pointer-events: none; }
.live-bar .sw > i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, transparent 35%, rgba(255,180,140,.12) 50%, transparent 65%); animation: wrSweep 3.2s linear infinite; }
.live-bar .ping { position: relative; }
.live-bar .t { position: relative; font-weight: 600; flex: 1 1 200px; }
.live-bar .btn { position: relative; height: 40px; padding: 0 14px; border-radius: 10px; border-color: rgba(255,255,255,.16); background: rgba(10,8,14,.5); font-size: 14px; }
.live-bar .btn:hover { border-color: rgba(255,255,255,.3); }
.cancel-note { padding: 14px 16px; margin-bottom: 14px; border-radius: 16px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03); color: var(--text-4); font-size: 14.5px; }

.stabs { position: relative; margin: 0 0 18px; overflow-x: auto; scrollbar-width: none; }
.stabs::-webkit-scrollbar { display: none; }
.stabs .in-row { display: flex; gap: 4px; width: max-content; padding-bottom: 12px; }
.stab { display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--dim-2); font-size: 14.5px; font-weight: 500; cursor: pointer; white-space: nowrap; transition: all .35s; font-family: inherit; }
.stab.done { color: var(--text-3); }
.stab.cur { background: rgba(255,106,61,.14); border-color: rgba(255,106,61,.55); color: #fff; }
.stab.skip { color: #57516a; text-decoration: line-through; cursor: default; }
.stab.filt { background: rgba(255,255,255,.06); border-color: rgba(245,185,74,.55); }
.stab .pulse-dot { width: 7px; height: 7px; box-shadow: 0 0 8px var(--ember); }
.sprog { position: absolute; left: 0; right: 0; bottom: 3px; height: 2px; border-radius: 2px; background: rgba(255,255,255,.06); }
.sprog > i { display: block; height: 100%; width: var(--w, 0%); border-radius: 2px; background: linear-gradient(90deg, var(--ember), var(--gold)); box-shadow: 0 0 10px rgba(255,106,61,.7); transition: width .8s var(--ease); }

.dbg { display: flex; flex-direction: row; align-items: flex-start; gap: 18px; }
.dbg .colL { display: flex; flex-direction: column; gap: 18px; flex: 1 1 0; min-width: 0; }
.dbg .colR { display: flex; flex-direction: column; gap: 18px; flex: 0 0 380px; min-width: 0; }
@media (max-width: 999px) { .dbg { flex-direction: column; align-items: stretch; } .dbg .colL, .dbg .colR { display: contents; } }

.stage { order: 2; position: relative; border-radius: 22px; border: 1px solid var(--line); background: radial-gradient(80% 60% at 50% 100%, rgba(255,106,61,.1), transparent 70%), linear-gradient(180deg, rgba(20,17,28,.82), rgba(9,8,13,.92)); overflow: hidden; }
.stage-hud { position: absolute; top: 14px; left: 16px; right: 16px; display: flex; justify-content: space-between; gap: 10px; z-index: 5; pointer-events: none; font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; color: var(--dim); }
.stage-hud .r.live { color: var(--ember-soft); }
.table3d { position: relative; height: 520px; perspective: 900px; }
.disc { position: absolute; left: 50%; top: 60%; width: 640px; height: 640px; margin: -320px 0 0 -320px; transform: rotateX(74deg); pointer-events: none; }
.disc > i { position: absolute; border-radius: 50%; }
.disc .d1 { inset: 0; background: radial-gradient(circle, rgba(255,120,70,.45) 0%, rgba(255,106,61,.14) 36%, rgba(124,106,255,.07) 56%, transparent 70%); }
.disc .d2 { inset: 8%; border: 1.5px solid rgba(255,150,100,.5); box-shadow: 0 0 50px rgba(255,106,61,.4), inset 0 0 50px rgba(255,106,61,.22); }
.disc .d3 { inset: 3%; background: repeating-conic-gradient(rgba(255,180,130,.6) 0deg 1deg, transparent 1deg 6deg); -webkit-mask-image: radial-gradient(circle, transparent 66%, #000 67%, #000 70%, transparent 71%); mask-image: radial-gradient(circle, transparent 66%, #000 67%, #000 70%, transparent 71%); animation: wrSpin 60s linear infinite; }
.disc .d4 { inset: 22%; border: 1px dashed rgba(245,185,74,.5); animation: wrSpinRev 40s linear infinite; }
.disc .d5 { inset: 8%; background: conic-gradient(from 0deg, rgba(255,106,61,.32), transparent 16%, transparent); animation: wrSpin 7s linear infinite; }
.disc .d6 { inset: 41%; background: radial-gradient(circle, rgba(255,210,160,.75), rgba(255,106,61,.25) 50%, transparent 72%); animation: wrPulse 3s ease-in-out infinite; }

.seat3d { position: absolute; left: var(--x); top: var(--y); z-index: var(--z); width: 160px; transform: translate(-50%, -50%) scale(var(--s, 1)); transition: transform .6s var(--ease); display: flex; flex-direction: column; align-items: center; gap: 8px; background: none; border: 0; color: inherit; padding: 0; cursor: pointer; font: inherit; }
.seat3d .rw { position: relative; width: var(--size); height: var(--size); }
.ripple { position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(255,106,61,.75); animation: wrRipple 1.4s ease-out infinite; }
.ripple.r2 { border-color: rgba(245,185,74,.55); animation-delay: .7s; }
.portrait { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--mono-bg, #1c1926); color: var(--mono-fg, var(--ember-pale)); font-size: var(--mfs, 36px); font-weight: 600; box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 10px 30px -10px rgba(0,0,0,.8); transition: box-shadow .5s; animation: wrBreathe var(--br, 3.2s) ease-in-out infinite; }
.portrait > img, .portrait > .face { transition: filter .5s; }
.portrait > img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); }
.seat3d.active .portrait, .pseat.active .portrait { box-shadow: 0 0 0 2px rgba(255,106,61,.7), 0 0 24px rgba(255,106,61,.3); }
.seat3d.speaking .portrait, .pseat.speaking .portrait { box-shadow: 0 0 0 3px var(--ember), 0 0 40px 6px rgba(255,106,61,.55); }
.seat3d.dim .portrait > img, .seat3d.dim .portrait > .face, .pseat.dim .portrait > img, .pseat.dim .portrait > .face { filter: grayscale(.35) brightness(.72); }
.next-dots { position: absolute; right: -6px; bottom: 6px; display: flex; gap: 3px; padding: 6px 8px; border-radius: 999px; background: #15131d; border: 1px solid rgba(255,255,255,.14); }
.next-dots > i { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); animation: wrDot 1s infinite; }
.next-dots > i:nth-child(2) { animation-delay: .15s; } .next-dots > i:nth-child(3) { animation-delay: .3s; }
.plate { padding: 5px 12px; border-radius: 10px; background: rgba(12,10,18,.86); border: 1px solid rgba(255,255,255,.1); text-align: center; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: border-color .4s; }
.plate b { display: block; font-weight: 600; font-size: 14px; } .plate span { display: block; font-size: 11px; color: var(--muted); white-space: nowrap; }
.seat3d.active .plate { border-color: rgba(255,106,61,.6); }
.seat-badge { font-family: var(--mono); font-size: 11px; padding: 3px 9px; border-radius: 999px; color: var(--gold); background: rgba(245,185,74,.08); border: 1px solid rgba(245,185,74,.35); }

/* speaking portrait (face.js): the lips part softly with the voice — a blurred shadow between the lips and a narrow
   lower-lip strip that dips at most ~1.6% (no jaw/chin movement), plus ripple rings + ember glow + scale. */
.face { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; --open: 0; isolation: isolate; transform: scale(1.12); }
.face-head { position: absolute; inset: 0; }
.face-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.face-jaw { transform: translateY(calc(var(--open) * 1.6%)); will-change: transform; }
.face-mouth { position: absolute; border-radius: 50%; background: radial-gradient(ellipse at 50% 35%, rgba(40,8,12,.95), rgba(40,8,12,.6) 45%, transparent 72%); filter: blur(.4px); transform-origin: 50% 20%; transform: scaleY(calc(.15 + var(--open) * .85)); opacity: min(.9, calc(var(--open) * 4)); }
.face.talking .face-img { filter: brightness(calc(1 + var(--open) * .06)); }
.face-lid { position: absolute; border-radius: 50%; transform-origin: 50% 20%; transform: scaleY(0); animation: wrLid 5.2s infinite; animation-delay: var(--blink-delay, 0s); }
@keyframes wrLid { 0%, 93%, 100% { transform: scaleY(0) } 95.5% { transform: scaleY(1) } }
@media (prefers-reduced-motion: reduce) { .face-jaw { transform: none; } .face-lid { display: none; } .face.talking .face-img { filter: none; } }

.pstage { position: relative; padding-top: 36px; }
.strip { display: flex; gap: 4px; overflow-x: auto; padding: 8px 12px 12px; scrollbar-width: none; }
.strip::-webkit-scrollbar { display: none; }
.pseat { flex: 0 0 auto; width: 86px; display: flex; flex-direction: column; align-items: center; gap: 5px; background: none; border: 0; color: inherit; padding: 0; font: inherit; cursor: pointer; }
.pseat .box { position: relative; width: 84px; height: 84px; display: grid; place-items: center; }
.pseat .pw { position: relative; width: 64px; height: 64px; transition: all .45s var(--ease); }
.pseat.active .pw { width: 70px; height: 70px; } .pseat.speaking .pw { width: 80px; height: 80px; }
.pseat .ripple { inset: -4px; }
.pseat .portrait { font-size: 22px; animation: none; transition: box-shadow .45s; }
.pseat .next-dots { right: -8px; bottom: 0; gap: 2px; padding: 4px 6px; } .pseat .next-dots > i { width: 4px; height: 4px; }
.pseat .nm { font-size: 13px; font-weight: 600; color: var(--text-4); } .pseat.active .nm { color: #fff; }
.pseat .rl { font-size: 10.5px; color: var(--dim); text-align: center; line-height: 1.25; height: 26px; overflow: hidden; }
.pseat .bd { height: 20px; font-family: var(--mono); font-size: 10.5px; padding: 2px 7px; border-radius: 999px; color: var(--gold); border: 1px solid transparent; }
.pseat .bd.has { border-color: rgba(245,185,74,.35); }
.edge-line { height: 1px; margin: 0 14px; background: linear-gradient(90deg, transparent, rgba(255,106,61,.75), transparent); box-shadow: 0 0 12px rgba(255,106,61,.8); }

.caption { position: relative; margin: 0 16px 16px; padding: 16px 18px; border-radius: 16px; background: linear-gradient(180deg, rgba(22,19,30,.94), rgba(12,10,17,.94)); border: 1px solid rgba(255,255,255,.09); box-shadow: 0 -20px 60px -30px rgba(255,106,61,.4); }
@media (max-width: 759px) { .caption { margin: 12px; } }
.caption .c1 { position: absolute; top: -1px; left: -1px; width: 14px; height: 14px; border-top: 1.5px solid var(--ember-soft); border-left: 1.5px solid var(--ember-soft); border-top-left-radius: 16px; }
.caption .c2 { position: absolute; bottom: -1px; right: -1px; width: 14px; height: 14px; border-bottom: 1.5px solid var(--ember-soft); border-right: 1.5px solid var(--ember-soft); border-bottom-right-radius: 16px; }
.cap-head { display: flex; align-items: center; gap: 12px; }
.cap-head .av { box-shadow: 0 0 0 2px rgba(255,106,61,.6), 0 0 18px rgba(255,106,61,.35); }
.cap-head .who { flex: 1; min-width: 0; }
.cap-head .l1 { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cap-head .l1 b { font-size: 16px; font-weight: 650; } .cap-head .l1 .rl { font-size: 13px; color: var(--muted); } .reply { font-size: 13px; color: var(--gold); }
.cap-head .stg { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; color: var(--ember-soft); margin-top: 2px; }
.wave { display: flex; align-items: center; gap: 3px; height: 26px; opacity: .25; transition: opacity .4s; }
.wave > i { width: 3px; height: 24px; border-radius: 2px; background: linear-gradient(var(--gold), var(--ember)); animation: wrWave var(--wd, .8s) ease-in-out var(--wl, 0s) infinite; animation-play-state: paused; }
.wave.on { opacity: 1; } .wave.on > i { animation-play-state: running; }
.cap-line { margin: 12px 0 0; font-size: clamp(17px, 2.3cqi, 22px); line-height: 1.5; color: #f4f0fa; text-wrap: pretty; }
.caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -3px; background: var(--ember); animation: wrCaret 1s steps(1) infinite; }
.cap-line .rest { color: transparent; }
.cap-ev { margin-top: 12px; display: flex; gap: 10px; align-items: baseline; font-family: var(--mono); font-size: 12px; color: var(--muted); opacity: 0; transition: opacity .6s; }
.cap-ev.on { opacity: 1; }
.cap-ev .k { color: var(--ember-soft); letter-spacing: .14em; font-size: 10.5px; } .cap-ev .v { line-height: 1.5; }

.ctl { display: flex; align-items: center; gap: 10px; padding: 0 16px 16px; flex-wrap: wrap; }
.ctl .btn.icon { width: 44px; height: 44px; }
.ctl .btn.primary { height: 44px; min-width: 150px; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 10px 28px -10px rgba(255,106,61,.8); }
.speeds { display: flex; padding: 3px; border-radius: 12px; border: 1px solid rgba(255,255,255,.1); background: rgba(0,0,0,.25); }
.speeds button { height: 36px; padding: 0 10px; border-radius: 9px; border: 0; background: transparent; color: var(--muted); font-family: var(--mono); font-size: 12.5px; cursor: pointer; transition: all .2s; }
.speeds button.on { background: rgba(255,106,61,.2); color: var(--ember-pale); }
.ctl .prog { flex: 1 1 140px; min-width: 120px; display: flex; flex-direction: column; gap: 6px; }
.ctl .prog .tn { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--dim); text-align: right; }
.track3 { height: 3px; border-radius: 3px; background: rgba(255,255,255,.07); overflow: hidden; }
.track3 > i, .pctl .pt > i { display: block; height: 100%; width: var(--w, 0%); background: linear-gradient(90deg, var(--ember), var(--gold)); transition: width .2s linear; }

.tr { order: 4; padding: 18px; border-radius: 20px; border: 1px solid var(--line); background: var(--panel); }
.tr-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.tr-head h3 { margin: 0; font-size: 17px; font-weight: 650; } .tr-head .cnt { font-family: var(--mono); font-size: 11px; color: var(--dim); }
.filter-chip { height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(245,185,74,.5); background: rgba(245,185,74,.08); color: var(--gold); font-size: 13px; cursor: pointer; }
.tr-list { display: flex; flex-direction: column; gap: 4px; }
.tr-item { display: flex; gap: 12px; padding: 12px; border-radius: 14px; background: transparent; border: 1px solid transparent; transition: background .4s, border-color .4s; animation: wrRise .5s backwards; cursor: pointer; }
.tr-item.cur { background: rgba(255,106,61,.08); border-color: rgba(255,106,61,.3); }
.tr-item .bd { flex: 1; min-width: 0; }
.tr-item .l1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tr-item .l1 b { font-size: 14px; } .tr-item .stg { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; color: var(--dim); }
.tr-item .sc { font-family: var(--mono); font-size: 11px; padding: 2px 8px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); color: var(--text-3); }
.tr-item p { margin: 4px 0 0; font-size: 15px; line-height: 1.55; color: var(--text-2); text-wrap: pretty; }
.tr-item.chair p { color: #eadfce; font-style: italic; }
.tr-empty { padding: 18px; text-align: center; color: var(--dim); font-size: 14px; }

.board-card { order: 1; position: relative; padding: 18px; border-radius: 20px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(28,25,38,.8), rgba(16,14,22,.8)); }
.board-card .cr { position: absolute; top: -1px; right: -1px; width: 14px; height: 14px; border-top: 1.5px solid var(--ember-soft); border-right: 1.5px solid var(--ember-soft); border-top-right-radius: 20px; }
.board-card .hd { display: flex; align-items: center; gap: 8px; }
.board-card .hd .pm { font-family: var(--mono); font-size: 11px; color: var(--dim); }
.board-card h2 { margin: 10px 0 14px; font-size: 18px; line-height: 1.38; font-weight: 640; letter-spacing: -.01em; text-wrap: pretty; }
.brow { display: grid; grid-template-columns: 30px minmax(0, 1fr) 46px; align-items: center; gap: 10px; padding: 7px 0; }
.brow .k { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: rgba(255,255,255,.07); color: var(--text-3); font-family: var(--mono); font-weight: 600; font-size: 13px; transition: all .5s; }
.brow .lb { font-size: 14px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brow .bt { margin-top: 6px; height: 6px; border-radius: 6px; background: rgba(255,255,255,.06); overflow: hidden; }
.brow .bt > i { display: block; height: 100%; width: var(--w, 0%); border-radius: 6px; background: linear-gradient(90deg, var(--violet-a), var(--violet-b)); transition: width 1.1s var(--ease); }
.brow .sv { text-align: right; font-family: var(--mono); font-size: 17px; font-weight: 600; color: var(--text-4); font-variant-numeric: tabular-nums; transition: color .5s; }
.brow.lead .k { background: var(--primary); color: #fff; }
.brow.lead .bt > i { background: linear-gradient(90deg, var(--ember), var(--gold)); box-shadow: 0 0 12px rgba(255,140,80,.6); }
.brow.lead .sv { color: var(--gold); }
.faults-btn { margin-top: 8px; }
.faults { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.fault { padding: 10px 12px; border-radius: 12px; background: rgba(245,185,74,.06); border: 1px solid rgba(245,185,74,.2); font-size: 14px; line-height: 1.45; animation: wrRise .35s backwards; }
.fault span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 3px; }

.verdict { order: 5; position: relative; overflow: hidden; padding: 20px; border-radius: 20px; background: linear-gradient(160deg, rgba(245,185,74,.12), rgba(255,106,61,.05) 40%, rgba(16,14,22,.92) 72%); border: 1px solid rgba(245,185,74,.4); box-shadow: 0 30px 80px -40px rgba(245,185,74,.5); animation: wrRise .7s backwards; }
.verdict .shine { position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: linear-gradient(90deg, transparent, rgba(255,230,180,.1), transparent); animation: wrShine 6s ease-in-out infinite; pointer-events: none; }
.verdict .hd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cons { height: 24px; padding: 0 10px; display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid rgba(245,185,74,.5); color: var(--gold); font-size: 12px; }
.cons.yes { border-color: rgba(79,192,141,.5); color: var(--ok-hi); }
.verdict h3 { margin: 10px 0 12px; font-size: 17px; line-height: 1.4; font-weight: 650; text-wrap: pretty; }
.verdict .chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.verdict .bd { display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; line-height: 1.5; }
.verdict .k { color: var(--muted); }
.next-box { padding: 12px 14px; border-radius: 12px; background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.06); }
.next-box .eyebrow { font-size: 10.5px; letter-spacing: .14em; margin-bottom: 4px; }

.call { order: 6; padding: 20px; border-radius: 20px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(28,25,38,.78), rgba(16,14,22,.78)); }
.call h3 { margin: 0 0 4px; font-size: 17px; font-weight: 650; }
.call .note-p { margin: 6px 0 0; color: var(--muted); font-size: 14.5px; display: flex; gap: 8px; align-items: center; }
.call .intro { margin: 0 0 14px; color: var(--muted); font-size: 13.5px; }
.radios { display: flex; flex-direction: column; gap: 8px; }
.radio-card { display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 10px 14px; border-radius: 14px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.02); color: var(--text); font-size: 15px; text-align: left; cursor: pointer; transition: all .2s; font-family: inherit; }
.radio-card .radio-dot { width: 20px; height: 20px; } .radio-card .radio-dot > i { width: 8px; height: 8px; }
.radio-card[aria-checked="true"] { border-color: rgba(255,106,61,.6); background: rgba(255,106,61,.1); }
.radio-card[aria-checked="true"] .radio-dot { border-color: var(--ember); } .radio-card[aria-checked="true"] .radio-dot > i { background: var(--ember); }
.call .lbl { margin-top: 14px; }
.call .review { margin-top: 14px; }
.recorded { margin-top: 10px; padding: 14px; border-radius: 14px; border: 1px solid rgba(79,192,141,.4); background: rgba(79,192,141,.07); }
.recorded .eyebrow { font-size: 10.5px; letter-spacing: .14em; color: var(--ok-hi); } .recorded b { display: block; margin-top: 4px; font-weight: 600; }
.recorded p { margin: 6px 0 0; font-size: 13.5px; color: var(--muted); }
.rec-confirm { margin-top: 14px; padding: 16px; border-radius: 14px; border: 1px solid rgba(255,106,61,.55); background: rgba(255,106,61,.08); animation: wrRise .35s backwards; }
.rec-confirm b { display: block; font-weight: 650; } .rec-confirm .pk { color: #d9cfd8; font-size: 14px; margin: 4px 0 12px; }
.rec-confirm .btn { height: 44px; } .rec-confirm .btn.primary { box-shadow: none; padding: 0 18px; }

.pctl { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 0 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(10,9,14,.88); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-top: 1px solid rgba(255,255,255,.08); }
.pctl .pt { height: 2px; margin: 0 -12px 10px; background: rgba(255,255,255,.06); }
.pctl .pt > i { box-shadow: 0 0 8px var(--ember); }
.pctl .row1 { display: flex; align-items: center; gap: 8px; }
.pctl .btn { height: 48px; border-radius: 14px; }
.pctl .btn.icon { width: 48px; flex: 0 0 auto; }
.pctl .btn.primary { flex: 1; min-width: 0; font-size: 16px; box-shadow: 0 10px 28px -10px rgba(255,106,61,.85); }
.pctl .spd { flex: 0 0 auto; width: 56px; color: var(--ember-pale); font-family: var(--mono); font-size: 14px; padding: 0; }

/* ---------- decisions ---------- */
.dec-head { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.dec-head .ttl { flex: 1 1 240px; }
.dec-filters { display: flex; gap: 6px; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
.dec-filters::-webkit-scrollbar { display: none; }
.dec-list { display: flex; flex-direction: column; gap: 12px; }
.dec { display: flex; flex-wrap: wrap; gap: 10px 22px; padding: 18px 20px; border-radius: 18px; border: 1px solid var(--line); background: var(--panel); animation: wrRise .5s ease var(--d, 0s) backwards; }
.dec.pend { border-color: rgba(245,185,74,.3); }
.dec .when { flex: 0 0 120px; display: flex; flex-direction: column; gap: 6px; }
.dec .when .d { font-family: var(--mono); font-size: 12.5px; color: var(--text-4); }
.dec .when .chip { align-self: flex-start; height: 22px; padding: 0 9px; font-size: 11.5px; }
.dec .what { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.dec .q { font-size: 16.5px; font-weight: 600; line-height: 1.4; text-wrap: pretty; }
.dec .cl { font-size: 14px; color: var(--text-4); } .dec .k { color: var(--dim); }
.dec .yd { font-size: 14px; } .dec .yd b { color: var(--ok-hi); } .dec.pend .yd b { color: var(--gold); }

/* ---------- council ---------- */
.cast-head { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.cast-head .ttl { flex: 1 1 240px; }
.cast-head .cnt { font-family: var(--mono); font-size: 12.5px; color: var(--text-4); }
.install { padding: 18px 20px; margin-bottom: 26px; border-radius: 18px; border: 1px solid rgba(224,164,58,.55); background: linear-gradient(135deg, rgba(224,164,58,.12), rgba(224,164,58,.02)); }
.install b { display: block; font-weight: 650; color: var(--warn-hi); font-size: 16px; }
.install p { margin: 6px 0 12px; color: #d9c7a5; font-size: 14px; line-height: 1.5; }
.code-box { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; border-radius: 12px; background: rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.06); }
.code-box code { flex: 1; min-width: 0; font-family: var(--mono); font-size: 13px; color: var(--warn-hi); overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.code-box .btn { flex: 0 0 auto; height: 36px; padding: 0 12px; border-radius: 9px; border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.05); font-size: 13px; }
.install .link-btn { margin-top: 8px; color: var(--warn-hi); }
.files { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 4px 16px; font-family: var(--mono); font-size: 12px; color: #c9b893; padding-top: 4px; }
.voice-warn { padding: 14px 16px; margin-bottom: 18px; border-radius: 16px; border: 1px solid rgba(224,164,58,.4); background: rgba(224,164,58,.06); color: #d9c7a5; font-size: 14px; }
.grp-head { display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px; }
.grp-head .t { font-family: var(--mono); font-size: 11.5px; letter-spacing: .16em; color: var(--ember-soft); }
.grp-head .s { font-size: 13px; color: var(--dim); }
.cast-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 12px; margin-bottom: 26px; }
.cast-card { display: flex; gap: 14px; align-items: center; padding: 14px; border-radius: 18px; border: 1px solid var(--line); background: var(--panel); color: inherit; text-align: left; cursor: pointer; transition: transform .25s, border-color .25s, box-shadow .25s; animation: wrRise .5s ease var(--d, 0s) backwards; font: inherit; width: 100%; }
.cast-card.chair { border-color: rgba(245,185,74,.3); }
.cast-card:hover { transform: translateY(-2px); border-color: rgba(255,106,61,.4); box-shadow: 0 18px 50px -24px rgba(255,106,61,.5); }
.cast-pic { position: relative; flex: 0 0 auto; width: 76px; height: 76px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--mono-bg, #1c1926); color: var(--mono-fg, var(--ember-pale)); font-size: 26px; font-weight: 600; box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 0 0 4px rgba(255,106,61,0); }
.cast-card.on .cast-pic { box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 0 0 4px rgba(255,106,61,.3); }
.cast-pic .inner { position: absolute; inset: 0; transform: scale(1.12); }
.cast-pic img { width: 100%; height: 100%; object-fit: cover; }
.cast-card.off .cast-pic img { filter: grayscale(.6) brightness(.8); }
.mouth-dot { position: absolute; left: var(--mx, 50%); top: var(--my, 50%); width: 22%; height: 22%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, var(--ember) 0 38%, rgba(255,106,61,.25) 40% 60%, transparent 62%); box-shadow: 0 0 0 1px rgba(255,190,150,.85); }
.cast-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cast-meta .tg { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ember-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cast-meta .nm { font-size: 17px; font-weight: 650; } .cast-meta .rl { font-size: 13px; color: var(--muted); }
.cast-meta .chs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.cast-meta .chs .chip { height: 22px; padding: 0 9px; font-size: 11.5px; }
.chip.mod { color: var(--gold); border-color: rgba(245,185,74,.45); } .chip.att { color: var(--ok-hi); border-color: rgba(79,192,141,.45); } .chip.opt { color: var(--muted); border-color: rgba(255,255,255,.14); }
.chip.tiny { border: 0; height: 22px; padding: 0 8px; background: rgba(255,255,255,.06); font-family: var(--mono); font-size: 11px; color: var(--text-3); }
.add-tile { width: 100%; height: 64px; margin-bottom: 26px; border-radius: 18px; border: 1px dashed rgba(255,255,255,.2); background: rgba(255,255,255,.02); color: var(--text-3); font-size: 15px; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; transition: all .2s; font-family: inherit; }
.add-tile:hover { border-color: rgba(255,106,61,.5); color: #fff; }
.arch-list { display: flex; flex-direction: column; gap: 8px; }
.arch { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.02); }
.arch .av { opacity: .6; } .arch .t { flex: 1; min-width: 0; color: var(--muted); }
.arch .btn { height: 38px; padding: 0 14px; border-radius: 10px; font-size: 14px; }

/* ---------- member editor: drawer (desktop) / sheet (phone) ---------- */
.drawer-wrap { position: fixed; inset: 0; z-index: 60; }
.scrim { position: absolute; inset: 0; background: rgba(4,3,8,.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: wrToast .3s both; }
.drawer { position: absolute; display: flex; flex-direction: column; background: linear-gradient(180deg, #17131f, #0c0a11); overflow: hidden; top: 0; right: 0; bottom: 0; width: min(480px, 100%); border-left: 1px solid rgba(255,255,255,.1); box-shadow: -40px 0 120px -40px rgba(0,0,0,.9); animation: wrDrawer .35s var(--ease) both; }
@media (max-width: 759px) { .drawer { top: auto; left: 0; right: 0; bottom: 0; width: auto; height: 92%; border-radius: 24px 24px 0 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.12); box-shadow: none; animation: wrSheet .35s var(--ease) both; } }
.dr-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,.07); }
.dr-head .t { flex: 1; min-width: 0; } .dr-head .t .eyebrow { font-size: 10.5px; letter-spacing: .14em; color: var(--ember-soft); } .dr-head .t b { display: block; font-size: 18px; font-weight: 650; }
.dr-head .x { width: 44px; height: 44px; border-radius: 12px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: var(--text); font-size: 20px; cursor: pointer; }
.dr-body { flex: 1; overflow-y: auto; padding: 18px 16px; display: flex; flex-direction: column; gap: 16px; }
.dr-port { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
.mouth-pad { position: relative; flex: 0 0 auto; width: 180px; height: 180px; border-radius: 18px; overflow: hidden; display: grid; place-items: center; background: var(--mono-bg, #1c1926); color: var(--mono-fg, var(--ember-pale)); font-size: 56px; font-weight: 600; touch-action: none; cursor: crosshair; box-shadow: 0 0 0 1px rgba(255,255,255,.12); }
.mouth-pad:focus-visible { outline: 2px solid var(--ember-softer); outline-offset: 2px; }
.mouth-pad img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.mouth-pad .hl { position: absolute; left: 0; right: 0; top: var(--my, 50%); height: 1px; background: rgba(255,106,61,.45); pointer-events: none; }
.mouth-pad .vl { position: absolute; top: 0; bottom: 0; left: var(--mx, 50%); width: 1px; background: rgba(255,106,61,.45); pointer-events: none; }
.mouth-pad .mk { position: absolute; left: var(--mx, 50%); top: var(--my, 50%); width: 26px; height: 26px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, var(--ember) 0 40%, rgba(255,106,61,.25) 42% 62%, transparent 64%); box-shadow: 0 0 0 1.5px var(--ember-pale), 0 0 14px var(--ember); pointer-events: none; }
.dr-port .side { flex: 1 1 140px; display: flex; flex-direction: column; gap: 8px; }
.dr-port .rd { font-family: var(--mono); font-size: 11.5px; color: var(--text-4); line-height: 1.6; }
.dr-port .hn { font-size: 12.5px; color: var(--dim); line-height: 1.45; }
.dr-port .btn { height: 40px; padding: 0 14px; border-radius: 10px; font-size: 14px; }
.dr-port .btn.ghost { background: none; color: var(--text-4); }
.sw-row { display: flex; gap: 12px; flex-wrap: wrap; }
.sw-box { flex: 1 1 180px; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 14px; border-radius: 14px; border: 1px solid rgba(255,255,255,.1); background: rgba(6,5,10,.5); color: var(--text); font-size: 14.5px; cursor: pointer; text-align: left; font-family: inherit; }
.w-box { flex: 1 1 180px; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 56px; padding: 0 6px 0 14px; border-radius: 14px; border: 1px solid rgba(255,255,255,.1); background: rgba(6,5,10,.5); }
.w-box .t1 { font-size: 14.5px; } .w-box .t2 { font-size: 11.5px; color: var(--dim); }
.w-box .st { display: flex; align-items: center; }
.w-box button { width: 44px; height: 44px; border: 0; background: none; color: var(--text); font-size: 20px; cursor: pointer; }
.w-box .v { width: 36px; text-align: center; font-family: var(--mono); font-size: 16px; color: var(--gold); }
.rng { display: flex; flex-direction: column; gap: 6px; }
.rng .t { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-4); } .rng .t span { font-family: var(--mono); color: var(--text); }
.rng input { width: 100%; height: 32px; } .rng .h { font-size: 12px; color: var(--dim); }
.fb { border-radius: 12px; border: 1px solid var(--line); padding: 0 14px; }
.fb summary { min-height: 44px; display: flex; align-items: center; font-size: 14px; color: var(--text-4); cursor: pointer; }
.fb .p { padding-bottom: 14px; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.fb .grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 10px; padding-bottom: 14px; }
.dr-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.dr-acts .btn { height: 46px; padding: 0 16px; }
.btn.ember-soft { flex: 1 1 180px; border-color: rgba(255,106,61,.5); background: rgba(255,106,61,.1); color: var(--ember-pale); font-weight: 600; }
.dr-foot { display: flex; gap: 8px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255,255,255,.07); background: rgba(10,9,14,.9); }
.dr-foot .btn { flex: 1; height: 48px; }
.dr-foot .btn.primary { box-shadow: none; }

/* ---------- member brain ---------- */
.bhead { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.bhead .av { box-shadow: 0 0 0 2px rgba(255,106,61,.5), 0 0 24px rgba(255,106,61,.3); }
.bhead .t { flex: 1 1 200px; min-width: 0; } .bhead h1 { margin: 0; font-size: clamp(24px, 4cqi, 34px); font-weight: 650; letter-spacing: -.025em; } .bhead .s { color: var(--muted); font-size: 14px; margin-top: 2px; }
.bhead .btn { height: 44px; padding: 0 16px; font-size: 14.5px; }
.refresh-panel { margin: -6px 0 18px; padding: 16px 18px; border-radius: 18px; border: 1px solid var(--line); background: var(--panel); display: flex; flex-direction: column; gap: 10px; animation: wrRise .3s backwards; }
.refresh-panel p { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.btabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 4px; margin-bottom: 18px; border-radius: 14px; border: 1px solid var(--line); background: rgba(0,0,0,.25); }
.btabs::-webkit-scrollbar { display: none; }
.btab { flex: 1 0 auto; height: 40px; padding: 0 14px; border-radius: 10px; border: 0; background: transparent; color: var(--muted); font-size: 14.5px; font-weight: 500; cursor: pointer; white-space: nowrap; transition: all .25s; font-family: inherit; }
.btab.on { background: rgba(255,106,61,.16); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,106,61,.5); }
.wbar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.wbar .tk { flex: 1 1 180px; max-width: 320px; height: 6px; border-radius: 6px; background: rgba(255,255,255,.07); overflow: hidden; }
.wbar .tk > i { display: block; height: 100%; width: var(--w, 0%); background: linear-gradient(90deg, var(--ok), #7fe0b0); border-radius: 6px; transition: width .3s; }
.wbar .tk.amber > i { background: var(--warn); } .wbar .tk.red > i { background: var(--bad); }
.wbar .wl { font-family: var(--mono); font-size: 12.5px; color: var(--text-4); }
.ed-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 14px; }
.ed-grid .lbl { min-width: 0; } .ed-grid .lbl > .t, .ed-grid .pv-col > .t { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--dim); font-weight: 400; }
.md-ed { width: 100%; height: 460px; padding: 16px; border-radius: 16px; border: 1px solid rgba(255,255,255,.1); background: rgba(6,5,10,.8); color: var(--text-3); font-family: var(--mono); font-size: 13.5px; line-height: 1.65; resize: vertical; outline: none; }
.md-ed:focus { border-color: rgba(255,106,61,.6); box-shadow: 0 0 0 4px rgba(255,106,61,.12); }
.pv-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.md-pv { height: 460px; overflow-y: auto; padding: 18px 20px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel); font-size: 14.5px; line-height: 1.6; color: var(--text-3); }
.md-pv h2 { margin: 0 0 12px; font-size: 20px; font-weight: 650; color: var(--text); }
.md-pv h3 { margin: 18px 0 8px; font-size: 16px; font-weight: 650; color: var(--ember-softer); }
.md-pv h4, .md-pv h5, .md-pv h6 { margin: 14px 0 6px; font-size: 15px; font-weight: 650; color: var(--text); }
.md-pv p { margin: 0 0 10px; }
.md-pv ol, .md-pv ul { margin: 0 0 10px; padding: 0; list-style: none; }
.md-pv ol { counter-reset: n; }
.md-pv li { position: relative; display: block; padding-left: 28px; margin: 0 0 8px; }
.md-pv ol > li { counter-increment: n; } .md-pv ol > li::before { content: counter(n) "."; position: absolute; left: 0; top: 1px; color: var(--ember-soft); font-family: var(--mono); font-size: 13px; }
.md-pv ul > li::before { content: "•"; position: absolute; left: 0; top: 1px; color: var(--ember-soft); font-family: var(--mono); font-size: 13px; }
.md-pv strong { font-weight: 650; color: #fff; }
.md-pv code { font-family: var(--mono); font-size: .9em; background: rgba(0,0,0,.35); padding: 1px 5px; border-radius: 6px; }
.md-pv pre { background: rgba(0,0,0,.35); padding: 10px; border-radius: 10px; overflow: auto; }
.md-pv blockquote { margin: 8px 0; padding-left: 12px; border-left: 2px solid rgba(255,106,61,.4); color: var(--muted); }
.md-pv hr { border: 0; border-top: 1px solid var(--line); margin: 14px 0; }
.save-bar { position: sticky; bottom: var(--sticky-b); z-index: 10; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; padding: 10px; border-radius: 16px; background: rgba(12,10,17,.85); border: 1px solid var(--line); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.save-bar .btn { height: 44px; } .save-bar .btn.primary { padding: 0 22px; box-shadow: none; }
.save-bar .st { font-size: 13.5px; color: var(--ok-hi); } .save-bar .st.dirty { color: var(--gold); }
.hist { margin-top: 10px; padding: 8px; border-radius: 16px; border: 1px solid var(--line); background: rgba(21,19,29,.85); animation: wrRise .3s backwards; }
.hist-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; flex-wrap: wrap; }
.hist-row .w { font-family: var(--mono); font-size: 12.5px; color: var(--text-4); flex: 1; } .hist-row .n { font-size: 13px; color: var(--dim); }
.hist-row .btn { height: 36px; padding: 0 12px; border-radius: 9px; font-size: 13px; }
.hist-empty { padding: 12px; color: var(--dim); font-size: 14px; }
.diff { margin: 4px 12px 10px; padding: 10px; border-radius: 10px; background: rgba(0,0,0,.35); font-family: var(--mono); font-size: 12px; line-height: 1.5; overflow-x: auto; white-space: pre-wrap; }
.diff .add { color: var(--ok-hi); } .diff .del { color: var(--bad-hi); } .diff .ctx { color: var(--dim); } .diff .skip { color: var(--dim-2); font-style: italic; }
.spec { padding: 20px; border-radius: 18px; border: 1px solid var(--line); background: var(--panel); display: flex; flex-direction: column; gap: 14px; }
.tags { display: flex; gap: 8px; flex-wrap: wrap; }
.tag { display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 4px 0 12px; border-radius: 999px; border: 1px solid rgba(255,106,61,.4); background: rgba(255,106,61,.08); color: var(--ember-pale); font-size: 14px; }
.tag button { width: 28px; height: 28px; border-radius: 50%; border: 0; background: none; color: var(--ember-softer); cursor: pointer; font-size: 15px; }
.tag-add { display: flex; gap: 8px; } .tag-add .in { flex: 1; min-width: 0; height: 46px; } .tag-add .btn { height: 46px; padding: 0 16px; }
.spec .btn.primary { height: 44px; padding: 0 22px; box-shadow: none; align-self: flex-start; }
.drop { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 30px 20px; margin-bottom: 14px; border-radius: 18px; border: 1.5px dashed rgba(255,106,61,.45); background: radial-gradient(60% 100% at 50% 0%, rgba(255,106,61,.1), transparent 70%); text-align: center; cursor: pointer; }
.drop b { font-weight: 600; } .drop span { font-size: 13px; color: var(--muted); }
.drop:focus-within { outline: 2px solid var(--ember-softer); outline-offset: 2px; }
.lib-extra { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.lib-extra .btn { height: 40px; padding: 0 14px; font-size: 14px; }
.lib-form { padding: 16px; margin-bottom: 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel); display: flex; flex-direction: column; gap: 10px; animation: wrRise .3s backwards; }
.lib-form .btn.primary { height: 44px; align-self: flex-start; box-shadow: none; }
.lib-list { display: flex; flex-direction: column; gap: 8px; }
.lib-row { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: rgba(21,19,29,.7); transition: opacity .3s; animation: wrRise .4s backwards; flex-wrap: wrap; }
.lib-row.off { opacity: .55; }
.lib-row .kind { flex: 0 0 auto; width: 44px; height: 32px; border-radius: 8px; display: grid; place-items: center; background: rgba(255,255,255,.06); font-family: var(--mono); font-size: 10.5px; color: var(--ember-softer); text-transform: uppercase; }
.lib-row .t { flex: 1; min-width: 0; } .lib-row .t b { display: block; font-size: 14.5px; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lib-row .t span { font-size: 12.5px; color: var(--dim); }
.icon-btn { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 10px; border: 0; background: none; color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.icon-btn.trash:hover { color: var(--bad-hi); }
.lib-text { flex: 1 1 100%; margin: 0; padding: 10px; border-radius: 10px; background: rgba(0,0,0,.35); font-family: var(--mono); font-size: 12px; white-space: pre-wrap; max-height: 260px; overflow: auto; color: var(--text-3); }

/* ---------- settings ---------- */
.set-card { max-width: 680px; padding: clamp(18px, 3cqi, 26px); border-radius: 20px; border: 1px solid var(--line); background: var(--panel); display: flex; flex-direction: column; gap: 22px; }
.set-row { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; }
.set-row .t { flex: 1 1 220px; } .set-row .t b { display: block; font-weight: 600; } .set-row .t span { display: block; font-size: 13px; color: var(--muted); margin-top: 3px; }
.hr { height: 1px; background: rgba(255,255,255,.07); }
.found { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 10px var(--ok); flex: 0 0 auto; }
.status-dot.bad { background: var(--bad); box-shadow: 0 0 10px var(--bad); }
.path { display: block; margin-top: 10px; padding: 12px 14px; border-radius: 12px; background: rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.06); font-family: var(--mono); font-size: 13px; color: var(--text-3); overflow-x: auto; white-space: nowrap; }
.set-card .note { margin: 10px 0 0; font-size: 13.5px; color: var(--muted); line-height: 1.55; }
.set-card .last { font-size: 13px; color: var(--dim); }
.set-card .btn.primary { height: 46px; padding: 0 24px; }

/* ---------- users ---------- */
.temp-card { position: relative; overflow: hidden; padding: 20px; margin-bottom: 18px; border-radius: 18px; border: 1px solid rgba(245,185,74,.55); background: linear-gradient(135deg, rgba(245,185,74,.14), rgba(255,106,61,.05)); box-shadow: 0 24px 70px -36px rgba(245,185,74,.6); animation: wrRise .5s backwards; }
.temp-card .r { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0; }
.temp-card code { flex: 1 1 240px; font-family: var(--mono); font-size: clamp(22px, 4cqi, 30px); color: #fff; letter-spacing: .04em; word-break: break-all; user-select: all; }
.temp-card .btn { height: 44px; } .temp-card .btn.primary { box-shadow: none; padding: 0 18px; }
.temp-card .btn.dk { border-color: rgba(255,255,255,.14); background: rgba(0,0,0,.2); font-size: 14px; padding: 0 14px; }
.temp-card .n { font-size: 13.5px; color: #e3d3b4; line-height: 1.5; }
.utable { border-radius: 20px; border: 1px solid var(--line); background: var(--panel); overflow: hidden; margin-bottom: 26px; }
.utable .hr-row, .utable .u-row { display: grid; grid-template-columns: minmax(0, 1.6fr) 180px 150px minmax(220px, auto); gap: 16px; padding: 14px 20px; }
.utable .hr-row { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--dim); border-bottom: 1px solid rgba(255,255,255,.06); }
.utable .u-row { align-items: center; border-bottom: 1px solid rgba(255,255,255,.05); transition: opacity .3s; }
.u-row.off, .u-card.off { opacity: .55; }
.u-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.u-who .init { width: 38px; height: 38px; font-size: 14px; }
.u-who .t { min-width: 0; flex: 1; } .u-who b { font-weight: 600; } .u-who .you { font-weight: 400; color: var(--dim); }
.u-who .em { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.u-st { justify-self: start; height: 26px; padding: 0 10px; display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid; font-size: 12.5px; white-space: nowrap; }
.u-st.active { color: var(--ok-hi); border-color: rgba(79,192,141,.45); } .u-st.temp { color: var(--gold); border-color: rgba(245,185,74,.55); } .u-st.off { color: var(--muted); border-color: rgba(255,255,255,.14); }
.u-acts { display: flex; gap: 8px; justify-content: flex-end; }
.u-acts .btn { height: 40px; padding: 0 12px; border-radius: 10px; font-size: 13.5px; }
.u-cards { display: flex; flex-direction: column; gap: 10px; margin-bottom: 26px; }
.u-card { padding: 16px; border-radius: 18px; border: 1px solid var(--line); background: var(--panel); display: flex; flex-direction: column; gap: 12px; }
.u-card .u-who .init { width: 40px; height: 40px; }
.u-card .u-st { height: 24px; padding: 0 9px; font-size: 12px; }
.u-card select.in { height: 46px; }
.u-card .u-acts { justify-content: stretch; } .u-card .u-acts .btn { flex: 1; height: 44px; border-radius: 12px; font-size: 14px; }
.add-user { padding: clamp(18px, 3cqi, 24px); border-radius: 20px; border: 1px solid var(--line); background: var(--panel); display: flex; flex-direction: column; gap: 14px; }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px; }
.role-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 8px; }
.role-card { text-align: left; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.02); color: var(--text); cursor: pointer; transition: all .2s; font-family: inherit; }
.role-card b { display: block; font-weight: 600; font-size: 14.5px; } .role-card span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.role-card.on { border-color: rgba(255,106,61,.6); background: rgba(255,106,61,.1); }
.add-user .btn.primary { height: 46px; padding: 0 24px; align-self: flex-start; }

/* ---------- phone dock ---------- */
.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; justify-content: space-around; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: rgba(10,9,14,.86); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-top: 1px solid rgba(255,255,255,.08); }
.dock button { position: relative; flex: 1; min-width: 0; height: 56px; border: 0; background: none; color: var(--dim); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 11px; font-weight: 500; cursor: pointer; transition: color .2s; font-family: inherit; }
.dock button .gb { position: absolute; top: 0; width: 26px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--ember), var(--gold)); box-shadow: 0 0 10px var(--ember); opacity: 0; transition: opacity .3s; }
.dock button.on { color: #fff; } .dock button.on .gb { opacity: 1; }

/* ---------- toast ---------- */
.toast { position: fixed; left: 50%; bottom: var(--toast-b); z-index: 80; transform: translateX(-50%); max-width: calc(100% - 32px); }
.toast > div { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 14px; background: rgba(21,19,29,.94); border: 1px solid rgba(245,185,74,.55); box-shadow: 0 20px 50px -20px rgba(0,0,0,.9), 0 0 30px -10px rgba(245,185,74,.4); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); font-size: 14.5px; animation: wrToast .35s var(--ease) both; }
.toast .d { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px var(--gold); flex: 0 0 auto; }

/* ---------- misc states ---------- */
.loading { color: var(--muted); padding: 24px 0; }
.warn-card { padding: 16px 18px; border-radius: 16px; border: 1px solid rgba(224,164,58,.45); background: rgba(224,164,58,.06); color: #f0d9a6; font-size: 14.5px; margin-bottom: 14px; }
.contents { display: contents; }
.brow .mid { min-width: 0; }
.stab .ok-ic { color: var(--ok-hi); }
.stab:disabled { opacity: 1; }
.sess-card .arrow { color: var(--muted); display: inline-flex; }
.drop .up-ic { color: var(--ember-soft); }
.cast-card .cast-chev { flex: 0 0 auto; color: var(--dim); }
.lib-row .btn.h36 { height: 36px; }
.dr-port .side .btn { align-self: stretch; }
/* entrance animations play once; live re-renders of the same page stay still */
.still .sess-card, .still .live-card, .still .dec, .still .cast-card, .still .tr-item, .still .nd-step, .still .lib-row, .still .banner-bad { animation: none; }

/* ---------- Projects (code access) ---------- */
.status-dot.warn { background: var(--gold); box-shadow: 0 0 10px var(--gold); }
.status-dot.off { background: rgba(255,255,255,.25); box-shadow: none; }
.prj-how { max-width: none; margin-bottom: 22px; gap: 12px; }
.prj-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.prj-steps li { display: flex; gap: 12px; min-width: 0; }
.prj-steps p { margin: 4px 0 0; font-size: 13.5px; color: var(--muted); line-height: 1.55; }
.prj-steps code { font-family: var(--mono); font-size: 12.5px; color: var(--text-2); }
.prj-steps .path { margin: 8px 0 0; }
.prj-n { flex: 0 0 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--ember-pale); background: rgba(255,106,61,.14); border: 1px solid rgba(255,106,61,.45); }
.prj-bar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.prj-sum { display: flex; gap: 8px; flex-wrap: wrap; }
.prj-q { max-width: 260px; height: 40px; }
.prj-list { display: grid; gap: 10px; }
.prj-row { display: block; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel); min-width: 0; }
.prj-row.ok { border-color: rgba(79,192,141,.35); }
.prj-row.warn { border-color: rgba(245,185,74,.4); }
.prj-main { min-width: 0; flex: 1 1 auto; display: grid; gap: 6px; }
.prj-main > b { font-size: 15px; overflow-wrap: anywhere; }
.prj-st { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-2); }
.prj-path { font-family: var(--mono); font-size: 12px; color: var(--dim); overflow-wrap: anywhere; }
.prj-sync { font-size: 12.5px; color: var(--muted); }
.prj-edit { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.prj-edit .in { flex: 1 1 160px; height: 38px; min-width: 0; }
.prj-base { font-size: 12px; color: var(--dim); }
.linkish { background: none; border: 0; padding: 0; color: var(--ember-pale); font: inherit; font-size: 13px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.proj-hint { margin-top: 10px; font-size: 13px; color: var(--muted); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pill .pc { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); margin-left: 8px; vertical-align: middle; }
.pill.more { border-style: dashed; }
.set-grow { flex: 1 1 220px; min-width: 0; }
.set-card .note.tight { margin-top: 4px; }
/* install note is optional info, not a warning */
.install { border-color: var(--line); background: var(--panel); }
.install b { color: var(--text); }
.install p { color: var(--muted); }
.install .link-btn { color: var(--text-3); }
.prj-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.prj-head > b { font-size: 15px; overflow-wrap: anywhere; min-width: 0; }
.prj-sw { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 4px 0; cursor: pointer; color: var(--text-3); font: inherit; font-size: 13px; flex: 0 0 auto; }
.proj-hint .ph-t { flex: 1 1 200px; min-width: 0; }

/* ---------- Create with Claude ---------- */
.add-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-bottom: 26px; }
.add-row .add-tile { margin-bottom: 0; }
.add-tile.ai { height: auto; min-height: 64px; padding: 12px 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border-style: solid; border-color: rgba(255,106,61,.5); background: rgba(255,106,61,.08); color: var(--ember-pale); font-weight: 600; }
.add-tile.ai .sub { font-size: 12.5px; font-weight: 400; color: var(--muted); }
.cr-ask, .cr-review { max-width: none; margin-bottom: 22px; }
.cr-l { display: grid; gap: 8px; min-width: 0; }
.cr-l > b { font-size: 14.5px; }
.cr-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.cr-wide { grid-column: 1 / -1; }
.cr-hint { margin: 10px 0 0; }
.cr-wait { display: flex; align-items: center; gap: 12px; padding: 18px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel); color: var(--text-2); font-size: 14.5px; margin-bottom: 22px; }
.spin { width: 18px; height: 18px; flex: 0 0 auto; border-radius: 50%; border: 2px solid rgba(255,255,255,.15); border-top-color: var(--ember); animation: cr-spin .9s linear infinite; }
@keyframes cr-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation-duration: 3s; } }
.ai-btn { margin-bottom: 12px; border-color: rgba(255,106,61,.5); color: var(--ember-pale); }
.ai-off { margin-bottom: 12px; font-size: 13px; color: var(--dim); }
.ai-panel { margin-bottom: 12px; }
.ai-note { margin-bottom: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(255,106,61,.45); background: rgba(255,106,61,.08); font-size: 13.5px; color: var(--text-2); display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.ai-note b { color: var(--ember-pale); }
select.in { appearance: auto; }