:root{
  --bg:#0c0e13; --panel:#171b24; --panel2:#1d2230; --border:#2a313f;
  --text:#e8ecf3; --muted:#93a0b4; --faint:#5b6678;
  --green:#22c55e; --green-d:#15803d; --amber:#f5a524; --red:#ef4444;
  --shadow:0 8px 28px rgba(0,0,0,.45); --r:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
/* slim dark scrollbars everywhere — the stock light Windows bar fights the dark UI */
*{scrollbar-width:thin;scrollbar-color:#2a313f transparent}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#2a313f;border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:#3a4560}
::-webkit-scrollbar-corner{background:transparent}
body{
  background:radial-gradient(1200px 700px at 72% -12%, #16202c 0%, var(--bg) 55%) fixed;
  color:var(--text);
  font-family:'Vazirmatn','Segoe UI',Tahoma,system-ui,sans-serif;
  min-height:100vh;-webkit-font-smoothing:antialiased;
}
a{color:var(--green);text-decoration:none}
.wrap{max-width:1240px;margin:0 auto;padding:24px}
.muted{color:var(--muted)}.center{text-align:center}.rtl{direction:rtl;text-align:right}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.spacer{flex:1}

/* topbar */
.topbar{display:flex;justify-content:space-between;align-items:center;padding:13px 22px;
  border-bottom:1px solid var(--border);background:rgba(18,21,28,.72);backdrop-filter:blur(8px);
  position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.5px;color:var(--text)}
.brand .dot{width:12px;height:12px;border-radius:50%;background:var(--green);box-shadow:0 0 14px var(--green)}
.tag{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:700;background:#22304a;color:#bcd}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
  border:1px solid var(--border);background:var(--panel2);color:var(--text);
  padding:11px 16px;border-radius:10px;font:inherit;font-size:15px;font-weight:600;transition:.15s;user-select:none}
.btn:hover{border-color:#3a4560;background:#222a3a}
.btn.primary{background:linear-gradient(180deg,#26d366,#16a34a);border-color:#16a34a;color:#04210f}
.btn.warn{background:linear-gradient(180deg,#f8b13c,#e08c12);border-color:#e08c12;color:#2a1800}
.btn.danger{background:linear-gradient(180deg,#f76b6b,#dc2626);border-color:#dc2626;color:#fff}
.btn.ghost{background:transparent}
.btn.on{outline:2px solid var(--green);outline-offset:1px;background:#16271b}
.btn[disabled]{opacity:.4;cursor:not-allowed}
.btn.sm{padding:7px 11px;font-size:13px}

/* panels / forms */
.panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow)}
.pad{padding:18px}
input,select,textarea{font:inherit;color:var(--text);background:#0f131b;border:1px solid var(--border);
  border-radius:10px;padding:11px 13px;width:100%}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--green)}
textarea{resize:vertical;min-height:84px;line-height:1.6}
label{display:block;margin:0 0 6px;font-size:13px;color:var(--muted);font-weight:600}
.field{margin-bottom:14px}
table{width:100%;border-collapse:collapse}
th,td{padding:10px 12px;border-bottom:1px solid var(--border);text-align:left;font-size:14px;vertical-align:middle}
th{color:var(--muted);font-weight:600}

/* login + hub */
.login-card{max-width:380px;margin:9vh auto;padding:30px}
.hubgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;margin-top:22px}
.hubcard{padding:22px;display:block;border:1px solid var(--border);border-radius:14px;background:var(--panel);transition:.15s}
.hubcard:hover{border-color:var(--green-d);transform:translateY(-2px)}
.hubcard h3{margin:0 0 6px;font-size:18px}
.hubcard p{margin:0;color:var(--muted);font-size:14px}
.notice{background:#101725;border:1px solid var(--border);border-left:4px solid var(--amber);
  border-radius:10px;padding:12px 14px;color:#dfe6f0;font-size:14px}
.err{background:#241316;border:1px solid #5b2330;border-radius:10px;padding:11px 14px;color:#ffb4b4;font-size:14px;margin-bottom:14px}

/* ===== question board (display / presenter / console preview) ===== */
.board{direction:rtl;text-align:center;padding:26px}
.q-label{display:inline-block;color:var(--green);font-weight:800;letter-spacing:1px;border:1px solid var(--green-d);
  border-radius:999px;padding:6px 18px;margin-bottom:18px;font-size:clamp(14px,2vw,20px)}
.q-text{font-size:clamp(20px,3.4vw,40px);font-weight:700;line-height:1.5;margin:0 auto 28px;max-width:1040px}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:1040px;margin:0 auto}
.opt{position:relative;display:flex;align-items:center;gap:14px;background:var(--panel2);border:2px solid var(--border);
  border-radius:14px;padding:18px 20px;font-size:clamp(16px,2.1vw,26px);font-weight:600;min-height:76px;
  transition:.2s;overflow:hidden}
.opt .badge{flex:0 0 auto;width:44px;height:44px;display:grid;place-items:center;border-radius:10px;
  background:#0e1320;color:var(--green);font-weight:800;border:1px solid var(--border)}
.opt .otext{flex:1;text-align:right}
.opt.elim{opacity:.26;filter:grayscale(.6)}
.opt.selected{border-color:var(--amber);box-shadow:0 0 0 3px rgba(245,165,36,.25) inset}
.opt.selected .badge{background:var(--amber);color:#2a1800}
.opt.correct{border-color:var(--green);background:linear-gradient(180deg,rgba(34,197,94,.22),rgba(34,197,94,.06))}
.opt.correct .badge{background:var(--green);color:#04210f}
.opt.wrong{border-color:var(--red);background:linear-gradient(180deg,rgba(239,68,68,.18),rgba(239,68,68,.05))}
.opt.wrong .badge{background:var(--red);color:#fff}
.opt.hint{border-color:var(--green-d);border-style:dashed}
.opt.hint .badge{color:var(--green)}
.barwrap{position:absolute;inset:auto 0 0 0;height:8px;background:#0c111b}
.bar{height:100%;width:0;background:linear-gradient(90deg,#16a34a,#22d36b);transition:width .5s}
.opt .pct{position:absolute;left:12px;bottom:11px;font-size:13px;color:var(--muted);font-weight:700}
.q-note{margin:24px auto 0;max-width:920px;background:#101725;border:1px dashed #2c3a2f;border-right:4px solid var(--green);
  border-radius:10px;padding:16px 18px;color:#cfe6d6;font-size:clamp(14px,1.8vw,20px);line-height:1.7;text-align:right}
.tgv-blank{min-height:48vh;display:grid;place-items:center;color:var(--faint);font-size:24px}
.tgv-blank-img{display:block;width:100%;height:auto;border-radius:10px}

/* fullscreen stage (display) */
.stagebody{overflow:hidden}
.stage{min-height:100vh;display:flex;flex-direction:column;justify-content:center}
.qlist{max-height:64vh;overflow:auto;padding:8px}
/* dense builder row (bank + rundown). RTL container → metadata pills sit on the right next to where the
   Kurdish text begins, so short questions no longer leave a gap in the middle. */
.qrow{display:flex;gap:8px;align-items:center;padding:8px 11px;border-radius:9px;cursor:pointer;border:1px solid transparent;direction:rtl}
.qrow:hover{background:#1a2030;border-color:var(--border)}
.qrow.active,.qrow.sel{background:#2a2310;border-color:var(--amber)}   /* selection = orange */
.qrow .qn{flex:0 0 auto;min-width:34px;height:30px;display:grid;place-items:center;background:#0e1320;
  border:1px solid var(--border);border-radius:7px;color:#aeb9cc;font-weight:800;font-size:12.5px;font-variant-numeric:tabular-nums}
.qrow .qt{flex:1;min-width:0;direction:rtl;text-align:right;font-size:14px;line-height:1.5;color:#d6deea;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* level pill — same difficulty colour-coding in bank + rundown (1 neutral · 2 amber · 3 red) */
.lvlchip{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:24px;padding:0 8px;border-radius:7px;
  border:1px solid var(--border);background:#0e1320;color:var(--muted);font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;vertical-align:middle}
/* difficulty heat across the 10 levels: 1-4 cool/easy · 5-7 amber · 8-10 red · X gold(spare) */
.lvlchip.lvl1,.lvlchip.lvl2,.lvlchip.lvl3,.lvlchip.lvl4{color:#aab3c2;border-color:#3a4252}
.lvlchip.lvl5,.lvlchip.lvl6,.lvlchip.lvl7{color:#ecbf73;border-color:#6e561f}
.lvlchip.lvl8,.lvlchip.lvl9,.lvlchip.lvl10{color:#ec9090;border-color:#7d3333}
.lvlchip.lvlX{color:#e8c46a;border-color:#7a5a18;background:#2a2310}
/* category manager table — inline rename/delete forms per row */
.cat-table td{vertical-align:middle}
.cat-table form{margin:0}
.cat-table input{min-height:38px}
/* modal / popup */
.modal-back{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(4,6,10,.62);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.modal-back[hidden]{display:none}
.modal{width:min(680px,96vw);max-height:88vh;display:flex;flex-direction:column;overflow:hidden;background:var(--panel);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow)}
.modal-hd{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--border)}
.modal-x{flex:0 0 auto;width:34px;height:34px;border:0;border-radius:8px;background:transparent;color:var(--muted);font-size:17px;cursor:pointer}
.modal-x:hover{background:#ffffff14;color:var(--text)}
.modal-body{padding:16px 18px;overflow:auto}
/* category chip */
.qcat{display:inline-flex;align-items:center;vertical-align:middle;max-width:120px;height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-size:12px;font-weight:700;padding:0 11px;border-radius:999px;background:#16271b;color:#a7d2b5;border:1px solid #1f3a28;direction:rtl}
.qrow>.qcat{flex:0 0 auto}

@media(max-width:760px){.opts{grid-template-columns:1fr}}

/* ===== generic mobile polish: stack form rows, data tables -> cards ===== */
.qcell{max-width:560px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:760px){
  .wrap{padding:16px}
  .topbar{padding:12px 14px}
  .row>.field{flex:1 1 100%}
  .qcell{max-width:none;white-space:normal;overflow:visible}
  table.mtable thead{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0}
  table.mtable,table.mtable tbody,table.mtable tr,table.mtable td{display:block;width:100%}
  table.mtable tr{background:#0f131b;border:1px solid var(--border);border-radius:12px;padding:4px 14px;margin:0 0 12px}
  table.mtable td{border:none;border-bottom:1px solid var(--border);padding:10px 0}
  table.mtable td:last-child{border-bottom:none}
  table.mtable td[data-label]::before{content:attr(data-label);display:block;color:var(--muted);
    font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;margin-bottom:4px}
  table.mtable td[data-label=""]::before{display:none}
}

/* ===== control room monitors: PVW / PGM panes ===== */
.c-pvw{grid-area:pvw}
.c-pgm{grid-area:pgm}
.c-pvw{box-shadow:inset 0 0 0 1px rgba(245,165,36,.22),var(--shadow)}
.c-pgm{box-shadow:inset 0 0 0 1px rgba(239,68,68,.22),var(--shadow)}
.pane-hd{font-weight:800;letter-spacing:1.5px;font-size:13px;padding:10px 14px;border-bottom:1px solid var(--border)}
.pane-hd.pvw{color:var(--amber)}
.pane-hd.pgm{color:var(--red)}
.c-pvw .opts,.c-pgm .opts{grid-template-columns:1fr}   /* stack the 4 answers in both monitors */
.onair-btn{display:block;width:calc(100% - 24px);margin:12px;min-height:56px;font-size:20px;font-weight:800;
  letter-spacing:1px;color:#04210f;background:linear-gradient(180deg,#26d366,#16a34a);border:1px solid #16a34a;
  border-radius:12px;cursor:pointer;transition:.15s}
.onair-btn:hover{filter:brightness(1.06)}
.onair-btn[disabled]{opacity:.35;cursor:not-allowed;filter:grayscale(.55)}

/* producer rundown page */
.p-bank .qlist,.p-rundown .steps{flex:1 1 0;min-height:0;max-height:none}   /* fill the locked panel height; scroll inside */
.p-bank .qlist{display:flex;flex-direction:column;gap:3px}
.p-rundown .steps{overflow:auto;padding:8px;display:flex;flex-direction:column;gap:9px}
.step-grp{display:flex;flex-direction:column;gap:4px}
.step-grp.multi{padding:5px 7px 7px;border:1px solid var(--border);border-radius:10px;background:rgba(255,255,255,.018)}   /* bracket the 2-option steps */
.step-h{display:flex;gap:7px;align-items:baseline;justify-content:flex-start;direction:rtl;font-size:11px;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.5px;padding:2px 4px}
.step-h .step-no{color:#c4cfe0}
.rslot{background:transparent;border:1px dashed var(--border)}
.rslot.filled{background:#10261a;border:1px solid var(--green-d)}
/* subtle remove button — faint by default, red only on hover (no loud red block) */
.rslot .rslot-x{flex:0 0 auto;width:26px;height:26px;padding:0;border:0;background:transparent;color:var(--muted);border-radius:7px;cursor:pointer;opacity:.5;transition:background .12s,color .12s,opacity .12s}
.rslot .rslot-x:not([hidden]){display:inline-flex;align-items:center;justify-content:center}
.rslot .rslot-x svg{width:15px;height:15px}
.rslot:hover .rslot-x{opacity:.8}
.rslot .rslot-x:hover{opacity:1;background:rgba(214,72,72,.16);color:#ff8f8f}
.rslot .qt.muted{color:var(--faint);font-style:italic}
/* producer: bank | ▶ | rundown */
/* viewport-locked page: body doesn't scroll, the grid fills whatever height remains after the bars.
   DYNAMIC (flex) — no hard-coded calc(), so the participant bar / notices can be any height. */
body.fitpage{height:100dvh;overflow:hidden;display:flex;flex-direction:column}
body.fitpage .wrap{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;width:100%}
@media(max-width:760px){body.fitpage{height:auto;overflow:auto;display:block}}   /* stacked mobile: normal page scroll */
.prod3{display:grid;gap:12px;align-items:stretch;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);flex:1 1 auto;min-height:0}
.p-bank,.p-rundown{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.prod-mid{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px}
/* fill button (» push selected question into the slot) — clean elevated circle */
.prod-mid .btn{width:52px;height:52px;min-width:0;min-height:0;padding:0;border-radius:50%;display:grid;place-items:center;
  box-shadow:0 4px 14px rgba(40,170,99,.32);transition:transform .12s,box-shadow .12s,filter .12s}
.prod-mid .btn svg{width:23px;height:23px}
.prod-mid .btn:hover{transform:translateY(-1px) scale(1.06);box-shadow:0 8px 22px rgba(40,170,99,.45);filter:brightness(1.08)}
.prod-mid .btn:active{transform:scale(.95)}
.prod-mid .btn:disabled{box-shadow:none;transform:none;filter:none}
.qrow[draggable=true]{cursor:grab}
/* selecting a question (bank) or a slot (rundown) = ORANGE; green stays for FILLED slots */
.qrow.sel{background:#2a2310;border-color:var(--amber);outline:2px solid var(--amber);outline-offset:-1px}
.rslot.active{background:#2a2310;border-color:var(--amber);outline:2px solid var(--amber);outline-offset:-2px}
.rslot.dragover{border-color:var(--amber);background:#2a2310;outline:2px dashed var(--amber);outline-offset:-2px}
@media(max-width:760px){
  .prod3{grid-template-columns:minmax(0,1fr);height:auto}   /* stacked on mobile — page scrolls normally */
  .prod-mid{flex-direction:row}
}
/* in THIS participant's rundown: dim harder + the SUBJECT balloon turns yellow so the eye catches it */
.qrow.queued{opacity:.45}
.qrow.queued .qcat{background:#2a2310;border-color:#7a5a18;color:#ffcf7a}
/* already in ANOTHER participant's rundown — darker so the producer notices (still draggable — reuse is allowed) */
.qrow.other-q{opacity:.5;background:#080a0e;border-color:#20262f}
.qrow.other-q .qt,.qrow.other-q .qcat{color:var(--muted)}
.qrow.other-q.sel{opacity:1}

/* ===== control room v2: preview | control | program, queue along the bottom ===== */
.console4{display:grid;gap:16px;align-items:start;
  grid-template-columns:185px minmax(0,1fr) 250px minmax(0,1fr);   /* گاڤ column +25% (148→185) */
  grid-template-areas:"levels pvw ctrl pgm" "levels badges badges badges"}
.c-ctrl{grid-area:ctrl}
.c-badges{grid-area:badges;align-self:start}   /* size to content — don't stretch to the tall level column */
.c-levels{grid-area:levels}
.c-ctrl .pane-hd.ctrl{color:#9fb0d0}
/* minimal left level-nav: tap a level (steps 1-3 = 2 subject options) to preview its question */
.lvlnav{padding:8px;display:flex;flex-direction:column;gap:7px}
.lvlrow{display:flex;align-items:center;gap:5px;padding-bottom:7px;border-bottom:1px solid var(--border)}
.lvlrow:last-child{border-bottom:0;padding-bottom:0}
.lvlnum{flex:0 0 auto;width:18px;text-align:center;font-size:13px;font-weight:700;color:var(--green)}
.lvlbtn{flex:1 1 0;min-width:0;min-height:40px;padding:4px 6px;border:1px solid var(--border);border-radius:8px;background:#0f131b;color:#d6deea;font:inherit;font-size:12.5px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;direction:rtl}
.lvlbtn:disabled{opacity:.28;cursor:default}
.lvlbtn.pvw{border-color:#7a5a18;background:#2a2310;color:#ffcf7a}
.lvlbtn.onair{border-color:#7a2330;background:#2a1414;color:#ff9b9b}
.lvlbtn.used:not(.onair):not(.pvw){opacity:.5}
/* spare "X" row at the bottom of the level-nav (change-question lifeline) */
.lvlrow.spare{border-top:1px dashed var(--border);border-bottom:0;padding-top:9px;margin-top:2px}
.lvlrow.spare .lvlbtn{pointer-events:none;cursor:default}   /* view-only: the director can't select the spare directly */
.ctrl-rows{padding:12px;display:flex;flex-direction:column;gap:9px}
.crow{display:flex;gap:8px;flex-wrap:wrap;align-items:stretch}
.crow>.btn{flex:1 1 0;min-height:46px;white-space:nowrap}
.crow .crow-lbl{flex:1 0 100%;font-size:10px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-bottom:-5px}
/* "Reset" (amber key) — now stacked ON TOP of "Save used" in the Episode lifeline card */
.btn.reset-btn{width:100%;min-height:38px;background:transparent;border:1px solid var(--amber);color:var(--amber);font-weight:700;font-size:13px}
.btn.reset-btn:hover{background:rgba(230,170,40,.13)}
.crow .onair-btn{flex:2 1 0;min-height:46px;margin:0;width:auto;font-size:18px}
.btn.soon{opacity:.45;cursor:not-allowed}
.btn.fifty.staged{background:#3a2c10;border-color:var(--amber);color:#ffd98a}        /* picked, not yet shown */
.btn.fifty.on{background:#3a1416;border-color:var(--red);color:#ff9b9b;text-decoration:line-through} /* shown / live */
/* ===== lifeline controls: 3 uniform cards (header → inputs → action footer); footers bottom-align ===== */
.c-badges .lifeline-cols{display:grid;grid-template-columns:1fr 1.15fr 1fr .82fr}
.ll-card{display:flex;flex-direction:column;gap:8px;padding:9px 12px;min-width:0}
.ll-card + .ll-card{border-left:1px dashed var(--border)}
.ll-head{font-size:11px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:#cfdaec;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-badges .ll-head{display:none}   /* headers removed for compactness — the action buttons self-label */
.ll-body{flex:1 1 auto;display:flex;align-items:center;min-width:0}
.ll-body.ll-body-center{align-items:center;justify-content:center}
.ll-hint{font-size:12px;font-weight:600;text-align:center;color:var(--muted)}
.ll-hint[data-tone=ok]{color:#7fd6a0}
.ll-hint[data-tone=warn]{color:var(--amber)}
.ll-foot{display:flex;gap:6px;align-items:stretch}
.btn.ll-sec{flex:0 0 auto;min-width:42px;min-height:38px;padding:0 8px}
.btn.ll-go{flex:1 1 auto;min-height:38px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.btn.ll-go .bi{width:14px;height:14px;flex:0 0 auto}
.ll-foot.ep-foot{flex-direction:column;gap:6px}   /* Episode card: amber Reset stacked above Save used */
.ll-foot.ep-foot .btn{flex:0 0 auto;width:100%}
.ll-keys{display:flex;gap:6px;width:100%}
.ll-keys .btn.fifty{flex:1 1 0;min-width:0;min-height:38px}
.c-badges .aud-wheels{display:flex;gap:6px;width:100%}
.c-badges .aud-wheel{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px}
.c-badges .aud-wheel-lbl{font-size:10px;color:var(--muted);font-weight:700}
.c-badges select.aud-in{width:100%;min-width:0;text-align:center;text-align-last:center;background:#0f131b;border:1px solid var(--border);border-radius:7px;color:var(--text);font:inherit;font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;padding:6px 3px;cursor:pointer}
.c-badges select.aud-in option{font-weight:600}
@media(max-width:1000px){
  .c-badges .lifeline-cols{grid-template-columns:1fr}
  .ll-card + .ll-card{border-left:none;border-top:1px dashed var(--border)}
}
/* producer bank: ONE line = filter chips + subject dropdown; .used-tag is reused in the question-manager list */
.bank-filters{display:flex;gap:6px;margin-top:8px;align-items:stretch}
.fbtn{flex:0 0 auto;min-height:32px;padding:0 11px;border:1px solid var(--border);border-radius:8px;background:#0f131b;color:var(--muted);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;white-space:nowrap}
.fbtn:hover{border-color:var(--green-d);color:#d6deea}
.fbtn.on{background:#12351f;border-color:var(--green);color:#a8e6c0}
.subj-filter{flex:1 1 90px;min-width:0;width:auto;background:#0f131b;border:1px solid var(--border);border-radius:8px;color:var(--text);font:inherit;font-size:12.5px;font-weight:600;padding:0 8px;cursor:pointer}
.subj-filter:focus{outline:none;border-color:var(--green-d)}
/* per-participant rundowns: selector bars (producer + control room) */
.part-sel{background:#0f131b;border:1px solid var(--border);border-radius:8px;color:var(--text);font:inherit;font-size:13px;font-weight:700;padding:8px 10px;cursor:pointer;max-width:260px;min-width:150px}
.part-sel:focus{outline:none;border-color:var(--green-d)}
.part-sel:disabled{opacity:.5;cursor:default}
.part-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;padding:12px 18px}
.part-pick{display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 auto}
.part-lbl{font-weight:800;font-size:12px;letter-spacing:.3px;text-transform:uppercase;color:#cfdaec;white-space:nowrap}
.part-bar .part-sel{flex:1 1 auto;width:100%;max-width:560px;font-size:14px}   /* long names get the whole bar */
/* rundown header: participant name in amber; the NAME shrinks (ellipsis) so the balloons + Clear button never wrap */
.rd-title{display:flex;align-items:baseline;gap:6px;flex:0 1 auto;min-width:0;white-space:nowrap}
.rd-name{flex:0 1 auto;min-width:90px;overflow:hidden;text-overflow:ellipsis;color:#ffcf7a;direction:rtl}
/* 14 progress balloons (one per rundown slot, X last) — fill green as the slot is placed.
   Fixed 7×2 grid (گاڤ 1-3 doubled slots labelled 1:1 … 3:2) so the strip never crushes the title */
.rb-row{flex:0 0 auto;display:grid;grid-template-columns:repeat(7,1fr);gap:3px;justify-content:end;padding:0 2px}
.rb{min-width:26px;height:21px;padding:0 3px;display:grid;place-items:center;border-radius:6px;border:1px solid var(--border);background:#0e1320;color:var(--faint);font-size:10.5px;font-weight:800;font-variant-numeric:tabular-nums;transition:.15s;cursor:pointer}
.rb:hover{border-color:var(--green-d);color:#d6deea}
.rb.on{background:#10261a;border-color:var(--green-d);color:#7fd6a0}
/* clicking a balloon scrolls the rundown to its slot and SELECTS it (persistent orange .rslot.active) */
.p-rundown #clearq{white-space:nowrap;flex:0 0 auto}
/* active-participant selector — sits at the top of the گاڤ (level-nav) column */
.c-levels .c-partsel{padding:4px 8px 8px;border-bottom:1px solid var(--border)}
.c-levels .part-sel{width:100%;min-width:0;max-width:none;font-size:12.5px;font-weight:700;padding:7px 8px}
/* home device-link rows + QR popup */
.linkrow2{display:flex;gap:14px}   /* both token links on one compact line */
.linkrow2>.field{flex:1 1 0;min-width:0}
@media(max-width:900px){.linkrow2{flex-direction:column;gap:10px}}
.linkrow{display:flex;gap:8px;align-items:stretch}
.linkrow input{flex:1 1 auto;min-width:0}
.btn.qr-btn{flex:0 0 auto;min-width:46px;display:inline-grid;place-items:center;padding:0 10px}
.btn.qr-btn svg{width:20px;height:20px}
.qr-modal{max-width:360px}
#qr-box{display:inline-block;background:#fff;padding:14px;border-radius:14px;margin:4px auto 10px;line-height:0}
#qr-box svg{display:block;width:min(260px,62vw);height:auto}
.bank-note{margin-top:8px;font-size:12px;font-weight:600;color:var(--amber)}
.qrow.used-q{opacity:.6}
.qrow.used-q .qt{text-decoration:line-through;text-decoration-color:rgba(255,255,255,.28)}
.used-tag{flex:0 0 auto;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:#e0a0a0;background:#241417;border:1px solid #5a2a30;border-radius:6px;padding:2px 6px;white-space:nowrap}
/* producer spare ("X") slot badge stays NEUTRAL — amber/yellow is reserved for alerts, not defaults */
/* steps 1-3 = no lifelines: hide the coins on tablet/presenter; gray+disable the coins + 50:50/audience in the control room */
body.no-lifelines .badges-vis{display:none}
.ctrl-badges.ll-off .badges-img,
.c-badges.ll-off .ll-card:not(.ep-row){opacity:.4;pointer-events:none;filter:grayscale(1);transition:opacity .15s}   /* Episode card (Reset / Save used) is NOT a lifeline — stays live on levels 1-3 */

/* lifeline badges IMAGE (3 coins) + red-X "used" overlay — shown on console, presenter & participant */
.badges-vis{display:flex;justify-content:center;padding:12px 14px 2px}
.badges-img{position:relative;display:inline-block;width:100%;max-width:360px;line-height:0;vertical-align:top}
.badges-img img{width:100%;height:auto;display:block;-webkit-user-drag:none}
.badges-img .bx{position:absolute;top:52.5%;width:23%;aspect-ratio:1;
  transform:translate(-50%,-50%) scale(.45);opacity:0;pointer-events:none;
  transition:transform .25s cubic-bezier(.2,1.5,.4,1),opacity .2s}
.badges-img .bx[data-badge="aud"]{left:20.7%}
.badges-img .bx[data-badge="fifty"]{left:51.9%}
.badges-img .bx[data-badge="chg"]{left:80.7%}
.badges-img .bx.used{opacity:1;transform:translate(-50%,-50%) scale(1)}
.badges-img .bx svg{width:100%;height:100%;display:block;overflow:visible}
.badges-img .bx svg line{stroke:#ff2233;stroke-width:12;stroke-linecap:round;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.75))}
.bw-half{max-width:min(310px,45vw)}   /* tablet + presenter coin size */
/* tablet pages: fill the viewport and pin the (enlarged) lifeline coins to the bottom */
body.qbg .wrap{min-height:100dvh;display:flex;flex-direction:column}
body.qbg .badges-vis{margin-bottom:2.5vh}
/* glass frame around the coins — same frosted style + full width + same gap as the question board (.panel) */
body.qbg.hasq .badges-vis{margin-top:14px;box-sizing:border-box;padding:18px;
  border:1px solid var(--border);border-radius:var(--r);background:rgba(17,21,30,.6);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:var(--shadow)}
/* interactive coin hotspots — control room: click a coin to toggle its used (red-X) state */
.badges-img .bhit{position:absolute;top:52.5%;width:23%;aspect-ratio:1;transform:translate(-50%,-50%);
  background:transparent;border:none;border-radius:50%;cursor:pointer;padding:0}
.badges-img .bhit[data-badge="aud"]{left:20.7%}
.badges-img .bhit[data-badge="fifty"]{left:51.9%}
.badges-img .bhit[data-badge="chg"]{left:80.7%}
.badges-img.badges-click .bhit:hover{box-shadow:0 0 0 3px rgba(34,197,94,.45)}
.c-ctrl .ctrl-badges{padding:8px 14px 12px;border-top:1px solid var(--border);display:flex;flex-direction:column;align-items:center;gap:4px}
.c-ctrl .ctrl-level{font-size:15px;color:#ffcf7a;font-weight:700}
.c-ctrl .ctrl-badges .badges-img{max-width:170px;width:100%}
@media(max-width:1000px){
  .console4{grid-template-columns:minmax(0,1fr);grid-template-areas:"levels" "ctrl" "badges" "pvw" "pgm";gap:12px}
}
/* control-room preview/program boards: compact text (operator close-up, not a far TV read) */
.c-pvw .board,.c-pgm .board{padding:14px}
.c-pvw .q-label,.c-pgm .q-label{font-size:12px;margin-bottom:8px}
/* ON-AIR board shows the level's available category option(s) while pgm is clear + a level is previewed */
.cat-pick{padding:22px 16px;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.cat-pick-hd{font-size:13px;font-weight:700;color:var(--muted);letter-spacing:.4px;direction:rtl}
.cat-pick-opts{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.cat-pick-opt{font-size:20px;font-weight:800;padding:12px 24px;border-radius:12px;border:1px solid var(--border);background:#0f131b;color:#d6deea;direction:rtl}
.cat-pick-opt.on{border-color:var(--amber);background:#2a2310;color:#ffcf7a}
.c-pvw .q-text,.c-pgm .q-text{font-size:clamp(14px,1.35vw,20px);line-height:1.35;margin:0 auto 14px}
.c-pvw .opt,.c-pgm .opt{font-size:clamp(13px,1.05vw,16px);min-height:46px;padding:9px 13px}
.c-pvw .opt .badge,.c-pgm .opt .badge{width:30px;height:30px;font-size:15px}
.c-pvw .q-note,.c-pgm .q-note{font-size:13px;padding:10px 12px;margin-top:14px}

/* back-screen output (full-screen placeholder until the back-screen art arrives) */
.backstage{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:3vw}
.backstage .board{width:100%;max-width:1600px}
.backstage .q-label{font-size:clamp(18px,2vw,28px)}
.backstage .q-text{font-size:clamp(28px,4vw,62px)}
.backstage .opt{font-size:clamp(20px,2.6vw,40px);min-height:11vh}
.backstage .opt .badge{width:clamp(46px,4vw,66px);height:clamp(46px,4vw,66px)}

/* presenter prize bar (current money level) */
.prize-bar{display:flex;align-items:center;gap:14px;background:#101725;border:1px solid var(--green-d);
  border-radius:14px;padding:14px 22px;margin-bottom:14px}
.prize-bar #prizebar{flex:1 1 auto;display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap;gap:6px 18px;font-weight:800;color:#ffcf7a}
.prize-bar .pz-lvl{font-size:clamp(22px,3.4vw,40px);color:#ffcf7a}
.prize-bar .pz-cat{font-size:clamp(22px,3.4vw,40px);color:#fff}
.prize-bar .pz-money{font-size:clamp(26px,4vw,48px);color:#ffd98a;font-variant-numeric:tabular-nums}
.prize-bar .pz-sep{font-size:clamp(16px,2vw,26px);color:#46566f}
.prize-bar .pz-idle{font-size:clamp(18px,2.4vw,28px);color:var(--muted)}
.prize-bar b{color:#fff}
.prize-bar .badges-vis{flex:0 0 auto;padding:0}
.prize-bar .badges-vis .badges-img{max-width:165px}
/* 10 GAV graphic = PERSISTENT tablet backdrop: full+crisp when idle (panel hidden), dimmed behind a question */
body.qbg:not(.outcome-correct):not(.outcome-wrong){background:linear-gradient(rgba(8,11,20,.55),rgba(8,11,20,.55)),url(waiting.jpg) center/cover fixed no-repeat}
body.qbg.hasq .panel{background:rgba(17,21,30,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
body.qbg:not(.hasq) .panel,body.qbg:not(.hasq) .prize-bar,body.qbg:not(.hasq) .badges-vis{display:none}   /* idle: nothing but the dimmed backdrop */

/* answer outcome wash — after reveal: green = contestant correct, red = wrong (presenter + participant) */
body.outcome-correct{background:radial-gradient(1200px 800px at 50% -10%, #123d22 0%, #08130c 62%) fixed}
body.outcome-wrong{background:radial-gradient(1200px 800px at 50% -10%, #401616 0%, #140808 62%) fixed}
.panel,.board{transition:background .35s,border-color .35s}
.outcome-correct .board{background:rgba(34,197,94,.10)}
.outcome-wrong .board{background:rgba(239,68,68,.10)}
.outcome-correct .panel,.outcome-correct .badges-vis{border-color:var(--green)}
.outcome-wrong .panel,.outcome-wrong .badges-vis{border-color:var(--red)}