:root{
  --bg:#f4f4f6; --surface:#ffffff; --surface-2:#f8f8fa; --line:#e4e4e8; --line-2:#d2d3d9;
  --ink:#15171c; --ink-2:#3c4049; --muted:#73777f;
  --brand:#E30613; --brand-2:#b8050f; --on-brand:#ffffff;
  --good:#12855f; --good-bg:#e7f4ef; --warn:#b26a00; --warn-bg:#fbf0dd;
  --radius:16px; --shadow:0 18px 44px rgba(16,18,24,.12);
  --display:'Inter Tight','Inter',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;
  --serif:'Lora',Georgia,serif;
  --device:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0f1013; --surface:#191b20; --surface-2:#202228; --line:#2a2d34; --line-2:#363a42;
  --ink:#f3f3f5; --ink-2:#c9ccd3; --muted:#9a9ea7;
  --brand:#ff3443; --brand-2:#ff5b67; --on-brand:#ffffff;
  --good:#39c398; --good-bg:#10261f; --warn:#e0a53a; --warn-bg:#271e0e;
  --shadow:0 20px 50px rgba(0,0,0,.5); color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#0f1013; --surface:#191b20; --surface-2:#202228; --line:#2a2d34; --line-2:#363a42;
  --ink:#f3f3f5; --ink-2:#c9ccd3; --muted:#9a9ea7;
  --brand:#ff3443; --brand-2:#ff5b67; --on-brand:#ffffff;
  --good:#39c398; --good-bg:#10261f; --warn:#e0a53a; --warn-bg:#271e0e;
  --shadow:0 20px 50px rgba(0,0,0,.5); color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg); color:var(--ink); font-family:var(--body); -webkit-font-smoothing:antialiased; line-height:1.5; min-height:100%}
.wrap{max-width:640px; margin:0 auto; padding-left:max(16px,env(safe-area-inset-left,0px)); padding-right:max(16px,env(safe-area-inset-right,0px)); padding-block:18px 40px; display:flex; flex-direction:column; gap:16px; min-height:100dvh}
.wrap.wide{max-width:1100px}
h1,h2,h3{font-family:var(--display); font-weight:800; letter-spacing:-.01em; text-wrap:balance; margin:0}
.eyebrow{font-size:12px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--brand)}
button{font-family:var(--body); cursor:pointer}
input,select{font-family:var(--body)}
:focus-visible{outline:2px solid var(--brand); outline-offset:2px; border-radius:6px}

.topbar{display:flex; align-items:center; justify-content:space-between; gap:12px}
.logo{display:flex; align-items:center; gap:10px}
.logo .mark{font-family:var(--display); font-weight:800; font-size:17px; letter-spacing:.04em; color:var(--on-brand); background:var(--brand); padding:4px 10px; border-radius:6px}
.logo .cap{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); line-height:1.2}
.tb-right{display:flex; align-items:center; gap:10px}
.icon-btn{appearance:none; background:var(--surface); border:1px solid var(--line); color:var(--ink-2); width:36px; height:36px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:15px}
.icon-btn:hover{border-color:var(--line-2)}
.progress{display:flex; gap:6px; align-items:center}
.pip{width:20px; height:5px; border-radius:3px; background:var(--line-2)}
.pip.done{background:var(--good)} .pip.now{background:var(--brand)}
.score-chip{font-family:var(--display); font-weight:700; font-size:13px; color:var(--ink-2); white-space:nowrap}
.score-chip b{color:var(--brand)}

.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius)}
.stage{display:flex; flex-direction:column; gap:16px; animation:rise .34s ease both}
@keyframes rise{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}

