:root{--primary:#2563eb;--primary-hover:#1d4ed8;--bg-main:#f0f4f8;--card-bg:#fff;--text-primary:#1e293b;--text-secondary:#64748b;--success:#16a34a;--error:#dc2626;--border:#e2e8f0;font-family:Inter,system-ui,-apple-system,sans-serif;line-height:1.6}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}body{background-color:var(--bg-main);color:var(--text-primary);justify-content:center;align-items:flex-start;min-height:100vh;padding:24px 16px 60px;display:flex}.container{width:100%;max-width:500px;margin:0 auto}.card{background:var(--card-bg);border:1px solid var(--border);border-radius:24px;margin-bottom:20px;padding:32px 28px;box-shadow:0 4px 24px #0000000f}.page-title{letter-spacing:-.03em;margin-bottom:8px;font-size:2rem;font-weight:800;line-height:1.2}.page-subtitle{color:var(--text-secondary);margin-bottom:0;font-size:1rem}.section-label{color:#94a3b8;text-transform:uppercase;letter-spacing:.1em;margin-bottom:12px;font-size:.95rem;font-weight:700}.btn-primary{background:var(--primary);color:#fff;cursor:pointer;text-align:center;border:none;border-radius:20px;justify-content:center;align-items:center;gap:8px;width:100%;padding:22px 24px;font-size:1.15rem;font-weight:700;transition:all .2s;display:flex;box-shadow:0 4px 14px #2563eb4d}.btn-primary:hover{background:var(--primary-hover);transform:translateY(-1px);box-shadow:0 6px 20px #2563eb59}.btn-primary:active{transform:translateY(1px)scale(.98)}.btn-outline{background:var(--card-bg);color:var(--text-primary);border:2px solid var(--border);text-align:left;cursor:pointer;border-radius:20px;flex-direction:column;width:100%;padding:24px 20px;font-size:1.05rem;transition:all .2s;display:flex}.btn-outline:hover{border-color:var(--primary);background:#f8fafc;box-shadow:0 4px 12px #0000000f}.btn-outline:active{border-color:var(--primary);background:#eff6ff}.btn-text{cursor:pointer;color:var(--text-secondary);background:0 0;border:none;padding:12px 0;font-size:1rem;font-weight:600;transition:color .2s}.btn-text:hover{color:var(--text-primary)}.btn-danger-text{cursor:pointer;color:#94a3b8;background:0 0;border:none;width:100%;padding:16px 0;font-size:1rem;font-weight:600;transition:color .2s}.btn-danger-text:hover{color:#ef4444}.input-field{text-align:center;letter-spacing:.2em;width:100%;color:var(--text-primary);background:#f1f5f9;border:2px solid #0000;border-radius:20px;outline:none;margin-bottom:12px;padding:12px 16px;font-size:1.2rem;font-weight:900;transition:all .2s}.input-field:focus{border-color:var(--primary);background:#fff;box-shadow:0 0 0 4px #2563eb1a}.input-field::placeholder{color:#cbd5e1;letter-spacing:normal;font-size:1.4rem;font-weight:400}.stack{flex-direction:column;display:flex}.stack-md{gap:16px}.stack-lg{gap:24px}.stack-xl{gap:32px}.row{flex-direction:row;align-items:center;display:flex}.row-between{flex-direction:row;justify-content:space-between;align-items:center;display:flex}.quiz-header{border-bottom:1px solid var(--border);color:#94a3b8;justify-content:space-between;align-items:center;margin-bottom:20px;padding:16px 0;font-size:.95rem;font-weight:600;display:flex}.quiz-header button{cursor:pointer;color:#94a3b8;background:0 0;border:none;border-radius:10px;padding:8px 12px;font-size:.95rem;font-weight:700;transition:all .2s}.quiz-header button:hover{color:var(--text-primary);background:#f1f5f9}.quiz-submit-btn{color:var(--primary)!important}.progress-container{background:#e2e8f0;border-radius:99px;height:5px;margin-bottom:36px;overflow:hidden}.question-text{white-space:pre-wrap;text-align:left;color:var(--text-primary);margin-bottom:28px;font-size:1.15rem;font-weight:500;line-height:1.75}.option-list{flex-direction:column;gap:14px;display:flex}.option-btn{text-align:left;border:2px solid var(--border);width:100%;color:var(--text-primary);cursor:pointer;white-space:pre-wrap;background:#fff;border-radius:18px;padding:20px 18px;font-size:1rem;line-height:1.5;transition:all .15s;box-shadow:0 1px 3px #0000000a}.option-btn:active{transform:scale(.985)}.option-btn.selected{border-color:var(--primary);color:var(--primary);background:#eff6ff;font-weight:700;box-shadow:0 0 0 3px #2563eb1f}.option-btn.user-selected{color:#b91c1c;background:#fef2f2;border-color:#dc2626;font-weight:700;box-shadow:0 0 0 3px #dc26261f}.option-btn.correct{color:#047857;background:#ecfdf5;border-color:#16a34a;font-weight:700;box-shadow:0 0 0 3px #16a34a1f}.quiz-footer{border-top:2px solid var(--border);justify-content:space-between;align-items:center;gap:16px;width:100%;margin-top:56px;padding-top:24px;display:flex}.nav-btn{border:2px solid var(--border);color:var(--text-primary);cursor:pointer;background:#fff;border-radius:16px;flex:1;justify-content:center;align-items:center;gap:8px;padding:18px 16px;font-size:1.05rem;font-weight:700;transition:all .2s;display:flex;box-shadow:0 1px 3px #0000000d}.nav-btn:disabled{opacity:.25;cursor:not-allowed;box-shadow:none}.nav-btn:not(:disabled):hover{border-color:var(--primary);color:var(--primary);background:#eff6ff}.nav-btn:not(:disabled):active{transform:scale(.97)}.explanation-text{white-space:pre-wrap;text-align:left;line-height:1.7}.review-footer{border-top:2px solid var(--border);justify-content:space-between;align-items:center;gap:16px;margin-top:48px;padding-top:24px;display:flex}.review-nav-btn{border:2px solid var(--border);color:var(--text-primary);cursor:pointer;background:#fff;border-radius:14px;flex:1;justify-content:center;align-items:center;gap:6px;padding:16px;font-size:.95rem;font-weight:700;transition:all .2s;display:flex}.review-nav-btn:disabled{opacity:.2;cursor:not-allowed}.review-nav-btn.primary{border-color:var(--primary);color:var(--primary);background:#eff6ff}.leaderboard-card{border:1px dashed var(--border);background:#fff;border-radius:20px;margin-bottom:28px;padding:20px}.leaderboard-title{color:#94a3b8;text-align:center;letter-spacing:.05em;margin-bottom:14px;font-size:.8rem;font-weight:700}.leaderboard-item{background:#f8fafc;border-radius:10px;justify-content:space-between;align-items:center;margin-bottom:8px;padding:10px 12px;display:flex}.leaderboard-item:last-child{margin-bottom:0}.leaderboard-rank{border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:22px;height:22px;margin-right:10px;font-size:.7rem;font-weight:800;display:flex}.leaderboard-id{color:var(--text-secondary);flex:1;font-family:monospace;font-size:.85rem;font-weight:700}.leaderboard-score{color:var(--primary);font-size:.9rem;font-weight:800}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.mt-10{margin-top:2.5rem}.mt-12{margin-top:3rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.mb-10{margin-bottom:2.5rem}.mb-12{margin-bottom:3rem}.pt-4{padding-top:1rem}.pb-4{padding-bottom:1rem}.text-sm{font-size:.875rem}.text-xs{font-size:.75rem}.text-lg{font-size:1.125rem}.text-xl{font-size:1.25rem}.text-2xl{font-size:1.5rem}.text-6xl{font-size:3.75rem}.font-bold{font-weight:700}.font-black{font-weight:900}.font-medium{font-weight:500}.text-left{text-align:left}.text-center{text-align:center}.leading-relaxed{line-height:1.625}.tracking-tight{letter-spacing:-.025em}.text-slate-400{color:#94a3b8}.text-slate-500{color:#64748b}.text-slate-600{color:#475569}.text-slate-700{color:#334155}.text-slate-800{color:#1e293b}.text-slate-900{color:#0f172a}.text-blue-600{color:#2563eb}.text-green-700{color:#15803d}.text-red-600{color:#dc2626}.text-yellow-800{color:#854d0e}.text-yellow-700{color:#a16207}.text-cyan-600{color:#0891b2}.text-green-500{color:#22c55e}.text-yellow-500{color:#eab308}.bg-red-50{background-color:#fef2f2}.bg-green-50{background-color:#f0fdf4}.bg-yellow-50{background-color:#fefce8}.border-red-100{border-color:#fee2e2}.border-green-100{border-color:#dcfce7}.border-yellow-100{border-color:#fef9c3}.border-slate-100{border-color:#f1f5f9}.rounded-xl{border-radius:12px}.rounded-2xl{border-radius:16px}.w-full{width:100%}.mx-auto{margin-left:auto;margin-right:auto}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:4px}.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}.gap-6{gap:24px}.gap-8{gap:32px}.grid{display:grid}.grid-cols-1{grid-template-columns:repeat(1,1fr)}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.border{border-style:solid;border-width:1px}.border-t{border-top-style:solid;border-top-width:1px;border-color:var(--border)}.border-b{border-bottom-style:solid;border-bottom-width:1px;border-color:var(--border)}.border-dashed{border-style:dashed}.border-slate-200{border-color:#e2e8f0}.shadow-sm{box-shadow:0 1px 3px #00000012}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.max-h-56{max-height:224px}.shrink-0{flex-shrink:0}.min-w-0{min-width:0}.flex-1{flex:1}.space-y-3>*+*{margin-top:.75rem}.space-y-4>*+*{margin-top:1rem}.space-y-8>*+*{margin-top:2rem}.py-8{padding-top:2rem;padding-bottom:2rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.transition-colors{transition:color .2s,background-color .2s,border-color .2s}.hover\:text-red-500:hover{color:#ef4444}.hover\:bg-blue-50:hover{background-color:#eff6ff}.hover\:bg-black:hover{background-color:#000}.hover\:underline:hover{text-decoration:underline}.hover\:border-blue-500:hover{border-color:var(--primary)}.uppercase{text-transform:uppercase}.font-mono{font-family:monospace}.block{display:block}.hidden{display:none}.accent-blue-600{accent-color:#2563eb}.w-4{width:1rem}.h-4{height:1rem}.w-6{width:1.5rem}.h-6{height:1.5rem}.pt-1{padding-top:.25rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.admin-btn{cursor:pointer;color:#2563eb;background:#fff;border:2px solid #bfdbfe;border-radius:16px;width:100%;margin-bottom:12px;padding:18px 20px;font-size:1rem;font-weight:700;transition:all .2s}.admin-btn:hover{background:#eff6ff}.admin-btn-dark{cursor:pointer;color:#fff;background:#0f172a;border:none;border-radius:16px;width:100%;margin-bottom:12px;padding:18px 20px;font-size:1rem;font-weight:700;transition:all .2s}.admin-btn-dark:hover{background:#000}