@font-face { font-family:'IBM Plex Sans'; font-weight:400; font-display:swap; src:url(/assets/fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family:'IBM Plex Sans'; font-weight:600; font-display:swap; src:url(/assets/fonts/ibm-plex-sans-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family:'IBM Plex Mono'; font-weight:400; font-display:swap; src:url(/assets/fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2'); }
:root { --bg:#f4f5f7; --surface:#ffffff; --fg:#12161b; --muted:#566170; --line:#e1e5ea; --accent:#0f766e; --accent-soft:#e2f1ee; --on-accent:#ffffff; --bad:#b3261e; color-scheme:light; }
@media (prefers-color-scheme: dark) { :root { --bg:#0b0d10; --surface:#12161b; --fg:#e7ebf0; --muted:#9aa5b3; --line:#262c35; --accent:#2dd4bf; --accent-soft:#0d2c28; --on-accent:#04211d; --bad:#f87171; color-scheme:dark; } }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.5 'IBM Plex Sans', system-ui, -apple-system, sans-serif; padding:max(16px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom)); }
main { max-width:420px; margin:0 auto; display:grid; gap:16px; }
.brand { display:flex; align-items:center; gap:10px; font-weight:600; }
.logo { width:30px; height:30px; border-radius:8px; background:var(--accent); color:var(--on-accent); display:grid; place-items:center; font-weight:700; }
.facility { color:var(--muted); font-size:14px; overflow-wrap:anywhere; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:20px; display:grid; gap:14px; }
h1 { font-size:22px; margin:0; line-height:1.2; }
p { margin:0; }
.muted { color:var(--muted); font-size:14px; }
label { display:grid; gap:6px; font-size:14px; color:var(--muted); }
input { font:inherit; color:var(--fg); background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:11px 12px; }
input:focus-visible, button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
button { font:inherit; font-weight:600; border-radius:10px; padding:12px; border:1px solid var(--line); background:var(--surface); color:var(--fg); cursor:pointer; }
button.primary { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
button:disabled { opacity:.6; }
.error { color:var(--bad); font-size:14px; min-height:1.2em; }
.pass { background:#0f766e; color:#fff; border-radius:20px; padding:18px; display:grid; gap:12px; }
.pass .top { display:flex; justify-content:space-between; align-items:center; font-size:12px; font-weight:600; letter-spacing:.06em; }
.pass .who { font-size:24px; font-weight:600; line-height:1.15; }
.pass .rows { display:flex; justify-content:space-between; font-size:12px; opacity:.9; }
.pass .rows b { display:block; font-size:14px; opacity:1; }
.qr { background:#fff; border-radius:14px; padding:10px; display:grid; justify-items:center; gap:6px; color:#12161b; }
.qr canvas { width:100%; max-width:260px; height:auto; aspect-ratio:1; image-rendering:pixelated; }
.count { display:flex; align-items:center; gap:8px; font:13px 'IBM Plex Mono', ui-monospace, monospace; color:#566170; }
.ring { --left:1; width:16px; height:16px; border-radius:50%; background:conic-gradient(#0f766e calc(var(--left) * 360deg), #e1e5ea 0); }
.tips { display:grid; gap:4px; }
.confirm { display:grid; gap:10px; }
.plain { padding:0; border:0; }
.gap-top { margin-top:16px; }
.right { text-align:right; }
.pass .top span:last-child { max-width:60%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.landing { text-align:center; justify-items:center; }
.landing img { width:56px; height:56px; border-radius:12px; }
.row { display:flex; gap:10px; } .row > * { flex:1; }
[hidden] { display:none !important; }
@media (prefers-reduced-motion: reduce) { * { transition:none !important; } }