/* home / intro */
.intro{padding:40px 28px 32px; display:flex; flex-direction:column; gap:18px; text-align:center; align-items:center; box-shadow:var(--shadow)}
.sim-badge{display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--brand); background:color-mix(in srgb,var(--brand) 10%,transparent); border:1px solid color-mix(in srgb,var(--brand) 35%,transparent); padding:7px 14px; border-radius:999px}
.intro h1{font-size:clamp(34px,8vw,54px); line-height:1}
.intro .accent{color:var(--brand)}
.intro .lead{font-size:17px; color:var(--ink-2); max-width:46ch}
.how{display:flex; flex-wrap:wrap; gap:9px; justify-content:center}
.pill{font-size:13px; color:var(--ink-2); background:var(--surface-2); border:1px solid var(--line); padding:8px 13px; border-radius:999px}
.cta-row{display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:4px}
.fict{font-size:12.5px; color:var(--muted); max-width:54ch; line-height:1.5}

.btn{appearance:none; border:none; border-radius:12px; padding:14px 22px; font-size:15.5px; font-weight:700; font-family:var(--display); letter-spacing:.01em}
.btn.primary{background:var(--brand); color:var(--on-brand)} .btn.primary:hover{background:var(--brand-2)}
.btn.ghost{background:transparent; border:1px solid var(--line-2); color:var(--ink)} .btn.ghost:hover{background:var(--surface-2)}
.btn.block{width:100%}
.btn.sm{padding:10px 16px; font-size:14px}

/* bridge */
.bridge{background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--brand); border-radius:12px; padding:14px 16px; display:flex; flex-direction:column; gap:8px}
.bridge .when{font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--brand)}
.bridge .nar{font-family:var(--serif); font-style:italic; font-size:15.5px; color:var(--ink-2); line-height:1.5}
.bridge .seat{font-size:13.5px; font-weight:600; color:var(--ink); display:flex; gap:7px; align-items:baseline}
.bridge .seat::before{content:"▸"; color:var(--brand)}

.setup{display:flex; gap:12px; align-items:flex-start; padding:15px 18px; background:var(--surface); border:1px solid var(--line); border-radius:12px}
.setup .ctx{font-size:15px; color:var(--ink-2)} .setup .ctx b{color:var(--ink); font-weight:600}
.scene-tag{font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; display:block}

