:root{
  --primary: #7C3AED;
  --secondary: #22D3EE;
  --bg-dark: #150F30;
  --bg-darker: #0d0a1f;
  --card: #ffffff;
  --text: #1f2937;
  --radius: 16px;
  font-family: 'Segoe UI', -apple-system, Roboto, Helvetica, Arial, sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg-darker);color:#fff;min-height:100vh}
a{color:inherit}
.app-shell{display:flex;min-height:100vh}
.sidebar{width:230px;background:var(--bg-dark);padding:24px 16px;flex-shrink:0}
.sidebar .brand{display:flex;align-items:center;gap:10px;margin-bottom:28px;font-weight:800;font-size:18px}
.sidebar .brand img{height:32px}
.sidebar nav a{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:10px;color:#cbd5e1;text-decoration:none;font-size:14px;margin-bottom:4px;font-weight:600}
.sidebar nav a:hover, .sidebar nav a.active{background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff}
.main{flex:1;padding:32px 40px;background:#f4f5fb;color:var(--text);border-radius:24px 0 0 0}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}
.topbar h1{margin:0;font-size:24px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:10px;border:none;background:var(--primary);color:#fff;font-weight:700;cursor:pointer;text-decoration:none;font-size:14px;transition:.15s}
.btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn-secondary{background:#e5e7eb;color:#1f2937}
.btn-danger{background:#ef4444}
.btn-ghost{background:transparent;border:1px solid #d1d5db;color:#374151}
.card{background:var(--card);border-radius:var(--radius);padding:24px;box-shadow:0 4px 20px rgba(20,10,60,.06);margin-bottom:20px}
table{width:100%;border-collapse:collapse}
table th{text-align:left;font-size:12px;text-transform:uppercase;color:#6b7280;padding:10px 12px;border-bottom:2px solid #eef0f6}
table td{padding:12px;border-bottom:1px solid #eef0f6;font-size:14px}
table tr:hover td{background:#faf9ff}
.badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:700}
.badge-green{background:#dcfce7;color:#166534}
.badge-gray{background:#e5e7eb;color:#374151}
.badge-purple{background:#ede9fe;color:#5b21b6}
.form-group{margin-bottom:16px}
.form-group label{display:block;font-weight:700;font-size:13px;margin-bottom:6px;color:#374151}
.form-group input[type=text], .form-group input[type=number], .form-group input[type=email], .form-group input[type=password], .form-group textarea, .form-group select{
  width:100%;padding:11px 14px;border:1px solid #d9dbe9;border-radius:10px;font-size:14px;background:#fff}
.form-group textarea{min-height:80px;resize:vertical}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;margin-bottom:24px}
.stat-card{background:linear-gradient(135deg,var(--primary),var(--secondary));border-radius:var(--radius);padding:20px;color:#fff}
.stat-card .num{font-size:30px;font-weight:800}
.stat-card .label{font-size:13px;opacity:.9}
.flash{padding:12px 16px;border-radius:10px;margin-bottom:16px;font-size:14px;font-weight:600}
.flash.ok{background:#dcfce7;color:#166534}
.flash.err{background:#fee2e2;color:#991b1b}

/* ===== Kahoot-style live game screens ===== */
.stage{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle at top,#2a1663,#0d0a1f 70%);text-align:center;padding:20px}
.pin-box{background:#fff;color:#1f2937;border-radius:20px;padding:26px 46px;font-size:52px;font-weight:900;letter-spacing:10px;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.pin-label{margin-top:14px;font-size:15px;color:#c4b5fd;letter-spacing:2px;text-transform:uppercase}
.player-grid{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:30px;max-width:900px}
.player-chip{background:#ffffff20;border:2px solid #ffffff40;padding:10px 20px;border-radius:30px;font-weight:700;font-size:15px;animation:pop .25s ease}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
.q-header{width:100%;max-width:900px;background:#ffffff10;border-radius:16px;padding:18px 26px;margin-bottom:20px;font-size:22px;font-weight:800}
.timer-ring{width:70px;height:70px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:22px;background:conic-gradient(var(--secondary) calc(var(--pct)*1%), #ffffff20 0);margin:0 auto 18px}
.options-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;width:100%;max-width:900px}
.opt-btn{padding:28px 20px;border:none;border-radius:16px;font-size:19px;font-weight:800;color:#fff;cursor:pointer;display:flex;align-items:center;gap:14px;box-shadow:0 8px 24px rgba(0,0,0,.25);transition:.12s}
.opt-btn:hover{transform:translateY(-2px)}
.opt-btn:active{transform:scale(.97)}
.opt-btn.shape{width:28px;height:28px;border-radius:6px;background:#ffffff40;flex-shrink:0;display:flex}
.opt-0{background:#e21b3c}.opt-1{background:#1368ce}.opt-2{background:#d89e00}.opt-3{background:#26890c}
.opt-btn.correct{outline:5px solid #22c55e}
.opt-btn.incorrect{opacity:.45}
.leaderboard-list{width:100%;max-width:600px;text-align:left}
.lb-row{display:flex;align-items:center;justify-content:space-between;background:#ffffff15;padding:14px 22px;border-radius:12px;margin-bottom:10px;font-weight:700;font-size:17px}
.lb-row.top1{background:linear-gradient(135deg,#f59e0b,#facc15);color:#3b2a00}
.big-emoji{font-size:60px}
.nickname-form{background:#fff;color:#1f2937;padding:32px;border-radius:20px;width:340px;max-width:92vw}
.nickname-form input{width:100%;padding:14px;border-radius:10px;border:1px solid #d1d5db;font-size:16px;margin-bottom:12px}
.nickname-form button{width:100%;padding:14px;border:none;border-radius:10px;background:var(--primary);color:#fff;font-weight:800;font-size:16px;cursor:pointer}
.correct-mark{font-size:80px}
footer.credit{margin-top:40px;font-size:12px;color:#8b83b0}
@media(max-width:640px){.options-grid{grid-template-columns:1fr}.pin-box{font-size:34px;padding:18px 24px;letter-spacing:6px}}