:root{--font-display:"Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-heading:"Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-arabic:"Cairo", "Amiri", system-ui, sans-serif;--font-sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono:"JetBrains Mono", "Fira Code", monospace;--color-primary:#f59e0b;--color-primary-hover:#d97706;--color-primary-deep:#b45309;--color-secondary:#10b981;--color-secondary-hover:#059669;--color-accent:#8b5cf6;--color-blue:#3b82f6;--color-bg-dark:#0f172a;--color-bg-void:#020617;--color-surface-dark:#1e293b;--color-border-dark:#334155;--color-text-main:#f8fafc;--color-text-muted:#94a3b8;--color-text-gold:#fcd34d;--color-gold-100:#fef3c7;--color-gold-300:#fde047;--color-gold-500:#f59e0b;--color-gold-700:#b45309;--color-gold-900:#78350f;--color-emerald-100:#d1fae5;--color-emerald-300:#6ee7b7;--color-emerald-500:#10b981;--color-emerald-700:#047857;--color-slate-950:#020617;--color-slate-900:#0f172a;--color-slate-800:#1e293b;--color-slate-700:#334155;--color-slate-400:#94a3b8;--color-success:#22c55e;--color-warning:#eab308;--color-error:#ef4444;--color-info:#06b6d4;--shadow-gold-glow:0 0 20px #f59e0b59;--shadow-emerald-glow:0 0 20px #10b98159;--shadow-card:0 4px 24px #0000004d;--shadow-card-hover:0 8px 40px #f59e0b33;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:24px;--radius-full:9999px;--transition-fast:.15s ease;--transition-base:.25s ease;--transition-slow:.4s ease}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility;scroll-behavior:smooth;font-size:16px}body{font-family:var(--font-sans);background:var(--color-bg-dark);color:var(--color-text-main);min-height:100dvh;line-height:1.5}.bg-nocturne{background:radial-gradient(circle at top,#1e293b 0%,#0f172a 70%,#020617 100%);min-height:100dvh}.text-display-2xl{font-family:var(--font-display);letter-spacing:.02em;font-size:clamp(1.75rem,4.5vw,3rem);font-weight:700;line-height:1.25}.text-display-xl{font-family:var(--font-display);letter-spacing:.01em;font-size:clamp(1.4rem,3.5vw,2.25rem);font-weight:700;line-height:1.3}.text-heading-lg{font-family:var(--font-heading);letter-spacing:.02em;font-size:clamp(1.25rem,2.8vw,1.75rem);font-weight:700;line-height:1.35}.text-heading-md{font-family:var(--font-heading);font-size:1.35rem;font-weight:600;line-height:1.4}.text-heading-sm{font-family:var(--font-heading);letter-spacing:.01em;font-size:1.15rem;font-weight:600;line-height:1.4}.text-body-lg{font-size:1.05rem;font-weight:400;line-height:1.6}.text-body-base{font-size:.95rem;font-weight:400;line-height:1.5}.text-body-sm{letter-spacing:.01em;font-size:.85rem;font-weight:500;line-height:1.45}.text-caption{letter-spacing:.04em;text-transform:uppercase;font-size:.75rem;font-weight:600;line-height:1.4}.text-gold{color:var(--color-text-gold)}.text-primary{color:var(--color-primary)}.text-muted{color:var(--color-text-muted)}.text-success{color:var(--color-success)}.text-error{color:var(--color-error)}.glass-card{-webkit-backdrop-filter:blur(12px);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);transition:box-shadow var(--transition-base), border-color var(--transition-base);background:#1e293bbf;border:1px solid #f59e0b26}.glass-card:hover{box-shadow:var(--shadow-card-hover);border-color:#f59e0b4d}.glass-card-static{-webkit-backdrop-filter:blur(12px);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);background:#1e293bbf;border:1px solid #f59e0b26}.btn{border-radius:var(--radius-md);font-family:var(--font-sans);letter-spacing:.01em;cursor:pointer;transition:all var(--transition-base);border:none;justify-content:center;align-items:center;gap:.5rem;padding:.75rem 1.5rem;font-size:.875rem;font-weight:600;line-height:1.43;text-decoration:none;display:inline-flex}.btn:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.btn-primary{color:var(--color-bg-void);box-shadow:var(--shadow-gold-glow);background:linear-gradient(135deg,#f59e0b 0%,#d97706 50%,#b45309 100%)}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 30px #f59e0b80}.btn-primary:active{transform:translateY(0)}.btn-primary:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none}.btn-secondary{color:var(--color-text-main);border:1px solid var(--color-border-dark);background:0 0}.btn-secondary:hover{border-color:var(--color-primary);color:var(--color-primary);background:#f59e0b0d}.btn-ghost{color:var(--color-text-muted);background:0 0;padding:.5rem 1rem}.btn-ghost:hover{color:var(--color-primary);background:#f59e0b14}.btn-full{width:100%}.btn-lg{border-radius:var(--radius-lg);padding:1rem 2rem;font-size:1rem}.form-group{flex-direction:column;gap:.375rem;display:flex}.form-label{color:var(--color-text-muted);letter-spacing:.01em;font-size:.875rem;font-weight:500}.form-input{border:1px solid var(--color-border-dark);border-radius:var(--radius-md);width:100%;color:var(--color-text-main);font-family:var(--font-sans);transition:all var(--transition-base);background:#0f172a99;outline:none;padding:.75rem 1rem;font-size:1rem}.form-input::placeholder{color:var(--color-slate-400);opacity:.6}.form-input:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px #f59e0b26}.form-input:user-valid{border-color:var(--color-success)}.form-input:user-invalid{border-color:var(--color-error);background:#ef44440d}.form-error{color:var(--color-error);margin-top:.25rem;font-size:.8125rem;display:none}.form-input:user-invalid~.form-error{display:block}.stat-card{text-align:center;padding:1.25rem}.stat-value{font-family:var(--font-mono);color:var(--color-text-gold);font-size:2rem;font-weight:700;line-height:1.2}.stat-label{letter-spacing:.05em;text-transform:uppercase;color:var(--color-text-muted);margin-top:.25rem;font-size:.75rem;font-weight:600}.badge{border-radius:var(--radius-full);letter-spacing:.03em;text-transform:uppercase;align-items:center;gap:.25rem;padding:.25rem .625rem;font-size:.75rem;font-weight:600;display:inline-flex}.badge-gold{color:var(--color-text-gold);background:#f59e0b26;border:1px solid #f59e0b4d}.badge-emerald{color:var(--color-emerald-300);background:#10b98126;border:1px solid #10b9814d}.badge-violet{color:#a78bfa;background:#8b5cf626;border:1px solid #8b5cf64d}.spinner{border:2px solid #0000;border-top-color:currentColor;border-radius:50%;width:20px;height:20px;animation:.6s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.skeleton{background:linear-gradient(90deg, var(--color-surface-dark) 25%, var(--color-border-dark) 50%, var(--color-surface-dark) 75%);border-radius:var(--radius-sm);background-size:200% 100%;animation:1.5s infinite shimmer}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes float{0%,to{opacity:.6;transform:translateY(0)rotate(0)}50%{opacity:1;transform:translateY(-20px)rotate(180deg)}}@keyframes pulse-glow{0%,to{opacity:.4}50%{opacity:1}}.particle{pointer-events:none;border-radius:50%;animation:6s ease-in-out infinite float;position:absolute}.container-mobile{width:100%;max-width:420px;margin:0 auto;padding:0 1rem}.container-wide{width:100%;max-width:1200px;margin:0 auto;padding:0 1rem}.page-center{flex-direction:column;justify-content:center;align-items:center;min-height:100dvh;padding:1rem;display:flex}.step-indicator{justify-content:center;align-items:center;gap:0;margin-bottom:2rem;display:flex}.step-dot{width:36px;height:36px;transition:all var(--transition-base);border:2px solid var(--color-border-dark);background:var(--color-surface-dark);color:var(--color-text-muted);border-radius:50%;justify-content:center;align-items:center;font-size:.875rem;font-weight:700;display:flex}.step-dot.active{border-color:var(--color-primary);color:var(--color-bg-void);box-shadow:var(--shadow-gold-glow);background:linear-gradient(135deg,#f59e0b,#d97706)}.step-dot.completed{border-color:var(--color-success);background:var(--color-success);color:#fff}.step-line{background:var(--color-border-dark);width:48px;height:2px;transition:background var(--transition-base)}.step-line.completed{background:var(--color-success)}.avatar-grid{grid-template-columns:repeat(2,1fr);gap:1rem;display:grid}.avatar-option{border-radius:var(--radius-lg);border:2px solid var(--color-border-dark);cursor:pointer;transition:all var(--transition-base);background:#0f172a80;flex-direction:column;align-items:center;gap:.5rem;padding:1rem;display:flex;position:relative}.avatar-option:hover{border-color:var(--color-primary);background:#f59e0b0d}.avatar-option.selected{border-color:var(--color-primary);box-shadow:var(--shadow-gold-glow);background:#f59e0b1a}.avatar-option img{object-fit:contain;border-radius:var(--radius-md);width:80px;height:80px}.avatar-option .avatar-label{color:var(--color-text-muted);transition:color var(--transition-base);font-size:.8125rem;font-weight:600}.avatar-option.selected .avatar-label{color:var(--color-text-gold)}.gender-grid{grid-template-columns:repeat(2,1fr);gap:1.5rem;display:grid}.gender-option{border-radius:var(--radius-xl);border:2px solid var(--color-border-dark);cursor:pointer;transition:all var(--transition-base);text-align:center;background:#0f172a80;flex-direction:column;align-items:center;gap:.75rem;padding:1.5rem;display:flex}.gender-option:hover{border-color:var(--color-primary);transform:translateY(-4px)}.gender-option.selected{border-color:var(--color-primary);box-shadow:var(--shadow-gold-glow);background:#f59e0b1a;transform:translateY(-4px)}.gender-option .gender-emoji{font-size:3rem}.gender-option .gender-label{font-family:var(--font-heading);color:var(--color-text-muted);transition:color var(--transition-base);font-size:1.125rem;font-weight:600}.gender-option.selected .gender-label{color:var(--color-text-gold)}.dashboard-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.25rem;display:grid}@media (max-width:640px){.dashboard-grid{grid-template-columns:1fr}}.stats-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1rem;margin-bottom:2rem;display:grid}.search-bar{max-width:400px;position:relative}.search-bar .search-icon{color:var(--color-text-muted);pointer-events:none;position:absolute;top:50%;left:1rem;transform:translateY(-50%)}.search-bar input{padding-left:2.75rem}a{color:var(--color-primary);transition:color var(--transition-fast);text-decoration:none}a:hover{color:var(--color-text-gold)}.divider{color:var(--color-text-muted);align-items:center;gap:1rem;margin:1.5rem 0;font-size:.8125rem;display:flex}.divider:before,.divider:after{content:"";background:var(--color-border-dark);flex:1;height:1px}.alert{border-radius:var(--radius-md);align-items:center;gap:.5rem;padding:.75rem 1rem;font-size:.875rem;font-weight:500;display:flex}.alert-error{color:#fca5a5;background:#ef44441f;border:1px solid #ef444440}.alert-success{color:var(--color-emerald-300);background:#22c55e1f;border:1px solid #22c55e40}.student-card{align-items:flex-start;gap:1rem;padding:1.25rem;display:flex}.student-card .avatar-thumb{border-radius:var(--radius-md);object-fit:contain;background:#0f172a80;flex-shrink:0;width:64px;height:64px;padding:.25rem}.student-card .student-info{flex:1;min-width:0}.student-card .student-name{font-family:var(--font-heading);color:var(--color-text-main);margin-bottom:.25rem;font-size:1.125rem;font-weight:600}.student-card .student-detail{color:var(--color-text-muted);align-items:center;gap:.375rem;font-size:.8125rem;display:flex}.student-card .student-meta{flex-wrap:wrap;gap:.5rem;margin-top:.5rem;display:flex}.empty-state{text-align:center;color:var(--color-text-muted);padding:3rem 1rem}.empty-state .empty-emoji{margin-bottom:1rem;font-size:3rem}.empty-state .empty-title{font-family:var(--font-heading);color:var(--color-text-main);margin-bottom:.5rem;font-size:1.25rem;font-weight:600}.dashboard-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:2rem;display:flex}.dashboard-header .header-left{flex-direction:column;gap:.25rem;display:flex}@media (max-width:480px){.avatar-grid{grid-template-columns:repeat(2,1fr);gap:.75rem}.avatar-option img{width:60px;height:60px}.gender-grid{gap:1rem}.gender-option{padding:1rem}.gender-option .gender-emoji{font-size:2.5rem}.stats-grid{grid-template-columns:repeat(2,1fr)}}.navbar-container{z-index:100;-webkit-backdrop-filter:blur(20px);transition:all var(--transition-base);background:#0f172ae0;border-bottom:1px solid #f59e0b29;position:sticky;top:0;box-shadow:0 4px 24px #00000059}.navbar-content{justify-content:space-between;align-items:center;gap:1rem;max-width:1320px;margin:0 auto;padding:.7rem clamp(1rem,2.5vw,2rem);display:flex}.navbar-brand{flex-shrink:0;align-items:center;gap:.75rem;text-decoration:none;display:flex}.navbar-logo-wrapper{filter:drop-shadow(0 0 8px #f59e0b66);width:38px;height:38px;transition:transform var(--transition-fast);justify-content:center;align-items:center;display:flex;position:relative}.navbar-brand:hover .navbar-logo-wrapper{transform:scale(1.08)rotate(-3deg)}.navbar-title{font-family:var(--font-display);background:linear-gradient(135deg,#fef3c7 0%,#fde047 30%,#f59e0b 100%);-webkit-text-fill-color:transparent;text-shadow:0 0 16px #f59e0b40;letter-spacing:.02em;white-space:nowrap;-webkit-background-clip:text;font-size:1.15rem;font-weight:700}.navbar-links-desktop{align-items:center;gap:clamp(.5rem,1.2vw,1.25rem);display:flex}.navbar-link{font-family:var(--font-heading);color:var(--color-text-muted);transition:all var(--transition-fast);border-radius:var(--radius-full);white-space:nowrap;border:1px solid #0000;padding:.4rem .75rem;font-size:.875rem;font-weight:500;text-decoration:none}.navbar-link:hover{color:#f8fafc;background:#ffffff0f}.navbar-link.active{color:var(--color-text-gold);background:#f59e0b1f;border:1px solid #f59e0b40;font-weight:600;box-shadow:0 0 12px #f59e0b26}.navbar-actions-desktop{flex-shrink:0;align-items:center;gap:.6rem;display:flex}.navbar-lang-btn{border-radius:var(--radius-full);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--color-text-gold);font-family:var(--font-sans);cursor:pointer;transition:all var(--transition-fast);background:#1e293b99;border:1px solid #f59e0b40;align-items:center;gap:.35rem;padding:.42rem .75rem;font-size:.8rem;font-weight:600;line-height:1;display:inline-flex}.navbar-lang-btn:hover{border-color:var(--color-primary);background:#f59e0b26;transform:translateY(-1px);box-shadow:0 0 12px #f59e0b40}.navbar-lang-flag{font-size:.95rem;line-height:1}.navbar-lang-text{letter-spacing:.03em}.navbar-btn-login{border-radius:var(--radius-full);color:#e2e8f0;font-family:var(--font-sans);white-space:nowrap;transition:all var(--transition-fast);background:#1e293b80;border:1px solid #ffffff1f;justify-content:center;align-items:center;padding:.45rem .95rem;font-size:.84rem;font-weight:600;text-decoration:none;display:inline-flex}.navbar-btn-login:hover{color:var(--color-text-gold);background:#f59e0b14;border-color:#f59e0b66;transform:translateY(-1px)}.navbar-btn-cta{border-radius:var(--radius-full);color:#020617;font-family:var(--font-sans);white-space:nowrap;transition:all var(--transition-fast);background:linear-gradient(135deg,#f59e0b 0%,#d97706 60%,#b45309 100%);justify-content:center;align-items:center;gap:.4rem;padding:.48rem 1.15rem;font-size:.84rem;font-weight:700;text-decoration:none;display:inline-flex;box-shadow:0 0 16px #f59e0b59}.navbar-btn-cta:hover{color:#000;transform:translateY(-2px);box-shadow:0 4px 22px #f59e0b8c}.navbar-btn-cta:active{transform:translateY(0)}.navbar-actions-mobile{align-items:center;gap:.6rem;display:none}.navbar-lang-btn-mobile{border-radius:var(--radius-full);color:var(--color-text-gold);cursor:pointer;transition:all var(--transition-fast);background:#1e293bb3;border:1px solid #f59e0b4d;align-items:center;padding:.38rem .7rem;font-size:.8rem;font-weight:600;display:inline-flex}.navbar-lang-btn-mobile:hover{border-color:var(--color-primary);background:#f59e0b26}.navbar-mobile-toggle{border-radius:var(--radius-md);cursor:pointer;width:38px;height:38px;transition:all var(--transition-fast);background:#1e293b99;border:1px solid #f59e0b4d;flex-direction:column;justify-content:center;align-items:center;gap:4px;padding:.55rem;display:flex}.navbar-mobile-toggle:hover{border-color:var(--color-primary);background:#f59e0b1a}.hamburger-bar{background:var(--color-text-gold);border-radius:2px;width:20px;height:2px;transition:transform .25s,opacity .25s}.navbar-mobile-toggle.open .hamburger-bar:first-child{transform:translateY(6px)rotate(45deg)}.navbar-mobile-toggle.open .hamburger-bar:nth-child(2){opacity:0;transform:scaleX(0)}.navbar-mobile-toggle.open .hamburger-bar:nth-child(3){transform:translateY(-6px)rotate(-45deg)}.navbar-mobile-drawer{-webkit-backdrop-filter:blur(20px);background:#0f172af5;border-bottom:1px solid #f59e0b33;padding:1.25rem 1.5rem 1.75rem;animation:.22s ease-out slideDown;display:none}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.navbar-mobile-links{flex-direction:column;gap:.5rem;max-width:1280px;margin:0 auto;display:flex}.navbar-mobile-link{font-family:var(--font-heading);color:var(--color-text-muted);border-radius:var(--radius-sm);transition:all var(--transition-fast);padding:.65rem .75rem;font-size:1rem;font-weight:500;text-decoration:none}.navbar-mobile-link:hover{color:#fff;background:#ffffff0d}.navbar-mobile-link.active{color:var(--color-text-gold);border-left:3px solid var(--color-primary);background:#f59e0b1a;font-weight:600}.navbar-mobile-actions{border-top:1px solid #ffffff14;flex-direction:column;gap:.75rem;margin-top:1rem;padding-top:1rem;display:flex}@media (max-width:1100px){.navbar-links-desktop,.navbar-actions-desktop{display:none}.navbar-actions-mobile{display:flex}.navbar-mobile-drawer{display:block}}.hero-wrapper{text-align:center;max-width:1200px;margin:0 auto;padding:4rem 1.5rem 6rem;position:relative}.hero-badge{border-radius:var(--radius-full);color:var(--color-text-gold);font-family:var(--font-heading);background:#f59e0b1f;border:1px solid #f59e0b4d;align-items:center;gap:.5rem;margin-bottom:1.5rem;padding:.5rem 1.25rem;font-size:.875rem;display:inline-flex;box-shadow:0 0 16px #f59e0b26}.hero-title{font-family:var(--font-display);color:var(--color-text-gold);text-shadow:0 0 30px #f59e0b66;margin-bottom:1.25rem;font-size:clamp(2rem,5vw,3.5rem);line-height:1.2}.hero-subtitle{color:var(--color-text-muted);max-width:780px;margin:0 auto 2.5rem;font-size:clamp(1rem,2vw,1.25rem);line-height:1.7}.hero-ctas{flex-wrap:wrap;justify-content:center;align-items:center;gap:1rem;margin-bottom:3.5rem;display:flex}.grid-4{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.5rem;display:grid}.grid-3{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.75rem;display:grid}.feature-card{text-align:center;transition:all var(--transition-base);flex-direction:column;align-items:center;padding:2rem 1.5rem;display:flex}.feature-icon-wrapper{border-radius:var(--radius-lg);width:80px;height:80px;transition:all var(--transition-base);background:#0f172ab3;border:2px solid #f59e0b59;justify-content:center;align-items:center;margin-bottom:1.25rem;display:flex;position:relative;overflow:hidden;box-shadow:0 4px 20px #0006,0 0 16px #f59e0b40}.feature-card:hover .feature-icon-wrapper{border-color:var(--color-primary);transform:translateY(-4px)scale(1.06);box-shadow:0 8px 30px #00000080,0 0 25px #f59e0b73}.feature-icon-img{object-fit:cover;border-radius:calc(var(--radius-lg) - 2px);width:100%;height:100%;transition:transform var(--transition-base)}.feature-card:hover .feature-icon-img{transform:scale(1.1)}.story-item-card{transition:all var(--transition-base);background:#0f172aa6;border:1px solid #f59e0b33;border-radius:14px;align-items:center;gap:1.25rem;padding:1.25rem;display:flex}.story-item-card:hover{background:#0f172ad9;border-color:#f59e0b66;transform:translate(4px);box-shadow:0 4px 20px #0000004d}.story-item-thumb{border-radius:var(--radius-md);object-fit:cover;border:1px solid #f59e0b4d;flex-shrink:0;width:60px;height:60px;box-shadow:0 0 10px #0006}.sandbox-card{border-radius:var(--radius-xl);background:radial-gradient(circle at top,#1e293bf2,#0f172afa);border:2px solid #f59e0b59;padding:2.5rem 2rem;box-shadow:0 0 40px #00000080,inset 0 0 20px #f59e0b0d}.mist-effect-overlay{pointer-events:none;background:radial-gradient(circle,#8b5cf626 0%,#0000 70%);position:absolute;inset:0}.receipt-box{border-radius:var(--radius-md);font-family:var(--font-mono);color:var(--color-text-gold);background:#0f172ab3;border:1px dashed #f59e0b4d;padding:1rem 1.25rem;font-size:1.1rem}.portal-footer{background:var(--color-slate-950);color:var(--color-text-muted);border-top:1px solid #f59e0b33;padding:4rem 1.5rem 2rem}.footer-content{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2.5rem;max-width:1200px;margin:0 auto 3rem;display:grid}.footer-brand{flex-direction:column;gap:1rem;display:flex}.footer-heading{font-family:var(--font-heading);color:var(--color-text-gold);margin-bottom:1rem;font-size:1.1rem}.footer-links{flex-direction:column;gap:.6rem;list-style:none;display:flex}.footer-links a{color:var(--color-text-muted);transition:color var(--transition-fast);font-size:.9rem;text-decoration:none}.footer-links a:hover{color:var(--color-primary)}.footer-bottom{border-top:1px solid #ffffff0d;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;max-width:1200px;margin:0 auto;padding-top:2rem;font-size:.85rem;display:flex}.level-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;max-width:960px;margin:0 auto;display:grid}.level-card{border-radius:var(--radius-xl);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);cursor:pointer;text-align:center;background:#1e293bb3;border:2px solid #f59e0b26;flex-direction:column;align-items:center;gap:1rem;padding:2.5rem 2rem;text-decoration:none;transition:all .35s cubic-bezier(.25,.46,.45,.94);display:flex;position:relative;overflow:hidden}.level-card:before{content:"";border-radius:var(--radius-xl);opacity:0;pointer-events:none;transition:opacity .35s;position:absolute;inset:0}.level-card:hover{border-color:#f59e0b80;transform:translateY(-6px)scale(1.02);box-shadow:0 12px 40px #f59e0b33,0 0 30px #f59e0b1a}.level-card:hover:before{opacity:1;background:radial-gradient(circle at 50% 0,#f59e0b14,#0000 70%)}.level-card .level-icon{filter:drop-shadow(0 4px 12px #0000004d);font-size:3.5rem}.level-card .level-name{font-family:var(--font-display);color:var(--color-text-gold);font-size:1.35rem;font-weight:700}.level-card .level-desc{color:var(--color-text-muted);font-size:.88rem;line-height:1.5}.subject-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.25rem;max-width:960px;margin:0 auto;display:grid}.subject-card{border-radius:var(--radius-lg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);cursor:pointer;text-align:center;background:#1e293bb3;border:1px solid #f59e0b26;flex-direction:column;align-items:center;gap:.75rem;padding:2rem 1.5rem;text-decoration:none;transition:all .3s;display:flex}.subject-card:hover{box-shadow:var(--shadow-card-hover);border-color:#f59e0b66;transform:translateY(-4px)}.subject-card .subject-icon{font-size:2.5rem}.subject-card .subject-name{font-family:var(--font-heading);color:var(--color-text-main);font-size:1.1rem;font-weight:600}.subject-card .subject-quiz-count{color:var(--color-text-muted);font-size:.8rem}.quiz-list{flex-direction:column;gap:1rem;max-width:720px;margin:0 auto;display:flex}.quiz-list-item{border-radius:var(--radius-lg);background:#1e293bb3;border:1px solid #ffffff14;align-items:center;gap:1.25rem;padding:1.25rem 1.5rem;text-decoration:none;transition:all .3s;display:flex}.quiz-list-item.unlocked{cursor:pointer;border-color:#f59e0b33}.quiz-list-item.unlocked:hover{border-color:#f59e0b80;transform:translate(6px);box-shadow:0 4px 20px #f59e0b26}.quiz-list-item.completed{background:#10b9810f;border-color:#10b9814d}.quiz-list-item.locked{opacity:.5;cursor:not-allowed}.quiz-status-icon{border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;font-size:1.2rem;display:flex}.quiz-status-icon.available{color:#020617;box-shadow:var(--shadow-gold-glow);background:linear-gradient(135deg,#f59e0b,#d97706)}.quiz-status-icon.done{background:var(--color-success);color:#fff}.quiz-status-icon.lock{color:var(--color-text-muted);background:#ffffff14}.quiz-info{flex:1;min-width:0}.quiz-info .quiz-title{font-family:var(--font-heading);color:var(--color-text-main);margin-bottom:.15rem;font-size:1.05rem;font-weight:600}.quiz-info .quiz-meta{color:var(--color-text-muted);font-size:.8rem}.quiz-score-badge{font-family:var(--font-mono);border-radius:var(--radius-full);padding:.3rem .8rem;font-size:.85rem;font-weight:700}.quiz-score-badge.passed{color:var(--color-emerald-300);background:#10b98126;border:1px solid #10b9814d}.quiz-score-badge.failed{color:#fca5a5;background:#ef444426;border:1px solid #ef44444d}.quiz-progress-bar{border-radius:var(--radius-full);background:#ffffff14;width:100%;height:6px;margin-bottom:2rem;overflow:hidden}.quiz-progress-bar .progress-fill{border-radius:var(--radius-full);background:linear-gradient(90deg, var(--color-primary), var(--color-secondary));height:100%;transition:width .5s cubic-bezier(.25,.46,.45,.94)}.explanation-box{border-radius:var(--radius-md);border-left:4px solid var(--color-info);background:#06b6d414;margin-top:1rem;padding:1.25rem 1.5rem}.explanation-box .explanation-label{color:var(--color-info);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.4rem;font-size:.75rem;font-weight:700}.explanation-box .explanation-text{color:#e2e8f0;font-size:.92rem;line-height:1.6}.result-screen{border-radius:var(--radius-xl);text-align:center;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);max-width:520px;margin:0 auto;padding:3rem 2.5rem}.result-screen.passed{background:#10b98114;border:2px solid #10b9814d}.result-screen.failed{background:#ef444414;border:2px solid #ef44444d}.result-score{font-family:var(--font-mono);margin-bottom:.5rem;font-size:4rem;font-weight:700;line-height:1}.result-score.passed{color:var(--color-success)}.result-score.failed{color:var(--color-error)}.result-message{font-family:var(--font-heading);margin-bottom:.5rem;font-size:1.5rem;font-weight:700}.result-sub{color:var(--color-text-muted);margin-bottom:2rem;font-size:.95rem;line-height:1.6}.result-actions{flex-wrap:wrap;justify-content:center;gap:1rem;display:flex}.breadcrumb{flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:2rem;font-size:.85rem;display:flex}.breadcrumb a{color:var(--color-text-muted);transition:color var(--transition-fast);text-decoration:none}.breadcrumb a:hover{color:var(--color-primary)}.breadcrumb .breadcrumb-sep{color:var(--color-border-dark)}.breadcrumb .breadcrumb-current{color:var(--color-text-gold);font-weight:600}.back-link{color:var(--color-text-muted);transition:color var(--transition-fast);align-items:center;gap:.5rem;margin-bottom:1.5rem;padding:.4rem 0;font-size:.88rem;font-weight:500;text-decoration:none;display:inline-flex}.back-link:hover{color:var(--color-primary)}