:root{--bg:#08131a;--bg-soft:#0f2230;--ink:#e9f4fb;--muted:#b2cad9;--line:rgba(133,183,214,0.35);--card:rgba(10,28,39,0.86);--accent:#5fd4c5;--accent-2:#9be7dc}*{box-sizing:border-box}body{margin:0;color:var(--ink);font-family:Segoe UI,Trebuchet MS,sans-serif;background:radial-gradient(1200px 500px at 10% 0,rgba(95,212,197,.16),transparent 60%),radial-gradient(1000px 600px at 100% 0,rgba(155,231,220,.12),transparent 65%),linear-gradient(180deg,#071018,#08131a 55%,#060d13)}.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:14px;background:var(--card);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.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:rgba(10,28,39,.5);color:var(--ink);border-radius:999px;padding:10px 14px;cursor:pointer;text-transform:capitalize}.tab.active{background:linear-gradient(135deg,rgba(95,212,197,.35),rgba(95,212,197,.2));border-color:rgba(95,212,197,.7)}.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:14px;border:1px solid var(--line);background:var(--card)}.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}.action.primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#03232a}.action.ghost{background:transparent;color:var(--ink);border-color:var(--line)}.action.option{background:rgba(159,227,217,.14);color:var(--ink);border-color:rgba(159,227,217,.4)}.state{color:var(--muted)}.state.error{color:#ffb3b3}.muted{color:var(--muted)}.question-box{border:1px solid var(--line);border-radius:12px;background:rgba(15,34,48,.8);padding:14px}.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{width:100%;border:1px solid var(--line);background:rgba(8,19,26,.9);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:#d6dbe2;text-align:center;grid-gap:8px;gap:8px}.live-placeholder span{color:#8f9cab;font-size:.92rem}.class-live-controls{background:rgba(15,34,48,.72);margin-bottom:14px}.class-card,.class-live-controls{border:1px solid var(--line);border-radius:12px;padding:12px}.class-card{background:rgba(15,34,48,.8)}.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}.participants-list{display:grid;grid-gap:10px;gap:10px}.participant-item{border:1px solid var(--line);border-radius:12px;background:rgba(15,34,48,.74);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(159,227,217,.42);background:rgba(159,227,217,.14);color:var(--ink);border-radius:999px;padding:4px 8px;font-size:.78rem}.badge.hand{border-color:rgba(255,221,125,.44);background:rgba(255,221,125,.14)}.badge.speak{border-color:rgba(124,244,212,.5);background:rgba(124,244,212,.18)}.small{font-size:.82rem}@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}}