/* Blueprint, after echternacht.dev: navy drafting sheet, cyan linework, redline markup, registration marks. */
:root {
  --bg: #0b2647; --bg-deep: #071a33; --surface: rgba(12, 42, 80, .82); --surface-solid: #0c2a50;
  --ink: #eaf3ff; --muted: #8eb0d8; --line: rgba(150, 200, 255, .2); --line-strong: rgba(150, 210, 255, .45);
  --accent: #6fdcff; --accent-soft: rgba(111, 220, 255, .12); --warm: #ff8a3d; --red: #ff4d4d; --ok: #5ee6a8;
  --grid-minor: rgba(150, 200, 255, .055); --grid-major: rgba(150, 200, 255, .11);
  --f-display: "Archivo", "Segoe UI", system-ui, sans-serif;
  --f-body: "Geist", "Segoe UI", system-ui, sans-serif;
  --f-mono: "Geist Mono", ui-monospace, Consolas, monospace;
  --ease: cubic-bezier(.2, .8, .1, 1);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; color: var(--ink); font: 15px/1.5 var(--f-body); -webkit-font-smoothing: antialiased;
  background-color: var(--bg);
  background-image:
    radial-gradient(120% 80% at 50% 0%, transparent 40%, var(--bg-deep) 100%),
    linear-gradient(var(--grid-major) 1px, transparent 1px), linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--grid-minor) 1px, transparent 1px), linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px);
  background-size: 100% 100%, 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-attachment: fixed;
}
/* paper grain */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .08; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection { background: var(--accent); color: var(--bg-deep); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
a { color: var(--accent); }
[hidden] { display: none !important; }
.mono { font-family: var(--f-mono); }
.muted { color: var(--muted); }
svg.i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* registration-mark corners on drawn panels */
.panel {
  --c: var(--line-strong);
  background-image:
    linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)),
    linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c));
  background-size: 14px 1px, 1px 14px, 14px 1px, 1px 14px, 14px 1px, 1px 14px, 14px 1px, 1px 14px;
  background-position: -1px -1px, -1px -1px, calc(100% + 1px) -1px, calc(100% + 1px) -1px, -1px calc(100% + 1px), -1px calc(100% + 1px), calc(100% + 1px) calc(100% + 1px), calc(100% + 1px) calc(100% + 1px);
  background-repeat: no-repeat; background-color: var(--surface);
  border: 1px solid var(--line); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.panel:hover { --c: var(--accent); }

