:root{ --bg:#070b18; --panel:#0f172a; --muted:#94a3b8; --ink:#e5e7eb; --accent:#22c55e; --warn:#f59e0b; --card:#0b1222; --stroke:#1f2937; }
*{box-sizing:border-box}
html,body,#app{height:100%}
body{margin:0; font-family:Inter, ui-sans-serif, system-ui, Segoe UI, Roboto; color:var(--ink); background:radial-gradient(120% 120% at 70% -10%, #0f2f20, var(--bg)) fixed;}
a{color:#38bdf8; text-decoration:none}
.center{display:flex; gap:8px; align-items:center; justify-content:center}
.mute{opacity:.8}
.sub{color:var(--muted); font-size:13px}
.small{font-size:13px}
.mt{margin-top:10px}

.panel{background:linear-gradient(180deg, var(--card), #0b1428); border:1px solid var(--stroke); border-radius:16px; padding:16px; margin:12px auto; max-width:1000px; box-shadow:0 12px 40px #0006;}
.header{display:flex; align-items:center; justify-content:space-between}
.row{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.badge{display:inline-flex; gap:6px; align-items:center; border:1px solid #1f2937; background:#0b1222; padding:6px 10px; border-radius:999px; font-size:12px}
.btn{appearance:none; border:1px solid var(--stroke); background:#0b1222; color:var(--ink); padding:10px 12px; border-radius:12px; cursor:pointer}
.btn.primary{background:linear-gradient(135deg,#16a34a,#22c55e); color:white; border:none}
.btn.warn{background:linear-gradient(135deg,#f59e0b,#fbbf24); color:black; border:none}
.btn:disabled{opacity:.5; cursor:not-allowed}
input,select{padding:10px 12px; border-radius:10px; border:1px solid var(--stroke); background:#0b1222; color:var(--ink)}

.roles{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:8px}
.chip{border:1px solid #334155; background:#0b1222; padding:8px 10px; border-radius:999px; cursor:pointer; display:inline-flex; align-items:center; gap:6px}
.chip[aria-checked="true"]{outline:2px solid #22c55e}

.card{background:#0b1222; border:1px solid #223048; border-radius:14px; padding:12px}
.quiz{display:grid; gap:10px; margin-top:8px}
.opt{padding:12px 14px; border:1px solid #334155; border-radius:12px; background:#0b1222; cursor:pointer}
.opt[aria-checked="true"]{outline:2px solid #22c55e}
.opt.right{background:#052e16; border-color:#166534}
.opt.wrong{background:#2b1111; border-color:#7f1d1d}

.table{width:100%; border-collapse:collapse; font-size:14px}
th,td{padding:8px 10px; border-bottom:1px solid #223048}
th{background:#0f172a; position:sticky; top:0}
.right{text-align:right}

dialog{border:none; background:#0b1222; color:var(--ink); border-radius:16px; padding:0; box-shadow:0 30px 80px #0007}
dialog .dlg{padding:16px}
dialog::backdrop{background:#000a}

.confetti{position:fixed; pointer-events:none; left:0; top:0; width:100%; height:100%; overflow:hidden}
.confetti span{position:absolute; font-size:20px; animation: fall 1.8s linear forwards}
@keyframes fall{from{transform:translateY(-20px) rotate(0)} to{transform:translateY(100vh) rotate(720deg); opacity:.1}}