:root{--bg:#08111f;--panel:#101b2d;--panel2:#14233a;--line:#263a56;--text:#edf5ff;--muted:#8fa5c0;--blue:#2488ff;--green:#25d07f;--red:#ff5263;--amber:#ffbd45}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 30% -10%,#17355d 0,#08111f 34%);color:var(--text);font:15px Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;min-height:100vh}button,input,select{font:inherit}button{cursor:pointer;background:#17263c;color:#fff;border:1px solid #2a405e;border-radius:9px;padding:9px 13px;transition:.15s}button:hover{background:#203550;border-color:#45678f;transform:translateY(-1px)}button:disabled{opacity:.38;cursor:not-allowed;transform:none}header{display:flex;justify-content:space-between;align-items:center;padding:13px 22px;background:rgba(8,17,31,.92);backdrop-filter:blur(15px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}.brand{display:flex;gap:11px;align-items:center}.brandmark{width:36px;height:36px;display:grid;place-items:center;background:linear-gradient(135deg,#2389ff,#6d5cff);border-radius:10px;font-weight:900;font-size:20px}.brand div{display:grid}.brand small{color:var(--muted);font-size:11px;letter-spacing:.08em;text-transform:uppercase}nav,.tools,.player>div,.markrow{display:flex;gap:8px;flex-wrap:wrap;align-items:center}main{max-width:1500px;margin:auto;padding:20px}.topbar{display:flex;justify-content:space-between;align-items:center;background:linear-gradient(135deg,#13233a,#0e1b2e);border:1px solid var(--line);border-radius:14px;padding:14px 18px;box-shadow:0 15px 40px #0004}.streamselect{display:flex;gap:10px;align-items:center}.streamselect label,.current span{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.08em}.streamselect select{min-width:210px}.current{text-align:right;display:grid}.current strong{font-size:23px;font-variant-numeric:tabular-nums}.current small{color:var(--muted)}select,input{background:#0c1728;color:#fff;border:1px solid #2a405e;border-radius:8px;padding:9px 11px}.badge{font-size:11px;font-weight:800;letter-spacing:.08em;padding:5px 8px;border-radius:999px}.badge.live{background:#0d3e2b;color:#54eca1;border:1px solid #1d7651;box-shadow:0 0 18px #25d07f30}.badge.offline{background:#242c38;color:#8fa5c0;border:1px solid #37465b}.tools{margin:14px 0}.divider{width:1px;height:25px;background:var(--line);margin:0 3px}.player{display:grid;grid-template-columns:minmax(500px,1fr) 310px;gap:15px}.videowrap{display:block!important;background:#02060b;border:1px solid var(--line);border-radius:13px;overflow:hidden;box-shadow:0 18px 48px #0007}.player video{width:100%;display:block;background:#000;max-height:51vh}.videostatus{display:flex!important;justify-content:space-between;padding:10px 13px;background:#0c1728;color:var(--muted)}#clock{color:#fff;font-variant-numeric:tabular-nums}.editpanel{display:flex!important;align-items:stretch!important;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:17px}.editpanel h3{margin:0 0 9px}.editpanel small{color:var(--muted);line-height:1.5}.markrow button{flex:1}.inbtn{border-color:#238757;color:#65e9a9}.outbtn{border-color:#a73c49;color:#ff8b98}.primary{background:linear-gradient(135deg,#1778e8,#6356e8);border:none}.selection{min-height:92px;margin:10px 0;padding:12px;background:#091424;border:1px solid #263a56;border-radius:10px;display:grid;gap:3px}.selection span,.selection small{color:var(--muted)}.tlbox{margin-top:16px;padding:14px;background:linear-gradient(180deg,#101c2e,#0c1727);border:1px solid var(--line);border-radius:14px;box-shadow:0 15px 40px #0004}.tlheader{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:8px}.tlheader h2{margin:0}.tlheader>div:first-child{display:grid}.tlheader #windowlabel{color:var(--muted);font-size:13px}.legend{display:flex;gap:13px;color:var(--muted);font-size:12px}.legend span{display:flex;align-items:center;gap:5px}.legend i{width:13px;height:3px;border-radius:2px}.lg-recorded{background:#2488ff}.lg-now{background:var(--amber)}.lg-in{background:var(--green)}.lg-out{background:var(--red)}#ruler{height:34px;position:relative;color:#9cb0c9;font-size:11px;overflow:hidden}#ruler span{position:absolute;bottom:0;transform:translateX(-50%);white-space:nowrap}#ruler span i{display:block;width:1px;height:8px;background:#425a78;margin:4px auto 0}#timeline{height:180px;position:relative;background:repeating-linear-gradient(90deg,#091322 0,#091322 calc(10% - 1px),#14243a calc(10% - 1px),#14243a 10%);overflow:hidden;cursor:crosshair;border:1px solid #223754;border-radius:9px}canvas{width:100%;height:100%}#playhead,#mi,#mo,#nowline,#range{position:absolute;top:0;bottom:0;pointer-events:none}#playhead,#mi,#mo,#nowline{width:2px}#playhead{background:#fff;box-shadow:0 0 10px #fff}#mi{background:var(--green);box-shadow:0 0 10px #25d07f}#mo{background:var(--red);box-shadow:0 0 10px #ff5263}#nowline{background:var(--amber);box-shadow:0 0 12px #ffbd45}#nowtag{position:absolute;top:5px;background:var(--amber);color:#161000;font-style:normal;font-size:10px;font-weight:900;padding:3px 6px;border-radius:4px;pointer-events:none}#range{background:rgba(109,92,255,.22);border-left:1px solid #7d70ff;border-right:1px solid #7d70ff}#hoverlabel{display:none;position:absolute;top:7px;background:#020812e8;border:1px solid #45678f;border-radius:6px;padding:5px 7px;font-size:12px;font-variant-numeric:tabular-nums;pointer-events:none;z-index:8}.tlfloor{display:flex;justify-content:space-between;color:var(--muted);font-size:12px;padding-top:7px;font-variant-numeric:tabular-nums}.sectiontitle{margin-top:23px}#cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(235px,1fr));gap:11px}.card{text-align:left;padding:15px;background:linear-gradient(145deg,#14243a,#0e1a2b);border:1px solid #2a405e;border-radius:12px}.card>div{display:flex;justify-content:space-between;align-items:center}.card p{color:#c3d2e5}.card small{color:var(--muted)}dialog{width:min(1200px,95vw);max-height:87vh;background:#101b2d;color:#fff;border:1px solid #344d6d;border-radius:13px;box-shadow:0 30px 80px #000b}dialog::backdrop{background:#020712c7;backdrop-filter:blur(4px)}.mh{display:flex;justify-content:space-between;align-items:center}.table{width:100%;border-collapse:collapse}.table td,.table th{padding:10px;border-bottom:1px solid #263a56;text-align:left}.muted{color:var(--muted)}.login{min-height:100vh;display:grid;place-items:center}.login form{width:350px;background:#101b2d;padding:30px;border:1px solid var(--line);border-radius:13px;display:grid;gap:12px}.login input{padding:11px;background:#0c1728;color:#fff;border:1px solid #2a405e;border-radius:8px}#toast{display:none;position:fixed;right:18px;bottom:18px;background:#147a4b;padding:12px 18px;border-radius:9px;box-shadow:0 15px 40px #0008;z-index:30}@media(max-width:900px){.player{grid-template-columns:1fr}.topbar{align-items:flex-start}.current{display:none}.legend{display:none}}@media(max-width:650px){header{align-items:flex-start;gap:10px}nav{justify-content:flex-end}.topbar{display:block}.streamselect{flex-wrap:wrap}.tools{overflow-x:auto;flex-wrap:nowrap}.tlfloor #centerhint{display:none}}
/* Spotter Pro 1.2 refinements */
.streamstatus{display:grid;gap:5px}.streamstatus>span,.tool-label{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.08em}.streamstatus>div{display:flex;gap:12px;align-items:center}.streamstatus strong{font-size:18px}.tools button.active{background:#245ea2;border-color:#4f9cff;box-shadow:0 0 0 1px #4f9cff55}.tools #zoomlabel{min-width:58px;color:#bcd0e8;font-variant-numeric:tabular-nums}.video-frame{width:100%;aspect-ratio:16/9;background:#000;display:grid;place-items:center;overflow:hidden}.player video{width:100%;height:100%;max-height:none;object-fit:contain;background:#000}.secondary{background:#101a29;color:var(--muted)}kbd{display:inline-block;padding:1px 5px;border:1px solid #435a77;border-bottom-width:2px;border-radius:4px;background:#0a1423;color:#fff;font:11px ui-monospace,monospace}#timeline{touch-action:none;user-select:none}.current strong,#clock,#hoverlabel,.selection b{font-variant-numeric:tabular-nums}
.timeline-controls{margin:-4px 0 18px;padding:12px 14px;border:1px solid var(--line,#27354a);border-radius:12px;background:rgba(8,18,34,.72)}
.timeline-controls .tools{margin:0;display:flex;align-items:center;flex-wrap:wrap;gap:8px}
/* Spotter Pro 1.4 branding, timeline marking and batch management */
.brandlogo{width:72px;height:52px;object-fit:contain;display:block;background:#050708;border-radius:8px;padding:4px}
.brand b{font-size:18px;letter-spacing:.04em}.brand small{text-transform:none;letter-spacing:.04em;font-size:12px;color:#c5d3e6}
.timeline-in{border-color:#238757!important;color:#65e9a9!important;background:#0c2c21!important;font-weight:800}.timeline-out{border-color:#a73c49!important;color:#ff8b98!important;background:#32141a!important;font-weight:800}.timeline-selection{min-width:260px;max-width:480px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:7px 10px;border:1px solid #2a405e;border-radius:8px;background:#091424;color:#aabed6;font-variant-numeric:tabular-nums}.timeline-selection b:first-child{color:var(--green)}.timeline-selection b:nth-child(2){color:var(--red)}
.batchbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:12px 0}.batchbar h3,.batchbar p{margin:0}.danger{background:#34151b!important;border-color:#8c2936!important;color:#ff8996!important}.danger:hover{background:#4a1c24!important;border-color:#c33d4d!important}.tablewrap{overflow:auto;max-height:56vh;border:1px solid #263a56;border-radius:10px}.selectable tr:hover td{background:#14243a}.actions{display:flex;gap:7px;white-space:nowrap}.table input[type=checkbox]{width:17px;height:17px;accent-color:#2488ff}.table a{text-decoration:none}
@media(max-width:800px){.brandlogo{width:54px;height:40px}.timeline-selection{min-width:180px;max-width:100%}.batchbar{align-items:flex-start;flex-direction:column}.actions{flex-wrap:wrap}}
.loginlogo{width:150px;max-height:105px;object-fit:contain;justify-self:center}.loginbrand{text-align:center}.loginbrand h1{margin:0}.loginbrand p{margin:5px 0 10px;color:var(--muted)}