@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Outfit:wght@400;500;600;700;800&display=swap";@import "https://fonts.googleapis.com/css2?family=Amiri:ital,wght@0,400;0,700;1,400&display=swap";:root{--primary:#5effff;--primary-light:#9dcdfd;--primary-dark:#003b46;--primary-glow:#5effff40;--sejarah:#00cec9;--sejarah-light:#5effff;--sejarah-dark:#0f3039;--sejarah-glow:#00cec933;--islam:#7e8cfc;--islam-light:#9dcdfd;--islam-dark:#191b3a;--islam-glow:#7e8cfc33;--math:#ff9f1c;--math-light:#ffe0b2;--math-dark:#2c1b00;--math-glow:#ff9f1c33;--correct:#0fc;--correct-light:#e7ffff;--correct-dark:#c2ffe9;--correct-glow:#00ffcc40;--wrong:#ff5e7e;--wrong-light:#ffe7ec;--wrong-dark:#ffd1da;--wrong-glow:#ff5e7e40;--warning:#f4c430;--warning-dark:#b8860b;--gold:#f4c430;--silver:#e6e8ea;--bronze:#cd7f32;--font-ui:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-heading:"Outfit", "Inter", sans-serif;--font-jawi:"Amiri", "Traditional Arabic", "Scheherazade New", serif;--text-xs:.75rem;--text-sm:.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:1.25rem;--text-2xl:1.5rem;--text-3xl:1.875rem;--text-4xl:2.25rem;--text-5xl:3rem;--weight-light:300;--weight-normal:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;--weight-extrabold:800;--leading-tight:1.25;--leading-normal:1.5;--leading-relaxed:1.75;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--space-20:5rem;--space-24:6rem;--radius-sm:8px;--radius-md:14px;--radius-lg:20px;--radius-xl:28px;--radius-2xl:36px;--radius-full:9999px;--shadow-sm:0 2px 4px #00000080;--shadow-md:0 8px 16px #0009;--shadow-lg:0 16px 32px #000000b3;--shadow-xl:0 24px 48px #000000d9;--shadow-glow-primary:0 0 25px var(--primary-glow);--shadow-glow-correct:0 0 25px var(--correct-glow);--shadow-glow-wrong:0 0 25px var(--wrong-glow);--transition-fast:.15s cubic-bezier(.4, 0, .2, 1);--transition-base:.25s cubic-bezier(.4, 0, .2, 1);--transition-slow:.4s cubic-bezier(.4, 0, .2, 1);--transition-spring:.5s cubic-bezier(.34, 1.56, .64, 1);--z-base:0;--z-dropdown:100;--z-sticky:200;--z-modal-backdrop:300;--z-modal:400;--z-toast:500;--max-width:100%;--nav-height:72px;--sidebar-width:280px;--bg-primary:#000;--bg-secondary:#09090e;--bg-card:#ffffff08;--bg-card-hover:#ffffff14;--bg-input:#ffffff0d;--bg-overlay:#000000d9;--glass-bg:#ffffff08;--glass-border:#ffffff1f;--glass-blur:20px;--text-primary:#fff;--text-secondary:#ffffffa6;--text-muted:#fff6;--text-inverse:#000;--border-color:#ffffff1f;--border-color-hover:#ffffff40;--divider:#ffffff14;--scrollbar-track:#000;--scrollbar-thumb:#ffffff26}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px}body{font-family:var(--font-ui);font-weight:var(--weight-normal);line-height:var(--leading-normal);color:var(--text-primary);background-color:var(--bg-primary);min-height:100vh;transition:background-color var(--transition-base), color var(--transition-base);overflow-x:hidden}#root{flex-direction:column;min-height:100vh;display:flex}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:var(--weight-bold);line-height:var(--leading-tight);color:var(--text-primary)}h1{font-size:var(--text-4xl)}h2{font-size:var(--text-3xl)}h3{font-size:var(--text-2xl)}h4{font-size:var(--text-xl)}h5{font-size:var(--text-lg)}h6{font-size:var(--text-base)}p{color:var(--text-secondary);line-height:var(--leading-relaxed)}a{color:var(--primary-light);transition:color var(--transition-fast);text-decoration:none}a:hover{color:var(--primary)}ul,ol{list-style:none}img{max-width:100%;height:auto;display:block}button{cursor:pointer;color:inherit;background:0 0;border:none;outline:none;font-family:inherit}input,textarea{font-family:inherit;font-size:inherit;color:inherit;background:0 0;border:none;outline:none}select{font-family:inherit;font-size:inherit;color:inherit;background:0 0;border:none;outline:none;appearance:none!important;background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239898B8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E")!important;background-position:right 14px center!important;background-repeat:no-repeat!important;background-size:14px!important;padding-right:40px!important}select option{background-color:var(--bg-secondary);color:var(--text-primary)}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--scrollbar-track)}::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--primary)}::selection{background-color:var(--primary);color:#000}:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:var(--radius-sm)}.container{width:100%;max-width:var(--max-width);padding:0 var(--space-8);margin:0 auto}.page-content{padding-top:var(--nav-height);flex:1}.jawi{font-family:var(--font-jawi);text-align:right;direction:rtl;font-size:1.6em;line-height:2}.jawi-inline{font-family:var(--font-jawi);direction:rtl;unicode-bidi:bidi-override;font-size:1.25em}.quran-text{font-family:var(--font-jawi);text-align:center;color:var(--text-primary);direction:rtl;font-size:1.85em;line-height:2.2}.highlight-tajwid{color:#ff9f43;font-weight:var(--weight-extrabold);border-radius:var(--radius-sm);background:#ff9f431f;border-bottom:2px solid #ff9f43;padding:0 4px}.glass{background:var(--glass-bg);-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);transition:transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base)}.gradient-primary{background:linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%)}.gradient-sejarah{background:linear-gradient(135deg, var(--sejarah-dark) 0%, var(--sejarah) 100%)}.gradient-islam{background:linear-gradient(135deg, var(--islam-dark) 0%, var(--islam) 100%)}.gradient-bg{background:linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 50%, var(--bg-primary) 100%)}.animated-bg{z-index:-1;pointer-events:none;width:100%;height:100%;position:fixed;top:0;left:0;overflow:hidden}.animated-bg:before,.animated-bg:after{content:"";filter:blur(120px);opacity:.12;border-radius:50%;animation:22s ease-in-out infinite float;position:absolute}.animated-bg:before{background:var(--primary);width:600px;height:600px;top:-15%;right:-10%}.animated-bg:after{background:var(--islam);width:500px;height:500px;animation-delay:-8s;bottom:-15%;left:-10%}@keyframes float{0%,to{transform:translate(0)scale(1)}33%{transform:translate(30px,-30px)scale(1.05)}66%{transform:translate(-20px,20px)scale(.95)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-5px)}20%,40%,60%,80%{transform:translate(5px)}}@keyframes glow{0%,to{box-shadow:0 0 5px var(--primary-glow)}50%{box-shadow:0 0 25px var(--primary-glow), 0 0 50px var(--primary-glow)}}@keyframes confetti-fall{0%{opacity:1;transform:translateY(-100vh)rotate(0)}to{opacity:0;transform:translateY(100vh)rotate(720deg)}}@keyframes count-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideDown{0%{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}@media (width<=639px){html{font-size:14px}h1{font-size:var(--text-3xl)}h2{font-size:var(--text-2xl)}h3{font-size:var(--text-xl)}.container{padding:0 var(--space-3)}}@media (width>=640px) and (width<=1023px){html{font-size:15px}}:root{--text:#6b6375;--text-h:#08060d;--bg:#fff;--border:#e5e4e7;--code-bg:#f4f3ec;--accent:#aa3bff;--accent-bg:#aa3bff1a;--accent-border:#aa3bff80;--social-bg:#f4f3ec80;--shadow:#0000001a 0 10px 15px -3px, #0000000d 0 4px 6px -2px;--sans:system-ui, "Segoe UI", Roboto, sans-serif;--heading:system-ui, "Segoe UI", Roboto, sans-serif;--mono:ui-monospace, Consolas, monospace;font:18px/145% var(--sans);letter-spacing:.18px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}@media (width<=1024px){:root{font-size:16px}}@media (prefers-color-scheme:dark){:root{--text:#9ca3af;--text-h:#f3f4f6;--bg:#16171d;--border:#2e303a;--code-bg:#1f2028;--accent:#c084fc;--accent-bg:#c084fc26;--accent-border:#c084fc80;--social-bg:#2f303a80;--shadow:#0006 0 10px 15px -3px, #00000040 0 4px 6px -2px}#social .button-icon{filter:invert()brightness(2)}}body{margin:0}#root{text-align:left;box-sizing:border-box;flex-direction:column;width:100%;max-width:100%;min-height:100svh;margin:0 auto;display:flex}h1,h2{font-family:var(--heading);font-weight:500}h1{letter-spacing:-1.68px;margin:32px 0;font-size:56px}@media (width<=1024px){h1{margin:20px 0;font-size:36px}}h2{letter-spacing:-.24px;margin:0 0 8px;font-size:24px;line-height:118%}@media (width<=1024px){h2{font-size:20px}}p{margin:0}code,.counter{font-family:var(--mono);color:var(--text-h);border-radius:4px;display:inline-flex}code{background:var(--code-bg);padding:4px 8px;font-size:15px;line-height:135%}.navbar{height:var(--nav-height);z-index:var(--z-sticky);-webkit-backdrop-filter:blur(32px)saturate(1.4);background:#04040cd1;position:fixed;top:0;left:0;right:0}.navbar:after{content:"";background:linear-gradient(90deg,#0000 0%,#5effff14 15%,#5effff59 50%,#5effff14 85%,#0000 100%);height:1px;position:absolute;bottom:0;left:0;right:0}.navbar-inner{justify-content:space-between;align-items:center;gap:var(--space-6);height:100%;padding:0 var(--space-8);max-width:1400px;margin:0 auto;display:flex}.navbar-logo{align-items:center;gap:var(--space-3);color:var(--text-primary);font-family:var(--font-heading);font-weight:var(--weight-extrabold);font-size:var(--text-xl);transition:transform var(--transition-base);flex-shrink:0;text-decoration:none;display:flex}.navbar-logo:hover{transform:scale(1.03)}.logo-icon{width:38px;height:38px;transition:all var(--transition-base);background:linear-gradient(135deg,#5effff26,#7e8cfc1a);border:1px solid #5effff33;border-radius:12px;justify-content:center;align-items:center;display:flex;box-shadow:0 0 16px #5effff1a}.navbar-logo:hover .logo-icon{border-color:#5effff59;box-shadow:0 0 24px #5effff33}.logo-icon .svg-icon{color:var(--primary)}.logo-text{background:linear-gradient(135deg, #fff 30%, var(--primary) 100%);-webkit-text-fill-color:transparent;letter-spacing:-.5px;-webkit-background-clip:text;background-clip:text}.navbar-links{align-items:center;gap:var(--space-1);border-radius:var(--radius-full);background:#ffffff08;border:1px solid #ffffff0f;padding:4px;display:flex}.nav-link{color:var(--text-secondary);font-size:var(--text-sm);font-weight:var(--weight-semibold);border-radius:var(--radius-full);transition:all var(--transition-base);letter-spacing:.01em;white-space:nowrap;padding:8px 20px;text-decoration:none;position:relative}.nav-link:hover{color:var(--text-primary)}.nav-link.active{color:#fff}.nav-indicator{border-radius:var(--radius-full);z-index:-1;background:linear-gradient(135deg,#5effff1f,#7e8cfc14);border:1px solid #5effff2e;position:absolute;inset:0;box-shadow:0 0 12px #5effff14}.navbar-actions{align-items:center;gap:var(--space-2);flex-shrink:0;display:flex}.toggle-btn{border-radius:var(--radius-full);height:34px;color:var(--text-secondary);font-size:var(--text-xs);font-weight:var(--weight-bold);letter-spacing:.8px;transition:all var(--transition-base);cursor:pointer;background:#ffffff0a;border:1px solid #ffffff1a;justify-content:center;align-items:center;padding:0 14px;display:flex}.toggle-btn:hover{color:var(--primary);background:#5effff14;border-color:#5effff40;box-shadow:0 0 10px #5effff14}.toggle-label{letter-spacing:.8px;font-size:.7rem}.user-menu{align-items:center;gap:var(--space-2);display:flex}.user-avatar{border-radius:var(--radius-full);background:linear-gradient(135deg, var(--primary), var(--primary-light));width:34px;height:34px;transition:all var(--transition-base);border:2px solid #5effff4d;justify-content:center;align-items:center;display:flex;overflow:hidden;box-shadow:0 0 10px #5effff1f}.user-avatar:hover{border-color:#5effff80;box-shadow:0 0 18px #5effff40}.user-avatar img{object-fit:cover;width:100%;height:100%}.user-avatar span{color:#000;font-weight:var(--weight-extrabold);font-size:var(--text-sm)}.btn-logout{font-size:var(--text-xs);color:var(--text-secondary);border-radius:var(--radius-full);transition:all var(--transition-base);cursor:pointer;letter-spacing:.02em;background:#ffffff08;border:1px solid #ffffff14;padding:6px 14px}.btn-logout:hover{color:var(--wrong);background:#ff5e7e0f;border-color:#ff5e7e4d}.btn-login{color:var(--primary);border-radius:var(--radius-full);font-weight:var(--weight-bold);font-size:var(--text-sm);transition:all var(--transition-base);background:linear-gradient(135deg,#5effff1a,#5effff0d);border:1px solid #5effff4d;padding:8px 22px;text-decoration:none;box-shadow:0 0 12px #5effff14}.btn-login:hover{background:linear-gradient(135deg, var(--primary), #5effffcc);color:#000;box-shadow:0 0 24px #5effff4d}.hamburger{cursor:pointer;border-radius:var(--radius-sm);transition:all var(--transition-base);background:#ffffff0a;border:1px solid #ffffff14;flex-direction:column;gap:5px;padding:8px;display:none}.hamburger:hover{background:#ffffff14;border-color:#5effff33}.hamburger span{background:var(--text-secondary);width:20px;height:2px;transition:all var(--transition-fast);transform-origin:50%;border-radius:2px;display:block}.hamburger.open{background:#5effff0f;border-color:#5effff33}.hamburger.open span{background:var(--primary)}.hamburger.open span:first-child{transform:rotate(45deg)translate(5px,5px)}.hamburger.open span:nth-child(2){opacity:0}.hamburger.open span:nth-child(3){transform:rotate(-45deg)translate(5px,-5px)}.mobile-menu{padding:var(--space-4) var(--space-6);-webkit-backdrop-filter:blur(24px);background:#04040cf2;border-top:1px solid #5effff14;flex-direction:column;display:none;overflow:hidden}.mobile-link{padding:var(--space-3) var(--space-4);color:var(--text-secondary);font-weight:var(--weight-medium);border-radius:var(--radius-md);transition:all var(--transition-fast);text-decoration:none;display:block}.mobile-link:hover,.mobile-link.active{color:var(--primary);background:#5effff0f}.mobile-link.logout{color:var(--wrong);text-align:left;cursor:pointer;width:100%;font-size:inherit;margin-top:var(--space-2);padding-top:var(--space-4);background:0 0;border:none;border-top:1px solid #ffffff0f;border-radius:0;font-family:inherit}.mobile-link.logout:hover{color:var(--wrong-light);border-radius:var(--radius-md);background:#ff5e7e0f}.active-profile-pill{align-items:center;gap:var(--space-2);border-radius:var(--radius-full);transition:all var(--transition-base);cursor:pointer;background:#00cec90f;border:1px solid #00cec933;padding:6px 14px;text-decoration:none;display:flex}.active-profile-pill:hover{background:#00cec91f;border-color:#00cec966;box-shadow:0 0 14px #00cec926}.profile-dot{border-radius:var(--radius-full);background-color:#00cec9;width:6px;height:6px;animation:2s ease-in-out infinite pulse-dot;box-shadow:0 0 8px #00cec9}@keyframes pulse-dot{0%,to{opacity:1;box-shadow:0 0 8px #00cec9}50%{opacity:.6;box-shadow:0 0 4px #00cec9}}.profile-name{font-size:var(--text-xs);font-weight:var(--weight-bold);color:var(--text-primary);text-overflow:ellipsis;white-space:nowrap;max-width:90px;overflow:hidden}.switch-icon{color:var(--text-secondary);transition:transform var(--transition-base), color var(--transition-base)}.active-profile-pill:hover .switch-icon{color:#00cec9;transform:rotate(180deg)}@media (width<=768px){.navbar-inner{padding:0 var(--space-4);gap:var(--space-3)}.navbar-links{display:none}.hamburger,.mobile-menu{display:flex}.btn-logout,.user-avatar{display:none}.active-profile-pill .profile-name{max-width:60px}}@media (width<=480px){.logo-text{font-size:var(--text-base)}.active-profile-pill{padding:4px 10px}.active-profile-pill .profile-name{display:none}}.footer{padding:var(--space-6) 0;background:#0006;border-top:1px solid #ffffff14;margin-top:auto}.footer-container{justify-content:space-between;align-items:center;width:100%;display:flex}.footer-copy{font-size:var(--text-sm);color:var(--text-muted)}.footer-copy strong{color:var(--text-secondary)}.footer-links{align-items:center;gap:var(--space-3);display:flex}.footer-links a{font-size:var(--text-sm);color:var(--text-muted);transition:color var(--transition-fast)}.footer-links a:hover{color:var(--primary-light)}.footer-divider{color:var(--text-muted);opacity:.5;font-size:var(--text-xs);-webkit-user-select:none;user-select:none}@media (width<=639px){.footer{padding:var(--space-5) 0}.footer-container{gap:var(--space-3);text-align:center;flex-direction:column}}.home-page{flex-direction:column;flex:1;display:flex;overflow-x:hidden}.hero-section{min-height:100vh;padding:calc(var(--nav-height) + var(--space-8)) 6% var(--space-16);justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.hero-radial{pointer-events:none;z-index:0;background:radial-gradient(70% 50% at 25% 40%,#5effff12 0%,#0000 70%),radial-gradient(50% 60% at 75% 55%,#7e8cfc0d 0%,#0000 70%),radial-gradient(80% 40% at 50% 110%,#5effff0a 0%,#0000 60%);position:absolute;inset:0}.hero-grid-overlay{pointer-events:none;z-index:0;background-image:linear-gradient(#5effff05 1px,#0000 1px),linear-gradient(90deg,#5effff05 1px,#0000 1px);background-size:80px 80px;position:absolute;inset:0;-webkit-mask-image:radial-gradient(60% 60%,#000 20%,#0000 70%);mask-image:radial-gradient(60% 60%,#000 20%,#0000 70%)}.hex-grid{opacity:.45;pointer-events:none;z-index:0;width:100%;height:100%;position:absolute;inset:0}.radar-pulse{pointer-events:none;z-index:0;width:600px;height:600px;position:absolute;top:50%;right:18%;transform:translate(50%,-45%)}.radar-ring{opacity:0;border:1px solid #5effff14;border-radius:50%;animation:4.5s cubic-bezier(.22,1,.36,1) infinite radarExpand;position:absolute;inset:0}.radar-ring:nth-child(2){animation-delay:1.5s}.radar-ring:nth-child(3){animation-delay:3s}@keyframes radarExpand{0%{opacity:0;border-color:#5effff33;transform:scale(.15)}10%{opacity:1}80%{opacity:0}to{opacity:0;border-color:#5effff00;transform:scale(1)}}.hud-particles{pointer-events:none;z-index:1;position:absolute;inset:0}.hud-dot{background:#5effff80;border-radius:50%;animation:linear infinite floatParticle;position:absolute;box-shadow:0 0 6px #5effff4d}@keyframes floatParticle{0%,to{opacity:0;transform:translate(0)scale(1)}10%{opacity:.7}50%{opacity:.35;transform:translate(25px,-40px)scale(1.15)}90%{opacity:.6}}.hero-content{z-index:2;gap:var(--space-12);grid-template-columns:1.15fr .85fr;align-items:center;width:100%;max-width:1360px;margin:0 auto;display:grid;position:relative}.hero-left{gap:var(--space-6);flex-direction:column;display:flex}.hud-badge{align-items:center;gap:var(--space-2);border-radius:var(--radius-full);color:var(--primary);font-size:var(--text-xs);font-weight:var(--weight-bold);letter-spacing:1.2px;text-transform:uppercase;background:#5effff0f;border:1px solid #5effff33;align-self:flex-start;padding:7px 20px;display:inline-flex;position:relative;overflow:hidden}.badge-pulse{background:linear-gradient(90deg,#0000,#5effff1a,#0000);width:100%;animation:3s ease-in-out infinite shimmer;position:absolute;top:0;bottom:0;left:0}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.hero-headline{font-size:clamp(2.6rem,5vw,4.2rem);font-weight:var(--weight-extrabold);letter-spacing:-2px;color:#fff;margin:0;line-height:1.08}.headline-accent{background:linear-gradient(135deg, var(--primary) 0%, #9dcdfde6 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.headline-glow{background:linear-gradient(135deg, #fff 20%, var(--primary) 80%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;position:relative}.hero-desc{font-size:var(--text-lg);color:var(--text-secondary);line-height:var(--leading-relaxed);max-width:540px;margin:0}.hero-ctas{gap:var(--space-4);flex-wrap:wrap;display:flex}.cta-primary{align-items:center;gap:var(--space-2);color:var(--primary);font-weight:var(--weight-bold);font-size:var(--text-base);border-radius:var(--radius-full);cursor:pointer;background:linear-gradient(135deg,#5effff1f,#5effff0a);border:1px solid #5effff66;padding:14px 32px;text-decoration:none;transition:all .35s cubic-bezier(.22,1,.36,1);display:inline-flex;position:relative;overflow:hidden;box-shadow:0 0 20px #5effff1a,inset 0 0 20px #5effff08}.cta-primary:before{content:"";background:linear-gradient(135deg, var(--primary), #5effffb3);opacity:0;z-index:0;border-radius:inherit;transition:opacity .35s;position:absolute;inset:0}.cta-primary:hover:before{opacity:1}.cta-primary:hover{color:#000;border-color:var(--primary);transform:translateY(-2px);box-shadow:0 0 40px #5effff4d,0 8px 32px #5effff26}.cta-primary>*{z-index:1;position:relative}.cta-primary.large{font-size:var(--text-lg);padding:16px 42px}.cta-secondary{align-items:center;gap:var(--space-2);color:var(--text-secondary);font-weight:var(--weight-semibold);font-size:var(--text-base);border-radius:var(--radius-full);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid #ffffff1f;padding:14px 28px;text-decoration:none;transition:all .35s;display:inline-flex}.cta-secondary:hover{color:#fff;background:#ffffff0f;border-color:#ffffff4d;transform:translateY(-2px)}.trust-points{gap:var(--space-3);margin-top:var(--space-2);flex-direction:column;display:flex}.trust-item{align-items:center;gap:var(--space-3);font-size:var(--text-sm);color:var(--text-secondary);display:flex}.trust-item svg{color:var(--correct);flex-shrink:0}.scroll-indicator{bottom:var(--space-8);align-items:center;gap:var(--space-2);color:var(--text-muted);font-size:var(--text-xs);letter-spacing:1px;text-transform:uppercase;z-index:3;flex-direction:column;animation:1s 1.5s both fadeInUp;display:flex;position:absolute;left:50%;transform:translate(-50%)}@keyframes fadeInUp{0%{opacity:0;transform:translate(-50%)translateY(10px)}to{opacity:1;transform:translate(-50%)translateY(0)}}.scroll-mouse{border:2px solid #fff3;border-radius:12px;width:22px;height:34px;position:relative}.scroll-wheel{background:var(--primary);border-radius:3px;width:3px;height:8px;animation:2s ease-in-out infinite scrollWheel;position:absolute;top:6px;left:50%;transform:translate(-50%)}@keyframes scrollWheel{0%{opacity:1;transform:translate(-50%)translateY(0)}to{opacity:0;transform:translate(-50%)translateY(12px)}}.hero-right{perspective:1200px;justify-content:center;display:flex}.hud-terminal{-webkit-backdrop-filter:blur(20px);background:#060612d9;border:1px solid #5effff1f;border-radius:20px;width:100%;max-width:500px;transition:all .5s cubic-bezier(.22,1,.36,1);animation:6s ease-in-out infinite terminalFloat;position:relative;overflow:hidden;box-shadow:0 40px 80px #000000b3,0 0 60px #5effff0a,inset 0 1px #ffffff0d}@keyframes terminalFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.hud-terminal:hover{border-color:#5effff47;box-shadow:0 40px 80px #000c,0 0 80px #5effff14,inset 0 1px #ffffff14}.hud-corner{pointer-events:none;z-index:5;width:18px;height:18px;position:absolute}.hud-corner.tl{border-top:2px solid var(--primary);border-left:2px solid var(--primary);border-top-left-radius:20px;top:-1px;left:-1px}.hud-corner.tr{border-top:2px solid var(--primary);border-right:2px solid var(--primary);border-top-right-radius:20px;top:-1px;right:-1px}.hud-corner.bl{border-bottom:2px solid var(--primary);border-left:2px solid var(--primary);border-bottom-left-radius:20px;bottom:-1px;left:-1px}.hud-corner.br{border-bottom:2px solid var(--primary);border-right:2px solid var(--primary);border-bottom-right-radius:20px;bottom:-1px;right:-1px}.terminal-chrome{background:#00000059;border-bottom:1px solid #ffffff0f;align-items:center;padding:14px 18px;display:flex}.chrome-dots{gap:6px;display:flex}.cdot{border-radius:50%;width:10px;height:10px}.cdot.r{background:#ff5f56}.cdot.y{background:#ffbd2e}.cdot.g{background:#27c93f}.chrome-title{text-align:center;font-size:var(--text-xs);color:var(--text-secondary);opacity:.6;font-weight:var(--weight-medium);flex:1}.chrome-lock{margin-right:4px;font-size:10px}.chrome-spacer{width:54px}.terminal-body{padding:var(--space-6);gap:var(--space-5);flex-direction:column;display:flex}.term-stats{padding:var(--space-4);border-radius:var(--radius-md);background:#ffffff05;border:1px solid #ffffff0d;justify-content:space-around;align-items:center;display:flex}.term-stat{flex-direction:column;align-items:center;gap:2px;display:flex}.ts-value{font-size:var(--text-2xl);font-weight:var(--weight-extrabold);font-family:var(--font-heading);letter-spacing:-.5px}.ts-value small{opacity:.7;font-size:.6em}.ts-value.accent{color:var(--primary)}.ts-value.gold{color:var(--gold)}.ts-value.purple{color:#7e8cfc}.ts-label{font-size:var(--text-xs);color:var(--text-secondary);opacity:.7}.term-divider{background:#ffffff0f;width:1px;height:36px}.term-question{gap:var(--space-3);flex-direction:column;display:flex}.tq-tag{align-items:center;gap:var(--space-2);font-size:var(--text-xs);color:var(--sejarah-light);border-radius:var(--radius-full);font-weight:var(--weight-bold);letter-spacing:.3px;background:#00cec914;border:1px solid #00cec933;align-self:flex-start;padding:4px 12px;display:inline-flex}.tq-dot{background:var(--sejarah);width:6px;height:6px;box-shadow:0 0 6px var(--sejarah);border-radius:50%;animation:2s ease-in-out infinite pulseDot}@keyframes pulseDot{0%,to{opacity:1}50%{opacity:.35}}.tq-text{font-size:var(--text-base);color:var(--text-primary);font-weight:var(--weight-semibold);line-height:var(--leading-normal);margin:0}.tq-options{gap:var(--space-2);flex-direction:column;display:flex}.tq-opt{align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius-sm);font-size:var(--text-sm);color:var(--text-secondary);border:1px solid #ffffff0f;transition:all .25s;display:flex}.tq-opt.correct{color:var(--correct);font-weight:var(--weight-semibold);background:#00ffcc0d;border-color:#00ffcc4d;animation:2.5s ease-in-out infinite tqCorrectGlow}@keyframes tqCorrectGlow{0%,to{border-color:#00ffcc40;box-shadow:0 0 4px #00ffcc05}50%{border-color:#00ffcc80;box-shadow:0 0 12px #00ffcc14}}.opt-marker{width:24px;height:24px;font-size:var(--text-xs);font-weight:var(--weight-bold);background:#ffffff0a;border:1px solid #ffffff1a;border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;display:flex}.tq-opt.correct .opt-marker{color:var(--correct);background:#00ffcc1a;border-color:#00ffcc4d}.opt-check{font-size:var(--text-sm);color:var(--correct);font-weight:var(--weight-bold);margin-left:auto}.term-progress{gap:var(--space-2);flex-direction:column;display:flex}.tp-header{font-size:var(--text-xs);color:var(--text-secondary);opacity:.7;justify-content:space-between;display:flex}.tp-time{color:var(--gold)}.tp-bar{border-radius:var(--radius-full);background:#ffffff0f;height:4px;overflow:hidden}.tp-fill{background:linear-gradient(90deg, var(--primary) 0%, #fff6 35%, #fffc 50%, #fff6 65%, var(--primary) 100%);border-radius:var(--radius-full);width:17.5%;height:100%;box-shadow:0 0 8px var(--primary-glow);background-size:200% 100%;animation:2s ease-in-out infinite alternate progressGlow,2.5s linear infinite telemetryBarScan}@keyframes progressGlow{0%{box-shadow:0 0 4px var(--primary-glow)}to{box-shadow:0 0 14px var(--primary-glow)}}.stats-section{padding:var(--space-20) 6%;background:radial-gradient(circle,#06061266,#0000);border-top:1px solid #5effff14;border-bottom:1px solid #5effff14;position:relative}.stats-telemetry-container{gap:var(--space-8);grid-template-columns:340px 1fr;align-items:stretch;max-width:1300px;margin:0 auto;display:grid}.telemetry-dashboard-panel{border-radius:var(--radius-xl);padding:var(--space-6);justify-content:space-between;gap:var(--space-6);-webkit-backdrop-filter:blur(20px);background:#060612d9;border:1px solid #5effff26;flex-direction:column;display:flex;position:relative;overflow:hidden;box-shadow:0 30px 60px #0009,0 0 40px #5effff08,inset 0 1px #ffffff0d}.telemetry-dashboard-panel:before{content:"";background:linear-gradient(90deg, transparent, var(--primary), transparent);width:100%;height:2px;position:absolute;top:0;left:0}.hud-panel-chrome{padding-bottom:var(--space-3);border-bottom:1px solid #5effff14;justify-content:space-between;align-items:center;display:flex}.hpc-title{color:var(--text-muted);letter-spacing:1.5px;font-family:monospace;font-size:10px;font-weight:var(--weight-bold)}.hpc-status{color:var(--correct);font-family:monospace;font-size:9px;font-weight:var(--weight-extrabold);border-radius:var(--radius-sm);letter-spacing:.5px;background:#00ffcc14;border:1px solid #0fc3;padding:3px 8px}.blink{animation:2s infinite alternate hudStatusBlink}@keyframes hudStatusBlink{0%,to{opacity:1;filter:drop-shadow(0 0 2px var(--correct))}50%{opacity:.4}}.telemetry-dial-wrapper{justify-content:center;align-items:center;width:220px;height:220px;margin:0 auto;display:flex;position:relative}.telemetry-svg{width:100%;height:100%;position:absolute;inset:0}.hud-dial-ticks{transform-origin:50%;animation:60s linear infinite spinClockwise}.hud-dial-arc{transform-origin:50%;transition:stroke .4s,stroke-dasharray .4s,stroke-dashoffset .4s;animation:25s linear infinite spinClockwise}.hud-dial-arc-reverse{transform-origin:50%;transition:stroke .4s,stroke-dasharray .4s,stroke-dashoffset .4s;animation:15s linear infinite spinCounterClockwise}.hud-radar-sweep{transform-origin:50%;animation:4s linear infinite spinClockwise}@keyframes spinClockwise{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spinCounterClockwise{0%{transform:rotate(360deg)}to{transform:rotate(0)}}.telemetry-dial-readout{z-index:2;text-align:center;flex-direction:column;align-items:center;display:flex;position:relative}.tdr-title{font-size:var(--text-xs);font-weight:var(--weight-bold);letter-spacing:1.5px;font-family:monospace;transition:color .35s}.tdr-title.primary{color:var(--primary)}.tdr-value{font-size:var(--text-3xl);font-weight:var(--weight-extrabold);color:#fff;font-family:var(--font-heading);margin:var(--space-1) 0;letter-spacing:-.5px;text-shadow:0 0 10px #ffffff26;line-height:1.1}.tdr-status{letter-spacing:1px;color:var(--text-muted);font-family:monospace;font-size:8px;font-weight:var(--weight-bold)}.tdr-status.green{color:var(--correct)}.telemetry-logger{border-radius:var(--radius-sm);padding:var(--space-3) var(--space-4);color:var(--text-secondary);text-align:left;background:#00000073;border:1px solid #ffffff0d;font-family:monospace;font-size:9px;line-height:1.7}.log-line{opacity:.55;white-space:nowrap;text-overflow:ellipsis;transition:all .3s;overflow:hidden}.log-line.active-log{opacity:1;color:var(--primary);text-shadow:0 0 4px var(--primary-glow)}.telemetry-grid-panel{gap:var(--space-5);grid-template-columns:repeat(2,1fr);display:grid}.telemetry-card{padding:var(--space-6);border-radius:var(--radius-lg);gap:var(--space-4);cursor:pointer;background:#ffffff05;border:1px solid #ffffff0f;flex-direction:column;transition:all .35s cubic-bezier(.25,.8,.25,1);display:flex;position:relative;overflow:hidden}.telemetry-card:hover,.telemetry-card.active{background:#ffffff09;border-color:#ffffff1f;box-shadow:0 16px 40px #00000080,inset 0 0 12px #ffffff05}.tc-glow{background:radial-gradient(circle at 10% 10%, var(--glow-color), transparent 45%);opacity:0;pointer-events:none;transition:opacity .4s;position:absolute;inset:0}.telemetry-card:hover .tc-glow,.telemetry-card.active .tc-glow{opacity:.06}.tc-bracket{pointer-events:none;opacity:.35;width:10px;height:10px;transition:all .35s;position:absolute}.tc-bracket.tl{border-top:1.5px solid #fff6;border-left:1.5px solid #fff6;border-top-left-radius:4px;top:-1px;left:-1px}.tc-bracket.tr{border-top:1.5px solid #fff6;border-right:1.5px solid #fff6;border-top-right-radius:4px;top:-1px;right:-1px}.tc-bracket.bl{border-bottom:1.5px solid #fff6;border-left:1.5px solid #fff6;border-bottom-left-radius:4px;bottom:-1px;left:-1px}.tc-bracket.br{border-bottom:1.5px solid #fff6;border-right:1.5px solid #fff6;border-bottom-right-radius:4px;bottom:-1px;right:-1px}.telemetry-card:hover .tc-bracket,.telemetry-card.active .tc-bracket{opacity:.95;width:12px;height:12px}.telemetry-card:hover .tc-bracket.tl,.telemetry-card.active .tc-bracket.tl,.telemetry-card:hover .tc-bracket.tr,.telemetry-card.active .tc-bracket.tr,.telemetry-card:hover .tc-bracket.bl,.telemetry-card.active .tc-bracket.bl,.telemetry-card:hover .tc-bracket.br,.telemetry-card.active .tc-bracket.br{border-color:var(--glow-color)}.tc-header{justify-content:space-between;align-items:center;display:flex}.tc-icon-wrapper{border-radius:var(--radius-sm);width:38px;height:38px;color:var(--icon-color,var(--primary));background:#ffffff05;border:1px solid #ffffff14;justify-content:center;align-items:center;transition:all .35s;display:flex}.telemetry-card:hover .tc-icon-wrapper,.telemetry-card.active .tc-icon-wrapper{border-color:var(--icon-color);background:#ffffff0d;box-shadow:0 0 12px #ffffff08}.tc-code{color:var(--text-muted);letter-spacing:.5px;font-family:monospace;font-size:10px}.tc-body{gap:var(--space-2);flex-direction:column;display:flex}.tc-value-row{margin-bottom:var(--space-1);justify-content:space-between;align-items:baseline;display:flex}.tc-value{font-size:var(--text-4xl);font-weight:var(--weight-extrabold);font-family:var(--font-heading);color:#fff;letter-spacing:-1px}.tc-waveform{opacity:.35;width:60px;height:20px;transition:opacity .35s}.telemetry-card:hover .tc-waveform,.telemetry-card.active .tc-waveform{opacity:.9}.tc-waveform-path{stroke-dasharray:60;stroke-dashoffset:60px;animation:1.8s cubic-bezier(.22,1,.36,1) forwards drawWaveform}@keyframes drawWaveform{to{stroke-dashoffset:0}}.tc-label{font-size:var(--text-base);font-weight:var(--weight-bold);color:#fff;letter-spacing:-.3px;margin:0}.tc-desc{font-size:var(--text-xs);color:var(--text-secondary);opacity:.85;margin:0;line-height:1.5}.features-section{padding:var(--space-20) 6% var(--space-24);width:100%;max-width:1360px;margin:0 auto;position:relative;overflow:hidden}.features-bg-canvas{pointer-events:none;z-index:0;opacity:.85;width:100%;height:100%;position:absolute;inset:0}.features-bottom-fade{pointer-events:none;z-index:1;background:linear-gradient(#0000 0%,#000 100%);height:250px;position:absolute;bottom:0;left:0;right:0}.section-header{z-index:2;text-align:center;margin-bottom:var(--space-16);position:relative}.section-eyebrow{font-size:var(--text-xs);font-weight:var(--weight-bold);color:var(--primary);letter-spacing:2px;text-transform:uppercase;margin-bottom:var(--space-3);display:inline-block}.section-title{font-size:clamp(1.8rem,3.5vw,2.6rem);font-weight:var(--weight-extrabold);color:#fff;margin-bottom:var(--space-4);letter-spacing:-.5px}.section-subtitle{font-size:var(--text-lg);color:var(--text-secondary);max-width:600px;line-height:var(--leading-relaxed);margin:0 auto}.features-grid{z-index:2;gap:var(--space-8);grid-template-columns:repeat(3,1fr);display:grid;position:relative}.hud-feature-card{padding:var(--space-10) var(--space-8) var(--space-8);border-radius:var(--radius-xl);text-align:center;align-items:center;gap:var(--space-5);cursor:pointer;background:#060612d9;border:1px solid #5effff1f;flex-direction:column;transition:background .3s,border-color .3s,box-shadow .3s;display:flex;position:relative;overflow:hidden;box-shadow:0 20px 40px #0009,inset 0 0 20px #ffffff03}.hud-feature-card:hover{background:#060612eb;border-color:#5effff4d;box-shadow:0 30px 60px #000000b3,0 0 35px #5effff0f}.fc-glow{background:radial-gradient(circle, var(--glow-color,var(--primary)), transparent 70%);opacity:.04;pointer-events:none;border-radius:50%;width:180px;height:180px;transition:opacity .4s;position:absolute;top:-40px;left:50%;transform:translate(-50%)}.hud-feature-card:hover .fc-glow{opacity:.12}.fc-bracket{pointer-events:none;opacity:.35;width:12px;height:12px;transition:all .4s;position:absolute}.fc-bracket.tl{border-top:2px solid #fff6;border-left:2px solid #fff6;border-top-left-radius:8px;top:-1px;left:-1px}.fc-bracket.tr{border-top:2px solid #fff6;border-right:2px solid #fff6;border-top-right-radius:8px;top:-1px;right:-1px}.fc-bracket.bl{border-bottom:2px solid #fff6;border-left:2px solid #fff6;border-bottom-left-radius:8px;bottom:-1px;left:-1px}.fc-bracket.br{border-bottom:2px solid #fff6;border-right:2px solid #fff6;border-bottom-right-radius:8px;bottom:-1px;right:-1px}.hud-feature-card:hover .fc-bracket{opacity:.95;width:14px;height:14px}.hud-feature-card:hover .fc-bracket.tl,.hud-feature-card:hover .fc-bracket.tr,.hud-feature-card:hover .fc-bracket.bl,.hud-feature-card:hover .fc-bracket.br{border-color:var(--glow-color)}.fc-header{letter-spacing:.8px;z-index:2;justify-content:space-between;align-items:center;width:100%;padding:0 4px;font-family:monospace;font-size:9px;display:flex}.fc-code{color:var(--text-muted)}.fc-status-tag{color:var(--status-color);font-weight:var(--weight-bold);border-radius:var(--radius-sm);background:#ffffff05;border:1px solid #ffffff14;padding:2px 6px}.fc-icon-wrapper{width:80px;height:80px;margin-bottom:var(--space-1);z-index:2;justify-content:center;align-items:center;display:flex;position:relative}.fc-ring-outer{border:1px dashed #ffffff1a;border-radius:50%;transition:all .4s;position:absolute;inset:0}.fc-ring-inner{background:#ffffff03;border:1px solid #ffffff0d;border-radius:50%;transition:all .4s;position:absolute;inset:6px}.hud-feature-card:hover .fc-ring-outer{border-color:var(--ring-color);animation:8s linear infinite fcRotateOuter;box-shadow:0 0 15px #5effff0d}.hud-feature-card:hover .fc-ring-inner{border:1px solid #0000;border-top-color:var(--ring-color);border-bottom-color:var(--ring-color);background:#ffffff08;animation:5s linear infinite fcRotateInner}@keyframes fcRotateOuter{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes fcRotateInner{0%{transform:rotate(0)}to{transform:rotate(-360deg)}}.fc-icon{z-index:2;color:var(--ring-color);justify-content:center;align-items:center;transition:all .35s;display:flex;position:relative}.hud-feature-card:hover .fc-icon{filter:drop-shadow(0 0 8px var(--ring-color));transform:scale(1.1)}.hud-feature-card h3{font-size:var(--text-xl);font-weight:var(--weight-bold);color:#fff;z-index:2;margin:0}.hud-feature-card p{font-size:var(--text-sm);color:var(--text-secondary);line-height:var(--leading-relaxed);z-index:2;min-height:72px;margin:0}.fc-telemetry{gap:var(--space-2);z-index:2;flex-direction:column;width:100%;margin-top:auto;padding:0 4px;display:flex}.fc-telemetry-label{color:var(--text-muted);text-align:left;letter-spacing:.5px;font-family:monospace;font-size:8px}.fc-telemetry-bar{border-radius:var(--radius-full);background:#ffffff0f;width:100%;height:3px;overflow:hidden}.fc-telemetry-fill{background:linear-gradient(90deg, var(--fill-color) 0%, #fff6 30%, #fffc 50%, #fff6 70%, var(--fill-color) 100%);border-radius:var(--radius-full);opacity:.6;background-size:200% 100%;height:100%;transition:opacity .3s,box-shadow .3s;animation:3s linear infinite telemetryBarScan}@keyframes telemetryBarScan{0%{background-position:150% 0}to{background-position:-150% 0}}.hud-feature-card:hover .fc-telemetry-fill{opacity:.95;box-shadow:0 0 8px var(--fill-color)}.how-section{padding:var(--space-16) 6% var(--space-20);width:100%;max-width:1200px;margin:0 auto}.steps-grid{gap:var(--space-8);grid-template-columns:repeat(3,1fr);display:grid;position:relative}.hud-step-card{text-align:center;align-items:center;gap:var(--space-4);padding:var(--space-10) var(--space-6) var(--space-8);border-radius:var(--radius-xl);cursor:pointer;background:#060612d9;border:1px solid #5effff1f;flex-direction:column;transition:all .4s cubic-bezier(.22,1,.36,1);display:flex;position:relative;box-shadow:0 20px 40px #0009,inset 0 0 20px #ffffff03}.hud-step-card:hover{background:#060612eb;border-color:#5effff4d;box-shadow:0 25px 50px #000000b3,0 0 30px #5effff0d}.sc-glow{background:radial-gradient(circle at 50% 15%, var(--glow-color), transparent 45%);opacity:.02;pointer-events:none;transition:opacity .4s;position:absolute;inset:0}.hud-step-card:hover .sc-glow{opacity:.08}.sc-bracket{pointer-events:none;opacity:.35;width:10px;height:10px;transition:all .4s;position:absolute}.sc-bracket.tl{border-top:2px solid #fff6;border-left:2px solid #fff6;border-top-left-radius:6px;top:-1px;left:-1px}.sc-bracket.tr{border-top:2px solid #fff6;border-right:2px solid #fff6;border-top-right-radius:6px;top:-1px;right:-1px}.sc-bracket.bl{border-bottom:2px solid #fff6;border-left:2px solid #fff6;border-bottom-left-radius:6px;bottom:-1px;left:-1px}.sc-bracket.br{border-bottom:2px solid #fff6;border-right:2px solid #fff6;border-bottom-right-radius:6px;bottom:-1px;right:-1px}.hud-step-card:hover .sc-bracket{opacity:.95;width:12px;height:12px}.hud-step-card:hover .sc-bracket.tl,.hud-step-card:hover .sc-bracket.tr,.hud-step-card:hover .sc-bracket.bl,.hud-step-card:hover .sc-bracket.br{border-color:var(--glow-color)}.sc-code{color:var(--text-muted);letter-spacing:1px;margin-top:-5px;font-family:monospace;font-size:9px}.hud-step-ring{background:#ffffff03;border:1px dashed #ffffff26;border-radius:50%;justify-content:center;align-items:center;width:50px;height:50px;transition:all .4s;display:flex;position:relative}.step-ring-spin{border:2px solid #0000;border-top-color:var(--ring-color);opacity:.4;border-radius:50%;transition:all .4s;position:absolute;inset:-3px}.hud-step-card:hover .step-ring-spin{opacity:.9;animation:1.5s linear infinite spinClockwise;inset:-5px}.hud-step-card:hover .hud-step-ring{border-color:var(--ring-color);box-shadow:0 0 15px #5effff1a}.step-num-text{font-family:var(--font-heading);font-weight:var(--weight-extrabold);font-size:var(--text-lg);color:#fff}.hud-step-card:hover .step-num-text{color:var(--ring-color);text-shadow:0 0 8px var(--ring-color)}.step-icon{color:var(--text-secondary);opacity:.8;margin-top:4px}.hud-step-card h3{font-size:var(--text-lg);font-weight:var(--weight-bold);color:#fff;margin:4px 0 0}.hud-step-card p{font-size:var(--text-sm);color:var(--text-secondary);line-height:var(--leading-relaxed);margin:0}.hud-connector{display:none}@media (width>=1024px){.hud-connector{background:linear-gradient(90deg, var(--glow-color) 0%, #ffffff05 100%);opacity:.55;z-index:10;width:48px;height:1px;display:block;position:absolute;top:88px;right:-40px}.hud-connector:after{content:"";background:var(--glow-color);width:5px;height:5px;box-shadow:0 0 6px var(--glow-color);border-radius:50%;animation:2s linear infinite connectorFlow;position:absolute;top:-2px;left:0}}@keyframes connectorFlow{0%{opacity:1;left:0}90%{opacity:1}to{opacity:0;left:100%}}.final-cta-section{padding:var(--space-20) 6% var(--space-24);position:relative;overflow:hidden}.final-cta-section:before{content:"";pointer-events:none;z-index:1;background:linear-gradient(#000 0%,#0000 100%);height:250px;position:absolute;top:0;left:0;right:0}.hud-cta-card{z-index:2;max-width:860px;padding:var(--space-16) var(--space-12);text-align:center;border-radius:var(--radius-2xl);align-items:center;gap:var(--space-6);-webkit-backdrop-filter:blur(25px);background:#060612;border:1px solid #5effff2e;flex-direction:column;margin:0 auto;transition:border-color .3s,box-shadow .3s;display:flex;position:relative;overflow:hidden;box-shadow:0 30px 60px #000c,0 0 40px #5effff0a,inset 0 0 20px #5effff05}.hud-cta-card:hover{border-color:#5effff59;box-shadow:0 35px 70px #000000e6,0 0 65px #5effff14,inset 0 0 25px #5effff0a}.cta-bg-glow{pointer-events:none;background:radial-gradient(circle,#5effff12 0%,#0000 65%);position:absolute;inset:0}.cta-matrix-canvas{pointer-events:none;z-index:0;opacity:.85;mix-blend-mode:screen;width:100%;height:100%;position:absolute;inset:0}.cta-radar-bg{pointer-events:none;z-index:0;opacity:.3;width:500px;height:500px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.cta-radar-ring{opacity:0;border:1px dashed #5effff14;border-radius:50%;animation:6s linear infinite ctaRadarExpand;position:absolute;inset:0;transform:scale(.2)}.cta-radar-ring:nth-child(2){animation-delay:3s}@keyframes ctaRadarExpand{0%{opacity:0;transform:scale(.2)}20%{opacity:.8}80%{opacity:.2}to{opacity:0;transform:scale(1.2)}}.cta-grid-overlay{pointer-events:none;z-index:0;background-image:linear-gradient(#5effff04 1px,#0000 1px),linear-gradient(90deg,#5effff04 1px,#0000 1px);background-size:30px 30px;position:absolute;inset:0;-webkit-mask-image:radial-gradient(circle,#000 40%,#0000 90%);mask-image:radial-gradient(circle,#000 40%,#0000 90%)}.cta-bracket{pointer-events:none;z-index:3;opacity:.5;width:24px;height:24px;transition:all .4s;position:absolute}.cta-bracket.tl{border-top:2px solid var(--primary);border-left:2px solid var(--primary);border-top-left-radius:var(--radius-2xl);top:-1px;left:-1px}.cta-bracket.tr{border-top:2px solid var(--primary);border-right:2px solid var(--primary);border-top-right-radius:var(--radius-2xl);top:-1px;right:-1px}.cta-bracket.bl{border-bottom:2px solid var(--primary);border-left:2px solid var(--primary);border-bottom-left-radius:var(--radius-2xl);bottom:-1px;left:-1px}.cta-bracket.br{border-bottom:2px solid var(--primary);border-right:2px solid var(--primary);border-bottom-right-radius:var(--radius-2xl);bottom:-1px;right:-1px}.hud-cta-card:hover .cta-bracket{opacity:.95;width:28px;height:28px}.cta-hud-content{z-index:2;align-items:center;gap:var(--space-5);flex-direction:column;width:100%;display:flex;position:relative}.cta-hud-badge{align-items:center;gap:var(--space-2);border-radius:var(--radius-full);color:var(--primary);font-family:monospace;font-size:10px;font-weight:var(--weight-bold);letter-spacing:.8px;background:#5effff0d;border:1px solid #5effff26;padding:6px 14px;display:inline-flex}.badge-pulse.green{background:var(--correct);width:6px;height:6px;box-shadow:0 0 6px var(--correct);border-radius:50%;animation:1.5s ease-in-out infinite alternate ctaDotPulse}@keyframes ctaDotPulse{0%{opacity:.5;transform:scale(.9)}to{opacity:1;transform:scale(1.15)}}.hud-cta-card h2{font-size:clamp(1.8rem,4vw,2.6rem);font-weight:var(--weight-extrabold);color:#fff;letter-spacing:-.5px;margin:0}.hud-cta-card p{font-size:var(--text-base);color:var(--text-secondary);max-width:500px;line-height:var(--leading-relaxed);margin:0}.cta-button-wrap{margin:var(--space-2) 0}.cta-diagnostics{align-items:center;gap:var(--space-4);color:var(--text-muted);font-size:10px;font-weight:var(--weight-medium);flex-wrap:wrap;justify-content:center;display:flex}.diag-item{align-items:center;gap:var(--space-2);display:flex}.diag-dot{border-radius:50%;width:5px;height:5px}.diag-dot.green{background:var(--correct)}.diag-dot.cyan{background:var(--primary)}.diag-spacer{color:#ffffff1a}.monospace{font-family:monospace}@media (width>=1024px){.step-connector{display:block}}@media (width<=1023px){.hero-content{text-align:center;gap:var(--space-10);grid-template-columns:1fr}.hero-left{align-items:center}.hud-badge{align-self:center}.hero-headline{font-size:clamp(2.2rem,5vw,3.2rem)}.hero-desc{margin-left:auto;margin-right:auto}.hero-ctas{justify-content:center}.trust-points{align-items:center}.hero-right{order:-1}.hud-terminal{max-width:420px;animation:none}.stats-telemetry-container{gap:var(--space-6);grid-template-columns:1fr;max-width:600px;margin:0 auto}.telemetry-dashboard-panel{width:100%;max-width:340px;margin:0 auto}.telemetry-grid-panel{gap:var(--space-4)}.features-grid{grid-template-columns:1fr;max-width:480px;margin:0 auto}.steps-grid{gap:var(--space-6);grid-template-columns:1fr;max-width:400px;margin:0 auto}.step-connector{display:none}}@media (width<=640px){.hero-section{padding-left:4%;padding-right:4%;padding-bottom:var(--space-20)}.hero-headline{letter-spacing:-1px;font-size:2rem}.hero-desc{font-size:var(--text-base)}.cta-primary{font-size:var(--text-sm);padding:12px 24px}.cta-secondary{font-size:var(--text-sm);padding:12px 20px}.telemetry-grid-panel{gap:var(--space-4);grid-template-columns:1fr}.telemetry-card{padding:var(--space-5)}.tc-value{font-size:var(--text-3xl)}.cta-card{padding:var(--space-10) var(--space-6)}.cta-primary.large{font-size:var(--text-base);padding:14px 28px}.term-stats{gap:var(--space-3);flex-direction:column}.term-divider{width:80%;height:1px}.scroll-indicator{bottom:var(--space-4)}.trust-item{font-size:var(--text-xs)}.features-section,.how-section{padding-left:4%;padding-right:4%}}.hud-cta-btn{border-radius:var(--radius-full);transition:transform .35s cubic-bezier(.22,1,.36,1);animation:3s ease-in-out infinite alternate buttonGlowBreath;display:inline-flex;position:relative;overflow:hidden;background:#5effff26!important;border:none!important;padding:1.5px!important}.hud-btn-glow{border-radius:inherit;pointer-events:none;z-index:1;background:linear-gradient(90deg,#0072ff,#5effff,#0fc,#5effff,#0072ff) 0 0/200% 100%;animation:3s linear infinite borderFlow;position:absolute;inset:0}.hud-btn-inner{z-index:2;justify-content:center;align-items:center;gap:var(--space-3);color:#fff;border-radius:var(--radius-full);background:#060612;width:100%;height:100%;padding:15px 38px;transition:all .35s;display:flex;position:relative;overflow:hidden}.hud-btn-inner:before{content:"";background:linear-gradient(90deg,#0000,#ffffff26,#0000);width:50%;height:100%;transition:none;position:absolute;top:0;left:-100%;transform:skew(-25deg)}.hud-cta-btn:hover .hud-btn-inner:before{transition:left .85s ease-in-out;left:150%}.hud-cta-btn:hover .hud-btn-inner{color:var(--primary);text-shadow:0 0 8px #5effff99;background:#060612bf}.hud-cta-btn:hover{transform:translateY(-2px)scale(1.01)}.hud-cta-btn:hover svg:last-child{transform:translate(5px)}.hud-cta-btn svg:last-child{transition:transform .3s cubic-bezier(.22,1,.36,1)}.btn-icon-pulse{animation:2.5s ease-in-out infinite alternate zapPulse}@keyframes zapPulse{0%{filter:drop-shadow(0 0 #0000);transform:scale(1)}to{filter:drop-shadow(0 0 8px var(--primary));transform:scale(1.18)}}@keyframes buttonGlowBreath{0%{box-shadow:0 0 18px #5effff38,0 0 35px #00ffcc14}to{box-shadow:0 0 32px #5effff6b,0 0 55px #00ffcc38,inset 0 0 8px #5effff1f}}@keyframes borderFlow{0%{background-position:0%}to{background-position:200%}}.info-panel.auth-panel{max-width:480px;margin:0 auto}.info-panel .panel-bracket{transition:all .3s cubic-bezier(.16,1,.3,1)}.info-panel:hover .panel-bracket{opacity:.95;width:18px;height:18px}.auth-header{text-align:center;margin-bottom:var(--space-8);flex-direction:column;align-items:center;display:flex}.auth-hud-badge{align-items:center;gap:var(--space-2);color:var(--primary);border-radius:var(--radius-full);margin-bottom:var(--space-4);letter-spacing:1px;background:#5effff0d;border:1px solid #5effff26;padding:4px 10px;font-family:monospace;font-size:9px;display:inline-flex}.auth-header h2{font-size:var(--text-2xl);font-weight:var(--weight-extrabold);font-family:var(--font-heading);letter-spacing:-.5px;color:#fff;margin:0 0 var(--space-2)}.auth-header p{font-size:var(--text-sm);color:var(--text-secondary);opacity:.8;margin:0}.auth-error{color:#ff8c8c;padding:var(--space-3);border-radius:var(--radius-md);margin-bottom:var(--space-6);font-size:var(--text-sm);text-align:center;background:#ff4c4c14;border:1px solid #ff4c4c4d;font-family:monospace}.auth-form{gap:var(--space-5);flex-direction:column;display:flex}.form-group{gap:var(--space-2);text-align:left;flex-direction:column;display:flex}.form-group label{font-size:11px;font-weight:var(--weight-bold);color:var(--text-muted);letter-spacing:1px;text-transform:uppercase;font-family:monospace}.form-group input{padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);color:var(--text-primary);font-size:var(--text-sm);background:#03030c99;border:1px solid #5effff1f;font-family:monospace;transition:all .3s}.form-group input:focus{border-color:var(--primary);background:#060614d9;outline:none;box-shadow:0 0 12px #5effff1f}.btn{justify-content:center;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-5);font-size:var(--text-sm);font-weight:var(--weight-bold);border-radius:var(--radius-md);letter-spacing:.5px;text-transform:uppercase;width:100%;font-family:monospace;transition:all .3s;display:flex}.btn-submit{background:var(--primary);color:var(--text-inverse);cursor:pointer;border:1px solid #5effff4d;position:relative;overflow:hidden;box-shadow:0 4px 20px #5effff26}.btn-submit:after{content:"";opacity:0;background:linear-gradient(90deg,#0000,#ffffff26,#0000);width:200%;height:100%;transition:all .75s;position:absolute;top:0;left:-50%;transform:skew(-20deg)}.btn-submit:hover:after{opacity:1;left:120%}.btn-submit:hover{background:#00e6ce;border-color:#5effff80;transform:translateY(-1px);box-shadow:0 0 25px #5effff40}.btn-submit:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none}.btn-google{color:var(--text-secondary);cursor:pointer;background:#ffffff05;border:1px solid #ffffff1a}.btn-google:hover{color:#fff;background:#ffffff0d;border-color:#5effff4d;box-shadow:0 0 15px #5effff0d}.google-icon{width:16px;height:16px}.auth-divider{text-align:center;margin:var(--space-6) 0;color:var(--text-muted);font-size:var(--text-xs);align-items:center;font-family:monospace;display:flex}.auth-divider:before,.auth-divider:after{content:"";border-bottom:1px dashed #ffffff14;flex:1}.auth-divider:not(:empty):before{margin-right:.5em}.auth-divider:not(:empty):after{margin-left:.5em}.auth-footer{text-align:center;margin-top:var(--space-6);font-size:var(--text-sm)}.btn-toggle-auth{color:var(--primary);font-weight:var(--weight-bold);cursor:pointer;margin-left:var(--space-1);background:0 0;border:none;padding:0;font-family:monospace}.btn-toggle-auth:hover{color:#00e6ce;text-decoration:underline}.spinner{border:2px solid #fff3;border-top-color:#fff;border-radius:50%;width:18px;height:18px;animation:.8s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (width<=639px){.info-panel.auth-panel{padding:var(--space-6) var(--space-4)}}.info-page-container{min-height:100vh;color:var(--text-primary);background:#03030c;padding:120px 6% 80px;position:relative;overflow:hidden}.info-page-container:before{content:"";pointer-events:none;background:radial-gradient(circle at 10% 20%,#5effff05 0%,#0000 40%),radial-gradient(circle at 90% 80%,#7e8cfc05 0%,#0000 40%);position:absolute;inset:0}.info-header{text-align:center;z-index:2;max-width:800px;margin:0 auto 40px;position:relative}.info-title-badge{align-items:center;gap:var(--space-2);font-family:monospace;font-size:var(--text-xs);color:var(--primary);padding:var(--space-2) var(--space-4);border-radius:var(--radius-full);margin-bottom:var(--space-4);letter-spacing:1px;background:#5effff0f;border:1px solid #5effff26;display:inline-flex}.info-headline{font-size:var(--text-4xl);font-weight:var(--weight-extrabold);font-family:var(--font-heading);color:#fff;margin:0 0 var(--space-3);letter-spacing:-.5px}.info-meta{font-family:monospace;font-size:var(--text-xs);color:var(--text-muted);letter-spacing:.5px}.info-panel{border-radius:var(--radius-xl);max-width:800px;padding:var(--space-10) var(--space-8);-webkit-backdrop-filter:blur(25px);z-index:2;background:#060612d9;border:1px solid #5effff1f;margin:0 auto;position:relative;box-shadow:0 30px 60px #000000b3,0 0 50px #5effff05}.info-panel .panel-bracket{opacity:.4;width:14px;height:14px;position:absolute}.info-panel .panel-bracket.tl{border-top:2px solid var(--primary);border-left:2px solid var(--primary);border-top-left-radius:12px;top:-1px;left:-1px}.info-panel .panel-bracket.tr{border-top:2px solid var(--primary);border-right:2px solid var(--primary);border-top-right-radius:12px;top:-1px;right:-1px}.info-panel .panel-bracket.bl{border-bottom:2px solid var(--primary);border-left:2px solid var(--primary);border-bottom-left-radius:12px;bottom:-1px;left:-1px}.info-panel .panel-bracket.br{border-bottom:2px solid var(--primary);border-right:2px solid var(--primary);border-bottom-right-radius:12px;bottom:-1px;right:-1px}.info-content{gap:var(--space-8);flex-direction:column;display:flex}.info-section{padding-bottom:var(--space-6);border-bottom:1px dashed #ffffff0f}.info-section:last-child{border:none;padding:0}.info-section-title{font-size:var(--text-lg);font-weight:var(--weight-bold);color:var(--primary);margin:0 0 var(--space-3);align-items:center;gap:var(--space-3);display:flex}.info-section-num{font-family:monospace;font-size:var(--text-sm);color:var(--text-muted);border-radius:var(--radius-sm);background:#ffffff08;border:1px solid #ffffff14;justify-content:center;align-items:center;width:26px;height:26px;display:flex}.info-text{font-size:var(--text-sm);color:var(--text-secondary);line-height:var(--leading-relaxed);margin:0 0 var(--space-4)}.info-list{margin:0 0 var(--space-4);padding-left:var(--space-5);gap:var(--space-2);flex-direction:column;display:flex}.info-list li{font-size:var(--text-sm);color:var(--text-secondary);line-height:var(--leading-normal);list-style:none;position:relative}.info-list li:before{content:"▪";color:var(--primary);font-size:8px;position:absolute;top:1px;left:-15px}.info-back-btn{align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-5);border-radius:var(--radius-md);color:var(--text-secondary);font-family:monospace;font-size:var(--text-sm);background:0 0;border:1px solid #ffffff26;margin-top:40px;text-decoration:none;transition:all .3s;display:inline-flex}.info-back-btn:hover{border-color:var(--primary);color:var(--primary);transform:translate(-4px);box-shadow:0 0 15px #5effff1a}@media (width<=768px){.info-page-container{padding:100px 4% 60px}.info-panel{padding:var(--space-6) var(--space-5)}.info-headline{font-size:var(--text-2xl)}}.dashboard-page{padding-bottom:var(--space-16);position:relative}.dashboard-container{gap:var(--space-10);padding-top:var(--space-8);padding-bottom:var(--space-8);flex-direction:column;display:flex}.welcome-header{text-align:left;justify-content:space-between;align-items:center;gap:var(--space-6);padding-bottom:var(--space-6);border-bottom:1px solid var(--divider);display:flex}.welcome-header h1{font-size:2.4rem;font-weight:var(--weight-extrabold);letter-spacing:-1px;margin-bottom:var(--space-1);background:linear-gradient(135deg, #fff 40%, var(--primary-light) 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text}.welcome-header p{font-size:var(--text-base);color:var(--text-secondary)}.highlight-name{color:var(--primary);background:linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);-webkit-text-fill-color:transparent;font-weight:var(--weight-extrabold);-webkit-background-clip:text}.btn-start-exam{border:1px solid var(--primary);padding:var(--space-3) var(--space-8);font-weight:var(--weight-bold);font-size:var(--text-base);border-radius:var(--radius-full);box-shadow:0 0 15px var(--primary-glow);transition:all var(--transition-base);white-space:nowrap;align-items:center;gap:var(--space-2);background:linear-gradient(135deg,#09090e 0%,#000 100%);display:inline-flex;color:var(--primary)!important}.btn-start-exam:hover{background:var(--primary);box-shadow:0 0 25px var(--primary-glow);transform:translateY(-2px)scale(1.02);color:#000!important}.stats-grid{gap:var(--space-6);grid-template-columns:repeat(3,1fr);display:grid}.stat-card{padding:var(--space-6);align-items:center;gap:var(--space-5);text-align:left;border-radius:var(--radius-xl);transition:transform var(--transition-spring), box-shadow var(--transition-base), border-color var(--transition-base), background-color var(--transition-base);background:#ffffff05;border:1px solid #ffffff14;display:flex}.stat-card:hover{box-shadow:0 0 25px #5effff14, var(--shadow-md);background:#ffffff0d;border-color:#5effff59;transform:translateY(-4px)}.stat-icon{border-radius:var(--radius-full);width:60px;height:60px;transition:all var(--transition-base);background:#ffffff08;border:1px solid #ffffff1a;justify-content:center;align-items:center;font-size:2rem;display:flex}.stat-card:hover .stat-icon{border-color:var(--primary);background:#5effff1f;transform:scale(1.08)}.stat-info h3{font-size:2.2rem;font-weight:var(--weight-extrabold);color:var(--text-primary);line-height:var(--leading-tight);letter-spacing:-.5px}.stat-info p{font-size:var(--text-sm);color:var(--text-secondary);opacity:.8;margin-top:2px}.dashboard-content{gap:var(--space-8);grid-template-columns:2fr 1fr;align-items:start;display:grid}.recent-attempts{padding:var(--space-8);text-align:left;gap:var(--space-6);border-radius:var(--radius-2xl);background:#ffffff05;border:1px solid #ffffff14;flex-direction:column;min-height:360px;display:flex}.recent-attempts h2{font-size:var(--text-2xl);font-weight:var(--weight-bold);border-left:4px solid var(--primary);padding-left:var(--space-3);color:var(--text-primary)}.attempts-list{gap:var(--space-4);flex-direction:column;display:flex}.attempt-row{padding:var(--space-4) var(--space-6);border-radius:var(--radius-lg);transition:all var(--transition-base);background:#ffffff03;border:1px solid #ffffff0f;justify-content:space-between;align-items:center;display:flex}.attempt-row.subject-sejarah{border-left:4px solid var(--sejarah)}.attempt-row.subject-islam{border-left:4px solid var(--islam)}.attempt-row.subject-math{border-left:4px solid var(--math)}.attempt-row:hover{background:#ffffff0a;border-color:#ffffff26;transform:translate(4px)}.attempt-subject{align-items:center;gap:var(--space-4);display:flex}.subject-badge{font-size:var(--text-xs);font-weight:var(--weight-bold);padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);text-transform:uppercase;letter-spacing:.5px;color:#fff!important}.subject-badge.sejarah{background:var(--sejarah-dark);border:1px solid #00cec966}.subject-badge.islam{background:var(--islam-dark);border:1px solid #7e8cfc66}.subject-badge.math{background:var(--math-dark);border:1px solid #ff9f1c66}.attempt-date{font-size:var(--text-sm);color:var(--text-secondary);opacity:.8}.attempt-details{align-items:center;gap:var(--space-5);display:flex}.attempt-mode{font-size:var(--text-sm);color:var(--text-secondary);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);background:#ffffff0a}.attempt-score{font-size:var(--text-base);font-weight:var(--weight-bold);color:var(--primary)}.empty-attempts{text-align:center;justify-content:center;align-items:center;gap:var(--space-4);flex-direction:column;flex-grow:1;min-height:250px;display:flex}.btn-empty-cta{border:1px solid var(--primary);color:var(--primary);padding:var(--space-2) var(--space-6);border-radius:var(--radius-full);font-weight:var(--weight-bold);transition:all var(--transition-base);box-shadow:0 0 10px var(--primary-glow);background:#5effff0d}.btn-empty-cta:hover{background:var(--primary);color:#000;box-shadow:0 0 20px var(--primary-glow);transform:translateY(-1px)}.dashboard-sidebar{gap:var(--space-6);flex-direction:column;display:flex}.sidebar-box{padding:var(--space-6);text-align:left;border-radius:var(--radius-xl);background:#ffffff05;border:1px solid #ffffff14}.sidebar-box h3{font-size:var(--text-lg);margin-bottom:var(--space-4);padding-left:var(--space-2)}.tip-box h3{border-left:4px solid var(--warning)}.info-box h3{border-left:4px solid var(--primary)}.tip-box p{font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--text-secondary)}.subject-links{gap:var(--space-4);flex-direction:column;display:flex}.subject-link-card{padding:var(--space-4) var(--space-5);border-radius:var(--radius-lg);transition:all var(--transition-base);border:1px solid #ffffff1a;flex-direction:column;display:flex;color:#fff!important}.subject-link-card.sejarah{background:linear-gradient(135deg, var(--sejarah-dark) 0%, #00cec933 100%);box-shadow:0 4px 12px var(--sejarah-glow)}.subject-link-card.sejarah:hover{box-shadow:0 8px 20px var(--sejarah-glow);border-color:#00cec980;transform:translateY(-3px)scale(1.01)}.subject-link-card.islam{background:linear-gradient(135deg, var(--islam-dark) 0%, #7e8cfc33 100%);box-shadow:0 4px 12px var(--islam-glow)}.subject-link-card.islam:hover{box-shadow:0 8px 20px var(--islam-glow);border-color:#7e8cfc80;transform:translateY(-3px)scale(1.01)}.subject-link-card strong{font-size:var(--text-base);margin-bottom:2px}.subject-link-card span{font-size:var(--text-xs);opacity:.8}.achievements-section{padding:var(--space-8);text-align:left;gap:var(--space-6);border-radius:var(--radius-2xl);background:#ffffff05;border:1px solid #ffffff14;flex-direction:column;display:flex}.achievements-header{justify-content:space-between;align-items:center;gap:var(--space-4);border-bottom:1px solid var(--divider);padding-bottom:var(--space-5);display:flex}.achievements-header h2{font-size:var(--text-2xl);color:var(--text-primary);margin-bottom:var(--space-1)}.achievements-header p{font-size:var(--text-sm);color:var(--text-secondary)}.achievements-progress-badge{padding:var(--space-2) var(--space-5);border-radius:var(--radius-full);font-weight:var(--weight-bold);font-size:var(--text-sm);color:var(--primary);white-space:nowrap;box-shadow:0 0 15px var(--primary-glow);background:#5effff0d;border:1px solid #5effff4d}.badges-grid{gap:var(--space-6);grid-template-columns:repeat(auto-fill,minmax(220px,1fr));display:grid}.badge-card{text-align:center;padding:var(--space-6) var(--space-4);border-radius:var(--radius-xl);align-items:center;gap:var(--space-4);transition:all var(--transition-spring);background:#ffffff03;border:1px solid #ffffff0f;flex-direction:column;display:flex;position:relative}.badge-card.unlocked{box-shadow:0 4px 15px var(--badge-glow);border-color:#ffffff26}.badge-card.unlocked:hover{border-color:var(--primary);box-shadow:0 10px 25px var(--badge-glow), 0 0 20px var(--primary-glow);transform:translateY(-5px)}.badge-card.locked{opacity:.5;filter:grayscale();background:#0003;border-color:#ffffff08}.badge-icon-wrapper{border-radius:var(--radius-full);width:80px;height:80px;margin-bottom:var(--space-1);transition:transform var(--transition-base);background:#ffffff05;border:1px solid #ffffff14;justify-content:center;align-items:center;display:flex;position:relative;box-shadow:inset 0 0 15px #ffffff0d}.badge-card.unlocked .badge-icon-wrapper{background:var(--badge-color);box-shadow:0 4px 20px var(--badge-glow), inset 0 0 10px #fff3;border-color:#ffffff4d}.badge-card.locked .badge-icon-wrapper{background:var(--text-muted)}.badge-icon{font-size:2.2rem}.badge-lock{border-radius:var(--radius-full);background:#000;border:1px solid #ffffff26;justify-content:center;align-items:center;width:26px;height:26px;font-size:.8rem;display:flex;position:absolute;bottom:-2px;right:-2px}.badge-info h4{font-size:var(--text-base);font-weight:var(--weight-bold);margin-bottom:var(--space-1);color:var(--text-primary)}.badge-info p{font-size:var(--text-xs);color:var(--text-secondary);line-height:var(--leading-normal);opacity:.8}.badge-status-tag{font-size:.65rem;font-weight:var(--weight-bold);letter-spacing:.5px;text-transform:uppercase;padding:4px var(--space-3);border-radius:var(--radius-full);color:var(--text-secondary);background:#ffffff0a;border:1px solid #ffffff14;margin-top:auto}.badge-card.unlocked .badge-status-tag{color:var(--correct);background:#00ffcc14;border-color:#0fc3}@media (width<=1023px){.stats-grid{gap:var(--space-4);grid-template-columns:repeat(3,1fr)}.dashboard-content{gap:var(--space-6);grid-template-columns:1fr}.achievements-section{padding:var(--space-6)}}@media (width<=767px){.stats-grid{gap:var(--space-4);grid-template-columns:1fr}.welcome-header{align-items:flex-start;gap:var(--space-4);flex-direction:column}.btn-start-exam{justify-content:center;width:100%}.badges-grid{gap:var(--space-4);grid-template-columns:repeat(2,1fr)}.badge-icon-wrapper{width:70px;height:70px}.badge-icon{font-size:2rem}}@media (width<=480px){.badges-grid{grid-template-columns:1fr}.attempt-row{align-items:flex-start;gap:var(--space-3);flex-direction:column}.attempt-details{justify-content:space-between;width:100%}}.clickable-attempt-row{cursor:pointer;text-decoration:none!important}.attempt-arrow{color:var(--text-secondary);font-size:var(--text-base);font-weight:var(--weight-bold);transition:transform var(--transition-fast), color var(--transition-fast);margin-left:var(--space-1)}.clickable-attempt-row:hover .attempt-arrow{color:var(--primary);transform:translate(4px)}.subjects-page{padding-bottom:var(--space-12)}.subjects-container{gap:var(--space-8);padding-top:var(--space-8);flex-direction:column;display:flex}.subjects-header{text-align:center}.subjects-header h1{font-size:var(--text-4xl);margin-bottom:var(--space-2)}.subjects-header p{color:var(--text-secondary);font-size:var(--text-lg);max-width:600px;margin:0 auto}.subjects-filter-bar{justify-content:space-between;align-items:center;gap:var(--space-6);padding:var(--space-4) var(--space-6);border-radius:var(--radius-lg);border:1px solid var(--glass-border);width:100%;box-shadow:var(--shadow-md);flex-direction:row;margin:0 auto;display:flex}.search-wrap{flex:1;align-items:center;display:flex;position:relative}.search-icon{left:var(--space-4);color:var(--text-secondary);pointer-events:none;font-size:1.1rem;position:absolute}.search-input{width:100%;padding:var(--space-3) var(--space-4) var(--space-3) var(--space-10);border-radius:var(--radius-md);border:1px solid var(--glass-border);background:var(--bg-input);color:var(--text-primary);font-size:var(--text-sm);transition:border-color var(--transition-fast), box-shadow var(--transition-fast)}.search-input:focus{border-color:var(--primary-light);box-shadow:0 0 0 2px var(--primary-glow);outline:none}.filter-groups{gap:var(--space-6);align-items:center;display:flex}.filter-group{align-items:center;gap:var(--space-2);display:flex}.filter-group label{font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}.filter-select{padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);border:1px solid var(--glass-border);background:var(--bg-input);color:var(--text-primary);font-size:var(--text-sm);cursor:pointer;min-width:140px;transition:border-color var(--transition-fast), box-shadow var(--transition-fast)}.filter-select:focus{border-color:var(--primary-light);outline:none}.subjects-grid{gap:var(--space-8);grid-template-columns:1fr 1fr;width:100%;margin:0 auto;display:grid}.subject-card{padding:var(--space-8) var(--space-6);text-align:center;box-shadow:var(--shadow-xl);border:1px solid var(--glass-border);transition:transform var(--transition-base), box-shadow var(--transition-base);flex-direction:column;align-items:center;display:flex;position:relative;overflow:hidden}.card-ribbon{background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);color:#fff;text-align:center;width:120px;font-size:.7rem;font-weight:var(--weight-bold);padding:var(--space-1) 0;z-index:2;letter-spacing:.05em;text-transform:uppercase;position:absolute;top:14px;left:-32px;transform:rotate(-45deg);box-shadow:0 2px 6px #0000004d}.card-ribbon.level-1{background:linear-gradient(135deg,#ff4d4d 0%,#b30000 100%)}.card-ribbon.level-2{background:linear-gradient(135deg,#ff8533 0%,#b34700 100%)}.card-ribbon.level-3{background:linear-gradient(135deg,#ffc233 0%,#b38000 100%)}.card-ribbon.level-4{background:linear-gradient(135deg,#3c3 0%,green 100%)}.card-ribbon.level-5{background:linear-gradient(135deg,#3cc 0%,teal 100%)}.card-ribbon.level-6{background:linear-gradient(135deg,#39f 0%,#0052cc 100%)}.card-ribbon.level-T1{background:linear-gradient(135deg,#66f 0%,#00c 100%)}.card-ribbon.level-T2{background:linear-gradient(135deg,#b366ff 0%,#60c 100%)}.card-ribbon.level-T3{background:linear-gradient(135deg,#f6f 0%,#c0c 100%)}.card-ribbon.level-T4{background:linear-gradient(135deg,#ff4d94 0%,#cc0052 100%)}.card-ribbon.level-T5{background:linear-gradient(135deg,#e6005c 0%,#800033 100%)}.subject-icon-wrap{border-radius:var(--radius-full);width:80px;height:80px;margin-bottom:var(--space-4);justify-content:center;align-items:center;font-size:2.8rem;display:flex}.subject-icon-wrap.sejarah{background:var(--sejarah-glow);border:2px solid var(--sejarah)}.subject-icon-wrap.islam{background:var(--islam-glow);border:2px solid var(--islam)}.subject-icon-wrap.matematik{background:var(--math-glow);border:2px solid var(--math)}.subject-card h2{font-size:var(--text-2xl);margin-bottom:var(--space-3)}.subject-description{font-size:var(--text-sm);color:var(--text-secondary);line-height:var(--leading-relaxed);margin-bottom:var(--space-6);flex:1}.subject-meta{justify-content:center;gap:var(--space-2);margin-bottom:var(--space-8);flex-wrap:wrap;display:flex}.meta-badge{font-size:var(--text-xs);padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);background:var(--bg-secondary);border:1px solid var(--border-color);color:var(--text-secondary);font-weight:var(--weight-medium)}.btn-select{padding:var(--space-3) var(--space-8);border-radius:var(--radius-md);font-weight:var(--weight-bold);color:#fff;width:80%;transition:all var(--transition-base);text-decoration:none}.btn-select.sejarah{background:linear-gradient(135deg, var(--sejarah-dark) 0%, var(--sejarah) 100%);box-shadow:0 4px 12px var(--sejarah-glow)}.btn-select.sejarah:hover{box-shadow:0 6px 18px var(--sejarah-glow);color:#fff;transform:translateY(-2px)}.btn-select.islam{background:linear-gradient(135deg, var(--islam-dark) 0%, var(--islam) 100%);box-shadow:0 4px 12px var(--islam-glow)}.btn-select.islam:hover{box-shadow:0 6px 18px var(--islam-glow);color:#fff;transform:translateY(-2px)}.btn-select.matematik{background:linear-gradient(135deg, var(--math-dark) 0%, var(--math) 100%);box-shadow:0 4px 12px var(--math-glow)}.btn-select.matematik:hover{box-shadow:0 6px 18px var(--math-glow);color:#fff;transform:translateY(-2px)}.subjects-empty{text-align:center;padding:var(--space-12) var(--space-6);color:var(--text-secondary);font-size:var(--text-base);border-radius:var(--radius-lg);border:1px solid var(--glass-border);grid-column:span 2}@media (width<=767px){.subjects-filter-bar{align-items:stretch;gap:var(--space-4);padding:var(--space-4);flex-direction:column}.filter-groups{align-items:stretch;gap:var(--space-3);flex-direction:column}.filter-group{justify-content:space-between}.filter-select{width:60%;min-width:unset}.subjects-grid{gap:var(--space-6);grid-template-columns:1fr}.subject-card{padding:var(--space-6) var(--space-4)}.subjects-empty{grid-column:span 1}}.setup-page{padding-bottom:var(--space-12)}.setup-container{gap:var(--space-8);padding-top:var(--space-6);flex-direction:column;display:flex}.setup-header{text-align:left}.back-link{color:var(--text-muted);font-size:var(--text-sm);margin-bottom:var(--space-2);transition:color var(--transition-fast);display:inline-block}.back-link:hover{color:var(--primary-light)}.subject-title-theme{font-size:var(--text-3xl);margin-bottom:var(--space-1)}.subject-title-theme.sejarah{background:linear-gradient(135deg, var(--sejarah-light) 0%, var(--sejarah) 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text}.subject-title-theme.islam{background:linear-gradient(135deg, var(--islam-light) 0%, var(--islam) 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text}.setup-content{gap:var(--space-8);grid-template-columns:2fr 1fr;align-items:start;display:grid}.modes-section{text-align:left;gap:var(--space-5);flex-direction:column;display:flex}.mode-cards{gap:var(--space-4);flex-direction:column;display:flex}.mode-card{align-items:center;gap:var(--space-5);padding:var(--space-5) var(--space-6);cursor:pointer;border-radius:var(--radius-xl);transition:all var(--transition-base);text-align:left;background:#ffffff05;border:1px solid #ffffff14;display:flex}.mode-card:hover{background:#ffffff0d;border-color:#ffffff2e}.mode-card.active{border-color:var(--primary);box-shadow:0 0 20px var(--primary-glow);background:#5effff0f}.mode-icon{font-size:2.2rem}.mode-info{flex:1}.mode-info h3{font-size:var(--text-lg);margin-bottom:var(--space-1);color:var(--text-primary)}.mode-info p{font-size:var(--text-sm);line-height:var(--leading-normal);color:var(--text-secondary)}.radio-outer{width:22px;height:22px;transition:border-color var(--transition-fast);border:2px solid #ffffff26;border-radius:50%;justify-content:center;align-items:center;display:flex}.mode-card.active .radio-outer{border-color:var(--primary)}.radio-inner{background:var(--primary);border-radius:50%;width:12px;height:12px}.btn-start-session{margin-top:var(--space-4);padding:var(--space-4) var(--space-8);font-size:var(--text-base);font-weight:var(--weight-bold);border:1px solid var(--primary);border-radius:var(--radius-full);box-shadow:0 0 15px var(--primary-glow);transition:all var(--transition-base);text-align:center;background:linear-gradient(135deg,#09090e 0%,#000 100%);width:100%;display:block;color:var(--primary)!important}.btn-start-session:hover{background:var(--primary);box-shadow:0 0 25px var(--primary-glow);transform:translateY(-2px);color:#000!important}.details-sidebar{padding:var(--space-6);text-align:left;border-radius:var(--radius-xl);background:#ffffff05;border:1px solid #ffffff14}.details-sidebar h3{font-size:var(--text-xl);margin-bottom:var(--space-4);padding-bottom:var(--space-2);border-bottom:1px solid #ffffff14}.details-list{gap:var(--space-3);margin-bottom:var(--space-6);flex-direction:column;display:flex}.detail-item{font-size:var(--text-sm);justify-content:space-between;display:flex}.detail-label{color:var(--text-muted)}.detail-val{font-weight:var(--weight-semibold);color:var(--text-primary)}.exam-guidelines h4{font-size:var(--text-base);margin-bottom:var(--space-2);color:var(--warning-dark)}.exam-guidelines ul{padding-left:var(--space-4);gap:var(--space-2);flex-direction:column;list-style-type:disc;display:flex}.exam-guidelines li{font-size:var(--text-xs);color:var(--text-secondary);line-height:var(--leading-normal)}@media (width<=1023px){.setup-content{grid-template-columns:1fr}}.q-renderer{gap:var(--space-6);padding:var(--space-6);background:var(--bg-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);flex-direction:column;display:flex}.q-renderer h3{font-size:var(--text-xl);font-weight:var(--weight-medium);line-height:var(--leading-relaxed);color:var(--text-primary)}.q-renderer .jawi{font-size:var(--text-2xl);text-align:right;margin-bottom:var(--space-2)}.sub-question{background:var(--bg-input);padding:var(--space-4);border-radius:var(--radius-md);font-family:var(--font-mono);font-size:var(--text-sm);white-space:pre-wrap;color:var(--text-secondary)}.options-list{gap:var(--space-3);flex-direction:column;display:flex}.option-label{align-items:center;gap:var(--space-4);padding:var(--space-4);border:2px solid var(--border-color);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);background:var(--bg-primary);display:flex}.option-label:hover:not(.disabled){border-color:var(--primary-light);background:var(--bg-card-hover)}.option-label.selected{border-color:var(--primary);background:var(--primary-glow)}.option-label.correct{border-color:var(--correct);background:var(--correct-glow)}.option-label.wrong{border-color:var(--wrong);background:var(--wrong-glow)}.option-label input[type=radio]{width:18px;height:18px;accent-color:var(--primary)}.tf-list{gap:var(--space-4);flex-direction:column;display:flex}.tf-item{padding:var(--space-4);background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius-md);justify-content:space-between;align-items:center;gap:var(--space-4);display:flex}.tf-text{font-size:var(--text-base);flex:1}.tf-actions{gap:var(--space-2);display:flex}.btn-tf{padding:var(--space-2) var(--space-4);border:1px solid var(--border-color);border-radius:var(--radius-sm);background:var(--bg-secondary);font-weight:var(--weight-medium);transition:all var(--transition-fast)}.btn-tf.selected{background:var(--primary);color:#fff;border-color:var(--primary)}.tf-result{font-size:var(--text-xl);margin-left:var(--space-2)}.tf-semakan-container{align-items:center;gap:var(--space-3);margin-left:var(--space-4);padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);background:#ffffff05;border:1px solid #ffffff14;display:flex}.tf-semakan-text{align-items:center;gap:var(--space-3);font-size:var(--text-sm);color:var(--text-secondary);display:flex}.divider-dot{color:#fff3;font-weight:700}.text-correct{color:var(--correct)!important}.text-wrong{color:var(--wrong)!important}.word-bank{gap:var(--space-3);padding:var(--space-4);background:var(--bg-input);border-radius:var(--radius-md);margin-bottom:var(--space-4);flex-wrap:wrap;display:flex}.word-chip{background:var(--bg-card);padding:var(--space-2) var(--space-4);border-radius:var(--radius-full);border:1px solid var(--border-color);font-size:var(--text-sm);font-weight:var(--weight-medium);box-shadow:var(--shadow-sm);cursor:grab;-webkit-user-select:none;user-select:none;transition:all var(--transition-fast) ease-in-out}.word-chip:hover:not(.used){box-shadow:var(--shadow-md);border-color:var(--primary-light);background:var(--bg-card-hover);transform:translateY(-2px)}.word-chip:active{cursor:grabbing}.word-chip.used{opacity:.4;cursor:pointer;background:var(--bg-secondary);box-shadow:none;border-style:dashed;transform:scale(.95)}.fill-text{font-size:var(--text-lg);line-height:2.5}.blank-input{border:none;border-bottom:2px dashed var(--primary-light);background:var(--bg-input);text-align:center;width:140px;margin:0 var(--space-2);font-size:inherit;color:var(--text-primary);font-family:inherit;font-weight:var(--weight-bold);padding:var(--space-1) var(--space-3);border-radius:var(--radius-sm) var(--radius-sm) 0 0;transition:all var(--transition-fast) ease-in-out}.blank-input:focus,.blank-input.selected-blank{border-bottom:2px solid var(--primary);background:var(--primary-glow);box-shadow:0 4px 6px -1px var(--primary-glow);outline:none}.blank-input.drag-over{border-bottom:2px solid var(--secondary);transform:scale(1.05);background:var(--secondary-glow)!important}.blank-input.correct{border-bottom:2px solid var(--correct);color:var(--correct-dark);background:var(--correct-glow)}.blank-input.wrong{border-bottom:2px solid var(--wrong);color:var(--wrong-dark);background:var(--wrong-glow)}.sw-list{gap:var(--space-4);flex-direction:column;display:flex}.sw-item{padding:var(--space-4);background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius-md);justify-content:space-between;align-items:center;display:flex}.sw-rumi{font-size:var(--text-lg);font-weight:var(--weight-semibold)}.sw-options{gap:var(--space-3);display:flex}.btn-sw{padding:var(--space-2) var(--space-4);border:1px solid var(--border-color);border-radius:var(--radius-md);font-size:var(--text-lg)}.btn-sw.selected{background:var(--primary);color:#fff;border-color:var(--primary)}.btn-sw.correct{background:var(--correct);color:#fff;border-color:var(--correct)}.btn-sw.wrong{background:var(--wrong);color:#fff;border-color:var(--wrong)}.transcribe-list{gap:var(--space-4);flex-direction:column;display:flex}.transcribe-item{gap:var(--space-2);padding:var(--space-4);background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius-md);flex-direction:column;display:flex}.transcribe-input{padding:var(--space-3);border:1px solid var(--border-color);border-radius:var(--radius-sm);background:var(--bg-input);font-size:var(--text-base)}.transcribe-input.correct{border-color:var(--correct);background:var(--correct-glow)}.transcribe-input.wrong{border-color:var(--wrong);background:var(--wrong-glow)}.match-list{gap:var(--space-4);flex-direction:column;display:flex}.match-row{padding:var(--space-4);background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius-md);justify-content:space-between;align-items:center;gap:var(--space-4);display:flex}.match-left{font-size:var(--text-base);font-weight:var(--weight-medium);flex:1}.match-select{padding:var(--space-2) var(--space-4);border:1px solid var(--border-color);border-radius:var(--radius-sm);background:var(--bg-input);font-size:var(--text-sm);min-width:200px}.match-select.correct{border-color:var(--correct);color:var(--correct-dark);background:var(--correct-glow)}.match-select.wrong{border-color:var(--wrong);color:var(--wrong-dark);background:var(--wrong-glow)}.essay-input{padding:var(--space-4);border:1px solid var(--border-color);border-radius:var(--radius-md);background:var(--bg-input);font-size:var(--text-base);resize:vertical;min-height:150px}.essay-input:focus{border-color:var(--primary);box-shadow:var(--shadow-glow-primary);outline:none}.feedback-box{margin-top:var(--space-6);padding:var(--space-4);background:var(--correct-glow);border-left:4px solid var(--correct);border-radius:0 var(--radius-md) var(--radius-md) 0}.feedback-box h4{font-size:var(--text-sm);color:var(--correct-dark);margin-bottom:var(--space-2)}.feedback-box p{font-size:var(--text-sm);color:var(--text-primary);line-height:var(--leading-relaxed)}.feedback-box.info{background:var(--primary-glow);border-left-color:var(--primary)}.feedback-box.info h4{color:var(--primary)}@media (width<=767px){.tf-item,.match-row{align-items:stretch;gap:var(--space-3);flex-direction:column}.tf-actions{justify-content:stretch}.btn-tf{flex:1}.tf-semakan-container{margin-left:0;margin-top:var(--space-2);justify-content:center}}.hud-diagram-container{margin:var(--space-4) auto;width:100%;max-width:320px;padding:var(--space-4);border-radius:var(--radius-lg);background:#06061273;border:1px solid #5effff26;justify-content:center;align-items:center;display:flex;box-shadow:0 10px 25px #00000080,inset 0 0 15px #5effff05}.hud-diagram-svg{width:100%;height:auto;max-height:240px;display:block}.hud-diagram-svg text{font-family:var(--font-heading);letter-spacing:.5px}.math-frac{vertical-align:middle;flex-direction:column;align-items:center;padding:0 .15em;font-size:.9em;line-height:1.1;display:inline-flex}.frac-num{border-bottom:1.5px solid var(--text-primary);text-align:center;width:100%;padding-bottom:.1em;font-size:.9em;display:block}.frac-den{text-align:center;width:100%;padding-top:.15em;font-size:.9em;display:block}.math-set-line{margin:var(--space-4) 0;padding:var(--space-3) var(--space-4);background:var(--bg-input);border:1px solid var(--border-color);border-left:3px solid var(--math);border-radius:var(--radius-md);font-family:var(--font-mono);font-size:var(--text-lg);color:var(--text-primary);line-height:1.6;display:block}.math-set-symbol{font-weight:var(--weight-bold);color:var(--math)}.math-set-item{background:var(--math-glow);color:var(--math);border-radius:var(--radius-sm);font-size:var(--text-base);font-weight:var(--weight-medium);border:1px solid #ff9f1c4d;margin:0 2px;padding:2px 8px;display:inline-block}.math-expr{font-family:var(--font-mono);border-radius:var(--radius-sm);white-space:nowrap;background:#ffffff08;border:1px solid #ffffff14;padding:2px 8px;display:inline-block}.math-var{color:#ff5e7e;font-style:italic;font-weight:var(--weight-bold);font-family:var(--font-mono);padding:0 1px}.math-num{color:#f4c430;font-family:var(--font-mono);font-weight:var(--weight-semibold)}.math-op{color:var(--primary);font-weight:var(--weight-bold);padding:0 4px}.exam-session-page{flex-direction:column;display:flex}.exam-header{top:var(--nav-height);z-index:var(--z-sticky);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);padding:var(--space-3) 0;background:#000000d9;border-bottom:1px solid #ffffff14;position:sticky}.header-inner{justify-content:space-between;align-items:center;display:flex}.exam-title-area{align-items:center;gap:var(--space-3);display:flex}.exam-subject-badge{background:var(--primary-dark);border:1px solid var(--primary);color:var(--primary);padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:var(--weight-bold);letter-spacing:.5px}.exam-section-name{font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--text-secondary)}.exam-controls{align-items:center;gap:var(--space-4);display:flex}.timer-box{padding:var(--space-1) var(--space-4);border-radius:var(--radius-full);font-family:var(--font-mono);font-weight:var(--weight-extrabold);font-size:var(--text-base);color:var(--text-primary);background:#ffffff08;border:1px solid #ffffff1f}.timer-box.warning{color:var(--wrong);border-color:var(--wrong);background:var(--wrong-glow);animation:1.5s infinite pulse}.mode-indicator{font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--correct)}.btn-exit{font-size:var(--text-sm);color:var(--text-secondary);transition:color var(--transition-fast)}.btn-exit:hover{color:var(--wrong);text-decoration:underline}.exam-container{padding-top:var(--space-6);padding-bottom:var(--space-12);gap:var(--space-6);flex-direction:column;flex:1;display:flex}.progress-bar-container{gap:var(--space-2);flex-direction:column;display:flex}.progress-text{font-size:var(--text-sm);color:var(--text-secondary);font-weight:var(--weight-medium)}.progress-track{border-radius:var(--radius-full);background:#ffffff14;width:100%;height:8px;overflow:hidden}.progress-fill{background:linear-gradient(90deg, var(--primary) 0%, var(--primary-light) 100%);border-radius:var(--radius-full);height:100%}.exam-layout{gap:var(--space-8);grid-template-columns:240px 1fr;align-items:start;display:grid}.question-nav{padding:var(--space-5);border-radius:var(--radius-xl);background:#ffffff05;border:1px solid #ffffff14}.question-nav h3{font-size:var(--text-lg);margin-bottom:var(--space-4);text-align:center}.nav-grid{gap:var(--space-2);grid-template-columns:repeat(4,1fr);display:grid}.nav-btn{aspect-ratio:1;width:100%;font-size:var(--text-sm);font-weight:var(--weight-bold);border-radius:var(--radius-md);color:var(--text-primary);transition:all var(--transition-base);background:#ffffff03;border:1px solid #ffffff14;justify-content:center;align-items:center;display:flex}.nav-btn:hover{background:#ffffff0d;border-color:#5effff4d}.nav-btn.answered{color:var(--sejarah-light);background:#00cec90f;border-color:#00cec980}.nav-btn.current{background:var(--primary);color:#000;border-color:var(--primary);box-shadow:0 0 15px var(--primary-glow);transform:scale(1.08)}.question-main{gap:var(--space-6);flex-direction:column;display:flex}.question-actions{margin-top:var(--space-4);padding-top:var(--space-6);border-top:1px solid var(--divider);justify-content:space-between;align-items:center;display:flex}.btn-action{padding:var(--space-3) var(--space-6);border-radius:var(--radius-full);font-weight:var(--weight-bold);font-size:var(--text-base);transition:all var(--transition-base)}.btn-prev{color:#fff;background:#ffffff05;border:1px solid #ffffff1f}.btn-prev:hover:not(:disabled){background:#ffffff14;border-color:#ffffff40}.btn-prev:disabled{opacity:.3;cursor:not-allowed}.btn-next{border:1px solid var(--primary);color:var(--primary);background:linear-gradient(135deg,#09090e 0%,#000 100%)}.btn-next:hover{background:var(--primary);color:#000;box-shadow:0 0 15px var(--primary-glow)}.btn-show-answer{background:var(--warning);color:#000;font-weight:var(--weight-bold);border:none}.btn-show-answer:hover{color:#000;background:#e5b22d}.btn-submit-exam{background:var(--correct);color:#000;box-shadow:0 0 15px var(--correct-glow);border:none}.btn-submit-exam:hover{box-shadow:0 0 25px var(--correct-glow);background:#00e6b8;transform:translateY(-2px)}.btn-submit-exam:disabled{opacity:.6;cursor:wait;color:var(--text-secondary)!important;box-shadow:none!important;background:#ffffff0d!important;border:1px solid #ffffff14!important}@media (width<=1023px){.exam-layout{grid-template-columns:1fr}.question-nav,.exam-section-name{display:none}}.results-page{padding-bottom:var(--space-12)}.results-container{gap:var(--space-8);padding-top:var(--space-6);flex-direction:column;display:flex}.results-header{text-align:center;padding:var(--space-8);border-radius:var(--radius-2xl);box-shadow:var(--shadow-lg);background:#ffffff05;border:1px solid #ffffff14}.results-header h1{font-size:2.6rem;font-weight:var(--weight-extrabold);margin-bottom:var(--space-2);background:linear-gradient(135deg, #fff 40%, var(--primary-light) 100%);-webkit-text-fill-color:transparent;letter-spacing:-.5px;-webkit-background-clip:text}.results-header p{font-size:var(--text-lg);color:var(--text-secondary)}.results-grid{gap:var(--space-8);grid-template-columns:1fr 2fr;align-items:start;display:grid}.score-card{padding:var(--space-8) var(--space-6);text-align:center;border-radius:var(--radius-2xl);box-shadow:var(--shadow-lg);background:#ffffff05;border:1px solid #ffffff14;flex-direction:column;align-items:center;display:flex}.score-circle{width:180px;height:180px;margin-bottom:var(--space-6);background:conic-gradient(var(--correct) 0%, var(--correct) 80%, #ffffff0f 80%, #ffffff0f 100%);border-radius:50%;padding:10px;position:relative;box-shadow:0 0 25px #00ffcc26}.score-circle.pass{background:conic-gradient(var(--correct) 0%, var(--correct) 100%);box-shadow:0 0 30px var(--correct-glow)}.score-circle.fail{background:conic-gradient(var(--wrong) 0%, var(--wrong) 100%);box-shadow:0 0 30px var(--wrong-glow)}.score-inner{background:#000;border:1px solid #ffffff14;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;display:flex}.score-val{font-size:var(--text-5xl);font-weight:var(--weight-extrabold);letter-spacing:-1px;line-height:1}.score-circle.pass .score-val{color:var(--correct)}.score-circle.fail .score-val{color:var(--wrong)}.score-label{font-size:var(--text-xs);color:var(--text-secondary);opacity:.8;margin-top:var(--space-1)}.score-card h2{font-size:var(--text-2xl);font-weight:var(--weight-bold);margin-bottom:var(--space-6)}.score-stats{gap:var(--space-3);width:100%;margin-bottom:var(--space-8);flex-direction:column;display:flex}.score-stat-item{padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);background:#ffffff05;border:1px solid #ffffff0f;justify-content:space-between;display:flex}.stat-l{color:var(--text-secondary);font-size:var(--text-sm)}.stat-v{font-weight:var(--weight-bold);color:var(--text-primary)}.score-actions{gap:var(--space-3);flex-direction:column;width:100%;display:flex}.btn-score{padding:var(--space-3);border-radius:var(--radius-full);font-weight:var(--weight-bold);transition:all var(--transition-base);font-size:var(--text-sm)}.btn-primary{border:1px solid var(--primary);color:var(--primary);box-shadow:0 0 15px var(--primary-glow);background:linear-gradient(135deg,#09090e 0%,#000 100%)}.btn-primary:hover{background:var(--primary);color:#000;box-shadow:0 0 25px var(--primary-glow);transform:translateY(-2px)}.btn-secondary{color:#fff;background:0 0;border:1px solid #ffffff26}.btn-secondary:hover{background:#ffffff0f;border-color:#ffffff4d}.review-section{padding:var(--space-8);border-radius:var(--radius-2xl);background:#ffffff05;border:1px solid #ffffff14}.review-section h3{font-size:var(--text-2xl);font-weight:var(--weight-bold);margin-bottom:var(--space-5);padding-bottom:var(--space-3);border-bottom:1px solid #ffffff14}.review-list{gap:var(--space-4);max-height:600px;padding-right:var(--space-2);flex-direction:column;display:flex;overflow-y:auto}.review-item{padding:var(--space-6);border-radius:var(--radius-lg);margin-bottom:var(--space-4);transition:all var(--transition-base);background:#ffffff03;border:1px solid #ffffff0f}.review-item:hover{background:#ffffff08;border-color:#ffffff1f}.review-item.correct-item{border-left:5px solid var(--correct);box-shadow:inset 5px 0 15px #00ffcc05}.review-item.wrong-item{border-left:5px solid var(--wrong);box-shadow:inset 5px 0 15px #ff5e7e05}.review-item.essay-item{border-left:5px solid var(--primary-light);box-shadow:inset 5px 0 15px #9dcdfd05}.review-q-header{margin-bottom:var(--space-3);justify-content:space-between;align-items:center;display:flex}.review-q-num{font-size:var(--text-sm);font-weight:var(--weight-bold);color:var(--primary)}.review-status-badge{font-size:var(--text-xs);font-weight:var(--weight-bold);padding:var(--space-1) var(--space-3);border-radius:var(--radius-full)}.review-status-badge.correct{background:var(--correct-glow);color:var(--correct-dark)}.review-status-badge.wrong{background:var(--wrong-glow);color:var(--wrong-dark)}.review-status-badge.essay{background:var(--primary-glow);color:var(--primary)}.review-q-type{font-size:var(--text-xs);color:var(--text-muted);background:var(--bg-secondary);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);font-weight:var(--weight-medium)}.review-q-text-jawi{font-size:var(--text-2xl);text-align:right;margin-bottom:var(--space-2);color:var(--text-primary)}.wrong-fact{color:var(--wrong);font-weight:var(--weight-extrabold);background:var(--wrong-glow);border-radius:var(--radius-sm);border:1px solid #ff6b6b4d;padding:0 4px}.review-q-text{font-size:var(--text-base);font-weight:var(--weight-semibold);color:var(--text-primary);margin-bottom:var(--space-3);line-height:var(--leading-normal)}.review-sub-question{background:var(--bg-input);padding:var(--space-3);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:var(--text-xs);white-space:pre-wrap;color:var(--text-secondary);margin-bottom:var(--space-3);border-left:2px solid var(--border-color)}.review-answer-area{margin:var(--space-4) 0;padding:var(--space-4);background:var(--bg-secondary);border-radius:var(--radius-md);border:1px solid var(--border-color)}.review-details-mcq{gap:var(--space-2);flex-direction:column;display:flex}.review-opt{align-items:center;gap:var(--space-3);padding:var(--space-3);border:1px solid var(--border-color);border-radius:var(--radius-sm);background:var(--bg-primary);font-size:var(--text-sm);display:flex}.review-opt.correct{border-color:var(--correct);background:var(--correct-glow);font-weight:var(--weight-semibold);color:var(--correct-dark)}.review-opt.wrong{border-color:var(--wrong);background:var(--wrong-glow);color:var(--wrong-dark)}.opt-indicator{font-family:var(--font-mono);font-weight:var(--weight-bold);width:20px}.review-sub-row{padding:var(--space-3);border-bottom:1px solid var(--divider);font-size:var(--text-sm);justify-content:space-between;align-items:center;gap:var(--space-4);display:flex}.review-sub-row:last-child{border-bottom:none}.review-sub-row.correct{border-left:3px solid var(--correct);padding-left:var(--space-2)}.review-sub-row.wrong{border-left:3px solid var(--wrong);padding-left:var(--space-2)}.sub-text{color:var(--text-primary);flex:1}.sub-answers{gap:var(--space-2);flex-shrink:0;align-items:center;display:flex}.text-correct{color:var(--correct-dark);font-weight:var(--weight-bold)}.text-wrong{color:var(--wrong-dark);font-weight:var(--weight-bold)}.review-details-fill{gap:var(--space-4);flex-direction:column;display:flex}.review-text-paragraph{font-size:var(--text-sm);color:var(--text-primary);background:var(--bg-primary);padding:var(--space-3);border-radius:var(--radius-sm);line-height:2}.review-blanks-list{gap:var(--space-1);flex-direction:column;display:flex}.essay-ans-block{background:var(--bg-primary);padding:var(--space-3);border-radius:var(--radius-sm);border:1px solid var(--border-color);font-size:var(--text-sm)}.essay-ans-block.suggested{border-color:var(--primary-light);background:var(--primary-glow)}.review-feedback{margin-top:var(--space-4);background:var(--bg-secondary);padding:var(--space-3);border-radius:var(--radius-sm);border-left:3px solid var(--primary-light)}.review-exp{font-size:var(--text-sm);color:var(--text-secondary);line-height:var(--leading-relaxed)}.review-header-row{margin-bottom:var(--space-5);border-bottom:1px solid var(--divider);padding-bottom:var(--space-3);justify-content:space-between;align-items:center;gap:var(--space-3);flex-wrap:wrap;display:flex}.review-header-row h3{border-bottom:none!important;margin-bottom:0!important;padding-bottom:0!important}.review-filters{gap:var(--space-2);display:flex}.filter-btn{font-size:var(--text-xs);font-weight:var(--weight-bold);border-radius:var(--radius-full);border:1px solid var(--border-color);background:var(--bg-card);color:var(--text-secondary);transition:all var(--transition-fast);padding:6px 12px}.filter-btn:hover{background:var(--bg-card-hover);border-color:var(--primary-light);color:var(--text-primary)}.filter-btn.active{background:var(--primary);color:var(--text-inverse);border-color:var(--primary);box-shadow:var(--shadow-glow-primary)}.filter-btn.active-correct.active{background:var(--correct);border-color:var(--correct);box-shadow:0 0 12px var(--correct-glow);color:var(--text-inverse)}.filter-btn.active-wrong.active{background:var(--wrong);border-color:var(--wrong);box-shadow:0 0 12px var(--wrong-glow);color:var(--text-inverse)}.review-empty-state{text-align:center;padding:var(--space-8) var(--space-4);color:var(--text-muted);font-size:var(--text-base);border:2px dashed var(--border-color);border-radius:var(--radius-md);background:var(--bg-secondary)}@media (width<=1023px){.results-grid{grid-template-columns:1fr}}.leaderboard-page{padding-bottom:var(--space-12)}.leaderboard-container{gap:var(--space-8);padding-top:var(--space-6);flex-direction:column;width:100%;display:flex}.leaderboard-header{text-align:center}.leaderboard-header h1{font-size:var(--text-4xl);margin-bottom:var(--space-2)}.leaderboard-filters{justify-content:space-between;align-items:center;gap:var(--space-4);margin-bottom:var(--space-6);flex-wrap:wrap;display:flex}.subject-filter-group{gap:var(--space-2);display:flex}.year-tabs-container{gap:var(--space-2);scrollbar-width:none;max-width:100%;padding:4px;display:flex;overflow-x:auto}.year-tabs-container::-webkit-scrollbar{display:none}.year-tab{border-radius:var(--radius-full);color:var(--text-secondary);font-weight:var(--weight-bold);font-size:var(--text-xs);white-space:nowrap;transition:all var(--transition-base);cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff05;border:1px solid #ffffff14;padding:10px 18px}.year-tab:hover{color:#fff;background:#ffffff0f;border-color:#fff3}.year-tab.active{border-color:var(--primary);color:var(--primary);box-shadow:0 0 15px var(--primary-glow);background:#5effff14}.btn-filter{padding:var(--space-2) var(--space-6);border-radius:var(--radius-full);font-weight:var(--weight-bold);color:var(--text-primary);transition:all var(--transition-base);background:#ffffff05;border:1px solid #ffffff1f}.btn-filter:hover{background:#ffffff14;border-color:#ffffff40}.btn-filter.active{background:var(--primary);color:#000;border-color:var(--primary);box-shadow:0 0 15px var(--primary-glow)}.btn-filter.sejarah.active{background:var(--sejarah);border-color:var(--sejarah);color:#000;box-shadow:0 0 15px var(--sejarah-glow)}.btn-filter.islam.active{background:var(--islam);border-color:var(--islam);color:#000;box-shadow:0 0 15px var(--islam-glow)}.leaderboard-list{padding:var(--space-6);border-radius:var(--radius-xl);gap:var(--space-3);background:#ffffff05;border:1px solid #ffffff14;flex-direction:column;display:flex}.list-header{padding:var(--space-2) var(--space-6);font-size:var(--text-xs);color:var(--text-secondary);opacity:.8;font-weight:var(--weight-bold);letter-spacing:.5px;text-transform:uppercase;margin-bottom:var(--space-2);border-bottom:1px solid #ffffff14;align-items:center;display:flex}.list-header .col-rank,.list-header .col-name,.list-header .col-subject,.list-header .col-score{font-size:var(--text-xs)!important;font-weight:var(--weight-bold)!important;color:var(--text-secondary)!important;text-transform:uppercase!important;letter-spacing:.5px!important}.list-row{padding:var(--space-4) var(--space-6);border-radius:var(--radius-lg);transition:all var(--transition-base);cursor:pointer;background:#ffffff03;border:1px solid #ffffff0f;align-items:center;display:flex}.list-row:hover{background:#ffffff0d;border-color:#5effff40;transform:translate(4px);box-shadow:0 0 15px #5effff0d}.list-row.top-3{border-left-width:4px}.list-row.top-3:nth-child(2){border-color:#f4c43066;border-left-color:var(--gold);background:linear-gradient(90deg,#f4c4300f 0%,#ffffff03 100%);box-shadow:0 0 15px #f4c43014}.list-row.top-3:nth-child(3){border-color:#e6e8ea66;border-left-color:var(--silver);background:linear-gradient(90deg,#e6e8ea0f 0%,#ffffff03 100%);box-shadow:0 0 15px #e6e8ea14}.list-row.top-3:nth-child(4){border-color:#cd7f3266;border-left-color:var(--bronze);background:linear-gradient(90deg,#cd7f320f 0%,#ffffff03 100%);box-shadow:0 0 15px #cd7f3214}.col-rank{width:80px}.list-row .col-rank{font-size:var(--text-xl);font-weight:var(--weight-extrabold)}.col-name{white-space:normal;word-break:break-word;flex-direction:column;flex:1;align-items:flex-start;display:flex;overflow:visible}.student-name{font-weight:var(--weight-bold);font-size:var(--text-base);color:var(--text-primary);line-height:var(--leading-tight)}.student-id{font-size:var(--text-xs);color:var(--text-muted);font-weight:var(--weight-normal);letter-spacing:.5px;margin-top:4px}.col-subject{width:170px}.col-score{text-align:right;flex-direction:column;width:100px;display:flex}.badge-subj{white-space:nowrap;font-size:var(--text-xs);padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);color:#fff;font-weight:var(--weight-bold);letter-spacing:.5px;text-transform:uppercase;display:inline-block}.badge-subj.sejarah{background:var(--sejarah-dark);border:1px solid #00cec94d}.badge-subj.islam{background:var(--islam-dark);border:1px solid #7e8cfc4d}.time-sub{font-size:var(--text-xs);color:var(--text-secondary);opacity:.8}@media (width<=639px){.leaderboard-filters{align-items:stretch;gap:var(--space-3);flex-direction:column}.subject-filter-group{justify-content:center}.year-tabs-container{justify-content:flex-start;width:100%}.col-subject{display:none}.list-row{padding:var(--space-3)}}.rank-badge{width:28px;height:28px;font-size:var(--text-sm);font-weight:var(--weight-extrabold);border-radius:50%;justify-content:center;align-items:center;display:inline-flex}.rank-badge.rank-0{background:var(--gold);color:#000;box-shadow:0 0 10px #f4c43099}.rank-badge.rank-1{background:var(--silver);color:#000;box-shadow:0 0 10px #e6e8ea99}.rank-badge.rank-2{background:var(--bronze);color:#000;box-shadow:0 0 10px #cd7f3299}.modal-backdrop{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);width:100vw;height:100vh;z-index:var(--z-modal);padding:var(--space-4);background:#000000d9;justify-content:center;align-items:center;display:flex;position:fixed;top:0;left:0}.student-modal{border-radius:var(--radius-xl);width:100%;max-width:600px;padding:var(--space-8);max-height:90vh;box-shadow:var(--shadow-xl);background:#09090e;border:1px solid #ffffff1f;position:relative;overflow-y:auto}.modal-close-btn{top:var(--space-5);right:var(--space-5);width:36px;height:36px;color:var(--text-secondary);transition:all var(--transition-fast);background:#ffffff0d;border:1px solid #ffffff1a;border-radius:50%;justify-content:center;align-items:center;display:flex;position:absolute}.modal-close-btn:hover{color:var(--text-primary);background:#ffffff26;transform:scale(1.05)}.modal-student-header{text-align:center;margin-bottom:var(--space-8);flex-direction:column;align-items:center;display:flex}.modal-student-avatar{background:linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);color:#000;width:72px;height:72px;font-size:var(--text-3xl);font-weight:var(--weight-extrabold);margin-bottom:var(--space-4);border-radius:50%;justify-content:center;align-items:center;display:flex;box-shadow:0 0 20px #5effff33}.modal-student-header h2{font-size:var(--text-2xl);margin-bottom:var(--space-1)}.modal-student-id{font-size:var(--text-sm);color:var(--text-muted);font-weight:var(--weight-semibold);letter-spacing:.5px}.modal-stats-grid{gap:var(--space-4);margin-bottom:var(--space-8);grid-template-columns:repeat(3,1fr);display:grid}.modal-stat-card{border-radius:var(--radius-md);padding:var(--space-4) var(--space-6);text-align:center;background:#ffffff05;border:1px solid #ffffff0f;flex-direction:column;align-items:center;display:flex}.modal-stat-card .stat-label{font-size:var(--text-xs);color:var(--text-secondary);margin-bottom:var(--space-1);text-transform:uppercase;letter-spacing:.5px}.modal-stat-card .stat-value{font-size:var(--text-2xl);font-weight:var(--weight-extrabold);color:var(--primary)}.modal-badges-title{font-size:var(--text-lg);font-weight:var(--weight-bold);margin-bottom:var(--space-4);border-left:3px solid var(--primary);padding-left:var(--space-3);text-align:left}.modal-badges-list{gap:var(--space-3);flex-direction:column;display:flex}.modal-badge-item{align-items:center;gap:var(--space-4);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);transition:all var(--transition-base);text-align:left;background:#ffffff03;border:1px solid #ffffff0a;display:flex}.modal-badge-item.unlocked{background:#ffffff05;border-color:#ffffff14}.modal-badge-item.locked{opacity:.4}.badge-item-icon{color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:48px;height:48px;display:flex}.modal-badge-item.locked .badge-item-icon{color:var(--text-muted)}.badge-item-info h4{font-size:var(--text-sm);font-weight:var(--weight-bold);color:var(--text-primary);margin-bottom:2px}.modal-badge-item.locked .badge-item-info h4{color:var(--text-secondary)}.badge-item-info p{font-size:var(--text-xs);color:var(--text-secondary)}@media (width<=639px){.student-modal{padding:var(--space-6)}.modal-stats-grid{grid-template-columns:1fr}}.profiles-page{min-height:calc(100vh - var(--nav-height) - 100px);padding-bottom:var(--space-12);justify-content:center;align-items:center;display:flex}.profiles-container{align-items:center;gap:var(--space-8);flex-direction:column;width:100%;display:flex}.profiles-header{text-align:center;max-width:600px}.profiles-header h1{font-size:var(--text-4xl);font-weight:var(--weight-extrabold);margin-bottom:var(--space-2);background:linear-gradient(135deg, #fff 30%, var(--primary-light) 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text}.profiles-header p{color:var(--text-secondary);font-size:var(--text-base)}.profiles-grid{gap:var(--space-6);width:100%;max-width:960px;margin-top:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(220px,1fr));justify-content:center;display:grid}.profile-card{padding:var(--space-8) var(--space-6);border-radius:var(--radius-xl);text-align:center;cursor:pointer;transition:all var(--transition-base);background:#ffffff05;border:1px solid #ffffff14;flex-direction:column;align-items:center;display:flex;position:relative}.profile-card:hover{background:#ffffff0d;border-color:#5effff40;box-shadow:0 0 25px #5effff14}.profile-card.active{border-color:var(--primary);box-shadow:0 0 25px var(--primary-glow);background:#5effff05}.avatar-circle{width:90px;height:90px;font-size:2.5rem;font-weight:var(--weight-extrabold);color:#fff;margin-bottom:var(--space-4);transition:transform var(--transition-fast);border:2px solid #ffffff1a;border-radius:50%;justify-content:center;align-items:center;display:flex;box-shadow:0 4px 15px #0006}.profile-card:hover .avatar-circle{transform:scale(1.05)}.profile-name-title{font-size:var(--text-lg);font-weight:var(--weight-bold);color:var(--text-primary);margin-bottom:var(--space-4)}.add-profile-card{background:0 0;border:2px dashed #ffffff1f}.add-profile-card:hover{border-style:solid;border-color:var(--primary-light)}.add-circle{color:var(--text-secondary);background:#ffffff08;border:2px dashed #ffffff26}.add-profile-card:hover .add-circle{background:var(--primary-glow);color:var(--primary);border:2px solid var(--primary)}.profile-card-actions{opacity:0;transition:opacity var(--transition-fast);position:absolute;top:15px;right:15px}.profile-card:hover .profile-card-actions{opacity:1}.btn-delete-profile{color:var(--wrong);cursor:pointer;width:28px;height:28px;transition:all var(--transition-fast);background:#ff3b5c1a;border:1px solid #ff3b5c33;border-radius:50%;justify-content:center;align-items:center;display:flex}.btn-delete-profile:hover{background:var(--wrong);color:#fff;box-shadow:0 0 10px var(--wrong-glow)}.active-badge{background:var(--primary);color:#000;font-size:var(--text-xs);font-weight:var(--weight-extrabold);border-radius:var(--radius-full);text-transform:uppercase;letter-spacing:.5px;box-shadow:0 0 10px var(--primary-glow);padding:2px 10px;position:absolute;bottom:-10px}.form-card{cursor:default;background:#ffffff08;border-color:#ffffff26}.form-card h3{font-size:var(--text-lg);font-weight:var(--weight-bold);margin-bottom:var(--space-4);color:var(--text-primary)}.profile-form-block{gap:var(--space-4);flex-direction:column;width:100%;display:flex}.profile-input-field{padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);background:var(--bg-input);border:1px solid var(--border-color);color:var(--text-primary);font-size:var(--text-sm);text-align:center;width:100%;transition:border-color var(--transition-fast);outline:none}.profile-input-field:focus{border-color:var(--primary);box-shadow:var(--shadow-glow-primary)}.form-error{color:var(--wrong);font-size:var(--text-xs);margin-bottom:var(--space-2)}.form-buttons{gap:var(--space-2);width:100%;display:flex}.btn-form-submit,.btn-form-cancel{padding:var(--space-2);border-radius:var(--radius-full);font-weight:var(--weight-bold);font-size:var(--text-xs);cursor:pointer;transition:all var(--transition-fast);flex:1}.btn-form-submit{background:var(--primary);color:#000;border:1px solid var(--primary)}.btn-form-submit:hover{box-shadow:var(--shadow-glow-primary)}.btn-form-cancel{color:var(--text-secondary);background:0 0;border:1px solid #ffffff26}.btn-form-cancel:hover{color:var(--text-primary);background:#ffffff0d;border-color:#ffffff4d}@media (width<=640px){.profiles-grid{grid-template-columns:1fr;max-width:280px}}.counter{color:var(--accent);background:var(--accent-bg);border:2px solid #0000;border-radius:5px;margin-bottom:24px;padding:5px 10px;font-size:16px;transition:border-color .3s}.counter:hover{border-color:var(--accent-border)}.counter:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.hero{position:relative}.hero .base,.hero .framework,.hero .vite{margin:0 auto;inset-inline:0}.hero .base{z-index:0;width:170px;position:relative}.hero .framework,.hero .vite{position:absolute}.hero .framework{z-index:1;height:28px;top:34px;transform:perspective(2000px)rotate(300deg)rotateX(44deg)rotateY(39deg)scale(1.4)}.hero .vite{z-index:0;width:auto;height:26px;top:107px;transform:perspective(2000px)rotate(300deg)rotateX(40deg)rotateY(39deg)scale(.8)}#center{flex-direction:column;flex-grow:1;place-content:center;place-items:center;gap:25px;display:flex}@media (width<=1024px){#center{gap:18px;padding:32px 20px 24px}}#next-steps{border-top:1px solid var(--border);text-align:left;display:flex}#next-steps>div{flex:1 1 0;padding:32px}@media (width<=1024px){#next-steps>div{padding:24px 20px}}#next-steps .icon{width:22px;height:22px;margin-bottom:16px}@media (width<=1024px){#next-steps{text-align:center;flex-direction:column}}#docs{border-right:1px solid var(--border)}@media (width<=1024px){#docs{border-right:none;border-bottom:1px solid var(--border)}}#next-steps ul{gap:8px;margin:32px 0 0;padding:0;list-style:none;display:flex}#next-steps ul .logo{height:18px}#next-steps ul a{color:var(--text-h);background:var(--social-bg);border-radius:6px;align-items:center;gap:8px;padding:6px 12px;font-size:16px;text-decoration:none;transition:box-shadow .3s;display:flex}#next-steps ul a:hover{box-shadow:var(--shadow)}#next-steps ul a .button-icon{width:18px;height:18px}@media (width<=1024px){#next-steps ul{flex-wrap:wrap;justify-content:center;margin-top:20px}#next-steps ul li{flex:calc(50% - 8px)}#next-steps ul a{box-sizing:border-box;justify-content:center;width:100%}}#spacer{border-top:1px solid var(--border);height:88px}@media (width<=1024px){#spacer{height:48px}}.ticks{width:100%;position:relative}.ticks:before,.ticks:after{content:"";border:5px solid #0000;position:absolute;top:-4.5px}.ticks:before{border-left-color:var(--border);left:0}.ticks:after{border-right-color:var(--border);right:0}