/* flare.css — one stylesheet for every Flare surface. Brand tokens from
   shared/brand: ink ground, orange primary, gold highlight, Sora headings,
   Inter body. Pages start at the top and flow down; nothing is vertically
   centred except the countdown ring on the big screen, which is a modal-like
   overlay by nature. Icons are inline SVG, never emoji. */
:root {
  --ink: #0c0a09; --ink-2: #161210; --ink-3: #1e1815;
  --orange: #f47521; --gold: #ffc101; --red: #cc3333;
  --cream: #f5efe6; --body: #b9b2a9; --body-bright: #ddd6cc;
  --line: rgba(255, 193, 1, 0.16); --glass: rgba(255, 255, 255, 0.05);
  --ok: #20d58a; --bad: #ff6b78; --info: #5aa9ff;
  --ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --head: 'Sora', 'Inter', sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  /* the palette for series on screen: brand first, then distinct neighbours */
  --s1: #f47521; --s2: #ffc101; --s3: #5aa9ff; --s4: #20d58a; --s5: #cc3333; --s6: #b48cff; --s7: #ff8fb1; --s8: #7fd8d0;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--ui); background: var(--ink); color: var(--body); line-height: 1.5; -webkit-font-smoothing: antialiased; min-height: 100vh; }
h1, h2, h3 { font-family: var(--head); color: var(--cream); line-height: 1.2; }
a { color: var(--gold); text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.grain { position: fixed; inset: 0; pointer-events: none; z-index: 5;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"); }
.ico { width: 1.1em; height: 1.1em; vertical-align: -0.2em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---- primitives ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-family: var(--head); font-weight: 700; font-size: 1rem;
  padding: .85rem 1.6rem; border-radius: 100px; border: 1px solid transparent; background: var(--glass); color: var(--cream); transition: transform .2s, box-shadow .2s, background .2s; }
.btn:hover { transform: translateY(-2px); }
.btn:disabled { opacity: .45; cursor: default; transform: none; }
.btn-fill { background: linear-gradient(120deg, var(--orange), #ff9136); color: #20130a; box-shadow: 0 10px 30px rgba(244, 117, 33, .3); }
.btn-line { border-color: var(--line); }
.btn-danger { border-color: rgba(204, 51, 51, .5); color: #ff9a9a; }
.btn-sm { font-size: .85rem; padding: .5rem 1rem; }
.btn-xs { font-size: .75rem; padding: .3rem .7rem; }
.well { background: var(--ink-3); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 22px 60px rgba(0, 0, 0, .5), 0 6px 18px rgba(0, 0, 0, .35); }
.field { display: block; margin-bottom: 1rem; }
.field > span { display: block; font-size: .82rem; font-weight: 600; color: var(--body-bright); margin-bottom: .35rem; }
.in { width: 100%; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); border-radius: 12px; padding: .8rem 1rem; color: var(--cream); outline: none; }
.in:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(244, 117, 33, .12); }
textarea.in { min-height: 5rem; resize: vertical; }
.kicker { display: inline-block; text-transform: uppercase; font-size: .72rem; font-weight: 700; letter-spacing: .18em; color: var(--gold); background: var(--glass); border: 1px solid var(--line); padding: .3rem .8rem; border-radius: 100px; }
.muted { color: var(--body); opacity: .75; font-size: .9rem; }
.msg { border-radius: 12px; padding: .8rem 1rem; margin: .8rem 0; font-size: .92rem; border: 1px solid var(--line); background: var(--glass); }
.msg.bad { border-color: rgba(255, 107, 120, .5); color: #ffb3ba; }
.msg.ok { border-color: rgba(32, 213, 138, .5); color: #9defc9; }
.row { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.spacer { flex: 1; }
.code { font-family: var(--mono); letter-spacing: .12em; }
.confirm { border: 1px solid rgba(204, 51, 51, .5); background: rgba(204, 51, 51, .08); border-radius: 12px; padding: .8rem 1rem; margin: .6rem 0; }

/* ---- join + audience (phone) ---- */
.phone { max-width: 560px; margin: 0 auto; padding: 1.5rem 1.1rem 4rem; }
.phone .logo { height: 60px; display: block; margin: .4rem auto 1.2rem; }
.phone h1 { font-size: 1.5rem; margin-bottom: .3rem; }
.phone .prompt { font-size: 1.35rem; font-weight: 700; color: var(--cream); font-family: var(--head); margin: .4rem 0 1rem; }
.topbar { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; font-size: .8rem; }
.topbar .flame { color: var(--orange); font-family: var(--head); font-weight: 800; font-size: 1rem; color: var(--cream); }
.topbar .flame b { color: var(--orange); }
.topbar .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bad); }
.topbar .dot.on { background: var(--ok); box-shadow: 0 0 10px var(--ok); }
.wait { padding: 2rem 1.2rem; text-align: center; }
.wait h2 { font-size: 1.3rem; margin: .8rem 0 .3rem; }
.wait .pulse { width: 64px; height: 64px; margin: 0 auto; border-radius: 50%; background: radial-gradient(circle, var(--orange), transparent 70%); animation: pulse 2.2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { transform: scale(.85); opacity: .6; } 50% { transform: scale(1.1); opacity: 1; } }
.opts { display: grid; gap: .6rem; }
.opt { display: flex; align-items: center; gap: .8rem; text-align: left; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); border-radius: 14px; padding: .95rem 1rem; color: var(--cream); font-size: 1.02rem; transition: border-color .15s, background .15s; }
.opt .sw { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.opt.on { border-color: var(--gold); background: rgba(255, 193, 1, .12); }
.opt:disabled { opacity: .6; }
.rank { display: grid; gap: .5rem; }
.rank .opt { justify-content: space-between; }
.rank .mv { display: flex; gap: .3rem; }
.rank .mv button { background: var(--glass); border: 1px solid var(--line); border-radius: 8px; width: 34px; height: 34px; color: var(--cream); }
.slider { width: 100%; margin: 1rem 0; accent-color: var(--orange); }
.slider-val { font-family: var(--head); font-size: 2.4rem; color: var(--gold); text-align: center; font-weight: 800; }
.slider-labels { display: flex; justify-content: space-between; font-size: .8rem; }
.pts { display: grid; gap: .6rem; }
.pts .prow { display: grid; grid-template-columns: 1fr 90px; gap: .6rem; align-items: center; }
.pts .left { text-align: right; font-family: var(--head); font-weight: 700; color: var(--gold); margin-top: .4rem; }
.gridbox { position: relative; width: 100%; aspect-ratio: 1; background: var(--ink-3); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; touch-action: none; }
.gridbox::before, .gridbox::after { content: ''; position: absolute; background: var(--line); }
.gridbox::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.gridbox::after { top: 50%; left: 0; right: 0; height: 1px; }
.gridbox .pt { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 700; color: #20130a; }
.grid-axes { display: flex; justify-content: space-between; font-size: .75rem; margin-top: .3rem; }
.pinbox { position: relative; width: 100%; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); touch-action: manipulation; }
.pinbox img { display: block; width: 100%; }
.pinbox .pin { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--orange); border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
.done { text-align: center; padding: 1.4rem .5rem; }
.done .big { font-family: var(--head); font-size: 1.4rem; color: var(--cream); margin-top: .5rem; }
.qa-list { display: grid; gap: .5rem; margin-top: 1rem; }
.qa-item { display: flex; gap: .7rem; align-items: flex-start; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); border-radius: 12px; padding: .7rem .8rem; }
.qa-item .vote { flex: none; display: flex; flex-direction: column; align-items: center; gap: 0; background: var(--glass); border: 1px solid var(--line); border-radius: 10px; padding: .3rem .6rem; color: var(--cream); min-width: 48px; font-size: .8rem; }
.qa-item .vote.on { border-color: var(--gold); color: var(--gold); }
.qa-item .vote b { font-size: 1rem; }
.qa-item.answered { opacity: .55; }
.react-bar { position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: .5rem; padding: .6rem .6rem calc(.6rem + env(safe-area-inset-bottom, 0px)); background: rgba(12, 10, 9, .85); backdrop-filter: blur(8px); border-top: 1px solid var(--line); z-index: 10; }
.react-bar button { width: 52px; height: 44px; border-radius: 12px; background: var(--glass); border: 1px solid var(--line); color: var(--cream); display: flex; align-items: center; justify-content: center; }
.react-bar button:active { transform: scale(.9); background: rgba(255, 193, 1, .2); }
.react-bar .ico { width: 1.4em; height: 1.4em; }
.mini-results { margin-top: 1.2rem; }
.bar-list { display: grid; gap: .45rem; }
.bar-row { display: grid; grid-template-columns: 1fr auto; gap: .5rem; align-items: center; font-size: .9rem; }
.bar-row .track { grid-column: 1 / -1; height: 8px; background: var(--glass); border-radius: 4px; overflow: hidden; }
.bar-row .fill { height: 100%; border-radius: 4px; background: var(--orange); transition: width .5s ease; }
.tag-cloud { display: flex; flex-wrap: wrap; gap: .4rem; }
.tag-cloud span { background: var(--glass); border: 1px solid var(--line); border-radius: 100px; padding: .2rem .7rem; font-size: .85rem; color: var(--cream); }
.name-ask { padding: .5rem 0 1rem; }

/* ---- big screen ---- */
body.screen { overflow: hidden; height: 100vh; background: #000; cursor: none; }
body.screen.cursor { cursor: default; }
.stage { position: absolute; inset: 0; display: block; }
.stage img.page { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.qslide { position: absolute; inset: 0; padding: 4vh 5vw 12vh; display: grid; grid-template-rows: auto 1fr; gap: 2vh; background:
  radial-gradient(ellipse 60% 50% at 18% 0%, rgba(244, 117, 33, .16), transparent 60%),
  radial-gradient(ellipse 55% 45% at 85% 100%, rgba(255, 193, 1, .10), transparent 60%), var(--ink); }
.qslide .prompt { font-family: var(--head); font-weight: 800; color: var(--cream); font-size: clamp(1.6rem, 4vw, 3.6rem); line-height: 1.15; letter-spacing: -.01em; }
.qslide .prompt small { display: block; font-size: .4em; font-weight: 600; color: var(--gold); letter-spacing: .12em; text-transform: uppercase; margin-bottom: .6em; }
.viz { position: relative; min-height: 0; }
.viz svg { width: 100%; height: 100%; display: block; }
.viz .empty { position: absolute; left: 0; right: 0; top: 40%; text-align: center; color: var(--body); font-size: clamp(1rem, 2vw, 1.6rem); }
.hidden-note { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--head); font-size: clamp(1.2rem, 3vw, 2.4rem); color: var(--body); }
.joinbar { position: absolute; left: 0; right: 0; bottom: 0; height: 9vh; min-height: 56px; display: flex; align-items: center; gap: 2vw; padding: 0 3vw; background: rgba(12, 10, 9, .88); border-top: 1px solid var(--line); color: var(--cream); font-size: clamp(.9rem, 1.6vw, 1.5rem); z-index: 3; }
.joinbar .setup-link { color: var(--body); opacity: .55; display: inline-flex; padding: .3em; border-radius: 8px; } .joinbar .setup-link:hover { opacity: 1; color: var(--gold); }
.joinbar .flame b { color: var(--orange); font-family: var(--head); font-weight: 800; }
.joinbar .codebox { font-family: var(--mono); font-weight: 700; letter-spacing: .18em; color: var(--gold); background: rgba(255, 193, 1, .1); border: 1px solid var(--line); padding: .2em .7em; border-radius: 10px; }
.joinbar .count { margin-left: auto; color: var(--body); font-size: .8em; display: flex; gap: 1.5em; }
.joinbar .count b { color: var(--cream); }
.joinbar .qr { height: 7vh; width: 7vh; background: #fff; border-radius: 6px; padding: 3px; }
.joinbar .qr canvas, .joinbar .qr img { width: 100%; height: 100%; display: block; }
.overlay { position: absolute; inset: 0; z-index: 4; background: rgba(12, 10, 9, .94); display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: 6vh 8vw; gap: 4vw; }
.overlay h2 { font-size: clamp(1.6rem, 4vw, 3.6rem); }
.overlay .steps { font-size: clamp(1rem, 2.2vw, 2rem); color: var(--body-bright); line-height: 1.6; }
.overlay .steps b { color: var(--gold); font-family: var(--mono); letter-spacing: .15em; }
.overlay .bigqr { background: #fff; border-radius: 16px; padding: 3%; width: min(60vh, 100%); margin: 0 auto; }
.overlay .bigqr canvas, .overlay .bigqr img { width: 100%; height: auto; display: block; }
.timer-ring { position: absolute; right: 3vw; top: 3vh; width: 12vh; height: 12vh; z-index: 3; }
.timer-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.timer-ring .n { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--head); font-weight: 800; font-size: 4vh; color: var(--cream); }
.closed-pill { position: absolute; left: 3vw; top: 3vh; z-index: 3; background: rgba(204, 51, 51, .2); border: 1px solid rgba(204, 51, 51, .6); color: #ffb3ba; padding: .4em 1em; border-radius: 100px; font-family: var(--head); font-weight: 700; font-size: clamp(.8rem, 1.4vw, 1.2rem); }
.help { position: absolute; right: 3vw; bottom: 12vh; z-index: 4; background: var(--ink-3); border: 1px solid var(--line); border-radius: 14px; padding: 1.2rem 1.4rem; font-size: clamp(.8rem, 1.2vw, 1.05rem); color: var(--body-bright); box-shadow: 0 22px 60px rgba(0, 0, 0, .5); }
.help b { display: inline-block; min-width: 2.4em; font-family: var(--mono); color: var(--gold); }
.floaters { position: absolute; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; }
.floater { position: absolute; bottom: 10vh; width: 5vh; height: 5vh; color: var(--orange); animation: floatup 3s ease-out forwards; }
.floater .ico { width: 100%; height: 100%; }
@keyframes floatup { 0% { transform: translateY(0) scale(.6); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-70vh) translateX(var(--drift)) scale(1.2); opacity: 0; } }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2vw; align-content: start; height: 100%; overflow: hidden; }
.card { background: var(--ink-3); border: 1px solid var(--line); border-radius: 14px; padding: 1.2vw 1.4vw; color: var(--cream); font-size: clamp(.9rem, 1.6vw, 1.5rem); line-height: 1.35; animation: cardin .4s ease-out; }
@keyframes cardin { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
.qa-screen { display: grid; gap: .8vw; align-content: start; height: 100%; overflow: hidden; }
.qa-screen .card { display: flex; gap: 1.2vw; align-items: center; }
.qa-screen .card .v { flex: none; font-family: var(--head); font-weight: 800; color: var(--gold); min-width: 2.5em; text-align: center; font-size: 1.1em; }
.qa-screen .card.hl { border-color: var(--gold); background: rgba(255, 193, 1, .1); }
.qa-screen .card.ans { opacity: .45; text-decoration: line-through; }
.lead { display: grid; gap: .6vw; align-content: start; }
.lead .row-l { display: grid; grid-template-columns: 3em 1fr auto; gap: 1vw; align-items: center; background: var(--ink-3); border: 1px solid var(--line); border-radius: 12px; padding: .8vw 1.2vw; font-size: clamp(1rem, 2vw, 1.8rem); color: var(--cream); }
.lead .row-l .p { font-family: var(--head); font-weight: 800; color: var(--gold); }
.textslide { font-size: clamp(1.1rem, 2.4vw, 2.2rem); color: var(--body-bright); line-height: 1.5; white-space: pre-wrap; max-width: 60ch; }
.videobox { position: absolute; inset: 0; bottom: 9vh; background: #000; }
.videobox iframe { width: 100%; height: 100%; border: 0; }
.pinviz { position: relative; height: 100%; display: flex; justify-content: center; }
.pinviz img { max-height: 100%; max-width: 100%; display: block; }
.pinviz .dots { position: absolute; inset: 0; }
.pinviz .dot { position: absolute; width: 1.6vw; height: 1.6vw; margin: -.8vw 0 0 -.8vw; border-radius: 50%; background: rgba(244, 117, 33, .75); border: 2px solid #fff; }

/* ---- admin + remote (operator tools) ---- */
body.admin { background:
  radial-gradient(1100px 520px at 12% -8%, rgba(244, 117, 33, .10), transparent 62%),
  radial-gradient(900px 480px at 92% 4%, rgba(255, 193, 1, .06), transparent 60%), var(--ink); }
.adm-head { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--line); background: rgba(12, 10, 9, .75); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 20; }
.adm-head .brand { font-family: var(--head); font-weight: 800; color: var(--cream); font-size: 1.1rem; display: flex; align-items: center; gap: 8px; }
.adm-head .brand b { color: var(--orange); }
.adm-head .who { color: var(--body); font-size: .85rem; }
.adm-wrap { max-width: 1180px; margin: 0 auto; padding: 1.4rem 1.2rem 5rem; }
.adm-grid { display: grid; grid-template-columns: 340px 1fr; gap: 1.2rem; }
@media (max-width: 900px) { .adm-grid { grid-template-columns: 1fr; } }
.panel { padding: 1.1rem 1.2rem; }
.panel h2 { font-size: 1.05rem; margin-bottom: .8rem; display: flex; align-items: center; gap: .5rem; }
.talk-list { display: grid; gap: .5rem; }
.talk-item { display: block; width: 100%; text-align: left; background: var(--glass); border: 1px solid var(--line); border-radius: 12px; padding: .7rem .9rem; color: var(--cream); }
.talk-item.on { border-color: var(--gold); background: rgba(255, 193, 1, .1); }
.talk-item .t { font-weight: 600; }
.talk-item .m { font-size: .78rem; color: var(--body); display: flex; gap: .8rem; margin-top: .2rem; }
.pill { display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .15rem .55rem; border-radius: 100px; border: 1px solid var(--line); color: var(--body); }
.pill.live { color: var(--ok); border-color: rgba(32, 213, 138, .5); }
.pill.ended { color: var(--body); }
.pill.draft { color: var(--gold); }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 1rem; }
.tabs button { background: none; border: 0; border-bottom: 2px solid transparent; padding: .6rem .9rem; color: var(--body); font-weight: 600; }
.tabs button.on { color: var(--cream); border-bottom-color: var(--orange); }
.seq { display: grid; gap: .4rem; }
.seq-page { display: flex; align-items: center; gap: .8rem; padding: .45rem .6rem; border-radius: 10px; background: var(--glass); border: 1px solid transparent; font-size: .9rem; }
.seq-page img { width: 72px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; background: #000; }
.seq-page .n { font-family: var(--mono); color: var(--body); min-width: 3.2em; }
.seq-q { display: flex; align-items: center; gap: .6rem; margin-left: 2.2rem; padding: .5rem .7rem; border-radius: 10px; background: rgba(244, 117, 33, .08); border: 1px solid rgba(244, 117, 33, .35); font-size: .9rem; color: var(--cream); }
.seq-q .k { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--gold); font-weight: 700; min-width: 5.5em; }
.seq-q .p { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seq-q .acts { display: flex; gap: .3rem; }
.seq-q .acts button, .seq-page .acts button { background: none; border: 1px solid var(--line); color: var(--body-bright); border-radius: 8px; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; }
.seq-q .acts button:hover, .seq-page .acts button:hover { color: var(--gold); border-color: var(--gold); }
.seq-add { margin-left: 2.2rem; }
.seq .cur { outline: 2px solid var(--gold); }
.drop { border: 2px dashed var(--line); border-radius: 14px; padding: 1.4rem; text-align: center; color: var(--body); }
.drop.over { border-color: var(--gold); background: rgba(255, 193, 1, .06); }
.kind-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .45rem; margin-bottom: 1rem; }
@media (max-width: 700px) { .kind-grid { grid-template-columns: repeat(2, 1fr); } }
.kind-grid button { background: var(--glass); border: 1px solid var(--line); border-radius: 10px; padding: .55rem .4rem; color: var(--body-bright); font-size: .8rem; display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.kind-grid button.on { border-color: var(--gold); color: var(--cream); background: rgba(255, 193, 1, .1); }
.kind-grid .ico { width: 1.4em; height: 1.4em; }
.opt-edit { display: grid; gap: .4rem; }
.opt-edit .r { display: grid; grid-template-columns: auto 1fr auto; gap: .4rem; align-items: center; }
.opt-edit .r input[type=checkbox] { accent-color: var(--orange); width: 18px; height: 18px; }
.opt-edit .r .x { background: none; border: 1px solid var(--line); color: var(--body); border-radius: 8px; width: 32px; height: 32px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.check { display: flex; align-items: center; gap: .5rem; font-size: .9rem; color: var(--body-bright); margin-bottom: .8rem; }
.check input { accent-color: var(--orange); width: 18px; height: 18px; }
.res-block { padding: 1rem 1.1rem; margin-bottom: 1rem; }
.res-block h3 { font-size: 1rem; margin-bottom: .5rem; }
.res-block .meta { font-size: .8rem; color: var(--body); margin-bottom: .6rem; }
.res-block .viz { height: 260px; }
.res-block .cards { grid-template-columns: repeat(2, 1fr); height: auto; }
.res-block .card { font-size: .95rem; padding: .7rem .9rem; }
.link-box { display: grid; gap: .5rem; }
.link-box .l { display: grid; grid-template-columns: 1fr auto; gap: .5rem; align-items: center; font-size: .85rem; }
.link-box code { font-family: var(--mono); color: var(--gold); word-break: break-all; }

/* remote */
body.remote .adm-wrap { max-width: 520px; padding-bottom: 2rem; }
.rc-now { padding: 1rem 1.1rem; margin-bottom: 1rem; }
.rc-now .lbl { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--gold); font-weight: 700; }
.rc-now .big { font-family: var(--head); font-weight: 800; color: var(--cream); font-size: 1.25rem; margin: .3rem 0; }
.rc-now .thumb { width: 100%; border-radius: 10px; margin-top: .6rem; background: #000; }
.rc-nav { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: .8rem; }
.rc-nav .btn { padding: 1.1rem; font-size: 1.1rem; }
.rc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-bottom: 1rem; }
.rc-grid .btn { padding: .8rem .4rem; font-size: .8rem; flex-direction: column; gap: .25rem; border-radius: 14px; }
.rc-grid .btn.on { border-color: var(--gold); background: rgba(255, 193, 1, .12); }
.rc-grid .ico { width: 1.4em; height: 1.4em; }
.rc-notes { white-space: pre-wrap; font-size: .95rem; color: var(--body-bright); }
.rc-steps { display: grid; gap: .3rem; max-height: 40vh; overflow: auto; }
.rc-steps button { text-align: left; background: var(--glass); border: 1px solid var(--line); border-radius: 8px; padding: .45rem .6rem; color: var(--body-bright); font-size: .85rem; display: flex; gap: .5rem; }
.rc-steps button.on { border-color: var(--gold); color: var(--cream); }
.rc-steps button .n { font-family: var(--mono); color: var(--body); min-width: 2.6em; }
.rc-qa { display: grid; gap: .4rem; }
.rc-qa .it { background: var(--glass); border: 1px solid var(--line); border-radius: 10px; padding: .6rem .7rem; font-size: .9rem; color: var(--cream); }
.rc-qa .it.held { border-color: rgba(255, 193, 1, .5); }
.rc-qa .it .acts { display: flex; gap: .3rem; margin-top: .4rem; flex-wrap: wrap; }