:root{
  --night:#16242e;
  --night-2:#1e313d;
  --paper:#fdfaf4;
  --paper-2:#f4eee2;
  --ink:#241c16;
  --muted:#6d6459;
  --line:#ddd3c2;
  --red:#c4342b;
  --red-dark:#9c2820;
  --gold:#e8a33d;
  --green:#3f7d55;

  --seat-free:#ffffff;
  --seat-free-line:#c3b9a8;
  --seat-sel:#c4342b;
  --seat-opt:#e8a33d;
  --seat-paid:#5d5347;
  --seat-block:#ddd5c8;

  --bg:var(--paper);
  --surface:#ffffff;
  --text:var(--ink);
  --radius:10px;
  --shadow:0 1px 2px rgba(36,28,22,.07), 0 8px 24px -16px rgba(36,28,22,.35);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#141d23;
    --paper-2:#1b262e;
    --ink:#eee6d8;
    --muted:#9aa5ac;
    --line:#2d3c46;
    --surface:#1b262e;
    --seat-free:#24323b;
    --seat-free-line:#43545f;
    --seat-paid:#4b5964;
    --seat-block:#2b3841;
    --red:#e05a4f;
    --red-dark:#c4342b;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -16px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --paper:#141d23; --paper-2:#1b262e; --ink:#eee6d8; --muted:#9aa5ac;
  --line:#2d3c46; --surface:#1b262e;
  --seat-free:#24323b; --seat-free-line:#43545f; --seat-paid:#4b5964;
  --seat-block:#2b3841; --red:#e05a4f; --red-dark:#c4342b;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -16px rgba(0,0,0,.8);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--text);
  font-family:"Source Sans 3","Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:17px; line-height:1.55;
  -webkit-text-size-adjust:100%;
}
img{max-width:100%}
a{color:var(--red)}
:focus-visible{outline:3px solid var(--gold); outline-offset:2px}

