:root{color-scheme:light;--bg:#f5f7fa;--panel:#fff;--line:#e2e7ee;--muted:#667085;--text:#1a2230;--accent:#0f9f84;--accent-soft:#e3f5f0;--hover:#eef2f6;--input-line:#d3dae4;--head:#f0f3f7;--shadow:0 1px 3px #1a223014;--red:#d93649;--orange:#d9730d;--violet:#7c5cd6;--blue:#1f8fd6;--smoke:#64748b;--green:#2f9e44}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font:14px/1.5 "Segoe UI","Malgun Gothic",sans-serif}button,select,input{font:inherit}button,a,select,input{outline-offset:5px}button{cursor:pointer}button:disabled{opacity:.35;cursor:not-allowed}a{color:inherit;text-decoration:none}.sidebar{position:fixed;width:228px;inset:0 auto 0 0;padding:32px 22px 20px;border-right:1px solid var(--line);display:flex;flex-direction:column;background:#fff}.brand{display:flex;align-items:center;font-size:18px;font-weight:800;letter-spacing:1.3px;gap:9px}.brand-mark{display:grid;place-items:center;width:30px;height:34px;background:var(--accent);color:#fff;clip-path:polygon(50% 0,100% 15%,100% 70%,50% 100%,0 70%,0 15%);font-size:21px}.brand-dot{color:var(--accent);margin-left:-10px}nav{display:grid;gap:10px;margin-top:44px}nav a{padding:13px 12px;border-radius:8px;display:flex;gap:12px;color:#5b6678;font-size:13px}nav a.nav-active{background:var(--accent-soft);color:var(--accent)}nav b{margin-left:auto;font-size:11px}nav a:hover{background:var(--hover)}main{margin-left:228px;padding:0 36px;max-width:1900px}header{height:76px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:12px}header b{font-weight:400;color:#2c3544}header>div{display:flex;align-items:center;gap:20px}.slash{margin:0 14px;color:#b3bcc9}.tag{font-size:10px;letter-spacing:1px;border:1px solid var(--input-line);border-radius:5px;padding:4px 8px;color:#5b6678;white-space:nowrap}time{font-variant-numeric:tabular-nums}.page-heading{padding:34px 0 25px;display:flex;align-items:center;justify-content:space-between;gap:15px}.eyebrow{font-size:10px;letter-spacing:2px;color:var(--accent);font-weight:600}h1{font-size:29px;letter-spacing:-1px;margin:8px 0}p{color:var(--muted);margin:0}h2{font-size:14px;margin:0;font-weight:600}h3{font-size:13px;margin:0}.button{border:1px solid var(--input-line);background:#fff;color:#2c3544;padding:9px 14px;border-radius:6px;font-size:12px;white-space:nowrap}.button:hover{background:var(--hover)}.primary{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:700}.primary:hover{background:#0c8a72}.red{color:var(--red)}.orange{color:var(--orange)}.violet{color:var(--violet)}.cyan{color:var(--accent)}.heading-actions{display:flex;gap:8px}.panel{border:1px solid var(--line);border-radius:10px;background:var(--panel);overflow:hidden;box-shadow:var(--shadow)}.panel-heading{display:flex;align-items:center;justify-content:space-between;padding:17px 20px;border-bottom:1px solid var(--line);gap:10px}.panel-heading h2{display:flex;align-items:center;gap:9px}.subtle{font-size:10px;font-weight:400;color:var(--muted)}.pulse,.status-dot{width:6px;height:6px;display:inline-block;background:var(--accent);border-radius:50%;box-shadow:0 0 8px #0f9f8433}.pulse.muted{background:#a0aab8;box-shadow:none}.camera-stage{position:relative;aspect-ratio:16/10;background:radial-gradient(ellipse at center,#1b2b36 0%,#0c121b 70%);overflow:hidden;display:grid;place-items:center}.camera-stage:fullscreen{aspect-ratio:auto;width:100%;height:100%;background:#080c12}.camera-stage video{width:100%;height:100%;object-fit:contain;position:absolute}.camera-stage canvas{position:absolute;width:100%;height:100%;pointer-events:none}.camera-empty{position:relative;text-align:center;padding:24px;color:#edf2fa}.camera-glyph{color:#60e0c2;font-size:50px;line-height:1.5;opacity:.65}.camera-empty h3{font-size:18px;font-weight:500;margin:8px 0 12px}.camera-empty p{font-size:12px;line-height:1.9;color:#8793a7}.camera-empty button{margin-top:23px}.camera-empty small{display:block;color:#576780;font-size:10px;margin-top:12px}.video-label{position:absolute;top:18px;left:18px;font-size:10px;color:#60e0c2;padding:5px 9px;background:#0c1719b8;letter-spacing:1px}.camera-controls{padding:13px 16px;display:flex;gap:8px;border-top:1px solid var(--line)}select{border:1px solid var(--input-line);background:#fff;color:#2c3544;border-radius:6px;padding:9px 10px;min-width:0;font-size:12px}.camera-controls select{flex:1}.icon-button{background:none;border:1px solid var(--input-line);color:#4a5568;border-radius:6px;width:35px;font-size:20px}.icon-button:hover{background:var(--hover)}.camera-footer{display:flex;justify-content:space-between;padding:0 17px 14px;font-size:10px;color:var(--muted)}.status-dot{width:5px;height:5px;margin-right:4px;background:#a0aab8}.settings-body{padding:18px 20px}.settings-body>select{width:100%;margin:9px 0}.field-label{display:block;font-size:12px;color:#2c3544}.help{font-size:11px;line-height:1.7}.divider{height:1px;background:var(--line);margin:18px 0}.settings-drawer h3{font-size:12px;color:#4a5568;margin-bottom:14px}.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;font-size:12px}.toggle-row b{font-size:18px;display:inline-block;width:24px}.toggle-row small{display:block;color:var(--muted);font-size:10px;margin-left:24px;margin-top:3px}input[type=checkbox]{accent-color:var(--accent);cursor:pointer;width:16px;height:16px}input[type=range]{width:100%;accent-color:var(--accent);margin:18px 0 4px;cursor:pointer}output{float:right;color:var(--accent)}.sound-row{display:flex;align-items:center;gap:7px;font-size:12px;color:#4a5568;margin-top:19px}.events{margin-top:22px}.event-tools{display:flex;gap:15px;align-items:center}.event-tools select{padding:6px 10px}.text-button{border:0;background:transparent;color:#5b6678;font-size:11px}#event-total{background:var(--hover);color:#4a5568;padding:1px 7px;border-radius:4px;font-size:11px}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;text-align:left;white-space:nowrap}th{background:var(--head);color:var(--muted);font-size:10px;font-weight:500;padding:12px 20px}td{font-size:12px;padding:15px 20px;border-top:1px solid var(--line);color:#4a5568}.event-name{color:var(--text)}.event-kind{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:9px;background:var(--red)}.event-kind.fire{background:var(--orange)}.event-kind.smoking{background:var(--violet)}.events-empty{text-align:center;padding:35px 20px 39px}.events-empty>span{font-size:24px;color:#a0aab8}.events-empty h3{margin:8px 0 5px;color:#4a5568;font-size:12px;font-weight:400}.events-empty p{font-size:11px}footer{display:flex;justify-content:space-between;padding:24px 0;color:#8a94a6;font-size:10px}footer b{font-weight:500;letter-spacing:1px}.toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);padding:13px 22px;background:#2c3d50;color:white;border:1px solid #526780;border-radius:8px;box-shadow:0 8px 35px #0003;z-index:10;max-width:90vw}dialog{width:min(660px,90vw);background:#fff;color:var(--text);border:1px solid var(--line);border-radius:12px;padding:24px;box-shadow:0 20px 60px #1a223033}dialog::backdrop{background:#1a223066}.dialog-head{display:flex;justify-content:space-between;margin-bottom:20px}dialog img{width:100%;border-radius:6px}dialog p{margin:16px 0;font-size:12px}[hidden]{display:none!important}@media(min-width:1600px){.camera-stage{aspect-ratio:16/9}}@media(max-width:1200px){.sidebar{width:190px;padding:28px 15px}.brand{font-size:17px}main{margin-left:190px;padding:0 24px}.camera-stage{aspect-ratio:4/3}}@media(max-width:950px){.sidebar{width:70px;padding:24px 13px}.brand{font-size:0}.brand-dot,nav span,nav b{display:none}nav{margin-top:40px}nav a{font-size:18px;justify-content:center;padding:10px}.brand-mark{font-size:21px}main{margin-left:70px;padding:0 20px}.camera-stage{aspect-ratio:16/9}}@media(max-width:620px){main{margin-left:0;padding:0 16px}.sidebar{display:none}header{height:60px}header .tag{display:none}header>div{gap:0}.page-heading{padding-top:25px;align-items:flex-start}.heading-actions .button{padding:7px;font-size:10px}h1{font-size:24px}.page-heading p{font-size:11px}.eyebrow{font-size:8px}.camera-stage{aspect-ratio:4/3}.panel-heading{padding:14px}.camera-controls{padding:10px;gap:5px}.camera-controls select{max-width:calc(100% - 190px)}.event-tools{gap:5px}th,td{padding:12px}footer{gap:12px;font-size:9px}.camera-empty h3{font-size:16px}}

#score-debug{border-top:1px solid var(--line);padding:12px 17px}#score-debug summary{cursor:pointer;color:var(--muted);font-size:11px}#score-debug-text{margin-top:10px;white-space:pre-wrap;font:12px/1.8 Consolas,monospace;color:var(--accent)}

@media(min-width:1280px) and (min-height:720px){
  main{height:100dvh;max-width:none;padding:8px 24px;display:grid;grid-template-rows:38px 56px minmax(0,1fr) minmax(150px,22vh) 22px;gap:10px}
  header{height:auto}.page-heading{padding:0}h1{font-size:25px;margin:2px 0}.eyebrow{font-size:9px}
  .camera-panel{min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto auto}.panel-heading{padding:11px 16px}
  .camera-stage{aspect-ratio:auto;min-height:0}.camera-stage:fullscreen{width:100%;height:100%}.camera-controls{padding:8px 12px}.camera-footer{padding:0 12px 8px;gap:12px}
  #score-debug{padding:7px 12px;max-height:120px;overflow:auto}#score-debug-text{margin-top:5px}
  .events{margin:0;min-height:0;display:flex;flex-direction:column}.table-wrap{min-height:0;overflow:auto;flex:1}th{position:sticky;top:0;z-index:1}th,td{padding:8px 16px}.events-empty{padding:12px 20px}.events-empty>span{font-size:20px}
  footer{padding:0;align-items:center}
}


.blue{color:var(--blue)}.event-kind.fall{background:var(--blue)}
.slate{color:var(--smoke)}.event-kind.smoke{background:var(--smoke)}
.green{color:var(--green)}.event-kind.phone{background:var(--green)}
#ipcam-url{flex:1.4;border:1px solid var(--input-line);background:#fff;color:#2c3544;border-radius:6px;padding:9px 10px;min-width:0;font-size:12px}
.settings-drawer{position:fixed;inset:0 0 0 auto;margin:0;width:min(340px,90vw);height:100dvh;max-height:none;padding:0;border:0;border-left:1px solid var(--line);border-radius:0;display:none;flex-direction:column;overflow-y:auto;box-shadow:-12px 0 40px #1a22301f;animation:drawer-in .2s ease-out}
.settings-drawer[open]{display:flex}.settings-drawer .settings-body{flex:1}
@keyframes drawer-in{from{transform:translateX(100%)}}
.login-page{min-height:100vh;display:grid;place-items:center;padding:16px}.login-card{width:min(360px,100%);padding:32px 28px;display:flex;flex-direction:column;gap:8px}.login-card h1{font-size:22px;margin:22px 0 10px}.login-card input{border:1px solid var(--input-line);border-radius:6px;padding:10px 12px;margin-bottom:8px}.login-card .primary{margin-top:10px;padding:11px}.login-error{color:var(--red);font-size:12px}.user-box{display:flex;align-items:center;gap:10px}