/* ===== BLOCK 1 ===== */

*{box-sizing:border-box;margin:0;padding:0}
:root,:root[data-theme="dark"]{
 --p:#2563EB;--p2:#06B6D4;--pl:rgba(37,99,235,.15);
 --red:#EF4444;--redl:rgba(239,68,68,.1);
 --ok:#22C55E;--okl:rgba(34,197,94,.15);
 --gold:#F59E0B;--gl:rgba(245,158,11,.12);
 --bg:#0F172A;--bg2:#131C31;--bg3:#182038;
 --card:#161F38;--card2:#1C2745;
 --tx:#F1F5F9;--tx2:#94A3B8;--tx3:#64748B;
 --bd:#1E293B;--bd2:#2A3A55;
 --f:'Inter',sans-serif;--f2:'Inter',sans-serif;
 --glow:0 0 20px rgba(37,99,235,.35);
 --glow2:0 0 40px rgba(6,182,212,.35);
 --radius:16px;--radius-sm:10px;--radius-lg:20px;
 --sp-1:8px;--sp-2:16px;--sp-3:24px;--sp-4:32px;--sp-5:40px;--sp-6:48px;
 --p-lite:#60A5FA;
 --surface2:rgba(255,255,255,.04);
 color-scheme:dark;
}
:root[data-theme="light"]{
 --p-lite:#2563EB;
 --surface2:rgba(15,23,42,.035);
 --pl:rgba(37,99,235,.1);
 --redl:rgba(239,68,68,.08);
 --okl:rgba(34,197,94,.1);
 --gl:rgba(245,158,11,.1);
 --bg:#F8FAFC;--bg2:#F1F5F9;--bg3:#E9EEF5;
 --card:#FFFFFF;--card2:#F8FAFC;
 --tx:#0F172A;--tx2:#475569;--tx3:#64748B;
 --bd:#E2E8F0;--bd2:#CBD5E1;
 --glow:0 0 20px rgba(37,99,235,.12);
 --glow2:0 0 30px rgba(6,182,212,.12);
 color-scheme:light;
}
body{font-family:var(--f);background:var(--bg);color:var(--tx);overflow-x:hidden;min-height:100vh;transition:background-color .25s ease,color .25s ease}
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:var(--bg2)}
::-webkit-scrollbar-thumb{background:var(--p);border-radius:4px}
.page{display:none}.page.on{display:block}

/* BG */
.bg-orbs{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.orb{position:absolute;border-radius:50%;filter:blur(80px);animation:float 8s ease-in-out infinite}
.orb1{width:400px;height:400px;background:rgba(37,99,235,.08);top:-100px;right:-100px}
.orb2{width:300px;height:300px;background:rgba(6,182,212,.06);bottom:100px;left:-50px;animation-delay:3s}
.orb3{width:200px;height:200px;background:rgba(16,185,129,.05);top:50%;left:50%;animation-delay:6s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-30px)}}

