:root{color-scheme:dark;--bg:#0e1116;--panel:#171c23;--line:#2c3440;--muted:#98a4b5;--text:#eef1f5;--accent:#c2ed87;--t:#e2b566;--ct:#84b6ee}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.5 system-ui,-apple-system,sans-serif}
button,input,select,textarea{font:inherit;color:inherit;border:1px solid var(--line);border-radius:7px;background:#10151c;padding:9px 11px;min-width:0}
button{cursor:pointer;transition:border-color .15s,background .15s}
button:hover{background:#28313d;border-color:#647184}
button:disabled{opacity:.4;cursor:default}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
input,select,textarea{width:100%}
textarea{resize:vertical}
header{height:78px;border-bottom:1px solid var(--line);padding:0 32px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{font-size:22px;letter-spacing:-1px;font-weight:850;text-decoration:none;color:var(--text)}
.brand>span{color:var(--accent)}
.brand small{font-size:10px;letter-spacing:2px;font-weight:500;margin-left:22px;color:var(--muted)}
.header-right{display:flex;gap:12px;align-items:center;font-size:12px}
.header-right>button{margin-left:12px}
.live-dot{width:6px;height:6px;background:var(--accent);border-radius:50%;box-shadow:0 0 0 4px #c2ed8712}
main{margin:0 auto;padding:24px}
.intro{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:22px}
.eyebrow,.section-label{font-size:10px;letter-spacing:1.7px;font-weight:750;color:var(--muted)}
.eyebrow{color:var(--accent)}
h1{font-size:clamp(26px,3vw,38px);line-height:1.2;letter-spacing:-1.4px;margin:8px 0}
h2{font-size:22px;line-height:1.2;letter-spacing:-.5px;margin:6px 0}
.intro p,.case-heading p{color:var(--muted);margin:6px 0 0;font-size:13px}
.totals{display:grid;grid-template-columns:auto auto;gap:0 28px;text-align:right}
.totals strong{font-size:26px;font-weight:550;grid-row:1}
.totals span{font-size:11px;color:var(--muted)}
.batch{display:flex;gap:14px;align-items:center;margin-bottom:24px;color:var(--muted);font-size:12px}
progress{appearance:none;height:4px;max-width:260px;flex:1;border:0;border-radius:9px;overflow:hidden}
progress::-webkit-progress-bar{background:#2c3541}
progress::-webkit-progress-value{background:var(--accent)}
.layout{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:start}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px;min-width:0}
.section-label{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:13px}
.section-label span{font-size:10px;color:var(--muted);letter-spacing:0;font-weight:450}
.queue{padding:14px 16px}
.queue-tools{display:grid;grid-template-columns:minmax(130px,1fr) minmax(200px,360px) minmax(260px,340px);align-items:center;gap:16px;margin-bottom:12px}
.queue-tools>.section-label{margin:0;justify-content:flex-start;gap:12px}
.queue-tools>input{font-size:12px}
.filter-row{display:flex;gap:8px}
.filter-row select{font-size:11px;padding:8px 5px}
#caseList{display:flex;gap:8px;overflow-x:auto;scrollbar-width:thin;padding:3px 3px 10px}
.case{display:block;text-align:left;flex:0 0 192px;border:1px solid var(--line);border-radius:7px;background:#10151c;padding:10px 12px}
.case.selected{background:#c2ed870b;border-color:#c2ed875c}
.case-top{display:flex;gap:8px;align-items:center}
.case-number{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.site{color:var(--accent);font-size:10px;background:#c2ed8714;border-radius:4px;padding:2px 5px}
.case-round{font-size:12px;font-weight:650;margin-left:auto}
.case-name{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;margin:7px 0}
.case-detail{display:flex;justify-content:space-between;font-size:10px;color:var(--muted)}
.case-detail .done{color:var(--accent)}
.case-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:65px;margin-bottom:14px}
.nav{display:flex;gap:6px}
.nav button{font-size:17px}
.stage{min-width:0}
.player-stage{position:relative;aspect-ratio:16/9;background:#080b0f;border:1px solid #35404c;border-radius:10px;overflow:hidden}
video{display:block;width:100%;height:100%;object-fit:contain}
#videoMessage{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:radial-gradient(ellipse at 50% 40%,#1c2832,#0a0e13 80%);padding:25px}
#videoMessage[hidden]{display:none}
.play-icon{font-size:50px;line-height:1;color:#71858a;margin-bottom:20px}
#videoMessage strong{font-size:19px}
#videoMessage p{color:var(--muted);font-size:12px;max-width:370px}
.video-caption{position:absolute;left:12px;top:12px;display:flex;gap:8px;align-items:center;text-shadow:0 1px 4px #000}
.video-caption span{background:#0b101acc;border:1px solid #ffffff1a;border-radius:5px;padding:4px 9px;font-size:11px}
.video-caption span:empty{display:none}
#povTeam{color:var(--t)}
#fullscreen{position:absolute;bottom:14px;right:12px;background:#0b101acc;font-size:18px;padding:3px 10px}
.transport{padding:12px 16px;margin-top:12px}
.timeline-wrap{position:relative;display:flex;align-items:center;margin-bottom:9px}
#timeline{padding:0;margin:0;accent-color:var(--accent);height:16px;cursor:pointer}
#decisionMarker{position:absolute;top:0;width:2px;height:16px;background:#e2b566;pointer-events:none}
.transport-row{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.transport-row>div{display:flex;align-items:center;gap:5px}
.transport-row button,.transport-row select{font-size:13px;padding:8px 12px}
.transport-row select{width:auto}
#play{background:var(--accent);color:#1b2711;font-weight:700;min-width:52px}
#clock{font-size:12px;margin-left:6px;color:var(--muted);font-variant-numeric:tabular-nums}
.perspectives{margin:0}
.team-label{font-size:9px;font-weight:750;letter-spacing:1.3px;margin:10px 0 6px}
.t{color:var(--t)}
.ct{color:var(--ct)}
.roster{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.player{padding:8px 7px;text-align:left;overflow:hidden}
.player.selected{border-color:var(--accent);box-shadow:inset 0 0 0 1px #c2ed8730;background:#c2ed870c}
.player .name{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-size:11px;font-weight:650}
.player .status{display:block;font-size:9px;color:var(--muted);margin-top:3px}
.player .status.ready{color:var(--accent)}
.player .status.dead{color:#e8a0a0}
.player.dead .name{color:var(--muted)}
.context-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:16px;margin-top:16px}
.watch-grid{display:grid;grid-template-columns:minmax(0,16fr) minmax(0,9fr);gap:16px;align-items:start;scroll-margin-top:16px}
.watch-grid .section-label{min-height:16px;margin-bottom:10px}
.overview canvas{display:block;width:100%;height:auto;aspect-ratio:1;background:#0e131a;border:1px solid #35404c;border-radius:10px}
.map-details{padding:12px 2px 0}
.utility-legend{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:11px;color:var(--muted)}
.utility-legend .smoke{color:#c2d9ec}
.utility-legend .fire{color:#ffab68}
.utility-legend .flash{color:#ffeaa7}
.utility-legend .he{color:#ff7d83}
.map-details .hint{margin:5px 0 0}
.events #events{max-height:310px;overflow:auto}
.event{font-size:11px;padding:10px 0;border-bottom:1px solid var(--line)}
.event time{display:inline-block;color:var(--muted);font-size:10px;width:45px}
.review{position:static}
.review-layout{display:grid;grid-template-columns:minmax(220px,1fr) minmax(0,3fr);gap:28px}
.review-layout>*,.review-options,.review-notes{min-width:0}
#reviewFields{display:grid;grid-template-columns:minmax(200px,1fr) minmax(0,2fr);gap:0 20px}
.review-actions{grid-column:1/-1;display:flex;gap:10px;justify-content:flex-end}
.review-notes textarea{min-height:110px}
.review label{display:block;font-size:11px;color:var(--muted);margin:15px 0 6px}
.review input,.review select,.review textarea{font-size:12px}
.reviewer-row{display:flex;gap:5px}
.reviewer-row button{font-size:11px}
.hint{color:var(--muted);font-size:11px}
.observer-note{border:1px solid #b7c9e52e;border-left:2px solid #9bacbb;border-radius:5px;padding:12px;font-size:12px;margin:20px 0}
.observer-note span{display:block;color:var(--muted);font-size:11px;margin-top:5px}
fieldset{border:0;margin:0;padding:0}
fieldset button{margin-top:10px;font-size:12px}
.primary{background:var(--accent);color:#1b2711;border-color:var(--accent);font-weight:750}
.primary:hover{background:#d5f4ad}
.shortcuts{font-size:10px;color:var(--muted);line-height:2.2;margin-top:10px;border-top:1px solid var(--line);padding-top:12px}
.shortcuts br{display:none}
.shortcuts span:not(:first-child){margin-left:20px}
.shortcuts span{display:inline-block;font-size:9px;width:55px;color:#c3ccd8}
details{font-size:11px;color:var(--muted);margin-top:20px}
summary{cursor:pointer}
#runId{font-size:9px;overflow-wrap:anywhere}
footer{display:flex;gap:20px;margin-top:32px;padding-top:18px;border-top:1px solid var(--line);font-size:10px;letter-spacing:1px;color:var(--muted)}
footer span{letter-spacing:0}
#connection{margin-left:auto}
#error{background:#4b2525;border:1px solid #b77474;color:#ffcccc;padding:12px;border-radius:7px;margin-bottom:18px}
#saveStatus{min-height:16px;margin-bottom:0}
.empty{padding:20px;color:var(--muted);font-size:12px}

@media(max-width:1100px){
  .brand small{display:none}

  .review-layout{grid-template-columns:minmax(200px,1fr) minmax(0,2fr);gap:20px}

  #reviewFields{grid-template-columns:minmax(0,1fr)}

  .review-actions{flex-wrap:wrap;justify-content:flex-start}

}

@media(max-width:760px){
  header{height:auto;min-height:68px;padding:15px 16px;align-items:start}

  .brand{font-size:19px}

  .header-right{font-size:10px;flex-wrap:wrap;justify-content:flex-end;gap:8px}

  .header-right>button{font-size:10px;margin-left:0;padding:6px}

  .live-dot{display:none}

  main{padding:20px 14px}

  .intro{align-items:start}
.intro p{font-size:11px}

  .totals{gap:0 12px}
.totals strong{font-size:17px}
.totals span{font-size:9px}

  .batch{flex-direction:column;align-items:stretch;font-size:10px;gap:7px}

  progress{width:100%;max-width:none;min-height:4px;flex:auto}

  .layout{gap:16px}
.panel{padding:12px}

  .queue-tools{grid-template-columns:minmax(0,1fr);gap:9px}
.case{flex-basis:175px}

  .case-heading{min-height:65px}
h2{font-size:19px}
.case-heading p{font-size:11px}

  .watch-grid{grid-template-columns:minmax(0,1fr);gap:12px}

  .transport{padding:10px}
.transport-row>div{flex-wrap:wrap}

  .transport-row button,.transport-row select{font-size:11px;padding:6px 8px}
#clock{font-size:10px}

  .section-label{font-size:9px;letter-spacing:1px}
.section-label span{font-size:9px}

  .perspectives>.section-label{flex-wrap:wrap}

  .roster{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}

  .player{padding:9px 7px}
.player .name{font-size:11px}
.player .status{font-size:9px}

  .context-grid,.review-layout{grid-template-columns:minmax(0,1fr);gap:14px}

  .review-actions{flex-direction:column}
.review-actions button{margin-top:0}

  .review-actions{margin-top:12px}
.observer-note{margin-bottom:0}

  .shortcuts br{display:block}
.shortcuts span:not(:first-child){margin-left:0}

  footer{flex-wrap:wrap;gap:8px}
#connection{margin-left:0;width:100%}

}

.signin{max-width:680px;margin:10vh auto;padding:24px}.signin .panel{padding:40px}.signin h1{font-size:clamp(28px,5vw,42px)}.signin p{line-height:1.7}.signin form{margin:28px 0}.header-right form{margin:0}.reviewer-row[hidden]{display:none}