:root{--bg:#0f1216;--card:#171c23;--line:#263040;--fg:#e6edf3;--muted:#8b98a8;--acc:#4ea1ff;--red:#e5484d;--orange:#f5a524;--green:#30c070;--grey:#555}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.45 system-ui,Segoe UI,Roboto,sans-serif}
a{color:var(--acc);text-decoration:none}a:hover{text-decoration:underline}
.nav{display:flex;gap:18px;align-items:center;padding:10px 18px;background:#0b0e12;border-bottom:1px solid var(--line);flex-wrap:wrap}
.nav a{color:var(--muted);font-weight:500}.nav a.on,.nav a:hover{color:var(--fg);text-decoration:none}.nav .brand{color:var(--fg);font-weight:700;font-size:17px}
.spacer{flex:1}.badge{padding:2px 8px;border-radius:6px;font-size:12px;font-weight:700}.badge.warn{background:var(--orange);color:#000}
.dot{width:10px;height:10px;border-radius:50%;background:var(--grey);display:inline-block}.dot.on{background:var(--green)}
.main{padding:16px;max-width:1500px;margin:0 auto}.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:16px}
h1,h2{margin:0 0 10px;font-size:18px}h2 a{font-weight:400;margin-left:8px}.muted{color:var(--muted)}.small{font-size:12px}.err{color:var(--red)}
button{background:var(--acc);color:#fff;border:0;border-radius:8px;padding:8px 14px;font-weight:600;cursor:pointer}button.secondary{background:#2a3444}button.danger{background:var(--red)}
input,select{background:#0f141a;color:var(--fg);border:1px solid var(--line);border-radius:8px;padding:7px 9px;font-size:14px}
label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted)}
.login{max-width:360px;margin:60px auto}.login form{display:flex;flex-direction:column;gap:12px}
.live-grid{display:grid;grid-template-columns:300px 1fr;gap:16px}@media(max-width:900px){.live-grid{grid-template-columns:1fr}}
.light-card{display:flex;gap:16px;align-items:flex-start}
.light{background:#111;border-radius:20px;padding:12px;display:flex;flex-direction:column;gap:12px;width:84px;flex:none}
.lamp{width:60px;height:60px;border-radius:50%;background:#2a2a2a;box-shadow:inset 0 0 12px #000;transition:all .2s}
.light[data-color=red] .lamp.red{background:var(--red);box-shadow:0 0 28px var(--red)}
.light[data-color=orange] .lamp.orange,.light[data-color=grey] .lamp.orange{background:var(--orange);box-shadow:0 0 28px var(--orange)}
.light[data-color=grey] .lamp.orange{background:#6a4d12;box-shadow:none;animation:blink 1s infinite}
.light[data-color=green] .lamp.green{background:var(--green);box-shadow:0 0 28px var(--green)}
@keyframes blink{50%{opacity:.3}}
.light-info{flex:1;min-width:0}.reason{font-size:16px;font-weight:600;word-wrap:break-word}.person{font-size:20px;color:var(--green);font-weight:700}
.thumb{width:120px;height:120px;border-radius:10px;margin:8px 0;object-fit:cover}
.video{width:100%;border-radius:8px;background:#000;display:block;aspect-ratio:16/9}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.tile{display:block;background:#0f141a;border:1px solid var(--line);border-radius:10px;overflow:hidden;color:var(--fg)}.tile:hover{text-decoration:none;border-color:var(--acc)}
.tile img,.tile .noimg{width:100%;aspect-ratio:1;object-fit:cover;background:#000;display:flex;align-items:center;justify-content:center;color:var(--muted)}
.tile-body{padding:6px 8px}.tile-name{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile.dec-granted,.tile.dec-dry_run{border-left:4px solid var(--green)}.tile.dec-unknown,.tile.dec-pending{border-left:4px solid var(--grey)}
.tile.dec-uncertain{border-left:4px solid var(--orange)}.tile.dec-blocked,.tile.dec-denied,.tile.dec-schedule{border-left:4px solid var(--red)}
.dec{padding:2px 8px;border-radius:6px;background:#2a3444;font-size:14px}.dec-granted,.dec-dry_run{background:var(--green);color:#000}.dec-blocked,.dec-denied,.dec-schedule{background:var(--red)}.dec-uncertain{background:var(--orange);color:#000}
.filters{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}.pager{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap}.pager b{color:var(--fg)}
.event-view{display:grid;grid-template-columns:1fr 1fr;gap:16px}@media(max-width:900px){.event-view{grid-template-columns:1fr}}
.event-imgs .crop{width:220px;border-radius:10px;display:block;margin-bottom:10px}.event-imgs .frame{width:100%;border-radius:10px}
dl{display:grid;grid-template-columns:120px 1fr;gap:6px 12px}dt{color:var(--muted)}dd{margin:0}
.actions{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}.inline{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.zone-grid{display:grid;grid-template-columns:2fr 1fr;gap:16px}@media(max-width:1100px){.zone-grid{grid-template-columns:1fr}}
.canvas-wrap{width:100%}canvas{width:100%;height:auto;border-radius:8px;background:#000;cursor:crosshair;display:block}
.row{display:flex;gap:10px;align-items:center;margin-top:10px;flex-wrap:wrap}
.settings{display:grid;grid-template-columns:1fr 1fr;gap:10px}.settings .row{grid-column:1/-1}.settings label.hl{grid-column:1/-1;color:var(--orange);font-weight:700}
.settings label input[type=checkbox]{width:20px;height:20px}
.pre{font-size:12px;white-space:pre-wrap;color:#c9d4e0;margin:0}
.persons-table{width:100%;border-collapse:collapse}.persons-table td,.persons-table th{padding:8px;border-bottom:1px solid var(--line);text-align:left}
.faces{display:flex;gap:8px;flex-wrap:wrap}.faces .f{position:relative}.faces img{width:96px;height:96px;object-fit:cover;border-radius:8px}
.faces .x{position:absolute;top:2px;right:2px;background:var(--red);border-radius:50%;width:20px;height:20px;padding:0;font-size:12px;line-height:20px}