:root{--primary-font:"Outfit","Plus Jakarta Sans",system-ui,sans-serif;--bg-color-1:#07100b;--bg-color-2:#0e1e16;--bg-gradient:linear-gradient(135deg,#060e0a,#0d1f16);--panel-bg:rgba(22,38,30,0.55);--panel-border:rgba(45,106,79,0.25);--panel-shadow:rgba(0,0,0,0.4);--text-primary:#f3f9f6;--text-secondary:#a9c5b8;--text-muted:#6e9482;--color-primary:#40916c;--color-primary-hover:#52b788;--color-accent:#ffb703;--color-accent-hover:#ffc947;--color-danger:#e63946;--color-danger-bg:rgba(230,57,70,0.15);--color-success:#2a9d8f;--color-success-bg:rgba(42,157,143,0.15);--accent-glow:rgba(255,183,3,0.15);--green-glow:rgba(82,183,136,0.15);--border-radius-sm:8px;--border-radius-md:16px;--border-radius-lg:24px;--transition-smooth:all 0.35s cubic-bezier(0.25,0.8,0.25,1);--transition-fast:all 0.15s ease}body.light-mode{--bg-color-1:#f4f8f6;--bg-color-2:#e2ede8;--bg-gradient:linear-gradient(135deg,#f0f7f3,#d8e8e0);--panel-bg:rgba(255,255,255,0.75);--panel-border:rgba(45,106,79,0.18);--panel-shadow:rgba(27,67,50,0.08);--text-primary:#1b4332;--text-secondary:#2d6a4f;--text-muted:#52796f;--color-primary:#2d6a4f;--color-primary-hover:#1b4332;--color-accent:#fb8500;--color-accent-hover:#e07a00;--accent-glow:rgba(251,133,0,0.1);--green-glow:rgba(45,106,79,0.08)}body{font-family:var(--primary-font);background:var(--bg-gradient);color:var(--text-primary);min-height:100vh;overflow-x:hidden;transition:background var(--transition-smooth),color var(--transition-smooth);position:relative}.bg-glow{position:fixed;border-radius:50%;filter:blur(120px);z-index:-1;opacity:.45;pointer-events:none;transition:var(--transition-smooth)}.bg-glow-1{width:400px;height:400px;background:var(--color-primary);top:-10%;right:-5%}.bg-glow-2{width:500px;height:500px;background:var(--color-accent);bottom:-15%;left:-10%;opacity:.25}.bg-glow-3{width:300px;height:300px;background:#1d3557;top:40%;right:25%;opacity:.15}.app-container{max-width:1200px;margin:0 auto;padding:24px 16px;display:flex;flex-direction:column;min-height:100vh}.app-header{justify-content:space-between;padding:16px 28px;background:var(--panel-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--panel-border);border-radius:var(--border-radius-md);box-shadow:0 8px 32px var(--panel-shadow);margin-bottom:24px;transition:var(--transition-smooth)}.app-header,.logo-area{display:flex;align-items:center}.logo-area{gap:16px}.logo-icon{width:52px;height:52px;background:linear-gradient(135deg,var(--color-primary) 0,var(--color-accent) 100%);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px;box-shadow:0 4px 15px rgba(82,183,136,.4)}.logo-text h1{font-size:22px;font-weight:800;letter-spacing:-.5px;line-height:1.1;color:var(--text-primary)}.logo-text h1 span{background:linear-gradient(90deg,var(--color-primary-hover),var(--color-accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-left:6px}.logo-text p{font-size:12px;color:var(--text-secondary);font-weight:500;margin-top:2px}.header-actions{display:flex;gap:12px}.header-btn{background:rgba(255,255,255,.08);border:1px solid var(--panel-border);color:var(--text-primary);width:44px;height:44px;border-radius:var(--border-radius-sm);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;transition:var(--transition-smooth)}body.light-mode .header-btn{background:rgba(0,0,0,.04)}.header-btn:hover{background:var(--color-primary);color:#fff;border-color:var(--color-primary);transform:translateY(-2px);box-shadow:0 4px 12px var(--green-glow)}.header-btn.text-btn{width:auto;padding:0 16px;font-size:14px;font-weight:600;gap:8px}.app-screen{display:block;animation:fadeIn .4s ease-out forwards}@keyframes fadeIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.hero-section{background:linear-gradient(135deg,rgba(45,106,79,.8),rgba(22,38,30,.95));border:1px solid var(--panel-border);border-radius:var(--border-radius-lg);padding:32px 40px;margin-bottom:32px;position:relative;overflow:hidden;box-shadow:0 12px 40px var(--panel-shadow);color:#fff}body.light-mode .hero-section{background:linear-gradient(135deg,rgba(45,106,79,.9),rgba(27,67,50,.95))}.hero-content h2{font-size:30px;font-weight:800;margin-bottom:12px;text-shadow:0 2px 4px rgba(0,0,0,.15)}.hero-content p{font-size:16px;line-height:1.6;max-width:800px;color:rgba(255,255,255,.85);margin-bottom:24px}.hero-stats{display:flex;gap:32px;flex-wrap:wrap}.stat-item{display:flex;flex-direction:column;background:rgba(255,255,255,.08);padding:12px 24px;border-radius:var(--border-radius-md);border:1px solid rgba(255,255,255,.1);min-width:140px;text-align:center}.stat-value{font-size:24px;font-weight:800;color:var(--color-accent)}.stat-label{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:rgba(255,255,255,.7);margin-top:4px}.section-title-container{margin-bottom:20px}.section-title{font-size:20px;font-weight:700;display:flex;align-items:center;gap:10px;color:var(--text-primary)}.section-title i{color:var(--color-accent)}.section-subtitle{font-size:14px;color:var(--text-secondary);margin-top:4px}.modules-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));grid-gap:20px;gap:20px;margin-bottom:32px}.module-card{background:var(--panel-bg);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);border:1px solid var(--panel-border);border-radius:var(--border-radius-md);padding:24px;cursor:pointer;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 4px 20px var(--panel-shadow)}.module-card,.module-card:before{transition:var(--transition-smooth)}.module-card:before{content:"";position:absolute;top:0;left:0;width:100%;height:4px;background:linear-gradient(90deg,var(--color-primary),var(--color-accent));opacity:.7}.module-card:hover{transform:translateY(-5px);box-shadow:0 8px 30px var(--panel-shadow);border-color:var(--color-primary-hover)}.module-card:hover:before{height:6px;opacity:1}.card-top{margin-bottom:16px}.card-num-badge{display:inline-block;font-size:11px;font-weight:800;padding:4px 10px;background:rgba(64,145,108,.15);color:var(--color-primary-hover);border-radius:50px;margin-bottom:12px;letter-spacing:.5px;border:1px solid rgba(64,145,108,.2)}body.light-mode .card-num-badge{background:rgba(45,106,79,.1);color:var(--color-primary)}.module-card h4{font-size:18px;font-weight:700;line-height:1.4;margin-bottom:8px;color:var(--text-primary)}.module-card p{font-size:13px;color:var(--text-secondary);line-height:1.5}.card-status-row{display:flex;justify-content:space-between;align-items:center;margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,.05)}body.light-mode .card-status-row{border-top:1px solid rgba(0,0,0,.05)}.card-xp-badge{font-weight:700;color:var(--color-accent);gap:4px}.card-progress,.card-xp-badge{font-size:12px;display:flex;align-items:center}.card-progress{gap:8px;font-weight:600;color:var(--text-muted)}.card-progress.done{color:var(--color-success)}.card-progress i{font-size:14px}.detail-header-panel{background:var(--panel-bg);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);border:1px solid var(--panel-border);border-radius:var(--border-radius-md);padding:20px 24px;margin-bottom:20px;display:flex;flex-direction:column;gap:16px}.btn-secondary{align-self:flex-start;background:transparent;border:1.5px solid var(--panel-border);color:var(--text-primary);font-size:13px;font-weight:600;padding:8px 16px;border-radius:var(--border-radius-sm);cursor:pointer;display:flex;align-items:center;gap:8px;transition:var(--transition-fast)}.btn-secondary:hover{background:rgba(255,255,255,.06);border-color:var(--text-secondary)}body.light-mode .btn-secondary:hover{background:rgba(0,0,0,.04)}.detail-title-group{display:flex;flex-direction:column;gap:6px}.module-badge{font-size:11px;font-weight:800;color:var(--color-accent);letter-spacing:1px}#detail-module-title{font-size:24px;font-weight:800}.tabs-nav{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:8px;gap:8px;margin-bottom:20px}.tab-btn{background:var(--panel-bg);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);border:1px solid var(--panel-border);color:var(--text-secondary);font-family:var(--primary-font);font-weight:600;font-size:14px;padding:14px 10px;border-radius:var(--border-radius-sm);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:var(--transition-smooth)}.tab-btn i{font-size:16px}.tab-btn:hover{color:var(--text-primary);background:rgba(64,145,108,.1)}.tab-btn.active{background:var(--color-primary);border-color:var(--color-primary);color:#fff;box-shadow:0 4px 15px var(--green-glow)}.tab-btn.highlight{border-color:rgba(255,183,3,.4)}.tab-btn.highlight.active{background:var(--color-accent);border-color:var(--color-accent);color:#0c1913;box-shadow:0 4px 15px var(--accent-glow)}.tab-pane{display:none;animation:tabFadeIn .3s ease-out forwards}.tab-pane.active{display:block}@keyframes tabFadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.pane-card{background:var(--panel-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--panel-border);border-radius:var(--border-radius-md);padding:32px;box-shadow:0 8px 32px var(--panel-shadow);min-height:400px}.cakupan-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05);padding:16px 20px;border-radius:var(--border-radius-sm);margin-bottom:24px}body.light-mode .cakupan-card{background:rgba(0,0,0,.02);border:1px solid rgba(0,0,0,.05)}.cakupan-card h4{font-size:14px;font-weight:700;margin-bottom:8px;color:var(--color-accent);display:flex;align-items:center;gap:8px}.cakupan-card ul{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));grid-gap:8px;gap:8px}.cakupan-card li{font-size:13px;display:flex;align-items:center;gap:8px;color:var(--text-secondary)}.cakupan-card li:before{content:"✦";color:var(--color-primary-hover)}.rangkuman-body{font-size:15px;line-height:1.8;color:var(--text-primary);margin-bottom:32px}.rangkuman-body h3{font-size:18px;font-weight:700;margin:24px 0 10px;color:var(--color-accent);border-bottom:1px solid var(--panel-border);padding-bottom:6px}.rangkuman-body p{margin-bottom:16px}.mark-read-footer{display:flex;justify-content:center;padding-top:20px;border-top:1px solid rgba(255,255,255,.05)}body.light-mode .mark-read-footer{border-top:1px solid rgba(0,0,0,.05)}.btn-primary{background:linear-gradient(135deg,var(--color-primary) 0,#206a4e 100%);border:none;color:#fff;font-family:var(--primary-font);font-weight:700;font-size:15px;padding:14px 28px;border-radius:var(--border-radius-sm);cursor:pointer;display:flex;align-items:center;gap:10px;box-shadow:0 4px 15px var(--green-glow);transition:var(--transition-smooth)}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(82,183,136,.35)}.btn-pulse{animation:pulse 2s infinite}@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(82,183,136,.4)}70%{box-shadow:0 0 0 12px rgba(82,183,136,0)}to{box-shadow:0 0 0 0 rgba(82,183,136,0)}}.centered-pane{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:480px}.flashcard-helper{margin-bottom:24px;font-size:13px;color:var(--text-secondary);display:flex;align-items:center;gap:6px}.flashcard-carousel{perspective:1000px;width:100%;max-width:480px;height:280px;margin-bottom:28px}.flashcard-wrapper{width:100%;height:100%;cursor:pointer}.flashcard-inner{position:relative;width:100%;height:100%;text-align:center;transition:transform .6s cubic-bezier(.4,0,.2,1);transform-style:preserve-3d;box-shadow:0 8px 30px var(--panel-shadow);border-radius:var(--border-radius-md);border:1px solid var(--panel-border)}.flashcard-wrapper.flipped .flashcard-inner{transform:rotateY(180deg)}.flashcard-back,.flashcard-front{position:absolute;width:100%;height:100%;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:var(--border-radius-md);padding:32px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}.flashcard-front{background:linear-gradient(135deg,rgba(22,38,30,.9),rgba(13,26,20,.95));color:#fff}body.light-mode .flashcard-front{background:linear-gradient(135deg,#ffffff,#eef5f1);color:var(--text-primary)}.flashcard-back{background:linear-gradient(135deg,rgba(27,67,50,.95),rgba(22,38,30,.98));color:#fff;transform:rotateY(180deg)}body.light-mode .flashcard-back{background:linear-gradient(135deg,#1b4332,#2d6a4f);color:#fff}.card-icon{font-size:40px;color:var(--color-accent)}.card-icon-back{font-size:32px;color:var(--color-accent)}#fc-front-text{font-size:20px;font-weight:700;line-height:1.4}#fc-back-text{font-size:16px;line-height:1.6;font-weight:500}.tap-hint{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin-top:10px}.carousel-controls{gap:20px}.btn-icon,.carousel-controls{display:flex;align-items:center}.btn-icon{background:var(--panel-bg);border:1px solid var(--panel-border);color:var(--text-primary);width:48px;height:48px;border-radius:50%;cursor:pointer;justify-content:center;font-size:16px;transition:var(--transition-fast)}.btn-icon:hover{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.carousel-indicator{font-size:14px;font-weight:700;color:var(--text-secondary)}.latihan-header{margin-bottom:24px}.latihan-header h4{font-size:16px;font-weight:700;color:var(--text-primary)}.latihan-header p{font-size:13px;color:var(--text-secondary);margin-top:4px}.latihan-list{display:flex;flex-direction:column;gap:12px}.latihan-item{background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.05);border-radius:var(--border-radius-sm);padding:16px 20px;transition:var(--transition-fast)}body.light-mode .latihan-item{background:rgba(0,0,0,.01);border:1px solid rgba(0,0,0,.04)}.latihan-item:hover{border-color:rgba(64,145,108,.3)}.latihan-q-row{display:flex;justify-content:space-between;align-items:center;cursor:pointer}.latihan-q{font-size:14px;font-weight:700;color:var(--text-primary);padding-right:20px;line-height:1.4}.btn-reveal-ans{background:rgba(64,145,108,.15);border:1px solid rgba(64,145,108,.25);color:var(--color-primary-hover);padding:6px 12px;border-radius:4px;font-size:11px;font-weight:700;cursor:pointer;white-space:nowrap;transition:var(--transition-fast)}body.light-mode .btn-reveal-ans{background:rgba(45,106,79,.08);color:var(--color-primary)}.btn-reveal-ans:hover{background:var(--color-primary);color:#fff}.latihan-ans-row{margin-top:12px;padding-top:12px;border-top:1px dashed rgba(255,255,255,.06);font-size:13px;line-height:1.6;color:var(--color-accent);font-weight:600;display:none}body.light-mode .latihan-ans-row{border-top:1px dashed rgba(0,0,0,.06)}.latihan-item.revealed .latihan-ans-row{display:block;animation:slideDown .2s ease-out forwards}@keyframes slideDown{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.quiz-container-box{min-height:480px;position:relative}.quiz-state-view{display:none}.quiz-state-view.active{display:block;animation:fadeIn .4s ease forwards}.quiz-intro-hero{text-align:center;padding:32px 16px;display:flex;flex-direction:column;align-items:center;gap:16px}.quiz-icon-large{font-size:64px;color:var(--color-accent);filter:drop-shadow(0 0 15px var(--accent-glow))}.quiz-intro-hero h3{font-size:22px;font-weight:800}.quiz-intro-hero p{font-size:14px;color:var(--text-secondary);max-width:500px;line-height:1.6}.quiz-rules-list{display:flex;gap:12px;margin-bottom:12px;flex-wrap:wrap;justify-content:center}.rule-badge{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05);font-size:12px;font-weight:600;color:var(--text-secondary);padding:6px 12px;border-radius:50px}body.light-mode .rule-badge{background:rgba(0,0,0,.02);border:1px solid rgba(0,0,0,.05)}.btn-lg{padding:16px 40px;font-size:16px;border-radius:var(--border-radius-md)}.quiz-progress-bar-wrapper{margin-bottom:24px}.quiz-progress-stats{display:flex;justify-content:space-between;font-size:12px;font-weight:700;color:var(--text-secondary);margin-bottom:8px}.quiz-progress-bar{background:rgba(255,255,255,.05);height:8px;border-radius:50px;overflow:hidden}body.light-mode .quiz-progress-bar{background:rgba(0,0,0,.05)}.quiz-progress-fill{background:linear-gradient(90deg,var(--color-primary),var(--color-accent));height:100%;border-radius:50px;width:0;transition:width .3s ease}.quiz-question-card{margin-bottom:24px}.quiz-question-card h3{font-size:18px;font-weight:700;line-height:1.5}.quiz-options-grid{display:flex;flex-direction:column;gap:12px;margin-bottom:24px}.quiz-opt-btn{background:rgba(255,255,255,.02);border:1.5px solid var(--panel-border);border-radius:var(--border-radius-sm);padding:16px 20px;color:var(--text-primary);font-family:var(--primary-font);font-size:14px;font-weight:600;text-align:left;cursor:pointer;position:relative;display:flex;align-items:center;gap:16px;transition:var(--transition-fast)}body.light-mode .quiz-opt-btn{background:rgba(0,0,0,.01)}.opt-letter{display:flex;align-items:center;justify-content:center;width:28px;height:28px;background:rgba(255,255,255,.06);border-radius:6px;font-weight:700;font-size:12px;color:var(--text-secondary);transition:var(--transition-fast)}body.light-mode .opt-letter{background:rgba(0,0,0,.04)}.quiz-opt-btn:hover:not(:disabled){background:rgba(64,145,108,.08);border-color:var(--color-primary-hover)}.quiz-opt-btn:hover:not(:disabled) .opt-letter{background:var(--color-primary);color:#fff}.status-icon{position:absolute;right:20px;font-size:16px;opacity:0;transform:scale(.7);transition:all .2s cubic-bezier(.175,.885,.32,1.275)}.quiz-opt-btn.correct{background:var(--color-success-bg)!important;border-color:var(--color-success)!important}.quiz-opt-btn.correct .opt-letter{background:var(--color-success)!important;color:#fff!important}.quiz-opt-btn.correct .correct-icon{opacity:1;transform:scale(1);color:var(--color-success)}.quiz-opt-btn.wrong{background:var(--color-danger-bg)!important;border-color:var(--color-danger)!important}.quiz-opt-btn.wrong .opt-letter{background:var(--color-danger)!important;color:#fff!important}.quiz-opt-btn.wrong .wrong-icon{opacity:1;transform:scale(1);color:var(--color-danger)}.quiz-footer-actions{display:flex;justify-content:space-between;align-items:center;padding-top:16px;border-top:1px solid rgba(255,255,255,.05);min-height:60px}body.light-mode .quiz-footer-actions{border-top:1px solid rgba(0,0,0,.05)}.auto-next-tip{font-size:13px;color:var(--text-muted)}.quiz-result-card{text-align:center;padding:40px 16px;display:flex;flex-direction:column;align-items:center;gap:16px}.result-badge-icon{width:90px;height:90px;background:linear-gradient(135deg,var(--color-accent) 0,#fb8500 100%);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#0c1913;font-size:40px;margin-bottom:8px;box-shadow:0 6px 20px var(--accent-glow)}.result-stats-box{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:16px;gap:16px;width:100%;max-width:440px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.04);border-radius:var(--border-radius-md);padding:16px;margin-top:12px}body.light-mode .result-stats-box{background:rgba(0,0,0,.01);border:1px solid rgba(0,0,0,.05)}.res-stat{display:flex;flex-direction:column;align-items:center}.res-val{font-size:20px;font-weight:800;color:var(--color-primary-hover)}.res-lbl{font-size:11px;color:var(--text-muted);text-transform:uppercase;margin-top:4px;font-weight:600}.result-actions{display:flex;gap:12px;margin-top:16px}.app-footer{margin-top:auto;padding:24px 0 8px;text-align:center}.app-footer p{font-size:12px;color:var(--text-muted);font-weight:500}@media (max-width:768px){.app-header{flex-direction:column;gap:16px;text-align:center;padding:16px}.logo-area{flex-direction:column;gap:8px}.hero-section{padding:24px}.hero-content h2{font-size:22px}.hero-stats{gap:12px;justify-content:center}.tabs-nav{grid-template-columns:repeat(2,1fr)}.result-stats-box{grid-template-columns:1fr;gap:12px}.pane-card{padding:20px 16px;min-height:auto}.centered-pane{min-height:auto;justify-content:flex-start;gap:20px}.flashcard-carousel{max-width:100%;height:260px;margin-bottom:0}.flashcard-back,.flashcard-front{padding:20px 16px;gap:12px}#fc-front-text{font-size:17px}#fc-back-text{font-size:14px;line-height:1.5}.quiz-opt-btn{padding:12px 16px;font-size:13px;gap:10px}.opt-letter{width:24px;height:24px;font-size:11px}.detail-header-panel{padding:16px}#detail-module-title{font-size:18px;line-height:1.3}}.confetti-holder{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;pointer-events:none;z-index:10}.confetti-piece{position:absolute;width:10px;height:15px;opacity:.85;top:-20px;border-radius:2px;animation:confettiFall linear forwards}@keyframes confettiFall{0%{transform:translateY(0) rotate(0deg);opacity:1}to{transform:translateY(450px) rotate(1turn);opacity:0}}.loading-spinner{text-align:center;padding:40px;color:var(--text-secondary);font-weight:600;font-size:16px;grid-column:1/-1;display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center}.loading-spinner i{font-size:32px;color:var(--color-accent)}.error-msg{background:var(--color-danger-bg);border:1px solid var(--color-danger);color:#fff;padding:16px 24px;border-radius:var(--border-radius-md);grid-column:1/-1;display:flex;align-items:center;gap:12px;font-weight:600;font-size:14px}.error-msg i{font-size:20px;color:var(--color-danger)}