/* jamQpro v1: one stylesheet for player, organizer and TV views. */
:root{
  --bg:#EDEFF5; --surface:#FFFFFF; --surface2:#E4E7F1; --ink:#14172B; --muted:#585E78; --line:#D3D8E6;
  --accent:#F0A202; --accent-ink:#2A1B00; --live:#D92D44; --ok:#17835A; --err:#B3261E;
  --f-display:'Bricolage Grotesque','Arial Narrow',system-ui,sans-serif;
  --f-body:'DM Sans',system-ui,-apple-system,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#0B0E1B; --surface:#171B31; --surface2:#222748; --ink:#EDEFF9; --muted:#9BA2BF; --line:#2B3156;
  --accent:#F5B31A; --accent-ink:#1A1100; --live:#FF5C72; --ok:#3FCB98; --err:#FF8A80; color-scheme:dark}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.45;
  padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 40px max(16px,env(safe-area-inset-left,0px))}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
[hidden]{display:none!important}

.app{max-width:440px;margin:0 auto;display:flex;flex-direction:column;gap:16px;min-height:calc(100vh - 56px)}
.app.wide{max-width:1080px}
.brand{font-family:var(--f-display);font-weight:800;font-size:30px;letter-spacing:-.02em;line-height:1;text-decoration:none}
.brand b{color:var(--accent)}
.logo-link{display:inline-block;align-self:flex-start;line-height:0}
.logo{height:40px;width:auto;max-width:100%;display:block}
.logo-link.big{margin-top:12px}
.logo-link.big .logo{height:64px}
h1,h2{font-family:var(--f-display);margin:0;letter-spacing:-.02em;text-wrap:balance}
h1{font-size:30px;line-height:1.05;font-weight:800}
h2{font-size:23px;line-height:1.1;font-weight:800}
.lead{color:var(--muted);margin:0}
.small{font-size:13px}
.hint{font-size:13px;color:var(--muted)}
.error{background:color-mix(in srgb,var(--err) 12%,var(--surface));border:1px solid var(--err);border-radius:12px;padding:10px 14px;font-size:14px}
.ok{color:var(--ok);font-weight:700}
.back{align-self:flex-start;border:0;background:none;color:var(--muted);padding:0;font-size:14px;text-decoration:none}
.spacer{flex:1}

.btn{display:block;border:0;border-radius:14px;padding:15px 18px;font-weight:700;font-size:16px;background:var(--accent);color:var(--accent-ink);width:100%;text-align:center;text-decoration:none}
.btn.alt{background:var(--surface2);color:var(--ink)}
.btn.line{background:transparent;border:2px solid var(--line);color:var(--ink)}
.btn.sm{display:inline-block;width:auto;padding:8px 12px;font-size:13px;border-radius:9px}
.btn:disabled{opacity:.4;cursor:not-allowed}
.big2{display:grid;gap:12px;margin-top:auto}
.big2 .btn{padding:22px 18px;font-size:19px;font-family:var(--f-display);font-weight:800}

label{font-size:13px;font-weight:700;color:var(--muted);display:block;margin-bottom:5px;letter-spacing:.02em}
input[type=text],input[type=email],input[type=number],textarea{width:100%;border:2px solid var(--line);background:var(--surface);color:var(--ink);border-radius:12px;padding:13px 14px;font-size:16px}
textarea{resize:none;min-height:84px}
.row{display:grid;grid-template-columns:minmax(0,1fr) 92px;gap:10px}
.code{font-family:var(--f-mono);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.sect{display:grid;gap:8px}
.sect .t{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:700}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:18px;display:grid;gap:12px}
.panel h2{font-size:20px}
.stack{display:grid;gap:20px}

.opt{display:block;width:100%;text-align:left;border:2px solid var(--line);background:var(--surface);border-radius:16px;padding:16px;margin-bottom:10px}
.opt b{display:block;font-family:var(--f-display);font-size:19px}
.opt span{color:var(--muted);font-size:14px}
.opt[aria-pressed="true"]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,var(--surface))}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:2px solid var(--line);background:var(--surface);border-radius:999px;padding:9px 15px;font-weight:700}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.need{display:flex;align-items:center;justify-content:space-between;gap:10px;border:2px solid var(--line);border-radius:14px;padding:8px 8px 8px 14px;background:var(--surface)}
.need.out{opacity:.5}
.need.out b{text-decoration:line-through}
.step{display:flex;align-items:center;gap:6px}
.step button{width:40px;height:40px;border-radius:10px;border:0;background:var(--surface2);font-weight:800;font-size:18px}
.step button:disabled{opacity:.35}
.step output{min-width:22px;text-align:center;font-family:var(--f-mono);font-weight:700}
.sum{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px;font-size:14px}
.sum.live{border-color:var(--live)}
.sum.next{border-color:var(--accent)}

