:root{
  --bg:#0E0F11;--sidebar:#121316;--panel:#17181C;--raised:#1D1F24;--overlay:#24262C;
  --line:#26282E;--line2:#2F3238;--text:#EDEEF0;--text2:#A1A4AB;--text3:#8A8F98;
  --accent:#E0162B;--accent-soft:rgba(224,22,43,.14);--ok:#3FB984;--warn:#E5A93B;--bad:#E5534B;
  --font:"Inter","IBM Plex Sans",system-ui,-apple-system,sans-serif;--mono:"IBM Plex Mono","JetBrains Mono",ui-monospace,Menlo,monospace;
  --t:180ms cubic-bezier(.2,0,0,1);--sat:env(safe-area-inset-top);--sab:env(safe-area-inset-bottom)
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font:13px/1.45 var(--font);overscroll-behavior:none}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;border:1px solid var(--line2);background:var(--raised);border-radius:4px;height:32px;padding:0 10px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
button:hover{background:var(--overlay)}
button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button.primary{background:var(--accent);border-color:var(--accent);color:#fff}
button.ghost{background:transparent;border-color:transparent;color:var(--text2)}
button.ghost:hover{background:var(--raised);color:var(--text)}
button.danger{color:var(--bad)}
button.on{border-color:var(--accent);background:var(--accent-soft);color:var(--text)}
button:disabled{opacity:.45;cursor:default}
svg.i{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
kbd{font:11px var(--mono);border:1px solid var(--line2);border-radius:2px;padding:0 4px;color:var(--text2)}

#app{height:100%;display:flex;flex-direction:column}
.bar{height:calc(48px + var(--sat));padding-top:var(--sat);display:flex;align-items:center;gap:8px;padding-left:12px;padding-right:12px;border-bottom:1px solid var(--line);background:var(--sidebar);flex:none}
.bar .title{font-weight:600;font-size:14px;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar .sub{color:var(--text3);font-size:12px;white-space:nowrap}
.bar .sp{flex:1}
.crumb{display:flex;align-items:center;gap:6px;min-width:0}
.crumb a{color:var(--text2);text-decoration:none}
.crumb a:hover{color:var(--text)}
.main{flex:1;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch}
.pill{display:inline-flex;align-items:center;gap:6px;height:20px;padding:0 8px;border-radius:10px;font-size:11px;border:1px solid var(--line2);color:var(--text2);background:var(--panel)}
.pill i{width:6px;height:6px;border-radius:50%;background:var(--text3)}
.pill.ok{border-color:rgba(63,185,132,.4);background:rgba(63,185,132,.12);color:var(--text)}.pill.ok i{background:var(--ok)}
.pill.warn{border-color:rgba(229,169,59,.4);background:rgba(229,169,59,.12);color:var(--text)}.pill.warn i{background:var(--warn)}
.pill.bad{border-color:rgba(229,83,75,.4);background:rgba(229,83,75,.12);color:var(--text)}.pill.bad i{background:var(--bad)}
.pill.live{border-color:rgba(224,22,43,.4);background:var(--accent-soft);color:var(--text)}.pill.live i{background:var(--accent);animation:dot 1.6s infinite}
@keyframes dot{50%{opacity:.35}}

/* login */
.login{margin:auto;width:min(360px,92vw);background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:20px;display:flex;flex-direction:column;gap:12px}
.login h1{margin:0;font-size:16px}
.login input{height:40px;border:1px solid var(--line2);border-radius:4px;background:var(--bg);padding:0 10px;font-size:16px}
.login .err{color:var(--bad);font-size:12px;min-height:16px}

/* projects */
.plist{padding:12px;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.pcard{background:var(--panel);border:1px solid var(--line);border-radius:6px;overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:inherit}
.pcard img{width:100%;aspect-ratio:16/9;object-fit:cover;background:#000}
.pcard .b{padding:12px;display:flex;flex-direction:column;gap:6px}
.pcard .t{font-weight:600;font-size:14px}
.pcard .m{display:flex;gap:14px;color:var(--text2);font-size:12px}
.pcard .m b{color:var(--text);font-family:var(--mono);font-weight:500}

/* board */
.tools{display:flex;gap:6px;padding:8px 12px;border-bottom:1px solid var(--line);background:var(--sidebar);overflow-x:auto;flex:none;align-items:center}
.tools::-webkit-scrollbar{display:none}
.grid{padding:12px;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:6px;overflow:hidden;display:flex;flex-direction:column}
.card.flag{border-color:rgba(229,83,75,.5)}
.card.okay{border-color:rgba(63,185,132,.45)}
.card .media{position:relative;background:#000;aspect-ratio:9/16;max-height:62vh;overflow:hidden}
.card .media img,.card .media video{width:100%;height:100%;object-fit:contain;display:block}
.card .media .end{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--accent);font-weight:700;font-size:20px;letter-spacing:.06em;padding:20px}
.card .media .black{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--text3);font-size:12px}
.card .id{position:absolute;top:8px;left:8px;font:11px var(--mono);background:rgba(0,0,0,.6);padding:2px 6px;border-radius:2px;color:var(--text)}
.card .opt{position:absolute;top:8px;right:8px;font:700 13px var(--mono);color:var(--accent);background:rgba(0,0,0,.6);padding:2px 8px;border-radius:2px}
.card .b{padding:10px 12px 12px;display:flex;flex-direction:column;gap:8px}
.card .t{font-weight:600;font-size:13px}
.card .vo{border-left:2px solid var(--accent);padding:6px 10px;background:var(--bg);font-style:italic;color:var(--text);font-size:13.5px;line-height:1.5}
.card .sfx{color:var(--text2);font-size:12px;line-height:1.45}
.card .row{display:flex;gap:6px;align-items:center}
.card textarea{width:100%;min-height:64px;background:var(--bg);border:1px solid var(--line2);border-radius:4px;padding:8px;font-size:14px;resize:vertical;line-height:1.45}
.card .saved{font:11px var(--mono);color:var(--text3);min-width:48px;text-align:right}
.seg{display:inline-flex;border:1px solid var(--line2);border-radius:4px;overflow:hidden}
.seg button{border:0;border-radius:0;height:30px;background:transparent}
.seg button+button{border-left:1px solid var(--line2)}
.seg button.on{background:var(--accent-soft)}
.rules{grid-column:1/-1;background:var(--sidebar);border:1px dashed var(--line2);border-radius:6px;padding:10px 12px;color:var(--text2);font-size:12px;line-height:1.5}
.vlist{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap}
.vlist a{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--text);background:var(--raised);border:1px solid var(--line2);border-radius:4px;padding:0 10px;height:36px}

/* annotator */
.ann{display:grid;grid-template-rows:auto auto 1fr;height:100%;min-height:0}
.stage{position:relative;background:#000;flex:none;overflow:hidden;touch-action:none;user-select:none}
.stage video{display:block;width:100%;max-height:52vh;object-fit:contain;background:#000}
.stage .frameWrap{position:absolute;inset:0;display:none;overflow:hidden;background:#000}
.stage.marking .frameWrap{display:block}
.stage.marking video{visibility:hidden}
.frameWrap .zoom{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
.frameWrap img{display:block;width:100%;height:auto;pointer-events:none}
.frameWrap svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.frameWrap svg polygon,.frameWrap svg rect{fill:rgba(224,22,43,.22);stroke:var(--accent);stroke-width:1.5;vector-effect:non-scaling-stroke}
.frameWrap svg polygon.saved,.frameWrap svg rect.saved{fill:rgba(63,185,132,.16);stroke:var(--ok)}
.frameWrap svg circle{fill:var(--accent);stroke:#000;stroke-width:1}
.frameWrap svg text{font:600 11px var(--mono);fill:#fff;paint-order:stroke;stroke:#000;stroke-width:3px}
.stage .hud{position:absolute;left:8px;top:8px;display:flex;gap:6px;align-items:center}
.stage .busy{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.35);color:var(--text);font-size:12px;gap:8px}
.stage.busy .busy{display:flex}
.spin{width:14px;height:14px;border:2px solid var(--line2);border-top-color:var(--accent);border-radius:50%;animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.tl{position:relative;height:30px;background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line);flex:none}
.tl .prog{position:absolute;left:0;top:0;bottom:0;background:var(--accent-soft)}
.tl .mk{position:absolute;top:4px;bottom:4px;width:3px;border-radius:1px;background:var(--ok);transform:translateX(-1px)}
.tl .mk.bad{background:var(--bad)}.tl .mk.warn{background:var(--warn)}
.tl .cur{position:absolute;top:0;bottom:0;width:2px;background:var(--accent)}
.tl input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0}
.ctl{display:flex;gap:6px;padding:8px 12px;align-items:center;border-bottom:1px solid var(--line);background:var(--sidebar);overflow-x:auto;flex:none}
.ctl::-webkit-scrollbar{display:none}
.ctl .time{font:12px var(--mono);color:var(--text2);min-width:92px}
.ctl button{height:36px}
.form{padding:10px 12px;border-bottom:1px solid var(--line);background:var(--panel);display:flex;flex-direction:column;gap:8px}
.form .chips{display:flex;gap:6px;flex-wrap:wrap}
.form .chips button{height:32px;padding:0 10px}
.form input{height:40px;border:1px solid var(--line2);border-radius:4px;background:var(--bg);padding:0 10px;font-size:16px;width:100%}
.form .row{display:flex;gap:6px;align-items:center}
.form .hint{color:var(--text3);font-size:12px}
.alist{overflow:auto;min-height:0}
.ai{display:grid;grid-template-columns:64px 1fr auto;gap:10px;padding:8px 12px;border-bottom:1px solid var(--line);align-items:center}
.ai img{width:64px;height:114px;object-fit:cover;background:#000;border-radius:3px}
.ai .l{display:flex;flex-direction:column;gap:3px;min-width:0}
.ai .l .k{display:flex;gap:6px;align-items:center}
.ai .l .n{color:var(--text);font-size:13px;line-height:1.4}
.ai .t{font:11px var(--mono);color:var(--text3)}
.empty{padding:24px 12px;color:var(--text2);font-size:13px;text-align:center}
@media (max-width:700px){
  .grid,.plist{grid-template-columns:1fr;padding:8px;gap:8px}
  .card .media{max-height:70vh}
  .bar .sub{display:none}
}
@media (min-width:1100px){
  .ann{grid-template-columns:minmax(0,1fr) 380px;grid-template-rows:auto 1fr;grid-template-areas:"stage form" "stage list"}
  .ann .stageCol{grid-area:stage;display:flex;flex-direction:column;min-height:0}
  .ann .stage video{max-height:none;height:calc(100vh - 48px - 30px - 53px - var(--sat))}
  .ann .form{grid-area:form;border-left:1px solid var(--line)}
  .ann .alist{grid-area:list;border-left:1px solid var(--line)}
}