:root { color-scheme: dark; --bg:#090b0b; --panel:#111514; --line:#29302d; --text:#f3f6f4; --muted:#939d98; --lime:#c8ff3d; --blue:#5b8cff; --red:#ff675b; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; background:var(--bg); color:var(--text); font:16px/1.45 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button,input,select,textarea { font:inherit; }
button { color:inherit; cursor:pointer; transition:transform 120ms cubic-bezier(.2,0,0,1),border-color 160ms cubic-bezier(.2,0,0,1),background-color 160ms cubic-bezier(.2,0,0,1); }
button:active,.report-link:active { transform:scale(.96); }
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible { outline:2px solid var(--lime); outline-offset:3px; }
.topbar { height:68px; padding:0 24px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; border-bottom:1px solid var(--line); background:#0d100f; }
.brand { color:var(--text); text-decoration:none; font-weight:750; letter-spacing:-.02em; display:flex; align-items:center; gap:10px; }
.brand span { width:32px; height:32px; display:grid; place-items:center; color:#0a0d0b; background:var(--lime); border-radius:7px; font-size:.8rem; }
.match-title { text-align:center; display:flex; flex-direction:column; }
.match-title span,.quality { color:var(--muted); font-size:.78rem; }
.quality { justify-self:end; display:flex; align-items:center; gap:8px; }
.quality i { width:8px; height:8px; border-radius:50%; background:var(--lime); box-shadow:0 0 14px var(--lime); }
.quality.warning { color:#ffbd73; }
.quality.warning i { background:#ff9f43; box-shadow:0 0 14px #ff9f4388; }
.header-actions { justify-self:end; display:flex; align-items:center; gap:10px; }
.header-actions .ghost { padding:7px 10px; }
.report-link { color:#0a0d0b; background:var(--lime); padding:8px 11px; border-radius:7px; text-decoration:none; font-size:.78rem; font-weight:750; transition:transform 120ms cubic-bezier(.2,0,0,1),background-color 160ms cubic-bezier(.2,0,0,1); }
.report-link:hover { background:#d4ff66; }
.workspace { min-height:calc(100vh - 68px); display:grid; grid-template-columns:minmax(0, 1fr) 360px; }
.viewer { padding:24px; min-width:0; }
.viewer-head,.inspector-head { display:flex; justify-content:space-between; align-items:end; margin-bottom:16px; }
.viewer-actions { display:flex; align-items:end; gap:10px; }
.clip-picker { min-width:230px; color:var(--muted); font-size:.7rem; }
.clip-picker select { padding:8px 10px; font-size:.8rem; }
.eyebrow { color:var(--lime); font-size:.7rem; font-weight:800; letter-spacing:.13em; }
h1 { font-size:1.35rem; margin:4px 0 0; letter-spacing:-.025em; }
.ghost { background:transparent; border:1px solid var(--line); border-radius:8px; padding:8px 12px; font-size:.8rem; }
.video-shell { position:relative; aspect-ratio:16/9; overflow:hidden; border:1px solid #303733; outline:1px solid #050606; outline-offset:-2px; background:#050606; }
video { width:100%; height:100%; object-fit:cover; display:block; }
video.wide { object-fit:contain; }
#overlayCanvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.play { position:absolute; inset:50% auto auto 50%; transform:translate(-50%,-50%); width:58px; height:58px; border:1px solid #fff8; border-radius:50%; background:#080a09c7; backdrop-filter:blur(8px); }
.frame-badge { position:absolute; left:14px; bottom:14px; display:flex; gap:10px; align-items:center; font-variant-numeric:tabular-nums; }
.frame-badge span { background:#080a09cf; padding:6px 9px; border-radius:5px; }
.frame-badge b { color:#0a0d0b; background:var(--lime); padding:5px 8px; border-radius:4px; font-size:.68rem; letter-spacing:.08em; }
.transport { display:grid; grid-template-columns:44px 82px 44px 1fr auto; gap:8px; align-items:center; padding-top:14px; }
.transport button { height:38px; border:1px solid var(--line); background:var(--panel); border-radius:7px; font-size:.8rem; }
input[type=range] { width:100%; accent-color:var(--lime); }
#duration { color:var(--muted); font-size:.8rem; font-variant-numeric:tabular-nums; }
.inspector { border-left:1px solid var(--line); background:var(--panel); padding:24px; }
.inspector-head b { color:var(--muted); font-size:.75rem; }
.metric-grid { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line); margin-bottom:22px; }
.metric-grid article { padding:13px 10px; border-right:1px solid var(--line); }
.metric-grid article:last-child { border:0; }
.metric-grid span,.metric-grid small { display:block; color:var(--muted); font-size:.68rem; }
.metric-grid strong { font-size:1.35rem; letter-spacing:-.04em; }
.ball-monitor { margin:-10px 0 14px; padding:10px; border:1px solid var(--line); background:#0d100f; }
.ball-monitor>div:first-child { display:flex; align-items:center; justify-content:space-between; gap:8px; }.ball-monitor span { display:flex; align-items:center; gap:7px; color:var(--text); font-size:.77rem; }.ball-monitor span i { width:8px; height:8px; border-radius:50%; background:#69736e; }.ball-monitor.detected span i { background:var(--lime); box-shadow:0 0 8px #c8ff3d88; }.ball-monitor.interpolated span i { background:#ffd84d; }.ball-monitor.lost span i { background:#ff675b; }
.ball-monitor button { border:0; background:none; color:var(--lime); font-size:.72rem; }.ball-monitor button.off { color:var(--muted); text-decoration:line-through; }
.ball-coverage { height:4px; margin:9px 0 7px; border-radius:5px; overflow:hidden; background:#29302d; }.ball-coverage i { display:block; width:0; height:100%; background:var(--lime); transition:width 250ms cubic-bezier(.2,0,0,1); }.ball-monitor small { color:var(--muted); font-size:.68rem; }
.tabs { display:flex; border-bottom:1px solid var(--line); gap:18px; }
.tabs button { padding:10px 0; border:0; border-bottom:2px solid transparent; background:none; color:var(--muted); font-size:.82rem; }
.tabs button.active { color:var(--text); border-color:var(--lime); }
.panel { padding:24px 0; color:var(--muted); }
.analysis-warning { display:grid; gap:5px; margin-bottom:14px; padding:12px; border:1px solid #714c27; border-left:3px solid #ff9f43; background:#24190f; color:#d7c5b3; }
.analysis-warning b { color:#ffbd73; }
.analysis-warning span { color:var(--text); font-size:.76rem; }
.analysis-warning p { margin:0; font-size:.74rem; }
.analysis-warning.improved { border-color:#50742d; border-left-color:var(--lime); background:#172010; }
.analysis-warning.improved b { color:var(--lime); }
.diagnostic-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.diagnostic-grid article { padding:12px; border:1px solid var(--line); background:#0d100f; }
.diagnostic-grid span,.diagnostic-grid small { display:block; color:var(--muted); font-size:.68rem; }
.diagnostic-grid strong { display:block; color:var(--text); font-size:1.45rem; }
.stats-blocked { margin-top:12px!important; padding:10px; border-left:3px solid #ff9f43; background:#1c1610; font-size:.76rem; }
.empty-title { color:var(--text); font-weight:700; margin-bottom:4px; }
.panel p { margin-top:0; }
.primary { margin-top:12px; border:0; background:var(--lime); color:#0a0d0b; padding:10px 14px; border-radius:7px; font-weight:750; }
.player-list { display:grid; gap:7px; max-height:54vh; overflow:auto; padding-right:4px; }
.track-audit { display:grid; gap:8px; margin-bottom:12px; padding:11px; border:1px solid var(--line); background:#0d100f; }
.track-audit strong { color:var(--text); }.track-audit p { margin:0; font-size:.75rem; }.track-audit button { margin:0; }
.identity-row { display:grid; grid-template-columns:1fr auto; align-items:center; gap:8px; padding-top:8px; border-top:1px solid var(--line); font-size:.76rem; }.identity-row b { color:var(--lime); }
.track-warning { color:#ffb36a!important; }
.player-row { width:100%; display:grid; grid-template-columns:34px 1fr auto; align-items:center; gap:10px; padding:10px; border:1px solid var(--line); border-radius:8px; background:#0d100f; text-align:left; }
.player-row:hover,.player-row.selected { border-color:#637068; background:#161b19; }
.shirt { width:30px; height:30px; display:grid; place-items:center; border-radius:6px; color:white; font-size:.72rem; font-weight:800; }
.shirt.a { background:var(--blue); }.shirt.b { background:var(--red); }.shirt.none { background:#59615d; }
.player-row span { color:var(--text); font-weight:650; }.player-row small { color:var(--muted); display:block; }
.player-detail { display:grid; gap:14px; }
.detail-head { display:flex; align-items:center; gap:12px; padding-bottom:16px; border-bottom:1px solid var(--line); }
.detail-head strong { display:block; color:var(--text); }.detail-head span { font-size:.76rem; }
label { display:grid; gap:6px; color:#c2c9c5; font-size:.78rem; }
select,input[type=text],input[type=date] { width:100%; color:var(--text); background:#0b0e0d; border:1px solid var(--line); border-radius:7px; padding:10px; }
.actions { display:flex; gap:8px; }.actions button { flex:1; }
.secondary { margin-top:12px; border:1px solid var(--line); background:transparent; padding:9px 12px; border-radius:7px; color:var(--text); }
.back { border:0; background:none; color:var(--lime); padding:0; text-align:left; font-size:.8rem; }
.pitch-wrap { aspect-ratio:1.54; background:#153a24; border:1px solid #4e6b57; overflow:hidden; }
#pitchSvg { width:100%; height:100%; display:block; touch-action:none; }
.pitch-copy { font-size:.78rem; margin:12px 0 0; }
.pitch-quality { color:var(--lime); font-size:.8rem; font-weight:750; margin:10px 0 0; }
.quality-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.quality-head strong { color:var(--text); font-size:1rem; }.quality-head span { font-size:.75rem; }
.endurance-card { display:grid; gap:10px; margin-bottom:16px; padding:12px; border:1px solid #50742d; background:#11180e; }
.endurance-head { display:flex; align-items:end; justify-content:space-between; gap:12px; }.endurance-head div { display:grid; gap:3px; }.endurance-head span { color:var(--lime); font-size:.64rem; font-weight:800; letter-spacing:.1em; }.endurance-head b { color:var(--text); }.endurance-head small { color:var(--muted); font-size:.68rem; }
.endurance-grid { display:grid; gap:7px; }.endurance-grid article { display:grid; gap:3px; padding:9px; border:1px solid var(--line); background:#0d100f; }.endurance-grid article>div { display:flex; justify-content:space-between; gap:8px; }.endurance-grid article b,.endurance-grid article strong { color:var(--text); }.endurance-grid article i { color:var(--lime); font-size:.68rem; font-style:normal; font-weight:750; }.endurance-grid article.needs_review { border-color:#71502d; }.endurance-grid article.needs_review i,.endurance-grid article.needs_review small { color:#ffbd73; }.endurance-grid article span,.endurance-grid article small { color:var(--muted); font-size:.68rem; }
.checkpoint-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:5px; margin-bottom:12px; }
.checkpoint { height:30px; border:1px solid var(--line); border-radius:6px; background:#0b0e0d; color:var(--muted); font-size:.72rem; }
.checkpoint.active { border-color:var(--lime); color:var(--text); }.checkpoint.valid { background:#20351d; color:var(--lime); }.checkpoint.issue { background:#3a1d1b; color:#ff9188; }
.quality-actions { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:12px; }
.quality-actions button { margin:0; }.quality-actions .clear-review { grid-column:1/-1; }
.quality-note { margin-top:12px; }.quality-note textarea { min-height:68px; resize:vertical; color:var(--text); background:#0b0e0d; border:1px solid var(--line); border-radius:7px; padding:10px; font:inherit; }
.quality-guide { margin:10px 0 0; padding:10px; border-left:3px solid var(--lime); background:#182016; color:#c9d1cc; font-size:.76rem; }
.quality-alert { display:grid; gap:3px; margin:0 0 12px; padding:10px; border:1px solid #71502d; background:#21180f; }
.quality-alert span { color:#ffbd73; font-size:.64rem; font-weight:800; letter-spacing:.1em; }
.quality-alert b { color:var(--text); font-size:.8rem; }
.quality-alert p { margin:0; font-size:.74rem; }
.finalize-card { display:grid; gap:5px; margin-top:14px; padding:12px; border:1px solid var(--line); background:#0d100f; }
.finalize-card span,.approved-banner span { color:var(--lime); font-size:.64rem; font-weight:800; letter-spacing:.1em; }
.finalize-card b,.approved-banner b { color:var(--text); }
.finalize-card p { margin:0; font-size:.74rem; }
.finalize-card button { margin-top:6px; }
.finalize-card button:disabled { cursor:not-allowed; opacity:.35; }
.approved-banner { display:grid; gap:4px; margin-bottom:14px; padding:12px; border:1px solid #50742d; border-left:3px solid var(--lime); background:#172010; }
.approved-banner small { color:var(--muted); }
#pitchPlayers g { transition:transform .12s linear; }.quality-mode #pitchPlayers g:not([data-key="ball"]) { cursor:grab; }.quality-mode #pitchPlayers g.dragging { cursor:grabbing; transition:none; }
.bar { height:7px; background:#282e2b; overflow:hidden; border-radius:9px; }.bar i { display:block; height:100%; width:40.3%; background:var(--lime); }
.stat-list { display:grid; gap:12px; }.stat-line { padding:13px; border:1px solid var(--line); background:#0d100f; }.stat-line span { display:block; font-size:.72rem; }.stat-line strong { color:var(--text); font-size:1.4rem; }
.heatmaps { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:14px; }.heatmaps img { width:100%; border:1px solid var(--line); }
.toast { position:fixed; right:24px; bottom:24px; transform:translateY(18px); opacity:0; pointer-events:none; background:var(--lime); color:#0a0d0b; padding:11px 15px; border-radius:7px; font-weight:750; transition:opacity 200ms cubic-bezier(.2,0,0,1),transform 200ms cubic-bezier(.2,0,0,1); }
.toast.show { opacity:1; transform:none; }
.loading { color:var(--muted); }
dialog { width:min(520px,calc(100vw - 30px)); padding:0; color:var(--text); background:var(--panel); border:1px solid #3a443f; border-radius:12px; box-shadow:0 24px 90px #000b; }
dialog::backdrop { background:#050706c9; backdrop-filter:blur(5px); }
.import-card { padding:24px; display:grid; gap:14px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.dialog-head { display:flex; justify-content:space-between; align-items:start; }
.dialog-head h2 { margin:3px 0 0; }.dialog-head button { width:34px; height:34px; color:var(--text); background:#202623; border:1px solid var(--line); border-radius:50%; font-size:1.3rem; }
.import-card p { margin:0; color:var(--muted); font-size:.88rem; }
.import-card input[type=file] { border:1px dashed #536059; background:#0c0f0e; padding:12px; border-radius:7px; color:var(--muted); }
.import-message { border-left:3px solid var(--lime); padding:10px 12px; background:#182016; color:#c9d1cc; font-size:.78rem; }
.import-message.error { border-left-color:var(--red); background:#251513; color:#ffd1cd; }
.dialog-actions { display:flex; justify-content:flex-end; gap:8px; }.dialog-actions button { margin:0; }
.matches-dialog { width:min(760px,calc(100vw - 30px)); }
.matches-list { display:grid; gap:9px; max-height:62vh; overflow:auto; padding-right:3px; }
.platform-state { display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:start; padding:12px; border:1px solid #50742d; border-radius:10px; background:#172010; }.platform-state>i { width:9px; height:9px; margin-top:5px; border-radius:50%; background:var(--lime); box-shadow:0 0 10px #c8ff3d66; }.platform-state div { display:grid; gap:2px; }.platform-state b { color:var(--text); font-size:.82rem; }.platform-state span { color:#b7c3bb; font-size:.72rem; }
.match-card { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; padding:14px; border:1px solid var(--line); border-radius:10px; background:#0d100f; }
.match-card>div:first-child { display:grid; gap:2px; }.match-card span { color:var(--lime); font-size:.64rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }.match-card strong { color:var(--text); }.match-card small { color:var(--muted); font-size:.72rem; }
.match-card.compact { grid-template-columns:minmax(0,1fr) auto auto; }.match-card button { margin:0; }
.match-actions { grid-column:1/-1; display:flex; align-items:center; justify-content:flex-end; gap:8px; padding-top:10px; border-top:1px solid var(--line); }.match-actions .primary { margin:0; }
.status-pill { padding:5px 8px; border-radius:999px; background:#272e2a; color:var(--muted); font-size:.68rem; font-style:normal; white-space:nowrap; }.status-pill.ready { background:#20351d; color:var(--lime); }.status-pill.prepared { background:#302817; color:#ffd06a; }
.empty-match { display:grid; gap:3px; padding:18px; border:1px dashed #465049; border-radius:10px; color:var(--text); }.empty-match span { color:var(--muted); font-size:.78rem; }
.team-cards { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; }.team-card { border:1px solid var(--line); padding:12px; background:#0d100f; }.team-card b,.team-card span { display:block; }.team-card span { color:var(--muted); font-size:.72rem; }
.event-empty { border:1px dashed #465049; padding:12px; font-size:.78rem; margin-top:12px; }
@media (max-width:900px) { .workspace{grid-template-columns:1fr}.inspector{border-left:0;border-top:1px solid var(--line)}.topbar{grid-template-columns:1fr auto}.match-title{display:none}.viewer{padding:16px}.inspector{padding:20px}.transport{grid-template-columns:42px 72px 42px}.transport input{grid-column:1/-1;grid-row:2}.transport #duration{grid-column:4;grid-row:1;text-align:right}.viewer-head{align-items:start;gap:14px}.viewer-actions{align-items:stretch;flex-direction:column}.clip-picker{min-width:0}.viewer-actions .ghost{display:none}.header-actions .report-link,.header-actions #matchesButton{display:none}.form-grid{grid-template-columns:1fr}.match-card,.match-card.compact{grid-template-columns:1fr}.status-pill{justify-self:start}.match-card.compact button{justify-self:start} }