*{box-sizing:border-box}
 :root{font-family:Inter,"Segoe UI",Arial,sans-serif;color:#27352d;background:#f4f5f0;font-synthesis:none;--bg:#f4f5f0;--surface:#fff;--text:#27352d;--muted:#748077;--border:#e4e9df;--accent:#146e56;--soft:#eaf2e9;--control:#f3f5f0;--shadow:0 8px 28px #20332904}
 body{margin:0}
 button,input{font:inherit}
 button,a,input{-webkit-tap-highlight-color:transparent}
 button{cursor:pointer}
 button:disabled{cursor:not-allowed;opacity:.45}
 button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #78b798;outline-offset:4px}
 [hidden]{display:none!important}
 .topbar{height:94px;max-width:1440px;margin:auto;padding:0 56px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)}
 .brand{display:flex;gap:11px;align-items:center;text-decoration:none;color:var(--text);font-size:25px;font-weight:750;letter-spacing:-1px}
.brand-dot{color:var(--accent)}
.top-actions{display:flex;gap:20px;align-items:center}
.network-tag{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--muted)}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#81a08b}
.network-tag .dot{background:#448f64}
main{max-width:1440px;padding:0 56px;margin:auto}
.intro{display:flex;justify-content:space-between;align-items:flex-end;padding:48px 0 30px}
.eyebrow{font-size:10px;font-weight:750;letter-spacing:2px;color:var(--accent);margin:0 0 13px}
h1{font-size:46px;line-height:1.1;letter-spacing:-1.8px;font-weight:650;margin:0 0 12px}
.subtitle{font-size:15px;color:var(--muted);margin:0}
.connection{display:flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid var(--border);border-radius:30px;font-size:12px;background:var(--surface);margin-bottom:2px}
.connection.live{color:var(--accent)}
.connection.live .dot{background:#38a273;box-shadow:0 0 0 4px #38a27312}
.workspace{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:24px;align-items:start}
.viewer-card{background:var(--surface);border:1px solid var(--border);border-radius:20px;overflow:hidden;box-shadow:var(--shadow)}
.video-wrap{position:relative;aspect-ratio:16/10;background:radial-gradient(ellipse at 50% 28%,#283f33,#14271e 70%);overflow:hidden;color:#ebf3ea}
.video-wrap:fullscreen{aspect-ratio:auto;background:#000;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.video-wrap video{width:100%;height:100%;object-fit:contain;display:block}
.video-top{position:absolute;left:20px;right:20px;top:20px;display:flex;justify-content:space-between;pointer-events:none}
.video-chip{padding:7px 10px;background:#15251caa;border:1px solid #ffffff14;border-radius:6px;font-size:9px;font-weight:650;letter-spacing:1.3px;color:#d9e4da;backdrop-filter:blur(8px)}
.overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:25px;gap:13px;background:#12261cb0}
.overlay-icon{width:76px;height:76px;border:1px solid #b3d1b926;border-radius:24px;display:grid;place-items:center;background:#ffffff04;margin-bottom:6px;color:#a8c6b1}
.overlay-icon svg{width:36px}
.overlay h2{font-size:20px;font-weight:550;margin:0}
.overlay p{font-size:13px;color:#9eb4a5;max-width:320px;line-height:1.7;margin:0}
.video-controls{display:flex;justify-content:space-between;align-items:center;padding:19px 22px}
.camera-name{display:flex;align-items:center;gap:13px}
.camera-dot{width:9px;height:9px;border-radius:50%;background:#86a592;box-shadow:0 0 0 5px var(--soft)}
.camera-name div{display:flex;flex-direction:column;gap:5px}
.camera-name strong{font-size:13px;font-weight:600}
.camera-name div span{font-size:11px;color:var(--muted)}
.icon-button{width:36px;height:36px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text);display:grid;place-items:center}
.icon-button svg{width:20px;height:20px}
.sidebar{display:flex;flex-direction:column;gap:18px}
.panel{padding:22px;background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow)}
.panel-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}
.panel h2{font-size:14px;font-weight:650;margin:0}
.small-icon{color:var(--muted);font-size:20px}
.panel>p{color:var(--muted);font-size:12px;line-height:1.6;margin:0 0 15px}
.button{border:0;border-radius:10px;background:var(--accent);color:#fff;font-size:12px;font-weight:600;min-height:42px;padding:12px 16px;display:inline-flex;justify-content:center;align-items:center;gap:12px;transition:filter .15s}
.button:hover:not(:disabled){filter:brightness(1.1)}
.panel .button{width:100%}
.button.secondary{color:var(--accent);background:var(--soft)}
.button.light{background:#e4f0e5;color:#163b2b;margin-top:6px}
.text-button{border:0;background:none;color:var(--accent);font-size:12px;padding:8px}
.volume-row{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin:21px 0 9px}
input[type=range]{width:100%;height:4px;accent-color:var(--accent);margin:6px 0 19px}
.panel>p.hint{font-size:10px;line-height:1.7;margin:0;max-width:215px}
dl{margin:0}
dl>div{display:flex;justify-content:space-between;gap:8px;font-size:11px;margin:0 0 15px}
dt{color:var(--muted)}
dd{margin:0;font-weight:550}
.local-note{border-top:1px solid var(--border);padding-top:15px;margin-top:3px;display:flex;align-items:center;gap:12px}
.local-note p{font-size:10px;line-height:1.8;color:var(--muted);margin:0}
.local-note strong{font-weight:500;color:var(--accent)}
.note-icon{background:var(--soft);color:var(--accent);width:32px;height:32px;border-radius:10px;display:grid;place-items:center;font-size:24px}
.help-note{display:flex;align-items:flex-start;gap:12px;padding:2px 7px}
.help-note>span{font-size:22px;color:var(--muted)}
.help-note p{font-size:11px;color:var(--muted);line-height:1.8;margin:2px 0}
footer{display:flex;justify-content:space-between;gap:18px;color:var(--muted);font-size:10px;margin:40px 0 24px;border-top:1px solid var(--border);padding-top:22px}
.footer-divider{margin:0 12px;opacity:.4}
.login-panel{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#14271eee;overflow:auto;padding:25px}
.login-form{width:100%;max-width:320px;min-width:0;flex:0 1 320px;color:#e5efe7}
.login-form .eyebrow{color:#94c5a9;font-size:9px}
.login-form h2{font-size:26px;margin:12px 0}
.login-form p{font-size:12px;line-height:1.7;color:#a3b9aa}
.login-form label{font-size:11px;display:block;margin:15px 0 7px;color:#b6c9bc}
.login-form input{width:100%;padding:11px 13px;min-height:42px;background:#ffffff09;border:1px solid #ffffff25;border-radius:9px;color:#fff}
.login-form .button{width:100%;background:#afd7b9;color:#163425}
.login-form .error{color:#ffb2a2;min-height:18px;margin:10px 0}
.login-form input:focus{outline:2px solid #93cfa8}
.login-panel~.video-top{display:none}
@media(prefers-color-scheme:dark){:root{--bg:#121b16;--surface:#1a261e;--text:#e0e9df;--muted:#91a293;--border:#2b3a2e;--accent:#96d5ae;--soft:#293e2e;--control:#233026;background:var(--bg);color:var(--text)}
.button:not(.secondary):not(.light){background:#9bdbb4;color:#142f1e}
.brand img{opacity:.95}
.video-wrap{background:#101d15}
.connection{background:var(--surface)}
}
@media(min-width:1450px){.video-wrap{aspect-ratio:16/10}
}
@media(max-width:1000px){.topbar{padding:0 28px;height:80px}
main{padding:0 28px}
.workspace{grid-template-columns:minmax(0,1fr) 250px;gap:18px}
.intro{padding-top:36px}
.panel{padding:18px}
.video-wrap{aspect-ratio:4/3}
}
@media(max-width:760px){.topbar{padding:0 20px;height:76px}
.brand{font-size:22px}
.brand img{width:32px;height:32px}
.network-tag{font-size:10px}
main{padding:0 16px}
.intro{padding:32px 4px 23px;align-items:flex-start;gap:12px}
h1{font-size:36px}
.eyebrow{font-size:8px;letter-spacing:1.4px}
.subtitle{font-size:12px}
.connection{padding:8px 10px;font-size:10px;white-space:nowrap;margin-top:24px}
.workspace{grid-template-columns:1fr;gap:18px}
.video-wrap{aspect-ratio:4/3;min-height:270px}
.viewer-card{border-radius:16px}
.video-top{top:14px;left:14px;right:14px}
.video-chip{font-size:8px}
.sidebar{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.panel{padding:18px 15px;border-radius:16px}
.help-note{grid-column:1/-1;padding:6px}
.panel .button{font-size:11px;padding:10px 7px}
.video-controls{padding:16px 18px}
footer{margin-top:28px;font-size:9px;line-height:1.8;flex-direction:column;gap:5px}
.login-panel{padding:20px}
.video-wrap:has(.login-panel:not([hidden])){aspect-ratio:auto;height:440px;min-height:440px;width:100%}
}
@media(max-width:380px){.connection{display:none}
.sidebar{grid-template-columns:1fr}
.network-tag{display:none}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}
}

/* Keep the login form inside narrow camera panels; grid intrinsic sizing can overflow inputs. */
.login-panel{display:flex;align-items:center;justify-content:center}
.login-form{width:100%;max-width:320px;min-width:0;flex:0 1 320px}
.login-form input{min-width:0}