:root{--bg:#ffffff;--bg-soft:#ffffff;--ink:#182436;--muted:#5a6d82;--line:#d8e5f2;--card:#ffffff;--accent:#157fb7;--accent-2:#2ea4da}*{box-sizing:border-box}body{margin:0;color:var(--ink);font-family:Segoe UI,Trebuchet MS,sans-serif;background:#ffffff}.system-wrap{max-width:1220px;margin:0 auto;padding:20px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--card);box-shadow:0 10px 30px rgba(24,56,90,.08)}.topbar h1{margin:0;font-size:clamp(1.3rem,3.2vw,2.2rem)}.topbar p{margin:6px 0 0;color:var(--muted);font-size:.95rem}.tabs{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}.tab{border:1px solid var(--line);background:#ffffff;color:var(--ink);border-radius:999px;padding:10px 14px;cursor:pointer;text-transform:capitalize;transition:all .2s ease}.tab.active{background:linear-gradient(135deg,rgba(21,127,183,.13),rgba(46,164,218,.1));border-color:rgba(21,127,183,.35);color:#0d5d88}.panel-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:16px;gap:16px;margin-top:16px}.panel{margin-top:16px;padding:18px;border-radius:16px;border:1px solid var(--line);background:var(--card);box-shadow:0 8px 24px rgba(16,42,72,.06)}.panel h2{margin:0 0 12px}.row{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0}.action{border:1px solid transparent;border-radius:10px;padding:10px 14px;font-weight:700;cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease}.action.primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#ffffff;box-shadow:0 8px 18px rgba(21,127,183,.24)}.action.ghost{background:#ffffff;color:var(--ink);border-color:var(--line)}.action.option{background:rgba(21,127,183,.08);color:var(--ink);border-color:rgba(21,127,183,.3)}.action:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(12,39,69,.14)}.state{color:var(--muted)}.state.error{color:#b63b3b}.muted{color:var(--muted)}.question-box{border:1px solid var(--line);border-radius:12px;background:#ffffff;padding:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}.trivia-scene{position:relative;width:100%;height:180px;border-radius:12px;margin-bottom:12px;overflow:hidden;background:radial-gradient(circle at 50% -10%,rgba(255,220,160,.45),transparent 38%),linear-gradient(180deg,#101b29,#08111b 55%,#05090f);border:1px solid rgba(255,255,255,.12)}.trivia-scene.theme-pink{background:radial-gradient(circle at 50% -10%,rgba(255,190,220,.5),transparent 40%),linear-gradient(180deg,#2b1024,#1a0a16 55%,#12070f)}.trivia-scene.theme-yellow{background:radial-gradient(circle at 50% -10%,rgba(255,236,150,.5),transparent 40%),linear-gradient(180deg,#2f260a,#1f1808 55%,#141006)}.trivia-scene.theme-blue{background:radial-gradient(circle at 50% -10%,rgba(164,214,255,.45),transparent 40%),linear-gradient(180deg,#101b29,#08111b 55%,#05090f)}.trivia-scene.theme-green{background:radial-gradient(circle at 50% -10%,rgba(170,241,196,.45),transparent 40%),linear-gradient(180deg,#11261a,#0b1711 55%,#07100a)}.audience{left:0;right:0;bottom:0;height:56px;background:radial-gradient(circle at 8% 25%,#253849 0 9px,transparent 10px),radial-gradient(circle at 18% 35%,#2c4152 0 10px,transparent 11px),radial-gradient(circle at 28% 25%,#223546 0 9px,transparent 10px),radial-gradient(circle at 38% 35%,#2d4354 0 10px,transparent 11px),radial-gradient(circle at 48% 25%,#25394a 0 9px,transparent 10px),radial-gradient(circle at 58% 35%,#2c4152 0 10px,transparent 11px),radial-gradient(circle at 68% 25%,#223546 0 9px,transparent 10px),radial-gradient(circle at 78% 35%,#2d4354 0 10px,transparent 11px),radial-gradient(circle at 88% 25%,#25394a 0 9px,transparent 10px),linear-gradient(180deg,rgba(10,19,28,.65),rgba(5,10,16,.95))}.audience,.host{position:absolute}.host{bottom:42px;width:42px;height:88px;border-radius:18px 18px 12px 12px;background:linear-gradient(180deg,#2ec9ff,#1579a5);box-shadow:0 8px 20px rgba(0,0,0,.35)}.host:before{content:"";position:absolute;top:-18px;left:10px;width:22px;height:22px;border-radius:50%;background:#f1c79a}.host-left{left:26%}.host-right{right:26%;background:linear-gradient(180deg,#62f2c8,#2a9a7f)}.player-avatar{position:absolute;left:4px;top:18px;width:34px;height:34px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.85)}.stage-light{position:absolute;top:-18px;width:150px;height:220px;background:linear-gradient(180deg,rgba(255,248,220,.4),rgba(255,248,220,0));-webkit-clip-path:polygon(45% 0,55% 0,100% 100%,0 100%);clip-path:polygon(45% 0,55% 0,100% 100%,0 100%)}.light-a{left:12%}.light-b{right:12%}.options{grid-template-columns:repeat(2,minmax(0,1fr))}.chat-form,.class-form,.options{display:grid;grid-gap:10px;gap:10px}.chat-form,.class-form{margin-bottom:12px}.chat-form input,.class-form input,.class-form select,.row input,.row select{width:100%;border:1px solid var(--line);background:#ffffff;color:var(--ink);border-radius:10px;padding:10px}.class-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));grid-gap:12px;gap:12px}.classes-layout{margin-top:16px;display:grid;grid-template-columns:minmax(0,1.8fr) minmax(280px,1fr);grid-gap:16px;gap:16px}.live-stage{aspect-ratio:16/9;border-radius:14px;border:1px solid var(--line);margin-bottom:14px;overflow:hidden}.live-frame,.live-stage{width:100%;background:#000}.live-frame{height:100%;border:0}.live-placeholder{width:100%;height:100%;display:grid;place-items:center;align-content:center;color:#3c4a59;text-align:center;grid-gap:8px;gap:8px}.live-placeholder span{color:#617488;font-size:.92rem}.class-live-controls{margin-bottom:14px}.class-card,.class-live-controls{border:1px solid var(--line);border-radius:12px;background:#ffffff;padding:12px}.class-card{box-shadow:0 4px 12px rgba(17,50,82,.06)}.class-card h3{margin:0 0 8px}.empty-card{margin-top:20px;border:1px solid var(--line);border-radius:14px;padding:20px;background:var(--card)}.participants-panel{height:-moz-fit-content;height:fit-content}.upcoming-classes{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}.upcoming-classes h3{margin:0 0 8px}.upcoming-list{display:grid;grid-gap:8px;gap:8px}.upcoming-item{border:1px solid var(--line);border-radius:10px;background:#ffffff;padding:8px 10px}.upcoming-title{margin:0 0 4px;font-weight:700}.qa-list{display:grid;grid-gap:12px;gap:12px;margin-top:12px}.qa-item{border:1px solid var(--line);border-radius:12px;background:#ffffff;padding:12px}.qa-meta{margin:0 0 8px;color:var(--muted);font-size:.84rem}.qa-question{margin:0 0 10px;font-weight:700}.qa-answer{border:1px solid rgba(30,167,184,.32);border-radius:10px;padding:10px;background:rgba(30,167,184,.09)}.qa-answer p{margin:0}.qa-reply{margin-top:10px;display:grid;grid-gap:8px;gap:8px}.qa-reply input{width:100%;border:1px solid var(--line);background:#ffffff;color:var(--ink);border-radius:10px;padding:10px}.participants-list{display:grid;grid-gap:10px;gap:10px}.participant-item{border:1px solid var(--line);border-radius:12px;background:#ffffff;padding:10px}.participant-name{margin:0;font-weight:700}.participant-badges{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}.badge{border:1px solid rgba(30,167,184,.3);background:rgba(30,167,184,.12);color:var(--ink);border-radius:999px;padding:4px 8px;font-size:.78rem}.badge.hand{border-color:rgba(220,170,60,.45);background:rgba(246,215,134,.32)}.badge.speak{border-color:rgba(47,168,127,.42);background:rgba(155,233,203,.35)}.small{font-size:.82rem}.m3d-gameover-backdrop{position:fixed;inset:0;background:rgba(8,20,33,.48);display:grid;place-items:center;z-index:90}.m3d-gameover-card{width:min(680px,92vw);border:1px solid var(--line);border-radius:14px;background:#ffffff;color:var(--ink);padding:18px;box-shadow:0 14px 30px rgba(15,42,71,.16)}.m3d-gameover-card h3{margin:0 0 8px}.m3d-gameover-card p{margin:0}.m3d-gameover-actions{margin-top:14px;display:flex;gap:10px}@media (max-width:860px){.options,.panel-grid{grid-template-columns:1fr}.topbar{flex-direction:column;align-items:flex-start}.classes-layout{grid-template-columns:1fr}}