:root {
  --bg:#0f1117; --card:#1a1d28; --accent:#4f8cff; --text:#e6e8ee;
  --muted:#8b90a0; --ok:#38d39f; --danger:#ff5d6c; --line:#2a2e3c;
}
* { box-sizing: border-box; }
body {
  margin:0; font-family: system-ui, sans-serif; background:var(--bg); color:var(--text);
  display:flex; flex-direction:column; align-items:center; min-height:100vh; padding:0 16px 32px;
}
h1 { font-size:1.2rem; margin:8px 0 4px; }
a { color:var(--accent); }

/* nav */
.nav {
  width:100%; max-width:680px; display:flex; gap:6px; flex-wrap:wrap;
  padding:14px 0 10px; margin-bottom:8px;
}
.nav a {
  flex:1; text-align:center; min-width:72px; padding:10px 8px; border-radius:10px;
  text-decoration:none; color:var(--text); background:var(--card); font-weight:600; font-size:.92rem;
}
.nav a.active { background:var(--accent); color:#fff; }

.card { background:var(--card); border-radius:14px; padding:14px; width:100%; max-width:680px; margin-bottom:14px; }
.viewport { position:relative; line-height:0; }
video, canvas, img#preview { width:100%; border-radius:10px; background:#000; display:block; }
canvas { display:none; }
.bbox {
  position:absolute; border:3px solid var(--ok); border-radius:4px; display:none;
  box-shadow:0 0 0 2px rgba(0,0,0,.4); pointer-events:none;
}
.bbox::after {
  content:attr(data-label); position:absolute; top:-22px; left:-3px;
  background:var(--ok); color:#04201a; font:600 11px/1 system-ui, sans-serif;
  padding:3px 6px; border-radius:4px; white-space:nowrap;
}
.row { display:flex; gap:10px; margin-top:12px; }
button, .btn {
  flex:1; padding:13px; border:none; border-radius:10px; font-size:1rem; font-weight:600;
  background:var(--accent); color:#fff; cursor:pointer; text-align:center;
}
button.secondary, .btn.secondary { background:#2a2e3c; color:var(--text); }
button.danger { background:var(--danger); color:#fff; }
button:disabled { opacity:.5; cursor:default; }

.plate { font-size:2rem; font-weight:700; letter-spacing:1px; word-break:break-word; }
.province { color:var(--accent); font-size:1.2rem; margin-top:4px; }
.muted { color:var(--muted); font-size:.85rem; }
.raw { font-family:monospace; font-size:.8rem; color:var(--muted); white-space:pre-wrap; margin-top:10px; }
.spinner {
  border:3px solid #2a2e3c; border-top-color:var(--accent); border-radius:50%;
  width:24px; height:24px; animation:spin 1s linear infinite; margin:8px auto;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* inputs */
input[type=text], input[type=password], input[type=search] {
  width:100%; padding:12px; border-radius:10px; border:1px solid var(--line);
  background:#0f1117; color:var(--text); font-size:1rem;
}
label.field { display:block; margin:10px 0 4px; color:var(--muted); font-size:.85rem; }

/* tables / lists */
table { width:100%; border-collapse:collapse; font-size:.9rem; }
th, td { text-align:left; padding:8px 6px; border-bottom:1px solid var(--line); vertical-align:middle; }
th { color:var(--muted); font-weight:600; }
td .thumb { width:64px; height:40px; object-fit:cover; border-radius:6px; background:#000; }
.tag { display:inline-block; padding:2px 8px; border-radius:999px; background:#0f1117; border:1px solid var(--line); font-size:.8rem; }
.toolbar { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.stat { display:flex; gap:14px; flex-wrap:wrap; }
.stat .box { flex:1; min-width:120px; background:#0f1117; border:1px solid var(--line); border-radius:10px; padding:12px; }
.stat .box b { font-size:1.6rem; display:block; }
.switch { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:.9rem; }