/* controls */
input, select, button { font: 500 15px var(--f-mono); color: var(--ink); min-height: 42px; border-radius: 2px; }
input, select { background: rgba(7, 26, 51, .7); border: 1px solid var(--line-strong); padding: 8px 12px; min-width: 0; }
input::placeholder { color: var(--muted); }
input:focus, select:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
select { appearance: none; padding-right: 32px; background-image: linear-gradient(45deg, transparent 50%, var(--accent) 50%), linear-gradient(-45deg, transparent 50%, var(--accent) 50%); background-position: calc(100% - 17px) 55%, calc(100% - 12px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 16px; cursor: pointer; background: transparent; border: 1px solid var(--accent); color: var(--accent); transition: background .2s, color .2s, transform .15s var(--ease), box-shadow .2s; white-space: nowrap; }
.btn:hover { background: var(--accent); color: var(--bg-deep); box-shadow: 0 0 18px rgba(111, 220, 255, .25); }
.btn:active { transform: translateY(1px) scale(.98); }
.btn.solid { background: var(--accent); color: var(--bg-deep); }
.btn.solid:hover { background: #a5ebff; }
.btn.ghost { border-color: var(--line-strong); color: var(--ink); }
.btn.ghost:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }
.btn.red { border-color: var(--red); color: var(--red); }
.btn.red:hover { background: var(--red); color: #fff; box-shadow: 0 0 18px rgba(255, 77, 77, .3); }
.btn:disabled { opacity: .4; cursor: default; pointer-events: none; }
.btn.sm { min-height: 32px; padding: 4px 10px; font-size: 13px; }

.lvl { display: inline-flex; align-items: center; gap: 10px; font: 500 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin: 0; }
.lvl::before { content: ""; width: 28px; height: 1px; background: var(--accent); }
.stamp { font: 500 10px/1 var(--f-mono); letter-spacing: .14em; color: var(--muted); border: 1px solid var(--line); padding: 4px 8px; text-transform: uppercase; white-space: nowrap; }
.dimline { display: flex; align-items: center; gap: 10px; font: 500 11px/1 var(--f-mono); color: var(--muted); letter-spacing: .14em; text-transform: uppercase; }
.dimline::before, .dimline::after { content: ""; flex: 1; height: 9px; border: solid var(--line-strong); border-width: 0 1px; background: linear-gradient(var(--line-strong), var(--line-strong)) center / 100% 1px no-repeat; }
.redline { position: relative; color: var(--accent); font-style: normal; }
.redline::after { content: ""; position: absolute; left: -.04em; right: -.04em; bottom: .04em; height: .09em; background: var(--warm); border-radius: 2px; transform: scaleX(0); transform-origin: left; animation: redline .9s .5s cubic-bezier(.6, .1, .2, 1) forwards; }
@keyframes redline { to { transform: scaleX(1); } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes fadein { from { opacity: 0; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pulse { 50% { opacity: .35; transform: scale(.8); } }
@keyframes scan { from { transform: translateY(-100%); } to { transform: translateY(100%); } }
.rise { animation: rise .7s var(--ease) both; animation-delay: calc(var(--d, 0) * 80ms); }

/* ---------- app shell ---------- */
body.app { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; }
.bar { display: flex; align-items: center; gap: 14px; padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top)); border-bottom: 1px solid var(--line-strong); background: rgba(7, 26, 51, .78); backdrop-filter: blur(8px); position: relative; z-index: 10; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand b { font: 800 17px/1 var(--f-display); letter-spacing: -.01em; font-variation-settings: "wdth" 112; }
.brand svg { width: 26px; height: 26px; color: var(--accent); }
.bar .grow { flex: 1; }
.meter { display: flex; align-items: center; gap: 10px; font: 500 11px/1 var(--f-mono); color: var(--muted); letter-spacing: .08em; min-width: 0; }
.meter .track { width: 120px; height: 7px; border: solid var(--line-strong); border-width: 0 1px; position: relative; }
.meter .track::before { content: ""; position: absolute; left: 0; right: 0; top: 3px; height: 1px; background: var(--line-strong); }
.meter .track i { position: absolute; left: 0; top: 1px; height: 5px; background: var(--accent); width: 0; transition: width .6s var(--ease); box-shadow: 0 0 8px rgba(111, 220, 255, .5); }
.meter.hot .track i { background: var(--red); }
#status { font: 12px var(--f-mono); color: var(--muted); }

main.app-main { flex: 1; display: grid; grid-template-columns: 1fr 230px; min-height: 0; }

/* stage = the drawing sheet */
#stage { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; user-select: none; -webkit-user-select: none; background: radial-gradient(70% 70% at 50% 50%, rgba(7, 26, 51, .2), rgba(5, 18, 36, .75)); }
#stage.sharing { touch-action: none; cursor: grab; }
#stage.sharing.drag { cursor: grabbing; }
#stage::before { content: ""; position: absolute; inset: 14px; border: 1px dashed var(--line); pointer-events: none; }
video { max-width: 100%; max-height: 100%; display: block; animation: fadein .5s ease both; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }

/* empty / join */
.center { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; overflow: auto; }
.join { width: min(460px, 100%); padding: 30px 28px 24px; display: flex; flex-direction: column; gap: 18px; animation: rise .7s var(--ease) both; }
.join h1 { font: 850 clamp(40px, 9vw, 64px)/.92 var(--f-display); letter-spacing: -.04em; font-variation-settings: "wdth" 118; margin: 0; }
.join p { margin: 0; color: var(--muted); }
.join form { display: flex; gap: 8px; }
.join form label { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.join form label span { font: 500 10px/1 var(--f-mono); letter-spacing: .14em; color: var(--muted); text-transform: uppercase; }
.join form .btn { align-self: flex-end; }
.empty { text-align: center; display: grid; justify-items: center; gap: 14px; color: var(--muted); animation: fadein .6s ease both; }
.empty svg { width: 120px; height: 90px; color: var(--accent); fill: none; stroke: currentColor; stroke-width: 1.2; }
.empty svg .d { stroke-dasharray: 400; stroke-dashoffset: 400; animation: draw 1.6s var(--ease) forwards; }
.empty svg .d2 { animation-delay: .5s; }
.empty svg .tick { stroke: var(--line-strong); stroke-width: 1; }
.empty b { font: 700 22px/1.1 var(--f-display); color: var(--ink); font-variation-settings: "wdth" 108; }
.empty .scanline { position: relative; overflow: hidden; }

/* activity log */
aside.crew .log { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: 13px; }
aside.crew .log li { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; padding: 6px 8px; border-left: 1px solid var(--line); animation: rise .4s var(--ease) both; }
aside.crew .log li time { font: 10px/1.6 var(--f-mono); color: var(--muted); }
aside.crew .log li span { color: var(--muted); min-width: 0; overflow-wrap: anywhere; }
aside.crew .log li b { color: var(--ink); font-weight: 500; }
aside.crew .log li.share { border-left-color: var(--red); } aside.crew .log li.share span { color: var(--ink); }
aside.crew .log li.snap { border-left-color: var(--accent); }
aside.crew .log li.kick, aside.crew .log li.ban { border-left-color: var(--warm); }
aside.crew .log li img { grid-column: 1 / -1; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--line-strong); cursor: zoom-in; margin-top: 4px; background: var(--bg-deep); transition: border-color .2s, transform .2s var(--ease); }
aside.crew .log li img:hover { border-color: var(--accent); transform: scale(1.02); }
aside.crew .log li img.gone { cursor: default; opacity: .3; }
.lb { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px; background: rgba(5, 18, 36, .86); backdrop-filter: blur(6px); animation: fadein .25s both; }
.lb figure { margin: 0; padding: 12px; max-width: min(1400px, 100%); max-height: 100%; display: flex; flex-direction: column; gap: 10px; animation: rise .4s var(--ease) both; }
.lb img { max-width: 100%; max-height: calc(100dvh - 120px); object-fit: contain; display: block; }
.lb figcaption { display: flex; align-items: center; gap: 8px; }
.lb figcaption span { flex: 1; font-size: 12px; color: var(--muted); }
#flash { position: fixed; inset: 0; z-index: 85; background: #fff; opacity: 0; pointer-events: none; }
#flash.go { animation: flash .45s ease-out; }
@keyframes flash { 0% { opacity: .55; } 100% { opacity: 0; } }

/* viewers: the stream fills the stage (the light layer is half size, so it is scaled up, not shown small) */
#stage:not(.sharing) video { width: 100%; height: 100%; object-fit: contain; box-shadow: none; }

/* log: clips */
aside.crew .log li.clip { border-left-color: var(--warm); }
aside.crew .log li.takeover, aside.crew .log li.handoff { border-left-color: var(--red); }
aside.crew .log .clipbtn { grid-column: 1 / -1; margin-top: 4px; justify-content: flex-start; }
.lb video { max-width: 100%; max-height: calc(100dvh - 120px); display: block; background: #000; }

/* stickers (sharer only, drawn into the stream) */
#stickers { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.stk { position: absolute; pointer-events: auto; touch-action: none; cursor: move; outline: 1px dashed transparent; }
.stk:hover, .stk.on { outline-color: var(--accent); }
.stk img { width: 100%; height: 100%; display: block; pointer-events: none; -webkit-user-drag: none; }
.stk .sh, .stk .sx { position: absolute; opacity: 0; transition: opacity .15s; }
.stk:hover .sh, .stk:hover .sx, .stk.on .sh, .stk.on .sx { opacity: 1; }
.stk .sh { width: 16px; height: 16px; border: 2px solid var(--accent); background: var(--bg-deep); }
.stk .rs { right: -8px; bottom: -8px; cursor: nwse-resize; }
.stk .rot { left: 50%; top: -30px; margin-left: -8px; border-radius: 50%; cursor: grab; }
.stk .rot::after { content: ""; position: absolute; left: 5px; top: 14px; width: 1px; height: 14px; background: var(--accent); }
.stk .sx { right: -12px; top: -12px; min-height: 0; width: 24px; height: 24px; padding: 0; border: 1px solid var(--red); background: var(--bg-deep); color: var(--red); font: 600 14px/1 var(--f-mono); cursor: pointer; border-radius: 50%; }
.stkgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.stkgrid button { min-height: 0; aspect-ratio: 1; padding: 6px; background: rgba(7, 26, 51, .7); border: 1px solid var(--line-strong); cursor: pointer; transition: border-color .2s, transform .15s; }
.stkgrid button:hover { border-color: var(--accent); transform: scale(1.06); }
.stkgrid img { width: 100%; height: 100%; object-fit: contain; }
.upl { cursor: pointer; }
#stk[aria-expanded=true] { border-color: var(--accent); color: var(--accent); }

/* hand-off requests (shown to the sharer) */
.reqs { position: absolute; top: 24px; left: 50%; transform: translateX(-50%); z-index: 6; display: grid; gap: 8px; }
.reqs .panel { display: flex; align-items: center; gap: 10px; padding: 10px 12px; font-size: 14px; animation: rise .4s var(--ease) both; --c: var(--warm); }
.reqs .panel b { font-weight: 600; }

/* "Still watching?" */
.idle { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 20px; background: rgba(5, 18, 36, .7); backdrop-filter: blur(4px); animation: fadein .3s both; }
.idle .panel { display: grid; justify-items: center; gap: 12px; padding: 26px 30px; text-align: center; animation: rise .45s var(--ease) both; }
.idle b { font: 800 28px/1 var(--f-display); font-variation-settings: "wdth" 110; }
.idle span { font-size: 12px; color: var(--muted); }
#idlet { color: var(--warm); }

/* paused: frozen last frame while the tab was hidden (no video is received) */
#paused { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; animation: fadein .4s both; }
#frozen { max-width: 100%; max-height: 100%; filter: grayscale(.7) brightness(.45) blur(1.5px); }
.pbadge { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 30px; text-align: center; animation: rise .5s var(--ease) both; }
.pbadge svg { width: 40px; height: 40px; color: var(--accent); stroke-width: 1.3; }
.pbadge b { font: 800 26px/1 var(--f-display); font-variation-settings: "wdth" 110; }
.pbadge span { font-size: 12px; color: var(--muted); }
aside.crew li .tagl.away { color: var(--muted); }
aside.crew li.away .nm { color: var(--muted); }

/* settings popover (above the dock) */
.pop { position: absolute; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 6; width: min(340px, calc(100% - 24px)); padding: 16px; display: grid; gap: 14px; animation: rise .35s var(--ease) both; }
.pop .field { display: grid; gap: 6px; }
.pop .field > span { font: 500 10px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pop small { color: var(--muted); font-size: 12px; line-height: 1.4; }
.check { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; }
.check input { appearance: none; width: 34px; height: 18px; min-height: 0; padding: 0; border: 1px solid var(--line-strong); border-radius: 9px; position: relative; cursor: pointer; transition: background .2s, border-color .2s; flex: none; }
.check input::after { content: ""; position: absolute; left: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--muted); transition: transform .25s var(--ease), background .2s; }
.check input:checked { background: var(--accent-soft); border-color: var(--accent); }
.check input:checked::after { transform: translateX(16px); background: var(--accent); }
#share.go { animation: glow 1.2s ease-in-out infinite; }
@keyframes glow { 50% { box-shadow: 0 0 0 4px var(--accent-soft), 0 0 26px rgba(111, 220, 255, .6); } }
/* moderation (only visible when logged in as admin) */
.modbadge { color: var(--warm); border-color: var(--warm); }
aside.crew li .adm { font: 600 9px/1 var(--f-mono); letter-spacing: .1em; color: var(--warm); border: 1px solid var(--warm); padding: 2px 4px; }
.modbtn, aside.crew .log .del { display: none; }
body.mod .modbtn { display: inline-flex; min-height: 0; width: 22px; height: 22px; padding: 0; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--line); color: var(--muted); cursor: pointer; font: 600 13px/1 var(--f-mono); }
body.mod .modbtn:hover { border-color: var(--warm); color: var(--warm); }
body.mod aside.crew .log li { position: relative; }
body.mod aside.crew .log .del { display: block; position: absolute; right: 2px; top: 4px; min-height: 0; width: 20px; height: 20px; padding: 0; background: var(--bg-deep); border: 1px solid var(--line); color: var(--red); cursor: pointer; font: 600 12px/1 var(--f-mono); opacity: 0; transition: opacity .15s; }
body.mod aside.crew .log li:hover .del { opacity: 1; }
@media (hover: none) { body.mod aside.crew .log .del { opacity: .8; } }
.modmenu { position: fixed; transform: none; bottom: auto; width: 290px; z-index: 75; --c: var(--warm); }
.modmenu b { font: 700 18px/1.1 var(--f-display); overflow-wrap: anywhere; }
.mrow { display: flex; gap: 6px; flex-wrap: wrap; }
.mrow input { flex: 1; min-height: 32px; font-size: 13px; padding: 4px 8px; }
#cog[aria-expanded=true] { border-color: var(--accent); color: var(--accent); }
#cog[aria-expanded=true] svg { transform: rotate(60deg); }
#cog svg { transition: transform .4s var(--ease); }
body.nostats #stats { display: none; }

/* stats + dock */
#stats { position: absolute; top: 24px; right: 24px; z-index: 4; font: 11px/1 var(--f-mono); letter-spacing: .04em; color: var(--accent); background: rgba(7, 26, 51, .82); border: 1px solid var(--line-strong); padding: 6px 9px; pointer-events: none; }
.live-chip { position: absolute; top: 24px; left: 24px; z-index: 4; display: flex; align-items: center; gap: 8px; font: 500 11px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; background: rgba(7, 26, 51, .82); border: 1px solid var(--line-strong); padding: 6px 10px; pointer-events: none; animation: fadein .4s both; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 10px var(--red); animation: pulse 1.6s infinite; flex: none; }
.dock { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 5; display: flex; gap: 8px; align-items: center; padding: 8px; animation: rise .6s var(--ease) both; max-width: calc(100% - 32px); flex-wrap: wrap; justify-content: center; }
#note { font: 12px var(--f-mono); color: var(--muted); padding: 0 6px; }
#fs { position: absolute; bottom: 22px; right: 24px; z-index: 5; }
#pip { position: absolute; bottom: 22px; right: 72px; z-index: 5; }

/* camera = redline markup over the captured screen */
#cam { position: absolute; z-index: 3; pointer-events: none; outline: 1.5px solid var(--red); box-shadow: 0 0 0 100vmax rgba(5, 18, 36, .62), 0 0 24px rgba(255, 77, 77, .35); transition: box-shadow .3s; }
#stage.drag #cam { box-shadow: 0 0 0 100vmax rgba(5, 18, 36, .5), 0 0 30px rgba(255, 77, 77, .55); }
#cam .tag { position: absolute; left: 0; top: 0; display: flex; gap: 7px; align-items: center; background: var(--red); color: #fff; font: 600 11px/1 var(--f-mono); letter-spacing: .08em; padding: 5px 8px 5px 7px; white-space: nowrap; }
#cam .tag svg { width: 14px; height: 14px; stroke-width: 2; }
#cam .cross { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; transform: translate(-50%, -50%); opacity: .7; }
#cam .cross::before, #cam .cross::after { content: ""; position: absolute; background: var(--red); }
#cam .cross::before { left: 50%; top: 0; bottom: 0; width: 1px; } #cam .cross::after { top: 50%; left: 0; right: 0; height: 1px; }
#cam .h { position: absolute; width: 22px; height: 22px; pointer-events: auto; touch-action: none; }
#cam .h::before { content: ""; position: absolute; inset: 4px; border: 2px solid var(--red); background: rgba(255, 77, 77, .15); }
#cam .h:hover::before { background: var(--red); }
#cam .h[data-h=nw] { left: -11px; top: -11px; cursor: nwse-resize; } #cam .h[data-h=ne] { right: -11px; top: -11px; cursor: nesw-resize; }
#cam .h[data-h=sw] { left: -11px; bottom: -11px; cursor: nesw-resize; } #cam .h[data-h=se] { right: -11px; bottom: -11px; cursor: nwse-resize; }
#camhelp { position: absolute; left: 24px; bottom: 30px; z-index: 4; font: 11px var(--f-mono); color: var(--muted); background: rgba(7, 26, 51, .82); border: 1px solid var(--line); padding: 6px 10px; pointer-events: none; }
#camhelp kbd { color: var(--ink); font: inherit; }

/* crew list */
aside.crew { border-left: 1px solid var(--line-strong); background: rgba(7, 26, 51, .6); padding: 18px 16px; overflow: auto; display: flex; flex-direction: column; gap: 14px; }
aside.crew ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
aside.crew li { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border: 1px solid transparent; font-size: 14px; animation: rise .45s var(--ease) both; min-width: 0; }
aside.crew li:hover { border-color: var(--line); background: var(--accent-soft); }
aside.crew li .n { font: 11px var(--f-mono); color: var(--muted); }
aside.crew li .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
aside.crew li .you { font: 10px var(--f-mono); color: var(--muted); letter-spacing: .1em; }
aside.crew li.live .nm { color: var(--ink); }
aside.crew li.live .tagl { font: 600 10px/1 var(--f-mono); letter-spacing: .1em; color: var(--red); display: flex; align-items: center; gap: 5px; }
aside.crew .count { font: 11px var(--f-mono); color: var(--muted); }

@media (max-width: 760px) {
  .bar { padding: 8px 12px; gap: 10px; }
  .bar .stamp, .meter .lab { display: none; }
  .meter .track { width: 64px; }
  main.app-main { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  aside.crew { border-left: 0; border-top: 1px solid var(--line-strong); max-height: 24dvh; padding: 10px 12px; padding-bottom: max(10px, env(safe-area-inset-bottom)); gap: 6px; }
  aside.crew ul { display: flex; flex-wrap: wrap; gap: 4px; }
  aside.crew li { padding: 4px 8px; border-color: var(--line); }
  #stage::before { inset: 8px; }
  .dock { bottom: 12px; left: 12px; right: 12px; transform: none; max-width: none; }
  .dock .btn { flex: 1; }
  #snap .lab, #clip .lab, #stk .lab { display: none; }
  .pop { bottom: 72px; }
  #fs { top: 12px; right: 12px; bottom: auto; }
  #pip { top: 12px; right: 58px; bottom: auto; }
  #stats { top: 12px; left: 12px; right: auto; }
  .live-chip { display: none; }
  #camhelp { display: none; }
  .join { padding: 24px 20px 20px; }
  .join form { flex-direction: column; }
  .join form .btn { align-self: stretch; }
}

/* ---------- admin ---------- */
body.adm { min-height: 100dvh; }
.adm main { max-width: 1120px; margin: 0 auto; padding: 24px 16px 60px; display: grid; gap: 18px; }
.adm section { padding: 18px; overflow-x: auto; animation: rise .6s var(--ease) both; animation-delay: calc(var(--d, 0) * 70ms); }
.adm section header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.adm h2 { font: 700 20px/1.1 var(--f-display); margin: 0; font-variation-settings: "wdth" 108; display: flex; align-items: center; gap: 10px; }
.adm h2 svg { color: var(--accent); }
.adm table { width: 100%; border-collapse: collapse; font-size: 14px; }
.adm th { text-align: left; font: 500 10px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 8px; border-bottom: 1px solid var(--line-strong); white-space: nowrap; }
.adm td { padding: 9px 8px; border-bottom: 1px dashed var(--line); white-space: nowrap; }
.adm tr { animation: fadein .4s both; }
.adm tbody tr:hover td { background: var(--accent-soft); }
.adm td.ip { font-family: var(--f-mono); font-size: 13px; color: var(--accent); }
.adm td.ua { color: var(--muted); font-size: 12px; white-space: normal; min-width: 130px; }
.adm td.live { color: var(--ink); }
.adm td .tagl.away { color: var(--muted); }
.adm td .tagl { font: 600 10px/1 var(--f-mono); letter-spacing: .1em; color: var(--red); margin-left: 8px; display: inline-flex; align-items: center; gap: 5px; }
.adm .acts { display: flex; gap: 6px; justify-content: flex-end; }
.adm .empty-row td { color: var(--muted); font-family: var(--f-mono); font-size: 12px; }
.big { font: 850 44px/1 var(--f-display); letter-spacing: -.03em; font-variation-settings: "wdth" 112; }
.big small { font: 500 14px var(--f-mono); color: var(--muted); letter-spacing: 0; }
.gauge { position: relative; height: 22px; margin: 16px 0 8px; border: solid var(--line-strong); border-width: 0 1px; }
.gauge::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line-strong); }
.gauge i { position: absolute; left: 0; top: 6px; height: 10px; background: var(--accent); box-shadow: 0 0 12px rgba(111, 220, 255, .5); transition: width .8s var(--ease); }
.gauge.hot i { background: var(--red); box-shadow: 0 0 12px rgba(255, 77, 77, .5); }
.gauge .mark { position: absolute; top: -4px; bottom: -4px; width: 1px; background: var(--warm); }
.gauge .mark::after { content: attr(data-l); position: absolute; top: -14px; right: 4px; font: 500 9px/1 var(--f-mono); letter-spacing: .1em; color: var(--warm); white-space: nowrap; }
.gauge .mark.end { background: var(--muted); } .gauge .mark.end::after { color: var(--muted); }
.kv { display: flex; flex-wrap: wrap; gap: 8px 22px; font: 12px var(--f-mono); color: var(--muted); }
.kv b { color: var(--ink); font-weight: 500; }
.kv .err { color: var(--warm); }
.adm .field { display: grid; gap: 6px; margin-top: 16px; max-width: 460px; }
.adm .field > span { font: 500 10px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.adm .field small { font-size: 12px; }
input[type=range] { padding: 0; min-height: 28px; accent-color: var(--accent); background: none; border: 0; box-shadow: none; }
.bufv { color: var(--accent); font-weight: 600; margin-left: 6px; }
.linkbtn { min-height: 0; padding: 0; background: none; border: 0; color: var(--accent); text-decoration: underline; cursor: pointer; font: inherit; }
.stkurl { display: flex; gap: 6px; margin-top: 8px; }
.stkurl input { flex: 1; min-height: 34px; padding: 4px 8px; font-size: 13px; }
.autogrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.autogrid label { display: grid; grid-template-columns: 1fr 90px; gap: 8px; align-items: center; font-size: 13px; color: var(--muted); }
.autogrid input { min-height: 32px; padding: 4px 8px; font-size: 13px; }
.adm .field:has(.autogrid) { max-width: none; }
.login-wrap { min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.login { width: min(400px, 100%); padding: 28px; display: flex; flex-direction: column; gap: 16px; animation: rise .7s var(--ease) both; }
.login h1 { font: 850 40px/.95 var(--f-display); letter-spacing: -.03em; font-variation-settings: "wdth" 116; margin: 0; }
.login .err { color: var(--warm); font: 12px var(--f-mono); min-height: 1em; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .redline::after { transform: none; }
  .empty svg .d { stroke-dashoffset: 0; }
}