:root { --brand:#1F4E79; --brand-dark:#163A5B; --brand-light:#EAF1F8; --accent:#00AEEF; --pass:#2E7D32; --fail:#C62828; --near:#B26A00; --ink:#0f172a; --muted:#64748b; --line:#e2e8f0; --bg:#f8fafc; }
* { box-sizing:border-box; }
body { margin:0; font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background:var(--bg); color:var(--ink); font-size:15px; }
a { color:var(--brand); }
.wrap { max-width:1150px; margin:0 auto; padding:0 12px; }
main.wrap { padding:16px 12px 32px; }
footer { text-align:center; color:#94a3b8; font-size:11px; padding:12px; }
.topbar { background:var(--brand); color:#fff; position:sticky; top:0; z-index:40; box-shadow:0 1px 3px rgba(0,0,0,.2); }
.topbar .wrap { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:8px 12px; }
.topbar .logo { height:36px; background:#fff; border-radius:4px; padding:2px; }
.topbar .brand { font-weight:800; font-size:18px; letter-spacing:-.2px; margin-right:6px; }
.topbar .accent { color:#7dd3fc; }
.topbar .chip { font-size:11px; font-weight:700; background:rgba(255,255,255,.2); border-radius:4px; padding:2px 6px; letter-spacing:0; }
.topbar nav { display:flex; gap:4px; flex:1; overflow-x:auto; }
.topbar nav a { color:rgba(255,255,255,.9); text-decoration:none; font-weight:600; font-size:14px; padding:8px 12px; border-radius:8px; white-space:nowrap; }
.topbar nav a:hover { background:rgba(255,255,255,.1); }
.topbar nav a.on { background:#fff; color:var(--brand); }
.topbar .who { font-size:12px; color:rgba(255,255,255,.85); }
.topbar form { margin:0; }
.card { background:#fff; border:1px solid var(--line); border-radius:12px; padding:16px; box-shadow:0 1px 2px rgba(0,0,0,.03); margin-bottom:14px; }
.card h2 { margin:0 0 8px; font-size:17px; }
h1 { font-size:24px; margin:0 0 12px; }
.grid { display:grid; gap:12px; }
.g2 { grid-template-columns:repeat(2,1fr); } .g3 { grid-template-columns:repeat(3,1fr); } .g4 { grid-template-columns:repeat(4,1fr); } .g5 { grid-template-columns:repeat(5,1fr); }
@media (max-width:800px) { .g2,.g3,.g4,.g5 { grid-template-columns:1fr 1fr; } .station-grid { grid-template-columns:1fr !important; } }
.btn { display:inline-flex; align-items:center; gap:4px; padding:8px 16px; border-radius:8px; font-weight:600; font-size:14px; border:1px solid transparent; cursor:pointer; text-decoration:none; }
.btn.primary { background:var(--brand); color:#fff; } .btn.primary:hover { background:var(--brand-dark); }
.btn.secondary { background:#fff; border-color:#cbd5e1; color:var(--ink); } .btn.secondary:hover { background:#f1f5f9; }
.btn.danger { background:var(--fail); color:#fff; }
.btn.ghost { background:rgba(255,255,255,.15); color:#fff; } .btn.ghost:hover { background:rgba(255,255,255,.25); }
.btn.big { font-size:18px; padding:12px 32px; }
.btn.sm { font-size:12px; padding:5px 10px; }
.btn:disabled { opacity:.5; cursor:not-allowed; }
label.lbl, .lbl { display:block; font-size:12px; font-weight:600; color:#475569; margin-bottom:4px; }
.input, input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=time], select, textarea { width:100%; border:1px solid #cbd5e1; border-radius:8px; padding:8px 10px; font-size:14px; font-family:inherit; background:#fff; }
textarea.mono, .mono { font-family: ui-monospace, Menlo, Consolas, monospace; }
table { width:100%; border-collapse:collapse; }
th { text-align:left; font-size:12px; font-weight:600; color:#475569; background:#f1f5f9; padding:8px 10px; }
td { padding:8px 10px; border-top:1px solid #f1f5f9; font-size:14px; vertical-align:middle; }
.badge { display:inline-block; border-radius:999px; padding:2px 8px; font-size:12px; font-weight:700; }
.b-pass { background:#dcfce7; color:var(--pass); } .b-fail { background:#fee2e2; color:var(--fail); } .b-near { background:#fef3c7; color:var(--near); } .b-grey { background:#f1f5f9; color:#64748b; } .b-blue { background:#e0f2fe; color:#0369a1; }
.muted { color:var(--muted); } .small { font-size:12px; } .tiny { font-size:11px; } .right { text-align:right; } .nowrap { white-space:nowrap; }
.tile .k { font-size:12px; color:var(--muted); } .tile .v { font-size:30px; font-weight:800; }
.msg { background:#fff; border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:8px; padding:10px 12px; margin-bottom:12px; font-size:14px; }
.err { color:var(--fail); font-size:14px; }
.warn { color:var(--near); font-size:14px; }
.ok { color:var(--pass); font-weight:600; }
.info { background:#f0f9ff; border:1px solid #e0f2fe; border-radius:8px; padding:10px 14px; font-size:14px; }
.note { background:#f8fafc; border:1px solid var(--line); border-radius:8px; padding:10px 14px; font-size:12px; color:#475569; }
code { background:#f1f5f9; padding:1px 5px; border-radius:4px; font-size:12px; }
.kv { display:grid; grid-template-columns:140px 1fr; gap:6px 10px; font-size:14px; }
.kv .k { color:var(--muted); }
.kv .v { word-break:break-all; }
/* station */
.station-grid { display:grid; grid-template-columns:1fr 360px; gap:14px; }
.cam { position:relative; background:#000; border-radius:12px; overflow:hidden; aspect-ratio:16/9; }
.cam video { width:100%; height:100%; object-fit:contain; }
.roi { position:absolute; border:2px solid rgba(0,174,239,.9); border-radius:4px; pointer-events:none; }
.cam .tags { position:absolute; top:8px; left:8px; display:flex; gap:6px; }
.result { border-radius:12px; color:#fff; padding:16px; margin-top:12px; background:#334155; }
.result.pass { background:var(--pass); } .result.fail { background:var(--fail); } .result.near { background:var(--near); } .result.queued { background:var(--near); }
.result .huge { font-size:56px; font-weight:900; line-height:1; }
.result .big { font-size:22px; font-weight:700; }
.login { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:16px; }
.login .box { width:100%; max-width:380px; }
.login .head { display:flex; gap:12px; align-items:center; justify-content:center; margin-bottom:20px; }
.login .head img { height:48px; border-radius:6px; }
.login .head .t { font-size:26px; font-weight:800; color:var(--brand); line-height:1.1; }
.login .head .t span { color:var(--accent); }
.imgwrap { position:relative; } .imgwrap img { width:100%; border-radius:8px; }
.imgwrap svg { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.crosshair { cursor:crosshair; }
.labels { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.label { border:1px solid #cbd5e1; border-radius:8px; padding:10px; display:flex; gap:10px; align-items:center; background:#fff; break-inside:avoid; }
.label img.qr { width:110px; height:110px; }
@media print { .topbar, footer, .noprint { display:none !important; } body { background:#fff; } main.wrap { max-width:none; } }