/* ===== Youth Q&A — shared styles ===== */
:root{
  --green:#c8102e; --green-600:#a50d25; --green-700:#8a0b1f;
  --deep:#1c0609; --deep-2:#2b0a0e; --deep-3:#3a0d13;
  --gold:#d4a94f; --gold-soft:#f3e7c6;
  --ink:#1a1213; --ink-2:#463a3b; --muted:#7a6d6e; --line:#ece4e4; --line-2:#f5efef;
  --bg:#f8f5f4; --card:#ffffff;
  --red:#d64545; --amber:#d99a1e; --blue:#2f6fde;
  --r-sm:10px; --r:16px; --r-lg:22px;
  --sh-1:0 1px 2px rgba(28,6,9,.06),0 1px 1px rgba(28,6,9,.04);
  --sh-2:0 8px 24px -8px rgba(28,6,9,.18),0 2px 6px rgba(28,6,9,.06);
  --font:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
a{color:var(--green-600)}
.ico{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ico.sm{width:15px;height:15px}.ico.lg{width:22px;height:22px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
[hidden]{display:none!important}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border-radius:12px;font-weight:600;font-size:14px;transition:background .15s,transform .05s,box-shadow .15s,color .15s;white-space:nowrap;user-select:none}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-primary{background:var(--green);color:#fff;box-shadow:0 6px 16px -6px rgba(200,16,46,.55)}
.btn-primary:hover{background:var(--green-600)}
.btn-approve{background:#0d7a3a;color:#fff;box-shadow:0 6px 16px -6px rgba(13,122,58,.5)}.btn-approve:hover{background:#0a6630}
.btn-dark{background:var(--deep);color:#fff}.btn-dark:hover{background:var(--deep-2)}
.btn-ghost{background:#fff;border:1px solid var(--line);color:var(--ink-2)}.btn-ghost:hover{background:var(--line-2)}
.btn-soft{background:#fbecee;color:var(--green-700)}.btn-soft:hover{background:#f7dde1}
.btn-danger{background:#fdecec;color:#b42d2d}.btn-danger:hover{background:#fbdcdc}
.btn-gold{background:var(--gold);color:#1d1606}.btn-gold:hover{filter:brightness(.96)}
.btn-sm{height:32px;padding:0 11px;font-size:13px;border-radius:9px;gap:6px}
.btn-lg{height:52px;padding:0 22px;font-size:16px;border-radius:14px}
.btn-icon{width:36px;height:36px;padding:0;border-radius:10px}
.btn-block{width:100%}

/* toggles */
.switch{position:relative;display:inline-block;width:42px;height:24px;flex:none}
.switch input{opacity:0;width:0;height:0}
.switch span{position:absolute;inset:0;background:#dccfd0;border-radius:99px;transition:.2s}
.switch span:before{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.switch input:checked+span{background:var(--green)}
.switch input:checked+span:before{transform:translateX(18px)}
.switch input:focus-visible+span{outline:2px solid var(--green);outline-offset:2px}

/* inputs */
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:13px;font-weight:600;color:var(--ink-2)}
.input,.textarea,.select{width:100%;border:1px solid var(--line);background:#fff;border-radius:12px;padding:11px 13px;font-size:15px;outline:none;transition:border .15s,box-shadow .15s}
.input:focus,.textarea:focus,.select:focus{border-color:var(--green);box-shadow:0 0 0 4px rgba(200,16,46,.12)}
.textarea{resize:none;line-height:1.5}

/* toast */
.toasts{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;z-index:200;width:min(92vw,420px);pointer-events:none}
.toast{background:var(--deep);color:#fff;padding:13px 16px;border-radius:14px;font-size:14px;font-weight:500;box-shadow:var(--sh-2);display:flex;gap:10px;align-items:center;animation:toastIn .25s ease-out}
.toast.err{background:#7a1f1f}
.toast .ico{color:var(--gold)}
@keyframes toastIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* modal */
.modal-back{position:fixed;inset:0;background:rgba(20,4,6,.5);backdrop-filter:blur(3px);z-index:150;display:flex;align-items:center;justify-content:center;padding:16px;animation:fade .15s}
.modal{background:#fff;border-radius:20px;width:min(520px,100%);max-height:90vh;overflow:auto;box-shadow:0 30px 80px -20px rgba(0,0,0,.4);animation:pop .18s ease-out}
.modal-h{padding:20px 22px 6px;font-weight:700;font-size:18px}
.modal-b{padding:8px 22px 18px;color:var(--ink-2);font-size:14.5px;line-height:1.55}
.modal-f{padding:12px 22px 20px;display:flex;gap:10px;justify-content:flex-end}
@keyframes fade{from{opacity:0}}
@keyframes pop{from{opacity:0;transform:scale(.97) translateY(6px)}}

/* logos */
.logo-chip{background:#fff;border-radius:14px;display:flex;align-items:center;justify-content:center;overflow:hidden;flex:none}
.logo-chip img{width:100%;height:100%;object-fit:contain}
.logo-chip.dark{background:#000}
.logo-fallback{width:100%;height:100%;display:block;background:linear-gradient(160deg,#fff,#f6eee6);border-radius:inherit}

/* =========================================================
   ASK PAGE (participants — phone first)
   ========================================================= */
.ask-body{background:var(--bg);min-height:100vh}
.ask-hero{background:radial-gradient(90% 120% at 100% 0%,#6b0f1a 0%,rgba(19,96,63,0) 60%),linear-gradient(160deg,#2b0a0e 0%,var(--deep) 45%,#0d0304 100%);color:#fff;padding:18px 18px 64px;position:relative;overflow:hidden}
.ask-hero:before{content:"";position:absolute;width:520px;height:520px;right:-180px;top:-260px;border-radius:50%;background:radial-gradient(closest-side,rgba(212,169,79,.22),rgba(212,169,79,0));pointer-events:none}
.ask-hero:after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,rgba(212,169,79,0),rgba(212,169,79,.85),rgba(212,169,79,0));pointer-events:none}
.ask-hero-in{max-width:640px;margin:0 auto;position:relative;z-index:1}
.ask-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ask-logos{display:flex;align-items:center;gap:8px}
.ask-logos .logo-chip{width:46px;height:46px;border-radius:12px;padding:4px;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.ask-logos .x{color:rgba(255,255,255,.45);font-size:13px;font-weight:600}
.live-pill{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);padding:6px 11px;border-radius:99px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.live-pill i{width:8px;height:8px;border-radius:50%;background:#3ee07f;box-shadow:0 0 0 0 rgba(62,224,127,.7);animation:pulse 1.8s infinite}
.live-pill.closed i{background:#e8a33a;animation:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(62,224,127,.6)}70%{box-shadow:0 0 0 8px rgba(62,224,127,0)}100%{box-shadow:0 0 0 0 rgba(62,224,127,0)}}
.ask-title{margin:22px 0 4px;font-size:30px;line-height:1.1;font-weight:800;letter-spacing:-.025em;background:linear-gradient(180deg,#fff 30%,#ecd9a8);-webkit-background-clip:text;background-clip:text;color:transparent}
.ask-sub{color:rgba(255,255,255,.78);font-size:15px;font-weight:500}
.ask-meta{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:12px;color:rgba(255,255,255,.7);font-size:13px}
.ask-meta span{display:inline-flex;align-items:center;gap:6px}
.ask-meta .ico{width:14px;height:14px;color:var(--gold)}

.ask-main{max-width:640px;margin:-44px auto 0;padding:0 14px 60px;position:relative;z-index:2}
.composer{background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-2);padding:14px;border:1px solid rgba(28,6,9,.05)}
.composer .textarea{border:0;padding:6px 6px 4px;font-size:17px;min-height:96px;box-shadow:none!important}
.composer-name{margin:4px 0 2px}
.composer-name .input{font-size:14px;padding:9px 12px;background:var(--bg);border-color:transparent}
.composer-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--line-2);padding-top:12px;margin-top:6px}
.anon-tag{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--green-700);background:#fbecee;padding:6px 10px;border-radius:99px}
.anon-tag .ico{width:14px;height:14px}
.counter{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;margin-left:auto;margin-right:2px}
.counter.over{color:var(--red);font-weight:700}
.composer .btn-primary{height:44px;padding:0 18px;border-radius:12px}
.closed-card{background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-2);padding:22px;text-align:center}
.closed-card h3{margin:8px 0 4px;font-size:18px}.closed-card p{margin:0;color:var(--muted);font-size:14px}
.closed-card .ico{width:30px;height:30px;color:var(--amber)}

.onscreen{margin-top:16px;background:linear-gradient(135deg,var(--deep),#4a0c14);color:#fff;border-radius:var(--r);padding:14px 16px;display:flex;gap:12px;align-items:flex-start;box-shadow:var(--sh-1)}
.onscreen .badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.onscreen p{margin:4px 0 0;font-size:15.5px;line-height:1.45;font-weight:500}

.tabs{display:flex;gap:4px;background:#efe8e8;padding:4px;border-radius:14px;margin:22px 0 12px}
.tab{flex:1;height:38px;border-radius:10px;font-size:14px;font-weight:600;color:var(--ink-2);display:flex;align-items:center;justify-content:center;gap:6px}
.tab.on{background:#fff;color:var(--ink);box-shadow:var(--sh-1)}
.tab .n{font-size:11.5px;background:var(--line);padding:1px 7px;border-radius:99px;color:var(--ink-2)}
.tab.on .n{background:#fbe7ea;color:var(--green-700)}

.mine{margin-top:26px}
.mine-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 2px 12px;flex-wrap:wrap}
.mine-h h2{margin:0;font-size:17px;font-weight:800;display:flex;align-items:center;gap:8px}
.mine-h .n{font-size:12px;background:#fbe7ea;color:var(--green-700);padding:2px 8px;border-radius:99px}
.mine-h .private{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);font-weight:600}
.mine-h .private .ico{width:13px;height:13px}
.qlist{display:flex;flex-direction:column;gap:10px}
.qcard{background:#fff;border-radius:var(--r);padding:14px 14px 12px 16px;display:flex;gap:12px;align-items:flex-start;box-shadow:var(--sh-1);border:1px solid rgba(28,6,9,.04);animation:qIn .25s ease-out}
@keyframes qIn{from{opacity:0;transform:translateY(4px)}}
.qcard.answered{opacity:.62}
.qcard.live{border:1.5px solid var(--gold);box-shadow:0 0 0 4px rgba(212,169,79,.12)}
.qbody{flex:1;min-width:0}
.qtext{font-size:15.5px;line-height:1.5;color:var(--ink);word-wrap:break-word;white-space:pre-wrap}
.qmeta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:8px;font-size:12.5px;color:var(--muted)}
.qmeta .who{display:inline-flex;align-items:center;gap:5px;font-weight:600;color:var(--ink-2)}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;padding:3px 8px;border-radius:99px}
.chip .ico{width:12px;height:12px;stroke-width:2.5}
.chip-green{background:#e4f4ea;color:#0d7a3a}
.chip-amber{background:#fdf1dc;color:#9a6408}
.chip-gold{background:var(--gold-soft);color:#7a5a12}
.chip-red{background:#fde8e8;color:#a52a2a}
.chip-blue{background:#e6eefc;color:#2453a8}
.chip-grey{background:#f2eded;color:var(--ink-2)}
.vote{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:52px;height:56px;border-radius:14px;border:1.5px solid var(--line);background:#fff;color:var(--ink-2);font-weight:700;font-size:14px;transition:.15s;flex:none}
.vote .ico{width:18px;height:18px;stroke-width:2.4}
.vote:hover{border-color:#e7b9c0}
.vote.on{background:var(--green);border-color:var(--green);color:#fff;box-shadow:0 6px 14px -6px rgba(200,16,46,.6)}
.vote:disabled{opacity:.5}
.empty{text-align:center;padding:36px 16px;color:var(--muted)}
.empty .ico{width:34px;height:34px;color:#cbb9bb;margin-bottom:6px}
.empty h4{margin:4px 0;color:var(--ink-2);font-size:15px}
.empty p{margin:0;font-size:13.5px}
.ask-foot{text-align:center;color:var(--muted);font-size:12px;margin-top:30px}
.ask-foot b{color:var(--ink-2)}

@media (min-width:700px){
  .ask-hero{padding:26px 24px 76px}
  .ask-title{font-size:38px}
  .ask-logos .logo-chip{width:56px;height:56px}
}

/* =========================================================
   MODERATOR
   ========================================================= */
.mod-body{background:var(--bg);min-height:100vh}
.gate{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:radial-gradient(60% 60% at 50% 0%,rgba(212,169,79,.16),rgba(212,169,79,0) 70%),radial-gradient(100% 120% at 0% 0%,#5a0f17,var(--deep) 60%,#0d0304)}
.gate-card{background:#fff;border-radius:24px;padding:30px 26px;width:min(400px,100%);box-shadow:0 40px 80px -30px rgba(0,0,0,.6);text-align:center}
.gate-logos{display:flex;justify-content:center;gap:10px;margin-bottom:16px}
.gate-logos .logo-chip{width:58px;height:58px;border:1px solid var(--line);padding:4px}
.gate-card h1{font-size:22px;margin:6px 0 4px}
.gate-card p{color:var(--muted);margin:0 0 20px;font-size:14px}
.pin-input{text-align:center;font-size:26px;letter-spacing:.5em;font-weight:700;padding:14px;font-variant-numeric:tabular-nums}
.gate-err{color:var(--red);font-size:13.5px;font-weight:600;min-height:20px;margin:10px 0 4px}

.mtop{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.9);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.mtop-in{max-width:1400px;margin:0 auto;padding:10px 18px;display:flex;align-items:center;gap:14px}
.mbrand{display:flex;align-items:center;gap:10px;min-width:0}
.mbrand .logo-chip{width:38px;height:38px;border:1px solid var(--line);border-radius:10px;padding:2px}
.mbrand h1{font-size:15.5px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mbrand small{display:block;font-size:12px;color:var(--muted);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mtop-actions{margin-left:auto;display:flex;gap:8px;align-items:center}
.conn{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--muted);margin-right:4px}
.conn i{width:8px;height:8px;border-radius:50%;background:#3ccf74}
.conn.off i{background:#e0a030}

.mwrap{max-width:1400px;margin:0 auto;padding:18px;display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:18px;align-items:start}
.panel{background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-1);border:1px solid rgba(28,6,9,.05)}
.live-panel{background:linear-gradient(140deg,var(--deep) 0%,#4a0c14 100%);color:#fff;border-radius:var(--r-lg);padding:20px 22px;position:relative;overflow:hidden;box-shadow:var(--sh-2)}
.live-panel:after{content:"";position:absolute;width:460px;height:460px;right:-160px;top:-240px;border-radius:50%;background:radial-gradient(closest-side,rgba(212,169,79,.2),rgba(212,169,79,0));pointer-events:none}
.live-panel:before{content:"";position:absolute;left:24px;right:24px;top:0;height:1px;background:linear-gradient(90deg,rgba(212,169,79,0),rgba(212,169,79,.7),rgba(212,169,79,0));z-index:2}
.live-panel>*{position:relative;z-index:1}
.live-h{display:flex;align-items:center;gap:10px;justify-content:space-between}
.live-h .lbl{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.live-h .lbl i{width:9px;height:9px;border-radius:50%;background:#ff5a5a;animation:pulseR 1.6s infinite}
.live-h .lbl.idle i{background:#a08a8c;animation:none}
@keyframes pulseR{0%{box-shadow:0 0 0 0 rgba(255,90,90,.6)}70%{box-shadow:0 0 0 8px rgba(255,90,90,0)}100%{box-shadow:0 0 0 0 rgba(255,90,90,0)}}
.live-q{font-size:22px;line-height:1.4;font-weight:600;margin:14px 0 8px;min-height:62px}
.live-q.idle{color:rgba(255,255,255,.55);font-weight:500;font-size:17px}
.live-meta{font-size:13px;color:rgba(255,255,255,.65);display:flex;gap:14px;flex-wrap:wrap}
.live-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.live-actions .btn-ghost{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18);color:#fff}
.live-actions .btn-ghost:hover{background:rgba(255,255,255,.18)}
.kbd{font-size:11px;font-weight:700;border:1px solid currentColor;border-radius:5px;padding:0 5px;opacity:.6;margin-left:2px}

.qtabs{display:flex;align-items:center;gap:6px;padding:14px 14px 0;flex-wrap:wrap}
.qtab{height:36px;padding:0 13px;border-radius:10px;font-size:13.5px;font-weight:600;color:var(--ink-2);display:inline-flex;align-items:center;gap:7px}
.qtab:hover{background:var(--line-2)}
.qtab.on{background:var(--deep);color:#fff}
.qtab .n{font-size:11.5px;min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:var(--line);color:var(--ink-2);display:inline-flex;align-items:center;justify-content:center}
.qtab.on .n{background:rgba(255,255,255,.18);color:#fff}
.qtab .n.hot{background:#ff5a5a;color:#fff}
.qtools{display:flex;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line-2);align-items:center;flex-wrap:wrap}
.search{position:relative;flex:1;min-width:180px}
.search .ico{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--muted);width:16px;height:16px}
.search .input{padding:8px 12px 8px 34px;font-size:14px;border-radius:10px;height:36px}
.seg{display:inline-flex;background:var(--line-2);padding:3px;border-radius:10px}
.seg button{height:30px;padding:0 10px;border-radius:8px;font-size:12.5px;font-weight:600;color:var(--ink-2)}
.seg button.on{background:#fff;box-shadow:var(--sh-1);color:var(--ink)}

.mlist{padding:12px 14px 16px;display:flex;flex-direction:column;gap:10px;min-height:300px}
.mq{border:1px solid var(--line);border-radius:14px;padding:14px 14px 12px;background:#fff;transition:border .15s,box-shadow .15s;animation:qIn .2s ease-out}
.mq:hover{border-color:#e3d3d5;box-shadow:var(--sh-1)}
.mq.is-live{border-color:var(--gold);background:#fffcf3;box-shadow:0 0 0 3px rgba(212,169,79,.15)}
.mq.is-star{border-left:4px solid var(--gold)}
.mq-top{display:flex;gap:12px}
.mq-votes{flex:none;width:46px;height:50px;border-radius:12px;background:var(--line-2);display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:800;font-size:15px;color:var(--ink-2)}
.mq-votes.many{background:#fbe7ea;color:var(--green-700)}
.mq-votes .ico{width:14px;height:14px;stroke-width:2.6;color:var(--green)}
.mq-text{flex:1;min-width:0;font-size:15.5px;line-height:1.5;white-space:pre-wrap;word-wrap:break-word}
.mq-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:12.5px;color:var(--muted);margin-top:8px}
.mq-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;padding-top:12px;border-top:1px dashed var(--line)}
.mq-actions .sp{flex:1}
.icon-btn{width:32px;height:32px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;color:var(--muted)}
.icon-btn:hover{background:var(--line-2);color:var(--ink)}
.icon-btn.on{color:var(--gold)}
.icon-btn.on .ico{fill:var(--gold)}
.icon-btn.danger:hover{background:#fdecec;color:var(--red)}

.side{display:flex;flex-direction:column;gap:14px;position:sticky;top:76px}
.side-card{padding:16px}
.side-card h3{margin:0 0 12px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.stat{background:var(--line-2);border-radius:12px;padding:10px 12px}
.stat b{display:block;font-size:22px;font-weight:800;color:var(--ink)}
.stat span{font-size:12px;color:var(--muted);font-weight:600}
.qs-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--line-2);font-size:14px;font-weight:500}
.qs-row:last-child{border:0;padding-bottom:0}
.qs-row small{display:block;color:var(--muted);font-size:12px;font-weight:500}
.share-box{display:flex;gap:12px;align-items:center}
.share-box .qr{width:96px;height:96px;flex:none;background:#fff;border:1px solid var(--line);border-radius:10px;padding:6px}
.share-box .qr svg,.share-box .qr img{width:100%;height:100%;display:block}
.share-url{font-size:13px;font-weight:600;word-break:break-all;color:var(--ink-2)}

/* settings drawer */
.drawer-back{position:fixed;inset:0;background:rgba(20,4,6,.4);z-index:90;animation:fade .15s}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(480px,100vw);background:#fff;z-index:100;display:flex;flex-direction:column;box-shadow:-20px 0 60px -20px rgba(0,0,0,.35);animation:slideIn .22s ease-out}
@keyframes slideIn{from{transform:translateX(30px);opacity:0}}
.drawer-h{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--line)}
.drawer-h h2{margin:0;font-size:18px}
.drawer-b{flex:1;overflow:auto;padding:6px 20px 30px}
.drawer-f{padding:14px 20px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end;background:#fcfafa}
.sec{padding:18px 0;border-bottom:1px solid var(--line-2)}
.sec:last-child{border:0}
.sec h4{margin:0 0 12px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--green-700)}
.sec .grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sec .field+.field{margin-top:12px}
.sec .grid2 .field{margin-top:0!important}
.opt{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 0}
.opt b{display:block;font-size:14.5px;font-weight:600}
.opt small{display:block;font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.4}
.logo-edit{display:flex;gap:14px;align-items:center;padding:8px 0}
.logo-edit .logo-chip{width:64px;height:64px;border:1px solid var(--line);padding:4px}
.logo-edit .lt{flex:1}
.logo-edit .lt b{display:block;font-size:14px}
.logo-edit .lt small{color:var(--muted);font-size:12.5px}
.danger-zone{background:#fff6f6;border:1px solid #f6d5d5;border-radius:14px;padding:14px}
.danger-zone p{margin:0 0 10px;font-size:13px;color:#8a3a3a}

@media (max-width:1020px){
  .mwrap{grid-template-columns:1fr}
  .side{position:static}
}
@media (max-width:600px){
  .mtop-in{padding:10px 12px;gap:8px}
  .mtop-actions .btn .lbl{display:none}
  .mtop-actions .btn{padding:0 10px}
  .conn span{display:none}
  .mwrap{padding:12px;gap:12px}
  .live-q{font-size:19px}
  .live-actions{display:grid;grid-template-columns:1fr 1fr}
  .live-actions .btn-gold{grid-column:1/-1}
  .live-actions .btn{padding:0 10px;font-size:13.5px}
  .kbd{display:none}
  .qtabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:12px 12px 0}
  .qtabs::-webkit-scrollbar{display:none}
  .qtab{flex:none;padding:0 11px}
  .qtools{padding:10px 12px}
  .mlist{padding:10px 12px 14px}
  .mq{padding:12px}
  .mq-actions .btn-sm{padding:0 9px}
  .sec .grid2{grid-template-columns:1fr}
}

/* =========================================================
   DISPLAY (projector / TV)
   ========================================================= */
.disp-body{margin:0;height:100vh;overflow:hidden;background:#0d0304;color:#fff}
.stage{position:fixed;inset:0;display:flex;flex-direction:column;background:radial-gradient(70% 90% at 82% -10%,rgba(212,169,79,.16) 0%,rgba(212,169,79,0) 55%),radial-gradient(90% 120% at 85% 0%,#5e0e18 0%,transparent 55%),radial-gradient(70% 90% at 0% 100%,#3a0a10 0%,transparent 60%),linear-gradient(180deg,#1c0609,#0d0304);font-size:1.6vh}
.stage:before{content:"";position:absolute;inset:0;background:radial-gradient(120% 100% at 50% 40%,rgba(0,0,0,0) 55%,rgba(0,0,0,.45) 100%);pointer-events:none}
.stage:after{content:"";position:absolute;left:0;right:0;top:0;height:.35vh;background:linear-gradient(90deg,rgba(212,169,79,0),rgba(212,169,79,.9),rgba(212,169,79,0));pointer-events:none}
.d-top{border-bottom:1px solid rgba(255,255,255,.07);padding-bottom:2.8vh!important}
.stage>*{position:relative;z-index:1}
.d-top{display:flex;align-items:center;gap:2.2vh;padding:3.2vh 4vw 0}
.d-logos{display:flex;gap:1.4vh}
.d-logos .logo-chip{width:9.5vh;height:9.5vh;border-radius:1.8vh;padding:.6vh;box-shadow:0 1vh 3vh rgba(0,0,0,.35)}
.d-title{min-width:0}
.d-title h1{margin:0;font-size:3.8vh;font-weight:800;letter-spacing:-.015em;line-height:1.1;background:linear-gradient(180deg,#fff 35%,#ecd9a8);-webkit-background-clip:text;background-clip:text;color:transparent}
.d-title p{margin:.6vh 0 0;font-size:2.1vh;color:rgba(255,255,255,.72);font-weight:500}
.d-title p b{color:var(--gold);font-weight:700}
.d-join{margin-left:auto;display:flex;align-items:center;gap:1.6vh;background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.03));border:1px solid rgba(212,169,79,.28);border-radius:2vh;padding:1.2vh 1.2vh 1.2vh 2.2vh}
.d-join .t{text-align:right}
.d-join .t small{display:block;font-size:1.5vh;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:700}
.d-join .t b{display:block;font-size:2.3vh;font-weight:700;margin-top:.3vh}
.d-join .qr{width:10vh;height:10vh;background:#fff;border-radius:1.2vh;padding:.7vh}
.d-join .qr svg{width:100%;height:100%;display:block}

.d-main{flex:1;display:flex;align-items:center;justify-content:center;padding:3vh 7vw;min-height:0}
.d-card{width:100%;max-width:150vh;position:relative;display:flex;flex-direction:column;max-height:100%}
.d-quote{font-family:Georgia,serif;font-size:18vh;line-height:.6;color:var(--gold);opacity:.9;height:8vh;margin-left:-1vh}
.d-qwrap{flex:1;min-height:0;display:flex;align-items:center}
.d-q{font-size:7vh;line-height:1.28;font-weight:700;letter-spacing:-.015em;margin:2vh 0 0;width:100%;text-wrap:balance}
.d-qmeta{display:flex;align-items:center;gap:2.4vh;margin-top:4vh;font-size:2.4vh;color:rgba(255,255,255,.7);font-weight:600}
.d-qmeta .sep{width:.6vh;height:.6vh;border-radius:50%;background:rgba(255,255,255,.35)}
.d-qmeta .v{display:inline-flex;align-items:center;gap:1vh;color:#fff;background:rgba(255,255,255,.1);padding:.8vh 1.8vh;border-radius:99px}
.d-qmeta .v .ico{width:2.4vh;height:2.4vh;color:var(--gold);stroke-width:2.6}
.d-qmeta .who{display:inline-flex;align-items:center;gap:1vh}
.d-qmeta .who .ico{width:2.4vh;height:2.4vh;color:var(--gold)}
.d-bar{width:12vh;height:.7vh;border-radius:99px;background:linear-gradient(90deg,var(--gold),#e8cf8a);margin-top:3.4vh}

.d-idle{text-align:center;display:flex;flex-direction:column;align-items:center}
.d-idle .kick{font-size:2.2vh;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);font-weight:700}
.d-idle h2{font-size:9vh;margin:1.6vh 0 1vh;font-weight:800;letter-spacing:-.025em;line-height:1.05;background:linear-gradient(180deg,#fff 40%,#ecd9a8);-webkit-background-clip:text;background-clip:text;color:transparent}
.d-idle p{font-size:2.8vh;color:rgba(255,255,255,.75);margin:0}
.d-idle .bigqr{margin-top:4.5vh;display:flex;align-items:center;gap:4vh;background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.03));border:1px solid rgba(212,169,79,.28);padding:2.6vh 4vh 2.6vh 2.6vh;border-radius:3vh;box-shadow:0 4vh 10vh -4vh rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.08);backdrop-filter:blur(6px)}
.d-idle .bigqr .qr{width:26vh;height:26vh;background:#fff;border-radius:2vh;padding:1.6vh}
.d-idle .bigqr .qr svg{width:100%;height:100%;display:block}
.d-idle .bigqr .steps{text-align:left}
.d-idle .bigqr .steps div{display:flex;align-items:center;gap:1.8vh;font-size:2.8vh;font-weight:600;margin:1.6vh 0}
.d-idle .bigqr .steps span{width:4.6vh;height:4.6vh;border-radius:50%;background:var(--gold);color:#1d1606;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:2.3vh;flex:none}
.d-idle .bigqr .steps b{color:var(--gold)}

.d-foot{display:flex;align-items:center;justify-content:space-between;padding:0 4vw 2.8vh;font-size:1.9vh;color:rgba(255,255,255,.55);font-weight:600}
.d-foot .ct{display:inline-flex;gap:2.4vh}
.d-foot .ct b{color:#fff;font-weight:800}
.d-tools{position:fixed;right:2vh;bottom:7vh;z-index:5;display:flex;gap:1vh;transition:opacity .3s}
.d-tools.hide{opacity:0;pointer-events:none}
.d-tools button{background:rgba(255,255,255,.12);color:#fff;height:40px;padding:0 14px;border-radius:10px;font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.15)}
.d-tools button:hover{background:rgba(255,255,255,.2)}
.disp-body.nocursor{cursor:none}

.enter{animation:dIn .6s cubic-bezier(.2,.8,.2,1)}
@keyframes dIn{from{opacity:0;transform:translateY(2.5vh) scale(.985)}to{opacity:1;transform:none}}

.offline{position:fixed;top:12px;left:50%;transform:translateX(-50%);background:#7a4b05;color:#fff;font-size:13px;font-weight:600;padding:8px 14px;border-radius:99px;z-index:300;box-shadow:var(--sh-2)}

.chip-sim{background:#fff4dc;color:#8a5a00;border:1px solid #f1d58f;cursor:pointer}
.chip-sim:hover{background:#ffecc2}
.kids{margin-top:10px;background:var(--line-2);border-radius:10px;padding:8px 10px;font-size:13px}
.kids summary{cursor:pointer;font-weight:700;color:var(--ink-2);display:flex;align-items:center;gap:6px;list-style:none}
.kids summary::-webkit-details-marker{display:none}
.kid{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px dashed var(--line);margin-top:6px;color:var(--ink-2)}
.mmain{background:#fbecee;border-radius:12px;padding:12px 14px;color:var(--ink)}
.mmain small{display:block;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--green-700);margin-bottom:4px}
.mlist-pick{display:flex;flex-direction:column;gap:8px;max-height:46vh;overflow:auto}
.mrow{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:12px;padding:10px 12px;cursor:pointer}
.mrow.sim{border-color:#f1d58f;background:#fffaf0}
.mrow input{margin-top:3px;accent-color:var(--green);width:17px;height:17px;flex:none}
.mrow b{display:block;font-weight:600;color:var(--ink);font-size:14px;line-height:1.45}
.mrow small{display:block;color:var(--muted);font-size:12px;margin-top:3px}
.mrow em{color:#8a5a00;font-style:normal;font-weight:700}