/* ---------- marquee ---------- */
.marquee{
  background:var(--night);
  color:var(--paper);
  padding:30px 20px 26px;
  text-align:center;
  position:relative;
  border-bottom:5px solid var(--gold);
}
.bulbs{display:flex; justify-content:center; gap:11px; margin-bottom:22px; flex-wrap:wrap}
.bulb{
  width:9px;height:9px;border-radius:50%;
  background:#5a4a2c; box-shadow:none;
}
.bulb.on{background:var(--gold); box-shadow:0 0 9px 2px rgba(232,163,61,.55)}
.marquee .house{
  margin:0 0 4px; font-size:15px; letter-spacing:.01em; color:#b9c4c9;
}
.marquee h1{
  font-family:"Alfa Slab One",Georgia,serif;
  font-weight:400;
  font-size:clamp(46px,13vw,104px);
  line-height:.92;
  margin:0;
  color:var(--gold);
  text-shadow:0 3px 0 var(--red-dark);
}
.marquee .tagline{margin:10px 0 0; font-size:17px; color:#cfd8dc}

/* ---------- shows ---------- */
.wrap{max-width:1020px; margin:0 auto; padding:0 16px 140px}
.shows{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:26px 0 8px}
.show{
  appearance:none; cursor:pointer; text-align:left;
  background:var(--surface); color:var(--text);
  border:2px solid var(--line); border-radius:var(--radius);
  padding:12px 20px 12px 16px; min-width:220px;
  font:inherit; position:relative;
}
.show:hover{border-color:var(--seat-free-line)}
.show[aria-pressed="true"]{border-color:var(--red); box-shadow:inset 0 0 0 1px var(--red)}
.show .d{font-weight:700; font-size:18px}
.show .t{color:var(--muted); font-size:15px}
.show .free{font-size:14px; color:var(--muted); margin-top:3px}
.show[aria-pressed="true"] .free{color:var(--red)}

/* ---------- stage + plan ---------- */
.planbox{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow);
  padding:22px 10px 18px; margin-top:18px;
}
.scroller{overflow-x:auto; padding-bottom:6px}
.inner{min-width:700px; padding:0 14px}
.podium{
  margin:0 auto 26px; width:62%; max-width:460px;
  background:linear-gradient(var(--night-2),var(--night));
  color:var(--paper); text-align:center;
  padding:9px 0 11px; font-weight:600; letter-spacing:.06em; font-size:14px;
  border-radius:0 0 60px 60px/0 0 26px 26px;
}
.rij{display:flex; align-items:center; justify-content:center; gap:4px; margin-bottom:5px}
.rijlabel{
  width:26px; flex:0 0 26px; text-align:center; color:var(--muted);
  font-size:13px; font-weight:600;
}
.vak{display:flex; gap:3px}
.gang{width:26px; flex:0 0 26px}
.seat{
  width:21px;height:21px; padding:0; cursor:pointer;
  border:1px solid var(--seat-free-line); background:var(--seat-free);
  border-radius:6px 6px 2px 2px; font:inherit; font-size:0;
  transition:transform .08s ease;
}
.seat:hover:not(:disabled){transform:translateY(-2px)}
.seat.sel{background:var(--seat-sel); border-color:var(--red-dark)}
.seat.opt{background:var(--seat-opt); border-color:#b87d21; cursor:not-allowed}
.seat.paid{background:var(--seat-paid); border-color:var(--seat-paid); cursor:not-allowed}
.seat.block{background:var(--seat-block); border-color:var(--seat-block); border-style:dashed; cursor:not-allowed}
.seat.admin-pick{cursor:pointer}
.doorgang{
  display:flex; align-items:center; gap:12px; margin:18px auto 16px; max-width:620px;
  color:var(--muted); font-size:13px;
}
.doorgang::before,.doorgang::after{content:""; flex:1; height:1px; background:var(--line)}
/* geschrankte rijen: een halve stoel opschuiven */
.rij.verschoven .vak{margin-left:12px}

.legenda{
  display:flex; flex-wrap:wrap; gap:8px 22px; justify-content:center;
  margin:22px 0 0; padding:16px 10px 0; border-top:1px solid var(--line);
  font-size:15px; color:var(--muted);
}
.legenda span{display:flex; align-items:center; gap:8px}
.key{width:17px;height:17px;border-radius:5px 5px 2px 2px;border:1px solid var(--seat-free-line);background:var(--seat-free); flex:0 0 17px}
.key.opt{background:var(--seat-opt);border-color:#b87d21}
.key.paid{background:var(--seat-paid);border-color:var(--seat-paid)}
.key.sel{background:var(--seat-sel);border-color:var(--red-dark)}
.key.block{background:var(--seat-block);border-color:var(--seat-block);border-style:dashed}

/* ---------- ticket stub ---------- */
.stub{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  background:var(--night); color:var(--paper);
  border-top:4px dashed var(--gold);
  transform:translateY(105%); transition:transform .18s ease;
}
.stub.show{transform:none}
.stub .in{
  max-width:1020px; margin:0 auto; padding:13px 16px;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
.stub .sum{flex:1 1 260px; min-width:200px}
.stub .plaatsen{font-weight:700; font-size:17px}
.stub .detail{color:#b9c4c9; font-size:15px}
.btn{
  appearance:none; font:inherit; font-weight:700; cursor:pointer;
  border:none; border-radius:8px; padding:11px 20px;
  background:var(--red); color:#fff;
}
.btn:hover{background:var(--red-dark)}
.btn.ghost{background:transparent; color:var(--paper); border:1px solid #4a5b66}
.btn.ghost:hover{background:#22333f}
.btn.small{padding:6px 12px; font-size:15px; border-radius:6px}
.btn.neutral{background:var(--paper-2); color:var(--ink); border:1px solid var(--line)}
.btn.neutral:hover{background:var(--line)}
.btn.go{background:var(--green)}
.btn.go:hover{background:#336545}
.btn:disabled{opacity:.5; cursor:default}

/* ---------- dialog ---------- */
.overlay{
  position:fixed; inset:0; z-index:60; background:rgba(22,36,46,.72);
  display:none; align-items:flex-start; justify-content:center;
  padding:24px 14px; overflow-y:auto;
}
.overlay.open{display:flex}
.card{
  background:var(--surface); color:var(--text);
  width:100%; max-width:560px; border-radius:14px;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.6);
  padding:26px;
}
.card h2{font-family:"Alfa Slab One",Georgia,serif; font-weight:400; font-size:27px; margin:0 0 4px; line-height:1.15}
.card .sub{color:var(--muted); margin:0 0 20px}
label{display:block; margin:0 0 14px; font-weight:600; font-size:15px}
label .hint{display:block; font-weight:400; color:var(--muted); font-size:14px; margin-top:1px}
input[type=text],input[type=email],input[type=tel],select,textarea{
  width:100%; margin-top:5px; font:inherit; color:var(--text);
  background:var(--bg); border:1px solid var(--line); border-radius:8px;
  padding:9px 11px;
}
textarea{min-height:64px; resize:vertical}
.checkrow{display:flex; gap:10px; align-items:flex-start; font-weight:400; font-size:15px}
.checkrow input{margin-top:5px; flex:0 0 auto}
.row2{display:flex; gap:14px}
.row2>*{flex:1}
.actions{display:flex; gap:10px; justify-content:flex-end; margin-top:22px; flex-wrap:wrap}
.err{background:#fbe9e7; color:#8d2118; border:1px solid #f0bdb6; border-radius:8px; padding:10px 12px; margin-bottom:14px; font-size:15px}
:root[data-theme="dark"] .err,:root:not([data-theme="light"]) .err{background:#3a1f1c; color:#f3bdb6; border-color:#5d2f29}

/* ---------- bevestiging ---------- */
.ticket{
  border:2px dashed var(--line); border-radius:12px; padding:18px 20px;
  background:var(--paper-2); margin:6px 0 18px;
}
.ticket dl{display:grid; grid-template-columns:auto 1fr; gap:6px 16px; margin:0; font-size:16px}
.ticket dt{color:var(--muted)}
.ticket dd{margin:0; font-weight:600}
.ticket .big{font-size:20px}
.mono{font-variant-numeric:tabular-nums; letter-spacing:.01em}

/* ---------- beheer ---------- */
.adminbar{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:18px 0}
.stats{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px}
.stat{
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  padding:11px 15px; min-width:120px; flex:1 1 120px;
}
.stat b{display:block; font-size:23px; line-height:1.2}
.stat span{color:var(--muted); font-size:14px}
table{width:100%; border-collapse:collapse; font-size:15px; background:var(--surface)}
th,td{text-align:left; padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:top}
th{color:var(--muted); font-weight:600; font-size:14px}
.tag{display:inline-block; padding:1px 9px; border-radius:20px; font-size:13px; font-weight:700}
.tag.optie{background:#fdf0d8; color:#8a5a09}
.tag.betaald{background:#e2f0e6; color:#2d6042}
.tag.geannuleerd{background:var(--paper-2); color:var(--muted)}
.tag.geblokkeerd{background:#e8e3db; color:#5d5347}
.tag.laat{background:#fbe0dd; color:#9c2820}
:root[data-theme="dark"] .tag.optie,:root:not([data-theme="light"]) .tag.optie{background:#4a3a13;color:#f0cf8c}
:root[data-theme="dark"] .tag.betaald,:root:not([data-theme="light"]) .tag.betaald{background:#1e3b2a;color:#9ed3b2}
:root[data-theme="dark"] .tag.laat,:root:not([data-theme="light"]) .tag.laat{background:#4a201c;color:#f0aaa2}
.tblwrap{overflow-x:auto; border:1px solid var(--line); border-radius:10px}
.tbl-actions{display:flex; gap:6px; flex-wrap:wrap}

.banner{
  border-radius:10px; padding:11px 15px; margin:18px 0 0; font-size:15px;
  background:#fdf4e0; border:1px solid #edd9a8; color:#6e5312;
}
:root[data-theme="dark"] .banner,:root:not([data-theme="light"]) .banner{background:#3a3011;color:#efd79a;border-color:#5b4a19}
.footer{
  max-width:1020px; margin:34px auto 0; padding:20px 16px 34px;
  border-top:1px solid var(--line); color:var(--muted); font-size:15px;
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
}
.linkbtn{background:none;border:none;font:inherit;color:var(--muted);cursor:pointer;text-decoration:underline; padding:0}
.hide{display:none !important}
h3{font-size:19px; margin:26px 0 8px}
.note{color:var(--muted); font-size:15px}
ul.gaps{margin:6px 0 0; padding-left:20px}
ul.gaps li{margin-bottom:6px}
@media (prefers-reduced-motion:reduce){*{transition:none !important}}
@media (max-width:600px){
  body{font-size:16px}
  .wrap{padding-bottom:160px}
  .card{padding:20px}
  .row2{flex-direction:column; gap:0}
}