*,*::before,*::after{box-sizing:border-box}
:root{
  --bg:#0d0c12; --panel:#16151e; --panel-2:#1d1b27; --line:#2b2937;
  --ink:#eceaf4; --muted:#9e9bb2; --accent:#e2b45f; --accent-ink:#2a1f07;
  --violet:#8b6cff; --danger:#ff6b6b; --ok:#54c98a;
  --radius:14px;
}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:
    radial-gradient(1100px 620px at 15% -10%, #241c3d 0%, transparent 60%),
    radial-gradient(900px 520px at 88% 0%, #12293a 0%, transparent 55%),
    var(--bg);
  min-height:100vh; color:var(--ink);
  font:16px/1.6 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:760px; margin:0 auto; padding:28px 16px 64px}
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:14px 16px; border-bottom:1px solid var(--line);
  background:rgba(13,12,18,.72); backdrop-filter:blur(8px);
  position:sticky; top:0; z-index:10;
}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; color:var(--ink); letter-spacing:-.01em}
.brand:hover{text-decoration:none}

.topbar nav{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
h1{font-size:clamp(1.6rem,4vw,2.1rem); line-height:1.2; margin:0 0 6px; letter-spacing:-.02em}
h2{font-size:1.15rem; margin:32px 0 12px; letter-spacing:-.01em}
h3{font-size:1rem; margin:0 0 8px}
p{margin:0 0 14px}
.muted{color:var(--muted)}
.small{font-size:.86rem}
.lede{color:var(--muted); margin-bottom:22px}
.card{
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border:1px solid var(--line); border-radius:var(--radius);
  padding:20px; margin-bottom:14px;
}
a.card{display:block; color:inherit; transition:border-color .15s,transform .15s}
a.card:hover{border-color:#43405a; transform:translateY(-1px); text-decoration:none}
.card-head{display:flex; justify-content:space-between; align-items:flex-start; gap:12px}
.meta{display:flex; flex-wrap:wrap; gap:8px 16px; color:var(--muted); font-size:.9rem; margin-top:10px}
.meta span{display:inline-flex; gap:7px; align-items:center}
.ico{flex:none; opacity:.72; margin-top:-1px}
.tag{
  display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:4px 9px; border-radius:999px; border:1px solid var(--line); color:var(--muted); white-space:nowrap;
}
.tag.gold{border-color:#5a4520; background:#2a2110; color:var(--accent)}
.tag.ok{border-color:#265c41; background:#11291d; color:var(--ok)}
.tag.warn{border-color:#5d3a1c; background:#2a1a0d; color:#f0a860}
.tag.off{opacity:.75}
form{margin:0}
label{display:block; font-weight:600; margin-bottom:6px; font-size:.93rem}
.hint{font-weight:400; color:var(--muted); font-size:.85rem; margin:-2px 0 6px}
input[type=text],input[type=email],input[type=password],input[type=number],
input[type=datetime-local],input[type=date],select,textarea{
  width:100%; padding:11px 12px; border-radius:10px; color:var(--ink);
  background:#100f16; border:1px solid var(--line);
  font:inherit; font-size:.95rem;
}
textarea{min-height:92px; resize:vertical}
select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:36px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--violet); outline-offset:1px; border-color:transparent}
.row{display:flex; gap:12px; flex-wrap:wrap}
.row>*{flex:1 1 200px; min-width:0}
.field{margin-bottom:18px}
.field.bad input,.field.bad select,.field.bad textarea{border-color:var(--danger)}
.err{color:var(--danger); font-size:.85rem; margin-top:6px}
.err ul{margin:0; padding-left:18px}
/* Django renders a choice group as <div id><div><label><input>text</label></div>...;
   the .choices wrapper is added by _field.html so each option reads as a card. */
.choices > div{display:grid; gap:8px}
.choices label,label.choice{
  display:flex; gap:10px; align-items:flex-start; padding:10px 12px; cursor:pointer; margin:0;
  background:#100f16; border:1px solid var(--line); border-radius:10px; font-weight:400;
}
.choices label:hover,label.choice:hover{border-color:#43405a}
.choices input,label.choice input{margin:3px 0 0; accent-color:var(--violet); width:16px; height:16px; flex:none}
.btn{
  display:inline-block; padding:11px 18px; border-radius:10px; border:1px solid transparent;
  background:var(--accent); color:var(--accent-ink); font:inherit; font-weight:700; font-size:.95rem;
  cursor:pointer; text-align:center;
}
.btn:hover{filter:brightness(1.07); text-decoration:none}
.btn.block{display:block; width:100%}
.btn.ghost{background:transparent; border-color:var(--line); color:var(--ink)}
.btn.ghost:hover{border-color:#4a4763; filter:none}
.btn.danger{background:transparent; border-color:#5a2b2b; color:#ff8f8f}
.btn.sm{padding:7px 12px; font-size:.85rem; font-weight:600}
.notice{border:1px solid var(--line); border-left:3px solid var(--accent); background:var(--panel); border-radius:10px; padding:14px 16px; margin-bottom:18px}
.notice.bad{border-left-color:var(--danger)}
table{width:100%; border-collapse:collapse; font-size:.9rem}
.scroll{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius)}
th,td{padding:10px 12px; text-align:left; border-bottom:1px solid var(--line)}
th{color:var(--muted); font-size:.76rem; text-transform:uppercase; letter-spacing:.06em; background:#131220}
tbody tr:last-child td{border-bottom:none}
.empty{text-align:center; padding:40px 20px; color:var(--muted); border:1px dashed var(--line); border-radius:var(--radius)}
.foot{text-align:center; color:var(--muted); font-size:.82rem; padding:24px 16px 40px}
.code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; background:#100f16; border:1px solid var(--line); padding:3px 8px; border-radius:7px; font-size:.88rem}
@media(max-width:560px){ .wrap{padding-top:20px} }

/* Admin field builder */
.fb-row{border:1px solid var(--line); border-radius:12px; padding:14px; margin-bottom:12px; background:#131220}
.fb-row .bar{display:flex; gap:10px; align-items:center; margin-bottom:12px}
.fb-row .bar strong{flex:1; font-size:.88rem; color:var(--muted); letter-spacing:.04em; text-transform:uppercase}
.fb-row .field{margin-bottom:12px}
.inline{display:inline-flex; gap:8px; align-items:center; font-weight:600; font-size:.9rem; cursor:pointer; margin:0 14px 0 0}
.inline input{width:16px; height:16px; accent-color:var(--violet)}
.inline.del{color:#ff8f8f}
.split{display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:space-between}
/* The order value is managed by the arrows; keep it out of the way but reachable. */
.order-wrap{display:none}
.helptext{color:var(--muted); font-size:.85rem; display:block; margin-top:6px}

/* Check-in */
.counter{display:flex; align-items:baseline; gap:8px}
.counter strong{font-size:1.9rem; letter-spacing:-.02em; color:var(--accent)}
.order-line{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.95rem;
  background:#100f16; border:1px solid var(--line); border-radius:10px;
  padding:12px 14px; margin:0 0 16px; overflow-wrap:anywhere;
}
.tally{display:grid; gap:10px}
.tally-row{display:flex; gap:14px; align-items:flex-start; padding:10px 0; border-top:1px solid var(--line)}
.tally-row:first-child{border-top:none}
.tally-count{
  flex:none; width:44px; height:44px; border-radius:11px; display:grid; place-items:center;
  background:#1c1a28; border:1px solid var(--line);
}
.tally-count strong{font-size:1.15rem}
.tally-body{min-width:0; flex:1}
.tally-name{font-weight:600}
.tally-notes{display:flex; flex-wrap:wrap; gap:6px; margin-top:7px}
.note-chip{
  font-size:.8rem; padding:3px 9px; border-radius:999px;
  background:#2a2110; border:1px solid #5a4520; color:var(--accent);
}
.note-chip.pending{background:#16151e; border-color:var(--line); color:var(--muted)}
.filter{max-width:260px; padding:9px 12px}
.person{margin-bottom:8px}
.person-btn{
  width:100%; display:flex; gap:14px; align-items:center; text-align:left; cursor:pointer;
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border:1px solid var(--line); border-radius:12px; padding:12px 14px;
  color:var(--ink); font:inherit;
}
.person-btn:hover{border-color:#43405a}
.tick{
  flex:none; width:26px; height:26px; border-radius:8px;
  border:2px solid #3a3750; background:transparent; position:relative;
}
.person.in .tick{background:var(--ok); border-color:var(--ok)}
.person.in .tick::after{
  content:''; position:absolute; left:8px; top:3px; width:6px; height:12px;
  border:solid #0d0c12; border-width:0 2.5px 2.5px 0; transform:rotate(45deg);
}
.person.in .person-btn{border-color:#2c5f45; background:#11291d}
.person-body{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.person-name{font-weight:600; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.person-answers{display:flex; flex-wrap:wrap; gap:6px; margin-top:6px}
.chip{
  font-size:.8rem; padding:3px 9px; border-radius:999px;
  background:#100f16; border:1px solid var(--line); color:var(--muted);
}
.chip em{font-style:normal; color:var(--accent)}
.person-state{flex:none; font-size:.8rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--muted)}
.person.in .person-state{color:var(--ok)}
@media(max-width:560px){ .filter{max-width:100%; width:100%} }

/* A note box belongs to the question above it, so indent it under that. */
.note-field{margin:-8px 0 18px 14px; padding-left:14px; border-left:2px solid var(--line)}
.note-field label{font-weight:500; font-size:.88rem; color:var(--muted)}

.tally-card summary{
  cursor:pointer; list-style:none; display:flex; gap:12px; align-items:baseline;
  flex-wrap:wrap; justify-content:space-between;
}
.tally-card summary::-webkit-details-marker{display:none}
.tally-card summary::after{content:'+'; color:var(--muted); font-size:1.1rem; line-height:1}
.tally-card[open] summary::after{content:'\2212'}
.tally-card .sum-title{font-weight:700; font-size:1rem}

/* Ticket */
.ticket{
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  background:linear-gradient(180deg,var(--panel-2),var(--panel)); margin-bottom:14px;
}
.ticket-hero{display:block; width:100%; height:auto; max-height:260px; object-fit:cover}
.ticket-body{padding:22px}
.ticket-title{margin:0 0 4px; font-size:1.3rem}
.ticket-qr{
  display:flex; gap:18px; align-items:center; flex-wrap:wrap; margin:22px 0;
  padding:18px; background:#fff; border-radius:12px;
}
.ticket-qr svg{display:block; width:150px; height:150px}
.ticket-ref{color:#1c1b22}
.ticket-ref strong{display:block; font-size:1.5rem; letter-spacing:.08em;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.ticket-ref .muted{color:#5d5a6d}
.ticket-table{width:100%; font-size:.92rem}
.ticket-table th{background:none; text-transform:none; letter-spacing:0; font-size:.92rem;
  color:var(--muted); font-weight:400; width:40%}
.wallet-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:20px}
.scan-result{
  text-align:center; padding:32px 20px; border-radius:var(--radius);
  border:1px solid var(--line); margin-bottom:18px;
}
.scan-result.ok{background:#11291d; border-color:#2c5f45}
.scan-result.warn{background:#2a1a0d; border-color:#5d3a1c}
.scan-mark{
  width:64px; height:64px; margin:0 auto 14px; border-radius:50%; display:grid;
  place-items:center; font-size:2rem; font-weight:700; color:#0d0c12;
}
.scan-result.ok .scan-mark{background:var(--ok)}
.scan-result.warn .scan-mark{background:#f0a860}
.event-hero{display:block; width:100%; height:auto; max-height:300px; object-fit:cover;
  border-radius:var(--radius); margin-bottom:18px}
.card-thumb{display:block; width:100%; height:120px; object-fit:cover;
  border-radius:10px; margin-bottom:12px}