.pill{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:3px 9px;background:var(--surface2);color:var(--muted)}
.pill.live{background:var(--live);color:#fff}
.pill.live::before{content:"";width:7px;height:7px;border-radius:50%;background:#fff;animation:blink 1.4s infinite}
.pill.next{background:var(--accent);color:var(--accent-ink)}
.pill.done{background:transparent;border:1px solid var(--line)}
@keyframes blink{50%{opacity:.25}}
@media(prefers-reduced-motion:reduce){.pill.live::before{animation:none}}

.q{display:grid;gap:8px}
.card{border:1px solid var(--line);background:var(--surface);border-radius:14px;padding:11px 13px;display:grid;gap:5px;min-width:0}
.card.me{border:2px solid var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--surface))}
.card.pinned{border-style:dashed;background:var(--surface2)}
.card .h{display:flex;align-items:center;gap:8px;justify-content:space-between;flex-wrap:wrap}
.card .n{font-family:var(--f-display);font-weight:800;font-size:18px}
.card .m{font-size:13.5px;color:var(--muted);overflow-wrap:anywhere}
.card .m b{color:var(--ink)}
.tag{font-size:11px;font-weight:700;border-radius:6px;padding:2px 7px;background:var(--surface2);letter-spacing:.03em}
.act{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.act form{margin:0}
.status{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.bar{display:flex;gap:8px;flex-wrap:wrap}
.bar form{margin:0}

.board{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:20px;align-items:start}
@media(max-width:860px){.board{grid-template-columns:minmax(0,1fr)}}
.link{display:grid;gap:3px;font-size:13px}
.link code{font-family:var(--f-mono);font-size:12.5px;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:7px 9px;overflow-wrap:anywhere}
.link .l{font-weight:700;color:var(--muted);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.mail{display:flex;gap:8px}
.mail input{padding:9px 12px;font-size:14px}
.qr{background:#fff;border-radius:12px;padding:6px;width:160px;height:160px}
.qr img{width:100%;height:100%;display:block}
.inline-form{display:flex;gap:8px;flex-wrap:wrap}
.inline-form input{flex:1 1 120px;padding:9px 12px;font-size:14px}

/* TV */
body.tvpage{padding:0;background:#0E1120}
.tv{container-type:inline-size;height:100vh;width:100vw}
.tv-inner{height:100%;background:#0E1120;color:#F1F2FA;padding:3cqw;display:grid;grid-template-columns:1.35fr 1fr;gap:3cqw;overflow:hidden}
.tv .kick{font-family:var(--f-mono);font-size:1.5cqw;letter-spacing:.14em;text-transform:uppercase;color:#F5B31A}
.tv .now{font-family:var(--f-display);font-weight:800;font-size:7cqw;line-height:.95;letter-spacing:-.03em;margin:1cqw 0 1.2cqw}
.tv .det{font-size:2.1cqw;color:#BFC4DD}
.tv .det b{color:#fff}
.tv .upnext{margin-top:2.4cqw;padding-top:1.6cqw;border-top:1px solid #2B3156}
.tv .upnext .nm{font-family:var(--f-display);font-weight:800;font-size:3.6cqw}
.tv .col{display:grid;gap:1.4cqw;align-content:start;grid-template-rows:auto 1fr auto}
.tv ol{list-style:none;margin:0;padding:0;display:grid;gap:.9cqw;align-content:start}
.tv li{display:flex;gap:1.4cqw;align-items:baseline;font-size:2.1cqw;border-bottom:1px solid #222748;padding-bottom:.8cqw}
.tv li i{font-style:normal;font-family:var(--f-mono);color:#F5B31A;min-width:2.6cqw}
.tv li em{font-style:normal;color:#9BA2BF;font-size:1.6cqw;margin-left:auto;white-space:nowrap}
.tv .join{display:flex;gap:1.6cqw;align-items:center;background:#171B31;border-radius:1.2cqw;padding:1.4cqw}
.tv .join img{width:11cqw;height:11cqw;flex:none;background:#fff;border-radius:.6cqw;padding:.5cqw}
.tv .join b{display:block;font-family:var(--f-mono);font-size:2.6cqw;letter-spacing:.05em}
.tv .join span{font-size:1.5cqw;color:#9BA2BF}
.tv .empty{color:#9BA2BF}

/* Poster */
.poster{max-width:720px;margin:0 auto;text-align:center;display:grid;gap:18px;justify-items:center}
.poster img{width:min(70vw,420px);background:#fff;padding:12px;border-radius:16px}
.poster .big{font-family:var(--f-display);font-weight:800;font-size:clamp(36px,9vw,72px);line-height:1}
.poster .code{font-size:28px}
@media print{body{background:#fff;color:#000}.noprint{display:none}}