@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap";:root{--bg-dark:#f8fafc;--bg-darker:#eaeff5;--bg-card:#c3b9ff59;--bg-card-hover:#c3b9ff7a;--bg-surface-tint:#6366f114;--bg-surface-tint-hover:#6366f124;--primary:#4f46e5;--primary-hover:#4338ca;--primary-glow:#4f46e566;--secondary:#db2777;--secondary-hover:#be185d;--secondary-glow:#db277766;--success:#059669;--success-glow:#05966966;--danger:#ef4444;--danger-glow:#ef444466;--text-main:#0f172a;--text-muted:#475569;--text-dark:#1e293b;--border-subtle:#0f172a14;--border-strong:#0f172a26;--shadow-glass:0 10px 40px #0000000f;--transition-fast:.15s ease-in-out;--transition-smooth:.3s cubic-bezier(.4, 0, .2, 1);--radius-sm:8px;--radius-md:12px;--radius-lg:24px;--radius-pill:9999px}*{box-sizing:border-box;margin:0;padding:0}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--primary);opacity:.5}body{background-color:var(--bg-darker);color:var(--text-main);-webkit-font-smoothing:antialiased;min-height:100vh;transition:background-color var(--transition-smooth), color var(--transition-fast);font-family:Inter,system-ui,-apple-system,sans-serif;line-height:1.6;overflow-x:hidden}#root{flex-direction:column;min-height:100vh;display:flex}h1,h2,h3,h4,h5,h6{color:var(--text-main);margin-bottom:.75rem;font-weight:700;line-height:1.2}h1{letter-spacing:-.02em;font-size:2.5rem}h2{letter-spacing:-.01em;font-size:2rem}h3{font-size:1.5rem}p{color:var(--text-muted);margin-bottom:1rem}.text-gradient{background:linear-gradient(135deg,#a5b4fc,#f472b6);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.glow-text{background:linear-gradient(135deg, var(--text-main) 0%, var(--primary) 50%, var(--secondary) 100%);-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 1px #ffffff1a);-webkit-background-clip:text;background-clip:text}.glow-text.primary{background:linear-gradient(135deg, var(--text-main) 0%, var(--primary) 60%, var(--primary-hover) 100%)}.glow-text.secondary{background:linear-gradient(135deg, var(--text-main) 0%, var(--secondary) 60%, var(--secondary-hover) 100%)}.glass-panel{background:var(--bg-card);-webkit-backdrop-filter:blur(20px)saturate(160%);border-radius:var(--radius-lg);box-shadow:var(--shadow-glass);transition:all var(--transition-smooth);background-image:linear-gradient(135deg,#8b5cf614,#6366f10a);border:1px solid #8b5cf633}.glass-panel:hover{background:var(--bg-card-hover);border-color:var(--border-strong)}.glass-panel.glow-primary:hover{box-shadow:0 0 20px var(--primary-glow);border-color:var(--primary)}.glass-panel.glow-secondary:hover{box-shadow:0 0 20px var(--secondary-glow);border-color:var(--secondary)}.glass-panel.glow-success:hover{box-shadow:0 0 20px var(--success-glow);border-color:var(--success)}.glass-panel.glow-danger:hover{box-shadow:0 0 20px var(--danger-glow);border-color:var(--danger)}.container{width:100%;max-width:1200px;margin:0 auto;padding:0 1.5rem}@media (width<=640px){.container{padding:0 1rem}}.app-main{flex-direction:column;flex:1;padding-top:4rem;padding-bottom:4rem;display:flex}.flex-center{justify-content:center;align-items:center;display:flex}.flex-between{justify-content:space-between;align-items:center;display:flex}.grid-cols-2{grid-template-columns:repeat(2,1fr);gap:1.5rem;display:grid}.grid-cols-3{grid-template-columns:repeat(3,1fr);gap:1.5rem;display:grid}.responsive-grid-2{grid-template-columns:repeat(2,1fr);gap:1.5rem;display:grid}.responsive-grid-3{grid-template-columns:repeat(3,1fr);gap:1.5rem;display:grid}.responsive-flex{gap:1rem;display:flex}.quiz-layout{grid-template-columns:1.15fr 1fr;height:calc(100vh - 58px);display:grid;overflow:hidden}.reading-layout{grid-template-columns:1fr 300px;height:calc(100vh - 58px);display:grid;overflow:hidden}.reading-page-wrapper{flex-direction:column;height:calc(100vh - 58px);display:flex;overflow:hidden}@media (width<=768px){.reading-page-wrapper{height:auto!important;overflow:visible!important}}@media (width<=1024px){.responsive-grid-3{grid-template-columns:repeat(2,1fr)}}@media (width<=768px){.grid-cols-2,.grid-cols-3,.responsive-grid-2,.responsive-grid-3{grid-template-columns:1fr}.responsive-flex{flex-direction:column}h1{font-size:2rem}.quiz-layout,.reading-layout{grid-template-columns:1fr!important;height:auto!important;overflow-y:visible!important}.quiz-layout>div,.reading-layout>div{border-right:none!important;height:auto!important;overflow-y:visible!important}.nav-link span,.nav-link-text{display:none}.nav-link{padding:.5rem}.logo-text,.nav-divider,.user-level-badge{display:none!important}}.main-nav{justify-content:space-between;align-items:center;padding:.75rem 2rem;display:flex}@media (width<=768px){.main-nav{padding:.5rem 1rem}}@media (width<=480px){h1{font-size:1.75rem}.app-main{padding-top:2rem;padding-bottom:2rem}}.btn{border-radius:var(--radius-pill);cursor:pointer;transition:all var(--transition-fast);border:none;justify-content:center;align-items:center;gap:.5rem;padding:.75rem 1.5rem;font-family:inherit;font-size:1rem;font-weight:600;text-decoration:none;display:inline-flex}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}.btn-primary{background:var(--primary);color:#fff;box-shadow:0 4px 14px #6366f163}.btn-primary:not(:disabled):hover{background:var(--primary-hover);transform:translateY(-2px);box-shadow:0 6px 20px #6366f199}.btn-outline{color:var(--text-main);border:1px solid var(--border-strong);background:0 0}.btn-outline:not(:disabled):hover{background:var(--border-subtle);border-color:var(--text-main)}.nav-link{color:var(--text-muted);cursor:pointer;border-radius:var(--radius-sm);transition:all var(--transition-fast);background:0 0;border:none;align-items:center;gap:.4rem;padding:.4rem .75rem;font-family:inherit;font-size:.9rem;display:flex}.nav-link:hover{color:var(--text-main);background:var(--border-subtle)}.nav-link.active{color:var(--primary);background:#6366f11a}.badge{border-radius:var(--radius-pill);background:var(--border-subtle);color:var(--text-muted);align-items:center;gap:.3rem;padding:.2rem .7rem;font-size:.75rem;font-weight:600;display:inline-flex}.badge.primary{color:var(--primary);background:#6366f126}.badge.secondary{color:var(--secondary);background:#ec489926}.badge.success{color:var(--success);background:#10b98126}.badge.danger{color:var(--danger);background:#ef444426}.input-group{flex-direction:column;gap:.5rem;margin-bottom:1.25rem;display:flex}.input-label{color:var(--text-muted);font-size:.875rem;font-weight:500}.input-field{background:var(--bg-card);border:1px solid var(--border-strong);border-radius:var(--radius-md);width:100%;color:var(--text-main);transition:all var(--transition-fast);padding:.75rem 1rem;font-family:inherit;font-size:1rem}.input-field::placeholder{color:var(--text-muted);opacity:.7}.input-field:focus{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary-glow);outline:none}textarea.input-field{resize:vertical;min-height:120px}@keyframes pulseGlow{0%{box-shadow:0 0 15px var(--primary-glow)}50%{box-shadow:0 0 30px var(--primary-glow)}to{box-shadow:0 0 15px var(--primary-glow)}}.animate-pulse-glow{animation:2s infinite pulseGlow}.spinner{border:3px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:24px;height:24px;animation:1s ease-in-out infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.fade-in-up{animation:.5s ease-out forwards fadeInUp}.page-header{text-align:center;margin-bottom:3rem}.page-header h1{margin-bottom:.5rem}.page-header p{max-width:500px;margin:0 auto;font-size:1.15rem}