:root{font:16px/1.5 system-ui,-apple-system,sans-serif;color:#e7ede9;background:#111a17;color-scheme:dark}*{box-sizing:border-box}body{margin:0}main{max-width:1080px;margin:0 auto;padding:24px}header,.toolbar,.actions{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}h1{font-size:clamp(25px,4vw,38px);margin:0 0 18px;letter-spacing:-.03em}h2{font-size:21px}.eyebrow{color:#a8c6b6;font-size:11px;font-weight:700;letter-spacing:.17em;margin:0 0 6px}.toolbar{color:#a8c6b6;margin:6px 0 12px;font-size:14px}.camera{position:relative;aspect-ratio:16/9;background:#050807;border-radius:14px;overflow:hidden;border:1px solid #34433b}.camera img{display:block;width:100%;height:100%;object-fit:contain}button,.button{font:inherit;text-decoration:none;display:inline-block;background:#b7edcc;color:#123723;border:0;padding:11px 17px;border-radius:9px;font-weight:600;cursor:pointer}.quiet{background:#26392f;color:#d4e9db}.actions{justify-content:flex-start;margin-top:14px}.muted{font-size:14px;color:#9faea5}section#controls{border-top:1px solid #34433b;margin-top:28px;padding-top:12px}.login{max-width:410px;margin-top:9vh}label{display:block;margin:16px 0 5px}input,select{display:block;width:100%;font:inherit;padding:11px;background:#202e27;border:1px solid #506255;border-radius:7px;color:#fff}form button{margin-top:15px}a{color:#b7edcc}.error{color:#ffb3a6}canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:15px}.event{border:1px solid #34433b;border-radius:10px;padding:12px}.event img{width:100%;border-radius:6px}details{margin:20px 0;padding:15px;border:1px solid #34433b;border-radius:10px}summary{cursor:pointer;font-weight:600}small{color:#9faea5}input[type=checkbox]{display:inline-block;width:auto;margin-right:8px}button:disabled{opacity:.5;cursor:wait}@media(max-width:600px){main{padding:15px}.toolbar{font-size:12px}}
:fullscreen .camera{height:100%;width:100%}.camera:fullscreen{border:0;border-radius:0;aspect-ratio:auto;height:100vh;width:100vw}.camera:fullscreen img{object-fit:contain}.camera.expanded{position:fixed;inset:0;width:100vw;height:100dvh;z-index:100;border:0;border-radius:0;aspect-ratio:auto}#exit-fullscreen{display:none;position:absolute;top:12px;right:12px;font-size:13px;opacity:.75}.camera:fullscreen #exit-fullscreen,.camera.expanded #exit-fullscreen{display:block}
.camera img.flipped{transform:rotate(180deg)}
.flipped{transform:rotate(180deg)}
[hidden]{display:none!important}
#motion-overlay{position:absolute;top:12px;left:12px;padding:6px 10px;border-radius:7px;background:#0a120ed9;color:#d9eadf;font-size:14px;pointer-events:none}
.camera.detected{border-color:#f5ce77}.detected #motion-overlay{background:#6a4918eb;color:#ffe5aa}
#roi-canvas{z-index:2;cursor:crosshair}.camera:fullscreen #roi-canvas,.camera.expanded #roi-canvas{display:none}
#event-list{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}.event h3{font-size:16px;margin:8px 0}.event p{margin:8px 0}.event img{aspect-ratio:16/9;object-fit:cover}
input[type=range]{padding:0;accent-color:#b7edcc}#record-state{color:#edda9d}#save-state{font-size:14px}dialog{color:#e7ede9;background:#19271f;border:1px solid #506255;border-radius:14px;width:min(960px,95vw);max-height:92dvh}dialog::backdrop{background:#000b}dialog video{width:100%;max-height:66dvh;background:#050807}dialog h2{font-size:18px;margin:6px 0}.event button{width:100%}

.wifi-panel{--signal:#a6b5ad;background:#19271f;border:1px solid #344b3d;border-radius:14px;padding:16px 18px;margin:0 0 16px}.wifi-heading,.wifi-reading{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.wifi-reading{justify-content:flex-start;gap:12px}.wifi-reading strong{font-size:32px;line-height:1.2;font-variant-numeric:tabular-nums;letter-spacing:-.04em;color:var(--signal)}#wifi-grade{font-size:15px;color:var(--signal)}#wifi-hint{margin:10px 0 5px;font-size:14px}.wifi-caption{font-size:12px;color:#a8b9ad;margin:5px 0 0}#wifi-bars{display:flex;align-items:flex-end;gap:5px;height:38px}#wifi-bars i{width:10px;border-radius:3px;background:#33453a}#wifi-bars i:nth-child(1){height:10px}#wifi-bars i:nth-child(2){height:17px}#wifi-bars i:nth-child(3){height:24px}#wifi-bars i:nth-child(4){height:31px}#wifi-bars i:nth-child(5){height:38px}#wifi-bars i.on{background:var(--signal)}[data-grade=excellent],[data-grade=good]{--signal:#8ce7ad}[data-grade=fair]{--signal:#efd684}[data-grade=weak]{--signal:#ffb67d}[data-grade=poor]{--signal:#ff9292}[data-grade=unknown]{--signal:#b4bdb7}#wifi-overlay{position:absolute;bottom:12px;left:12px;max-width:calc(100% - 24px);padding:6px 10px;border-radius:7px;background:#0a120ed9;color:var(--signal);font-size:14px;font-weight:650;font-variant-numeric:tabular-nums;pointer-events:none}@media(max-width:600px){.wifi-panel{padding:12px}.wifi-reading strong{font-size:28px}#wifi-overlay{font-size:12px;bottom:8px;left:8px}}

.mic-panel{margin-top:22px;padding:18px;border:1px solid #344b3d;border-radius:14px;background:#19271f}.mic-panel h2{margin:0}.mic-panel .toolbar{align-items:baseline}.mic-controls{display:grid;grid-template-columns:1fr 1fr;gap:24px}.mic-controls label{font-size:14px}#mic-level{display:block;width:100%;height:24px;accent-color:#8ce7ad}#mic-state[data-state=playing]{color:#8ce7ad}#mic-state[data-state=waiting]{color:#efd684}#mic-detail{font-variant-numeric:tabular-nums;margin-bottom:6px}@media(max-width:600px){.mic-panel{padding:12px}.mic-controls{grid-template-columns:1fr;gap:0}}

.video-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px}.video-controls label{margin:0;font-size:14px}.video-controls select{width:auto;max-width:100%;padding:7px}.video-controls p{flex-basis:100%;margin:0;font-variant-numeric:tabular-nums}#video-stale{position:absolute;z-index:3;inset:40% 10% auto;text-align:center;background:#392d1deb;color:#ffe5aa;padding:12px;border-radius:9px;font-size:14px;pointer-events:none}.stale-video #live{opacity:.4}