:root{color-scheme:dark;--bg:#0d1117;--panel:#151b23;--line:#2a3441;--muted:#8f9dad;--ink:#f4f7fb;--accent:#f3c761;--blue:#78a9ff;--green:#68d391;--danger:#ff8a8a}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 80% -20%,#233d5d66,transparent 40%),var(--bg);color:var(--ink);font:16px/1.45 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.topbar{display:flex;justify-content:space-between;align-items:end;padding:30px clamp(20px,5vw,72px) 20px;border-bottom:1px solid var(--line)}h1,h2,p{margin-top:0}.topbar h1{font-size:clamp(28px,4vw,48px);margin:5px 0 0;letter-spacing:-.04em}.eyebrow{font-size:12px;letter-spacing:.16em;color:var(--accent);font-weight:750}.layout{display:grid;grid-template-columns:minmax(300px,390px) minmax(0,1fr);gap:22px;padding:24px clamp(20px,5vw,72px) 54px}.card{background:linear-gradient(160deg,#19212b,#121820);border:1px solid var(--line);border-radius:22px;box-shadow:0 24px 80px #0005}.controls{padding:24px;height:max-content}.section-title{display:flex;gap:12px;align-items:center;margin-bottom:17px}.section-title>span{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#f3c76118;color:var(--accent);border:1px solid #f3c76155}.section-title b,.section-title small{display:block}.section-title small{color:var(--muted)}.camera-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:10px}.camera-tabs button{min-height:58px;border:1px solid var(--line);background:#10161e;color:var(--muted);border-radius:11px;font:inherit;cursor:pointer;padding:9px 11px;text-align:left;display:grid;grid-template-columns:25px minmax(0,1fr);gap:8px;align-items:center}.camera-tabs button b{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;border:1px solid #f3c76155;color:var(--accent)}.camera-tabs button span{font-size:12px;line-height:1.2}.camera-tabs button.active{background:var(--accent);color:#15110a;border-color:var(--accent);font-weight:800;box-shadow:0 0 0 3px #f3c76120}.camera-tabs button.active b{color:#15110a;border-color:#15110a55}.camera-name{color:var(--accent);font-size:13px;font-weight:700;margin:0 0 22px;padding:9px 11px;border-radius:9px;background:#f3c7610d;border:1px solid #f3c76130}.field{display:grid;gap:8px;margin:18px 0}.field span,.range-row>span{color:var(--muted);font-size:13px;text-transform:uppercase;letter-spacing:.08em}.field input,.range-row input{width:100%;border:1px solid var(--line);border-radius:11px;background:#0d131a;color:var(--ink);padding:13px;font:inherit}.range-row{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:18px}.range-row>span{grid-column:1/-1}.range-row label{display:flex;gap:7px;align-items:center;color:var(--muted);font-size:13px}.range-row input{max-width:72px;padding:8px}.primary,.secondary,.quiet,.link-button{border:0;border-radius:12px;padding:14px 17px;font:inherit;font-weight:720;cursor:pointer;text-decoration:none;text-align:center}.primary{width:100%;background:var(--accent);color:#17120a}.secondary{width:100%;margin-top:9px;background:#222d39;color:var(--ink);border:1px solid #344354}.quiet{background:#1b2430;color:var(--muted);padding:9px 14px}.time-note{margin:16px 0 0;color:var(--muted);font-size:13px}.viewer{min-width:0;overflow:hidden}.viewer-head{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:21px 24px}.viewer-head h2{margin:4px 0 0;font-size:clamp(20px,3vw,31px)}.status{white-space:nowrap;border-radius:999px;padding:8px 12px;font-size:13px;border:1px solid}.status.pending{color:var(--muted);border-color:var(--line)}.status.online{color:var(--green);border-color:#68d39166;background:#68d39110}.status.offline{color:var(--danger);border-color:#ff8a8a55;background:#ff8a8a0d}.screen{position:relative;display:grid;place-items:center;aspect-ratio:16/9;background:#06090d;border-block:1px solid var(--line);overflow:hidden}.screen canvas,.screen video{display:none;width:100%;height:100%;object-fit:contain;background:#000}.screen .shown{display:block}.empty{text-align:center;color:var(--muted)}.camera-glyph{font-size:66px;color:#425064}.player-strip{min-height:52px;display:flex;gap:18px;align-items:center;padding:13px 22px;border-bottom:1px solid var(--line);color:var(--muted);font-size:13px}.player-strip span:last-child{margin-left:auto;text-align:right;color:#c0cad6}.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}.facts>div{background:var(--panel);padding:18px}.facts b,.facts span{display:block}.facts span{font-size:13px;color:var(--muted);margin-top:5px}.auth-body{display:grid;place-items:center;padding:20px}.auth-card{width:min(520px,100%);padding:38px;background:var(--panel);border:1px solid var(--line);border-radius:24px;box-shadow:0 30px 100px #0008}.auth-card h1{font-size:38px;margin:8px 0}.auth-card p{color:var(--muted);font-size:18px}.link-button{display:inline-block;width:auto}@media(max-width:900px){.layout{grid-template-columns:1fr}.viewer{grid-row:1}.controls{grid-row:2}.topbar{align-items:center}.viewer-head{align-items:start;flex-direction:column}.facts{grid-template-columns:1fr}.player-strip{flex-wrap:wrap}.player-strip span:last-child{margin-left:0;width:100%;text-align:left}}@media(max-width:520px){.camera-tabs{grid-template-columns:1fr}.topbar{padding:20px}.layout{padding:16px}.topbar h1{font-size:28px}.viewer-head{padding:18px}.auth-card{padding:26px}.range-row{grid-template-columns:1fr}.range-row>span{grid-column:auto}}
.primary:disabled{cursor:not-allowed;opacity:.45}.time-source{min-height:18px;margin:-10px 0 16px;color:var(--green);font-size:12px}.embed-body{background:#0d1117}.embed-layout{grid-template-columns:minmax(280px,350px) minmax(0,1fr);padding:10px;gap:10px}.embed-body .card{border-radius:15px;box-shadow:none}.embed-body .controls{padding:17px}.embed-body .section-title{margin-bottom:12px}.embed-body .camera-name{margin-bottom:12px}.embed-body .field{margin:12px 0}.embed-body .facts{display:none}.embed-body .time-note{font-size:12px}.embed-body .viewer-head{padding:16px}.embed-body .viewer-head h2{font-size:clamp(18px,3vw,25px)}
.archive-availability{display:grid;gap:3px;margin:-6px 0 16px;padding:11px 12px;border:1px solid var(--line);border-radius:11px;background:#0d131a}.archive-availability b{font-size:13px}.archive-availability span{color:var(--muted);font-size:12px}.archive-availability.available{border-color:#68d39166;background:#68d3910b}.archive-availability.available b{color:var(--green)}.archive-availability.expired,.archive-availability.missing{border-color:#ff8a8a55;background:#ff8a8a0d}.archive-availability.expired b,.archive-availability.missing b{color:var(--danger)}.archive-availability.unknown b,.archive-availability.pending b{color:var(--muted)}
@media(max-width:900px){.embed-body .controls{grid-row:1}.embed-body .viewer{grid-row:2}.embed-layout{padding:8px}.embed-body .viewer-head{flex-direction:row;align-items:center}.embed-body .status{white-space:normal;text-align:center}}
@media(max-width:520px){.embed-body .camera-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}.embed-body .camera-tabs button{min-height:54px;padding:8px}.embed-body .layout{padding:6px}.embed-body .controls{padding:13px}.embed-body .viewer-head{align-items:flex-start;flex-direction:column}.embed-body .screen{aspect-ratio:4/3}}