:root{
--bg:#0a0a0a;
--surface:#161616;
--surface-2:#1f1f1f;
--border:rgba(245,239,228,.12);
--cream:#f5efe4;
--cream-dim:#c9bfa9;
--black-text:#0a0a0a;
--ok:#7fd99a;
--warn:#ff7a6e;
--pending:#e6bd63;
--radius:14px;
font-size:16px;
}
*{box-sizing:border-box;}
body{
margin:0;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
background:var(--bg);
color:var(--cream);
min-height:100vh;
}
.topbar{
background:#000;
color:var(--cream);
padding:12px 18px;
display:flex;
align-items:center;
justify-content:space-between;
position:sticky;
top:0;
z-index:10;
border-bottom:1px solid var(--border);
}
.brand{font-weight:700;font-size:1.05rem;display:flex;align-items:center;gap:10px;letter-spacing:.02em;}
.brand img{height:30px;width:auto;border-radius:4px;background:var(--cream);padding:3px;}
.user-chip{background:var(--surface-2);border:1px solid var(--border);color:var(--cream);padding:6px 12px;border-radius:20px;font-size:.85rem;}
main{max-width:480px;margin:0 auto;padding:18px 18px 60px;}
.view{animation:fade .15s ease-in;}
.hidden{display:none !important;}
@keyframes fade{from{opacity:0;}to{opacity:1;}}

h1{font-size:1.4rem;margin:6px 0 14px;color:var(--cream);}
h2{font-size:1.15rem;color:var(--cream);}
h3{font-size:1rem;color:var(--cream);margin-bottom:8px;}
p.muted{color:var(--cream-dim);font-size:.92rem;}
p.small{font-size:.78rem;}

label{display:block;margin:12px 0;font-weight:600;font-size:.9rem;color:var(--cream);}
input[type=text],input[type=tel],input[type=password],input[type=email]{
width:100%;
padding:12px 14px;
border:1px solid var(--border);
border-radius:10px;
margin-top:6px;
font-size:1rem;
background:var(--surface-2);
color:var(--cream);
}
input::placeholder{color:var(--cream-dim);opacity:.7;}

.btn{
display:block;
width:100%;
padding:14px;
border:none;
border-radius:12px;
font-size:1rem;
font-weight:600;
cursor:pointer;
margin:10px 0;
}
.btn.primary{background:var(--cream);color:var(--black-text);}
.btn.secondary{background:transparent;color:var(--cream);border:1.5px solid var(--cream);}
.btn.ghost{background:transparent;color:var(--cream-dim);border:1px solid var(--border);}
.btn.small{padding:8px 12px;font-size:.85rem;width:auto;display:inline-block;margin:4px;}
.btn.deny{background:var(--warn);color:#1a0a08;}
.btn.confirm{background:var(--ok);color:#08210f;}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.grid2 .btn{margin:0;}

.card{
background:var(--surface);
border:1px solid var(--border);
border-radius:var(--radius);
padding:18px;
margin-bottom:16px;
}
.card.center{text-align:center;}

.status-pill{
display:inline-block;
padding:6px 14px;
border-radius:20px;
font-size:.85rem;
font-weight:700;
}
.status-pill.active{background:rgba(127,217,154,.15);color:var(--ok);}
.status-pill.pending{background:rgba(230,189,99,.15);color:var(--pending);}
.status-pill.none{background:var(--surface-2);color:var(--cream-dim);}
.status-pill.denied{background:rgba(255,122,110,.15);color:var(--warn);}

.tier-line{display:flex;justify-content:space-between;margin:6px 0;font-size:.9rem;}
.tier-line b{color:var(--cream);}

.plan-card{
background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:14px;
}
.plan-card h3{margin:0 0 4px;}
.plan-icon{display:flex;justify-content:center;margin-bottom:6px;opacity:.9;}
.plan-longdesc{color:var(--cream-dim);font-size:.85rem;line-height:1.45;margin:6px 0 10px;}
.plan-price{font-size:1.3rem;font-weight:800;color:var(--cream);}
.plan-desc{font-size:.85rem;color:var(--cream-dim);margin:8px 0;}

.drink-list{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px;}
.drink-opt{
padding:14px 10px;text-align:center;border-radius:12px;border:2px solid var(--border);
background:var(--surface);font-weight:600;cursor:pointer;color:var(--cream);
}
.drink-opt.selected{border-color:var(--cream);background:var(--surface-2);}

.checkline{font-weight:400;display:flex;align-items:center;gap:8px;color:var(--cream);}
.checkline input{width:auto;}

#qrCanvas{margin:14px auto;display:block;border-radius:8px;}

.warn{background:rgba(255,122,110,.12);color:var(--warn);padding:10px 14px;border-radius:10px;margin-top:10px;font-size:.9rem;font-weight:600;}
.ok-msg{background:rgba(127,217,154,.12);color:var(--ok);padding:10px 14px;border-radius:10px;margin-top:10px;font-size:.9rem;font-weight:600;}

.footer-link{text-align:center;margin-top:18px;}
.footer-link a{color:var(--cream-dim);font-size:.88rem;text-decoration:none;}

.back{background:none;border:none;color:var(--cream-dim);font-weight:600;padding:0 0 12px;cursor:pointer;font-size:.92rem;}

.history-item, .sub-item, .pending-item{
background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:12px 14px;margin-bottom:8px;
display:flex;justify-content:space-between;align-items:center;
}
.history-item .meta{font-size:.78rem;color:var(--cream-dim);}

.pending-info{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:14px;margin-top:12px;text-align:left;}

#reader{border-radius:12px;overflow:hidden;margin-bottom:14px;}

.scan-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;}
.scan-card.allowed{border:2px solid var(--ok);}
.scan-card.denied{border:2px solid var(--warn);}