:root{--navy: #FFF8F0;--navy-2: #FFFFFF;--navy-3: #FFFDF9;--navy-4: #F3EDE6;--navy-card: #FFFFFF;--lime: #22C55E;--lime-dim: #16A34A;--lime-glow: rgba(34, 197, 94, .14);--coral: #DC2626;--coral-dim: #B91C1C;--coral-glow: rgba(220, 38, 38, .1);--violet: #4F46E5;--violet-dim: #4338CA;--violet-glow: rgba(79, 70, 229, .12);--amber: #F59E0B;--teal: #22C55E;--pink: #F59E0B;--lessons-card: #DCFCE7;--xp-card: #FEF3C7;--streak-card: #FEE2E2;--badges-card: #E0E7FF;--text-primary: #1F2937;--text-secondary: #6B7280;--text-muted: #9CA3AF;--border: #EEE7DE;--border-hover: #DDD1C3;--radius-sm: 8px;--radius-md: 14px;--radius-lg: 20px;--radius-xl: 28px;--shadow-card: 0 18px 40px rgba(127, 91, 53, .08);--shadow-glow-lime: 0 10px 28px rgba(34, 197, 94, .16);--font-display: "Fredoka One", cursive;--font-body: "Nunito", sans-serif;--sidebar-w: 76px;--topbar-h: 64px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;background:radial-gradient(circle at top right,rgba(79,70,229,.08),transparent 30%),radial-gradient(circle at bottom left,rgba(34,197,94,.08),transparent 28%),var(--navy);color:var(--text-primary);font-family:var(--font-body);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--navy-4);border-radius:99px}aside nav::-webkit-scrollbar{display:none}:focus-visible{outline:2px solid var(--violet);outline-offset:3px;border-radius:var(--radius-sm)}.font-display{font-family:var(--font-display)}.text-lime{color:var(--lime)}.text-coral{color:var(--coral)}.text-violet{color:var(--violet)}.text-amber{color:var(--amber)}.text-teal{color:var(--teal)}.text-muted{color:var(--text-secondary)}@keyframes fadeUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes pulse-lime{0%,to{box-shadow:0 0 #22c55e3d}50%{box-shadow:0 0 0 8px #22c55e00}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes shimmer{0%{background-position:-400px 0}to{background-position:400px 0}}.animate-fadeUp{animation:fadeUp .45s ease both}.animate-fadeIn{animation:fadeIn .3s ease both}.stagger-1{animation-delay:.05s}.stagger-2{animation-delay:.1s}.stagger-3{animation-delay:.15s}.stagger-4{animation-delay:.2s}.stagger-5{animation-delay:.25s}.stagger-6{animation-delay:.3s}.skeleton{background:linear-gradient(90deg,var(--navy-3) 25%,var(--navy-4) 50%,var(--navy-3) 75%);background-size:400px 100%;animation:shimmer 1.4s infinite;border-radius:var(--radius-sm)}.card{background:var(--navy-card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:0 6px 18px #7f5b350a;transition:border-color .2s,transform .2s,box-shadow .2s}.card:hover{border-color:var(--border-hover);transform:translateY(-3px);box-shadow:var(--shadow-card)}.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:99px;font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase}.badge-lime{background:var(--lime-glow);color:var(--lime)}.badge-coral{background:var(--coral-glow);color:var(--coral)}.badge-violet{background:var(--violet-glow);color:var(--violet)}.badge-amber{background:#f59e0b24;color:var(--amber)}.badge-teal{background:#22c55e24;color:var(--teal)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 22px;border-radius:var(--radius-md);font-family:var(--font-body);font-size:14px;font-weight:800;cursor:pointer;border:none;transition:all .18s;white-space:nowrap}.btn:active{transform:scale(.97)}.btn-lime{background:var(--lime);color:#fff}.btn-lime:hover{background:var(--lime-dim);box-shadow:var(--shadow-glow-lime)}.btn-ghost{background:#ffffffb8;border:1px solid var(--border);color:var(--text-primary)}.btn-ghost:hover{background:var(--navy-3);border-color:var(--violet);color:var(--violet)}.btn-coral{background:var(--coral);color:#fff}.btn-coral:hover{background:var(--coral-dim)}.btn-violet{background:var(--violet);color:#fff}.btn-violet:hover{background:var(--violet-dim)}.btn-icon{padding:10px;border-radius:var(--radius-md);background:var(--navy-3);border:1px solid var(--border);color:var(--text-secondary);cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;transition:all .18s}.btn-icon:hover{background:var(--navy-4);color:var(--text-primary);border-color:var(--border-hover)}.xp-bar-track{height:8px;background:#efe6d9;border-radius:99px;overflow:hidden}.xp-bar-fill{height:100%;background:linear-gradient(90deg,var(--violet),var(--lime));border-radius:99px;transition:width 1.2s cubic-bezier(.16,1,.3,1)}.input{width:100%;background:#ffffffe0;border:1px solid var(--border);border-radius:var(--radius-md);padding:11px 16px;color:var(--text-primary);font-family:var(--font-body);font-size:14px;outline:none;transition:border-color .18s,box-shadow .18s}.input::placeholder{color:var(--text-muted)}.input:focus{border-color:var(--violet);box-shadow:0 0 0 4px #4f46e514}.stars-bg{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden;z-index:0}.app-layout{display:flex;height:100vh;overflow:hidden;position:relative}.main-area{flex:1;display:flex;flex-direction:column;overflow:hidden;margin-left:var(--sidebar-w)}.page-content{flex:1;overflow-y:auto;padding:28px 32px;background:radial-gradient(circle at 0% 0%,rgba(245,158,11,.08),transparent 24%),transparent}.section-title{font-family:var(--font-display);font-size:22px;color:var(--text-primary);margin-bottom:6px}.section-sub{font-size:13px;color:var(--text-secondary);margin-bottom:22px}