:root { color-scheme: light; --ink:#111827; --muted:#64748b; --line:#dbe2ea; --blue:#2563eb; --soft:#f1f5f9; }
* { box-sizing:border-box; }
body { margin:0; background:#f5f7fb; color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }
a { color:inherit; }
.topbar { min-height:64px; padding:0 28px; display:flex; align-items:center; justify-content:space-between; gap:20px; background:#fff; border-bottom:1px solid var(--line); }
.brand { font-weight:800; text-decoration:none; letter-spacing:-.02em; }
.topbar nav { display:flex; align-items:center; gap:20px; }
.topbar nav>a,.link-button { color:#475569; text-decoration:none; font:inherit; font-weight:650; }
.container { max-width:1240px; margin:0 auto; padding:36px 24px 64px; }
.page-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:24px; }
h1 { margin:4px 0 6px; font-size:34px; letter-spacing:-.035em; }
h2 { margin:0 0 10px; font-size:20px; }
p { line-height:1.55; }
.eyebrow { color:var(--blue); font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.12em; }
.muted,.meta { color:var(--muted); }
.panel { padding:22px; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 5px 22px rgba(15,23,42,.04); }
.alert { padding:13px 15px; margin-bottom:18px; border-radius:9px; border:1px solid; }
.alert.error { color:#991b1b; background:#fef2f2; border-color:#fecaca; }
.alert.success { color:#166534; background:#f0fdf4; border-color:#bbf7d0; }
.warning-panel { margin-bottom:22px; border-color:#fcd34d; background:#fffbeb; }
button,.button { min-height:42px; padding:9px 15px; display:inline-flex; align-items:center; justify-content:center; border:1px solid #111827; border-radius:8px; background:#111827; color:#fff; font:inherit; font-weight:750; text-decoration:none; cursor:pointer; }
button:hover,.button:hover { opacity:.86; }
button.secondary,.button.secondary { background:#fff; color:#111827; border-color:#cbd5e1; }
button.danger { color:#b91c1c; background:#fff; border-color:#fecaca; }
.inline-form { display:inline; }
.link-button { min-height:auto; padding:0; border:0; background:none; }
.choice-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-bottom:22px; }
.choice-card { padding:28px; border:1px solid var(--line); border-radius:16px; background:#fff; text-decoration:none; box-shadow:0 5px 22px rgba(15,23,42,.04); }
.choice-card:hover { border-color:#93c5fd; transform:translateY(-1px); }
.choice-icon { display:inline-block; margin-bottom:24px; padding:7px 10px; color:#1d4ed8; background:#eff6ff; border-radius:7px; font-size:12px; font-weight:800; text-transform:uppercase; }
.status-panel { display:flex; align-items:center; gap:28px; flex-wrap:wrap; }
.status-panel>div { display:flex; align-items:center; gap:8px; }
.status-panel form { margin-left:auto; }
.status-dot { width:9px; height:9px; border-radius:50%; background:#ef4444; }
.status-dot.ok { background:#22c55e; }
.login-wrap { min-height:100vh; display:grid; place-items:center; }
.login-panel { width:min(420px,100%); padding:34px; }
.stack { display:flex; flex-direction:column; gap:10px; }
label,legend { font-weight:700; font-size:14px; }
input,select { min-height:44px; padding:9px 11px; border:1px solid #b8c2cf; border-radius:8px; background:#fff; color:var(--ink); font:inherit; }
input:focus { outline:3px solid #dbeafe; border-color:#60a5fa; }
fieldset { margin:8px 0; padding:14px; border:1px solid var(--line); border-radius:9px; }
.duration-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:10px; }
.duration-grid label { display:flex; align-items:center; gap:7px; font-weight:500; }
.duration-grid input[type=radio] { min-height:auto; }
.wifi-layout { display:grid; grid-template-columns:minmax(280px,360px) minmax(0,1fr); gap:22px; align-items:start; }
.issue-panel { position:sticky; top:20px; }
.section-heading,.toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.section-heading p { margin:0; }
.voucher-list { display:flex; flex-direction:column; gap:12px; margin-top:18px; }
.voucher-card { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px; border:1px solid var(--line); border-radius:10px; }
.voucher-card.highlight { border-color:#60a5fa; background:#eff6ff; }
.voucher-main { min-width:0; }
.voucher-topline { display:flex; align-items:center; gap:10px; }
.voucher-code { margin:8px 0 5px; font:800 22px ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.08em; }
.badge { padding:3px 7px; border-radius:999px; background:#f1f5f9; color:#475569; font-size:11px; font-weight:800; text-transform:uppercase; }
.badge.active { background:#dcfce7; color:#166534; }.badge.expired { background:#fee2e2; color:#991b1b; }
.voucher-actions { display:flex; gap:7px; flex-shrink:0; }
.empty-state { padding:40px 10px; color:var(--muted); text-align:center; }
.narrow-panel { max-width:720px; }
.upload-form { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.receipt-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:24px; }
.receipt-card { display:flex; flex-direction:column; align-items:center; gap:12px; }
.receipt { width:80mm; min-height:95mm; padding:6mm 5mm; background:#fff; color:#000; text-align:center; box-shadow:0 3px 10px rgba(0,0,0,.18); }
.receipt-heading { margin-bottom:5mm; font-size:11px; font-weight:700; letter-spacing:2px; }
.receipt-name { margin-bottom:5mm; font-size:23px; font-weight:900; text-transform:uppercase; line-height:1.1; }
.receipt-label { margin:3mm 0 1mm; color:#555; font-size:9px; font-weight:700; letter-spacing:1px; }
.receipt-email { font-size:13px; overflow-wrap:anywhere; }.receipt-pin { margin:1mm 0 4mm; font-size:31px; font-weight:900; letter-spacing:5px; }
.qr-placeholder { width:42mm; height:42mm; margin:3mm auto; display:grid; place-items:center; border:3px solid #000; font-weight:900; }
.receipt-instruction { margin-top:4mm; font-size:10px; }
@media (max-width:800px) { .wifi-layout,.choice-grid { grid-template-columns:1fr; }.issue-panel { position:static; }.voucher-card { align-items:flex-start; flex-direction:column; }.topbar { padding:14px 18px; align-items:flex-start; }.topbar nav { gap:12px; flex-wrap:wrap; justify-content:flex-end; }.status-panel form { margin-left:0; } }
@media (max-width:520px) { .container { padding:24px 14px 48px; }.topbar { flex-direction:column; }.voucher-actions { width:100%; }.voucher-actions form,.voucher-actions button { flex:1; }.duration-grid { grid-template-columns:1fr; } }