/* NAV */
nav{display:flex;align-items:center;justify-content:space-between;padding:1.2rem 2rem;border-bottom:1px solid var(--bd);background:color-mix(in srgb, var(--bg) 88%, transparent);backdrop-filter:blur(20px);position:sticky;top:0;z-index:100}
.nav-logo{display:flex;align-items:center;gap:10px}
.nav-logo-icon{width:38px;height:38px;border-radius:10px;background:transparent;display:flex;align-items:center;justify-content:center;overflow:hidden}
.nav-logo-txt{font-size:20px;font-weight:800;background:linear-gradient(135deg,var(--p-lite),#67E8F9);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-family:var(--f2)}
.nav-links{display:flex;gap:2rem}
.nav-links a{font-size:14px;font-weight:600;color:var(--tx2);text-decoration:none;transition:color .2s}
.nav-links a:hover{color:var(--tx)}
.nav-btns{display:flex;gap:10px}
.btn-ghost{padding:8px 20px;border:1px solid var(--bd2);color:var(--tx2);background:transparent;border-radius:10px;font-size:14px;font-weight:700;font-family:var(--f);cursor:pointer;transition:all .2s}
.btn-ghost:hover{border-color:var(--p);color:var(--tx)}
.btn-blue{padding:8px 20px;background:linear-gradient(135deg,var(--p),var(--p2));color:#fff;border:none;border-radius:10px;font-size:14px;font-weight:700;font-family:var(--f);cursor:pointer;box-shadow:var(--glow)}

/* HERO */
.hero{position:relative;z-index:1;text-align:center;padding:6rem 2rem 5rem}
.hero-pill{display:inline-flex;align-items:center;gap:8px;background:var(--pl);border:1px solid rgba(37,99,235,.3);color:var(--p);padding:6px 16px;border-radius:20px;font-size:12px;font-weight:700;margin-bottom:2rem}
.hero-pill svg{width:14px;height:14px;stroke-width:2.2}
.hero h1{font-size:clamp(2.2rem,5vw,4rem);font-weight:900;line-height:1.1;margin-bottom:1.5rem}
.hero h1 .grad{background:linear-gradient(135deg,var(--p-lite),#67E8F9,#6EE7B7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero p{font-size:1.05rem;color:var(--tx2);max-width:560px;margin:0 auto 2.5rem;line-height:1.7}
.hero-btns{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-bottom:3rem}
.hero-cta{padding:16px 36px;background:linear-gradient(135deg,var(--p),var(--p2));color:#fff;border:none;border-radius:14px;font-size:16px;font-weight:800;font-family:var(--f);cursor:pointer;box-shadow:0 8px 30px rgba(37,99,235,.4)}
.hero-cta:hover{transform:translateY(-2px)}
.hero-cta2{padding:16px 36px;border:1px solid var(--bd2);color:var(--tx2);background:rgba(255,255,255,.03);border-radius:14px;font-size:16px;font-weight:800;font-family:var(--f);cursor:pointer}
.hero-cta2:hover{border-color:var(--p);color:var(--tx)}
.stats-row{display:flex;justify-content:center;gap:2rem;flex-wrap:wrap}
.stat-item{text-align:center}
.stat-num{font-size:1.8rem;font-weight:900;background:linear-gradient(135deg,var(--p-lite),#67E8F9);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.stat-lbl{font-size:12px;color:var(--tx3);font-weight:600;margin-top:2px}
.stat-tiny{font-size:8px;color:var(--tx3);letter-spacing:.04em}
.stat-div{width:1px;height:40px;background:var(--bd)}

/* SECTIONS */
.sec{padding:5rem 2rem;position:relative;z-index:1}
.sec.alt{background:var(--bg2)}
.sec-tag{text-align:center;font-size:12px;font-weight:800;color:var(--p);text-transform:uppercase;letter-spacing:.15em;margin-bottom:.8rem}
.sec-h{text-align:center;font-size:clamp(1.8rem,3vw,2.6rem);font-weight:900;margin-bottom:.8rem}
.sec-sub{text-align:center;font-size:15px;color:var(--tx2);max-width:520px;margin:0 auto 3rem;line-height:1.7}

/* FEATURES */
.feat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;max-width:1100px;margin:0 auto}
.feat-card{background:var(--card);border-radius:20px;padding:1.8rem;border:1px solid var(--bd);transition:all .3s}
.feat-card:hover{border-color:var(--bd2);transform:translateY(-4px);box-shadow:0 20px 40px rgba(0,0,0,.3)}
.feat-icon{width:52px;height:52px;border-radius:var(--radius-sm);background:var(--pl);border:1px solid rgba(37,99,235,.3);display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:1.2rem;transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.feat-icon svg{width:24px;height:24px;stroke:var(--p);stroke-width:2}
.feat-card:hover .feat-icon{transform:scale(1.08) rotate(-4deg)}
.feat-card h3{font-size:17px;font-weight:800;margin-bottom:.6rem}
.feat-card p{font-size:13px;color:var(--tx2);line-height:1.7}

/* SUBJECTS */
.subj-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem;max-width:900px;margin:0 auto}
.subj-card{background:var(--card);border:1px solid var(--bd);border-radius:16px;padding:1.3rem;text-align:center;transition:all .2s}
.subj-card:hover{border-color:var(--p);background:var(--card2)}
.subj-card-icon{width:44px;height:44px;margin:0 auto .8rem;border-radius:var(--radius-sm);background:var(--pl);display:flex;align-items:center;justify-content:center;transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.subj-card-icon svg{width:20px;height:20px;stroke:var(--p);stroke-width:2}
.subj-card:hover .subj-card-icon{transform:scale(1.08)}
.subj-card h3{font-size:14px;font-weight:800;margin-bottom:.3rem}
.subj-card p{font-size:11px;color:var(--tx3)}

/* PRICING */
.price-row{display:flex;gap:1.5rem;max-width:800px;margin:0 auto;flex-wrap:wrap;justify-content:center}
.pc{flex:1;min-width:240px;background:var(--card);border-radius:24px;padding:2rem;border:1px solid var(--bd);text-align:center;position:relative}
.pc.pop{border-color:var(--p);background:var(--card2);box-shadow:var(--glow)}
.pop-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--p),var(--p2));color:#fff;font-size:11px;font-weight:800;padding:4px 16px;border-radius:20px;white-space:nowrap;display:inline-flex;align-items:center;gap:5px}
.pop-badge svg{width:12px;height:12px;fill:#fff}
.pc-name{font-size:13px;font-weight:700;color:var(--tx2);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.6rem}
.pc-amt{font-size:2.8rem;font-weight:900;margin-bottom:.3rem;font-family:var(--f2)}
.pc-amt sub{font-size:15px;color:var(--tx2);font-weight:600}
.pc-period{font-size:12px;color:var(--tx3);margin-bottom:1.5rem}
.pc-list{list-style:none;margin-bottom:1.8rem;text-align:left}
.pc-list li{font-size:13px;font-weight:600;padding:6px 0;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--bd);color:var(--tx2)}
.pc-list li:last-child{border:none}
.pc-list li::before{content:'✓';color:var(--ok);font-weight:900;flex-shrink:0}
.pc-btn{width:100%;padding:13px;border-radius:12px;font-size:14px;font-weight:800;font-family:var(--f);cursor:pointer;border:none;transition:all .2s}
.pc-btn.o{background:transparent;border:1px solid var(--bd2);color:var(--tx2)}
.pc-btn.o:hover{border-color:var(--p);color:var(--tx)}
.pc-btn.f{background:linear-gradient(135deg,var(--p),var(--p2));color:#fff;box-shadow:var(--glow)}
.disc-note{text-align:center;margin-top:1.5rem;font-size:13px;color:var(--tx3)}
.disc-note span{color:var(--p-lite);font-weight:700}

/* FAQ */
.faq-list{max-width:700px;margin:0 auto}
.faq-item{border:1px solid var(--bd);border-radius:14px;margin-bottom:10px;overflow:hidden}
.faq-item.open{border-color:var(--bd2)}
.faq-q{padding:1.2rem 1.5rem;font-size:15px;font-weight:700;cursor:pointer;display:flex;justify-content:space-between;align-items:center;color:var(--tx)}
.faq-q span{font-size:18px;color:var(--p);transition:transform .3s}
.faq-item.open .faq-q span{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s;padding:0 1.5rem;font-size:14px;color:var(--tx2);line-height:1.7}
.faq-item.open .faq-a{max-height:200px;padding-bottom:1.2rem}

footer{background:var(--bg2);border-top:1px solid var(--bd);padding:3rem 2rem;text-align:center;position:relative;z-index:1}
.f-logo{font-size:22px;font-weight:900;background:linear-gradient(135deg,var(--p-lite),#67E8F9);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.5rem;font-family:var(--f2)}
footer p{font-size:13px;color:var(--tx3);margin-bottom:1rem}
.f-links{display:flex;justify-content:center;gap:2rem;flex-wrap:wrap}
.f-links a{font-size:13px;color:var(--tx3);text-decoration:none;font-weight:600}
.f-links a:hover{color:var(--tx)}

/* ONBOARD */
.onboard-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem;background:var(--bg)}
.ob-card{background:var(--card);border-radius:28px;padding:2.8rem;max-width:440px;width:100%;border:1px solid var(--bd);box-shadow:0 40px 80px rgba(0,0,0,.5);position:relative;z-index:1;animation:popIn .45s cubic-bezier(.34,1.56,.64,1)}
.ob-logo{text-align:center;margin-bottom:2rem}
.ob-logo-icon{width:60px;height:60px;border-radius:18px;background:linear-gradient(135deg,var(--p),var(--p2));display:flex;align-items:center;justify-content:center;margin:0 auto .8rem;font-size:28px;box-shadow:var(--glow)}
.ob-logo-icon svg{width:28px;height:28px;stroke:#fff;stroke-width:2}
.ob-logo-txt{font-size:24px;font-weight:900;background:linear-gradient(135deg,var(--p-lite),#67E8F9);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-family:var(--f2)}
.ob-title{font-size:22px;font-weight:900;text-align:center;margin-bottom:.4rem}
.ob-sub{font-size:14px;color:var(--tx2);text-align:center;margin-bottom:2rem;line-height:1.6}
.form-field{margin-bottom:1.2rem}
.form-field label{display:block;font-size:11px;font-weight:800;color:var(--tx2);margin-bottom:8px;text-transform:uppercase;letter-spacing:.06em}
.form-field input,.form-field select{width:100%;padding:12px 16px;border-radius:12px;border:1px solid var(--bd);background:var(--bg2);color:var(--tx);font-size:15px;font-family:var(--f);font-weight:600;outline:none;transition:border-color .2s}
.form-field input:focus,.form-field select:focus{border-color:var(--p)}
.form-field select option{background:var(--card);color:var(--tx)}
.ob-btn{width:100%;padding:14px;background:linear-gradient(135deg,var(--p),var(--p2));color:#fff;border:none;border-radius:14px;font-size:16px;font-weight:800;font-family:var(--f);cursor:pointer;box-shadow:var(--glow);margin-top:.5rem;transition:transform .15s ease,box-shadow .2s ease,opacity .2s ease}
.ob-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:var(--glow2)}
.ob-btn:disabled{opacity:.65;cursor:wait}
.ob-back{text-align:center;margin-top:1rem;font-size:13px;color:var(--tx3)}
.ob-back a{color:var(--p-lite);font-weight:700;cursor:pointer}

/* APP */
.app-layout{display:flex;min-height:100vh;background:var(--bg)}
.sidebar{width:72px;background:var(--bg2);border-right:1px solid var(--bd);display:flex;flex-direction:column;align-items:center;padding:1rem 0;gap:.4rem;position:fixed;top:0;left:0;height:100vh;z-index:50;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--bd) transparent}
.sidebar::-webkit-scrollbar{width:3px}
.sidebar::-webkit-scrollbar-track{background:transparent}
.sidebar::-webkit-scrollbar-thumb{background:var(--bd);border-radius:3px}
.sidebar::-webkit-scrollbar-thumb:hover{background:var(--p)}
.sidebar-logo{width:42px;height:42px;border-radius:12px;background:transparent;display:flex;align-items:center;justify-content:center;margin-bottom:1rem;overflow:hidden}
.side-btn{width:44px;height:44px;border-radius:12px;border:none;background:transparent;color:var(--tx3);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:20px;transition:all .2s;position:relative;flex-shrink:0}
.side-btn svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.8;fill:none;transition:all .2s;stroke-linecap:round;stroke-linejoin:round}
.side-btn:hover{background:rgba(37,99,235,.1);color:var(--tx2)}
.side-btn:hover svg{stroke:var(--tx2);transform:scale(1.1)}
.side-btn:hover::after{content:attr(title);position:absolute;left:54px;top:50%;transform:translateY(-50%);background:var(--card2);color:var(--tx);font-size:11px;font-weight:700;padding:5px 10px;border-radius:8px;white-space:nowrap;border:1px solid var(--bd);z-index:999;pointer-events:none;font-family:var(--f)}
.side-btn:hover{background:rgba(37,99,235,.15);color:var(--tx)}
.side-btn.on{background:rgba(37,99,235,.15);color:var(--p-lite);box-shadow:0 0 0 1px rgba(37,99,235,.3)}
.side-btn.on svg{stroke:var(--p-lite);filter:drop-shadow(0 0 6px rgba(37,99,235,.7));stroke-width:2}
.side-spacer{flex:1}
.side-avatar{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--p),var(--p2));display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:900;color:#fff;cursor:pointer;margin-bottom:1rem}
.app-main{margin-left:72px;flex:1;display:flex;flex-direction:column;min-height:100vh}
.app-topbar{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.5rem;border-bottom:1px solid var(--bd);background:rgba(6,13,31,.9);backdrop-filter:blur(20px);position:sticky;top:0;z-index:40}
.topbar-left{display:flex;align-items:center;gap:12px}
.xp-badge{display:flex;align-items:center;gap:6px;background:rgba(37,99,235,.1);border:1px solid rgba(37,99,235,.3);color:var(--p-lite);padding:5px 12px;border-radius:20px;font-size:12px;font-weight:800}
.topbar-right{display:flex;align-items:center;gap:8px}
.pro-chip{font-size:11px;font-weight:800;background:linear-gradient(135deg,var(--gold),#F97316);color:#fff;padding:4px 10px;border-radius:20px;cursor:pointer;border:none;font-family:var(--f)}
.free-chip{font-size:11px;font-weight:800;background:rgba(37,99,235,.15);color:var(--p-lite);padding:4px 10px;border-radius:20px}
.tab-panel{display:none;flex:1;overflow-y:auto;padding:1.5rem;min-height:0}
.tab-panel.on{display:block}

/* DASHBOARD */
.dash-welcome{margin-bottom:2rem}
.dash-welcome h2{font-size:1.8rem;font-weight:900;margin-bottom:.3rem}
.dash-welcome p{color:var(--tx2);font-size:14px}
.dash-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;margin-bottom:2rem}
.stat-card{background:var(--card);border-radius:16px;padding:1.2rem;border:1px solid var(--bd);transition:transform .2s ease,border-color .2s ease}
.stat-card:hover{transform:translateY(-2px);border-color:var(--bd2)}
.stat-card-icon{width:36px;height:36px;border-radius:var(--radius-sm);background:var(--pl);display:flex;align-items:center;justify-content:center;margin-bottom:.6rem}
.stat-card-icon svg{width:18px;height:18px;stroke:var(--p);stroke-width:2}
.stat-card-val{font-size:1.6rem;font-weight:900;font-family:var(--f2)}
.stat-card-lbl{font-size:12px;color:var(--tx3);font-weight:600;margin-top:2px}
.xp-bar-wrap{background:var(--card);border-radius:16px;padding:1.2rem;border:1px solid var(--bd);margin-bottom:1.5rem}
.xp-bar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.8rem}
.xp-level{font-size:14px;font-weight:800}
.xp-points{font-size:12px;color:var(--tx3)}
.xp-bar{height:8px;background:rgba(37,99,235,.2);border-radius:4px;overflow:hidden}
.xp-bar-fill{height:100%;background:linear-gradient(90deg,var(--p),var(--p2));border-radius:4px;transition:width 1s ease}
.quick-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:1rem;margin-bottom:2rem}
.qa-btn{background:var(--card);border-radius:16px;padding:1.2rem;border:1px solid var(--bd);cursor:pointer;text-align:center;transition:all .2s;font-family:var(--f)}
.qa-btn:hover{border-color:var(--p);background:var(--card2);transform:translateY(-2px)}
.qa-btn-icon{width:40px;height:40px;border-radius:var(--radius-sm);background:var(--pl);display:flex;align-items:center;justify-content:center;margin:0 auto .5rem}
.qa-btn-icon svg{width:19px;height:19px;stroke:var(--p);stroke-width:2}
.qa-btn-lbl{font-size:12px;font-weight:800;color:var(--tx2)}

/* CHAT */
.chat-layout{display:flex;flex-direction:column;height:calc(100vh - 57px);overflow:hidden;min-height:400px}
.subject-bar{display:flex;gap:6px;padding:.8rem 1.2rem;border-bottom:1px solid var(--bd);background:var(--bg2);overflow-x:auto;scrollbar-width:none;flex-shrink:0}
.subject-bar::-webkit-scrollbar{display:none}
.subj-btn{white-space:nowrap;padding:6px 14px;border-radius:20px;font-size:12px;font-weight:800;cursor:pointer;border:1px solid var(--bd);background:transparent;color:var(--tx3);font-family:var(--f);transition:all .2s;display:inline-flex;align-items:center;gap:5px}
.subj-btn svg{width:12px;height:12px;stroke-width:2.3}
.subj-btn.on{background:rgba(37,99,235,.2);border-color:rgba(37,99,235,.5);color:var(--p-lite);box-shadow:0 0 12px rgba(37,99,235,.2)}
.controls-bar{display:flex;gap:8px;padding:.6rem 1.2rem;border-bottom:1px solid var(--bd);background:var(--bg3);flex-shrink:0;overflow-x:auto;scrollbar-width:none;align-items:center}
.controls-bar::-webkit-scrollbar{display:none}
.mode-btn{padding:4px 12px;border-radius:20px;font-size:11px;font-weight:800;cursor:pointer;border:1px solid var(--bd);background:transparent;color:var(--tx3);font-family:var(--f);transition:all .2s;white-space:nowrap;display:inline-flex;align-items:center;gap:5px}
.mode-btn svg{width:11px;height:11px;stroke-width:2.3}
.mode-btn.on{background:rgba(37,99,235,.2);border-color:rgba(37,99,235,.5);color:var(--p-lite)}
.mode-btn.pr{border-color:rgba(245,158,11,.4);color:var(--gold)}
.mode-btn.pr.on{background:rgba(245,158,11,.15);color:var(--gold)}
.ctrl-sep{width:1px;height:20px;background:var(--bd);flex-shrink:0}
.mode-desc-bar{padding:5px 1.2rem;background:var(--bg);border-bottom:1px solid var(--bd);font-size:11px;font-weight:700;color:var(--tx3);flex-shrink:0}
.mode-desc-bar b{color:var(--p-lite)}
.chat-msgs{flex:1;overflow-y:auto;padding:1.2rem;display:flex;flex-direction:column;gap:1rem}
.msg{display:flex;flex-direction:column;gap:4px;animation:msgIn .2s ease}
@keyframes msgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.msg.u{align-items:flex-end}.msg.ai{align-items:flex-start}
.msg-label{font-size:11px;font-weight:700;color:var(--tx3);padding-left:4px}
.bubble{max-width:85%;padding:12px 16px;border-radius:16px;font-size:14px;line-height:1.75}
.msg.u .bubble{background:linear-gradient(135deg,var(--p),var(--p2));color:#fff;border-bottom-right-radius:4px;font-weight:600}
.msg.ai .bubble{background:var(--card);border:1px solid var(--bd);color:var(--tx);border-bottom-left-radius:4px}
.albl{display:inline-block;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;padding:2px 8px;border-radius:5px;margin:5px 0 3px}
.albl-p{background:rgba(37,99,235,.2);color:var(--p-lite)}
.albl-g{background:rgba(16,185,129,.2);color:var(--ok)}
.albl-o{background:rgba(245,158,11,.2);color:var(--gold)}
.albl-r{background:rgba(239,68,68,.2);color:var(--red)}
.typing-wrap{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.typing-bubble{background:var(--card);border:1px solid var(--bd);border-radius:16px;border-bottom-left-radius:4px;padding:12px 16px;display:flex;align-items:center;gap:5px}
.t-dot{width:7px;height:7px;background:var(--p);border-radius:50%;animation:tdot 1.2s infinite}
.t-dot:nth-child(2){animation-delay:.2s}.t-dot:nth-child(3){animation-delay:.4s}
@keyframes tdot{0%,80%,100%{transform:translateY(0);opacity:.3}40%{transform:translateY(-6px);opacity:1}}
.quick-chips{display:flex;gap:6px;padding:.7rem 1.2rem;background:var(--bg2);border-top:1px solid var(--bd);overflow-x:auto;scrollbar-width:none;flex-shrink:0}
.quick-chips::-webkit-scrollbar{display:none}
.qchip{white-space:nowrap;padding:6px 14px;border-radius:20px;font-size:12px;font-weight:700;cursor:pointer;border:1px solid var(--bd);background:transparent;color:var(--tx3);font-family:var(--f);transition:all .2s}
.qchip:hover{border-color:var(--p);color:var(--p-lite)}
.file-bar{display:none;align-items:center;gap:8px;padding:6px 1.2rem;background:rgba(37,99,235,.1);border-top:1px solid rgba(37,99,235,.2);flex-shrink:0}
.file-bar.on{display:flex}
.file-bar-name{font-size:12px;font-weight:700;color:var(--p-lite);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-rm{background:none;border:none;color:var(--p-lite);cursor:pointer;font-size:14px;padding:0 4px;display:flex;align-items:center}
.file-rm svg{width:14px;height:14px}
.inp-area{padding:.8rem 1.2rem;border-top:1px solid var(--bd);background:var(--bg2);display:flex;gap:8px;align-items:flex-end;flex-shrink:0}
.inp-icon-btn{width:40px;height:40px;border-radius:11px;border:1px solid var(--bd);background:transparent;color:var(--tx3);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s}
.inp-icon-btn:hover{border-color:var(--p);color:var(--p-lite)}
#msgInput{flex:1;padding:10px 14px;border-radius:12px;border:1px solid var(--bd);background:var(--surface2);color:var(--tx);font-size:14px;font-family:var(--f);font-weight:600;resize:none;outline:none;max-height:100px;min-height:42px;line-height:1.5}
#msgInput:focus{border-color:var(--p)}
#msgInput::placeholder{color:var(--tx3)}
.send-btn{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,var(--p),var(--p2));border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:var(--glow)}
.send-btn:disabled{opacity:.35;cursor:default}

/* FLASHCARDS */
.fc-layout{padding:1.2rem;max-width:600px;margin:0 auto}
.fc-upload{background:var(--card);border-radius:16px;padding:1.3rem;border:1px solid var(--bd);margin-bottom:1.2rem}
.fc-upload h3{font-size:13px;font-weight:800;margin-bottom:.8rem}
.fc-drop{border:2px dashed var(--bd2);border-radius:12px;padding:1rem;text-align:center;cursor:pointer;margin-bottom:.6rem}
.fc-drop:hover{border-color:var(--p)}
.fc-drop p{font-size:12px;color:var(--tx3);font-weight:600;margin-top:.3rem}
#fcNotes{width:100%;padding:10px 14px;border-radius:12px;border:1px solid var(--bd);background:var(--surface2);color:var(--tx);font-size:13px;font-family:var(--f);resize:none;outline:none;height:70px;line-height:1.5;margin-bottom:.5rem}
#fcNotes:focus{border-color:var(--p)}
#fcNotes::placeholder{color:var(--tx3)}
.fc-count-row{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:.6rem}
.fc-cnt-btn{padding:5px 12px;border-radius:20px;border:1px solid var(--bd);background:transparent;color:var(--tx2);font-size:12px;font-weight:800;cursor:pointer;font-family:var(--f);transition:all .2s}
.fc-cnt-btn.on{background:rgba(37,99,235,.2);border-color:rgba(37,99,235,.5);color:var(--p-lite)}
.fc-btn-row{display:flex;gap:8px}
.fc-act-btn{flex:1;padding:14px 8px;border-radius:14px;font-size:13px;font-weight:800;font-family:var(--f);cursor:pointer;border:none}
.fc-act-btn.pri{background:linear-gradient(135deg,var(--p),var(--p2));color:#fff}
.fc-act-btn.sec{background:rgba(255,255,255,.05);border:1px solid var(--bd);color:var(--tx3)}
.fc-act-btn:disabled{opacity:.4;cursor:default}
.fc-body{min-height:200px}
.fc-card{width:100%;max-width:460px;height:200px;perspective:1000px;cursor:pointer;margin:0 auto}
.fc-card-inner{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .5s}
.fc-card.flip .fc-card-inner{transform:rotateY(180deg)}
.fc-front,.fc-back{position:absolute;inset:0;border-radius:20px;display:flex;align-items:center;justify-content:center;padding:2rem;text-align:center;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.fc-front{background:linear-gradient(135deg,#0369A1,var(--p));color:#fff;border:1px solid rgba(37,99,235,.3)}
.fc-back{background:linear-gradient(135deg,#065F46,var(--ok));color:#fff;transform:rotateY(180deg)}
.fc-front p,.fc-back p{font-size:16px;font-weight:700;line-height:1.5}

/* MODAL */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.8);z-index:500;align-items:center;justify-content:center;padding:1rem;backdrop-filter:blur(8px);overflow-y:auto}
.modal-overlay.on{display:flex}
.modal-box{background:var(--card);border-radius:20px;padding:1.5rem;max-width:380px;width:100%;border:1px solid var(--bd);max-height:90vh;overflow-y:auto;margin:auto}
.modal-box h2{font-size:20px;font-weight:900;text-align:center;margin-bottom:4px}
.modal-box .m-sub{font-size:13px;color:var(--tx2);text-align:center;margin-bottom:1.2rem}
.modal-feat-list{list-style:none;margin-bottom:1.2rem}
.modal-feat-list li{font-size:13px;font-weight:600;padding:6px 0;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--bd);color:var(--tx2)}
.modal-feat-list li:last-child{border:none}
.mfl-icon{width:24px;height:24px;background:rgba(37,99,235,.15);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;color:var(--p-lite);font-weight:900}
.mfl-icon svg{width:14px;height:14px;stroke-width:2.3}
.price-highlight{background:rgba(37,99,235,.1);border:1px solid rgba(37,99,235,.3);border-radius:12px;padding:1rem;margin-bottom:1.2rem;text-align:center}
.ph-main{font-size:16px;font-weight:800;color:var(--p-lite)}
.ph-sub{font-size:12px;color:var(--tx3);margin-top:.3rem}
.modal-disc{text-align:center;font-size:12px;color:var(--tx3);margin-bottom:1rem}
.modal-disc span{color:var(--p-lite);font-weight:700}
.modal-go{width:100%;padding:13px;background:linear-gradient(135deg,var(--p),var(--p2));color:#fff;border:none;border-radius:12px;font-size:15px;font-weight:800;font-family:var(--f);cursor:pointer;margin-bottom:8px}
.modal-skip{width:100%;padding:10px;border:1px solid var(--bd);background:transparent;color:var(--tx3);border-radius:12px;font-size:13px;font-weight:700;cursor:pointer;font-family:var(--f)}
.secret-input{width:100%;padding:10px 14px;border-radius:10px;border:1px solid var(--bd);background:var(--surface2);color:var(--tx);font-size:13px;font-family:var(--f);outline:none;text-align:center;margin-top:.8rem}
.secret-apply-btn{width:100%;margin-top:6px;padding:9px;border:1px solid var(--bd2);background:transparent;color:var(--tx3);border-radius:10px;font-size:12px;font-weight:700;cursor:pointer;font-family:var(--f)}

/* XP POPUP */
.xp-popup{position:fixed;top:80px;right:20px;left:auto;max-width:calc(100vw - 40px);background:linear-gradient(135deg,var(--p),var(--p2));color:#fff;padding:10px 20px;border-radius:14px;font-size:14px;font-weight:800;z-index:600;transform:translateX(200px);transition:transform .3s}
.xp-popup.show{transform:translateX(0)}

/* CONFETTI */
.confetti-p{position:fixed;width:8px;height:8px;border-radius:2px;pointer-events:none;z-index:700;animation:cf 3s ease-in forwards}
@keyframes cf{0%{transform:translateY(-20px) rotate(0);opacity:1}100%{transform:translateY(100vh) rotate(720deg);opacity:0}}

@media(max-width:768px){.nav-links{display:none}.sidebar{width:60px}.app-main{margin-left:60px}}

@media(max-width:480px){
 nav{padding:.8rem 1rem;gap:6px}
 .nav-logo-txt{font-size:16px;white-space:nowrap}
 .nav-logo-icon{width:30px;height:30px;flex-shrink:0}
 .nav-btns{gap:6px;flex-shrink:0}
 .btn-ghost,.btn-blue{padding:7px 12px;font-size:12.5px;white-space:nowrap}
 .theme-toggle{width:32px;height:32px;flex-shrink:0}
 .theme-toggle svg{width:15px;height:15px}
}

/* ══════════════════════════════
 MOBILE VERTICAL OPTIMIZATION
══════════════════════════════ */
@media(max-width:600px){
 /* Hide sidebar completely on mobile */
 .sidebar{display:none !important}
 
 /* Full width main content */
 .app-main{margin-left:0 !important;width:100% !important;padding-bottom:65px}
 
 /* Topbar */
 .topbar{padding:.6rem .8rem}
 .topbar-title{font-size:14px}
 .freeChip{display:none}
 
 /* All panels full width */
 .tab-panel{padding:.8rem !important}
 .ep-layout,.sim-layout,.mock-layout,.mb-layout,.sp-layout,.lb-layout,
 .drug-layout,.calc-layout,.pdf-layout,.pod-layout,.snap-layout,
 .lec-layout,.les-layout,.yt-layout,.lib-layout,.settings-layout,
 .deck-layout,.imp-layout,.srs-layout,.pub-layout,.ana-layout{
 padding:.8rem !important;max-width:100% !important
 }

 /* Dashboard */
 .dash-stats{grid-template-columns:repeat(2,1fr) !important;gap:.6rem}
 .quick-actions{grid-template-columns:repeat(3,1fr) !important;gap:.5rem}
 .qa-btn{padding:.6rem .3rem}
 .qa-btn-icon{font-size:20px}
 .qa-btn-lbl{font-size:10px}
 .today-goals{grid-template-columns:repeat(3,1fr) !important}
 .today-actions{grid-template-columns:repeat(2,1fr) !important}
 .rank-card{flex-direction:column;text-align:center}

 /* Chat */
 .chat-layout{height:calc(100vh - 57px) !important;height:calc(100dvh - 57px) !important}
 .chat-msgs{flex:1;min-height:0;overflow-y:auto}
 .chat-input-area{flex-shrink:0;padding:.6rem}
 .mode-btns-row{overflow-x:auto;flex-wrap:nowrap !important;scrollbar-width:none;-webkit-overflow-scrolling:touch}
 .mode-btns-row::-webkit-scrollbar{display:none}
 .quick-chips{overflow-x:auto;flex-wrap:nowrap !important;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:.4rem .6rem}
 .quick-chips::-webkit-scrollbar{display:none}
 .msg-input-row{gap:6px}
 #msgInput{font-size:16px} /* Prevents iOS zoom */

 /* Flashcards */
 .fc-card{min-height:180px;padding:1.2rem}
 .fc-act-btn{padding:14px 6px;font-size:12px}
 .fc-btn-row{gap:6px}
 .fc-nav-btn{width:48px;height:48px}
 .fc-count-grid{grid-template-columns:repeat(2,1fr) !important;gap:6px}

 /* Exam prep */
 .ep-grid{grid-template-columns:repeat(2,1fr) !important;gap:6px}
 .ep-subj-grid{grid-template-columns:repeat(2,1fr) !important}
 .ep-result-stats{grid-template-columns:repeat(2,1fr) !important}
 .ep-opts-row{gap:6px}
 .ep-opt{padding:6px 10px;font-size:11px}

 /* Calculators */
 .calc-grid{grid-template-columns:repeat(2,1fr) !important;gap:6px}

 /* Mock test */
 .mock-exam-grid{grid-template-columns:repeat(2,1fr) !important;gap:6px}

 /* Simulation */
 .sim-type-grid{grid-template-columns:repeat(2,1fr) !important;gap:6px}
 .sim-vitals{grid-template-columns:repeat(3,1fr) !important}

 /* SRS */
 .srs-stats{grid-template-columns:repeat(2,1fr) !important}
 .srs-rate-row{grid-template-columns:repeat(2,1fr) !important;gap:8px}
 .srs-rate-btn{padding:14px 8px;font-size:13px}

 /* Analytics */
 .ana-grid{grid-template-columns:repeat(2,1fr) !important}

 /* Deck manager */
 .deck-grid{grid-template-columns:1fr !important}

 /* Landing page */
 .hero-title{font-size:1.8rem !important}
 .hero-sub{font-size:13px !important}
 .features-grid{grid-template-columns:1fr !important}
 .stats-row{gap:1rem}
 .lp-counter-row{gap:1.2rem}
 .sec-h{font-size:1.3rem}

 /* Leaderboard */
 .lb-item{gap:8px}
 .lb-xp{font-size:12px}

 /* Pro modal */
 .modal-box{padding:1.2rem;max-height:88vh;overflow-y:auto;margin:.5rem}
 .price-highlight{padding:.8rem}

 /* Drug checker */
 .drug-tabs{gap:4px}
 .drug-tab{font-size:11px;padding:8px 6px}

 /* Podcast */
 .pod-controls{gap:10px}
 .pod-play-btn{width:50px;height:50px;font-size:20px}
 .pod-ctrl-btn{width:36px;height:36px}

 /* Import center */
 .imp-source-grid{grid-template-columns:repeat(3,1fr) !important;gap:6px}

 /* Public decks tabs */
 .pub-tabs{gap:4px}
 .pub-tab{font-size:11px;padding:8px 4px}

 /* Share card */
 .share-card{margin:.5rem;padding:1.5rem}
 .share-card-stats{grid-template-columns:repeat(3,1fr);gap:.5rem}

 /* Onboard page */
 .ob-card{margin:.5rem;padding:1.2rem}

 /* Topbar buttons */
 .topbar-right{gap:6px}
 #shareBtn{width:32px;height:32px;font-size:14px}

 /* Language selector */
 .lang-selector{gap:5px}
 .lang-btn{padding:5px 8px;font-size:11px}

 /* General text */
 .today-card{padding:1rem}
 .today-continue-btn{padding:12px}
 .srs-card{padding:1.2rem}
 .srs-card-front{font-size:14px}
}

/* Fix iOS safe area */
@supports(padding-bottom: env(safe-area-inset-bottom)){
 .bottom-nav{padding-bottom:calc(env(safe-area-inset-bottom) + 4px)}
 .app-main{padding-bottom:calc(65px + env(safe-area-inset-bottom))}
}

/* Smooth scrolling on mobile */
@media(max-width:600px){
 .tab-panel{-webkit-overflow-scrolling:touch;overflow-y:auto}
 *{-webkit-tap-highlight-color:transparent}
 input, textarea, select{font-size:16px !important} /* Prevents iOS zoom on focus */
}


/* ── STREAKS & MISSIONS ── */
.missions{background:var(--card);border-radius:16px;padding:1.2rem;border:1px solid var(--bd);margin-bottom:1.5rem}
.missions h3{font-size:14px;font-weight:800;margin-bottom:1rem;display:flex;align-items:center;gap:8px}
.mission-item{display:flex;align-items:center;gap:12px;padding:.7rem 0;border-bottom:1px solid var(--bd)}
.mission-item:last-child{border:none}
.mission-icon{font-size:18px;flex-shrink:0}
.mission-info{flex:1}
.mission-name{font-size:13px;font-weight:700;color:var(--tx)}
.mission-prog{font-size:11px;color:var(--tx3);margin-top:2px}
.mission-xp{font-size:11px;font-weight:800;color:var(--p-lite);background:rgba(37,99,235,.15);padding:2px 8px;border-radius:6px}
.ach-badge{background:var(--card);border-radius:14px;padding:.8rem 1rem;border:1px solid var(--bd);display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--tx2);transition:all .2s}
.ach-badge.earned{border-color:rgba(245,158,11,.4);background:rgba(245,158,11,.08);color:var(--gold)}
.ach-badge-icon{font-size:18px}
.achievement-row{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:2rem}
.streak-badge{display:flex;align-items:center;gap:6px;background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.3);color:var(--gold);padding:5px 12px;border-radius:20px;font-size:12px;font-weight:800}

/* ── QUIZ GAME ── */
.qg-wrap{width:100%;max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:0;padding:1rem}
.qg-screen{display:none}.qg-screen.on{display:block}
.qg-subject-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:1.2rem}
.qg-subj-card{background:var(--card2);border:1px solid var(--bd);border-radius:12px;padding:.8rem;text-align:center;cursor:pointer;transition:all .2s}
.qg-subj-card:hover,.qg-subj-card.on{border-color:var(--p);background:rgba(37,99,235,.15)}
.qg-subj-icon{font-size:22px;margin-bottom:.3rem;display:flex;align-items:center;justify-content:center}
.qg-subj-icon svg{width:20px;height:20px;stroke:var(--tx2);stroke-width:1.8}
.qg-subj-card.on .qg-subj-icon svg{stroke:var(--p-lite)}
.qg-subj-name{font-size:11px;font-weight:800;color:var(--tx2)}
.qg-subj-card.on .qg-subj-name{color:var(--p-lite)}
.qg-diff-row{display:flex;gap:6px;margin-bottom:1.2rem}
.qg-diff-btn{flex:1;padding:8px 4px;border-radius:20px;border:1px solid var(--bd);background:transparent;color:var(--tx2);font-size:12px;font-weight:800;cursor:pointer;font-family:var(--f);transition:all .2s;text-align:center}
.qg-diff-btn.on{background:rgba(37,99,235,.2);border-color:rgba(37,99,235,.5);color:var(--p-lite)}
.qg-start-btn{width:100%;padding:14px;background:linear-gradient(135deg,var(--p),var(--p2));color:#fff;border:none;border-radius:12px;font-size:15px;font-weight:900;font-family:var(--f);cursor:pointer;margin-bottom:.8rem}
.qg-start-btn:disabled{opacity:.4;cursor:default}
.qg-pro-note{font-size:12px;color:var(--tx3);text-align:center}
.qg-pro-note span{color:var(--gold);font-weight:800}
.qg-topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.qg-lives-row{display:flex;gap:3px}
.qg-heart{font-size:20px;transition:all .3s;color:var(--red);display:inline-flex}
.qg-heart.lost{filter:grayscale(1);opacity:.3;transform:scale(.8)}
.qg-q-counter{font-size:12px;font-weight:800;color:var(--tx2);background:var(--card);padding:5px 12px;border-radius:20px;border:1px solid var(--bd)}
.qg-progress{height:5px;background:rgba(37,99,235,.2);border-radius:3px;overflow:hidden;margin-bottom:1rem}
.qg-progress-fill{height:100%;background:linear-gradient(90deg,var(--p),var(--p2));border-radius:3px;transition:width .6s ease}
.qg-timer-wrap{display:flex;align-items:center;justify-content:center;margin-bottom:1rem;position:relative}
.qg-timer-ring{transform:rotate(-90deg)}
.qg-timer-text{position:absolute;font-size:18px;font-weight:900;color:var(--tx)}
.qg-timer-text.urgent{color:var(--red);animation:qgpulse 1s infinite}
@keyframes qgpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
.qg-badge{font-size:11px;font-weight:800;color:var(--p-lite);background:rgba(37,99,235,.15);padding:3px 10px;border-radius:20px;display:inline-block;margin-bottom:.6rem}
.qg-q-card{background:var(--card);border:1px solid var(--bd);border-radius:16px;padding:1.5rem;margin-bottom:1rem;text-align:center;min-height:80px;display:flex;align-items:center;justify-content:center}
.qg-q-text{font-size:16px;font-weight:700;line-height:1.5;color:var(--tx)}
.qg-hint-box{background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.3);border-radius:10px;padding:.7rem 1rem;margin-bottom:.8rem;font-size:13px;color:var(--gold);display:none}
.qg-hint-box.on{display:block}
.qg-opts{display:flex;flex-direction:column;gap:8px;margin-bottom:1rem}
.qg-opt{padding:12px 16px;border-radius:12px;border:1.5px solid var(--bd);background:var(--card);color:var(--tx);font-size:14px;font-weight:700;cursor:pointer;font-family:var(--f);text-align:left;transition:all .15s;display:flex;align-items:center;gap:10px}
.qg-opt:hover:not(:disabled){border-color:rgba(37,99,235,.5);background:rgba(37,99,235,.1)}
.qg-opt-letter{width:26px;height:26px;border-radius:7px;background:rgba(37,99,235,.15);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;color:var(--p-lite);flex-shrink:0}
.qg-opt.sel{border-color:var(--p);background:rgba(37,99,235,.2)}
.qg-opt.cor{border-color:var(--ok);background:rgba(16,185,129,.15);color:var(--ok)}
.qg-opt.cor .qg-opt-letter{background:rgba(16,185,129,.2);color:var(--ok)}
.qg-opt.wrg{border-color:var(--red);background:rgba(239,68,68,.1);color:var(--red)}
.qg-opt.wrg .qg-opt-letter{background:rgba(239,68,68,.15);color:var(--red)}
.qg-opt:disabled{cursor:default}
.qg-bottom{display:flex;align-items:center;gap:8px}
.qg-hint-btn{padding:9px 16px;border-radius:10px;border:1px solid rgba(245,158,11,.4);background:rgba(245,158,11,.1);color:var(--gold);font-size:12px;font-weight:800;cursor:pointer;font-family:var(--f);display:flex;align-items:center;gap:5px}
.qg-hint-btn:disabled{opacity:.3;cursor:default}
.qg-hint-chip{font-size:11px;background:rgba(245,158,11,.2);padding:2px 6px;border-radius:8px}
.qg-next-btn{flex:1;padding:12px;background:linear-gradient(135deg,var(--p),var(--p2));color:#fff;border:none;border-radius:10px;font-size:14px;font-weight:800;font-family:var(--f);cursor:pointer;display:none}
.qg-next-btn.on{display:block}
.qg-result-card{background:var(--card);border:1px solid var(--bd);border-radius:20px;padding:2rem;text-align:center;max-width:420px;margin:0 auto}
.qg-result-emoji{font-size:56px;margin-bottom:.8rem;display:flex;align-items:center;justify-content:center}
.qg-result-title{font-size:1.6rem;font-weight:900;margin-bottom:.3rem}
.qg-result-sub{font-size:13px;color:var(--tx2);margin-bottom:1.5rem}
.qg-stats-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:1.5rem}
.qg-stat{background:rgba(37,99,235,.1);border:1px solid rgba(37,99,235,.2);border-radius:12px;padding:.8rem;text-align:center}
.qg-stat-val{font-size:1.4rem;font-weight:900;color:var(--p-lite)}
.qg-stat-lbl{font-size:10px;color:var(--tx3);font-weight:700;margin-top:.2rem}
.qg-again-btn{width:100%;padding:13px;background:linear-gradient(135deg,var(--p),var(--p2));color:#fff;border:none;border-radius:12px;font-size:14px;font-weight:800;font-family:var(--f);cursor:pointer;margin-bottom:8px}
.qg-back-btn{width:100%;padding:11px;border:1px solid var(--bd);background:transparent;color:var(--tx2);border-radius:12px;font-size:13px;font-weight:700;font-family:var(--f);cursor:pointer}
.qg-feedback{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:150;pointer-events:none;opacity:0;transition:opacity .15s}
.qg-feedback.show{opacity:1}
.qg-feedback-inner{font-size:4rem;animation:qgfb .4s cubic-bezier(.34,1.56,.64,1)}
@keyframes qgfb{from{transform:scale(0)}to{transform:scale(1)}}
.qg-streak-banner{position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(100px);background:rgba(245,158,11,.15);border:1px solid rgba(245,158,11,.4);color:var(--gold);padding:.7rem 1.8rem;border-radius:12px;font-size:13px;font-weight:800;z-index:150;transition:transform .3s;white-space:nowrap}
.qg-streak-banner.show{transform:translateX(-50%) translateY(0)}
.qg-perfect-banner{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);background:linear-gradient(135deg,var(--gold),#F97316);color:#fff;padding:1rem 2.5rem;border-radius:16px;font-size:1.5rem;font-weight:900;z-index:200;transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.qg-perfect-banner.show{transform:translate(-50%,-50%) scale(1)}

/* ── LECTURE ── */
.lec-layout{padding:1.2rem;max-width:600px;margin:0 auto}
.lec-hero{background:linear-gradient(135deg,rgba(37,99,235,.2),rgba(6,182,212,.1));border:1px solid rgba(37,99,235,.3);border-radius:20px;padding:1.5rem;text-align:center;margin-bottom:1.2rem}
.lec-hero h2{font-size:1.3rem;font-weight:900;margin-bottom:.3rem}
.lec-hero p{font-size:13px;color:var(--tx2)}
.lec-tabs{display:flex;gap:6px;margin-bottom:1.2rem}
.lec-tab{flex:1;padding:10px;border-radius:12px;border:1px solid var(--bd);background:transparent;color:var(--tx2);font-size:13px;font-weight:800;cursor:pointer;font-family:var(--f);text-align:center;transition:all .2s}
.lec-tab.on{background:rgba(37,99,235,.2);border-color:rgba(37,99,235,.5);color:var(--p-lite)}
.lec-input-area{background:var(--card);border-radius:16px;padding:1.3rem;border:1px solid var(--bd);margin-bottom:1rem}
.lec-input-area h3{font-size:13px;font-weight:800;margin-bottom:.8rem;color:var(--tx)}
.rec-btn{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,var(--red),#DC2626);border:none;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;margin:0 auto 1rem;font-size:28px;transition:all .2s;box-shadow:0 4px 20px rgba(239,68,68,.3)}
.rec-btn.recording{animation:recPulse 1.5s infinite}
@keyframes recPulse{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.4)}50%{box-shadow:0 0 0 15px rgba(239,68,68,.0)}}
.rec-status{text-align:center;font-size:13px;font-weight:700;color:var(--tx2);margin-bottom:.8rem}
.rec-timer{text-align:center;font-size:1.8rem;font-weight:900;color:var(--red);display:none}
.rec-timer.on{display:block}
.rec-waveform{display:flex;align-items:center;justify-content:center;gap:3px;height:40px;margin-bottom:1rem}
.rec-bar{width:4px;border-radius:2px;background:var(--p);transition:height .1s}
.upload-audio-btn{width:100%;padding:10px;border:2px dashed var(--bd2);border-radius:12px;background:transparent;color:var(--tx2);font-size:13px;font-weight:700;cursor:pointer;font-family:var(--f);text-align:center}
.lec-textarea{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--bd);background:var(--surface2);color:var(--tx);font-size:13px;font-family:var(--f);resize:none;outline:none;height:150px;line-height:1.6}
.lec-textarea:focus{border-color:var(--p)}
.lec-textarea::placeholder{color:var(--tx3)}
.lec-output{background:var(--card);border-radius:16px;padding:1.3rem;border:1px solid var(--bd);margin-bottom:1rem;display:none}
.lec-output.on{display:block}
.lec-output-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.lec-section{margin-bottom:1rem}
.lec-section-title{font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;padding:3px 10px;border-radius:5px;display:inline-block;margin-bottom:.6rem}
.lec-section-title.purple{background:rgba(37,99,235,.2);color:var(--p-lite)}
.lec-section-title.green{background:rgba(16,185,129,.2);color:var(--ok)}
.lec-section-title.gold{background:rgba(245,158,11,.2);color:var(--gold)}
.lec-section-title.red{background:rgba(239,68,68,.2);color:var(--red)}
.lec-content{font-size:13px;color:var(--tx2);line-height:1.8}
.lec-content .point{display:flex;gap:8px;margin-bottom:.4rem}
.lec-content .point::before{content:"•";color:var(--p-lite);flex-shrink:0}
.lec-summarise-btn{width:100%;padding:13px;background:linear-gradient(135deg,var(--p),var(--p2));color:#fff;border:none;border-radius:12px;font-size:15px;font-weight:800;font-family:var(--f);cursor:pointer;margin-bottom:.8rem}
.lec-summarise-btn:disabled{opacity:.5;cursor:default}
.lec-action-row{display:flex;gap:8px;margin-top:.8rem}
.lec-action-btn{flex:1;padding:9px;border-radius:10px;font-size:12px;font-weight:800;font-family:var(--f);cursor:pointer;border:1px solid var(--bd);background:transparent;color:var(--tx2)}
.lec-action-btn:hover{border-color:var(--p);color:var(--p-lite)}
.lec-loading{text-align:center;padding:2rem;display:none}
.lec-loading.on{display:block}
.lec-loading-dots{display:flex;justify-content:center;gap:6px;margin-bottom:.8rem}
.lec-dot{width:10px;height:10px;border-radius:50%;background:var(--p);animation:lecdot 1.2s infinite}
.lec-dot:nth-child(2){animation-delay:.2s}.lec-dot:nth-child(3){animation-delay:.4s}
@keyframes lecdot{0%,80%,100%{transform:translateY(0);opacity:.3}40%{transform:translateY(-8px);opacity:1}}

/* ── LESSON ── */
.les-layout{padding:1.2rem;max-width:600px;margin:0 auto}
.les-hero{background:linear-gradient(135deg,rgba(16,185,129,.15),rgba(5,150,105,.1));border:1px solid rgba(16,185,129,.3);border-radius:20px;padding:1.5rem;text-align:center;margin-bottom:1.2rem}
.les-hero h2{font-size:1.3rem;font-weight:900;margin-bottom:.3rem}
.les-hero p{font-size:13px;color:var(--tx2)}
.les-input-card{background:var(--card);border-radius:16px;padding:1.3rem;border:1px solid var(--bd);margin-bottom:1rem}
.les-input-card h3{font-size:13px;font-weight:800;margin-bottom:.8rem}
.les-textarea{width:100%;padding:10px 14px;border-radius:12px;border:1px solid var(--bd);background:var(--surface2);color:var(--tx);font-size:13px;font-family:var(--f);resize:none;outline:none;height:120px;line-height:1.6}
.les-textarea:focus{border-color:var(--ok)}
.les-textarea::placeholder{color:var(--tx3)}
.les-style-row{display:flex;gap:6px;margin-bottom:.8rem;flex-wrap:wrap}
.les-style-btn{padding:6px 14px;border-radius:20px;border:1px solid var(--bd);background:transparent;color:var(--tx2);font-size:12px;font-weight:800;cursor:pointer;font-family:var(--f);transition:all .2s}
.les-style-btn.on{background:rgba(16,185,129,.15);border-color:rgba(16,185,129,.4);color:var(--ok)}
.les-start-btn{width:100%;padding:13px;background:linear-gradient(135deg,var(--ok),#059669);color:#fff;border:none;border-radius:12px;font-size:15px;font-weight:800;font-family:var(--f);cursor:pointer;margin-bottom:.8rem}
.les-start-btn:disabled{opacity:.5;cursor:default}
.les-steps-wrap{display:none}
.les-steps-wrap.on{display:block}
.les-step-card{background:var(--card);border:1px solid var(--bd);border-radius:16px;padding:1.3rem;margin-bottom:.8rem;opacity:0;transform:translateY(10px);transition:all .3s}
.les-step-card.visible{opacity:1;transform:translateY(0)}
.les-step-header{display:flex;align-items:center;gap:10px;margin-bottom:.8rem}
.les-step-num{width:32px;height:32px;border-radius:10px;background:linear-gradient(135deg,var(--ok),#059669);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:900;color:#fff;flex-shrink:0}
.les-step-title{font-size:14px;font-weight:800;color:var(--tx)}
.les-step-body{font-size:13px;color:var(--tx2);line-height:1.8}
.les-next-btn{padding:9px 20px;border-radius:10px;background:linear-gradient(135deg,var(--ok),#059669);color:#fff;border:none;font-size:13px;font-weight:800;cursor:pointer;font-family:var(--f);margin-top:.8rem}
.les-progress{height:5px;background:rgba(16,185,129,.2);border-radius:3px;overflow:hidden;margin-bottom:1rem}
.les-progress-fill{height:100%;background:linear-gradient(90deg,var(--ok),#34D399);border-radius:3px;transition:width .5s ease}
.les-complete{background:linear-gradient(135deg,rgba(16,185,129,.15),rgba(5,150,105,.1));border:1px solid rgba(16,185,129,.3);border-radius:16px;padding:1.5rem;text-align:center;display:none}
.les-complete.on{display:block}
.les-loading{text-align:center;padding:2rem;display:none}
.les-loading.on{display:block}

/* ── YOUTUBE ── */
.yt-layout{padding:1.2rem;max-width:600px;margin:0 auto}
.yt-hero{background:linear-gradient(135deg,rgba(239,68,68,.15),rgba(220,38,38,.1));border:1px solid rgba(239,68,68,.3);border-radius:20px;padding:1.5rem;text-align:center;margin-bottom:1.2rem}
.yt-hero h2{font-size:1.3rem;font-weight:900;margin-bottom:.3rem}
.yt-hero p{font-size:13px;color:var(--tx2)}
.yt-input-card{background:var(--card);border-radius:16px;padding:1.3rem;border:1px solid var(--bd);margin-bottom:1rem}
.yt-url-wrap{display:flex;gap:8px;margin-bottom:.8rem}
.yt-url-input{flex:1;padding:11px 14px;border-radius:12px;border:1px solid var(--bd);background:var(--surface2);color:var(--tx);font-size:13px;font-family:var(--f);outline:none;font-weight:600}
.yt-url-input:focus{border-color:var(--red)}
.yt-url-input::placeholder{color:var(--tx3)}
.yt-paste-btn{padding:11px 16px;border-radius:12px;border:1px solid var(--bd);background:transparent;color:var(--tx2);font-size:13px;font-weight:800;cursor:pointer;font-family:var(--f);white-space:nowrap}
.yt-preview{background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.2);border-radius:12px;padding:1rem;margin-bottom:.8rem;display:none;align-items:center;gap:10px}
.yt-preview.on{display:flex}
.yt-note{background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.2);border-radius:10px;padding:.8rem 1rem;font-size:12px;color:var(--gold);margin-bottom:.8rem;line-height:1.6}
.yt-summarise-btn{width:100%;padding:13px;background:linear-gradient(135deg,#EF4444,#DC2626);color:#fff;border:none;border-radius:12px;font-size:15px;font-weight:800;font-family:var(--f);cursor:pointer;margin-bottom:.8rem}
.yt-summarise-btn:disabled{opacity:.5;cursor:default}
.yt-output{background:var(--card);border-radius:16px;padding:1.3rem;border:1px solid var(--bd);display:none}
.yt-output.on{display:block}
.yt-loading{text-align:center;padding:2rem;display:none}
.yt-loading.on{display:block}
.yt-loading-dots{display:flex;justify-content:center;gap:6px;margin-bottom:.8rem}
.yt-dot{width:10px;height:10px;border-radius:50%;background:var(--red);animation:ytdot 1.2s infinite}
.yt-dot:nth-child(2){animation-delay:.2s}.yt-dot:nth-child(3){animation-delay:.4s}
@keyframes ytdot{0%,80%,100%{transform:translateY(0);opacity:.3}40%{transform:translateY(-8px);opacity:1}}

/* ── LIBRARY ── */
.lib-layout{padding:1.2rem;max-width:700px;margin:0 auto}
.lib-hero{background:linear-gradient(135deg,rgba(37,99,235,.2),rgba(6,182,212,.1));border:1px solid rgba(37,99,235,.3);border-radius:20px;padding:1.2rem 1.5rem;display:flex;align-items:center;justify-content:space-between;margin-bottom:1.2rem;flex-wrap:wrap;gap:.8rem}
.lib-hero h2{font-size:1.2rem;font-weight:900;margin-bottom:.2rem}
.lib-hero p{font-size:12px;color:var(--tx2)}
.lib-filter-row{display:flex;gap:6px;margin-bottom:1.2rem;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.lib-filter-row::-webkit-scrollbar{display:none}
.lib-filter{padding:6px 16px;border-radius:20px;border:1px solid var(--bd);background:transparent;color:var(--tx2);font-size:12px;font-weight:800;cursor:pointer;font-family:var(--f);transition:all .2s;white-space:nowrap}
.lib-filter.on{background:rgba(37,99,235,.2);border-color:rgba(37,99,235,.5);color:var(--p-lite)}
.lib-grid{display:flex;flex-direction:column;gap:.8rem}
.lib-item{background:var(--card);border:1px solid var(--bd);border-radius:16px;padding:1.2rem;transition:all .2s;cursor:pointer}
.lib-item:hover{border-color:var(--bd2);transform:translateY(-2px)}
.lib-item-header{display:flex;align-items:flex-start;gap:10px;margin-bottom:.6rem}
.lib-item-icon{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.lib-item-icon.flashcard{background:rgba(37,99,235,.2)}
.lib-item-icon.quiz{background:rgba(245,158,11,.15)}
.lib-item-icon.lesson{background:rgba(16,185,129,.15)}
.lib-item-icon.lecture{background:rgba(168,85,247,.15)}
.lib-item-icon.youtube{background:rgba(239,68,68,.15)}
.lib-item-meta{flex:1;min-width:0}
.lib-item-title{font-size:14px;font-weight:800;color:var(--tx);margin-bottom:.2rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lib-item-type{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;padding:2px 8px;border-radius:5px;display:inline-block}
.lib-item-type.flashcard{background:rgba(37,99,235,.15);color:var(--p-lite)}
.lib-item-type.quiz{background:rgba(245,158,11,.12);color:var(--gold)}
.lib-item-type.lesson{background:rgba(16,185,129,.12);color:var(--ok)}
.lib-item-type.lecture{background:rgba(168,85,247,.12);color:#C084FC}
.lib-item-type.youtube{background:rgba(239,68,68,.1);color:var(--red)}
.lib-item-date{font-size:11px;color:var(--tx3);margin-top:.2rem}
.lib-item-preview{font-size:12px;color:var(--tx2);line-height:1.5;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-bottom:.8rem}
.lib-item-actions{display:flex;gap:6px;flex-wrap:wrap}
.lib-act{padding:5px 12px;border-radius:8px;font-size:11px;font-weight:800;cursor:pointer;font-family:var(--f);border:1px solid var(--bd);background:transparent;color:var(--tx2);transition:all .2s}
.lib-act:hover{border-color:var(--p);color:var(--p-lite)}
.lib-act.danger{border-color:rgba(239,68,68,.3);color:var(--red)}
.lib-view-modal{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:400;display:none;align-items:flex-start;justify-content:center;padding:1rem;overflow-y:auto;backdrop-filter:blur(8px)}
.lib-view-modal.on{display:flex}
.lib-view-card{background:var(--card);border-radius:20px;padding:1.5rem;max-width:620px;width:100%;margin:auto;border:1px solid var(--bd);position:relative}
.lib-view-close{position:absolute;top:1rem;right:1rem;background:rgba(255,255,255,.06);border:none;color:var(--tx2);font-size:18px;cursor:pointer;width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center}
.lib-view-title{font-size:16px;font-weight:900;margin-bottom:.3rem;padding-right:2.5rem}
.lib-view-type{font-size:11px;font-weight:800;color:var(--tx3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:1rem}
.lib-view-content{font-size:13px;color:var(--tx2);line-height:1.8;white-space:pre-wrap;max-height:60vh;overflow-y:auto}
.lib-view-actions{display:flex;gap:8px;margin-top:1rem;flex-wrap:wrap}
.lib-view-act{flex:1;min-width:100px;padding:9px;border-radius:10px;background:rgba(37,99,235,.15);border:1px solid rgba(37,99,235,.3);color:var(--p-lite);font-size:12px;font-weight:800;cursor:pointer;font-family:var(--f);text-align:center}

/* ── REVIEW ── */
.review-layout{padding:1.2rem;max-width:600px;margin:0 auto}
.review-hero{background:linear-gradient(135deg,rgba(245,158,11,.15),rgba(249,115,22,.1));border:1px solid rgba(245,158,11,.3);border-radius:20px;padding:1.5rem;text-align:center;margin-bottom:1.2rem}
.stars-row{display:flex;justify-content:center;gap:8px;margin:1.2rem 0}
.star-btn{font-size:32px;cursor:pointer;transition:transform .2s;filter:grayscale(1);opacity:.4}
.star-btn.on{filter:none;opacity:1;transform:scale(1.15)}
.star-btn svg{width:32px;height:32px;fill:var(--gold);stroke:var(--gold)}
.review-form{background:var(--card);border-radius:16px;padding:1.3rem;border:1px solid var(--bd);margin-bottom:1rem}
.review-form label{display:block;font-size:11px;font-weight:800;color:var(--tx2);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.5rem}
.review-input{width:100%;padding:10px 14px;border-radius:11px;border:1px solid var(--bd);background:var(--surface2);color:var(--tx);font-size:14px;font-family:var(--f);font-weight:600;outline:none;margin-bottom:1rem}
.review-textarea{width:100%;padding:10px 14px;border-radius:11px;border:1px solid var(--bd);background:var(--surface2);color:var(--tx);font-size:13px;font-family:var(--f);resize:none;outline:none;height:100px;line-height:1.6}
.review-textarea::placeholder{color:var(--tx3)}
.review-submit-btn{width:100%;padding:13px;background:linear-gradient(135deg,var(--gold),#F97316);color:#fff;border:none;border-radius:12px;font-size:15px;font-weight:800;font-family:var(--f);cursor:pointer}
.review-item{background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:1rem;margin-bottom:.8rem}
.review-item-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}
.review-item-name{font-size:13px;font-weight:800}
.review-item-stars{font-size:13px;color:var(--gold)}
.review-item-text{font-size:13px;color:var(--tx2);line-height:1.6;font-style:italic}
.review-item-date{font-size:11px;color:var(--tx3);margin-top:.4rem}
.review-success{background:rgba(16,185,129,.15);border:1px solid rgba(16,185,129,.3);border-radius:12px;padding:1rem;text-align:center;color:var(--ok);font-weight:800;font-size:14px;display:none;margin-bottom:1rem}
.review-success.on{display:block}

/* ── BUG REPORT ── */
.bug-layout{padding:1.2rem;max-width:600px;margin:0 auto}
.bug-hero{background:linear-gradient(135deg,rgba(239,68,68,.1),rgba(220,38,38,.05));border:1px solid rgba(239,68,68,.2);border-radius:20px;padding:1.5rem;text-align:center;margin-bottom:1.2rem}
.bug-type-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:1.2rem}
.bug-type-card{background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:.8rem;text-align:center;cursor:pointer;transition:all .2s}
.bug-type-card:hover,.bug-type-card.on{border-color:var(--red);background:rgba(239,68,68,.08)}
.bug-type-card.on .bug-type-name{color:var(--red)}
.bug-type-icon{font-size:24px;margin-bottom:.3rem;display:flex;align-items:center;justify-content:center}
.bug-type-icon svg{width:22px;height:22px;stroke:var(--tx2);stroke-width:1.8}
.bug-type-card.on .bug-type-icon svg{stroke:var(--red)}
.bug-type-name{font-size:12px;font-weight:800;color:var(--tx2)}
.bug-form{background:var(--card);border-radius:16px;padding:1.3rem;border:1px solid var(--bd);margin-bottom:1rem}
.bug-label{display:block;font-size:11px;font-weight:800;color:var(--tx2);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.5rem;margin-top:.8rem}
.bug-label:first-child{margin-top:0}
.bug-input{width:100%;padding:10px 14px;border-radius:11px;border:1px solid var(--bd);background:var(--surface2);color:var(--tx);font-size:14px;font-family:var(--f);font-weight:600;outline:none}
.bug-textarea{width:100%;padding:10px 14px;border-radius:11px;border:1px solid var(--bd);background:var(--surface2);color:var(--tx);font-size:13px;font-family:var(--f);resize:none;outline:none;height:100px;line-height:1.6;margin-top:.5rem}
.bug-textarea::placeholder{color:var(--tx3)}
.bug-submit-btn{width:100%;padding:13px;background:linear-gradient(135deg,var(--red),#DC2626);color:#fff;border:none;border-radius:12px;font-size:15px;font-weight:800;font-family:var(--f);cursor:pointer}
.bug-success{background:rgba(16,185,129,.15);border:1px solid rgba(16,185,129,.3);border-radius:12px;padding:1rem;text-align:center;color:var(--ok);font-weight:800;font-size:14px;display:none;margin-bottom:1rem}
.bug-success.on{display:block}

/* ── SETTINGS ── */
.settings-layout{padding:1.2rem;max-width:500px;margin:0 auto}

/* ── REFERRAL ── */
.ref-layout{padding:1.5rem;max-width:600px;margin:0 auto}
.ref-hero{background:linear-gradient(135deg,rgba(37,99,235,.2),rgba(6,182,212,.1));border:1px solid rgba(37,99,235,.3);border-radius:24px;padding:2rem;text-align:center;margin-bottom:2rem}
.ref-code-box{background:var(--card);border-radius:16px;padding:1.3rem;border:1px solid var(--bd);margin-bottom:1.2rem;text-align:center}
.ref-code{font-size:1.8rem;font-weight:900;color:var(--p-lite);letter-spacing:.15em;font-family:var(--f2);margin:.5rem 0}
.ref-copy-btn{padding:10px 24px;background:linear-gradient(135deg,var(--p),var(--p2));color:#fff;border:none;border-radius:10px;font-size:14px;font-weight:800;cursor:pointer;font-family:var(--f)}
.ref-share-row{display:flex;gap:8px;justify-content:center;margin-top:1rem}
.ref-share-btn{padding:8px 18px;border-radius:10px;font-size:13px;font-weight:700;cursor:pointer;font-family:var(--f);border:1px solid var(--bd);background:transparent;color:var(--tx2);transition:all .2s}
.ref-share-btn:hover{border-color:var(--p);color:var(--p-lite)}

/* ── ACHIEVEMENTS POPUP ── */
.ach-popup{position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(100px);background:var(--card2);border:1px solid rgba(245,158,11,.4);border-radius:20px;padding:1.2rem 2rem;text-align:center;z-index:600;transition:transform .4s cubic-bezier(.34,1.56,.64,1);min-width:260px;display:none}
.ach-popup.show{transform:translateX(-50%) translateY(0)}
.ach-popup-icon{font-size:36px;margin-bottom:.4rem}
.ach-popup-title{font-size:11px;font-weight:800;color:var(--gold);text-transform:uppercase;letter-spacing:.1em}
.ach-popup-name{font-size:16px;font-weight:900;color:var(--tx)}


/* ══════════════════════════════
 EXAM PREP SYSTEM
══════════════════════════════ */
.ep-layout{padding:1.2rem;max-width:800px;margin:0 auto}
.ep-hero{background:linear-gradient(135deg,rgba(37,99,235,.2),rgba(6,182,212,.1));border:1px solid rgba(37,99,235,.3);border-radius:20px;padding:1.5rem;margin-bottom:1.5rem;text-align:center}
.ep-hero h2{font-size:1.4rem;font-weight:900;margin-bottom:.3rem}
.ep-hero p{font-size:13px;color:var(--tx2)}
.ep-setup{background:var(--card);border-radius:20px;padding:1.5rem;border:1px solid var(--bd);margin-bottom:1.2rem}
.ep-setup h3{font-size:14px;font-weight:800;margin-bottom:1rem;color:var(--tx2);text-transform:uppercase;letter-spacing:.06em}
.ep-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin-bottom:1.2rem}
.ep-card{background:var(--card2);border:1px solid var(--bd);border-radius:12px;padding:.8rem;text-align:center;cursor:pointer;transition:all .2s}
.ep-card:hover,.ep-card.on{border-color:var(--p);background:rgba(37,99,235,.15)}
.ep-card.on .ep-card-name{color:var(--p-lite)}
.ep-card-icon{font-size:20px;margin-bottom:.3rem;display:flex;align-items:center;justify-content:center}
.ep-card-icon svg{width:20px;height:20px;stroke:var(--tx2);stroke-width:1.8}
.ep-card.on .ep-card-icon svg{stroke:var(--p-lite)}
.ep-card-name{font-size:11px;font-weight:800;color:var(--tx2)}
.ep-subj-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:6px;margin-bottom:1rem}
.ep-subj-btn{padding:6px 10px;border-radius:8px;border:1px solid var(--bd);background:transparent;color:var(--tx2);font-size:11px;font-weight:700;cursor:pointer;font-family:var(--f);text-align:center;transition:all .2s}
.ep-subj-btn.on{background:rgba(37,99,235,.2);border-color:rgba(37,99,235,.5);color:var(--p-lite)}
.ep-opts-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:1rem}
.ep-opt{padding:7px 16px;border-radius:20px;border:1px solid var(--bd);background:transparent;color:var(--tx2);font-size:12px;font-weight:700;cursor:pointer;font-family:var(--f);transition:all .2s}
.ep-opt.on{background:rgba(37,99,235,.2);border-color:rgba(37,99,235,.5);color:var(--p-lite)}
.ep-start-btn{width:100%;padding:14px;background:linear-gradient(135deg,var(--p),var(--p2));color:#fff;border:none;border-radius:12px;font-size:15px;font-weight:800;font-family:var(--f);cursor:pointer;box-shadow:var(--glow)}
.ep-start-btn:disabled{opacity:.4;cursor:default}

/* MCQ Question */
.ep-q-wrap{display:none}
.ep-q-wrap.on{display:block}
.ep-q-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.ep-q-meta{display:flex;align-items:center;gap:8px}
.ep-q-num{font-size:13px;font-weight:800;color:var(--p-lite)}
.ep-q-subj{font-size:11px;font-weight:700;background:rgba(37,99,235,.15);color:var(--p-lite);padding:3px 10px;border-radius:20px}
.ep-q-diff{font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px}
.ep-q-diff.easy{background:rgba(16,185,129,.15);color:var(--ok)}
.ep-q-diff.moderate{background:rgba(245,158,11,.15);color:var(--gold)}
.ep-q-diff.hard{background:rgba(239,68,68,.15);color:var(--red)}
.ep-q-actions{display:flex;gap:6px}
.ep-q-action-btn{width:32px;height:32px;border-radius:8px;border:1px solid var(--bd);background:transparent;color:var(--tx3);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}
.ep-q-action-btn:hover{border-color:var(--p);color:var(--p-lite)}
.ep-q-action-btn.bookmarked{background:rgba(245,158,11,.15);border-color:rgba(245,158,11,.4);color:var(--gold)}
.ep-q-action-btn.flagged{background:rgba(239,68,68,.15);border-color:rgba(239,68,68,.4);color:var(--red)}
.ep-q-timer{font-size:14px;font-weight:900;color:var(--tx);background:var(--card2);padding:5px 14px;border-radius:20px;border:1px solid var(--bd);font-family:var(--f2)}
.ep-q-timer.urgent{color:var(--red);border-color:rgba(239,68,68,.4)}
.ep-q-card{background:var(--card);border:1px solid var(--bd);border-radius:16px;padding:1.5rem;margin-bottom:1rem}
.ep-q-stem{font-size:15px;font-weight:700;line-height:1.7;color:var(--tx);margin-bottom:1.2rem}
.ep-q-opts{display:flex;flex-direction:column;gap:8px;margin-bottom:1rem}
.ep-q-opt{padding:12px 16px;border-radius:12px;border:1.5px solid var(--bd);background:var(--card2);color:var(--tx);font-size:14px;font-weight:600;cursor:pointer;font-family:var(--f);text-align:left;transition:all .15s;display:flex;align-items:center;gap:12px}
.ep-q-opt:hover:not(:disabled){border-color:rgba(37,99,235,.5);background:rgba(37,99,235,.08)}
.ep-q-opt-letter{width:28px;height:28px;border-radius:8px;background:rgba(37,99,235,.15);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;color:var(--p-lite);flex-shrink:0}
.ep-q-opt.selected{border-color:var(--p);background:rgba(37,99,235,.15)}
.ep-q-opt.correct{border-color:var(--ok);background:rgba(16,185,129,.15);color:var(--ok)}
.ep-q-opt.correct .ep-q-opt-letter{background:rgba(16,185,129,.2);color:var(--ok)}
.ep-q-opt.wrong{border-color:var(--red);background:rgba(239,68,68,.1);color:var(--red)}
.ep-q-opt.wrong .ep-q-opt-letter{background:rgba(239,68,68,.15);color:var(--red)}
.ep-q-opt:disabled{cursor:default}
.ep-q-bottom{display:flex;gap:8px;flex-wrap:wrap}
.ep-q-btn{padding:10px 20px;border-radius:10px;font-size:13px;font-weight:800;font-family:var(--f);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px}
.ep-q-btn.primary{background:linear-gradient(135deg,var(--p),var(--p2));color:#fff}
.ep-q-btn.secondary{background:rgba(255,255,255,.05);border:1px solid var(--bd);color:var(--tx2)}
.ep-q-btn.ai-btn{background:rgba(245,158,11,.15);border:1px solid rgba(245,158,11,.3);color:var(--gold)}

/* Explanation */
.ep-explanation{display:none;background:rgba(37,99,235,.06);border:1px solid rgba(37,99,235,.2);border-radius:14px;padding:1.2rem;margin-top:.8rem}
.ep-explanation.on{display:block}
.ep-exp-correct{font-size:13px;font-weight:800;color:var(--ok);margin-bottom:.8rem}
.ep-exp-text{font-size:13px;color:var(--tx2);line-height:1.8}
.ep-wrong-opts{margin-top:.8rem}
.ep-wrong-opt{font-size:12px;color:var(--tx3);padding:.4rem 0;border-bottom:1px solid var(--bd)}
.ep-wrong-opt:last-child{border:none}
.ep-wrong-opt b{color:var(--red)}

/* Progress bar */
.ep-progress-wrap{background:var(--card);border-radius:12px;padding:.8rem 1rem;border:1px solid var(--bd);margin-bottom:1rem;display:flex;align-items:center;gap:12px}
.ep-progress-bar{flex:1;height:6px;background:rgba(37,99,235,.15);border-radius:3px;overflow:hidden}
.ep-progress-fill{height:100%;background:linear-gradient(90deg,var(--p),var(--p2));border-radius:3px;transition:width .4s ease}
.ep-stats-mini{display:flex;gap:12px;font-size:12px;font-weight:700}
.ep-stat-c{color:var(--ok)}.ep-stat-w{color:var(--red)}.ep-stat-s{color:var(--gold)}

/* Results */
.ep-results{display:none;background:var(--card);border-radius:20px;padding:2rem;border:1px solid var(--bd);text-align:center}
.ep-results.on{display:block}
.ep-result-score{font-size:3rem;font-weight:900;color:var(--p-lite);font-family:var(--f2)}
.ep-result-label{font-size:14px;color:var(--tx2);margin-bottom:1.5rem}
.ep-result-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:1.5rem}
.ep-rs{background:var(--card2);border-radius:12px;padding:.8rem;border:1px solid var(--bd)}
.ep-rs-val{font-size:1.3rem;font-weight:900;color:var(--p-lite);font-family:var(--f2)}
.ep-rs-lbl{font-size:10px;color:var(--tx3);font-weight:700;margin-top:.2rem}

/* ══════════════════════════════
 CLINICAL SIMULATION
══════════════════════════════ */
.sim-layout{padding:1.2rem;max-width:700px;margin:0 auto}
.sim-hero{background:linear-gradient(135deg,rgba(239,68,68,.15),rgba(220,38,38,.1));border:1px solid rgba(239,68,68,.3);border-radius:20px;padding:1.5rem;text-align:center;margin-bottom:1.2rem}
.sim-hero h2{font-size:1.4rem;font-weight:900;margin-bottom:.3rem}
.sim-hero p{font-size:13px;color:var(--tx2)}
.sim-setup{background:var(--card);border-radius:16px;padding:1.3rem;border:1px solid var(--bd);margin-bottom:1rem}
.sim-type-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin-bottom:1rem}
.sim-type-card{background:var(--card2);border:1px solid var(--bd);border-radius:12px;padding:1rem;text-align:center;cursor:pointer;transition:all .2s}
.sim-type-card:hover,.sim-type-card.on{border-color:rgba(239,68,68,.5);background:rgba(239,68,68,.08)}
.sim-type-card.on .sim-type-name{color:var(--red)}
.sim-type-icon{font-size:24px;margin-bottom:.4rem;display:flex;align-items:center;justify-content:center}
.sim-type-icon svg{width:22px;height:22px;stroke:var(--tx2);stroke-width:1.8}
.sim-type-card.on .sim-type-icon svg{stroke:var(--red)}
.sim-type-name{font-size:11px;font-weight:800;color:var(--tx2)}
.sim-start-btn{width:100%;padding:14px;background:linear-gradient(135deg,var(--red),#DC2626);color:#fff;border:none;border-radius:12px;font-size:15px;font-weight:800;font-family:var(--f);cursor:pointer;box-shadow:0 4px 20px rgba(239,68,68,.3)}

/* Patient card */
.sim-patient{background:var(--card);border:1px solid var(--bd);border-radius:16px;padding:1.3rem;margin-bottom:1rem;display:none}
.sim-patient.on{display:block}
.sim-patient-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.sim-patient-info{display:flex;align-items:center;gap:12px}
.sim-patient-avatar{width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,rgba(239,68,68,.3),rgba(220,38,38,.2));display:flex;align-items:center;justify-content:center;font-size:22px;border:1px solid rgba(239,68,68,.3)}
.sim-patient-name{font-size:15px;font-weight:800;color:var(--tx)}
.sim-patient-meta{font-size:12px;color:var(--tx2)}
.sim-vitals{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:8px;margin-bottom:1rem}
.sim-vital{background:var(--card2);border-radius:10px;padding:.6rem;text-align:center;border:1px solid var(--bd)}
.sim-vital-val{font-size:14px;font-weight:900;color:var(--tx);font-family:var(--f2)}
.sim-vital-lbl{font-size:10px;color:var(--tx3);font-weight:600;margin-top:2px}
.sim-vital.abnormal .sim-vital-val{color:var(--red)}
.sim-vital.warning .sim-vital-val{color:var(--gold)}
.sim-complaint{background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.2);border-radius:10px;padding:.8rem 1rem;font-size:13px;color:var(--tx);font-style:italic;margin-bottom:1rem}
.sim-stage{display:none}
.sim-stage.on{display:block}
.sim-stage-title{font-size:12px;font-weight:800;color:var(--red);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.8rem}
.sim-options{display:flex;flex-direction:column;gap:6px;margin-bottom:1rem}
.sim-option{padding:10px 14px;border-radius:10px;border:1px solid var(--bd);background:var(--card2);color:var(--tx2);font-size:13px;font-weight:600;cursor:pointer;font-family:var(--f);text-align:left;transition:all .15s}
.sim-option:hover{border-color:rgba(239,68,68,.4);color:var(--tx)}
.sim-option.selected{border-color:var(--red);background:rgba(239,68,68,.1);color:var(--red)}
.sim-option.correct{border-color:var(--ok);background:rgba(16,185,129,.1);color:var(--ok)}
.sim-option.wrong{border-color:var(--red);background:rgba(239,68,68,.1);color:var(--red)}
.sim-feedback{display:none;background:rgba(37,99,235,.06);border:1px solid rgba(37,99,235,.2);border-radius:12px;padding:1rem;margin-bottom:1rem;font-size:13px;color:var(--tx2);line-height:1.7}
.sim-feedback.on{display:block}
.sim-feedback.good{background:rgba(16,185,129,.08);border-color:rgba(16,185,129,.3);color:var(--ok)}
.sim-feedback.bad{background:rgba(239,68,68,.08);border-color:rgba(239,68,68,.3);color:var(--red)}
.sim-next-btn{padding:10px 24px;background:linear-gradient(135deg,var(--red),#DC2626);color:#fff;border:none;border-radius:10px;font-size:13px;font-weight:800;cursor:pointer;font-family:var(--f)}
.sim-progress-steps{display:flex;gap:4px;margin-bottom:1rem}
.sim-step{flex:1;height:4px;border-radius:2px;background:rgba(239,68,68,.2)}
.sim-step.done{background:var(--red)}
.sim-step.current{background:rgba(239,68,68,.6)}

/* Heartbeat monitor */
.heartbeat-bar{background:var(--card2);border:1px solid var(--bd);border-radius:10px;padding:.6rem 1rem;display:flex;align-items:center;gap:12px;margin-bottom:1rem}
.hb-dot{width:8px;height:8px;border-radius:50%;background:var(--ok);animation:hbpulse 1s infinite}
@keyframes hbpulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.3);opacity:.7}}
.hb-line{flex:1;height:2px;background:var(--bd);position:relative;overflow:hidden}
.hb-wave{position:absolute;top:0;left:-100%;width:200%;height:100%;background:linear-gradient(90deg,transparent,var(--ok),transparent);animation:hbwave 1.5s linear infinite}
@keyframes hbwave{0%{left:-100%}100%{left:100%}}
.hb-text{font-size:12px;font-weight:800;color:var(--ok)}

/* Sim results */
.sim-results{display:none;background:var(--card);border-radius:20px;padding:2rem;border:1px solid var(--bd);text-align:center}
.sim-results.on{display:block}
.sim-result-grade{font-size:3rem;font-weight:900;font-family:var(--f2)}
.sim-result-grade.excellent{color:var(--ok)}
.sim-result-grade.good{color:var(--p-lite)}
.sim-result-grade.average{color:var(--gold)}
.sim-result-grade.fail{color:var(--red)}

/* ══════════════════════════════
 MOCK TEST ENGINE
══════════════════════════════ */
.mock-layout{padding:1.2rem;max-width:800px;margin:0 auto}
.mock-hero{background:linear-gradient(135deg,rgba(245,158,11,.15),rgba(249,115,22,.1));border:1px solid rgba(245,158,11,.3);border-radius:20px;padding:1.5rem;text-align:center;margin-bottom:1.2rem}
.mock-setup{background:var(--card);border-radius:16px;padding:1.3rem;border:1px solid var(--bd);margin-bottom:1rem}
.mock-exam-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin-bottom:1rem}
.mock-exam-card{background:var(--card2);border:1px solid var(--bd);border-radius:12px;padding:1rem;text-align:center;cursor:pointer;transition:all .2s}
.mock-exam-card:hover,.mock-exam-card.on{border-color:rgba(245,158,11,.5);background:rgba(245,158,11,.1)}
.mock-exam-card.on .mock-exam-name{color:var(--gold)}
.mock-exam-icon{font-size:22px;margin-bottom:.4rem;display:flex;align-items:center;justify-content:center}
.mock-exam-icon svg{width:22px;height:22px;stroke:var(--tx2);stroke-width:1.8}
.mock-exam-card.on .mock-exam-icon svg{stroke:var(--gold)}
.mock-exam-name{font-size:12px;font-weight:800;color:var(--tx2)}
.mock-exam-qs{font-size:10px;color:var(--tx3)}
.mock-start-btn{width:100%;padding:14px;background:linear-gradient(135deg,var(--gold),#F97316);color:#fff;border:none;border-radius:12px;font-size:15px;font-weight:800;font-family:var(--f);cursor:pointer}

/* Mock test running state */
.mock-running{display:none}
.mock-running.on{display:block}
.mock-topbar{background:var(--card);border-radius:12px;padding:.8rem 1.2rem;border:1px solid var(--bd);margin-bottom:1rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem}
.mock-timer-big{font-size:1.4rem;font-weight:900;color:var(--gold);font-family:var(--f2)}
.mock-timer-big.urgent{color:var(--red);animation:pulse 1s infinite}
.mock-analytics{display:none;background:var(--card);border-radius:16px;padding:1.3rem;border:1px solid var(--bd)}
.mock-analytics.on{display:block}
.subj-mastery{margin-bottom:1rem}
.subj-mastery-item{margin-bottom:.6rem}
.subj-mastery-header{display:flex;justify-content:space-between;font-size:12px;font-weight:700;margin-bottom:.3rem;color:var(--tx2)}
.subj-mastery-bar{height:6px;background:rgba(37,99,235,.15);border-radius:3px;overflow:hidden}
.subj-mastery-fill{height:100%;background:linear-gradient(90deg,var(--p),var(--p2));border-radius:3px;transition:width 1s ease}

/* ══════════════════════════════
 MISTAKE BOOK
══════════════════════════════ */
.mb-layout{padding:1.2rem;max-width:700px;margin:0 auto}
.mb-hero{background:linear-gradient(135deg,rgba(239,68,68,.15),rgba(220,38,38,.1));border:1px solid rgba(239,68,68,.3);border-radius:20px;padding:1.5rem;text-align:center;margin-bottom:1.2rem}
.mb-empty{text-align:center;padding:3rem;color:var(--tx3)}
.mb-item{background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:1.2rem;margin-bottom:.8rem;transition:all .2s}
.mb-item:hover{border-color:var(--bd2)}
.mb-item-q{font-size:14px;font-weight:700;color:var(--tx);margin-bottom:.6rem;line-height:1.5}
.mb-item-your{font-size:12px;color:var(--red);margin-bottom:.2rem}
.mb-item-correct{font-size:12px;color:var(--ok);margin-bottom:.6rem}
.mb-item-actions{display:flex;gap:6px}
.mb-act-btn{padding:5px 12px;border-radius:8px;font-size:11px;font-weight:800;cursor:pointer;font-family:var(--f);border:1px solid var(--bd);background:transparent;color:var(--tx2)}
.mb-act-btn.mastered{border-color:rgba(16,185,129,.4);color:var(--ok)}
.mb-act-btn.retry{border-color:rgba(37,99,235,.4);color:var(--p-lite)}

/* ══════════════════════════════
 STUDY PLAN
══════════════════════════════ */
.sp-layout{padding:1.2rem;max-width:700px;margin:0 auto}
.sp-form{background:var(--card);border-radius:16px;padding:1.3rem;border:1px solid var(--bd);margin-bottom:1rem}
.sp-form label{display:block;font-size:11px;font-weight:800;color:var(--tx2);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.5rem;margin-top:.8rem}
.sp-form label:first-child{margin-top:0}
.sp-input{width:100%;padding:10px 14px;border-radius:11px;border:1px solid var(--bd);background:var(--surface2);color:var(--tx);font-size:14px;font-family:var(--f);font-weight:600;outline:none}
.sp-input:focus{border-color:var(--p)}
.sp-gen-btn{width:100%;padding:13px;background:linear-gradient(135deg,var(--ok),#059669);color:#fff;border:none;border-radius:12px;font-size:15px;font-weight:800;font-family:var(--f);cursor:pointer;margin-bottom:1rem;display:flex;align-items:center;justify-content:center;gap:8px}
.sp-output{display:none;background:var(--card);border-radius:16px;padding:1.3rem;border:1px solid var(--bd)}
.sp-output.on{display:block}
.sp-week{margin-bottom:1rem}
.sp-week-title{font-size:13px;font-weight:800;color:var(--p-lite);margin-bottom:.6rem;padding-bottom:.4rem;border-bottom:1px solid var(--bd)}
.sp-day{display:flex;align-items:center;gap:10px;padding:.5rem 0;border-bottom:1px solid var(--bd)}
.sp-day:last-child{border:none}
.sp-day-num{width:28px;height:28px;border-radius:8px;background:rgba(37,99,235,.15);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;color:var(--p-lite);flex-shrink:0}
.sp-day-content{flex:1;font-size:12px;color:var(--tx2)}
.sp-day-hrs{font-size:11px;font-weight:800;color:var(--gold)}

/* ══════════════════════════════
 LEADERBOARD
══════════════════════════════ */
.lb-layout{padding:1.2rem;max-width:700px;margin:0 auto}
.lb-hero{background:linear-gradient(135deg,rgba(245,158,11,.15),rgba(249,115,22,.1));border:1px solid rgba(245,158,11,.3);border-radius:20px;padding:1.5rem;text-align:center;margin-bottom:1.2rem}
.lb-tabs{display:flex;gap:6px;margin-bottom:1.2rem}
.lb-tab{flex:1;padding:9px;border-radius:10px;border:1px solid var(--bd);background:transparent;color:var(--tx2);font-size:12px;font-weight:800;cursor:pointer;font-family:var(--f);text-align:center;transition:all .2s}
.lb-tab.on{background:rgba(245,158,11,.15);border-color:rgba(245,158,11,.4);color:var(--gold)}
.lb-list{display:flex;flex-direction:column;gap:.6rem}
.lb-item{background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:1rem;display:flex;align-items:center;gap:12px;transition:all .2s}
.lb-item:hover{border-color:var(--bd2)}
.lb-item.me{border-color:rgba(37,99,235,.4);background:rgba(37,99,235,.06)}
.lb-rank{width:32px;text-align:center;font-size:16px;font-weight:900;font-family:var(--f2)}
.lb-rank.gold{color:var(--gold)}
.lb-rank.silver{color:#94A3B8}
.lb-rank.bronze{color:#CD7F32}
.lb-avatar{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--p),var(--p2));display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:900;color:#fff;flex-shrink:0}
.lb-info{flex:1}
.lb-name{font-size:13px;font-weight:800;color:var(--tx)}
.lb-level{font-size:11px;color:var(--tx3)}
.lb-xp{font-size:14px;font-weight:900;color:var(--p-lite);font-family:var(--f2)}
.lb-badge{font-size:18px}

/* ══════════════════════════════
 DASH UPGRADES
══════════════════════════════ */
.rank-card{background:linear-gradient(135deg,rgba(37,99,235,.2),rgba(6,182,212,.1));border:1px solid rgba(37,99,235,.3);border-radius:16px;padding:1.2rem;margin-bottom:1.5rem;display:flex;align-items:center;justify-content:space-between}
.rank-info h3{font-size:1.1rem;font-weight:900;margin-bottom:.2rem}
.rank-info p{font-size:12px;color:var(--tx2)}
.rank-badge{font-size:40px}
.heatmap-wrap{background:var(--card);border-radius:16px;padding:1.2rem;border:1px solid var(--bd);margin-bottom:1.5rem}
.heatmap-wrap h3{font-size:13px;font-weight:800;margin-bottom:.8rem;color:var(--tx2)}
.heatmap-grid{display:flex;gap:3px;flex-wrap:wrap}
.hm-cell{width:12px;height:12px;border-radius:3px;background:rgba(37,99,235,.1);transition:all .2s}
.hm-cell.l1{background:rgba(37,99,235,.25)}
.hm-cell.l2{background:rgba(37,99,235,.5)}
.hm-cell.l3{background:rgba(37,99,235,.75)}
.hm-cell.l4{background:var(--p)}

/* Notification */
.notif{position:fixed;top:20px;left:50%;transform:translateX(-50%) translateY(-80px);width:90%;max-width:400px;background:var(--card2);border:1px solid var(--bd2);border-radius:14px;padding:.8rem 1.5rem;font-size:13px;font-weight:700;color:var(--tx);z-index:800;transition:transform .3s;white-space:nowrap;box-shadow:0 8px 30px rgba(0,0,0,.4)}
.notif.show{transform:translateX(-50%) translateY(0)}


/* ══════════════════════════════
 SNAP MODE
══════════════════════════════ */
.snap-layout{padding:1.2rem;max-width:650px;margin:0 auto}
.snap-hero{background:linear-gradient(135deg,rgba(168,85,247,.2),rgba(124,58,237,.1));border:1px solid rgba(168,85,247,.3);border-radius:20px;padding:1.5rem;text-align:center;margin-bottom:1.2rem}
.snap-hero h2{font-size:1.4rem;font-weight:900;margin-bottom:.3rem}
.snap-hero p{font-size:13px;color:var(--tx2)}
.snap-upload-zone{border:2px dashed rgba(168,85,247,.4);border-radius:16px;padding:2.5rem;text-align:center;cursor:pointer;transition:all .2s;background:var(--card);margin-bottom:1rem}
.snap-upload-zone:hover{border-color:rgba(168,85,247,.7);background:rgba(168,85,247,.05)}
.snap-upload-zone.has-image{padding:.5rem;border-style:solid;border-color:rgba(168,85,247,.5)}
.snap-preview{width:100%;max-height:300px;object-fit:contain;border-radius:12px;display:none}
.snap-preview.on{display:block}
.snap-mode-row{display:flex;gap:6px;margin-bottom:1rem;flex-wrap:wrap}
.snap-mode-btn{padding:7px 16px;border-radius:20px;border:1px solid var(--bd);background:transparent;color:var(--tx2);font-size:12px;font-weight:800;cursor:pointer;font-family:var(--f);transition:all .2s}
.snap-mode-btn.on{background:rgba(168,85,247,.2);border-color:rgba(168,85,247,.5);color:#C084FC}
.snap-analyse-btn{width:100%;padding:13px;background:linear-gradient(135deg,#7C3AED,#A855F7);color:#fff;border:none;border-radius:12px;font-size:15px;font-weight:800;font-family:var(--f);cursor:pointer;box-shadow:0 4px 20px rgba(124,58,237,.3);margin-bottom:1rem}
.snap-analyse-btn:disabled{opacity:.5;cursor:default}
.snap-output{background:var(--card);border-radius:16px;padding:1.3rem;border:1px solid var(--bd);display:none}
.snap-output.on{display:block}
.snap-loading{text-align:center;padding:2rem;display:none}
.snap-loading.on{display:block}

/* ══════════════════════════════
 DRUG CHECKER
══════════════════════════════ */
.drug-layout{padding:1.2rem;max-width:650px;margin:0 auto}
.drug-hero{background:linear-gradient(135deg,rgba(16,185,129,.15),rgba(5,150,105,.1));border:1px solid rgba(16,185,129,.3);border-radius:20px;padding:1.5rem;text-align:center;margin-bottom:1.2rem}
.drug-tabs{display:flex;gap:6px;margin-bottom:1.2rem}
.drug-tab{flex:1;padding:10px;border-radius:12px;border:1px solid var(--bd);background:transparent;color:var(--tx2);font-size:13px;font-weight:800;cursor:pointer;font-family:var(--f);text-align:center;transition:all .2s}
.drug-tab.on{background:rgba(16,185,129,.2);border-color:rgba(16,185,129,.4);color:var(--ok)}
.drug-input-card{background:var(--card);border-radius:16px;padding:1.3rem;border:1px solid var(--bd);margin-bottom:1rem}
.drug-input{width:100%;padding:11px 14px;border-radius:12px;border:1px solid var(--bd);background:var(--surface2);color:var(--tx);font-size:14px;font-family:var(--f);font-weight:600;outline:none;margin-bottom:.6rem}
.drug-input:focus{border-color:var(--ok)}
.drug-input::placeholder{color:var(--tx3)}
.drug-add-btn{padding:9px 18px;border-radius:10px;background:rgba(16,185,129,.15);border:1px solid rgba(16,185,129,.3);color:var(--ok);font-size:12px;font-weight:800;cursor:pointer;font-family:var(--f)}
.drug-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:.8rem;min-height:32px}
.drug-chip{display:flex;align-items:center;gap:6px;background:rgba(16,185,129,.15);border:1px solid rgba(16,185,129,.3);color:var(--ok);padding:5px 12px;border-radius:20px;font-size:12px;font-weight:700}
.drug-chip-remove{cursor:pointer;font-size:14px;color:var(--ok);background:none;border:none;font-family:var(--f)}
.drug-check-btn{width:100%;padding:13px;background:linear-gradient(135deg,var(--ok),#059669);color:#fff;border:none;border-radius:12px;font-size:15px;font-weight:800;font-family:var(--f);cursor:pointer;margin-bottom:1rem}
.drug-check-btn:disabled{opacity:.5;cursor:default}
.drug-output{background:var(--card);border-radius:16px;padding:1.3rem;border:1px solid var(--bd);display:none}
.drug-output.on{display:block}
.drug-severity{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:800;margin-bottom:.8rem}
.drug-severity.major{background:rgba(239,68,68,.2);color:var(--red)}
.drug-severity.moderate{background:rgba(245,158,11,.2);color:var(--gold)}
.drug-severity.minor{background:rgba(16,185,129,.2);color:var(--ok)}
.drug-severity.none{background:rgba(37,99,235,.2);color:var(--p-lite)}

/* ══════════════════════════════
 MEDICAL CALCULATORS
══════════════════════════════ */
.calc-layout{padding:1.2rem;max-width:650px;margin:0 auto}
.calc-hero{background:linear-gradient(135deg,rgba(245,158,11,.15),rgba(249,115,22,.1));border:1px solid rgba(245,158,11,.3);border-radius:20px;padding:1.5rem;text-align:center;margin-bottom:1.2rem}
.calc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin-bottom:1.2rem}
.calc-card{background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:1rem;text-align:center;cursor:pointer;transition:all .2s}
.calc-card:hover,.calc-card.on{border-color:rgba(245,158,11,.5);background:rgba(245,158,11,.08)}
.calc-card.on .calc-name{color:var(--gold)}
.calc-icon{font-size:24px;margin-bottom:.4rem;display:flex;align-items:center;justify-content:center}
.calc-icon svg{width:22px;height:22px;stroke:var(--tx2);stroke-width:1.8}
.calc-card.on .calc-icon svg{stroke:var(--gold)}
.calc-name{font-size:12px;font-weight:800;color:var(--tx2)}
.calc-desc{font-size:10px;color:var(--tx3);margin-top:.2rem}
.calc-form{background:var(--card);border-radius:16px;padding:1.3rem;border:1px solid var(--bd);margin-bottom:1rem;display:none}
.calc-form.on{display:block}
.calc-form h3{font-size:14px;font-weight:800;margin-bottom:1rem;color:var(--p-lite)}
.calc-field{margin-bottom:.8rem}
.calc-field label{display:block;font-size:11px;font-weight:800;color:var(--tx2);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.4rem}
.calc-field input,.calc-field select{width:100%;padding:10px 14px;border-radius:10px;border:1px solid var(--bd);background:var(--surface2);color:var(--tx);font-size:14px;font-family:var(--f);font-weight:600;outline:none}
.calc-field input:focus,.calc-field select:focus{border-color:var(--gold)}
.calc-btn{width:100%;padding:12px;background:linear-gradient(135deg,var(--gold),#F97316);color:#fff;border:none;border-radius:11px;font-size:14px;font-weight:800;font-family:var(--f);cursor:pointer;margin-bottom:.8rem}
.calc-result{display:none;background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.3);border-radius:14px;padding:1.2rem;text-align:center}
.calc-result.on{display:block}
.calc-result-val{font-size:2rem;font-weight:900;color:var(--gold);font-family:var(--f2);margin-bottom:.3rem}
.calc-result-label{font-size:13px;color:var(--tx2);margin-bottom:.5rem}
.calc-result-interp{font-size:13px;font-weight:700;padding:6px 14px;border-radius:8px;display:inline-block;margin-top:.3rem}

/* ══════════════════════════════
 PDF MODE
══════════════════════════════ */
.pdf-layout{padding:1.2rem;max-width:650px;margin:0 auto}
.pdf-hero{background:linear-gradient(135deg,rgba(239,68,68,.15),rgba(220,38,38,.1));border:1px solid rgba(239,68,68,.3);border-radius:20px;padding:1.5rem;text-align:center;margin-bottom:1.2rem}
.pdf-upload-zone{border:2px dashed rgba(239,68,68,.4);border-radius:16px;padding:2.5rem;text-align:center;cursor:pointer;transition:all .2s;background:var(--card);margin-bottom:1rem}
.pdf-upload-zone:hover{border-color:rgba(239,68,68,.7);background:rgba(239,68,68,.04)}
.pdf-upload-zone.loaded{border-style:solid;border-color:rgba(16,185,129,.4);background:rgba(16,185,129,.04)}
.pdf-file-info{background:var(--card);border-radius:12px;padding:1rem;border:1px solid var(--bd);margin-bottom:1rem;display:none;align-items:center;gap:12px}
.pdf-file-info.on{display:flex}
.pdf-actions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:1rem}
.pdf-action-btn{flex:1;min-width:120px;padding:10px;border-radius:10px;background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.3);color:var(--red);font-size:12px;font-weight:800;cursor:pointer;font-family:var(--f);text-align:center;transition:all .2s}
.pdf-action-btn:hover{background:rgba(239,68,68,.2)}
.pdf-action-btn.active{background:rgba(239,68,68,.2);border-color:var(--red)}
.pdf-chat-wrap{background:var(--card);border-radius:16px;border:1px solid var(--bd);overflow:hidden;display:none}
.pdf-chat-wrap.on{display:block}
.pdf-chat-msgs{height:280px;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.8rem}
.pdf-chat-inp{display:flex;gap:8px;padding:.8rem;border-top:1px solid var(--bd);background:var(--card2)}
.pdf-chat-input{flex:1;padding:9px 14px;border-radius:10px;border:1px solid var(--bd);background:var(--surface2);color:var(--tx);font-size:13px;font-family:var(--f);outline:none}
.pdf-chat-input:focus{border-color:var(--red)}
.pdf-send{padding:9px 16px;background:linear-gradient(135deg,var(--red),#DC2626);color:#fff;border:none;border-radius:10px;font-size:13px;font-weight:800;cursor:pointer;font-family:var(--f)}
.pdf-output{background:var(--card);border-radius:16px;padding:1.3rem;border:1px solid var(--bd);margin-top:1rem;display:none}
.pdf-output.on{display:block}

/* ══════════════════════════════
 PODCAST MODE
══════════════════════════════ */
.pod-layout{padding:1.2rem;max-width:650px;margin:0 auto}
.pod-hero{background:linear-gradient(135deg,rgba(37,99,235,.2),rgba(6,182,212,.1));border:1px solid rgba(37,99,235,.3);border-radius:20px;padding:1.5rem;text-align:center;margin-bottom:1.2rem}
.pod-hero h2{font-size:1.4rem;font-weight:900;margin-bottom:.3rem}
.pod-hero p{font-size:13px;color:var(--tx2)}
.pod-input-card{background:var(--card);border-radius:16px;padding:1.3rem;border:1px solid var(--bd);margin-bottom:1rem}
.pod-textarea{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--bd);background:var(--surface2);color:var(--tx);font-size:13px;font-family:var(--f);resize:none;outline:none;height:140px;line-height:1.6}
.pod-textarea:focus{border-color:var(--p)}
.pod-textarea::placeholder{color:var(--tx3)}
.pod-style-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:.8rem}
.pod-style-btn{padding:7px 14px;border-radius:20px;border:1px solid var(--bd);background:transparent;color:var(--tx2);font-size:12px;font-weight:800;cursor:pointer;font-family:var(--f);transition:all .2s}
.pod-style-btn.on{background:rgba(37,99,235,.2);border-color:rgba(37,99,235,.5);color:var(--p-lite)}
.pod-gen-btn{width:100%;padding:13px;background:linear-gradient(135deg,var(--p),var(--p2));color:#fff;border:none;border-radius:12px;font-size:15px;font-weight:800;font-family:var(--f);cursor:pointer;margin-bottom:1rem}
.pod-gen-btn:disabled{opacity:.5;cursor:default}
.pod-player{background:var(--card);border-radius:20px;padding:1.5rem;border:1px solid var(--bd);display:none}
.pod-player.on{display:block}
.pod-player-header{display:flex;align-items:center;gap:14px;margin-bottom:1.2rem}
.pod-album{width:60px;height:60px;border-radius:14px;background:linear-gradient(135deg,var(--p),var(--p2));display:flex;align-items:center;justify-content:center;font-size:26px;flex-shrink:0;box-shadow:var(--glow)}
.pod-title{font-size:15px;font-weight:800;color:var(--tx);margin-bottom:.2rem}
.pod-subtitle{font-size:12px;color:var(--tx2)}
.pod-waveform{display:flex;align-items:center;gap:2px;height:40px;margin-bottom:1rem;cursor:pointer}
.pod-wave-bar{width:3px;border-radius:2px;background:rgba(37,99,235,.4);transition:height .1s}
.pod-wave-bar.active{background:var(--p)}
.pod-controls{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:1rem}
.pod-ctrl-btn{width:40px;height:40px;border-radius:50%;background:rgba(37,99,235,.1);border:1px solid rgba(37,99,235,.3);color:var(--p-lite);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}
.pod-ctrl-btn:hover{background:rgba(37,99,235,.2)}
.pod-play-btn{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--p),var(--p2));border:none;color:#fff;font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--glow);transition:all .2s}
.pod-play-btn:hover{transform:scale(1.05)}
.pod-progress{height:4px;background:rgba(37,99,235,.2);border-radius:2px;margin-bottom:.5rem;cursor:pointer;overflow:hidden}
.pod-progress-fill{height:100%;background:linear-gradient(90deg,var(--p),var(--p2));border-radius:2px;transition:width .5s ease}
.pod-time{display:flex;justify-content:space-between;font-size:11px;color:var(--tx3);font-weight:700;margin-bottom:1rem}
.pod-speed-row{display:flex;gap:6px;justify-content:center}
.pod-speed-btn{padding:5px 12px;border-radius:20px;border:1px solid var(--bd);background:transparent;color:var(--tx2);font-size:11px;font-weight:800;cursor:pointer;font-family:var(--f);transition:all .2s}
.pod-speed-btn.on{background:rgba(37,99,235,.2);border-color:rgba(37,99,235,.5);color:var(--p-lite)}
.pod-transcript{margin-top:1rem;background:var(--card2);border-radius:12px;padding:1rem;font-size:13px;color:var(--tx2);line-height:1.8;max-height:200px;overflow-y:auto}


.test-card{background:var(--card);border:1px solid var(--bd);border-radius:16px;padding:1.5rem;transition:all .2s}
.test-card:hover{border-color:var(--bd2);transform:translateY(-4px)}
.test-stars{font-size:16px;margin-bottom:.8rem}
.test-text{font-size:14px;color:var(--tx2);line-height:1.7;margin-bottom:1rem;font-style:italic}
.test-author{font-size:12px;font-weight:800;color:var(--p-lite)}


/* ══════════════════════════════
 SPACED REPETITION SYSTEM
══════════════════════════════ */
.srs-layout{padding:1.2rem;max-width:700px;margin:0 auto}
.srs-hero{background:linear-gradient(135deg,rgba(99,102,241,.2),rgba(139,92,246,.1));border:1px solid rgba(99,102,241,.3);border-radius:20px;padding:1.5rem;margin-bottom:1.2rem}
.srs-hero h2{font-size:1.4rem;font-weight:900;margin-bottom:.3rem}
.srs-hero p{font-size:13px;color:var(--tx2)}
.srs-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:1.2rem}
.srs-stat{background:var(--card);border-radius:14px;padding:1rem;text-align:center;border:1px solid var(--bd);cursor:pointer;transition:all .2s}
.srs-stat:hover{border-color:var(--p)}
.srs-stat-num{font-size:1.6rem;font-weight:900;font-family:var(--f2)}
.srs-stat-lbl{font-size:10px;color:var(--tx3);font-weight:700;margin-top:2px}
.srs-stat.due .srs-stat-num{color:var(--p-lite)}
.srs-stat.new .srs-stat-num{color:var(--ok)}
.srs-stat.weak .srs-stat-num{color:var(--red)}
.srs-stat.done .srs-stat-num{color:var(--gold)}
.srs-progress-wrap{background:var(--card);border-radius:16px;padding:1.2rem;border:1px solid var(--bd);margin-bottom:1.2rem}
.srs-progress-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.8rem;font-size:13px;font-weight:700}
.srs-progress-bar{height:8px;background:rgba(99,102,241,.15);border-radius:4px;overflow:hidden}
.srs-progress-fill{height:100%;background:linear-gradient(90deg,#6366F1,#8B5CF6);border-radius:4px;transition:width .5s ease}
.srs-card-wrap{display:none}
.srs-card-wrap.on{display:block}
.srs-card{background:var(--card);border-radius:20px;padding:2rem;border:1px solid var(--bd);min-height:200px;display:flex;flex-direction:column;justify-content:space-between;margin-bottom:1rem;position:relative}
.srs-card-front{font-size:16px;font-weight:700;line-height:1.6;color:var(--tx);text-align:center;padding:1rem 0}
.srs-card-back{display:none;font-size:14px;color:var(--tx2);line-height:1.8;text-align:center;padding:1rem 0;border-top:1px solid var(--bd);margin-top:1rem}
.srs-card-back.on{display:block}
.srs-card-deck{font-size:11px;font-weight:800;color:#8B5CF6;background:rgba(99,102,241,.15);padding:3px 10px;border-radius:20px;display:inline-block;margin-bottom:.8rem}
.srs-flip-btn{width:100%;padding:12px;border-radius:12px;background:rgba(99,102,241,.15);border:1px solid rgba(99,102,241,.3);color:#8B5CF6;font-size:14px;font-weight:800;cursor:pointer;font-family:var(--f);margin-bottom:.8rem}
.srs-rate-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.srs-rate-btn{padding:10px 6px;border-radius:12px;border:none;font-size:12px;font-weight:800;cursor:pointer;font-family:var(--f);text-align:center;transition:all .2s}
.srs-rate-btn.again{background:rgba(239,68,68,.2);color:var(--red)}
.srs-rate-btn.hard{background:rgba(245,158,11,.2);color:var(--gold)}
.srs-rate-btn.good{background:rgba(37,99,235,.2);color:var(--p-lite)}
.srs-rate-btn.easy{background:rgba(16,185,129,.2);color:var(--ok)}
.srs-rate-btn:hover{transform:scale(1.05)}
.srs-empty{text-align:center;padding:3rem;color:var(--tx3)}
.srs-complete{background:linear-gradient(135deg,rgba(16,185,129,.15),rgba(5,150,105,.1));border:1px solid rgba(16,185,129,.3);border-radius:20px;padding:2rem;text-align:center;display:none}
.srs-complete.on{display:block}

/* ══════════════════════════════
 DECK MANAGER
══════════════════════════════ */
.deck-layout{padding:1.2rem;max-width:700px;margin:0 auto}
.deck-hero{background:linear-gradient(135deg,rgba(245,158,11,.15),rgba(249,115,22,.1));border:1px solid rgba(245,158,11,.3);border-radius:20px;padding:1.5rem;margin-bottom:1.2rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.8rem}
.deck-create-btn{padding:10px 20px;background:linear-gradient(135deg,var(--gold),#F97316);color:#fff;border:none;border-radius:10px;font-size:13px;font-weight:800;cursor:pointer;font-family:var(--f)}
.deck-search{width:100%;padding:10px 14px;border-radius:12px;border:1px solid var(--bd);background:var(--surface2);color:var(--tx);font-size:14px;font-family:var(--f);outline:none;margin-bottom:1rem}
.deck-search:focus{border-color:var(--gold)}
.deck-filter-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:1.2rem}
.deck-filter{padding:5px 14px;border-radius:20px;border:1px solid var(--bd);background:transparent;color:var(--tx2);font-size:11px;font-weight:800;cursor:pointer;font-family:var(--f);transition:all .2s}
.deck-filter.on{background:rgba(245,158,11,.15);border-color:rgba(245,158,11,.4);color:var(--gold)}
.deck-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem}
.deck-card{background:var(--card);border:1px solid var(--bd);border-radius:16px;padding:1.3rem;transition:all .2s;cursor:pointer}
.deck-card:hover{border-color:var(--bd2);transform:translateY(-2px)}
.deck-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.8rem}
.deck-card-icon{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.deck-card-title{font-size:14px;font-weight:800;color:var(--tx);margin-bottom:.2rem}
.deck-card-subtitle{font-size:11px;color:var(--tx3)}
.deck-card-stats{display:flex;gap:12px;margin-top:.8rem}
.deck-stat{font-size:11px;font-weight:700}
.deck-stat.total{color:var(--tx2)}
.deck-stat.due{color:var(--p-lite)}
.deck-stat.mastered{color:var(--ok)}
.deck-card-actions{display:flex;gap:6px;margin-top:.8rem}
.deck-act{padding:4px 10px;border-radius:7px;font-size:11px;font-weight:700;cursor:pointer;font-family:var(--f);border:1px solid var(--bd);background:transparent;color:var(--tx2);transition:all .2s}
.deck-act:hover{border-color:var(--p);color:var(--p-lite)}
.deck-act.del{border-color:rgba(239,68,68,.3);color:var(--red)}
.deck-tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:.6rem}
.deck-tag{font-size:10px;font-weight:700;padding:2px 8px;border-radius:10px;background:rgba(99,102,241,.15);color:#8B5CF6}
.deck-modal{position:fixed;inset:0;background:rgba(0,0,0,.8);z-index:500;display:none;align-items:center;justify-content:center;padding:1rem;backdrop-filter:blur(8px)}
.deck-modal.on{display:flex}
.deck-modal-card{background:var(--card);border-radius:20px;padding:1.5rem;max-width:420px;width:100%;border:1px solid var(--bd)}

/* ══════════════════════════════
 AI IMPORT CENTER
══════════════════════════════ */
.imp-layout{padding:1.2rem;max-width:700px;margin:0 auto}
.imp-hero{background:linear-gradient(135deg,rgba(16,185,129,.15),rgba(5,150,105,.1));border:1px solid rgba(16,185,129,.3);border-radius:20px;padding:1.5rem;text-align:center;margin-bottom:1.2rem}
.imp-source-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin-bottom:1.2rem}
.imp-source{background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:.8rem;text-align:center;cursor:pointer;transition:all .2s}
.imp-source:hover,.imp-source.on{border-color:rgba(16,185,129,.5);background:rgba(16,185,129,.08)}
.imp-source.on .imp-source-name{color:var(--ok)}
.imp-source-icon{font-size:22px;margin-bottom:.3rem}
.imp-source-name{font-size:11px;font-weight:800;color:var(--tx2)}
.imp-config{background:var(--card);border-radius:16px;padding:1.3rem;border:1px solid var(--bd);margin-bottom:1rem}
.imp-config h3{font-size:13px;font-weight:800;margin-bottom:.8rem}
.imp-textarea{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--bd);background:var(--surface2);color:var(--tx);font-size:13px;font-family:var(--f);resize:none;outline:none;height:120px;line-height:1.6}
.imp-textarea:focus{border-color:var(--ok)}
.imp-textarea::placeholder{color:var(--tx3)}
.imp-opts-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:.8rem}
.imp-opt{padding:6px 14px;border-radius:20px;border:1px solid var(--bd);background:transparent;color:var(--tx2);font-size:11px;font-weight:800;cursor:pointer;font-family:var(--f);transition:all .2s}
.imp-opt.on{background:rgba(16,185,129,.15);border-color:rgba(16,185,129,.4);color:var(--ok)}
.imp-generate-btn{width:100%;padding:13px;background:linear-gradient(135deg,var(--ok),#059669);color:#fff;border:none;border-radius:12px;font-size:15px;font-weight:800;font-family:var(--f);cursor:pointer;margin-bottom:1rem}
.imp-generate-btn:disabled{opacity:.5;cursor:default}
.imp-output{background:var(--card);border-radius:16px;padding:1.3rem;border:1px solid var(--bd);display:none}
.imp-output.on{display:block}

/* ══════════════════════════════
 ANALYTICS
══════════════════════════════ */
.ana-layout{padding:1.2rem;max-width:700px;margin:0 auto}
.ana-hero{background:linear-gradient(135deg,rgba(37,99,235,.2),rgba(6,182,212,.1));border:1px solid rgba(37,99,235,.3);border-radius:20px;padding:1.5rem;text-align:center;margin-bottom:1.2rem}
.ana-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1rem;margin-bottom:1.5rem}
.ana-card{background:var(--card);border-radius:16px;padding:1.2rem;border:1px solid var(--bd);text-align:center}
.ana-card-val{font-size:1.8rem;font-weight:900;font-family:var(--f2)}
.ana-card-lbl{font-size:11px;color:var(--tx3);font-weight:700;margin-top:.3rem}
.ana-section{background:var(--card);border-radius:16px;padding:1.3rem;border:1px solid var(--bd);margin-bottom:1rem}
.ana-section h3{font-size:13px;font-weight:800;margin-bottom:1rem;color:var(--tx2);text-transform:uppercase;letter-spacing:.06em}
.ana-subj-item{display:flex;align-items:center;gap:10px;margin-bottom:.8rem}
.ana-subj-name{font-size:13px;font-weight:700;width:120px;flex-shrink:0;color:var(--tx2)}
.ana-subj-bar{flex:1;height:8px;background:rgba(37,99,235,.15);border-radius:4px;overflow:hidden}
.ana-subj-fill{height:100%;border-radius:4px;transition:width 1s ease}
.ana-subj-pct{font-size:12px;font-weight:800;width:36px;text-align:right;flex-shrink:0}
.ana-rec{background:rgba(37,99,235,.08);border:1px solid rgba(37,99,235,.2);border-radius:12px;padding:1rem;font-size:13px;color:var(--p-lite);line-height:1.7}
.ana-heatmap{display:flex;gap:3px;flex-wrap:wrap}
.ana-hm-cell{width:14px;height:14px;border-radius:3px;background:rgba(37,99,235,.1)}
.ana-hm-cell.l1{background:rgba(37,99,235,.3)}
.ana-hm-cell.l2{background:rgba(37,99,235,.55)}
.ana-hm-cell.l3{background:rgba(37,99,235,.8)}
.ana-hm-cell.l4{background:var(--p)}

/* ══════════════════════════════
 PUBLIC DECKS
══════════════════════════════ */
.pub-layout{padding:1.2rem;max-width:700px;margin:0 auto}
.pub-hero{background:linear-gradient(135deg,rgba(99,102,241,.2),rgba(139,92,246,.1));border:1px solid rgba(99,102,241,.3);border-radius:20px;padding:1.5rem;text-align:center;margin-bottom:1.2rem}
.pub-tabs{display:flex;gap:6px;margin-bottom:1.2rem}
.pub-tab{flex:1;padding:10px;border-radius:12px;border:1px solid var(--bd);background:transparent;color:var(--tx2);font-size:13px;font-weight:800;cursor:pointer;font-family:var(--f);text-align:center;transition:all .2s}
.pub-tab.on{background:rgba(99,102,241,.2);border-color:rgba(99,102,241,.4);color:#8B5CF6}
.pub-deck-card{background:var(--card);border:1px solid var(--bd);border-radius:16px;padding:1.2rem;margin-bottom:.8rem;transition:all .2s}
.pub-deck-card:hover{border-color:var(--bd2)}
.pub-deck-header{display:flex;align-items:center;gap:12px;margin-bottom:.8rem}
.pub-deck-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.pub-deck-title{font-size:14px;font-weight:800;color:var(--tx);margin-bottom:.2rem}
.pub-deck-meta{font-size:12px;color:var(--tx3)}
.pub-deck-stats{display:flex;gap:12px;margin-bottom:.8rem}
.pub-deck-stat{font-size:12px;font-weight:700;color:var(--tx2)}
.pub-import-btn{padding:8px 18px;background:linear-gradient(135deg,#6366F1,#8B5CF6);color:#fff;border:none;border-radius:10px;font-size:12px;font-weight:800;cursor:pointer;font-family:var(--f)}
.pub-share-input{display:flex;gap:8px;margin-bottom:1rem}
.pub-share-field{flex:1;padding:10px 14px;border-radius:10px;border:1px solid var(--bd);background:var(--surface2);color:var(--tx);font-size:14px;font-family:var(--f);outline:none}
.pub-share-field:focus{border-color:#6366F1}


/* ══════════════════════
 TODAY DASHBOARD
══════════════════════ */
.today-card{background:linear-gradient(135deg,rgba(37,99,235,.15),rgba(99,102,241,.1));border:1px solid rgba(37,99,235,.25);border-radius:20px;padding:1.5rem;margin-bottom:1.5rem}
.today-greeting{font-size:1.1rem;font-weight:900;margin-bottom:.2rem}
.today-sub{font-size:12px;color:var(--tx2);margin-bottom:1.2rem}
.today-goals{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:.8rem;margin-bottom:1.2rem}
.today-goal{background:rgba(0,0,0,.2);border-radius:14px;padding:.9rem;text-align:center;border:1px solid rgba(255,255,255,.06)}
.today-goal-val{font-size:1.4rem;font-weight:900;font-family:var(--f2)}
.today-goal-lbl{font-size:10px;color:var(--tx3);font-weight:700;margin-top:.2rem}
.today-xp-bar{background:rgba(0,0,0,.2);border-radius:12px;padding:.8rem 1rem;margin-bottom:1rem}
.today-xp-label{display:flex;justify-content:space-between;font-size:12px;font-weight:700;margin-bottom:.5rem}
.today-xp-track{height:8px;background:rgba(37,99,235,.15);border-radius:4px;overflow:hidden}
.today-xp-fill{height:100%;background:linear-gradient(90deg,var(--p),#8B5CF6);border-radius:4px;transition:width .6s ease}
.today-actions{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}
.today-action{padding:.9rem;border-radius:14px;border:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.2);cursor:pointer;transition:all .2s;text-align:left}
.today-action:hover{border-color:rgba(37,99,235,.4);background:rgba(37,99,235,.08);transform:translateY(-2px)}
.today-action-icon{font-size:22px;margin-bottom:.4rem}
.today-action-title{font-size:13px;font-weight:800;color:var(--tx);margin-bottom:.1rem}
.today-action-sub{font-size:11px;color:var(--tx3)}
.today-streak-row{display:flex;align-items:center;gap:8px;margin-bottom:1rem;background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.2);border-radius:12px;padding:.7rem 1rem}
.today-streak-fire{font-size:22px}
.today-streak-info{flex:1}
.today-streak-num{font-size:1rem;font-weight:900;color:var(--gold)}
.today-streak-lbl{font-size:11px;color:var(--tx3)}
.today-continue-btn{width:100%;padding:13px;background:linear-gradient(135deg,var(--p),#8B5CF6);color:#fff;border:none;border-radius:14px;font-size:15px;font-weight:800;font-family:var(--f);cursor:pointer;box-shadow:var(--glow);transition:all .2s;margin-top:.5rem}
.today-continue-btn:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(37,99,235,.4)}

/* ══════════════════════
 COMMAND PALETTE
══════════════════════ */
.cmd-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:900;display:none;align-items:flex-start;justify-content:center;padding-top:15vh;backdrop-filter:blur(8px)}
.cmd-overlay.on{display:flex}
.cmd-box{background:var(--card);border-radius:20px;border:1px solid var(--bd2);width:100%;max-width:560px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.cmd-input-wrap{display:flex;align-items:center;gap:12px;padding:1rem 1.2rem;border-bottom:1px solid var(--bd)}
.cmd-icon{font-size:18px;color:var(--tx3);display:flex}
.cmd-icon svg{width:18px;height:18px}
.cmd-input{flex:1;background:transparent;border:none;outline:none;font-size:16px;font-family:var(--f);font-weight:600;color:var(--tx)}
.cmd-input::placeholder{color:var(--tx3)}
.cmd-hint{font-size:11px;font-weight:700;color:var(--tx3);background:rgba(255,255,255,.05);padding:2px 7px;border-radius:5px}
.cmd-results{max-height:360px;overflow-y:auto;padding:.5rem}
.cmd-section{font-size:10px;font-weight:800;color:var(--tx3);text-transform:uppercase;letter-spacing:.08em;padding:.5rem .8rem .3rem}
.cmd-item{display:flex;align-items:center;gap:12px;padding:.7rem .8rem;border-radius:10px;cursor:pointer;transition:all .15s}
.cmd-item:hover,.cmd-item.selected{background:rgba(37,99,235,.12);border:1px solid rgba(37,99,235,.2)}
.cmd-item-icon{width:32px;height:32px;border-radius:8px;background:rgba(37,99,235,.15);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.cmd-item-name{font-size:13px;font-weight:700;color:var(--tx)}
.cmd-item-sub{font-size:11px;color:var(--tx3)}
.cmd-shortcut{font-size:11px;font-weight:700;color:var(--tx3);background:rgba(255,255,255,.05);padding:2px 7px;border-radius:5px;margin-left:auto}

/* ══════════════════════
 SHARE CARD
══════════════════════ */
.share-card-overlay{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:900;display:none;align-items:center;justify-content:center;padding:1rem;backdrop-filter:blur(8px)}
.share-card-overlay.on{display:flex}
.share-card{background:linear-gradient(135deg,#0F172A,#1E293B);border:1px solid rgba(37,99,235,.3);border-radius:24px;padding:2rem;width:100%;max-width:380px;text-align:center;box-shadow:0 24px 60px rgba(0,0,0,.6)}
.share-card-logo{font-size:13px;font-weight:800;color:var(--tx3);margin-bottom:1.5rem;letter-spacing:.1em;text-transform:uppercase}
.share-card-name{font-size:1.4rem;font-weight:900;color:#fff;margin-bottom:.3rem}
.share-card-rank{font-size:14px;color:var(--p-lite);margin-bottom:1.5rem}
.share-card-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin-bottom:1.5rem}
.share-card-stat{background:rgba(37,99,235,.1);border-radius:14px;padding:.8rem}
.share-card-stat-val{font-size:1.3rem;font-weight:900;color:var(--p-lite);font-family:var(--f2)}
.share-card-stat-lbl{font-size:10px;color:var(--tx3);font-weight:700;margin-top:.2rem}
.share-card-badge{display:inline-block;background:linear-gradient(135deg,var(--p),#8B5CF6);color:#fff;font-size:13px;font-weight:800;padding:6px 18px;border-radius:20px;margin-bottom:1.5rem}
.share-card-footer{font-size:11px;color:var(--tx3);font-weight:600}
.share-card-actions{display:flex;gap:8px;justify-content:center;margin-top:1.2rem}

/* ══════════════════════
 MEME ACHIEVEMENTS 
══════════════════════ */
.meme-ach-popup{position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(100px);background:linear-gradient(135deg,#1E293B,#0F172A);border:1px solid rgba(245,158,11,.4);border-radius:20px;padding:1.2rem 2rem;text-align:center;z-index:800;transition:all .4s cubic-bezier(.34,1.56,.64,1);opacity:0;min-width:260px}
.meme-ach-popup.show{transform:translateX(-50%) translateY(0);opacity:1}
.meme-ach-icon{font-size:36px;margin-bottom:.4rem;display:flex;align-items:center;justify-content:center;color:var(--gold)}
.meme-ach-title{font-size:11px;font-weight:800;color:var(--gold);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.2rem}
.meme-ach-name{font-size:16px;font-weight:900;color:#fff}

/* ══════════════════════
 LANDING PAGE V2
══════════════════════ */
.lp-activity-feed{background:rgba(0,0,0,.3);border:1px solid var(--bd);border-radius:16px;padding:1rem;max-width:380px;margin:0 auto}
.lp-activity-item{display:flex;align-items:center;gap:10px;padding:.4rem 0;font-size:12px;color:var(--tx2);border-bottom:1px solid var(--surface2)}
.lp-activity-item:last-child{border:none}
.lp-activity-dot{width:6px;height:6px;border-radius:50%;background:var(--ok);flex-shrink:0}
.lp-counter-row{display:flex;gap:2rem;justify-content:center;margin-bottom:2rem;flex-wrap:wrap}
.lp-counter{text-align:center}
.lp-counter-num{font-size:2rem;font-weight:900;color:var(--p-lite);font-family:var(--f2)}
.lp-counter-lbl{font-size:11px;color:var(--tx2);font-weight:700}

/* ══════════════════════
 NOTIFICATION TOAST V2
══════════════════════ */
.toast-stack{position:fixed;top:20px;right:20px;z-index:950;display:flex;flex-direction:column;gap:8px;max-width:420px;width:calc(100vw - 40px)}
.toast{background:var(--card2);border:1px solid var(--bd2);border-radius:14px;padding:.8rem 1.2rem;font-size:13px;font-weight:700;color:var(--tx);box-shadow:0 8px 30px rgba(0,0,0,.4);transform:translateX(120%);transition:transform .3s cubic-bezier(.34,1.56,.64,1);display:flex;align-items:flex-start;gap:10px;white-space:normal;word-break:break-word;line-height:1.5}
.toast.show{transform:translateX(0)}
.toast.success{border-color:rgba(16,185,129,.4);background:rgba(16,185,129,.1)}
.toast.success i{color:var(--ok)}
.toast.error{border-color:rgba(239,68,68,.4);background:rgba(239,68,68,.1)}
.toast.error i{color:var(--red)}
.toast.info{border-color:rgba(37,99,235,.4);background:rgba(37,99,235,.1)}
.toast.info i{color:var(--p-lite)}
.toast.xp{border-color:rgba(245,158,11,.4);background:rgba(245,158,11,.1)}
.toast.xp i{color:var(--gold)}
.toast i{flex-shrink:0;margin-top:1px}

/* ══════════════════════
 MOBILE IMPROVEMENTS
══════════════════════ */
.fab{position:fixed;bottom:24px;right:20px;width:54px;height:54px;border-radius:50%;background:linear-gradient(135deg,var(--p),#8B5CF6);border:none;color:#fff;font-size:22px;cursor:pointer;box-shadow:0 6px 24px rgba(37,99,235,.4);z-index:100;display:none;align-items:center;justify-content:center;transition:all .2s}
.fab svg{width:24px;height:24px}
.fab:hover{transform:scale(1.1)}
@media(max-width:480px){body.app-active .fab{display:flex}}
.bottom-nav{position:fixed;bottom:0;left:0;right:0;height:60px;background:var(--bg2);border-top:1px solid var(--bd);display:none;align-items:center;justify-content:space-around;z-index:100;padding-bottom:env(safe-area-inset-bottom)}
@media(max-width:480px){body.app-active .bottom-nav{display:flex}body.app-active .app-main{padding-bottom:70px}}
.bnav-btn{display:flex;flex-direction:column;align-items:center;gap:2px;background:none;border:none;cursor:pointer;padding:6px 12px;border-radius:10px;transition:all .2s;color:var(--tx3)}
.bnav-btn.on{color:var(--p)}
.bnav-btn-icon{font-size:20px;display:flex}
.bnav-btn-icon svg{width:20px;height:20px;stroke-width:2}
.bnav-btn.on .bnav-btn-icon svg{stroke:var(--p)}
.bnav-btn-lbl{font-size:9px;font-weight:700}

/* ══════════════════════
 KEYBOARD SHORTCUT HINT
══════════════════════ */
.kbd{font-size:10px;font-weight:700;color:var(--tx3);background:rgba(255,255,255,.05);border:1px solid var(--bd);padding:1px 6px;border-radius:5px;font-family:monospace}


@media(max-width:480px){
 .fc-card{min-height:200px;padding:1.5rem}
 .fc-act-btn{padding:16px 8px;font-size:14px;border-radius:16px}
 .fc-nav-btn{width:56px;height:56px;font-size:20px}
 .fc-btn-row{gap:10px}
}

/* ══════════════════════
 LANGUAGE SELECTOR
══════════════════════ */
.lang-selector{display:flex;align-items:center;gap:8px;margin-bottom:.8rem;flex-wrap:wrap}
.lang-selector label{font-size:12px;font-weight:800;color:var(--tx2);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.lang-btn{padding:6px 14px;border-radius:20px;border:1px solid var(--bd);background:transparent;color:var(--tx2);font-size:12px;font-weight:700;cursor:pointer;font-family:var(--f);transition:all .2s}
.lang-btn.on{background:rgba(37,99,235,.2);border-color:rgba(37,99,235,.5);color:var(--p-lite)}
.lang-detect-badge{font-size:11px;font-weight:700;color:var(--ok);background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.2);padding:3px 10px;border-radius:20px;display:none}
.lang-detect-badge.on{display:inline-block}


@media(min-width:601px) and (max-width:900px){
 .sidebar{width:56px}
 .app-main{margin-left:56px}
 .side-btn{width:40px;height:40px;}
 .side-btn svg{width:18px;height:18px;}
 .ep-grid{grid-template-columns:repeat(3,1fr)}
 .calc-grid{grid-template-columns:repeat(3,1fr)}
}

/* ════════════════════════════
 NIBBLE MODE
════════════════════════════ */
.nibble-layout{display:flex;flex-direction:column;height:calc(100vh - 57px);overflow:hidden;background:var(--bg)}
.nibble-top{padding:.8rem 1rem;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--bd);flex-shrink:0;background:var(--bg2)}
.nibble-top-title{font-size:16px;font-weight:900;display:flex;align-items:center;gap:8px}
.nibble-top-right{display:flex;align-items:center;gap:8px}
.nibble-xp-pill{background:linear-gradient(135deg,rgba(245,158,11,.2),rgba(249,115,22,.1));border:1px solid rgba(245,158,11,.3);color:var(--gold);font-size:12px;font-weight:800;padding:4px 12px;border-radius:20px}
.nibble-topic-bar{padding:.6rem 1rem;background:var(--bg2);border-bottom:1px solid var(--bd);flex-shrink:0}
.nibble-topic-scroll{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.nibble-topic-scroll::-webkit-scrollbar{display:none}
.nibble-topic-btn{padding:6px 14px;border-radius:20px;border:1px solid var(--bd);background:transparent;color:var(--tx2);font-size:12px;font-weight:700;cursor:pointer;font-family:var(--f);white-space:nowrap;transition:all .2s;flex-shrink:0}
.nibble-topic-btn.on{background:linear-gradient(135deg,var(--p),#8B5CF6);color:#fff;border-color:transparent;box-shadow:0 2px 12px rgba(37,99,235,.3)}
.nibble-feed{flex:1;overflow-y:scroll;scroll-snap-type:y mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.nibble-feed::-webkit-scrollbar{display:none}
.nibble-card{scroll-snap-align:start;min-height:calc(100vh - 57px - 48px - 48px);padding:1rem;display:flex;flex-direction:column;justify-content:center;position:relative;border-bottom:2px solid var(--bd)}
.nibble-card-inner{background:linear-gradient(135deg,rgba(37,99,235,.08),rgba(99,102,241,.05));border:1px solid rgba(37,99,235,.15);border-radius:24px;padding:1.5rem;position:relative;overflow:hidden}
.nibble-card-inner::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(37,99,235,.03) 0%,transparent 70%);pointer-events:none}
.nibble-card-type{font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.1em;padding:3px 10px;border-radius:20px;display:inline-block;margin-bottom:.8rem}
.nibble-card-type.concept{background:rgba(37,99,235,.15);color:var(--p-lite)}
.nibble-card-type.mnemonic{background:rgba(245,158,11,.15);color:var(--gold)}
.nibble-card-type.pearl{background:rgba(16,185,129,.15);color:var(--ok)}
.nibble-card-type.mcq{background:rgba(99,102,241,.15);color:#8B5CF6}
.nibble-card-type.case{background:rgba(239,68,68,.15);color:var(--red)}
.nibble-card-type.drug{background:rgba(168,85,247,.15);color:#C084FC}
.nibble-card-title{font-size:1.1rem;font-weight:900;color:#fff;margin-bottom:.8rem;line-height:1.3}
.nibble-card-body{font-size:14px;color:var(--tx2);line-height:1.8;margin-bottom:1rem}
.nibble-card-highlight{background:rgba(37,99,235,.1);border-left:3px solid var(--p);border-radius:0 10px 10px 0;padding:.7rem 1rem;margin-bottom:.8rem;font-size:13px;color:var(--p-lite);font-weight:600}
.nibble-card-mnemonic{background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.2);border-radius:12px;padding:.8rem 1rem;margin-bottom:.8rem;font-size:13px;color:var(--gold)}
.nibble-mcq{margin-top:.8rem}
.nibble-mcq-q{font-size:13px;font-weight:700;color:var(--tx);margin-bottom:.6rem}
.nibble-mcq-opts{display:flex;flex-direction:column;gap:6px}
.nibble-mcq-opt{padding:9px 14px;border-radius:10px;border:1px solid var(--bd);background:rgba(255,255,255,.03);color:var(--tx2);font-size:13px;font-weight:600;cursor:pointer;font-family:var(--f);text-align:left;transition:all .15s}
.nibble-mcq-opt:hover{border-color:rgba(37,99,235,.4);background:rgba(37,99,235,.08)}
.nibble-mcq-opt.correct{border-color:var(--ok);background:rgba(16,185,129,.12);color:var(--ok)}
.nibble-mcq-opt.wrong{border-color:var(--red);background:rgba(239,68,68,.1);color:var(--red)}
.nibble-actions{display:flex;gap:8px;margin-top:1rem;flex-wrap:wrap}
.nibble-act{padding:8px 16px;border-radius:20px;border:1px solid var(--bd);background:transparent;color:var(--tx2);font-size:12px;font-weight:700;cursor:pointer;font-family:var(--f);transition:all .2s;display:flex;align-items:center;gap:5px}
.nibble-act:hover{border-color:var(--p);color:var(--p-lite);background:rgba(37,99,235,.08)}
.nibble-act.saved{border-color:var(--gold);color:var(--gold);background:rgba(245,158,11,.08)}
.nibble-nav{position:sticky;bottom:0;display:flex;align-items:center;justify-content:space-between;padding:.8rem 1rem;background:var(--bg2);border-top:1px solid var(--bd);flex-shrink:0}
.nibble-nav-btn{width:44px;height:44px;border-radius:50%;background:rgba(37,99,235,.1);border:1px solid rgba(37,99,235,.2);color:var(--p-lite);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;font-family:var(--f)}
.nibble-nav-btn:hover{background:rgba(37,99,235,.2);transform:scale(1.05)}
.nibble-progress{flex:1;height:4px;background:rgba(37,99,235,.15);border-radius:2px;margin:0 1rem;overflow:hidden}
.nibble-progress-fill{height:100%;background:linear-gradient(90deg,var(--p),#8B5CF6);border-radius:2px;transition:width .3s ease}
.nibble-card-num{font-size:12px;font-weight:800;color:var(--tx3)}
.nibble-setup{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:2rem;text-align:center}
.nibble-setup-icon{font-size:64px;margin-bottom:1rem;animation:pulse 2s infinite;display:flex;align-items:center;justify-content:center}
.nibble-setup-icon svg{width:56px;height:56px;color:var(--gold);fill:rgba(245,158,11,.15)}
.nibble-gen-btn{padding:14px 32px;background:linear-gradient(135deg,var(--p),#8B5CF6);color:#fff;border:none;border-radius:16px;font-size:16px;font-weight:900;cursor:pointer;font-family:var(--f);box-shadow:0 4px 20px rgba(37,99,235,.4);transition:all .2s;margin-top:1.5rem}
.nibble-gen-btn:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(37,99,235,.5)}
.nibble-gen-btn:disabled{opacity:.5;cursor:default;transform:none}
.nibble-custom-input{width:100%;max-width:400px;padding:12px 16px;border-radius:14px;border:1px solid var(--bd);background:var(--surface2);color:var(--tx);font-size:15px;font-family:var(--f);outline:none;margin-bottom:1rem;text-align:center}
.nibble-custom-input:focus{border-color:var(--p)}
.nibble-mode-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:1rem}
.nibble-mode-btn{padding:8px 16px;border-radius:20px;border:1px solid var(--bd);background:transparent;color:var(--tx2);font-size:12px;font-weight:800;cursor:pointer;font-family:var(--f);transition:all .2s}
.nibble-mode-btn.on{background:rgba(37,99,235,.2);border-color:rgba(37,99,235,.5);color:var(--p-lite)}
.nibble-streak-banner{position:absolute;top:1rem;right:1rem;background:linear-gradient(135deg,rgba(245,158,11,.9),rgba(249,115,22,.9));color:#fff;font-size:12px;font-weight:900;padding:5px 12px;border-radius:20px;animation:slideIn .3s ease}
@keyframes slideIn{from{transform:translateX(20px);opacity:0}to{transform:translateX(0);opacity:1}}
.nibble-xp-burst{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);font-size:2rem;font-weight:900;color:var(--gold);pointer-events:none;animation:xpBurst 1s ease forwards;z-index:999}
@keyframes xpBurst{0%{opacity:1;transform:translate(-50%,-50%) scale(.5)}50%{opacity:1;transform:translate(-50%,-70%) scale(1.2)}100%{opacity:0;transform:translate(-50%,-100%) scale(1)}}
.nibble-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:3rem;height:100%}
.nibble-voice-btn{background:rgba(37,99,235,.15);border:1px solid rgba(37,99,235,.3);color:var(--p-lite);padding:8px 16px;border-radius:20px;font-size:12px;font-weight:800;cursor:pointer;font-family:var(--f);transition:all .2s}
.nibble-voice-btn.playing{background:rgba(239,68,68,.15);border-color:rgba(239,68,68,.3);color:var(--red)}


/* ════════════════════════════
 GROWTH MODE
════════════════════════════ */
.growth-layout{padding:0;max-width:100%;overflow-x:hidden}
.growth-hero{background:linear-gradient(135deg,rgba(16,185,129,.2),rgba(5,150,105,.1),rgba(37,99,235,.1));border-bottom:1px solid rgba(16,185,129,.2);padding:1.5rem 1.2rem;position:relative;overflow:hidden}
.growth-hero::after{content:'';position:absolute;right:1rem;top:50%;transform:translateY(-50%);font-size:64px;opacity:.15}
.growth-hero h2{font-size:1.3rem;font-weight:900;margin-bottom:.2rem}
.growth-hero p{font-size:12px;color:var(--tx2)}
.growth-tabs{display:flex;gap:4px;padding:.6rem .8rem;background:var(--bg2);border-bottom:1px solid var(--bd);overflow-x:auto;scrollbar-width:none}
.growth-tabs::-webkit-scrollbar{display:none}
.growth-tab{padding:7px 14px;border-radius:20px;border:1px solid var(--bd);background:transparent;color:var(--tx2);font-size:12px;font-weight:800;cursor:pointer;font-family:var(--f);white-space:nowrap;transition:all .2s;flex-shrink:0}
.growth-tab.on{background:linear-gradient(135deg,var(--ok),#059669);color:#fff;border-color:transparent;box-shadow:0 2px 12px rgba(16,185,129,.3)}
.growth-content{padding:1rem;max-width:700px;margin:0 auto}

/* Dashboard */
.growth-greeting{font-size:1.1rem;font-weight:900;margin-bottom:.3rem}
.growth-level-card{background:linear-gradient(135deg,rgba(16,185,129,.15),rgba(37,99,235,.08));border:1px solid rgba(16,185,129,.2);border-radius:20px;padding:1.3rem;margin-bottom:1.2rem;display:flex;align-items:center;gap:14px}
.growth-level-badge{width:56px;height:56px;border-radius:16px;background:linear-gradient(135deg,var(--ok),#059669);display:flex;align-items:center;justify-content:center;font-size:26px;flex-shrink:0;box-shadow:0 4px 16px rgba(16,185,129,.3)}
.growth-level-name{font-size:15px;font-weight:900;color:var(--tx);margin-bottom:.2rem}
.growth-level-sub{font-size:11px;color:var(--tx2)}
.growth-xp-bar{height:6px;background:rgba(16,185,129,.15);border-radius:3px;margin-top:.5rem;overflow:hidden}
.growth-xp-fill{height:100%;background:linear-gradient(90deg,var(--ok),#059669);border-radius:3px;transition:width .6s ease}
.growth-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin-bottom:1.2rem}
.growth-stat{background:var(--card);border-radius:14px;padding:.9rem;text-align:center;border:1px solid var(--bd)}
.growth-stat-val{font-size:1.4rem;font-weight:900;font-family:var(--f2)}
.growth-stat-lbl{font-size:10px;color:var(--tx3);font-weight:700;margin-top:.2rem}

/* Habits */
.habit-card{background:var(--card);border-radius:16px;padding:1.2rem;border:1px solid var(--bd);margin-bottom:.8rem}
.habit-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.8rem}
.habit-title{font-size:14px;font-weight:800;display:flex;align-items:center;gap:8px}
.habit-streak{font-size:12px;font-weight:800;color:var(--gold);background:rgba(245,158,11,.1);padding:3px 10px;border-radius:20px}
.habit-check-row{display:flex;gap:6px;flex-wrap:wrap}
.habit-day{width:34px;height:34px;border-radius:10px;border:1.5px solid var(--bd);background:transparent;color:var(--tx3);font-size:11px;font-weight:800;cursor:pointer;font-family:var(--f);transition:all .2s;display:flex;align-items:center;justify-content:center}
.habit-day.done{background:linear-gradient(135deg,var(--ok),#059669);border-color:transparent;color:#fff;box-shadow:0 2px 8px rgba(16,185,129,.3)}
.habit-day.today{border-color:var(--ok);color:var(--ok)}
.habit-progress{height:4px;background:rgba(16,185,129,.15);border-radius:2px;margin-top:.8rem;overflow:hidden}
.habit-progress-fill{height:100%;background:linear-gradient(90deg,var(--ok),#059669);border-radius:2px;transition:width .4s ease}

/* Lock-in Mode */
.lockin-overlay{position:fixed;inset:0;background:#000;z-index:800;display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.lockin-overlay.on{display:flex}
.lockin-timer{font-size:5rem;font-weight:900;color:var(--p-lite);font-family:var(--f2);text-shadow:0 0 30px rgba(37,99,235,.5);margin-bottom:1rem;line-height:1}
.lockin-label{font-size:14px;font-weight:700;color:rgba(255,255,255,.5);margin-bottom:2rem;letter-spacing:.1em;text-transform:uppercase}
.lockin-phase{font-size:18px;font-weight:900;color:var(--ok);margin-bottom:.5rem}
.lockin-quote{font-size:13px;color:rgba(255,255,255,.4);max-width:300px;margin:0 auto 2rem;line-height:1.6;font-style:italic}
.lockin-controls{display:flex;gap:12px;margin-bottom:2rem}
.lockin-btn{padding:12px 28px;border-radius:14px;font-size:14px;font-weight:800;cursor:pointer;font-family:var(--f);border:none;transition:all .2s}
.lockin-btn.primary{background:linear-gradient(135deg,var(--p),#8B5CF6);color:#fff}
.lockin-btn.secondary{background:rgba(255,255,255,.08);color:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.1)}
.lockin-progress{width:200px;height:4px;background:rgba(255,255,255,.1);border-radius:2px;overflow:hidden;margin-bottom:1rem}
.lockin-progress-fill{height:100%;background:linear-gradient(90deg,var(--p),#8B5CF6);border-radius:2px;transition:width .5s ease}
.lockin-sessions{font-size:12px;color:rgba(255,255,255,.3);margin-bottom:.5rem}
.lockin-ring{width:160px;height:160px;position:relative;margin:0 auto 1.5rem}
.lockin-ring svg{transform:rotate(-90deg)}
.lockin-ring-bg{fill:none;stroke:rgba(37,99,235,.15);stroke-width:8}
.lockin-ring-fill{fill:none;stroke:url(#ringGrad);stroke-width:8;stroke-linecap:round;transition:stroke-dashoffset 1s linear}

/* AI Coach */
.coach-chat{background:var(--card);border-radius:16px;border:1px solid var(--bd);overflow:hidden;margin-bottom:1rem}
.coach-header{background:linear-gradient(135deg,rgba(16,185,129,.15),rgba(37,99,235,.08));padding:1rem 1.2rem;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--bd)}
.coach-avatar{width:44px;height:44px;border-radius:14px;background:linear-gradient(135deg,var(--ok),#059669);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.coach-name{font-size:14px;font-weight:900;color:var(--tx)}
.coach-status{font-size:11px;color:var(--ok);font-weight:700}
.coach-msgs{height:280px;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.8rem}
.coach-msg{max-width:85%;padding:.8rem 1rem;border-radius:14px;font-size:13px;line-height:1.6}
.coach-msg.ai{background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.2);color:var(--tx2);align-self:flex-start;border-radius:4px 14px 14px 14px}
.coach-msg.user{background:linear-gradient(135deg,var(--p),#8B5CF6);color:#fff;align-self:flex-end;border-radius:14px 14px 4px 14px}
.coach-input-row{display:flex;gap:8px;padding:.8rem;border-top:1px solid var(--bd)}
.coach-input{flex:1;padding:9px 14px;border-radius:10px;border:1px solid var(--bd);background:var(--surface2);color:var(--tx);font-size:13px;font-family:var(--f);outline:none}
.coach-input:focus{border-color:var(--ok)}
.coach-send{padding:9px 16px;background:linear-gradient(135deg,var(--ok),#059669);color:#fff;border:none;border-radius:10px;font-size:13px;font-weight:800;cursor:pointer;font-family:var(--f)}
.coach-quick-btns{display:flex;gap:6px;flex-wrap:wrap;padding:.6rem 1rem;border-top:1px solid var(--bd)}
.coach-quick{padding:5px 12px;border-radius:20px;border:1px solid rgba(16,185,129,.2);background:rgba(16,185,129,.06);color:var(--ok);font-size:11px;font-weight:700;cursor:pointer;font-family:var(--f);transition:all .2s;white-space:nowrap}
.coach-quick:hover{background:rgba(16,185,129,.15)}

/* Mood tracker */
.mood-row{display:flex;gap:8px;justify-content:center;margin-bottom:1rem}
.mood-btn{width:52px;height:52px;border-radius:16px;border:1.5px solid var(--bd);background:transparent;font-size:24px;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center}
.mood-btn:hover,.mood-btn.on{transform:scale(1.15);border-color:var(--ok);background:rgba(16,185,129,.1)}

/* Focus score ring */
.focus-ring-wrap{text-align:center;padding:1.2rem}
.focus-score-num{font-size:2.5rem;font-weight:900;color:var(--ok);font-family:var(--f2)}
.focus-score-lbl{font-size:12px;color:var(--tx3);font-weight:700}

/* Motivation feed */
.motiv-card{background:linear-gradient(135deg,rgba(99,102,241,.1),rgba(37,99,235,.05));border:1px solid rgba(99,102,241,.2);border-radius:16px;padding:1.2rem;margin-bottom:.8rem;cursor:pointer;transition:all .2s}
.motiv-card:hover{transform:translateY(-2px);border-color:rgba(99,102,241,.4)}
.motiv-card-emoji{font-size:28px;margin-bottom:.6rem}
.motiv-card-text{font-size:14px;font-weight:700;color:var(--tx);line-height:1.6;margin-bottom:.4rem}
.motiv-card-author{font-size:11px;color:var(--tx3);font-weight:600}

/* Exam countdown */
.countdown-card{background:linear-gradient(135deg,rgba(239,68,68,.1),rgba(220,38,38,.05));border:1px solid rgba(239,68,68,.2);border-radius:16px;padding:1.2rem;margin-bottom:.8rem}
.countdown-days{font-size:2.5rem;font-weight:900;color:var(--red);font-family:var(--f2)}
.countdown-label{font-size:13px;color:var(--tx2);font-weight:700}
.countdown-urgency{font-size:11px;font-weight:800;padding:3px 10px;border-radius:20px;display:inline-block;margin-top:.4rem}


.trans-lang-btn{padding:5px 12px;border-radius:20px;border:1px solid rgba(245,158,11,.3);background:transparent;color:var(--tx2);font-size:11px;font-weight:700;cursor:pointer;font-family:var(--f);transition:all .2s}
.trans-lang-btn.on{background:rgba(245,158,11,.2);border-color:var(--gold);color:var(--gold)}

.trans-lang-btn{padding:5px 12px;border-radius:20px;border:1px solid rgba(245,158,11,.3);background:transparent;color:var(--tx2);font-size:11px;font-weight:700;cursor:pointer;font-family:var(--f);transition:all .2s}
.trans-lang-btn.on{background:rgba(245,158,11,.2);border-color:var(--gold);color:var(--gold)}

/* ════════════════════════════════════════
 FRAMER-MOTION STYLE ANIMATIONS
════════════════════════════════════════ */

/* Page transitions */
.tab-panel.on {
 animation: panelFadeIn .3s cubic-bezier(.4,0,.2,1) both;
}
@keyframes panelFadeIn {
 from { opacity:0; transform:translateY(12px); }
 to { opacity:1; transform:translateY(0); }
}

/* Card hover spring effect */
.today-action, .dash-stat, .growth-stat, .habit-card,
.motiv-card, .nibble-card-inner, .fc-card, .deck-card,
.ep-subj-card, .sim-type-card, .mock-exam-card {
 transition: transform .2s cubic-bezier(.34,1.56,.64,1),
 box-shadow .2s ease,
 border-color .2s ease !important;
}
.today-action:hover, .dash-stat:hover, .growth-stat:hover,
.motiv-card:hover, .deck-card:hover, .ep-subj-card:hover,
.sim-type-card:hover, .mock-exam-card:hover {
 transform: translateY(-4px) scale(1.02) !important;
 box-shadow: 0 12px 32px rgba(37,99,235,.2) !important;
}
.fc-card:hover {
 transform: translateY(-4px) !important;
 box-shadow: 0 16px 40px rgba(37,99,235,.25) !important;
}

/* Button spring press */
button, .side-btn, .lec-tab-btn, .growth-tab,
.nibble-topic-btn, .nibble-gen-btn, .lang-btn {
 transition: transform .15s cubic-bezier(.34,1.56,.64,1),
 opacity .15s ease,
 background .2s ease,
 border-color .2s ease !important;
}
button:active, .side-btn:active {
 transform: scale(0.93) !important;
}

/* Scroll reveal animation */
.reveal {
 opacity: 0;
 transform: translateY(20px);
 transition: opacity .5s cubic-bezier(.4,0,.2,1),
 transform .5s cubic-bezier(.4,0,.2,1);
}
.reveal.visible {
 opacity: 1;
 transform: translateY(0);
}

/* Stagger children */
.stagger-children > * {
 opacity: 0;
 transform: translateY(16px);
 animation: staggerIn .4s cubic-bezier(.4,0,.2,1) forwards;
}
.stagger-children > *:nth-child(1) { animation-delay:.05s; }
.stagger-children > *:nth-child(2) { animation-delay:.1s; }
.stagger-children > *:nth-child(3) { animation-delay:.15s; }
.stagger-children > *:nth-child(4) { animation-delay:.2s; }
.stagger-children > *:nth-child(5) { animation-delay:.25s; }
.stagger-children > *:nth-child(6) { animation-delay:.3s; }
@keyframes staggerIn {
 to { opacity:1; transform:translateY(0); }
}

/* XP burst */
@keyframes xpFloat {
 0% { opacity:1; transform:translateY(0) scale(1); }
 50% { opacity:1; transform:translateY(-30px) scale(1.3); }
 100% { opacity:0; transform:translateY(-60px) scale(1); }
}
.xp-float {
 position:fixed; pointer-events:none; z-index:999;
 font-size:18px; font-weight:900; color:var(--gold);
 animation: xpFloat .9s cubic-bezier(.4,0,.2,1) forwards;
}

/* Panel slide in from right */
@keyframes slideInRight {
 from { opacity:0; transform:translateX(30px); }
 to { opacity:1; transform:translateX(0); }
}
@keyframes slideInLeft {
 from { opacity:0; transform:translateX(-30px); }
 to { opacity:1; transform:translateX(0); }
}
@keyframes slideInUp {
 from { opacity:0; transform:translateY(30px); }
 to { opacity:1; transform:translateY(0); }
}
@keyframes popIn {
 0% { opacity:0; transform:scale(.8); }
 70% { transform:scale(1.05); }
 100% { opacity:1; transform:scale(1); }
}

/* Toast animation */
.toast {
 animation: slideInRight .35s cubic-bezier(.34,1.56,.64,1) !important;
}

/* Sidebar button active glow */
.side-btn.on {
 animation: glowPulse 2s ease infinite;
}
@keyframes glowPulse {
 0%, 100% { box-shadow: 0 0 8px rgba(37,99,235,.3); }
 50% { box-shadow: 0 0 16px rgba(37,99,235,.6); }
}

/* Flashcard flip */
.fc-card {
 transition: transform .5s cubic-bezier(.4,0,.2,1) !important;
}

/* Number counter animation */
.count-up {
 animation: countUp .6s cubic-bezier(.4,0,.2,1);
}
@keyframes countUp {
 from { transform:translateY(8px); opacity:0; }
 to { transform:translateY(0); opacity:1; }
}

/* Loading skeleton shimmer */
.skeleton {
 background: linear-gradient(90deg,
 var(--surface2) 25%,
 rgba(255,255,255,.1) 50%,
 var(--surface2) 75%);
 background-size: 200% 100%;
 animation: shimmer 1.5s infinite;
 border-radius: 8px;
}
@keyframes shimmer {
 from { background-position: 200% 0; }
 to { background-position: -200% 0; }
}

/* Typing dots */
@keyframes typingBounce {
 0%, 60%, 100% { transform:translateY(0); }
 30% { transform:translateY(-6px); }
}

/* Progress bar fill */
.growth-xp-fill, .today-xp-fill, .nibble-progress-fill,
.habit-progress-fill, .lockin-progress-fill {
 transition: width .8s cubic-bezier(.4,0,.2,1) !important;
}

/* Score ring */
.lockin-ring-fill {
 transition: stroke-dashoffset 1s cubic-bezier(.4,0,.2,1) !important;
}

/* Landing page hero */
.hero-title {
 animation: heroFadeUp .8s cubic-bezier(.4,0,.2,1) .1s both;
}
.hero-sub {
 animation: heroFadeUp .8s cubic-bezier(.4,0,.2,1) .25s both;
}
.hero-btns {
 animation: heroFadeUp .8s cubic-bezier(.4,0,.2,1) .4s both;
}
@keyframes heroFadeUp {
 from { opacity:0; transform:translateY(24px); }
 to { opacity:1; transform:translateY(0); }
}

/* Nibble card scroll snap animation */
.nibble-card {
 transition: opacity .3s ease;
}

/* Achievement popup */
.meme-ach-popup.show {
 animation: popIn .4s cubic-bezier(.34,1.56,.64,1) !important;
}

/* Modal */
.modal-box {
 animation: popIn .35s cubic-bezier(.34,1.56,.64,1) !important;
}

/* Smooth sidebar */
.sidebar {
 transition: width .3s cubic-bezier(.4,0,.2,1) !important;
}


/* Premium pill tabs */
.pill-tabs{display:flex;gap:0;background:var(--surface2);border:1px solid var(--bd);border-radius:14px;padding:4px;width:fit-content}
.pill-tab{padding:8px 20px;border-radius:10px;border:none;background:transparent;color:var(--tx2);font-size:13px;font-weight:700;cursor:pointer;font-family:var(--f);transition:all .25s cubic-bezier(.4,0,.2,1)}
.pill-tab.on{background:linear-gradient(135deg,var(--p),#8B5CF6);color:#fff;box-shadow:0 2px 14px rgba(37,99,235,.35)}
.pill-tab:hover:not(.on){background:rgba(255,255,255,.06);color:var(--tx)}

/* ═══ POLISH PASS: professional feel ═══ */
button{transition:transform .15s ease, box-shadow .15s ease, background .2s ease, border-color .2s ease}
button:active{transform:scale(.97)}
button:focus-visible{outline:2px solid var(--p);outline-offset:2px}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:none;border-color:var(--p)!important;box-shadow:0 0 0 3px rgba(37,99,235,.15)}
input,textarea,select{transition:border-color .2s ease, box-shadow .2s ease}

/* Smoother scrolling everywhere */
html{scroll-behavior:smooth}
.tab-panel{scrollbar-gutter:stable}

/* Card hover lift */
.dash-card,.ep-card,.calc-card{transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}
.dash-card:hover,.ep-card:hover,.calc-card:hover{transform:translateY(-2px);border-color:var(--bd2);box-shadow:0 8px 24px rgba(0,0,0,.35)}

/* Better selection color */
::selection{background:rgba(37,99,235,.3);color:#fff}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* Skeleton shimmer for loading states */
.skeleton{background:linear-gradient(90deg,var(--card) 25%,var(--card2) 50%,var(--card) 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:10px}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ═══ HEADER ICONS (Lucide, futuristic style matching sidebar) ═══ */
.h2-icon{width:24px;height:24px;stroke:var(--p);stroke-width:2;fill:none;vertical-align:-4px;margin-right:6px;filter:drop-shadow(0 0 8px rgba(37,99,235,.5));display:inline-block}
h2 .h2-icon,h3 .h2-icon{flex-shrink:0}

/* ═══ THEME TOGGLE ═══ */
.theme-toggle{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius-sm);border:1px solid var(--bd);background:var(--card);color:var(--tx2);cursor:pointer;transition:all .2s ease}
.theme-toggle:hover{border-color:var(--p);color:var(--p)}
.theme-toggle svg{width:17px;height:17px}
.theme-toggle .icon-moon{display:none}
[data-theme="light"] .theme-toggle .icon-sun{display:none}
[data-theme="light"] .theme-toggle .icon-moon{display:block}

/* ═══ EMPTY / ERROR STATES (shared across panels) ═══ */
.state-block{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:var(--sp-6) var(--sp-3);gap:var(--sp-2);color:var(--tx2);animation:stateFadeIn .35s ease}
.state-block .state-icon{width:56px;height:56px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;background:var(--pl);color:var(--p)}
.state-block.is-error .state-icon{background:var(--redl);color:var(--red)}
.state-block .state-icon svg{width:26px;height:26px}
.state-block h4{font-size:15px;font-weight:800;color:var(--tx);margin:0}
.state-block p{font-size:13px;color:var(--tx3);max-width:320px;line-height:1.6;margin:0}
.state-block .state-action{margin-top:var(--sp-1)}
@keyframes stateFadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* ═══ SKELETON ROWS ═══ */
.skeleton-row{display:flex;flex-direction:column;gap:var(--sp-1);padding:var(--sp-2)}
.skeleton-line{height:12px;border-radius:6px}
.skeleton-line.w-60{width:60%}.skeleton-line.w-80{width:80%}.skeleton-line.w-40{width:40%}.skeleton-line.w-full{width:100%}

/* ═══ NIBBLE MODE: TikTok-style upgrade ═══ */
/* Per-type animated gradient worlds */
.nibble-vibe-concept{background:linear-gradient(160deg,#07172E 0%,#0A2C4E 50%,#083358 100%)!important;border-color:rgba(37,99,235,.3)!important}
.nibble-vibe-mnemonic{background:linear-gradient(160deg,#1E1206 0%,#3A2508 50%,#2E1D05 100%)!important;border-color:rgba(245,158,11,.3)!important}
.nibble-vibe-pearl{background:linear-gradient(160deg,#03201A 0%,#064E3B 50%,#053A2C 100%)!important;border-color:rgba(16,185,129,.3)!important}
.nibble-vibe-mcq{background:linear-gradient(160deg,#120A2E 0%,#2E1A5E 50%,#231052 100%)!important;border-color:rgba(139,92,246,.3)!important}
.nibble-vibe-case{background:linear-gradient(160deg,#2E0A14 0%,#5E1A2E 50%,#450F20 100%)!important;border-color:rgba(239,68,68,.3)!important}
.nibble-vibe-drug{background:linear-gradient(160deg,#062024 0%,#0A4A54 50%,#083A44 100%)!important;border-color:rgba(6,182,212,.3)!important}

/* Floating ambient orbs inside each card */
.nibble-orb{position:absolute;border-radius:50%;filter:blur(40px);opacity:.35;pointer-events:none;animation:nibbleFloat 8s ease-in-out infinite}
.nibble-orb-1{width:160px;height:160px;background:rgba(37,99,235,.4);top:-40px;right:-40px}
.nibble-orb-2{width:120px;height:120px;background:rgba(139,92,246,.35);bottom:-30px;left:-30px;animation-delay:-4s}
@keyframes nibbleFloat{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-14px,14px) scale(1.15)}}

/* Wikipedia image banner in the card */
.nibble-card-img{width:100%;height:0;border-radius:16px;background-size:cover;background-position:center;margin-bottom:.8rem;transition:height .4s ease, opacity .4s ease;opacity:0}
.nibble-card-img.on{height:150px;opacity:1;box-shadow:0 8px 24px rgba(0,0,0,.4)}

/* Kinetic text entry when a card scrolls into view */
.nibble-anim-1,.nibble-anim-2,.nibble-anim-3{opacity:0;transform:translateY(24px)}
.nibble-active .nibble-anim-1{animation:nibbleSlideUp .5s cubic-bezier(.2,.8,.3,1) .05s forwards}
.nibble-active .nibble-anim-2{animation:nibbleSlideUp .5s cubic-bezier(.2,.8,.3,1) .18s forwards}
.nibble-active .nibble-anim-3{animation:nibbleSlideUp .5s cubic-bezier(.2,.8,.3,1) .32s forwards}
@keyframes nibbleSlideUp{to{opacity:1;transform:translateY(0)}}

/* Bigger bolder title, TikTok caption energy */
.nibble-card-title{font-size:24px!important;font-weight:900!important;line-height:1.2!important;letter-spacing:-.02em}
.nibble-active .nibble-card-inner{box-shadow:0 0 60px rgba(37,99,235,.12)}


/* ═══════════════════════════════════════════════════════════════
   ▓▓▓  3D UI ENHANCEMENT LAYER  ▓▓▓
   Pure visual overlay — NO functional changes.
   Adds depth, perspective, tactile shadows and glassy reflections.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --d3-shadow-sm: 0 1px 0 rgba(255,255,255,.06) inset, 0 -1px 0 rgba(0,0,0,.35) inset, 0 2px 4px rgba(0,0,0,.25), 0 8px 16px rgba(0,0,0,.28);
  --d3-shadow-md: 0 1px 0 rgba(255,255,255,.08) inset, 0 -1px 0 rgba(0,0,0,.4) inset, 0 4px 10px rgba(0,0,0,.35), 0 14px 30px rgba(0,0,0,.35), 0 24px 60px rgba(0,0,0,.28);
  --d3-shadow-lg: 0 1px 0 rgba(255,255,255,.09) inset, 0 -2px 0 rgba(0,0,0,.45) inset, 0 8px 18px rgba(0,0,0,.4), 0 22px 40px rgba(0,0,0,.45), 0 40px 90px rgba(0,0,0,.4);
  --d3-shadow-btn: 0 1px 0 rgba(255,255,255,.35) inset, 0 -3px 0 rgba(0,0,0,.35) inset, 0 3px 0 rgba(2,10,25,.9), 0 6px 14px rgba(37,99,235,.45), 0 12px 28px rgba(37,99,235,.35);
  --d3-shadow-btn-press: 0 1px 0 rgba(255,255,255,.2) inset, 0 -1px 0 rgba(0,0,0,.3) inset, 0 1px 0 rgba(2,10,25,.9), 0 3px 8px rgba(37,99,235,.35);
  --d3-glass: linear-gradient(155deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,.02) 40%, rgba(255,255,255,0) 60%);
  --d3-glass-hi: linear-gradient(155deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.04) 45%, rgba(255,255,255,0) 65%);
  --d3-edge: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0) 25%, rgba(0,0,0,.35));
  --d3-icon-shine: radial-gradient(120% 120% at 30% 15%, rgba(255,255,255,.55) 0%, rgba(255,255,255,.12) 25%, rgba(255,255,255,0) 55%);
  --d3-ease: cubic-bezier(.2,.7,.2,1);
}

:root[data-theme="light"]{
  --d3-shadow-sm: 0 1px 0 rgba(255,255,255,.9) inset, 0 -1px 0 rgba(15,23,42,.06) inset, 0 2px 4px rgba(15,23,42,.06), 0 8px 18px rgba(15,23,42,.08);
  --d3-shadow-md: 0 1px 0 rgba(255,255,255,.9) inset, 0 -1px 0 rgba(15,23,42,.08) inset, 0 4px 10px rgba(15,23,42,.08), 0 14px 30px rgba(15,23,42,.1), 0 24px 60px rgba(15,23,42,.08);
  --d3-shadow-lg: 0 1px 0 rgba(255,255,255,.95) inset, 0 -2px 0 rgba(15,23,42,.09) inset, 0 8px 18px rgba(15,23,42,.09), 0 22px 40px rgba(15,23,42,.12), 0 40px 90px rgba(15,23,42,.12);
  --d3-shadow-btn: 0 1px 0 rgba(255,255,255,.6) inset, 0 -3px 0 rgba(0,0,0,.18) inset, 0 3px 0 rgba(20,50,120,.5), 0 6px 14px rgba(37,99,235,.35), 0 12px 28px rgba(37,99,235,.22);
  --d3-glass: linear-gradient(155deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,.3) 45%, rgba(255,255,255,0) 70%);
  --d3-glass-hi: linear-gradient(155deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.45) 45%, rgba(255,255,255,0) 70%);
}

/* Global perspective context for major surfaces */
body{ perspective: 1600px; transform-style: preserve-3d; }
.hero, .sec, .feat-grid, .subj-grid, .price-row, .dash-stats, .quick-actions{ transform-style: preserve-3d; }

/* Animated 3D orbs — richer background depth */
.bg-orbs{ perspective: 1200px; }
.orb{ filter: blur(60px) saturate(140%); mix-blend-mode: screen; animation-duration: 12s !important; }
.orb1{ background: radial-gradient(circle at 30% 30%, rgba(96,165,250,.35), rgba(37,99,235,.15) 45%, rgba(37,99,235,0) 70%) !important; }
.orb2{ background: radial-gradient(circle at 40% 40%, rgba(103,232,249,.3), rgba(6,182,212,.12) 45%, rgba(6,182,212,0) 70%) !important; }
.orb3{ background: radial-gradient(circle at 50% 50%, rgba(110,231,183,.28), rgba(16,185,129,.1) 45%, rgba(16,185,129,0) 70%) !important; }
@keyframes d3-orbFloat{
  0%{ transform: translate3d(0,0,0) rotate(0deg) scale(1); }
  33%{ transform: translate3d(30px,-40px,0) rotate(120deg) scale(1.06); }
  66%{ transform: translate3d(-25px,25px,0) rotate(240deg) scale(.96); }
  100%{ transform: translate3d(0,0,0) rotate(360deg) scale(1); }
}
.orb1{ animation: d3-orbFloat 18s ease-in-out infinite; }
.orb2{ animation: d3-orbFloat 22s ease-in-out infinite reverse; }
.orb3{ animation: d3-orbFloat 26s ease-in-out infinite; }

/* NAV — floating glass bar with 3D lift */
nav{
  border-bottom: 1px solid transparent !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 90%, transparent), color-mix(in srgb, var(--bg) 78%, transparent)) !important;
  backdrop-filter: blur(24px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(0,0,0,.35),
    0 10px 30px rgba(0,0,0,.35);
}
:root[data-theme="light"] nav{
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(15,23,42,.06), 0 10px 30px rgba(15,23,42,.08);
}
.nav-logo-icon{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    inset 0 -1px 0 rgba(0,0,0,.35),
    0 6px 14px rgba(37,99,235,.35),
    0 2px 4px rgba(0,0,0,.25);
  transform: translateZ(0);
  transition: transform .35s var(--d3-ease);
}
.nav-logo:hover .nav-logo-icon{ transform: translateZ(10px) rotate(-6deg) scale(1.05); }

/* BUTTONS — pressable 3D with light source top-left */
.btn-blue, .hero-cta, .pc-btn.f, .modal-go, .ob-btn, .send-btn, .fc-act-btn.pri,
.pop-badge, .secret-apply-btn{
  position: relative;
  background-image: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 45%), linear-gradient(135deg, var(--p), var(--p2)) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: var(--d3-shadow-btn) !important;
  transform: translateZ(0);
  transition: transform .18s var(--d3-ease), box-shadow .2s var(--d3-ease), filter .2s var(--d3-ease) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
  letter-spacing: .01em;
}
.btn-blue:hover, .hero-cta:hover, .pc-btn.f:hover, .modal-go:hover, .ob-btn:hover:not(:disabled), .send-btn:hover, .fc-act-btn.pri:hover{
  transform: translateY(-2px) translateZ(6px) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.35) inset,
    0 -3px 0 rgba(0,0,0,.35) inset,
    0 5px 0 rgba(2,10,25,.9),
    0 12px 24px rgba(37,99,235,.55),
    0 24px 44px rgba(37,99,235,.4) !important;
  filter: brightness(1.06);
}
.btn-blue:active, .hero-cta:active, .pc-btn.f:active, .modal-go:active, .ob-btn:active, .send-btn:active, .fc-act-btn.pri:active{
  transform: translateY(2px) translateZ(0) !important;
  box-shadow: var(--d3-shadow-btn-press) !important;
}

.btn-ghost, .hero-cta2, .pc-btn.o, .modal-skip, .fc-act-btn.sec{
  background-image: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 55%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(0,0,0,.35),
    0 2px 6px rgba(0,0,0,.25),
    0 8px 18px rgba(0,0,0,.2) !important;
  transition: transform .18s var(--d3-ease), box-shadow .2s var(--d3-ease), border-color .2s var(--d3-ease), color .2s var(--d3-ease) !important;
}
.btn-ghost:hover, .hero-cta2:hover, .pc-btn.o:hover, .modal-skip:hover, .fc-act-btn.sec:hover{
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.4),
    0 4px 10px rgba(0,0,0,.35),
    0 14px 28px rgba(37,99,235,.2) !important;
}

/* HERO — dramatic 3D title with depth */
.hero{ padding-top: 7rem !important; }
.hero-pill{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.25),
    0 6px 16px rgba(37,99,235,.25);
  backdrop-filter: blur(10px);
}
.hero h1{
  text-shadow:
    0 1px 0 rgba(255,255,255,.04),
    0 2px 0 rgba(0,0,0,.3),
    0 8px 24px rgba(0,0,0,.4);
  letter-spacing: -.02em;
}
.hero h1 .grad{
  filter: drop-shadow(0 8px 22px rgba(37,99,235,.35));
}
:root[data-theme="light"] .hero h1{ text-shadow: 0 1px 0 rgba(255,255,255,.9), 0 2px 4px rgba(15,23,42,.08); }

.lp-counter, .stat-item{
  transition: transform .3s var(--d3-ease);
}
.lp-counter:hover, .stat-item:hover{ transform: translateY(-3px) translateZ(8px); }

/* FEATURE CARDS — 3D tilt on hover, layered shadows */
.feat-card{
  background: linear-gradient(160deg, color-mix(in srgb, var(--card) 92%, white 4%), var(--card)) !important;
  background-image:
    var(--d3-glass),
    linear-gradient(160deg, color-mix(in srgb, var(--card) 92%, white 4%), var(--card)) !important;
  border: 1px solid transparent !important;
  border-image: linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.02) 40%, rgba(0,0,0,.35)) 1 !important;
  box-shadow: var(--d3-shadow-md) !important;
  transform-style: preserve-3d;
  transition: transform .35s var(--d3-ease), box-shadow .35s var(--d3-ease) !important;
  position: relative;
  overflow: hidden;
}
.feat-card::before{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(600px 200px at var(--mx,50%) -20%, rgba(96,165,250,.14), transparent 55%);
  pointer-events:none;
  opacity: 0;
  transition: opacity .4s var(--d3-ease);
}
.feat-card:hover{
  transform: translateY(-8px) translateZ(20px) rotateX(4deg) rotateY(-4deg) !important;
  box-shadow: var(--d3-shadow-lg) !important;
}
.feat-card:hover::before{ opacity: 1; }
.feat-card h3, .feat-card p{ transform: translateZ(18px); }

/* ICONS — glossy 3D badges */
.feat-icon, .subj-card-icon, .stat-card-icon, .qa-btn-icon, .mfl-icon, .ob-logo-icon{
  position: relative;
  background:
    var(--d3-icon-shine),
    linear-gradient(135deg, color-mix(in srgb, var(--p) 85%, black 15%), var(--p2)) !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -2px 0 rgba(0,0,0,.35),
    0 6px 14px rgba(37,99,235,.35),
    0 12px 26px rgba(37,99,235,.25) !important;
  transform: translateZ(0);
  overflow: hidden;
}
.feat-icon svg, .subj-card-icon svg, .stat-card-icon svg, .qa-btn-icon svg, .mfl-icon svg, .ob-logo-icon svg{
  stroke: #fff !important;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.35));
}
.feat-icon::after, .subj-card-icon::after, .stat-card-icon::after, .qa-btn-icon::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,.25), rgba(255,255,255,0) 45%);
  pointer-events:none;
  border-radius: inherit;
}
.feat-card:hover .feat-icon{
  transform: translateZ(30px) scale(1.12) rotate(-6deg) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -2px 0 rgba(0,0,0,.35),
    0 10px 22px rgba(37,99,235,.5),
    0 22px 40px rgba(37,99,235,.35) !important;
}

/* SUBJECT CARDS */
.subj-card{
  background-image: var(--d3-glass), linear-gradient(160deg, color-mix(in srgb, var(--card) 94%, white 3%), var(--card)) !important;
  box-shadow: var(--d3-shadow-sm) !important;
  transition: transform .3s var(--d3-ease), box-shadow .3s var(--d3-ease), border-color .2s var(--d3-ease) !important;
  transform-style: preserve-3d;
}
.subj-card:hover{
  transform: translateY(-5px) translateZ(12px) rotateX(3deg) !important;
  box-shadow: var(--d3-shadow-md) !important;
}
.subj-card:hover .subj-card-icon{ transform: translateZ(18px) scale(1.15) !important; }

/* PRICING CARDS — dramatic 3D pop */
.pc{
  background-image: var(--d3-glass), linear-gradient(160deg, color-mix(in srgb, var(--card) 92%, white 5%), var(--card)) !important;
  box-shadow: var(--d3-shadow-md) !important;
  transform-style: preserve-3d;
  transition: transform .4s var(--d3-ease), box-shadow .4s var(--d3-ease) !important;
}
.pc:hover{
  transform: translateY(-10px) translateZ(24px) rotateX(3deg) !important;
  box-shadow: var(--d3-shadow-lg) !important;
}
.pc.pop{
  box-shadow:
    var(--d3-shadow-lg),
    0 0 0 1px rgba(37,99,235,.4),
    0 0 60px rgba(37,99,235,.35) !important;
  transform: translateY(-6px) translateZ(14px);
}
.pc.pop:hover{ transform: translateY(-14px) translateZ(30px) rotateX(3deg) !important; }
.pc-amt{
  text-shadow: 0 2px 0 rgba(0,0,0,.35), 0 8px 20px rgba(37,99,235,.35);
}
:root[data-theme="light"] .pc-amt{ text-shadow: 0 1px 0 rgba(255,255,255,.9), 0 2px 6px rgba(15,23,42,.1); }
.pop-badge{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -1px 0 rgba(0,0,0,.3),
    0 4px 10px rgba(37,99,235,.4),
    0 8px 20px rgba(37,99,235,.3);
  transform: translateX(-50%) translateZ(20px);
}

/* FAQ 3D */
.faq-item{
  background: linear-gradient(160deg, color-mix(in srgb, var(--card) 60%, transparent), transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 -1px 0 rgba(0,0,0,.3),
    0 4px 12px rgba(0,0,0,.22);
  transition: transform .25s var(--d3-ease), box-shadow .25s var(--d3-ease) !important;
}
.faq-item:hover{ transform: translateX(4px) translateZ(6px); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(0,0,0,.35), 0 8px 22px rgba(0,0,0,.28); }
.faq-item.open{ box-shadow: inset 0 1px 0 rgba(255,255,255,.09), inset 0 -1px 0 rgba(0,0,0,.35), 0 10px 30px rgba(37,99,235,.15); }

/* MODAL — 3D pop-in */
.modal-overlay{
  perspective: 1600px;
  background: radial-gradient(circle at center, rgba(0,0,0,.55), rgba(0,0,0,.85)) !important;
}
.modal-box{
  background-image: var(--d3-glass-hi), linear-gradient(160deg, color-mix(in srgb, var(--card) 92%, white 6%), var(--card)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -2px 0 rgba(0,0,0,.4),
    0 24px 60px rgba(0,0,0,.55),
    0 60px 120px rgba(0,0,0,.5),
    0 0 0 1px rgba(255,255,255,.06) !important;
  animation: d3-modalIn .5s var(--d3-ease);
  transform-style: preserve-3d;
}
@keyframes d3-modalIn{
  from{ opacity: 0; transform: translateY(30px) translateZ(-100px) rotateX(-10deg); }
  to{ opacity: 1; transform: translateY(0) translateZ(0) rotateX(0); }
}
.price-highlight{
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 55%),
    linear-gradient(135deg, rgba(37,99,235,.18), rgba(6,182,212,.14)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.3),
    0 6px 18px rgba(37,99,235,.2);
}

/* ONBOARD 3D card */
.ob-card{
  background-image: var(--d3-glass-hi), linear-gradient(160deg, color-mix(in srgb, var(--card) 90%, white 6%), var(--card)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    inset 0 -2px 0 rgba(0,0,0,.4),
    0 30px 60px rgba(0,0,0,.5),
    0 60px 120px rgba(0,0,0,.4) !important;
  transform-style: preserve-3d;
}
.form-field input, .form-field select{
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(0,0,0,.25),
    0 1px 0 rgba(255,255,255,.05) !important;
  transition: box-shadow .2s var(--d3-ease), border-color .2s var(--d3-ease) !important;
}
.form-field input:focus, .form-field select:focus{
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,.3),
    0 0 0 3px rgba(37,99,235,.25),
    0 0 20px rgba(37,99,235,.2) !important;
}

/* DASHBOARD stat cards */
.stat-card, .xp-bar-wrap, .qa-btn{
  background-image: var(--d3-glass), linear-gradient(160deg, color-mix(in srgb, var(--card) 93%, white 4%), var(--card)) !important;
  box-shadow: var(--d3-shadow-sm) !important;
  transform-style: preserve-3d;
  transition: transform .3s var(--d3-ease), box-shadow .3s var(--d3-ease), border-color .2s var(--d3-ease) !important;
}
.stat-card:hover, .qa-btn:hover{
  transform: translateY(-4px) translateZ(12px) rotateX(2deg) !important;
  box-shadow: var(--d3-shadow-md) !important;
}
.stat-card-val{ text-shadow: 0 2px 0 rgba(0,0,0,.3), 0 6px 14px rgba(0,0,0,.3); }
:root[data-theme="light"] .stat-card-val{ text-shadow: 0 1px 0 rgba(255,255,255,.9); }
.xp-bar{
  box-shadow: inset 0 2px 4px rgba(0,0,0,.4), inset 0 -1px 0 rgba(255,255,255,.03) !important;
}
.xp-bar-fill{
  background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 45%), linear-gradient(90deg, var(--p), var(--p2)) !important;
  box-shadow: 0 0 12px rgba(37,99,235,.5), inset 0 1px 0 rgba(255,255,255,.4);
}

/* SIDEBAR — floating icons */
.sidebar{
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--bg2) 95%, white 2%), var(--bg2)) !important;
  box-shadow: 6px 0 24px rgba(0,0,0,.35), inset -1px 0 0 rgba(255,255,255,.03) !important;
}
.side-btn{ transition: transform .2s var(--d3-ease), background .2s, color .2s !important; }
.side-btn:hover{ transform: translateZ(4px) scale(1.08); }
.side-btn.on{
  background: linear-gradient(135deg, rgba(37,99,235,.25), rgba(6,182,212,.2)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    inset 0 -1px 0 rgba(0,0,0,.3),
    0 4px 12px rgba(37,99,235,.4),
    0 0 0 1px rgba(37,99,235,.3) !important;
}
.side-avatar{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.3),
    inset 0 -2px 0 rgba(0,0,0,.35),
    0 4px 12px rgba(37,99,235,.45);
}

/* TOPBAR */
.app-topbar{
  box-shadow: 0 4px 20px rgba(0,0,0,.25), inset 0 -1px 0 rgba(255,255,255,.04) !important;
}
.xp-badge{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 60%), rgba(37,99,235,.1) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 2px 6px rgba(37,99,235,.2);
}
.pro-chip, .free-chip{
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 -1px 0 rgba(0,0,0,.25), 0 3px 8px rgba(0,0,0,.25);
}

/* CHAT BUBBLES 3D */
.msg.u .bubble{
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 40%), linear-gradient(135deg, var(--p), var(--p2)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    inset 0 -1px 0 rgba(0,0,0,.25),
    0 4px 10px rgba(37,99,235,.35),
    0 10px 24px rgba(37,99,235,.22);
}
.msg.ai .bubble{
  background-image: var(--d3-glass), var(--card) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(0,0,0,.3),
    0 6px 16px rgba(0,0,0,.28);
}
.typing-bubble{
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(0,0,0,.25), 0 6px 14px rgba(0,0,0,.28) !important;
}

/* SUBJECT BAR chips */
.subj-btn, .mode-btn, .qchip, .fc-cnt-btn{
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), inset 0 -1px 0 rgba(0,0,0,.28), 0 2px 6px rgba(0,0,0,.22) !important;
  transition: transform .18s var(--d3-ease), box-shadow .18s var(--d3-ease), background .18s, color .18s, border-color .18s !important;
}
.subj-btn:hover, .mode-btn:hover, .qchip:hover, .fc-cnt-btn:hover{ transform: translateY(-1px); }
.subj-btn.on, .mode-btn.on, .fc-cnt-btn.on{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    inset 0 -1px 0 rgba(0,0,0,.3),
    0 4px 10px rgba(37,99,235,.35),
    0 0 0 1px rgba(37,99,235,.35) !important;
}

/* SEND BUTTON extra pop */
.send-btn{
  border-radius: 12px;
}
.send-btn:not(:disabled):hover{ transform: translateY(-2px) rotate(-3deg) scale(1.05); }

/* INPUT AREAS — inset (pressed-in) look */
#msgInput, #fcNotes, .secret-input, .form-field input, .form-field select{
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,.4),
    inset 0 -1px 0 rgba(255,255,255,.04),
    0 1px 0 rgba(255,255,255,.03) !important;
}
:root[data-theme="light"] #msgInput,
:root[data-theme="light"] #fcNotes,
:root[data-theme="light"] .secret-input,
:root[data-theme="light"] .form-field input,
:root[data-theme="light"] .form-field select{
  box-shadow: inset 0 2px 4px rgba(15,23,42,.08), inset 0 -1px 0 rgba(255,255,255,.6) !important;
}

/* FLASHCARD — enhance 3D flip */
.fc-card{ perspective: 1400px !important; }
.fc-front, .fc-back{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    inset 0 -2px 0 rgba(0,0,0,.35),
    0 20px 40px rgba(0,0,0,.45),
    0 40px 80px rgba(0,0,0,.35) !important;
}
.fc-front{
  background-image: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0) 45%), linear-gradient(135deg,#0369A1,var(--p)) !important;
}
.fc-back{
  background-image: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0) 45%), linear-gradient(135deg,#065F46,var(--ok)) !important;
}

/* FOOTER 3D lift */
footer{
  box-shadow: 0 -10px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.03);
}

/* SECTION HEADINGS — depth */
.sec-h{
  text-shadow: 0 1px 0 rgba(255,255,255,.03), 0 2px 8px rgba(0,0,0,.35);
  letter-spacing: -.015em;
}
:root[data-theme="light"] .sec-h{ text-shadow: 0 1px 0 rgba(255,255,255,.9), 0 2px 6px rgba(15,23,42,.06); }

.sec-tag{
  display: inline-block;
  padding: 4px 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 60%), rgba(37,99,235,.12);
  border-radius: 20px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), inset 0 -1px 0 rgba(0,0,0,.25), 0 3px 8px rgba(37,99,235,.15);
  margin-left: 50%;
  transform: translateX(-50%);
}

/* XP POPUP 3D */
.xp-popup{
  background-image: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 45%), linear-gradient(135deg, var(--p), var(--p2)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.3),
    inset 0 -2px 0 rgba(0,0,0,.3),
    0 10px 30px rgba(37,99,235,.5),
    0 20px 60px rgba(37,99,235,.35) !important;
}

/* FILE-BAR / status bars */
.file-bar{
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(0,0,0,.25), 0 4px 10px rgba(37,99,235,.15);
}

/* ORB2 additional layer for depth */
.bg-orbs::after{
  content:"";
  position: fixed; inset: 0;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(37,99,235,.06), transparent 60%),
    radial-gradient(800px 500px at -10% 60%, rgba(6,182,212,.05), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* Reveal cards — smoother, more depth-oriented entrance */
.reveal{ transform: translateY(20px) translateZ(-40px) rotateX(-4deg); opacity: 0; transition: transform .8s var(--d3-ease), opacity .8s var(--d3-ease); }
.reveal.show, .reveal.in{ transform: translateY(0) translateZ(0) rotateX(0); opacity: 1; }

/* Reduce 3D on prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
  .feat-card:hover, .subj-card:hover, .pc:hover, .stat-card:hover, .qa-btn:hover{
    transform: none !important;
  }
}

/* Mobile — soften 3D for smaller devices */
@media (max-width: 768px){
  body{ perspective: 1200px; }
  .feat-card:hover, .subj-card:hover, .pc:hover{
    transform: translateY(-4px) !important;
  }
  .hero{ padding-top: 5rem !important; }
}

/* ═══ END 3D UI ENHANCEMENT LAYER ═══ */