@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:#6c5ce7;--primary-light:#a29bfe;--primary-dark:#5041b2;--primary-glow:#6c5ce74d;--sejarah:#00b894;--sejarah-light:#55efc4;--sejarah-dark:#009b7d;--sejarah-glow:#00b89440;--islam:#0984e3;--islam-light:#74b9ff;--islam-dark:#0767b3;--islam-glow:#0984e340;--correct:#00cec9;--correct-light:#81ecec;--correct-dark:#009996;--correct-glow:#00cec94d;--wrong:#ff6b6b;--wrong-light:#ff8e8e;--wrong-dark:#d63031;--wrong-glow:#ff6b6b4d;--warning:#fdcb6e;--warning-dark:#e17055;--gold:#fdcb6e;--silver:#b2bec3;--bronze:#e17055;--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:.375rem;--radius-md:.5rem;--radius-lg:.75rem;--radius-xl:1rem;--radius-2xl:1.5rem;--radius-full:9999px;--shadow-sm:0 1px 3px #0000004d;--shadow-md:0 4px 12px #00000040;--shadow-lg:0 8px 30px #0000004d;--shadow-xl:0 16px 50px #00000059;--shadow-glow-primary:0 0 20px var(--primary-glow);--shadow-glow-correct:0 0 20px var(--correct-glow);--shadow-glow-wrong:0 0 20px 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:1200px;--nav-height:64px;--sidebar-width:280px}[data-theme=dark],:root{--bg-primary:#0f0f23;--bg-secondary:#16163a;--bg-card:#1a1a2e;--bg-card-hover:#224;--bg-input:#1e1e3a;--bg-overlay:#0009;--glass-bg:#1a1a2eb3;--glass-border:#ffffff14;--glass-blur:16px;--text-primary:#e8e8f0;--text-secondary:#9898b8;--text-muted:#6b6b8a;--text-inverse:#0f0f23;--border-color:#ffffff14;--border-color-hover:#ffffff26;--divider:#ffffff0f;--scrollbar-track:#1a1a2e;--scrollbar-thumb:#336}[data-theme=light]{--bg-primary:#f5f5fa;--bg-secondary:#fff;--bg-card:#fff;--bg-card-hover:#f0f0f8;--bg-input:#f0f0f5;--bg-overlay:#0006;--glass-bg:#ffffffb3;--glass-border:#00000014;--glass-blur:16px;--text-primary:#1a1a2e;--text-secondary:#557;--text-muted:#88a;--text-inverse:#fff;--border-color:#00000014;--border-color-hover:#00000026;--divider:#0000000f;--scrollbar-track:#f0f0f5;--scrollbar-thumb:#ccd}*,: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,select{font-family:inherit;font-size:inherit;color:inherit;background:0 0;border:none;outline:none}::-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:var(--primary);color:#fff}: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-4);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)}.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(80px);opacity:.15;border-radius:50%;animation:20s ease-in-out infinite float;position:absolute}.animated-bg:before{background:var(--primary);width:500px;height:500px;top:-10%;right:-5%}.animated-bg:after{background:var(--sejarah);width:400px;height:400px;animation-delay:-7s;bottom:-10%;left:-5%}@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:center;border-inline:1px solid var(--border);box-sizing:border-box;flex-direction:column;width:1126px;max-width:100%;min-height:100svh;margin:0 auto;display:flex}h1,h2{font-family:var(--heading);color:var(--text-h);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);border-bottom:1px solid var(--glass-border);position:fixed;top:0;left:0;right:0}.navbar-inner{justify-content:space-between;align-items:center;gap:var(--space-4);height:100%;display:flex}.navbar-logo{align-items:center;gap:var(--space-2);color:var(--text-primary);font-family:var(--font-heading);font-weight:var(--weight-bold);font-size:var(--text-xl);flex-shrink:0;text-decoration:none;display:flex}.logo-icon{font-size:1.5rem}.logo-text{background:linear-gradient(135deg, var(--primary-light), var(--primary));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.navbar-links{align-items:center;gap:var(--space-1);display:flex}.nav-link{padding:var(--space-2) var(--space-3);color:var(--text-secondary);font-size:var(--text-sm);font-weight:var(--weight-medium);border-radius:var(--radius-md);transition:color var(--transition-fast), background var(--transition-fast);text-decoration:none;position:relative}.nav-link:hover{color:var(--text-primary);background:var(--bg-card-hover)}.nav-link.active{color:var(--primary-light)}.nav-indicator{background:var(--primary);border-radius:var(--radius-full);width:20px;height:3px;position:absolute;bottom:-2px;left:50%;transform:translate(-50%)}.navbar-actions{align-items:center;gap:var(--space-2);flex-shrink:0;display:flex}.toggle-btn{border-radius:var(--radius-md);background:var(--bg-card);border:1px solid var(--border-color);width:36px;height:36px;color:var(--text-secondary);font-size:var(--text-sm);font-weight:var(--weight-semibold);transition:all var(--transition-fast);cursor:pointer;justify-content:center;align-items:center;display:flex}.toggle-btn:hover{background:var(--bg-card-hover);border-color:var(--primary);color:var(--primary-light)}.toggle-icon{font-size:1rem}.toggle-label{letter-spacing:.5px;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));border:2px solid var(--primary-glow);justify-content:center;align-items:center;width:34px;height:34px;display:flex;overflow:hidden}.user-avatar img{object-fit:cover;width:100%;height:100%}.user-avatar span{color:#fff;font-weight:var(--weight-bold);font-size:var(--text-sm)}.btn-logout{font-size:var(--text-sm);color:var(--text-muted);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);transition:all var(--transition-fast);cursor:pointer}.btn-logout:hover{color:var(--wrong)}.btn-login{padding:var(--space-2) var(--space-4);background:var(--primary);color:#fff;border-radius:var(--radius-md);font-weight:var(--weight-semibold);font-size:var(--text-sm);transition:all var(--transition-fast);text-decoration:none}.btn-login:hover{background:var(--primary-dark);color:#fff;box-shadow:var(--shadow-glow-primary)}.hamburger{cursor:pointer;background:0 0;border:none;flex-direction:column;gap:5px;padding:4px;display:none}.hamburger span{background:var(--text-secondary);width:22px;height:2px;transition:all var(--transition-fast);border-radius:2px;display:block}.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);border-top:1px solid var(--border-color);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-light);background:var(--bg-card-hover)}.mobile-link.logout{color:var(--wrong);text-align:left;cursor:pointer;width:100%;font-size:inherit;background:0 0;border:none;font-family:inherit}@media (width<=768px){.navbar-links{display:none}.hamburger,.mobile-menu{display:flex}.btn-logout,.user-avatar{display:none}}.footer{border-top:1px solid var(--glass-border);height:60px;z-index:var(--z-base);background:var(--glass-bg);-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));align-items:center;margin-top:auto;display:flex}.footer-inner{justify-content:space-between;align-items:center;width:100%;display:flex}.footer-copy{font-size:var(--text-sm);color:var(--text-muted)}.footer-links{gap:var(--space-4);display:flex}.footer-links a{font-size:var(--text-sm);color:var(--text-muted)}.footer-links a:hover{color:var(--primary-light)}@media (width<=639px){.footer{height:auto;padding:var(--space-4) 0}.footer-inner{gap:var(--space-2);text-align:center;flex-direction:column}}.home-page{gap:var(--space-20);padding-bottom:var(--space-16);flex-direction:column;display:flex}.hero-container{width:100%;max-width:100%;padding:var(--space-8) 6%;align-items:center;gap:var(--space-8);min-height:calc(85vh - var(--nav-height));grid-template-columns:1fr 1fr;display:grid}.hero-text{text-align:left;flex-direction:column;align-items:flex-start;display:flex}.badge-new{background:var(--primary-glow);border:1px solid var(--primary-light);padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);margin-bottom:var(--space-4);font-size:var(--text-sm);color:var(--primary-light);font-weight:var(--weight-semibold)}.hero-text h1{font-size:var(--text-5xl);margin-bottom:var(--space-4);background:linear-gradient(135deg, #fff 30%, var(--primary-light) 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;line-height:1.1}[data-theme=light] .hero-text h1{background:linear-gradient(135deg, #1a1a2e 30%, var(--primary) 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text}.hero-desc{font-size:var(--text-lg);margin-bottom:var(--space-8);max-width:520px}.hero-actions{gap:var(--space-4);width:100%;display:flex}.btn-hero-primary{background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);color:#fff;padding:var(--space-3) var(--space-8);border-radius:var(--radius-md);font-weight:var(--weight-bold);box-shadow:0 4px 20px var(--primary-glow);transition:all var(--transition-base)}.btn-hero-primary:hover{box-shadow:0 8px 30px var(--primary-glow);color:#fff;transform:translateY(-3px)}.btn-hero-secondary{border:1px solid var(--border-color);color:var(--text-primary);padding:var(--space-3) var(--space-8);border-radius:var(--radius-md);font-weight:var(--weight-semibold);transition:all var(--transition-base);background:#ffffff05}.btn-hero-secondary:hover{background:var(--bg-card-hover);border-color:var(--border-color-hover)}.hero-visual{justify-content:center;align-items:center;display:flex}.visual-card{width:100%;max-width:460px;box-shadow:var(--shadow-xl);border:1px solid var(--glass-border);overflow:hidden}.card-mock-header{padding:var(--space-3);align-items:center;gap:var(--space-2);border-bottom:1px solid var(--glass-border);background:#00000026;display:flex}.dot{border-radius:50%;width:10px;height:10px}.dot.red{background:#ff5f56}.dot.yellow{background:#ffbd2e}.dot.green{background:#27c93f}.mock-title{font-size:var(--text-xs);color:var(--text-muted);margin-left:var(--space-2)}.card-mock-body{padding:var(--space-6);gap:var(--space-5);flex-direction:column;display:flex}.mock-stats{gap:var(--space-4);grid-template-columns:1fr 1fr;display:grid}.stat-box{border:1px solid var(--glass-border);padding:var(--space-3);border-radius:var(--radius-md);background:#ffffff08;flex-direction:column;align-items:center;display:flex}.stat-num{font-size:var(--text-2xl);font-weight:var(--weight-bold);color:var(--primary-light)}.stat-label{font-size:var(--text-xs);color:var(--text-muted)}.mock-question{text-align:left;gap:var(--space-3);flex-direction:column;display:flex}.question-tag{background:var(--sejarah-glow);color:var(--sejarah-light);border:1px solid var(--sejarah);font-size:var(--text-xs);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);font-weight:var(--weight-semibold);align-self:flex-start}.mock-question p{font-size:var(--text-base);color:var(--text-primary);font-weight:var(--weight-medium)}.mock-options{gap:var(--space-2);flex-direction:column;display:flex}.mock-option{padding:var(--space-3);border-radius:var(--radius-md);border:1px solid var(--border-color);font-size:var(--text-sm);background:#ffffff03}.mock-option.correct{border-color:var(--correct);background:var(--correct-glow);color:var(--correct-light)}.features-section{width:100%;max-width:100%;padding:var(--space-12) 6%;gap:var(--space-10);text-align:center;flex-direction:column;display:flex}.section-title{font-size:var(--text-3xl);margin-bottom:var(--space-2);align-self:center;display:inline-block;position:relative}.section-title:after{content:"";background:var(--primary);border-radius:var(--radius-full);width:50%;height:3px;position:absolute;bottom:-8px;left:25%}.features-grid{gap:var(--space-6);grid-template-columns:repeat(3,1fr);display:grid}.feature-card{padding:var(--space-8) var(--space-6);text-align:center;align-items:center;gap:var(--space-4);box-shadow:var(--shadow-md);flex-direction:column;display:flex}.feature-icon{background:var(--primary-glow);border-radius:var(--radius-full);border:1px solid var(--primary-light);justify-content:center;align-items:center;width:70px;height:70px;font-size:2.5rem;display:flex}.feature-card h3{font-size:var(--text-xl)}.feature-card p{font-size:var(--text-sm)}@media (width<=1023px){.hero-container{text-align:center;gap:var(--space-10);padding-top:var(--space-4);grid-template-columns:1fr}.hero-text{text-align:center;align-items:center}.hero-desc{margin-left:auto;margin-right:auto}.hero-actions{justify-content:center}.features-grid{grid-template-columns:1fr}}.auth-card{width:100%;max-width:440px;margin:var(--space-12) auto;padding:var(--space-8);box-shadow:var(--shadow-xl)}.auth-header{text-align:center;margin-bottom:var(--space-6)}.auth-header h2{font-size:var(--text-3xl);margin-bottom:var(--space-2);background:linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text}.auth-header p{font-size:var(--text-sm);color:var(--text-secondary)}.auth-error{background:var(--wrong-glow);border:1px solid var(--wrong);color:var(--wrong-light);padding:var(--space-3);border-radius:var(--radius-md);margin-bottom:var(--space-4);font-size:var(--text-sm);text-align:center}.auth-form{gap:var(--space-4);flex-direction:column;display:flex}.form-group{gap:var(--space-2);text-align:left;flex-direction:column;display:flex}.form-group label{font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--text-secondary)}.form-group input{padding:var(--space-3) var(--space-4);background:var(--bg-input);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-primary);font-size:var(--text-base);transition:border-color var(--transition-fast), box-shadow var(--transition-fast)}.form-group input:focus{border-color:var(--primary);box-shadow:var(--shadow-glow-primary)}.btn{justify-content:center;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);font-size:var(--text-base);font-weight:var(--weight-semibold);border-radius:var(--radius-md);transition:all var(--transition-fast);width:100%;display:flex}.btn-submit{background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);color:#fff;box-shadow:0 4px 14px #6c5ce766}.btn-submit:hover{transform:translateY(-2px);box-shadow:0 6px 20px #6c5ce799}.btn-submit:disabled{opacity:.6;cursor:not-allowed;transform:none}.btn-google{background:var(--bg-secondary);border:1px solid var(--border-color);color:var(--text-primary)}.btn-google:hover{background:var(--bg-card-hover);border-color:var(--border-color-hover)}.google-icon{width:18px;height:18px}.auth-divider{text-align:center;margin:var(--space-5) 0;color:var(--text-muted);font-size:var(--text-xs);align-items:center;display:flex}.auth-divider:before,.auth-divider:after{content:"";border-bottom:1px solid var(--divider);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-light);font-weight:var(--weight-semibold);cursor:pointer;margin-left:var(--space-1);background:0 0;border:none;padding:0}.btn-toggle-auth:hover{color:var(--primary);text-decoration:underline}.spinner{border:2px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:20px;height:20px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@media (width<=639px){.auth-card{padding:var(--space-6);margin:var(--space-6) auto}}.dashboard-page{padding-bottom:var(--space-12)}.dashboard-container{gap:var(--space-8);padding-top:var(--space-6);flex-direction:column;display:flex}.welcome-header{text-align:left;justify-content:space-between;align-items:center;gap:var(--space-4);padding:var(--space-4) 0;border-bottom:1px solid var(--divider);display:flex}.welcome-header h1{font-size:var(--text-4xl);margin-bottom:var(--space-1)}.highlight-name{color:var(--primary-light)}.btn-start-exam{padding:var(--space-3) var(--space-6);font-weight:var(--weight-bold);color:#fff;border-radius:var(--radius-md);box-shadow:0 4px 14px var(--primary-glow);transition:all var(--transition-base);white-space:nowrap}.btn-start-exam:hover{box-shadow:0 6px 20px var(--primary-glow);color:#fff;transform:translateY(-2px)}.stats-grid{gap:var(--space-6);grid-template-columns:repeat(3,1fr);display:grid}.stat-card{padding:var(--space-5);align-items:center;gap:var(--space-4);text-align:left;display:flex}.stat-icon{background:var(--primary-glow);border-radius:var(--radius-lg);border:1px solid var(--primary-light);justify-content:center;align-items:center;width:60px;height:60px;font-size:2.2rem;display:flex}.stat-info h3{font-size:var(--text-2xl);font-weight:var(--weight-extrabold)}.stat-info p{font-size:var(--text-sm);color:var(--text-muted)}.dashboard-content{gap:var(--space-8);grid-template-columns:2fr 1fr;align-items:start;display:grid}.recent-attempts{padding:var(--space-6);text-align:left;min-height:320px}.recent-attempts h2{font-size:var(--text-2xl);margin-bottom:var(--space-5);border-left:4px solid var(--primary);padding-left:var(--space-3)}.loading-placeholder{justify-content:center;align-items:center;min-height:200px;display:flex}.attempts-list{gap:var(--space-3);flex-direction:column;display:flex}.attempt-row{padding:var(--space-4);border:1px solid var(--border-color);border-radius:var(--radius-md);transition:all var(--transition-fast);background:#ffffff03;justify-content:space-between;align-items:center;display:flex}.attempt-row:hover{border-color:var(--border-color-hover);background:var(--bg-card-hover)}.attempt-subject{align-items:center;gap:var(--space-3);display:flex}.subject-badge{font-size:var(--text-xs);font-weight:var(--weight-semibold);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);color:#fff}.subject-badge.sejarah{background:var(--sejarah-dark)}.subject-badge.islam{background:var(--islam-dark)}.attempt-date{font-size:var(--text-sm);color:var(--text-muted)}.attempt-details{align-items:center;gap:var(--space-4);display:flex}.attempt-mode{font-size:var(--text-sm);color:var(--text-secondary)}.attempt-score{font-size:var(--text-base);font-weight:var(--weight-bold);color:var(--primary-light)}.empty-attempts{text-align:center;justify-content:center;align-items:center;gap:var(--space-4);min-height:200px;color:var(--text-secondary);flex-direction:column;display:flex}.btn-empty-cta{background:var(--primary-glow);border:1px solid var(--primary);color:var(--primary-light);padding:var(--space-2) var(--space-5);border-radius:var(--radius-md);font-weight:var(--weight-semibold);transition:all var(--transition-fast)}.btn-empty-cta:hover{background:var(--primary);color:#fff}.dashboard-sidebar{gap:var(--space-6);flex-direction:column;display:flex}.sidebar-box{padding:var(--space-5);text-align:left}.sidebar-box h3{font-size:var(--text-lg);margin-bottom:var(--space-3)}.tip-box p{font-size:var(--text-sm);line-height:var(--leading-relaxed)}.subject-links{gap:var(--space-3);flex-direction:column;display:flex}.subject-link-card{padding:var(--space-4);border-radius:var(--radius-md);color:#fff;transition:all var(--transition-fast);border:1px solid #0000;flex-direction:column;display:flex}.subject-link-card.sejarah{background:linear-gradient(135deg, var(--sejarah-dark) 0%, var(--sejarah) 100%);box-shadow:0 4px 12px var(--sejarah-glow)}.subject-link-card.sejarah:hover{box-shadow:0 6px 18px var(--sejarah-glow);color:#fff;transform:translateY(-2px)}.subject-link-card.islam{background:linear-gradient(135deg, var(--islam-dark) 0%, var(--islam) 100%);box-shadow:0 4px 12px var(--islam-glow)}.subject-link-card.islam:hover{box-shadow:0 6px 18px var(--islam-glow);color:#fff;transform:translateY(-2px)}.subject-link-card strong{font-size:var(--text-base);margin-bottom:var(--space-1)}.subject-link-card span{font-size:var(--text-xs);opacity:.85}@media (width<=1023px){.stats-grid{grid-template-columns:repeat(3,1fr)}.dashboard-content{grid-template-columns:1fr}}@media (width<=639px){.welcome-header{align-items:flex-start;gap:var(--space-3);flex-direction:column}.btn-start-exam{text-align:center;width:100%}.stats-grid{gap:var(--space-3);grid-template-columns:1fr}}.achievements-section{padding:var(--space-6);text-align:left;gap:var(--space-6);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-4);display:flex}.achievements-header h2{font-size:var(--text-2xl);margin-bottom:var(--space-1)}.achievements-header p{font-size:var(--text-sm);color:var(--text-muted)}.achievements-progress-badge{background:var(--primary-glow);border:1px solid var(--primary-light);padding:var(--space-2) var(--space-4);border-radius:var(--radius-full);font-weight:var(--weight-bold);font-size:var(--text-sm);color:var(--text-primary);white-space:nowrap;box-shadow:0 0 15px var(--primary-glow)}.badges-grid{gap:var(--space-5);grid-template-columns:repeat(auto-fill,minmax(220px,1fr));display:grid}.badge-card{text-align:center;padding:var(--space-5);border-radius:var(--radius-xl);border:1px solid var(--border-color);align-items:center;gap:var(--space-3);transition:all var(--transition-base);background:#ffffff03;flex-direction:column;display:flex;position:relative}.badge-card.unlocked{box-shadow:0 4px 15px var(--badge-glow), inset 0 0 8px #ffffff08;background:radial-gradient(circle at top,#ffffff0a,#ffffff03);border-color:#ffffff1a}.badge-card.unlocked:hover{box-shadow:0 8px 25px var(--badge-glow), inset 0 0 12px #ffffff14;border-color:#ffffff40}.badge-card.locked{opacity:.4;filter:grayscale();background:#00000026}.badge-icon-wrapper{border-radius:var(--radius-full);width:68px;height:68px;margin-bottom:var(--space-1);justify-content:center;align-items:center;display:flex;position:relative}.badge-card.unlocked .badge-icon-wrapper{background:var(--badge-color);box-shadow:0 4px 15px var(--badge-glow)}.badge-card.locked .badge-icon-wrapper{background:var(--text-muted)}.badge-icon{font-size:2rem}.badge-lock{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-full);justify-content:center;align-items:center;width:22px;height:22px;font-size:.75rem;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)}.badge-status-tag{font-size:.65rem;font-weight:var(--weight-semibold);letter-spacing:.5px;text-transform:uppercase;padding:2px var(--space-2);border-radius:var(--radius-full);color:var(--text-muted);border:1px solid var(--border-color);background:#ffffff0a;margin-top:auto}.badge-card.unlocked .badge-status-tag{color:#10b981;background:#10b9811a;border-color:#10b98133}@media (width<=639px){.badges-grid{gap:var(--space-3);grid-template-columns:repeat(2,1fr)}.badge-icon-wrapper{width:56px;height:56px}.badge-icon{font-size:1.6rem}.achievements-header{flex-direction:column;align-items:flex-start}}.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%;max-width:960px;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%;max-width:960px;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-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)}.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:1px solid var(--border-color);transition:all var(--transition-base);text-align:left;display:flex}.mode-card:hover{border-color:var(--border-color-hover);background:var(--bg-card-hover)}.mode-card.active{border-color:var(--primary);background:var(--primary-glow);box-shadow:var(--shadow-glow-primary)}.mode-icon{font-size:2.2rem}.mode-info{flex:1}.mode-info h3{font-size:var(--text-lg);margin-bottom:var(--space-1)}.mode-info p{font-size:var(--text-sm);line-height:var(--leading-normal)}.radio-outer{border:2px solid var(--border-color);width:22px;height:22px;transition:border-color var(--transition-fast);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-lg);font-weight:var(--weight-bold);color:#fff;border-radius:var(--radius-md);transition:all var(--transition-base);text-align:center;width:100%;display:block;box-shadow:0 4px 14px #6c5ce766}.btn-start-session:hover{color:#fff;transform:translateY(-2px);box-shadow:0 6px 20px #6c5ce799}.details-sidebar{padding:var(--space-6);text-align:left}.details-sidebar h3{font-size:var(--text-xl);margin-bottom:var(--space-4);border-bottom:1px solid var(--divider);padding-bottom:var(--space-2)}.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)}.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{flex-direction:column;align-items:stretch}.tf-actions{justify-content:stretch}.btn-tf{flex:1}}.exam-session-page{flex-direction:column;display:flex}.exam-header{top:var(--nav-height);z-index:var(--z-sticky);background:var(--glass-bg);-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));border-bottom:1px solid var(--glass-border);padding:var(--space-3) 0;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);color:#fff;padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:var(--weight-bold)}.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-3);border-radius:var(--radius-sm);font-family:var(--font-mono);font-weight:var(--weight-bold);font-size:var(--text-lg);color:var(--text-primary);border:1px solid var(--border-color);background:#0000000d}.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-muted);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{background:var(--border-color);border-radius:var(--radius-full);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-lg)}.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-medium);border:1px solid var(--border-color);border-radius:var(--radius-sm);background:var(--bg-primary);color:var(--text-primary);transition:all var(--transition-fast);justify-content:center;align-items:center;display:flex}.nav-btn:hover{border-color:var(--primary-light);background:var(--bg-card-hover)}.nav-btn.answered{background:var(--sejarah-glow);border-color:var(--sejarah);color:var(--sejarah-dark)}.nav-btn.current{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:var(--shadow-sm);transform:scale(1.1)}.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-md);font-weight:var(--weight-semibold);font-size:var(--text-base);transition:all var(--transition-base)}.btn-prev{background:var(--bg-secondary);border:1px solid var(--border-color);color:var(--text-primary)}.btn-prev:hover:not(:disabled){background:var(--bg-card-hover)}.btn-prev:disabled{opacity:.5;cursor:not-allowed}.btn-next{background:var(--bg-secondary);border:1px solid var(--primary);color:var(--primary)}.btn-next:hover{background:var(--primary-glow)}.btn-show-answer{background:var(--warning);color:var(--bg-primary);border:none}.btn-show-answer:hover{background:var(--warning-dark);color:#fff}.btn-submit-exam{background:linear-gradient(135deg, var(--correct) 0%, var(--correct-dark) 100%);color:#fff;box-shadow:0 4px 14px var(--correct-glow);border:none}.btn-submit-exam:hover{box-shadow:0 6px 20px var(--correct-glow);transform:translateY(-2px)}.btn-submit-exam:disabled{opacity:.8;cursor:wait;background:var(--bg-input)!important;color:var(--text-muted)!important;border:1px solid var(--border-color)!important;box-shadow:none!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-6);border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}.results-header h1{font-size:var(--text-4xl);margin-bottom:var(--space-2);background:linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%);-webkit-text-fill-color:transparent;-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-xl);box-shadow:var(--shadow-lg);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%, var(--border-color) 80%, var(--border-color) 100%);border-radius:50%;padding:10px;position:relative}.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:var(--bg-card);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);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-sm);color:var(--text-muted);margin-top:var(--space-1)}.score-card h2{font-size:var(--text-2xl);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);background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-md);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-md);font-weight:var(--weight-bold);transition:all var(--transition-fast)}.btn-primary{background:var(--primary);color:#fff;box-shadow:0 4px 12px var(--primary-glow)}.btn-primary:hover{background:var(--primary-dark);color:#fff;transform:translateY(-2px)}.btn-secondary{border:1px solid var(--primary);color:var(--primary);background:0 0}.btn-secondary:hover{background:var(--primary-glow)}.review-section{padding:var(--space-6);border-radius:var(--radius-xl)}.review-section h3{font-size:var(--text-2xl);margin-bottom:var(--space-5);border-bottom:1px solid var(--divider);padding-bottom:var(--space-3)}.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-5);background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius-md);margin-bottom:var(--space-4);transition:all var(--transition-fast) ease}.review-item.correct-item{border-left:5px solid var(--correct)}.review-item.wrong-item{border-left:5px solid var(--wrong)}.review-item.essay-item{border-left:5px solid var(--primary-light)}.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:#fff;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;max-width:800px;display:flex}.leaderboard-header{text-align:center}.leaderboard-header h1{font-size:var(--text-4xl);margin-bottom:var(--space-2)}.leaderboard-filters{justify-content:center;gap:var(--space-4);margin-bottom:var(--space-4);display:flex}.btn-filter{padding:var(--space-2) var(--space-6);border-radius:var(--radius-full);font-weight:var(--weight-bold);border:1px solid var(--border-color);background:var(--bg-secondary);color:var(--text-primary);transition:all var(--transition-fast)}.btn-filter:hover{background:var(--bg-card-hover)}.btn-filter.active{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:0 4px 12px var(--primary-glow)}.btn-filter.sejarah.active{background:var(--sejarah);border-color:var(--sejarah);box-shadow:0 4px 12px var(--sejarah-glow)}.btn-filter.islam.active{background:var(--islam);border-color:var(--islam);box-shadow:0 4px 12px var(--islam-glow)}.leaderboard-list{padding:var(--space-6);border-radius:var(--radius-xl);gap:var(--space-2);flex-direction:column;display:flex}.list-header{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--divider);font-size:var(--text-sm);color:var(--text-muted);font-weight:var(--weight-bold);margin-bottom:var(--space-2);display:flex}.list-row{padding:var(--space-4);border-radius:var(--radius-md);background:var(--bg-primary);border:1px solid var(--border-color);transition:all var(--transition-fast);align-items:center;display:flex}.list-row:hover{border-color:var(--primary-light);background:var(--bg-card-hover);transform:translate(4px)}.list-row.top-3{background:linear-gradient(90deg, var(--bg-card) 0%, var(--bg-primary) 100%);border-left:4px solid var(--primary)}.list-row.top-3:nth-child(2){border-left-color:var(--gold)}.list-row.top-3:nth-child(3){border-left-color:var(--silver)}.list-row.top-3:nth-child(4){border-left-color:var(--bronze)}.col-rank{width:80px;font-size:var(--text-xl);font-weight:var(--weight-bold)}.col-name{font-weight:var(--weight-semibold);font-size:var(--text-lg);flex:1}.col-subject{width:120px}.col-score{text-align:right;flex-direction:column;width:100px;display:flex}.badge-subj{font-size:var(--text-xs);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);color:#fff}.badge-subj.sejarah{background:var(--sejarah)}.badge-subj.islam{background:var(--islam)}.time-sub{font-size:var(--text-xs);color:var(--text-muted)}@media (width<=639px){.col-subject{display:none}.list-row{padding:var(--space-3)}}.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}