:root { --bg: #0b0c10; --panel: #14161c; --line: #262a33; --text: #f2f3f5; --muted: #9aa1ad; --accent: #f5b301; --ink: #1a1400; --ok: #38c172; --warn: #e3342f; --amber: #f59e0b; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.45 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; -webkit-tap-highlight-color: transparent; }
.top { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--panel); position: sticky; top: 0; }
.brand { font-weight: 800; color: var(--accent); }
.top #net { margin-left: auto; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.screen { padding: 16px; max-width: 560px; margin: 0 auto; }
h1 { font-size: 22px; margin: 6px 0 14px; }
.meta { color: var(--muted); font-size: 13px; }
.ok { color: var(--ok); } .warn { color: var(--warn); }
.form { display: flex; flex-direction: column; gap: 10px; }
label, .field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
input, select { background: #0f1116; color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 12px; font: inherit; width: 100%; }
.cta { width: 100%; padding: 14px; border-radius: 12px; background: var(--accent); color: var(--ink); font-weight: 800; border: 0; font-size: 16px; margin-top: 8px; }
.btn { padding: 10px 14px; border-radius: 10px; background: #1c1f27; color: var(--text); border: 1px solid var(--line); font: inherit; }
.link { background: none; border: 0; color: var(--accent); padding: 10px 0; font: inherit; }
.list { display: flex; flex-direction: column; gap: 8px; }
.card { display: flex; flex-direction: column; gap: 2px; text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px; color: var(--text); font: inherit; width: 100%; }
.card.static { margin-bottom: 10px; }
.pill { display: inline-block; font-size: 11px; border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px; color: var(--muted); text-transform: uppercase; }
.scan-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.counter { font-size: 28px; font-weight: 800; }
.counter #count-in { color: var(--ok); }
.cam { position: relative; background: #000; border-radius: 14px; overflow: hidden; aspect-ratio: 4/3; }
.cam video { width: 100%; height: 100%; object-fit: cover; }
.reticle { position: absolute; inset: 15% 20%; border: 2px solid rgba(245,179,1,.7); border-radius: 12px; pointer-events: none; }
#cam-status { position: absolute; bottom: 8px; left: 0; right: 0; text-align: center; }
.result { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 16px; text-align: center; }
.result[hidden] { display: none; }
#result-title { font-size: 34px; font-weight: 900; letter-spacing: .02em; }
#result-msg { font-size: 16px; }
.result.ADMITTED { background: rgba(56,193,114,.94); color: #04220f; }
.result.ALREADY_USED, .result.INVALID_SIGNATURE, .result.VOID, .result.UNKNOWN, .result.WRONG_EVENT, .result.EVENT_ENDED { background: rgba(227,52,47,.94); color: #fff; }
.result.WRONG_GATE, .result.NOT_YET_VALID { background: rgba(245,158,11,.95); color: #241500; }
.result .meta { color: inherit; opacity: .85; }
.row { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.row input { flex: 1; }
details { margin-top: 10px; } summary { color: var(--muted); cursor: pointer; }
.recent { list-style: none; padding: 0; margin: 6px 0; }
.recent li { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.recent li.ADMITTED span:nth-child(2) { color: var(--ok); }
.recent li.ALREADY_USED span:nth-child(2), .recent li.INVALID_SIGNATURE span:nth-child(2) { color: var(--warn); }