/* device frame */
.phone-area{display:flex; justify-content:center}
.phone{width:100%; max-width:330px; background:#05080f; border:1px solid #20242e; border-radius:36px; padding:9px; box-shadow:var(--shadow)}
.phone.big{max-width:360px}
.screen{position:relative; border-radius:28px; overflow:hidden; background:#0b1017; min-height:430px; display:flex; flex-direction:column; font-family:var(--device); color:#e9eef4}
.statusbar{display:flex; justify-content:space-between; align-items:center; padding:10px 20px 6px; font-size:13px; font-weight:600; color:#eef2f8}
.statusbar .si{display:flex; gap:6px; align-items:center}
.ava{border-radius:50%; background:linear-gradient(135deg,#46506e,#2a3350); display:flex; align-items:center; justify-content:center; font-weight:700; color:#dfe6f3; flex:none}

.wa-top{display:flex; align-items:center; gap:10px; padding:10px 14px; background:#103a30; color:#eaf5ef}
.wa-top .ava{width:38px;height:38px;font-size:14px}
.wa-top .nm{font-size:15px; font-weight:600; line-height:1.15}
.wa-top .st{font-size:11px; color:#93c4b5}
.wa-body{flex:1; padding:16px 12px; display:flex; flex-direction:column; gap:12px; background:#0b141c}
.bubble{max-width:86%; padding:9px 12px 7px; border-radius:13px; font-size:13.5px; color:#e9eef2; background:#1b2a3a; align-self:flex-start}
.bubble .tm{font-size:10px; color:#8aa3b2; text-align:right; margin-top:3px}
.vn{display:flex; align-items:center; gap:10px; min-width:210px}
.vn .play{width:36px;height:36px;border-radius:50%; border:none; background:#25a884; color:#fff; font-size:15px; display:flex;align-items:center;justify-content:center; flex:none}
.wave{flex:1; display:flex; align-items:center; gap:2.5px; height:28px}
.wave span{flex:1; background:#53c7a5; opacity:.55; border-radius:2px; height:30%}
.playing .wave span{animation:wv .85s ease-in-out infinite}
@keyframes wv{0%,100%{height:26%} 50%{height:94%}}
.vn .dur{font-size:11px; color:#9fbbb0; font-variant-numeric:tabular-nums}
.transcript{font-style:italic; color:#e3ebf0}
.att{align-self:stretch; background:#111e2a; border:1px solid #223446; border-radius:11px; padding:10px 12px; font-size:12px; color:#cdd9e4; display:flex; gap:9px; align-items:flex-start; line-height:1.45}
.att .ic{color:var(--brand); flex:none; font-size:14px; margin-top:1px}
.att b{color:#eef3f9; font-weight:600}

.call{flex:1; display:flex; flex-direction:column; align-items:center; text-align:center; background:radial-gradient(130% 80% at 50% 0%, #1d2740, #070b12)}
.call.bank{background:radial-gradient(130% 90% at 50% 0%, #2a0f12, #0a0607)}
.call .top{padding-top:26px; display:flex; flex-direction:column; align-items:center; gap:4px; flex:1; justify-content:center}
.call .ava{width:94px;height:94px;font-size:30px; margin-bottom:14px}
.call .vt{width:94px;height:94px;border-radius:50%; overflow:hidden; margin-bottom:14px; position:relative}
.call .vt .ava{width:100%;height:100%;border-radius:0;margin:0}
.call .vt.grain::after{content:""; position:absolute; inset:0; background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 3px); mix-blend-mode:overlay}
.call.bank .ava{background:linear-gradient(135deg,#7a1f24,#4a1216); color:#ffdcdc}
.call .nm{font-size:23px; font-weight:600; font-family:var(--display); color:#f2f6fb}
.call .sub{font-size:13px; color:#a7b6cb; margin-top:2px}
.call .state{font-size:12.5px; color:#7fe3c0; letter-spacing:.03em; margin-top:9px}
.call .cap{font-style:italic; font-size:14px; color:#eef3fa; padding:0 22px; margin-top:16px; line-height:1.45; max-width:32ch}
.call-actions{display:flex; gap:44px; justify-content:center; padding:20px 0 30px}
.rb{width:60px;height:60px;border-radius:50%; border:none; color:#fff; font-size:21px; display:flex;align-items:center;justify-content:center}
.rb.acc{background:#28b463} .rb.dec{background:#e4453b; opacity:.5}
.rb-lab{font-size:11px; color:#9aa7bb; margin-top:7px} .rb-wrap{display:flex;flex-direction:column;align-items:center}
.call .att{margin:0 14px 16px}

.mail{flex:1; display:flex; flex-direction:column; background:#0c131c; color:#e7edf4}
.mail-top{padding:11px 14px; border-bottom:1px solid #1b2634; font-size:12px; color:#8aa0b8; display:flex; justify-content:space-between}
.mail-h{padding:14px; border-bottom:1px solid #1b2634; display:flex; flex-direction:column; gap:9px}
.mail-h .subj{font-size:15px; font-weight:600}
.mail-from{display:flex; align-items:center; gap:9px}
.mail-from .ava{width:32px;height:32px;font-size:12px}
.mail-from .fr{font-size:12.5px} .mail-from .fr b{color:#eef3f9} .mail-from .fr span{color:#8198b0}
.mail-body{padding:14px; font-size:13px; color:#cdd8e4; display:flex; flex-direction:column; gap:12px}
.bankbox{background:#111f2d; border:1px solid #28394b; border-radius:10px; padding:11px 13px; font-size:12.5px}
.bankbox .r{display:flex; justify-content:space-between; gap:12px; padding:3px 0}
.bankbox .r span{color:#8aa0b8} .bankbox .r b{color:#eef3f9; font-variant-numeric:tabular-nums}
.bankbox .chg{color:#ff6a6a; font-weight:700}

/* KYC verification console */
.kyc{flex:1; display:flex; flex-direction:column; background:#0c131c; color:#e7edf4}
.kyc-top{padding:12px 14px; background:#111c2b; border-bottom:1px solid #1b2634; font-size:12px; font-weight:600; letter-spacing:.04em; color:#cdd9e4; display:flex; justify-content:space-between; align-items:center}
.kyc-badge{font-size:10.5px; font-weight:700; letter-spacing:.08em; padding:3px 8px; border-radius:6px; background:#12855f; color:#eafff6}
.kyc-id{padding:14px; display:flex; gap:12px; align-items:center; border-bottom:1px solid #1b2634}
.kyc-vid{width:66px;height:66px;border-radius:12px; position:relative; overflow:hidden; flex:none; background:linear-gradient(135deg,#3a4668,#1f2942)}
.kyc-vid .ava{width:100%;height:100%;border-radius:0}
.kyc-vid .live{position:absolute; top:5px; left:5px; font-size:8px; font-weight:800; letter-spacing:.06em; background:#e4453b; color:#fff; padding:2px 5px; border-radius:4px}
.kyc-who b{font-size:15px; color:#eef3f9; display:block; margin-bottom:2px} .kyc-who span{font-size:12px; color:#8aa0b8; display:block; line-height:1.35}
.kyc-log{padding:12px 14px; display:flex; flex-direction:column; gap:8px}
.kyc-log .row{display:flex; gap:9px; font-size:12.5px; color:#cdd9e4; align-items:flex-start; line-height:1.4}
.kyc-log .row .d{flex:none; margin-top:5px; width:6px;height:6px;border-radius:50%; background:#6c7a8c}
.kyc-log .row.warn .d{background:#ff6a6a}

/* social video post */
.social{flex:1; display:flex; flex-direction:column; background:#0c131c; color:#e7edf4}
.social-top{display:flex; align-items:center; gap:10px; padding:12px 14px}
.social-top .ava{width:40px;height:40px;font-size:14px; background:linear-gradient(135deg,#5a4668,#2f2442)}
.social-top .nm{font-size:14px; font-weight:600; color:#eef3f9} .social-top .sub{font-size:11px; color:#8aa0b8}
.social-vid{position:relative; aspect-ratio:16/10; background:linear-gradient(135deg,#223049,#0d1420); display:flex; align-items:center; justify-content:center}
.social-vid .pl{width:52px;height:52px;border-radius:50%; background:rgba(255,255,255,.92); color:#111; display:flex;align-items:center;justify-content:center; font-size:20px}
.social-vid .views{position:absolute; bottom:8px; right:10px; font-size:11px; color:#dfe7f0; background:rgba(0,0,0,.5); padding:2px 7px; border-radius:5px}
.social-vid .vtag{position:absolute; bottom:8px; left:10px; font-size:10px; font-weight:700; letter-spacing:.05em; color:#fff; background:#e4453b; padding:2px 7px; border-radius:5px}
.social-cap{padding:12px 14px; font-size:13.5px; color:#dbe4ee; font-style:italic; line-height:1.5}
.social-link{margin:0 14px 14px; display:flex; gap:9px; align-items:center; background:#111f2d; border:1px solid #28394b; border-radius:10px; padding:10px 12px; font-size:12.5px; color:#9fc0ff}
.social-link b{color:#eef3f9}

/* choices */
.q{font-family:var(--display); font-weight:700; font-size:18px; text-align:center}
.choices{display:flex; flex-direction:column; gap:10px}
.choice{display:flex; align-items:center; gap:13px; width:100%; text-align:left; background:var(--surface); border:1px solid var(--line); color:var(--ink); padding:15px 16px; border-radius:13px; font-size:15px; transition:border-color .15s, background .15s, transform .05s}
.choice:hover{border-color:var(--line-2); background:var(--surface-2)}
.choice:active{transform:translateY(1px)}
.choice .k{font-family:var(--display); font-weight:800; color:var(--brand); width:22px; flex:none; font-size:16px}
.choice[disabled]{cursor:default}
.choice.sel-right,.choice.the-right{border-color:var(--good); background:var(--good-bg)}
.choice.sel-wrong{border-color:var(--warn); background:var(--warn-bg)}
.choice .mark{margin-left:auto; font-weight:800; font-size:16px}
.choice.sel-right .mark,.choice.the-right .mark{color:var(--good)} .choice.sel-wrong .mark{color:var(--warn)}
.choice.picked{border-color:var(--brand); background:color-mix(in srgb,var(--brand) 8%,transparent)}

/* feedback */
.fb{display:flex; flex-direction:column; gap:14px; animation:rise .3s ease both}
.verdict{display:flex; align-items:flex-start; gap:12px; padding:15px 18px; border-radius:13px; font-weight:700; font-family:var(--display)}
.verdict.ok{background:var(--good-bg); border:1px solid color-mix(in srgb,var(--good) 45%,transparent); color:var(--good)}
.verdict.no{background:var(--warn-bg); border:1px solid color-mix(in srgb,var(--warn) 45%,transparent); color:var(--warn)}
.verdict .vi{width:28px;height:28px;border-radius:50%; display:flex;align-items:center;justify-content:center; flex:none; font-size:15px; color:#fff}
.verdict.ok .vi{background:var(--good)} .verdict.no .vi{background:var(--warn)}
.verdict .vt2{display:flex;flex-direction:column;gap:3px}
.verdict .vt2 small{font-weight:500; color:var(--ink-2); font-family:var(--body); font-size:13px; line-height:1.45}
.consequence{font-size:13.5px; color:var(--ink-2); background:var(--surface-2); border:1px dashed var(--line-2); border-radius:11px; padding:12px 15px; line-height:1.5}
.consequence b{color:var(--ink); font-weight:600}
.consequence .lab{font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:4px}
.panel{padding:16px 18px; display:flex; flex-direction:column; gap:12px}
.panel h3{font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--brand); font-family:var(--body); font-weight:700}
.flags{display:flex; flex-direction:column; gap:9px; margin:0; padding:0; list-style:none}
.flags li{display:flex; gap:10px; align-items:flex-start; font-size:14px; color:var(--ink-2)}
.flags li .fx{color:var(--brand); font-weight:800; flex:none}
.teach{font-family:var(--serif); font-style:italic; font-size:16.5px; line-height:1.42; color:var(--ink)}
.pay{display:flex; gap:8px; flex-wrap:wrap}
.pay .pc{font-size:12px; font-weight:600; padding:6px 11px; border-radius:999px; border:1px solid var(--line-2); color:var(--muted)}
.pay .pc.on{color:var(--on-brand); border-color:transparent; background:var(--brand)}

/* tally bars */
.tally{display:flex; flex-direction:column; gap:10px}
.tbar{display:flex; flex-direction:column; gap:5px}
.tbar .tl{display:flex; justify-content:space-between; font-size:13.5px; gap:10px}
.tbar .tl .kk{font-family:var(--display); font-weight:800; color:var(--brand)}
.tbar .tl .pc{color:var(--muted); font-variant-numeric:tabular-nums; font-weight:600}
.tbar .track{height:12px; background:var(--surface-2); border:1px solid var(--line); border-radius:7px; overflow:hidden}
.tbar .fill{height:100%; background:var(--line-2); border-radius:7px; transition:width .5s ease}
.tbar.right .fill{background:var(--good)} .tbar.right .tl .kk{color:var(--good)}
.tcount{font-size:12.5px; color:var(--muted); text-align:center}

/* result */
.result{display:flex; flex-direction:column; gap:18px; align-items:center; text-align:center; padding:32px 24px; box-shadow:var(--shadow)}
.ring{position:relative; width:148px; height:148px}
.ring svg{transform:rotate(-90deg)}
.ring .rc{font-family:var(--display); position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center}
.ring .rc b{font-size:34px; font-weight:800; line-height:1}
.ring .rc span{font-size:11px; color:var(--muted); letter-spacing:.1em; text-transform:uppercase}
.verdict-line{font-family:var(--display); font-size:24px; font-weight:800}
.reveal{font-family:var(--serif); font-style:italic; font-size:17px; color:var(--ink); max-width:42ch; line-height:1.45; padding:16px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); width:100%}
.reveal b{font-style:normal; color:var(--brand)}
.recap{width:100%; display:flex; flex-direction:column; gap:8px; text-align:left}
.recap .ri{display:flex; gap:12px; align-items:center; padding:12px 14px; background:var(--surface-2); border:1px solid var(--line); border-radius:12px}
.recap .ri .ic{width:24px;height:24px;border-radius:50%; flex:none; display:flex;align-items:center;justify-content:center; font-size:13px; font-weight:800; color:#fff}
.recap .ri.hit .ic{background:var(--good)} .recap .ri.miss .ic{background:var(--warn)}
.recap .ri .rt{flex:1; min-width:0} .recap .ri .rt b{font-size:14px; display:block} .recap .ri .rt span{font-size:12.5px; color:var(--muted)}
.closer{font-family:var(--serif); font-style:italic; font-size:17px; color:var(--ink-2); max-width:42ch; line-height:1.45}
.footnote{font-size:11.5px; color:var(--muted); text-align:center}

/* forms (host setup, join) */
.form{display:flex; flex-direction:column; gap:14px; padding:26px 24px}
.field{display:flex; flex-direction:column; gap:7px}
.field label{font-size:13px; font-weight:600; color:var(--ink)}
.field input{padding:12px 14px; border:1px solid var(--line-2); border-radius:11px; background:var(--surface); color:var(--ink); font-size:15px}
.trackpick{display:flex; flex-direction:column; gap:9px}
.trackopt{display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border:1px solid var(--line); border-radius:12px; cursor:pointer; background:var(--surface)}
.trackopt:hover{border-color:var(--line-2)} .trackopt.on{border-color:var(--brand); background:color-mix(in srgb,var(--brand) 6%,transparent)}
.trackopt .rd{width:18px;height:18px;border-radius:50%; border:2px solid var(--line-2); flex:none; margin-top:2px}
.trackopt.on .rd{border-color:var(--brand); background:radial-gradient(circle at center, var(--brand) 0 5px, transparent 6px)}
.trackopt .to b{font-size:14.5px; display:block} .trackopt .to span{font-size:12.5px; color:var(--muted)}
.custompick{display:flex; flex-wrap:wrap; gap:8px}
.chip{font-size:13px; padding:8px 12px; border-radius:999px; border:1px solid var(--line-2); color:var(--ink-2); background:var(--surface); cursor:pointer; user-select:none}
.chip.on{background:var(--brand); color:var(--on-brand); border-color:transparent}

/* host console */
.hostbar{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; background:var(--surface); border:1px solid var(--line); border-radius:12px; flex-wrap:wrap}
.hostbar .lhs{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.hostbar .join{font-size:13px; color:var(--ink-2)} .hostbar .join b{color:var(--brand)}
.hostbar .nav{display:flex; gap:8px}
.livecount{font-family:var(--display); font-weight:800; font-size:14px; color:var(--brand)}
.stageview{display:flex; flex-direction:column; gap:20px; animation:rise .34s ease both}
.stage-fac{text-align:center; display:flex; flex-direction:column; gap:14px; align-items:center}
.stage-fac .fbridge{font-family:var(--serif); font-style:italic; font-size:clamp(18px,2.4vw,24px); color:var(--ink-2); max-width:34ch; margin:0 auto; line-height:1.4}
.stage-fac h2{font-size:clamp(24px,4vw,38px); max-width:24ch; line-height:1.1}
.fgrid{display:grid; grid-template-columns:1fr; gap:24px; align-items:start}
@media(min-width:800px){.fgrid.two{grid-template-columns:360px 1fr}}
.fchoice{display:flex; gap:14px; align-items:center; padding:16px 18px; border:2px solid var(--line); border-radius:14px; font-size:clamp(15px,1.8vw,19px); background:var(--surface)}
.fchoice .k{font-family:var(--display); font-weight:800; color:var(--brand); font-size:24px; width:26px; flex:none}
.fchoice.right{border-color:var(--good); background:var(--good-bg)} .fchoice.right .k{color:var(--good)}
.fchoice .mark{margin-left:auto; color:var(--good); font-weight:800; font-size:20px}
.fprompt{text-align:center; font-family:var(--display); font-weight:800; font-size:clamp(18px,2.6vw,26px); color:var(--brand)}
.fflags{display:flex; flex-direction:column; gap:10px; max-width:640px; margin:0 auto; width:100%; padding:0}
.fflags li{display:flex; gap:12px; font-size:clamp(15px,1.8vw,19px); color:var(--ink-2); list-style:none}
.fflags li .fx{color:var(--brand); font-weight:800}
.fteach{font-family:var(--serif); font-style:italic; font-size:clamp(19px,2.6vw,27px); text-align:center; max-width:26ch; margin:0 auto; line-height:1.3}
.qr-note{font-size:12px; color:var(--muted)}

/* participant live */
.live-head{display:flex; flex-direction:column; gap:4px; text-align:center; padding:4px 0 2px}
.live-head .st{font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--brand)}
.waiting{display:flex; flex-direction:column; gap:14px; align-items:center; text-align:center; padding:30px 22px}
.spinner{width:34px;height:34px;border-radius:50%; border:3px solid var(--line); border-top-color:var(--brand); animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.locked{display:flex; gap:10px; align-items:center; justify-content:center; font-size:14px; color:var(--good); font-weight:600; padding:16px; background:var(--good-bg); border:1px solid color-mix(in srgb,var(--good) 40%,transparent); border-radius:12px}

.closing{text-align:center; display:flex; flex-direction:column; gap:18px; align-items:center; padding:30px 20px}
.closing h2{font-size:clamp(26px,4.6vw,40px)}
.pay-big{display:flex; gap:14px; flex-wrap:wrap; justify-content:center}
.pay-big .pc{font-family:var(--display); font-weight:800; font-size:clamp(17px,2.6vw,24px); padding:11px 20px; border-radius:999px; background:var(--brand); color:var(--on-brand)}

.scrim{position:fixed; inset:0; background:rgba(8,10,14,.55); display:flex; align-items:center; justify-content:center; padding:18px; z-index:50}
.modal{background:var(--surface); border:1px solid var(--line); border-radius:16px; max-width:460px; width:100%; padding:22px; display:flex; flex-direction:column; gap:14px; box-shadow:var(--shadow)}
.modal h2{font-size:20px} .modal p{font-size:13.5px; color:var(--ink-2); margin:0}
.aud-row{display:flex; align-items:center; gap:12px; padding:10px 0; border-top:1px solid var(--line)}
.aud-row .al{font-size:13.5px; flex:1} .aud-row .al b{display:block} .aud-row .al span{color:var(--muted); font-size:12px}
.aud-row .stt{font-size:12px; font-weight:600; color:var(--muted)} .aud-row .stt.has{color:var(--good)}
.file-btn{position:relative; overflow:hidden; font-size:13px}
.file-btn input{position:absolute; inset:0; opacity:0; cursor:pointer}

@media (max-width:560px){.logo .cap{display:none} .logo .mark{font-size:15px} .wrap{padding-block:14px 36px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}