@import"https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Fraunces:ital,wght@0,600;1,400&display=swap";@import"https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=DM+Serif+Display:ital@0;1&display=swap";*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root,[data-theme=light]{--p: #5B4FCF;--p2: #7C6EE8;--p3: #EAE8FD;--p4: #F5F3FF;--t: #0F0E1A;--ts: #6B6A7D;--tb: #F8F7FF;--w: #ffffff;--bg: #F0EFF8;--s: #F3F2FC;--border: #E8E5F8;--card-bg: #ffffff;--nav-bg: #ffffff;--shadow: 0 2px 12px rgba(91,79,207,.1);--green: #059669;--red: #DC2626;--orange: #EA580C}[data-theme=dark]{--p: #7C6EE8;--p2: #9D92F0;--p3: #2A2550;--p4: #1E1B3A;--t: #F0EEFF;--ts: #9B99B2;--tb: #1E1B3A;--w: #181628;--bg: #0F0E1A;--s: #1E1B3A;--border: #2E2A50;--card-bg: #181628;--nav-bg: #181628;--shadow: 0 2px 12px rgba(0,0,0,.4);--green: #34D399;--red: #F87171;--orange: #FB923C}[data-hc="1"]{--p: #3A2FBF;--t: #000000;--ts: #111111;--w: #ffffff;--bg: #ffffff;--border: #000000;--card-bg:#ffffff;filter:contrast(1.15)}body{font-family:Plus Jakarta Sans,sans-serif;color:var(--t);background:var(--bg);transition:background .25s,color .25s;min-height:100vh}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}.frame{background:var(--bg);min-height:100vh;transition:background .25s}.nav{display:flex;align-items:center;justify-content:space-between;background:var(--nav-bg);border-bottom:1px solid var(--border);padding:12px 32px;position:sticky;top:0;z-index:100;transition:background .25s,border-color .25s}.logo{display:flex;align-items:center;gap:8px;text-decoration:none}.li{width:30px;height:30px;border-radius:9px;background:transparent;display:flex;align-items:center;justify-content:center;flex-shrink:0}.ln{font-family:Fraunces,serif;font-size:17px;font-weight:600;color:var(--t)}.nav-links{display:flex;gap:28px}.nav-links span{font-size:13px;color:var(--ts);font-weight:500;cursor:pointer;transition:color .2s}.nav-links span:hover{color:var(--p)}.nb{display:flex;align-items:center;gap:8px}.nb-icon{width:34px;height:34px;border-radius:10px;background:var(--s);border:1.5px solid var(--border);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:15px;transition:background .2s,border-color .2s,transform .15s;color:var(--ts)}.bg{font-size:12px;font-weight:600;color:var(--p);background:transparent;border:1.5px solid var(--p);padding:7px 16px;border-radius:10px;cursor:pointer;transition:background .2s,color .2s;text-decoration:none}.bg:hover{background:var(--p3)}.bp{font-size:12px;font-weight:700;color:#fff;background:var(--p);padding:7px 16px;border-radius:10px;border:none;cursor:pointer;transition:background .2s,transform .15s;text-decoration:none}.bp:hover{background:var(--p2);transform:scale(1.03)}.hero-wrap{max-width:1200px;margin:0 auto;padding:60px 32px 40px;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}.hbadge{display:inline-flex;align-items:center;gap:6px;background:var(--p3);color:var(--p);font-size:11px;font-weight:700;padding:5px 12px;border-radius:20px;margin-bottom:16px;letter-spacing:.04em;text-transform:uppercase}.hdot{width:6px;height:6px;border-radius:50%;background:var(--p);animation:pulse 1.6s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}h1{font-family:Fraunces,serif;font-size:44px;line-height:1.08;font-weight:600;color:var(--t);margin-bottom:14px}h1 em{font-style:italic;color:var(--p)}.hp{font-size:14px;color:var(--ts);line-height:1.75;margin-bottom:24px;max-width:400px}.hbtns{display:flex;gap:10px;margin-bottom:28px;flex-wrap:wrap}.bpl{font-size:13px;font-weight:700;color:#fff;background:var(--p);padding:11px 24px;border-radius:12px;border:none;cursor:pointer;transition:background .2s,transform .15s;text-decoration:none}.bpl:hover{background:var(--p2);transform:scale(1.03)}.bsl{font-size:13px;font-weight:600;color:var(--t);background:var(--card-bg);padding:11px 22px;border-radius:12px;border:1.5px solid var(--border);cursor:pointer;transition:border-color .2s,transform .15s}.bsl:hover{border-color:var(--p);transform:scale(1.02)}.stats{display:flex;gap:28px;flex-wrap:wrap}.sn{font-family:Fraunces,serif;font-size:24px;font-weight:600;color:var(--t)}.sl{font-size:11px;color:var(--ts);margin-top:2px}.hero-right{display:flex;flex-direction:column;gap:10px}.fbadge{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;padding:9px 14px;display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--t);align-self:flex-start;box-shadow:var(--shadow);transition:background .25s}.hcard{background:var(--card-bg);border-radius:16px;border:1px solid var(--border);padding:22px;box-shadow:var(--shadow);transition:background .25s,border-color .25s}.hh{display:flex;align-items:center;gap:10px;margin-bottom:16px}.av{width:38px;height:38px;border-radius:50%;background:var(--p);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:13px;flex-shrink:0}.aname{font-size:13px;font-weight:700;color:var(--t)}.asub{font-size:11px;color:var(--ts)}.abadge{margin-left:auto;background:#0596691f;color:var(--green);font-size:10px;font-weight:700;padding:3px 9px;border-radius:6px}.prow{display:flex;justify-content:space-between;font-size:11px;margin-bottom:6px}.prow span:last-child{color:var(--p);font-weight:700}.bar{height:8px;background:var(--p3);border-radius:4px;overflow:hidden;margin-bottom:14px}.subs{display:grid;grid-template-columns:1fr 1fr;gap:8px}.sub{background:var(--s);border-radius:10px;padding:10px;display:flex;align-items:center;gap:8px}.si{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}.sn2{font-size:11px;font-weight:700;color:var(--t)}.sp{font-size:10px;color:var(--ts)}.section{max-width:1200px;margin:0 auto;padding:0 32px}.fstrip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0 auto 40px;max-width:1200px;padding:0 32px}.fc{background:var(--card-bg);border-radius:14px;border:1px solid var(--border);padding:20px;transition:transform .2s,box-shadow .2s,background .25s;cursor:default}.fc:hover{transform:translateY(-3px);box-shadow:0 8px 24px #5b4fcf1f}.fi{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;margin-bottom:10px}.ft{font-size:13px;font-weight:700;color:var(--t);margin-bottom:4px}.fd{font-size:11px;color:var(--ts);line-height:1.55}.sh{text-align:center;margin-bottom:20px}.sh .slabel{font-size:10px;font-weight:700;color:var(--ts);letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px}.sh h2{font-family:Fraunces,serif;font-size:28px;font-weight:600;color:var(--t);margin-bottom:8px}.sh p{font-size:13px;color:var(--ts)}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:48px}.sc{background:var(--card-bg);border-radius:14px;border:1px solid var(--border);padding:24px;position:relative;overflow:hidden;transition:transform .2s,background .25s}.sc:hover{transform:translateY(-2px)}.snum{font-family:Fraunces,serif;font-size:56px;font-weight:600;color:var(--p3);position:absolute;right:14px;top:6px;line-height:1}.sic{width:40px;height:40px;border-radius:12px;background:var(--p3);display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:12px}.stitle{font-size:14px;font-weight:700;color:var(--t);margin-bottom:6px}.sdesc{font-size:12px;color:var(--ts);line-height:1.6}.cta{background:var(--p);border-radius:18px;padding:48px 36px;text-align:center;margin:0 auto 40px;max-width:1200px}.cta h2{font-family:Fraunces,serif;font-size:30px;font-weight:600;color:#fff;margin-bottom:10px}.cta p{font-size:13px;color:#ffffffc7;margin-bottom:24px}.bw{background:#fff;color:var(--p);font-size:13px;font-weight:700;padding:12px 28px;border-radius:12px;border:none;cursor:pointer;text-decoration:none;display:inline-block;transition:transform .15s,box-shadow .2s}.bw:hover{transform:scale(1.04);box-shadow:0 4px 20px #00000026}.footer{border-top:1px solid var(--border);padding:20px 32px;text-align:center;font-size:11px;color:var(--ts);background:var(--nav-bg)}@media (max-width: 768px){.nav{padding:10px 16px}.nav-links{display:none}.hero-wrap{grid-template-columns:1fr;padding:32px 16px 24px;gap:28px}h1{font-size:30px}.fstrip{grid-template-columns:1fr 1fr;padding:0 16px}.steps{grid-template-columns:1fr}.section{padding:0 16px}.cta{margin:0 16px 32px;padding:32px 20px}}.auth-page{display:flex;min-height:100vh;background:var(--bg);transition:background .25s}.auth-left{width:42%;background:var(--p);padding:40px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}.auth-left:before{content:"";position:absolute;width:340px;height:340px;border-radius:50%;background:#ffffff0f;top:-80px;right:-80px}.auth-left:after{content:"";position:absolute;width:200px;height:200px;border-radius:50%;background:#ffffff0d;bottom:60px;left:-50px}.al-logo{display:flex;align-items:center;gap:10px;text-decoration:none}.al-li{width:32px;height:32px;border-radius:10px;background:#fff3;display:flex;align-items:center;justify-content:center}.al-name{font-family:Fraunces,serif;font-size:18px;font-weight:600;color:#fff}.al-content{z-index:1}.al-tag{font-size:10px;font-weight:700;color:#fff9;letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px}.al-title{font-family:Fraunces,serif;font-size:30px;font-weight:600;color:#fff;line-height:1.2;margin-bottom:14px}.al-desc{font-size:13px;color:#ffffffbf;line-height:1.7}.al-stats{display:flex;gap:20px;z-index:1}.al-stat{background:#ffffff1f;border-radius:12px;padding:14px 16px}.al-stat-n{font-family:Fraunces,serif;font-size:22px;font-weight:600;color:#fff}.al-stat-l{font-size:11px;color:#ffffffa6;margin-top:2px}.auth-right{flex:1;display:flex;align-items:center;justify-content:center;padding:40px 32px}.auth-card{width:100%;max-width:420px;background:var(--card-bg);border-radius:20px;border:1px solid var(--border);padding:36px 32px;box-shadow:var(--shadow);transition:background .25s,border-color .25s;animation:slideUp .4s ease}@keyframes slideUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.card-illo{text-align:center;font-size:42px;margin-bottom:16px}.card-title{font-family:Fraunces,serif;font-size:24px;font-weight:600;color:var(--t);text-align:center;margin-bottom:4px}.card-sub{font-size:12px;color:var(--ts);text-align:center;margin-bottom:24px}.step-indicator{display:flex;gap:6px;justify-content:center;margin-bottom:20px}.step-dot{width:28px;height:6px;border-radius:3px;background:var(--border);transition:background .3s}.step-dot.active{background:var(--p)}.field{margin-bottom:14px}.field label{display:block;font-size:12px;font-weight:600;color:var(--t);margin-bottom:5px}.finput{width:100%;background:var(--s);border:1.5px solid var(--border);border-radius:10px;padding:10px 13px;font-size:13px;color:var(--t);font-family:Plus Jakarta Sans,sans-serif;outline:none;transition:border-color .2s,background .25s}.finput:focus{border-color:var(--p);background:var(--card-bg)}.finput.error{border-color:var(--red)}.field-error{font-size:11px;color:var(--red);margin-top:4px}.forgot{font-size:11px;color:var(--p);font-weight:600;text-align:right;margin-bottom:16px;cursor:pointer}.btn-full{width:100%;background:var(--p);color:#fff;font-size:13px;font-weight:700;padding:12px;border-radius:12px;border:none;cursor:pointer;margin-bottom:16px;transition:background .2s,transform .15s;font-family:Plus Jakarta Sans,sans-serif}.btn-full.loading:after{content:" ⏳"}.alert{border-radius:10px;padding:10px 14px;font-size:12px;font-weight:600;margin-bottom:14px;display:flex;align-items:center;gap:6px}.alert-error{background:#dc262614;color:var(--red);border:1px solid rgba(220,38,38,.2)}.alert-success{background:#05966914;color:var(--green);border:1px solid rgba(5,150,105,.2)}.divider{display:flex;align-items:center;gap:8px;margin-bottom:14px}.dline{flex:1;height:1px;background:var(--border)}.dtxt{font-size:11px;color:var(--ts);white-space:nowrap}.oauth{display:flex;gap:8px;margin-bottom:18px}.obtn{flex:1;background:var(--s);border:1.5px solid var(--border);border-radius:10px;padding:10px;font-size:12px;font-weight:600;color:var(--t);text-align:center;cursor:pointer;transition:border-color .2s,background .2s}.obtn:hover{border-color:var(--p);background:var(--p4)}.switch{text-align:center;font-size:12px;color:var(--ts)}.switch a{color:var(--p);font-weight:700;text-decoration:none}.switch a:hover{text-decoration:underline}.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}.strength{margin-top:6px}.strength-bar{display:flex;gap:3px;margin-bottom:4px}.sb{flex:1;height:4px;border-radius:2px;background:var(--border);transition:background .3s}.sb.fill-weak{background:var(--red)}.sb.fill-ok{background:var(--orange)}.sb.fill-strong{background:var(--green)}.strength-lbl{font-size:10px;font-weight:600}.terms{font-size:10px;color:var(--ts);text-align:center;margin-top:12px;line-height:1.6}.terms span{color:var(--p);cursor:pointer}.back-link{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ts);text-decoration:none;margin-bottom:20px}.back-link:hover{color:var(--p)}@media (max-width: 768px){.auth-page{flex-direction:column}.auth-left{width:100%;padding:24px;min-height:auto}.al-title{font-size:22px}.al-stats{flex-wrap:wrap}.auth-right{padding:24px 16px}.auth-card{padding:28px 20px}}.dash-page{display:flex;min-height:100vh;background:var(--bg);transition:background .25s}.sidebar{width:220px;flex-shrink:0;background:var(--nav-bg);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:20px 0;transition:background .25s,border-color .25s;position:sticky;top:0;height:100vh}.sb-logo{display:flex;align-items:center;gap:8px;padding:0 20px 200px;border-bottom:1px solid var(--border);margin-bottom:12px}.li{width:48px;height:48px;border-radius:8px;background:transparent;display:flex;align-items:center;justify-content:center;flex-shrink:0}.ln{font-family:Fraunces,serif;font-size:15px;font-weight:600;color:var(--t)}.ln span{color:var(--p)}.sb-nav{flex:1;display:flex;flex-direction:column;gap:2px;padding:0 10px}.sb-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;font-size:13px;font-weight:500;color:var(--ts);background:transparent;border:none;cursor:pointer;text-align:left;transition:background .18s,color .18s;font-family:Plus Jakarta Sans,sans-serif}.sb-item:hover{background:var(--s);color:var(--t)}.sb-item.active{background:var(--p3);color:var(--p);font-weight:700}.sb-user{display:flex;align-items:center;gap:8px;padding:14px 14px 0;border-top:1px solid var(--border);margin-top:12px}.sb-av{width:34px;height:34px;border-radius:50%;background:var(--p);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:12px;flex-shrink:0}.sb-name{font-size:12px;font-weight:700;color:var(--t)}.sb-kelas{font-size:10px;color:var(--ts)}.sb-logout{margin-left:auto;width:28px;height:28px;border-radius:8px;background:var(--s);border:1px solid var(--border);cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;color:var(--ts);transition:background .2s,color .2s}.sb-logout:hover{background:#dc26261a;color:var(--red)}.dash-main{flex:1;padding:28px 32px;overflow-y:auto;min-width:0}.dash-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px;flex-wrap:wrap;gap:12px}.dash-greeting{font-family:Fraunces,serif;font-size:26px;font-weight:600;color:var(--t)}.dash-sub{font-size:13px;color:var(--ts);margin-top:2px}.dash-header-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.nb-icon{width:36px;height:36px;border-radius:10px;background:var(--card-bg);border:1.5px solid var(--border);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--ts);transition:background .2s,border-color .2s,transform .15s}.nb-icon:hover{background:var(--p3);border-color:var(--p);transform:scale(1.08)}.nb-icon.active{background:var(--p3);border-color:var(--p);color:var(--p)}.dash-home-btn{font-size:12px;font-weight:600;color:var(--p);background:var(--p3);padding:8px 14px;border-radius:10px;text-decoration:none;transition:background .2s}.dash-home-btn:hover{background:var(--p);color:#fff}.tab-content{animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.section-title{font-size:14px;font-weight:700;color:var(--t);margin-bottom:14px;margin-top:24px}.section-title:first-child{margin-top:0}.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}.stat-card{background:var(--card-bg);border-radius:14px;border:1px solid var(--border);padding:18px 16px;text-align:center;transition:transform .2s,background .25s}.stat-card:hover{transform:translateY(-2px)}.stat-icon{font-size:22px;margin-bottom:6px}.stat-value{font-family:Fraunces,serif;font-size:22px;font-weight:600;color:var(--t)}.stat-label{font-size:11px;color:var(--ts);margin-top:2px}.xp-card{background:var(--card-bg);border-radius:14px;border:1px solid var(--border);padding:18px 20px;margin-bottom:8px;transition:background .25s}.xp-row{display:flex;justify-content:space-between;font-size:12px;font-weight:600;margin-bottom:8px}.xp-label{color:var(--t)}.xp-val{color:var(--p)}.xp-bar{height:10px;background:var(--p3);border-radius:5px;overflow:hidden;margin-bottom:6px}.xp-fill{height:100%;background:linear-gradient(90deg,var(--p),var(--p2));border-radius:5px;transition:width .8s ease}.xp-hint{font-size:11px;color:var(--ts)}.bar{height:7px;background:var(--p3);border-radius:4px;overflow:hidden;margin-bottom:0}.bf{height:100%;background:var(--p);border-radius:4px;transition:width .6s ease}.subject-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.subj-card{background:var(--card-bg);border-radius:14px;border:1px solid var(--border);padding:16px;cursor:pointer;transition:transform .2s,box-shadow .2s,background .25s}.subj-card:hover{transform:translateY(-2px);box-shadow:0 6px 20px #5b4fcf1a}.subj-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}.subj-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}.subj-title{font-size:13px;font-weight:700;color:var(--t)}.subj-topic{font-size:11px;color:var(--ts)}.subj-xp{margin-left:auto;font-size:11px;font-weight:700;color:var(--p);white-space:nowrap}.subj-pct{font-size:11px;color:var(--ts);text-align:right;margin-top:4px}.subj-btn{display:block;width:100%;margin-top:12px;background:var(--p3);color:var(--p);font-size:12px;font-weight:700;padding:8px;border-radius:8px;border:none;cursor:pointer;transition:background .2s,color .2s;font-family:Plus Jakarta Sans,sans-serif}.subj-btn:hover{background:var(--p);color:#fff}.activity-list{display:flex;flex-direction:column;gap:8px}.act-item{background:var(--card-bg);border:1px solid var(--border);border-radius:10px;padding:12px 16px;display:flex;align-items:center;gap:10px;font-size:13px;transition:background .25s}.act-icon{font-size:16px;flex-shrink:0}.act-text{flex:1;color:var(--t);font-weight:500}.act-time{font-size:11px;color:var(--ts);white-space:nowrap}.act-xp{font-size:11px;font-weight:700;color:var(--green);white-space:nowrap;background:#0596691a;padding:3px 8px;border-radius:6px}.quiz-wrap{background:var(--card-bg);border-radius:16px;border:1px solid var(--border);padding:28px;max-width:600px;transition:background .25s}.quiz-progress{font-size:12px;color:var(--ts);font-weight:600;margin-bottom:8px}.quiz-q{font-size:16px;font-weight:700;color:var(--t);margin-bottom:20px;line-height:1.5;cursor:pointer;display:flex;align-items:flex-start;gap:8px}.quiz-tts{font-size:18px;flex-shrink:0}.quiz-opts{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}.quiz-opt{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:12px;border:1.5px solid var(--border);background:var(--s);font-size:13px;font-weight:500;color:var(--t);cursor:pointer;text-align:left;transition:border-color .2s,background .2s,transform .15s;font-family:Plus Jakarta Sans,sans-serif}.quiz-opt:hover:not(.correct):not(.wrong){border-color:var(--p);background:var(--p4);transform:translate(4px)}.quiz-opt.correct{border-color:var(--green);background:#05966914;color:var(--green)}.quiz-opt.wrong{border-color:var(--red);background:#dc262614;color:var(--red)}.opt-letter{width:24px;height:24px;border-radius:6px;background:var(--border);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0}.quiz-done{text-align:center;padding:20px 0}.qd-emoji{font-size:56px;margin-bottom:12px}.qd-title{font-family:Fraunces,serif;font-size:26px;font-weight:600;color:var(--t);margin-bottom:8px}.qd-score{font-size:15px;color:var(--ts);margin-bottom:6px}.qd-xp{font-size:18px;font-weight:700;color:var(--green);margin-bottom:20px}.tts-card{background:var(--card-bg);border-radius:16px;border:1px solid var(--border);padding:28px;max-width:640px;transition:background .25s}.tts-status{font-size:13px;color:var(--ts);margin-bottom:14px}.tts-label{display:block;font-size:12px;font-weight:600;color:var(--t);margin-bottom:8px}.tts-input{width:100%;background:var(--s);border:1.5px solid var(--border);border-radius:12px;padding:12px 14px;font-size:13px;color:var(--t);font-family:Plus Jakarta Sans,sans-serif;resize:vertical;outline:none;transition:border-color .2s}.tts-input:focus{border-color:var(--p)}.tts-examples{margin-top:20px}.tts-ex-title{font-size:12px;font-weight:700;color:var(--ts);margin-bottom:8px}.tts-ex-item{padding:10px 14px;background:var(--s);border-radius:10px;font-size:12px;color:var(--ts);cursor:pointer;margin-bottom:6px;transition:background .2s,color .2s}.tts-ex-item:hover{background:var(--p3);color:var(--p)}.settings-card{background:var(--card-bg);border-radius:16px;border:1px solid var(--border);padding:24px;max-width:560px;transition:background .25s}.setting-group{margin-bottom:24px}.setting-group-title{font-size:11px;font-weight:700;color:var(--ts);letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px}.setting-row{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--border)}.setting-row:last-child{border-bottom:none}.setting-icon{font-size:20px;flex-shrink:0}.setting-info{flex:1}.setting-label{font-size:13px;font-weight:600;color:var(--t);margin-bottom:2px}.setting-desc{font-size:11px;color:var(--ts)}.toggle{width:44px;height:24px;border-radius:12px;background:var(--border);border:none;cursor:pointer;position:relative;transition:background .25s;flex-shrink:0}.toggle.on{background:var(--p)}.toggle-knob{width:18px;height:18px;border-radius:50%;background:#fff;position:absolute;top:3px;left:3px;transition:transform .25s;box-shadow:0 1px 4px #0003}.toggle.on .toggle-knob{transform:translate(20px)}.account-info{background:var(--s);border-radius:12px;padding:14px}.acc-row{display:flex;justify-content:space-between;align-items:center;font-size:13px;padding:6px 0;border-bottom:1px solid var(--border)}.acc-row:last-child{border-bottom:none}.acc-row span{color:var(--ts)}.acc-row strong{color:var(--t)}.btn-full{width:100%;background:var(--p);color:#fff;font-size:13px;font-weight:700;padding:12px;border-radius:12px;border:none;cursor:pointer;transition:background .2s,transform .15s;font-family:Plus Jakarta Sans,sans-serif;display:block;text-align:center}.btn-full:hover{background:var(--p2);transform:scale(1.02)}.btn-full:disabled{opacity:.6;cursor:not-allowed;transform:none}@media (max-width: 900px){.sidebar{width:60px}.sb-item span:last-child{display:none}.sb-logo .ln,.sb-name,.sb-kelas{display:none}.stat-row,.subject-grid{grid-template-columns:1fr 1fr}}@media (max-width: 640px){.dash-main{padding:16px}.subject-grid{grid-template-columns:1fr}.stat-row{grid-template-columns:1fr 1fr}}*{box-sizing:border-box}body{background:#f5f3ff;min-height:100vh}.materi-container{max-width:860px;margin:0 auto;padding:40px 28px 80px;font-family:Plus Jakarta Sans,sans-serif;color:#1e1e2e;line-height:1.75;position:relative}.materi-nav{display:flex;justify-content:space-between;align-items:center;margin-bottom:36px;gap:12px}.btn-nav{display:inline-flex;align-items:center;gap:8px;padding:11px 22px;border-radius:50px;font-family:Plus Jakarta Sans,sans-serif;font-size:14px;font-weight:600;cursor:pointer;border:none;transition:all .25s cubic-bezier(.34,1.56,.64,1);text-decoration:none;letter-spacing:.01em}.btn-nav:hover{transform:translateY(-2px);box-shadow:0 8px 24px #6c47ff47}.btn-nav:active{transform:translateY(0)}.btn-back{background:#fff;color:#6c47ff;border:2px solid #e0d9ff}.btn-back:hover{background:#f3f0ff;border-color:#6c47ff}.btn-next{background:linear-gradient(135deg,#6c47ff,#9b6dff);color:#fff;box-shadow:0 4px 14px #6c47ff59}.btn-nav-icon{font-size:16px;line-height:1}.materi-header-card{background:linear-gradient(135deg,#6c47ff,#9b6dff,#c084fc);border-radius:20px;padding:32px 32px 28px;margin-bottom:36px;color:#fff;position:relative;overflow:hidden}.materi-header-card:before{content:"";position:absolute;top:-40px;right:-40px;width:180px;height:180px;background:#ffffff14;border-radius:50%}.materi-header-card:after{content:"";position:absolute;bottom:-30px;left:-20px;width:120px;height:120px;background:#ffffff0f;border-radius:50%}.materi-title{font-family:"DM Serif Display",serif;font-size:30px;font-weight:400;color:#fff;margin:0 0 10px;letter-spacing:-.01em;position:relative;z-index:1}.materi-meta{font-size:13px;color:#ffffffc7;margin:3px 0;position:relative;z-index:1;font-weight:500}hr{border:none;height:1px;background:linear-gradient(to right,transparent,#ddd6fe,transparent);margin:36px 0}.section-main{font-family:"DM Serif Display",serif;font-size:22px;font-weight:400;color:#2d1b69;margin:32px 0 16px;padding:14px 20px;background:linear-gradient(135deg,#ede9fe,#f3f0ff);border-left:4px solid #6c47ff;border-radius:0 12px 12px 0;letter-spacing:-.01em}.section-title{font-size:16px;font-weight:700;color:#4338ca;margin:24px 0 10px;padding:8px 14px;background:#f0fdf4;border-left:3px solid #22c55e;border-radius:0 8px 8px 0;letter-spacing:.02em;text-transform:uppercase;font-size:13px}.sub-title{font-size:15px;font-weight:700;color:#6c47ff;margin:20px 0 6px;display:flex;align-items:center;gap:8px}.sub-title:before{content:"◆";font-size:8px;color:#c084fc;flex-shrink:0}.content-text{font-size:14.5px;color:#4b5563;margin:4px 0 10px;padding:10px 16px;background:#fafafa;border-radius:10px;border:1px solid #f0eefe;line-height:1.8}.section-desc{font-size:14px;color:#6b7280;font-style:italic;margin:-4px 0 16px;padding-left:4px}.materi-nav-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:52px;padding-top:28px;border-top:1px solid #e5e7eb;gap:12px}[data-theme=dark] body{background:#0f0e17}[data-theme=dark] .materi-container{color:#e2e8f0}[data-theme=dark] .materi-header-card{background:linear-gradient(135deg,#3b1fa8,#5b2bd8)}[data-theme=dark] .section-main{background:linear-gradient(135deg,#1e1b4b,#2d1b69);color:#c4b5fd}[data-theme=dark] .section-title{background:#052e16;color:#86efac}[data-theme=dark] .content-text{background:#1a1a2e;color:#94a3b8;border-color:#2d2d4e}[data-theme=dark] .btn-back{background:#1e1b4b;color:#a78bfa;border-color:#3730a3}[data-theme=dark] hr{background:linear-gradient(to right,transparent,#3730a3,transparent)}