:root{color-scheme:dark;--bg:#0a121d;--panel:#142231;--line:#2c4055;--text:#edf4fa;--muted:#aabccd;--accent:#6ee5c2}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,sans-serif;line-height:1.5}header{display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--line);padding:22px max(18px,calc((100vw - 980px)/2));background:#101c29}header h1{font-size:23px;margin:0}header p{margin:0;color:var(--muted);font-size:13px}.mark{color:var(--accent);font-size:34px}header button{margin-left:auto}main{max-width:980px;margin:24px auto;padding:0 16px}section{background:var(--panel);padding:22px;border-radius:16px;border:1px solid var(--line)}h2{font-size:21px;margin:0 0 14px}h3{font-size:17px}p{color:var(--muted)}label{display:block;margin:14px 0 7px}input,select,button{font:inherit;border-radius:10px;border:1px solid var(--line);padding:12px;background:#0e1a28;color:var(--text);min-height:46px}input,select{width:100%}button{cursor:pointer;font-weight:600}button:hover{border-color:var(--accent)}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.primary{background:var(--accent);color:#082a22;margin-top:16px;width:100%;border:0}nav{display:flex;gap:8px;margin-bottom:18px}nav button{flex:1;padding:12px 6px;font-size:14px}nav button.active{background:#244939;border-color:var(--accent);color:var(--accent)}.heading{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.badge{font-size:12px;color:var(--accent)}.screen{position:relative;background:#05090f;border-radius:12px;margin-top:18px;min-height:220px;display:grid;place-items:center;overflow:hidden}.screen img{width:100%;display:block}.screen p{position:absolute;bottom:4px;background:#07101ad9;padding:6px 12px;border-radius:8px;margin:0;max-width:95%}.hint{font-size:13px}#message:empty{display:none}#message{padding:12px;border:1px solid #7ba89a;border-radius:10px;color:var(--text)}#alert-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}.alert-card{text-align:left;padding:0;overflow:hidden;background:#0d1927}.alert-card img{width:100%;height:140px;object-fit:cover}.alert-card .placeholder{height:100px;display:grid;place-items:center;font-size:28px;color:var(--accent)}.alert-card div.details{padding:14px}.alert-card strong{display:block}.alert-card small{display:block;color:var(--muted);margin-top:5px}#more{margin-top:18px;width:100%}#notify-cameras label{display:flex;align-items:center;gap:12px}#notify-cameras input{width:22px;min-height:22px}#save-settings{margin-top:18px;width:100%}dialog{width:min(94vw,850px);background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:16px;padding:18px}dialog::backdrop{background:#000c}video{width:100%;max-height:65vh;background:#000;border-radius:8px;margin-top:16px}footer{text-align:center;color:var(--muted);font-size:12px;padding:30px 16px}[hidden]{display:none!important}@media(max-width:480px){header{padding:16px}section{padding:16px}nav button{font-size:12px}header p{font-size:11px}.screen{min-height:170px}}

.grid-pager{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:16px 0}.grid-pager span{color:var(--muted);font-size:13px}.grid-pager button{padding:10px;font-size:13px}.grid-pager button:disabled{opacity:.4;cursor:default}.live-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:16px}.live-tile{padding:0;overflow:hidden;background:#07101a;text-align:left;min-width:0}.live-tile img{display:block;width:100%;aspect-ratio:16/9;object-fit:contain;background:#020509}.live-tile strong{display:block;font-size:13px;padding:8px 9px 2px;overflow-wrap:anywhere}.live-tile small{display:block;font-size:10px;color:var(--muted);padding:0 9px 9px;min-height:28px}.live-grid.dense{grid-template-columns:repeat(3,minmax(0,1fr))}@media(max-width:480px){.live-grid.dense{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(min-width:760px){.live-grid:not(.dense){gap:16px}.live-tile strong{font-size:15px}.live-tile small{font-size:12px}}
.live-tile img:not([src]){visibility:hidden}