:root { --bg:#0f1216; --card:#181d23; --line:#2a313a; --text:#e6e9ed; --muted:#8b96a3; --acc:#3d8bfd; --ok:#2fbf71; --bad:#e5534b; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color:var(--acc); text-decoration:none; }
main { max-width:1200px; margin:0 auto; padding:16px; }
.top { display:flex; align-items:center; justify-content:space-between; padding:10px 16px; border-bottom:1px solid var(--line); background:var(--card); position:sticky; top:0; z-index:5; }
.brand { font-weight:700; font-size:18px; color:var(--text); }
nav { display:flex; gap:14px; align-items:center; }
nav a { color:var(--muted); } nav a.on { color:var(--text); font-weight:600; }
nav form { margin:0; }
button, .btn { background:var(--acc); color:#fff; border:0; border-radius:8px; padding:8px 14px; font:inherit; cursor:pointer; display:inline-block; }
button.ghost, .btn.ghost { background:transparent; color:var(--text); border:1px solid var(--line); }
button.bad { background:var(--bad); }
button.link { background:none; color:var(--muted); padding:0; }
input, select { background:#0b0e11; color:var(--text); border:1px solid var(--line); border-radius:8px; padding:8px 10px; font:inherit; }
label { display:flex; flex-direction:column; gap:4px; color:var(--muted); font-size:13px; }
label input, label select { color:var(--text); font-size:15px; }
label.check { flex-direction:row; align-items:center; gap:8px; font-size:14px; color:var(--text); margin:6px 0; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px; margin:12px 0; }
.login { max-width:360px; margin:80px auto; display:flex; flex-direction:column; gap:12px; }
.muted { color:var(--muted); } .small { font-size:12.5px; } .nowrap { white-space:nowrap; } .break { word-break:break-all; }
.err { color:var(--bad); } .ok-msg { color:var(--ok); }
.row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:8px 0; } .row form { margin:0; }
.dot { display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--muted); vertical-align:middle; }
.dot.ok { background:var(--ok); } .dot.bad { background:var(--bad); }
.dot.wait { background:#d4a72c; animation:blink 1s infinite alternate; }
@keyframes blink { to { opacity:.3; } }
.cams-strip { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.cam-chip { border:1px solid var(--line); border-radius:20px; padding:5px 12px; color:var(--text); background:var(--card); }
.cam-chip.sel { border-color:var(--acc); } .cam-chip b { color:var(--muted); font-weight:500; margin-left:4px; }
.filters { display:flex; gap:8px; flex-wrap:wrap; align-items:flex-end; margin-bottom:6px; }
.filters label { flex-direction:row; align-items:center; }
.filters input[type=search] { min-width:220px; flex:1; }
table.passes { width:100%; border-collapse:collapse; }
.passes th, .passes td { text-align:left; padding:8px; border-bottom:1px solid var(--line); vertical-align:middle; }
.passes th { color:var(--muted); font-weight:500; font-size:13px; }
.plate { display:inline-block; font:700 20px/1 "DejaVu Sans Mono", Consolas, monospace; background:#fff; color:#111; border:2px solid #111; border-radius:5px; padding:4px 8px; letter-spacing:1px; }
.plate.odd { background:#ffe8a3; }
.thumbs { display:flex; gap:8px; align-items:center; }
.thumbs img { cursor:zoom-in; border-radius:6px; border:1px solid var(--line); }
.thumbs .crop { height:44px; } .thumbs .shot { height:72px; }
.pager { display:flex; justify-content:space-between; margin:16px 0; }
dialog#photo { background:var(--card); color:var(--text); border:1px solid var(--line); border-radius:12px; padding:10px; max-width:96vw; }
dialog#photo img { max-width:92vw; max-height:80vh; display:block; }
dialog#photo form { text-align:right; margin:6px 0 0; }
dialog::backdrop { background:rgba(0,0,0,.7); }
.cam-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:12px; }
.cam { margin:0; } .cam.disabled { opacity:.6; }
.cam .snap { width:100%; aspect-ratio:16/9; object-fit:cover; background:#000; border-radius:8px; }
.cam h3 { margin:8px 0 2px; font-size:16px; }
.cam-form { display:flex; flex-direction:column; gap:10px; max-width:820px; }
.grid3 { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:10px; }
.roi-wrap { position:relative; display:inline-block; max-width:100%; user-select:none; }
.roi-wrap img { max-width:100%; display:block; cursor:crosshair; border-radius:8px; }
#roi-rect { position:absolute; border:2px solid #ffd33d; background:rgba(255,211,61,.12); pointer-events:none; }
.danger { max-width:820px; }
@media (max-width:640px) {
  .passes thead { display:none; }
  .passes tr { display:grid; grid-template-columns:1fr auto; border-bottom:1px solid var(--line); padding:6px 0; }
  .passes td { border:0; padding:3px 6px; }
  .thumbs { grid-column:1 / -1; }
}