/* Donker by design: een fel scherm in een donkere zaal verblindt. */
:root{
  --ink:#120F33; --panel:#1C1949; --raise:#27235E; --line:#36317A;
  --text:#F4F1FF; --muted:#A9A3D6; --amber:#FFB547; --pink:#FF5C8A; --ok:#5BE3A8;
  --display:'Unbounded', 'Arial Black', system-ui, sans-serif;
  --body:'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color-scheme: dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;min-height:100%;background:var(--ink);color:var(--text)}
body{font:17px/1.45 var(--body);-webkit-text-size-adjust:100%;
  padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}
.wrap{max-width:640px;margin:0 auto;padding:22px 18px 56px}
.brand{display:block;height:30px;width:auto;margin:4px 0 22px}
h1{font-family:var(--display);font-weight:800;font-size:clamp(30px,8.5vw,46px);line-height:1.04;margin:10px 0 8px;letter-spacing:-.015em;overflow-wrap:anywhere}
h2{font-family:var(--display);font-weight:600;font-size:17px;margin:34px 0 10px}
p{margin:0}
.muted{color:var(--muted)}
.status{display:inline-flex;align-items:center;gap:8px;font-size:15px;color:var(--muted)}
.dot{width:9px;height:9px;border-radius:50%;background:var(--ok);box-shadow:0 0 10px var(--ok)}
.dot.off{background:#6C6890;box-shadow:none}
.note{background:var(--raise);border-left:3px solid var(--amber);padding:11px 14px;border-radius:0 10px 10px 0;margin-top:16px}

input{font:inherit;color:var(--text);background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:13px 14px;width:100%;min-height:50px}
input::placeholder{color:#7D77AE}
input:focus{border-color:var(--amber);outline:none}
label{display:block;font-size:14px;color:var(--muted);margin:12px 0 6px}
button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:disabled{opacity:.45;cursor:not-allowed}
.btn{background:var(--amber);color:#241700;font-weight:700;border:0;border-radius:12px;padding:13px 20px;min-height:50px}
.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--line)}
.btn.ok{background:var(--ok);color:#03281A}
.btn.danger{background:transparent;color:var(--pink);border:1px solid var(--pink)}
.link{background:none;border:0;color:var(--amber);padding:8px 0;text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
.row{display:flex;gap:10px;align-items:center}
.grow{flex:1;min-width:0}

/* De wachtrij: elke plek heeft een LED-meter zoals op een mengpaneel */
.queue{list-style:none;margin:0;padding:0}
.item{display:grid;grid-template-columns:30px 1fr auto;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.rank{font-family:var(--display);font-weight:800;font-size:17px;color:var(--muted);text-align:right;align-self:start;padding-top:2px}
.item:first-child .rank{color:var(--amber)}
.title{font-weight:700;overflow-wrap:anywhere}
.artist{color:var(--muted);font-size:15px;overflow-wrap:anywhere}
.meter{height:9px;margin-top:9px;border-radius:2px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 7px,transparent 7px 9px)}
.meter i{display:block;height:100%;width:calc(var(--w,0) * 1%);transition:width .45s ease;
  background:repeating-linear-gradient(90deg,transparent 0 7px,var(--ink) 7px 9px),
             linear-gradient(90deg,var(--amber) 0 62%,var(--pink) 88%);
  background-size:auto, calc(10000% / max(var(--w,1),1)) 100%}
.vote{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-width:58px;min-height:58px;
  border-radius:14px;border:1px solid var(--line);background:var(--panel);color:var(--text);font-weight:700;font-size:17px}
.vote svg{width:18px;height:18px}
.vote.on{background:var(--pink);border-color:var(--pink);color:#2B0313}
.empty{padding:18px 0;color:var(--muted)}

.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);opacity:0;
  background:var(--text);color:var(--ink);font-weight:700;padding:12px 18px;border-radius:12px;max-width:min(92vw,520px);
  transition:opacity .2s, transform .2s;pointer-events:none;z-index:50;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.err{background:var(--pink);color:#2B0313}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}

.pt{margin:-16px 0 36px;display:flex;justify-content:center}
.pt img{height:22px;width:auto;opacity:.85}