:root{
  color-scheme:dark;
  --bg:#09080c; --panel:#121016; --panel2:#17141c; --line:#26222d; --text:#f4f1f6; --muted:#9b94a6; --dim:#6f687a;
  --butter:#ffc93c; --on-butter:#1d1404; --good:#3ddc84; --bad:#ff5a4f; --warn:#ffb020;
  --f-d:'Big Shoulders Display','Arial Narrow',sans-serif; --f-b:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{min-height:100%}
body{margin:0; background:radial-gradient(70% 40% at 50% 0%, #1b1622, var(--bg) 70%); color:var(--text); font-family:var(--f-b)}
button,input,select{font-family:inherit}
:focus-visible{outline:2px solid var(--butter); outline-offset:2px}

.top{display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:14px max(20px,env(safe-area-inset-left)); border-bottom:1px solid var(--line); background:rgba(9,8,12,.8); position:sticky; top:0; z-index:5; backdrop-filter:blur(8px)}
.brand{font:900 20px/1 var(--f-d); letter-spacing:.12em; text-transform:uppercase; color:var(--text); text-decoration:none}
.brand em{font-style:normal; color:var(--butter)}
.crumb{font:700 11px/1 var(--f-b); letter-spacing:.16em; text-transform:uppercase; color:var(--muted); padding-left:14px; border-left:1px solid var(--line)}
.spacer{flex:1}
.top nav{display:flex; gap:4px}
.top nav a{font:700 13px/1 var(--f-b); color:var(--muted); text-decoration:none; padding:8px 10px; border-radius:8px}
.top nav a:hover{color:var(--text); background:var(--panel)}
.top nav a[aria-current]{color:var(--butter); background:var(--panel)}

.wrap{max-width:1120px; margin:0 auto; padding:24px max(20px,env(safe-area-inset-left)) 60px}
h1{margin:0; font:900 clamp(34px,5vw,52px)/.95 var(--f-d); letter-spacing:.04em; text-transform:uppercase}
h2{margin:0 0 12px; font:900 20px/1 var(--f-d); letter-spacing:.12em; text-transform:uppercase}
.lede{margin:8px 0 0; color:var(--muted); font:500 15px/1.5 var(--f-b)}

.panel{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:20px}
.row{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
label.f{display:flex; flex-direction:column; gap:6px; font:700 11px/1 var(--f-b); letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
input.in, select.in{background:#0d0b11; color:var(--text); border:1px solid var(--line); border-radius:10px; padding:11px 12px; font:600 16px var(--f-b); min-width:0}
input.in.big{font:800 30px/1 var(--f-b); letter-spacing:.08em; text-transform:uppercase; padding:14px 16px; width:100%}
.btn{font:800 14px/1 var(--f-b); padding:12px 16px; border-radius:10px; border:1px solid var(--line); background:var(--panel2); color:var(--text); cursor:pointer; white-space:nowrap}
.btn:hover{border-color:var(--muted)}
.btn.main{background:var(--butter); color:var(--on-butter); border-color:transparent}
.btn.main:disabled{opacity:.4; cursor:not-allowed}
.btn.sm{padding:7px 10px; font-size:12px; border-radius:8px}

.pill{display:inline-flex; align-items:center; gap:6px; padding:4px 9px; border-radius:999px; font:800 11px/1 var(--f-b); letter-spacing:.1em; text-transform:uppercase; background:var(--panel2); color:var(--muted); border:1px solid var(--line)}
.pill.valid{color:var(--good); border-color:rgba(61,220,132,.35)}
.pill.redeemed{color:var(--muted)}
.pill.expired, .pill.invalid{color:var(--bad); border-color:rgba(255,90,79,.35)}
.pill.live::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--good); box-shadow:0 0 8px var(--good)}
.pill.off::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--bad)}

table{width:100%; border-collapse:collapse; font:600 14px/1.3 var(--f-b)}
th{text-align:left; font:800 10.5px/1 var(--f-b); letter-spacing:.14em; text-transform:uppercase; color:var(--dim); padding:0 10px 10px}
td{padding:11px 10px; border-top:1px solid var(--line); font-variant-numeric:tabular-nums}
td.code{font:800 15px/1 var(--f-b); letter-spacing:.08em}
td.num{text-align:right} th.num{text-align:right}
.empty{color:var(--dim); font:600 14px var(--f-b); padding:18px 10px}
.mono{font-variant-numeric:tabular-nums}

.gate{max-width:380px; margin:12vh auto 0}
.gate .panel{display:flex; flex-direction:column; gap:14px}
.err{color:var(--bad); font:600 13px var(--f-b); min-height:18px}