/* ═══════════════════════════════════════════════════════════════
   LANDING PAGE - Dad's Gift (toggleable via personal mode)
   ═══════════════════════════════════════════════════════════════ */
.landing{position:fixed;inset:0;z-index:1000;background:#0a0a1a;display:flex;align-items:center;justify-content:center;flex-direction:column;overflow:hidden;transition:opacity 1.2s ease, transform 1.2s ease}
.landing.farewell{opacity:0;transform:scale(1.1)}
.landing-stars{position:absolute;inset:0;overflow:hidden}
.star{position:absolute;width:2px;height:2px;background:#fff;border-radius:50%;animation:twinkle var(--dur) ease-in-out infinite;opacity:0}
@keyframes twinkle{0%,100%{opacity:0.2;transform:scale(1)}50%{opacity:var(--peak,1);transform:scale(var(--sc,1.5))}}
.shooting-star{position:absolute;width:120px;height:2px;background:linear-gradient(90deg,rgba(255,255,255,0.9),rgba(255,236,210,0.6),transparent);transform:rotate(-35deg);opacity:0;animation:shoot 5s ease-in-out infinite;filter:blur(0.5px)}
@keyframes shoot{0%{transform:translateX(0) translateY(0) rotate(-35deg);opacity:0}5%{opacity:1}15%{transform:translateX(300px) translateY(200px) rotate(-35deg);opacity:0}100%{opacity:0}}
.landing-moon{position:absolute;top:10%;right:12%;width:80px;height:80px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ffecd2,#fcb69f 50%,#e8956f);box-shadow:0 0 40px rgba(255,236,210,0.3),0 0 80px rgba(252,182,159,0.15),0 0 120px rgba(252,182,159,0.08);opacity:0;animation:moonRise 2s ease-out 0.5s forwards}
@keyframes moonRise{from{opacity:0;transform:translateY(30px) scale(0.8)}to{opacity:1;transform:none}}
.moon-glow{position:absolute;top:10%;right:12%;width:80px;height:80px;border-radius:50%;box-shadow:0 0 60px rgba(255,236,210,0.2);animation:moonPulse 4s ease-in-out infinite 2s}
@keyframes moonPulse{0%,100%{box-shadow:0 0 60px rgba(255,236,210,0.15)}50%{box-shadow:0 0 100px rgba(255,236,210,0.3)}}
.landing-fireflies{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.firefly{position:absolute;width:3px;height:3px;border-radius:50%;background:rgba(255,236,210,0.7);box-shadow:0 0 6px rgba(255,236,210,0.5);animation:fireflyFloat var(--dur) ease-in-out infinite;opacity:0}
@keyframes fireflyFloat{0%{opacity:0;transform:translate(0,0)}15%{opacity:0.6}50%{transform:translate(var(--mx),var(--my));opacity:0.4}85%{opacity:0.5}100%{opacity:0;transform:translate(var(--ex),var(--ey))}}
.landing-content{position:relative;z-index:10;text-align:center;padding:0 30px;max-width:480px}
.lnd-line{opacity:0;transform:translateY(20px);transition:opacity 1s ease, transform 1s ease}
.lnd-line.show{opacity:1;transform:none}
.lnd-for{font-family:'Instrument Serif',serif;font-size:52px;color:#fff;margin-bottom:4px;letter-spacing:-1px}
.lnd-from{font-family:'DM Sans',sans-serif;font-size:15px;color:rgba(255,236,210,0.6);letter-spacing:5px;text-transform:uppercase;font-weight:300;margin-bottom:36px}
.lnd-divider{width:40px;height:1px;background:linear-gradient(90deg,transparent,rgba(252,182,159,0.5),transparent);margin:0 auto 28px}
.lnd-msg{font-family:'DM Sans',sans-serif;font-size:16px;color:rgba(255,255,255,0.7);line-height:1.9;margin-bottom:8px;font-weight:300}
.lnd-msg em{color:#fcb69f;font-style:normal;font-weight:500}
.lnd-code{font-size:16px;color:#fcb69f;letter-spacing:5px;font-weight:600;margin:28px 0 8px}
.lnd-infinity{font-size:13px;color:rgba(252,182,159,0.5);letter-spacing:3px;font-weight:500;margin-bottom:28px;text-transform:uppercase}
.lnd-enter-wrap{display:inline-block;padding:2px;border-radius:30px;background:linear-gradient(135deg,#7c5cbf,#e06377,#fcb69f,#7c5cbf);background-size:300% 300%;animation:infinityFlow 4s ease infinite}
.lnd-enter{display:inline-flex;align-items:center;gap:8px;padding:14px 40px;border-radius:28px;background:#0a0a1a;color:#fff;font-family:'DM Sans',sans-serif;font-size:15px;font-weight:600;border:none;cursor:pointer;transition:all 0.3s;letter-spacing:0.5px}
.lnd-enter:hover{background:#1a1a2e;transform:scale(1.05)}
.lnd-enter:active{transform:scale(0.97)}
@media(max-width:500px){.lnd-for{font-size:40px}.landing-moon{width:55px;height:55px;top:8%;right:8%}.moon-glow{width:55px;height:55px;top:8%;right:8%}}

/* BODY SHIFT WHEN CHAT OPEN (desktop) */
@media(min-width:601px){
  body{transition:margin-right 0.3s ease}
  body.chat-active{margin-right:480px}
  body.chat-active .chat-fab{display:none!important}
}

:root,[data-theme="light"]{
  --bg:#fdf6f0;--bg2:#f5ede4;--bg3:#ede3d6;--bg1:var(--bg);--card:#ffffff;--panel:#ffffff;
  --ink:#1a1030;--ink2:#4a4050;--ink3:#8a7e90;
  --accent:#7c5cbf;--accent2:#b06ab3;--pink:#e06377;--green:#3a7d44;--blue:#3b6fa0;
  --gold:#b8860b;--teal:#0f7b6c;--orange:#c4572a;--red:#dc2626;
  --border:#ddd2c0;--border2:#e8dfd0;--hover:#f5f0eb;
  --grad:linear-gradient(135deg,#7c5cbf 0%,#b06ab3 40%,#e06377 100%);
  --grad2:linear-gradient(135deg,#059669 0%,#14b8a6 100%);
  --shadow:0 2px 8px rgba(44,36,24,0.06);--shadow2:0 4px 20px rgba(44,36,24,0.1);--shadow3:0 8px 30px rgba(44,36,24,0.12);
  --radius:16px;--radius-sm:10px;--radius-lg:24px;
  --glow:0 0 20px rgba(124,92,191,0.25);--glow-pink:0 0 20px rgba(224,99,119,0.25);
  --font:'Plus Jakarta Sans',-apple-system,sans-serif;--font-display:'Space Grotesk',sans-serif;
}

/* ═══ STUDYHUB THEME — Clean teal/cyan professional ═══ */
body.theme-studyhub{--accent:#14b8a6;--accent2:#0d9488;--grad:linear-gradient(135deg,#14b8a6 0%,#0d9488 100%);--glow:0 0 20px rgba(20,184,166,0.25);--bg:#f8fafc;--bg2:#f1f5f9;--bg3:#e2e8f0;--border:#e2e8f0;--border2:#cbd5e1}
body.theme-studyhub .topbar{background:#fff;border-bottom:1px solid var(--border)}
body.theme-studyhub .course-bar{display:none}
body.theme-studyhub .tb-logo{color:var(--accent)}
body.theme-studyhub .tb-logo::before{content:'◆ ';color:var(--accent)}
body.theme-studyhub .tab-bar .tab.active{color:var(--accent);border-color:var(--accent)}
body.theme-studyhub .btn-primary{background:var(--accent)}
body.theme-studyhub .teach-btn{background:var(--accent)}
body.theme-studyhub .test-me-btn{background:var(--accent)}
body.theme-studyhub .rate-btn.sel-green{border-color:var(--accent);color:var(--accent)}
body.theme-studyhub .continue-card{background:var(--accent);animation:none}
body.theme-studyhub .chat-fab{background:var(--accent)}
body.theme-studyhub .lsr-stat strong{color:var(--accent)}
body.theme-studyhub .syl-toggle.on{background:var(--accent)}
body.theme-studyhub #tbHeart{display:none}
body.theme-studyhub .dad-card{display:none}
body.theme-studyhub .dad-moment{display:none}

/* ═══ WARM/PERSONAL THEME — Purple, warm, personal messages ═══ */
body.theme-warm{--accent:#7c5cbf;--accent2:#b06ab3;--grad:linear-gradient(135deg,#7c5cbf 0%,#b06ab3 40%,#e06377 100%);--glow:0 0 20px rgba(124,92,191,0.25);--bg:#fdf6f0;--bg2:#f5ede4;--bg3:#ede3d6;--border:#ddd2c0;--border2:#e8dfd0}
body.theme-warm .topbar{background:linear-gradient(135deg,var(--bg),var(--bg2))}
body.theme-warm .course-bar{display:flex}
body.theme-warm #tbHeart{display:flex}
body.theme-warm .dad-card{display:block}
body.theme-warm .dad-moment{display:block}

/* ═══ OCEAN THEME — Cyan/sky blue, clean and fresh ═══ */
body.theme-ocean{--accent:#00bcd4;--accent2:#0097a7;--grad:linear-gradient(135deg,#00bcd4 0%,#0097a7 100%);--glow:0 0 20px rgba(0,188,212,0.25);--bg:#eef6f8;--bg2:#ddf0f5;--bg3:#c5e8f0;--card:#ffffff;--panel:#ffffff;--border:#b2dce8;--border2:#c8e8f0;--ink:#0d2d35;--ink2:#1a4a55;--ink3:#4a7d8a}
body.theme-ocean .topbar{background:#fff;border-bottom:1px solid var(--border)}
body.theme-ocean .tb-logo{color:var(--accent)}
body.theme-ocean .tb-logo::before{content:'◆ ';color:var(--accent)}
body.theme-ocean .tab-bar .tab.active{color:var(--accent);border-color:var(--accent)}
body.theme-ocean .btn-primary{background:var(--accent)}
body.theme-ocean .teach-btn{background:var(--accent)}
body.theme-ocean .test-me-btn{background:var(--accent)}
body.theme-ocean .rate-btn.sel-green{border-color:var(--accent);color:var(--accent)}
body.theme-ocean .continue-card{background:var(--accent);animation:none}
body.theme-ocean .chat-fab{background:var(--accent)}
body.theme-ocean .lsr-stat strong{color:var(--accent)}
body.theme-ocean .syl-toggle.on{background:var(--accent)}
body.theme-ocean .formula-box{background:rgba(0,188,212,0.08);border-color:rgba(0,188,212,0.3);color:var(--accent)}
body.theme-ocean .concept-tag{background:rgba(0,188,212,0.12);color:var(--accent2)}
body.theme-ocean .dad-card{display:none}
body.theme-ocean .dad-moment{display:none}
body.theme-ocean #tbHeart{display:none}
body.theme-ocean .course-bar{display:none}

[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0f0f18;--bg2:#1a1a28;--bg3:#252535;--bg1:var(--bg);--card:#1e1e2e;--panel:#1a1a28;
  --ink:#f0f0f5;--ink2:#c4c4d0;--ink3:#8888a0;
  --border:#3a3a50;--border2:#2a2a3a;--hover:#2a2a3a;
  --shadow:0 2px 8px rgba(0,0,0,0.2);--shadow2:0 4px 20px rgba(0,0,0,0.3);--shadow3:0 8px 30px rgba(0,0,0,0.4);
}
/* Palette themes set light neutrals on body — re-apply dark surfaces/text/borders while keeping each theme's accent */
[data-theme="dark"] body.theme-studyhub,
[data-theme="dark"] body.theme-warm,
[data-theme="dark"] body.theme-ocean{
  --bg:#0f0f18;--bg2:#1a1a28;--bg3:#252535;--bg1:var(--bg);--card:#1e1e2e;--panel:#1a1a28;
  --ink:#f0f0f5;--ink2:#c4c4d0;--ink3:#8888a0;
  --border:#3a3a50;--border2:#2a2a3a;--hover:#2a2a3a;
  --shadow:0 2px 8px rgba(0,0,0,0.2);--shadow2:0 4px 20px rgba(0,0,0,0.3);--shadow3:0 8px 30px rgba(0,0,0,0.4);
}
[data-theme="dark"] body.theme-studyhub .topbar,
[data-theme="dark"] body.theme-ocean .topbar{
  background:var(--card);
  border-bottom:1px solid var(--border2);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{height:-webkit-fill-available;-webkit-text-size-adjust:100%}
body{font-family:var(--font);background:var(--bg);color:var(--ink);font-size:15px;line-height:1.6;min-height:100vh;min-height:100dvh;min-height:-webkit-fill-available;transition:background 0.3s,color 0.3s;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;overscroll-behavior-y:none}
button,a,.tab,.topic-card,.sub-card,.mood-btn,.feeling-btn,.rate-btn,.huh-btn,.calc-btn,.followup-pill{touch-action:manipulation;-webkit-touch-callout:none}
.topbar,.tab-bar,.concept-nav,.concept-actions,.stat-row,.mood-row,.calc-btns{-webkit-user-select:none;user-select:none}
::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
a{color:var(--accent)}

/* ═══ COURSE LIBRARY ═══ */
.library-screen{max-width:700px;margin:0 auto;padding:24px 16px 100px}
.precourse-header{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;margin-bottom:18px;background:var(--card);border:1px solid var(--border2);border-radius:16px;box-shadow:0 2px 12px rgba(0,0,0,0.05)}
.precourse-copy{min-width:0}
.precourse-title{font-weight:800;font-size:14px;color:var(--ink);margin-bottom:3px}
.precourse-sub{font-size:11px;color:var(--ink3);line-height:1.5}
.precourse-lang-switch{display:inline-flex;align-items:center;gap:6px;direction:ltr;flex-shrink:0}
.precourse-lang-btn{min-width:42px;height:34px;padding:0 12px;border-radius:10px;border:1px solid var(--border2);background:var(--bg2);color:var(--ink2);font-size:12px;font-weight:800;cursor:pointer;transition:all 0.15s}
.precourse-lang-btn:hover{border-color:var(--accent);color:var(--accent)}
.precourse-lang-btn.active{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 4px 12px rgba(124,92,191,0.2)}
.library-hero{text-align:center;padding:40px 20px 30px}
.library-hero h1{font-family:'Instrument Serif',serif;font-size:32px;margin-bottom:6px}
.library-hero p{color:var(--ink3);font-size:14px}
.course-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-bottom:20px}
.course-card{background:var(--card);border:1px solid var(--border2);border-radius:var(--radius);padding:22px;cursor:pointer;transition:all 0.25s ease;position:relative;overflow:hidden}
.course-card:hover{transform:translateY(-3px);box-shadow:var(--glow);border-color:var(--accent)}
.course-card .cc-icon{font-size:32px;margin-bottom:8px}
.course-card .cc-name{font-weight:700;font-size:16px;margin-bottom:2px}
.course-card .cc-meta{font-size:12px;color:var(--ink3)}
.course-card .cc-stats{display:flex;gap:12px;margin-top:10px;font-size:11px;font-weight:600;color:var(--accent)}
.course-card .cc-actions{position:absolute;top:10px;right:10px;display:flex;gap:4px}
.course-card .cc-act-btn{width:28px;height:28px;border-radius:6px;border:1px solid var(--border);background:var(--card);font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:all 0.15s}
.course-card:hover .cc-act-btn{opacity:1}
.course-card .cc-act-btn:hover{border-color:var(--accent);color:var(--accent)}
.course-card.create-new{border:2px dashed var(--border);display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:160px;color:var(--ink3)}
.course-card.create-new:hover{border-color:var(--accent);color:var(--accent)}
.course-card.default-tag::before{content:'DEFAULT';position:absolute;top:0;left:0;background:var(--grad);color:#fff;font-size:9px;font-weight:700;letter-spacing:1px;padding:3px 10px;border-radius:0 0 8px 0}
.library-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:20px}

/* CONTINUE STUDYING CARD */
.continue-card{position:relative;border-radius:18px;padding:3px;margin-bottom:20px;background:linear-gradient(135deg,#7c5cbf,#e06377,#f59e0b,#14b8a6,#7c5cbf);background-size:400% 400%;animation:infinityFlow 6s ease infinite}
.continue-inner{background:var(--card);border-radius:15px;padding:24px;position:relative;overflow:hidden}
.continue-inner::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:conic-gradient(from 0deg,transparent,rgba(124,92,191,0.03),transparent,rgba(224,99,119,0.03),transparent);animation:infinitySpin 10s linear infinite;pointer-events:none}
.continue-greeting{font-family:'Instrument Serif',serif;font-size:26px;margin-bottom:4px;position:relative}
.continue-sub{font-size:13px;color:var(--ink3);margin-bottom:16px;position:relative}
.continue-course{display:flex;align-items:center;gap:14px;padding:16px;background:var(--bg2);border-radius:14px;cursor:pointer;transition:all 0.2s;position:relative;margin-bottom:14px}
.continue-course:hover{transform:translateX(4px);box-shadow:var(--shadow)}
.continue-course .cc-big-icon{font-size:36px}
.continue-course .cc-info{flex:1;min-width:0}
.continue-course .cc-info .name{font-weight:700;font-size:16px}
.continue-course .cc-info .meta{font-size:12px;color:var(--ink3);margin-top:2px}
.continue-course .cc-info .prog{display:flex;gap:12px;margin-top:6px;font-size:11px;font-weight:600;color:var(--accent)}
.continue-course .cc-arrow{font-size:24px;color:var(--accent);animation:pulseRight 2s ease-in-out infinite}
@keyframes pulseRight{0%,100%{transform:translateX(0);opacity:0.6}50%{transform:translateX(4px);opacity:1}}
.continue-or{text-align:center;font-size:12px;color:var(--ink3);font-weight:600;text-transform:uppercase;letter-spacing:2px;margin-bottom:14px;position:relative}
.continue-other{display:flex;gap:8px;flex-wrap:wrap;position:relative}
.continue-other-btn{flex:1;min-width:120px;padding:12px;border-radius:12px;border:1px solid var(--border);background:var(--card);cursor:pointer;text-align:center;transition:all 0.15s;font-family:'DM Sans',sans-serif}
.continue-other-btn:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow)}
.continue-other-btn .icon{font-size:20px;margin-bottom:4px}
.continue-other-btn .label{font-size:12px;font-weight:700;color:var(--ink2)}

/* ═══ COURSE CREATOR ═══ */
.creator-screen{max-width:600px;margin:0 auto;padding:24px 16px 100px}
.creator-card{background:var(--card);border:1px solid var(--border2);border-radius:16px;padding:24px;margin-bottom:14px}
.creator-card label{display:block;font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--ink3);margin-bottom:6px;margin-top:14px}
.creator-card label:first-child{margin-top:0}
.gen-progress{background:var(--card);border:2px solid var(--accent);border-radius:16px;padding:24px;text-align:center;margin-bottom:14px}
.gen-progress .spinner{display:inline-block;width:40px;height:40px;border:4px solid var(--bg2);border-top:4px solid var(--accent);border-radius:50%;animation:spin 0.8s linear infinite;margin-bottom:12px}
@keyframes spin{to{transform:rotate(360deg)}}
.gen-progress .status{font-weight:700;font-size:15px;margin-bottom:4px}
.gen-progress .sub{font-size:13px;color:var(--ink3)}
.gen-log{max-height:120px;overflow-y:auto;font-size:11px;color:var(--ink3);text-align:left;margin-top:12px;padding:8px;background:var(--bg2);border-radius:8px;font-family:'JetBrains Mono',monospace}
.gen-preview{margin-top:16px;text-align:left}
.gen-topic-card{background:var(--card);border:1px solid var(--border2);border-radius:12px;padding:14px;margin-bottom:8px;animation:genSlide 0.4s ease}
.gen-topic-card .gt-head{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.gen-topic-card .gt-icon{font-size:22px}
.gen-topic-card .gt-title{font-weight:700;font-size:14px}
.gen-topic-card .gt-subs{display:flex;flex-wrap:wrap;gap:4px}
.gen-topic-card .gt-sub{font-size:11px;background:var(--bg2);padding:3px 8px;border-radius:6px;color:var(--ink2)}
.gen-topic-card.generating{border-color:var(--accent);border-style:dashed}
@keyframes genSlide{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* ═══ EMOX — Emotional State Adaptations ═══ */
.breather-overlay{position:fixed;inset:0;z-index:1100;background:rgba(0,0,0,0.7);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity 0.4s ease;padding:20px}
.breather-overlay.active{opacity:1}
.breather-card{background:var(--card);border-radius:20px;padding:36px 28px;max-width:420px;width:100%;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,0.3);transform:scale(0.9);transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1)}
.breather-overlay.active .breather-card{transform:scale(1)}

/* Emotional encouragement bar */
.emox-encourage{padding:12px 16px;border-radius:12px;margin-bottom:14px;font-size:13px;line-height:1.6;display:flex;align-items:center;gap:10px;animation:emoxFade 0.6s ease}
.emox-encourage .ee-icon{font-size:24px;flex-shrink:0}
.emox-encourage.gentle{background:linear-gradient(135deg,rgba(124,92,191,0.08),rgba(224,99,119,0.08));border:1px solid rgba(124,92,191,0.15);color:var(--ink2)}
.emox-encourage.celebrate{background:linear-gradient(135deg,rgba(58,125,68,0.08),rgba(245,158,11,0.08));border:1px solid rgba(58,125,68,0.15);color:var(--ink)}
.emox-encourage.challenge{background:linear-gradient(135deg,rgba(59,130,246,0.08),rgba(124,92,191,0.08));border:1px solid rgba(59,130,246,0.15);color:var(--ink)}
@keyframes emoxFade{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* Body-level emotional adaptations via data-emox attribute */
[data-emox="struggling"] .concept-hero{border-color:var(--pink)}
[data-emox="struggling"] .go-deeper,[data-emox="frustrated"] .go-deeper{display:none}
[data-emox="thriving"] .concept-hero{border-color:var(--green)}

/* ═══ FAILURE CELEBRATION ENGINE ═══ */
.fc-card{margin-top:14px;border-radius:16px;overflow:hidden;animation:fcSlide 0.5s ease}
.fc-header{padding:16px 18px;background:linear-gradient(135deg,rgba(124,92,191,0.08),rgba(245,158,11,0.08));display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--border2)}
.fc-header .fc-icon{font-size:32px}
.fc-header .fc-title{font-family:'Instrument Serif',serif;font-size:18px}
.fc-body{padding:18px}
.fc-section{margin-bottom:16px}
.fc-section:last-child{margin-bottom:0}
.fc-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px}
.fc-label.smart{color:#7c5cbf}
.fc-label.detour{color:var(--orange)}
.fc-label.discover{color:var(--green)}
.fc-label.redirect{color:var(--accent)}
.fc-text{font-size:14px;line-height:1.7;color:var(--ink2)}
.fc-quote{font-family:'Instrument Serif',serif;font-size:16px;color:var(--ink);padding:12px 16px;background:linear-gradient(135deg,rgba(124,92,191,0.06),rgba(245,158,11,0.06));border-radius:12px;border-left:3px solid #7c5cbf;margin:8px 0}
.fc-answer-input{display:flex;gap:8px;margin-top:8px}
.fc-answer-input input{flex:1;font-size:14px;padding:10px 14px;border:2px solid var(--border2);border-radius:10px;background:var(--card);color:var(--ink);transition:border-color 0.2s}
.fc-answer-input input:focus{border-color:var(--accent);outline:none}
.fc-answer-input button{white-space:nowrap}
.fc-or{font-size:12px;color:var(--ink3);text-align:center;padding:6px 0}
@keyframes fcSlide{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.fc-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:20px;font-size:11px;font-weight:700;background:linear-gradient(135deg,rgba(124,92,191,0.1),rgba(245,158,11,0.1));color:#7c5cbf;margin-top:8px}

/* ═══ TEACH MODE (Protégé Effect) ═══ */
.teach-session{margin-top:14px;border:2px solid var(--accent);border-radius:16px;overflow:hidden;animation:fcSlide 0.5s ease}
.teach-header{padding:14px 18px;background:linear-gradient(135deg,rgba(59,130,246,0.08),rgba(124,92,191,0.06));display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--border2)}
.teach-header .teach-av{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#3b82f6,#60a5fa);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.teach-header .teach-name{font-weight:700;font-size:14px}
.teach-header .teach-sub{font-size:11px;color:var(--ink3)}
.teach-body{padding:0}
.teach-msgs{padding:14px 16px;max-height:400px;overflow-y:auto}
.teach-msg{display:flex;gap:8px;margin-bottom:14px;animation:emoxFade 0.4s ease}
.teach-msg .tm-av{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;margin-top:2px}
.teach-msg.kai .tm-av{background:linear-gradient(135deg,#3b82f6,#60a5fa);color:#fff}
.teach-msg.student .tm-av{background:linear-gradient(135deg,#7c5cbf,#a78bfa);color:#fff}
.teach-msg .tm-bubble{padding:10px 14px;border-radius:14px;font-size:14px;line-height:1.7;max-width:85%}
.teach-msg.kai .tm-bubble{background:rgba(59,130,246,0.08);border:1px solid rgba(59,130,246,0.12);color:var(--ink)}
.teach-msg.student .tm-bubble{background:rgba(124,92,191,0.08);border:1px solid rgba(124,92,191,0.12);color:var(--ink);margin-left:auto}
.teach-msg.student{flex-direction:row-reverse}
.teach-msg .tm-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:2px}
.teach-msg.kai .tm-label{color:#3b82f6}
.teach-msg.student .tm-label{color:#7c5cbf;text-align:right}
.teach-input{padding:12px 16px;border-top:1px solid var(--border2);display:flex;gap:8px;background:var(--bg2)}
.teach-input textarea{flex:1;font-size:14px;padding:10px 14px;border:2px solid var(--border2);border-radius:12px;background:var(--card);color:var(--ink);resize:none;min-height:44px;max-height:120px;font-family:inherit;line-height:1.5;transition:border-color 0.2s}
.teach-input textarea:focus{border-color:var(--accent);outline:none}
.teach-input button{white-space:nowrap;align-self:flex-end}
.teach-mistake{background:rgba(245,158,11,0.08)!important;border-color:rgba(245,158,11,0.2)!important}
.teach-catch{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.teach-catch button{font-size:12px;padding:6px 12px;border-radius:8px;border:1.5px solid;cursor:pointer;font-weight:600;transition:all 0.2s}
.teach-catch .tc-correct{background:rgba(58,125,68,0.06);border-color:rgba(58,125,68,0.3);color:var(--green)}
.teach-catch .tc-correct:hover{background:rgba(58,125,68,0.12)}
.teach-catch .tc-wrong{background:rgba(245,158,11,0.06);border-color:rgba(245,158,11,0.3);color:var(--orange)}
.teach-catch .tc-wrong:hover{background:rgba(245,158,11,0.12)}
.teach-grade{padding:18px;text-align:center;border-top:2px solid var(--border2);background:linear-gradient(135deg,rgba(59,130,246,0.04),rgba(124,92,191,0.04))}
.teach-grade .tg-title{font-family:'Instrument Serif',serif;font-size:22px;margin-bottom:4px}
.teach-grade .tg-sub{font-size:13px;color:var(--ink2);margin-bottom:12px;line-height:1.6}
.teach-grade .tg-score{font-size:36px;font-weight:700;color:var(--accent)}
.teach-btn{background:linear-gradient(135deg,#3b82f6,#7c5cbf);color:#fff;border:none;padding:10px 16px;border-radius:10px;font-weight:700;font-size:13px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:transform 0.2s,opacity 0.2s}
.teach-btn:hover{transform:scale(1.02);opacity:0.9}
.teach-btn:disabled{opacity:0.5;transform:none}

/* ═══ LIVING TEXTBOOK ═══ */
.life-example{background:linear-gradient(135deg,rgba(59,130,246,0.05),rgba(20,184,166,0.05));border:1.5px solid rgba(59,130,246,0.15);border-radius:14px;padding:16px;margin-bottom:12px;position:relative;overflow:hidden;animation:fcSlide 0.5s ease}
.life-example::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#3b82f6,#14b8a6,#7c5cbf)}
.life-label{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#3b82f6;margin-bottom:8px}
.life-label .ll-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:lifePulse 2s infinite}
@keyframes lifePulse{0%,100%{opacity:0.4}50%{opacity:1}}
.life-body{font-size:14px;line-height:1.75;color:var(--ink)}
.life-rewrite-btn{background:linear-gradient(135deg,rgba(59,130,246,0.08),rgba(20,184,166,0.08));border:1.5px solid rgba(59,130,246,0.2);color:#3b82f6;padding:8px 14px;border-radius:10px;font-size:12px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:all 0.2s;margin-top:10px}
.life-rewrite-btn:hover{background:linear-gradient(135deg,rgba(59,130,246,0.14),rgba(20,184,166,0.14));transform:scale(1.02)}
.life-rewrite-btn:disabled{opacity:0.5;transform:none}
.life-profile-card{background:var(--card);border:1px solid var(--border2);border-radius:14px;padding:16px;margin-bottom:14px}
.life-interest{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:20px;font-size:11px;font-weight:600;background:rgba(59,130,246,0.08);color:#3b82f6;margin:2px}
.life-world{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:20px;font-size:11px;font-weight:600;background:rgba(124,92,191,0.08);color:var(--accent);margin:2px}

/* ═══ PEER INTELLIGENCE NETWORK ═══ */
.peer-card{border-radius:16px;overflow:hidden;border:1px solid var(--border2);margin-bottom:14px;animation:fcSlide 0.5s ease}
.peer-header{padding:14px 16px;display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,rgba(20,184,166,0.06),rgba(59,130,246,0.04))}
.peer-av{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.peer-av.green{background:linear-gradient(135deg,#14b8a6,#34d399)}
.peer-av.blue{background:linear-gradient(135deg,#3b82f6,#60a5fa)}
.peer-av.purple{background:linear-gradient(135deg,#7c5cbf,#a78bfa)}
.peer-name{font-weight:700;font-size:14px}
.peer-meta{font-size:11px;color:var(--ink3)}
.peer-body{padding:16px}
.peer-quote{font-family:'Instrument Serif',serif;font-size:15px;line-height:1.7;color:var(--ink);padding:12px 16px;background:rgba(20,184,166,0.04);border-radius:12px;border-left:3px solid #14b8a6;margin-bottom:12px}
.peer-path{display:flex;flex-direction:column;gap:8px}
.peer-step{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.6}
.peer-step .ps-marker{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0;margin-top:2px}
.peer-step .ps-stuck{background:rgba(245,158,11,0.1);color:var(--orange)}
.peer-step .ps-try{background:rgba(59,130,246,0.1);color:#3b82f6}
.peer-step .ps-click{background:rgba(58,125,68,0.1);color:var(--green)}
.peer-connect{padding:14px 16px;border-top:1px solid var(--border2);display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink3)}
.peer-connect .pc-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:lifePulse 2s infinite}
.dna-bar{display:flex;gap:2px;margin:6px 0}
.dna-bar .dna-seg{height:6px;border-radius:3px;flex:1;opacity:0.6}
.dna-bar .dna-seg.visual{background:#3b82f6}
.dna-bar .dna-seg.story{background:#7c5cbf}
.dna-bar .dna-seg.analogy{background:#14b8a6}
.dna-bar .dna-seg.technical{background:#f59e0b}
.dna-bar .dna-seg.social{background:#e06377}
.breakthrough-journal{background:var(--card);border:1px solid var(--border2);border-radius:14px;padding:16px;margin-bottom:14px}
.bj-entry{padding:8px 0;border-bottom:1px solid var(--border2);font-size:13px}
.bj-entry:last-child{border:none}
.bj-concept{font-weight:700;font-size:12px}
.bj-what{color:var(--ink2);margin-top:2px;font-size:12px;line-height:1.6}
.bj-badge{font-size:10px;font-weight:700;padding:2px 8px;border-radius:10px;display:inline-block;margin-top:4px}
.bj-badge.struggled{background:rgba(245,158,11,0.1);color:var(--orange)}
.bj-badge.clicked{background:rgba(58,125,68,0.1);color:var(--green)}

/* ═══ SPACED REPETITION REVIEW QUEUE ═══ */
.srs-banner{background:linear-gradient(135deg,rgba(245,158,11,0.08),rgba(224,99,119,0.06));border:1.5px solid rgba(245,158,11,0.2);border-radius:14px;padding:14px 16px;margin-bottom:14px;cursor:pointer;transition:transform 0.2s}
.srs-banner:hover{transform:scale(1.01)}
.srs-count{font-size:28px;font-weight:700;color:var(--orange);font-family:'Instrument Serif',serif}
.srs-sub{font-size:12px;color:var(--ink3)}
.review-card{border:2px solid var(--accent);border-radius:16px;overflow:hidden;margin-bottom:14px;animation:fcSlide 0.5s ease}
.review-header{padding:14px 16px;background:linear-gradient(135deg,rgba(245,158,11,0.06),rgba(124,92,191,0.04))}
.review-q{font-size:15px;font-weight:600;line-height:1.65;margin:10px 0}
.review-reveal{padding:14px 16px;border-top:1px solid var(--border2)}
.review-btns{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap}
.review-btns button{flex:1;min-width:60px;padding:10px 8px;border-radius:10px;border:2px solid;font-weight:700;font-size:12px;cursor:pointer;transition:all 0.2s}
.srs-again{background:rgba(224,99,119,0.06);border-color:rgba(224,99,119,0.3);color:var(--pink)}
.srs-hard{background:rgba(245,158,11,0.06);border-color:rgba(245,158,11,0.3);color:var(--orange)}
.srs-good{background:rgba(59,130,246,0.06);border-color:rgba(59,130,246,0.3);color:#3b82f6}
.srs-easy{background:rgba(58,125,68,0.06);border-color:rgba(58,125,68,0.3);color:var(--green)}

/* ═══ TEACHER PERSONAS ═══ */
.persona-bar{display:flex;gap:6px;margin-bottom:12px;overflow-x:auto;padding-bottom:4px}
.overwhelm-bar{display:none;gap:6px;margin-bottom:12px;padding:10px 12px;background:rgba(224,99,119,0.06);border:1px solid rgba(224,99,119,0.15);border-radius:10px;flex-wrap:wrap}
.overwhelm-bar button{padding:6px 12px;border-radius:16px;border:1px solid var(--border2);background:var(--card);color:var(--ink2);font-size:11px;font-weight:600;cursor:pointer;transition:all 0.2s}
.overwhelm-bar button:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
[data-emox="struggling"] .overwhelm-bar,[data-emox="frustrated"] .overwhelm-bar,[data-emox="anxious"] .overwhelm-bar{display:flex}
.persona-chip{display:flex;align-items:center;gap:4px;padding:6px 12px;border-radius:20px;font-size:12px;font-weight:600;border:1.5px solid var(--border2);cursor:pointer;white-space:nowrap;transition:all 0.2s;background:var(--card)}
.persona-chip.active{border-color:var(--accent);background:rgba(124,92,191,0.08);color:var(--accent)}
.persona-chip:hover{border-color:var(--accent)}

/* ═══ EXAM MODE ═══ */
.exam-session{border:2px solid var(--orange);border-radius:16px;overflow:hidden;margin-top:14px}
.exam-header{padding:14px 16px;background:linear-gradient(135deg,rgba(245,158,11,0.08),rgba(224,99,119,0.04));display:flex;align-items:center;gap:10px}
.exam-timer{font-family:'JetBrains Mono',monospace;font-size:18px;font-weight:700;color:var(--orange)}
.exam-body{padding:16px}
.exam-q{font-size:14px;font-weight:600;line-height:1.65;margin-bottom:12px;padding:12px;background:var(--bg2);border-radius:10px}
.exam-textarea{width:100%;min-height:120px;font-size:14px;padding:12px;border:2px solid var(--border2);border-radius:12px;background:var(--card);color:var(--ink);resize:vertical;font-family:inherit;line-height:1.6;transition:border-color 0.2s;box-sizing:border-box}
.exam-textarea:focus{border-color:var(--accent);outline:none}
.exam-rubric{margin-top:14px;border-radius:12px;overflow:hidden;border:1px solid var(--border2)}
.rubric-row{display:flex;justify-content:space-between;padding:10px 14px;font-size:13px;border-bottom:1px solid var(--border2)}
.rubric-row:last-child{border:none}
.rubric-label{font-weight:600;color:var(--ink2)}
.rubric-score{font-weight:700;min-width:40px;text-align:right}
.rubric-score.high{color:var(--green)}
.rubric-score.mid{color:var(--orange)}
.rubric-score.low{color:var(--pink)}

/* ═══ CONTENT ENRICHMENT ═══ */
.enrich-card{background:linear-gradient(135deg,rgba(59,130,246,0.03),rgba(20,184,166,0.03));border:1px solid rgba(59,130,246,0.12);border-radius:12px;padding:14px;margin-top:10px}
.enrich-help-bar{display:flex;gap:8px;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--border2);flex-wrap:wrap}
.enrich-help-btn{padding:8px 14px;border-radius:20px;border:1px solid var(--border2);background:var(--bg2);color:var(--ink2);font-size:12px;font-weight:600;cursor:pointer;transition:all 0.2s}
.enrich-help-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.enrich-help-btn.accent{background:rgba(124,92,191,0.08);border-color:rgba(124,92,191,0.2);color:var(--accent)}
.enrich-essential{display:flex;flex-direction:column;gap:12px}
.enrich-item{padding-bottom:10px;border-bottom:1px solid var(--border)}
.enrich-item:last-child{border-bottom:none;padding-bottom:0}
.enrich-academic{margin-top:12px}
.enrich-academic summary{cursor:pointer;padding:10px 12px;background:var(--bg2);border-radius:8px;font-size:12px;font-weight:600;color:var(--ink2)}
.enrich-academic summary:hover{background:var(--bg3)}
.enrich-academic-body{padding-top:12px;display:flex;flex-direction:column;gap:12px}
.enrich-simplified{padding:12px;background:rgba(39,174,96,0.06);border:1px solid rgba(39,174,96,0.15);border-radius:10px}
/* #10 Mastery Map */
.mastery-map{padding:14px}
.mastery-topic{margin-bottom:12px}
.mastery-topic-hdr{display:flex;align-items:center;gap:8px;margin-bottom:6px;cursor:pointer}
.mastery-topic-hdr .mt-icon{font-size:16px}
.mastery-topic-hdr .mt-title{font-weight:700;font-size:13px;flex:1}
.mastery-topic-hdr .mt-pct{font-weight:800;font-size:14px;min-width:44px;text-align:right}
.mastery-bar{height:8px;background:var(--border2);border-radius:4px;overflow:hidden;margin-bottom:4px}
.mastery-bar-fill{height:100%;border-radius:4px;transition:width 0.4s}
.mastery-cells{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.mastery-cell{width:24px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:600;color:#fff;cursor:pointer;transition:all 0.15s;position:relative;opacity:0.85}
.mastery-cell:hover{transform:scale(1.2);z-index:2;opacity:1}
.mastery-cell[data-tip]:hover::after{content:attr(data-tip);position:absolute;bottom:110%;left:50%;transform:translateX(-50%);background:#1a1a2e;color:#fff;padding:3px 8px;border-radius:6px;font-size:10px;white-space:nowrap;z-index:10;pointer-events:none}
.mc-high{background:#4aba7a}
.mc-mid{background:#e8a756}
.mc-low{background:#e07878}
.mc-none{background:var(--border2);color:var(--ink3)}
/* Predicted Score */
.pred-card{background:linear-gradient(135deg,rgba(124,92,191,0.06),rgba(46,117,182,0.06));border:1.5px solid rgba(124,92,191,0.2);border-radius:16px;padding:18px;margin-bottom:14px}
.pred-score{font-family:'Instrument Serif',serif;font-size:48px;font-weight:700;text-align:center}
.pred-grade{font-size:20px;font-weight:800;text-align:center;margin-top:-4px;margin-bottom:8px}
.pred-conf{font-size:11px;color:var(--ink3);text-align:center;margin-bottom:12px}
.pred-gaps{margin-top:10px}
.pred-gap{display:flex;align-items:center;gap:8px;padding:6px 0;border-top:1px solid var(--border2);font-size:12px}
.pred-gap .gap-concept{flex:1;font-weight:600}
.pred-gap .gap-mastery{font-weight:700;min-width:36px;text-align:right}
/* Diagnostic */
.diag-session{border:2px solid #3b82f6;border-radius:16px;overflow:hidden;margin-top:14px}
/* Syllabus Panel */
.learn-layout{display:flex;gap:0;min-height:calc(100vh - 120px);margin:0;padding:0}
.learn-sidebar{width:260px;min-width:260px;border-right:1px solid var(--border2);overflow-y:auto;position:sticky;top:0;max-height:calc(100vh - 120px);background:var(--bg1);transition:all 0.25s ease;padding:0;margin:0}
.learn-sidebar.collapsed{width:44px;min-width:44px;overflow:hidden;padding:0;background:var(--bg1);border-right:1px solid var(--border2)}
.learn-sidebar.collapsed .syl-sidebar-body{display:none}
.learn-sidebar.collapsed .syl-sidebar-header{display:none}
.learn-sidebar.collapsed>*:not(.syl-toggle){display:none}
.learn-sidebar.collapsed .syl-toggle{position:absolute;top:12px;left:50%;transform:translateX(-50%);right:auto;background:var(--accent);color:#fff;border:none;width:28px;height:28px;border-radius:8px;display:flex!important;align-items:center;justify-content:center;font-size:14px;box-shadow:0 2px 8px rgba(0,0,0,0.15);cursor:pointer}
.learn-sidebar.collapsed .syl-toggle:hover{transform:translateX(-50%) scale(1.1)}
.syl-toggle{position:absolute;top:8px;right:-14px;width:28px;height:28px;border-radius:50%;background:var(--card);border:1px solid var(--border2);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;z-index:10;box-shadow:0 2px 6px rgba(0,0,0,0.1);transition:all 0.2s}
.syl-toggle:hover{background:var(--accent);color:#fff;transform:scale(1.1)}
.learn-sidebar::-webkit-scrollbar{width:3px}
.learn-sidebar::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}
.syl-sidebar-header{display:flex;align-items:center;gap:6px;padding:8px 8px;border-bottom:1px solid var(--border2);position:sticky;top:0;background:var(--bg1);z-index:2}
.syl-sidebar-header .ssh-title{font-weight:700;font-size:12px;flex:1}
.syl-sidebar-header .ssh-pct{font-size:11px;color:var(--ink3);font-weight:600}
.syl-sidebar-toggle{font-size:12px;color:var(--ink3);cursor:pointer;padding:2px 4px}
.syl-sidebar-body{padding:4px 0}
.learn-main{flex:1;min-width:0;padding:0 16px}
.dash-grid{display:grid;grid-template-columns:1fr;gap:14px}
.dash-grid>div>.card,.dash-grid>div>.pred-card{margin-bottom:0}
@media(min-width:900px){.dash-grid{grid-template-columns:1fr 1fr}}
@media(max-width:768px){
  .learn-layout{flex-direction:column}
  .learn-sidebar{width:100%;min-width:0;max-height:none;position:relative;border-right:none;border-bottom:1px solid var(--border2)}
  .learn-main{padding:0}
  .syl-sidebar-body{display:none}
  .syl-sidebar-body.open{display:block}
}
@media(min-width:769px){
  .syl-sidebar-toggle{display:none!important}
  .syl-sidebar-body{display:block!important}
}
.syl-panel{border:1.5px solid var(--border);border-radius:14px;margin-bottom:14px;overflow:hidden}
.syl-header{display:flex;align-items:center;gap:8px;padding:12px 14px;cursor:pointer;background:var(--bg1)}
.syl-header:hover{background:var(--bg2)}
.syl-header .syl-title{font-weight:700;font-size:13px;flex:1}
.syl-header .syl-toggle{font-size:12px;color:var(--ink3);transition:transform 0.2s}
.syl-header.open .syl-toggle{transform:rotate(180deg)}
.syl-body{display:none;padding:0 14px 14px;max-height:60vh;overflow-y:auto}
.syl-body.open{display:block}
.syl-topic{margin-bottom:8px;border-left:2px solid var(--border2);padding-left:10px}
.syl-topic-hdr{display:flex;align-items:center;gap:6px;padding:6px 0;cursor:pointer}
.syl-topic-hdr .st-icon{font-size:14px}
.syl-topic-hdr .st-title{font-weight:700;font-size:12px;flex:1}
.syl-topic-hdr .st-spec{font-size:10px;color:var(--accent);font-weight:600;background:rgba(124,92,191,0.08);padding:1px 6px;border-radius:6px}
.syl-topic-hdr .st-count{font-size:10px;color:var(--ink3);font-weight:600}
.syl-topic-hdr .st-pct{font-size:11px;font-weight:800;min-width:30px;text-align:right}
.syl-objectives{margin:2px 0 4px 20px;font-size:10px;color:var(--ink3);line-height:1.5}
.syl-concepts{margin-left:20px}
.syl-concept{display:flex;align-items:center;gap:6px;padding:4px 0;font-size:11px;cursor:pointer;border-bottom:1px solid var(--border2)}
.syl-concept:hover{color:var(--accent)}
.syl-concept .sc-status{width:14px;height:14px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:8px}
.syl-concept .sc-name{flex:1}
.syl-concept .sc-mastery{font-weight:700;font-size:10px;min-width:28px;text-align:right}
.syl-actions{display:flex;gap:6px;margin-top:10px;padding-top:8px;border-top:1px solid var(--border2)}
/* Custom editor */
.edit-modal{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);z-index:200;display:flex;align-items:center;justify-content:center;padding:16px}
.edit-box{background:var(--bg1);border-radius:16px;padding:20px;max-width:460px;width:100%;max-height:80vh;overflow-y:auto}
.edit-box h3{font-family:'Instrument Serif',serif;font-size:20px;margin-bottom:12px}
.edit-box label{font-size:12px;font-weight:700;color:var(--ink3);display:block;margin:8px 0 3px}
.edit-box input,.edit-box textarea{width:100%;padding:8px 10px;border:1.5px solid var(--border);border-radius:8px;font-size:13px;background:var(--bg1);color:var(--ink);font-family:inherit}
.edit-box textarea{min-height:60px;resize:vertical}
.diag-header{background:linear-gradient(135deg,#3b82f6,#7c5cbf);color:#fff;padding:14px 16px;display:flex;justify-content:space-between;align-items:center}
.diag-body{padding:16px}
.diag-q{font-weight:700;font-size:14px;margin-bottom:12px;line-height:1.5}
.diag-opt{padding:10px 14px;border:1.5px solid var(--border);border-radius:10px;margin-bottom:6px;cursor:pointer;font-size:13px;transition:all 0.15s}
.diag-opt:hover{border-color:var(--accent);background:rgba(124,92,191,0.04)}
.diag-opt.selected{border-color:#3b82f6;background:rgba(59,130,246,0.08);font-weight:700}
.diag-results{padding:18px}
.diag-topic-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border2)}
.diag-topic-row .dt-icon{font-size:18px}
.diag-topic-row .dt-name{flex:1;font-weight:600;font-size:13px}
.diag-topic-row .dt-score{font-weight:800;font-size:14px;min-width:40px;text-align:right}
.enrich-source{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--ink3);margin-bottom:6px;display:flex;align-items:center;gap:4px}
.enrich-body{font-size:13px;line-height:1.7;color:var(--ink2)}

/* APP LAUNCHER */
.app-launcher-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.3);opacity:0;visibility:hidden;transition:opacity 0.2s ease;z-index:998}
.app-launcher-overlay.active{opacity:1;visibility:visible}
.app-launcher{position:fixed;top:52px;left:16px;width:420px;background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,0.15);opacity:0;visibility:hidden;transform:scale(0.9) translateY(-10px);transform-origin:top left;transition:all 0.2s cubic-bezier(0.4,0,0.2,1);z-index:999;overflow:hidden;max-height:80vh}
.app-launcher.active{opacity:1;visibility:visible;transform:scale(1) translateY(0)}
.app-launcher-header{padding:14px 18px;border-bottom:1px solid var(--border);font-weight:600;font-size:0.85rem;color:var(--ink)}
.app-launcher-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:10px;max-height:calc(80vh - 52px);overflow-y:auto}
.app-launcher-item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 8px;background:transparent;border:1px solid transparent;border-radius:10px;cursor:pointer;transition:all 0.2s;text-decoration:none;color:var(--ink)}
.app-launcher-item:hover{background:var(--hover);border-color:var(--border)}
.app-launcher-item.current{background:var(--hover);border-color:var(--accent)}
.app-launcher-icon{width:40px;height:40px;border-radius:10px;background:var(--bg2);display:flex;align-items:center;justify-content:center;transition:all 0.2s}
.app-emoji{font-size:1.35rem}
.app-launcher-item:hover .app-launcher-icon{transform:scale(1.05);box-shadow:0 4px 12px rgba(0,0,0,0.08)}
.app-launcher-label{font-size:0.7rem;font-weight:500;text-align:center;color:var(--ink2);line-height:1.3}
@media(max-width:480px){.app-launcher{left:8px;right:8px;width:auto}.app-launcher-grid{grid-template-columns:repeat(2,1fr)}}
[dir="rtl"] .app-launcher{left:auto;right:16px;transform-origin:top right}

/* TOPBAR */
.topbar{height:52px;background:var(--card);border-bottom:1px solid var(--border2);display:flex;align-items:center;padding:0 16px;padding-top:env(safe-area-inset-top,0);gap:10px;position:sticky;top:0;z-index:100}

/* COURSE SWITCHER BAR */
.course-bar{background:var(--card);border-bottom:1px solid var(--border2);position:sticky;top:52px;z-index:99;padding:0}
.course-bar-scroll{display:flex;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;gap:0;padding:0 8px}
.course-bar-scroll::-webkit-scrollbar{display:none}
.course-tab{display:flex;align-items:center;gap:6px;padding:10px 16px;white-space:nowrap;font-size:13px;font-weight:600;color:var(--ink3);cursor:pointer;border-bottom:3px solid transparent;transition:all 0.15s;flex-shrink:0;position:relative}
.course-tab:hover{color:var(--ink);background:var(--hover)}
.course-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.course-tab .ct-icon{font-size:16px}
.course-tab .ct-name{max-width:120px;overflow:hidden;text-overflow:ellipsis}
.course-tab .ct-pct{font-size:10px;opacity:0.6;font-weight:700}
.course-tab-add{display:flex;align-items:center;gap:4px;padding:10px 14px;white-space:nowrap;font-size:12px;font-weight:700;color:var(--ink3);cursor:pointer;border-bottom:3px solid transparent;transition:all 0.15s;flex-shrink:0}
.course-tab-add:hover{color:var(--accent)}
.course-tab-lib{display:flex;align-items:center;gap:4px;padding:10px 12px;white-space:nowrap;font-size:11px;font-weight:600;color:var(--ink3);cursor:pointer;border-bottom:3px solid transparent;transition:all 0.15s;flex-shrink:0;margin-left:auto;border-left:1px solid var(--border2)}
.course-tab-lib:hover{color:var(--accent)}
.tb-logo{font-family:'Instrument Serif',serif;font-size:19px;letter-spacing:-0.5px;white-space:nowrap;cursor:pointer}
.tb-logo em{color:var(--pink);font-style:italic}
.tb-level{display:flex;align-items:center;gap:5px;background:var(--bg2);border-radius:10px;padding:4px 10px;font-size:11px;font-weight:700;color:var(--accent)}
.tb-streak{font-size:12px;font-weight:700;color:var(--gold)}
.tb-spacer{flex:1}
.tb-heart{font-size:18px;cursor:pointer;animation:heartPulse 2s ease-in-out infinite}
@keyframes heartPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
.tb-mood{font-size:16px;cursor:pointer;transition:transform 0.2s}
.tb-mood:hover{transform:scale(1.2)}
.tb-btn{width:32px;height:32px;border-radius:8px;border:1px solid var(--border);background:var(--card);color:var(--ink3);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.15s}
.tb-btn:hover{border-color:var(--accent);color:var(--accent)}

/* DAD'S STUDY CARD */
.dad-card{position:relative;border-radius:var(--radius-lg);margin-bottom:16px;cursor:pointer;background:var(--card);border:1px solid var(--border2);transition:all 0.25s ease}
.dad-card:hover{transform:translateY(-2px);box-shadow:var(--glow)}
@keyframes infinityFlow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.dad-card-inner{padding:24px;position:relative;overflow:hidden}
.dad-card-inner::before{content:'';position:absolute;top:-50%;right:-20%;width:300px;height:300px;background:radial-gradient(circle,rgba(124,92,191,0.06) 0%,transparent 70%);pointer-events:none}
.dad-infinity{position:absolute;top:14px;right:18px;font-size:18px;opacity:0.12}

/* WELCOME OVERLAY */
/* ── AI DISCLOSURE / AGE GATE ──────────────────────────────── */
.ai-gate-overlay{position:fixed;inset:0;background:rgba(10,10,24,0.92);z-index:900;display:none;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.ai-gate-overlay.active{display:flex}
.ai-gate-card{background:var(--card);border-radius:24px;padding:36px 32px;max-width:400px;width:92%;text-align:center;box-shadow:0 24px 64px rgba(0,0,0,0.35);animation:welcomeIn 0.6s cubic-bezier(0.34,1.56,0.64,1)}
.ai-gate-icon{font-size:44px;margin-bottom:14px}
.ai-gate-title{font-family:'Instrument Serif',serif;font-size:24px;margin-bottom:8px;color:var(--ink)}
.ai-gate-body{font-size:14px;color:var(--ink2);line-height:1.75;margin-bottom:22px}
.ai-gate-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:20px;background:rgba(124,92,191,0.08);border:1px solid rgba(124,92,191,0.2);font-size:12px;font-weight:700;color:var(--accent);margin-bottom:18px}
.ai-gate-btns{display:flex;flex-direction:column;gap:8px}
.ai-gate-legal{font-size:10px;color:var(--ink3);margin-top:14px;line-height:1.5}
/* Age gate specific */
.age-choice-row{display:flex;gap:10px;justify-content:center;margin-bottom:10px}
.age-choice-btn{flex:1;padding:13px;border-radius:14px;border:2px solid var(--border);background:var(--card);cursor:pointer;font-family:var(--font);font-size:14px;font-weight:700;color:var(--ink);transition:all 0.18s}
.age-choice-btn:hover{border-color:var(--accent);color:var(--accent)}
.age-choice-btn.selected{border-color:var(--accent);background:rgba(124,92,191,0.07);color:var(--accent)}
/* Minor mode badge */
.minor-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:10px;font-size:10px;font-weight:700;background:rgba(58,125,68,0.1);color:var(--green);margin-left:6px}
/* Persistent AI indicator in topbar */
.tb-ai-tag{font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:700;letter-spacing:1px;padding:3px 7px;border-radius:6px;background:rgba(124,92,191,0.1);color:var(--accent);border:1px solid rgba(124,92,191,0.2)}
/* Compliance panel in settings */
.compliance-section{margin-top:4px}
.comp-tab-row{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.comp-tab{padding:6px 14px;border-radius:20px;border:1px solid var(--border);background:var(--card);font-size:12px;font-weight:700;cursor:pointer;color:var(--ink2);transition:all 0.15s;font-family:var(--font)}
.comp-tab.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.comp-pane{display:none;font-size:12px;color:var(--ink2);line-height:1.7;background:var(--bg2);border-radius:12px;padding:14px 16px}
.comp-pane.active{display:block}
.comp-pane h4{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:6px;margin-top:10px}
.comp-pane h4:first-child{margin-top:0}
.comp-pane ul{padding-left:16px;margin-bottom:6px}
.comp-pane ul li{margin-bottom:4px}
.comp-status-row{display:flex;align-items:center;gap:6px;padding:7px 10px;border-radius:8px;margin-bottom:5px;font-size:12px;font-weight:600}
.cs-green{background:rgba(58,125,68,0.08);color:var(--green)}
.cs-amber{background:rgba(180,120,10,0.08);color:var(--gold)}
.cs-blue{background:rgba(59,111,160,0.08);color:var(--blue)}
/* -- PARENTAL CONSENT GATE ---------------------------------------- */
.parent-gate-overlay{position:fixed;inset:0;background:rgba(10,10,24,0.94);z-index:950;display:none;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.parent-gate-overlay.active{display:flex}
.parent-gate-card{background:var(--card);border-radius:24px;padding:36px 32px;max-width:430px;width:92%;box-shadow:0 24px 64px rgba(0,0,0,0.4);animation:welcomeIn 0.5s cubic-bezier(0.34,1.56,0.64,1);max-height:90vh;overflow-y:auto}
.pg-icon{font-size:42px;text-align:center;margin-bottom:12px}
.pg-title{font-family:'Instrument Serif',serif;font-size:21px;font-weight:700;text-align:center;margin-bottom:6px;color:var(--ink)}
.pg-sub{font-size:13px;color:var(--ink2);line-height:1.7;text-align:center;margin-bottom:18px}
.pg-hand-device{background:rgba(124,92,191,0.06);border:1px solid rgba(124,92,191,0.18);border-radius:12px;padding:12px 14px;font-size:13px;color:var(--ink2);line-height:1.6;margin-bottom:18px;text-align:center}
.pg-hand-device strong{color:var(--accent);display:block;font-size:14px;margin-bottom:4px}
.pg-maths-box{background:var(--bg2);border-radius:12px;padding:18px;margin-bottom:14px;text-align:center}
.pg-maths-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--ink3);margin-bottom:10px;font-family:'JetBrains Mono',monospace}
.pg-maths-q{font-family:'JetBrains Mono',monospace;font-size:24px;font-weight:700;color:var(--ink);margin-bottom:14px;letter-spacing:1px}
.pg-maths-input{width:100%;padding:11px 16px;border:2px solid var(--border);border-radius:10px;font-family:'JetBrains Mono',monospace;font-size:20px;text-align:center;color:var(--ink);background:var(--card);transition:border-color 0.2s;outline:none}
.pg-maths-input:focus{border-color:var(--accent)}
.pg-maths-input.correct{border-color:var(--green);background:rgba(58,125,68,0.05)}
.pg-maths-input.wrong{border-color:var(--red);background:rgba(220,38,38,0.05);animation:pgShake 0.4s ease}
@keyframes pgShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.pg-maths-hint{font-size:11px;margin-top:6px;min-height:16px;text-align:center}
.pg-consent-opts{display:none;flex-direction:column;gap:8px;margin-bottom:14px}
.pg-consent-opts.show{display:flex}
.pg-consent-row{display:flex;align-items:flex-start;gap:12px;padding:11px 13px;border-radius:11px;border:1px solid var(--border2);background:var(--bg2)}
.pg-consent-row input[type=checkbox]{
  width:20px;height:20px;flex-shrink:0;cursor:pointer;margin-top:2px;
  /* Custom checkbox so "checked" is always visible across browsers */
  -webkit-appearance:none;appearance:none;
  border:2px solid var(--border);
  border-radius:6px;
  background:var(--card);
  display:grid;
  place-content:center;
  transition:background-color 0.15s,border-color 0.15s,transform 0.12s,box-shadow 0.15s;
}
.pg-consent-row input[type=checkbox]::before{
  content:"";
  width:10px;height:6px;
  border-left:2px solid #fff;
  border-bottom:2px solid #fff;
  transform:rotate(-45deg) scale(0);
  transform-origin:center;
  transition:transform 0.12s ease;
  margin-top:-1px;
}
.pg-consent-row input[type=checkbox]:checked{
  background:var(--accent);
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(124,92,191,0.18);
}
.pg-consent-row input[type=checkbox]:checked::before{transform:rotate(-45deg) scale(1)}
.pg-consent-row input[type=checkbox]:active{transform:scale(0.96)}
.pg-consent-row input[type=checkbox]:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(124,92,191,0.28);
}
.pg-consent-row input[type=checkbox]:checked + label strong{color:var(--accent)}
.pg-consent-row input[type=checkbox]:checked + label{color:var(--ink)}
.pg-consent-row label{font-size:12px;color:var(--ink2);cursor:pointer;line-height:1.5}
.pg-consent-row label strong{color:var(--ink);display:block;margin-bottom:2px;font-size:13px}
.pg-legal{font-size:10px;color:var(--ink3);line-height:1.5;margin-top:8px;text-align:center}
.pg-attempts{font-size:11px;text-align:center;margin-top:4px;min-height:14px}
.pg-skip{font-size:11px;color:var(--ink3);text-align:center;margin-top:12px;cursor:pointer;background:none;border:none;font-family:var(--font);width:100%;padding:4px;display:block}
.pg-skip:hover{color:var(--ink2);text-decoration:underline}
.tb-parent-badge{font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:700;letter-spacing:1px;padding:3px 7px;border-radius:6px;background:rgba(58,125,68,0.12);color:var(--green);border:1px solid rgba(58,125,68,0.25)}

/* Gamification toggle row in settings */
.gamif-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0}
.gamif-row-label{font-size:13px;font-weight:700;color:var(--ink)}
.gamif-row-sub{font-size:11px;color:var(--ink3);margin-top:1px}
.welcome-overlay{position:fixed;inset:0;background:rgba(15,10,25,0.85);z-index:500;display:none;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(8px)}
.welcome-overlay.active{display:flex}
.welcome-card{background:var(--card);border-radius:24px;padding:40px 32px;max-width:380px;width:90%;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,0.3);animation:welcomeIn 0.8s cubic-bezier(0.34,1.56,0.64,1)}
@keyframes welcomeIn{from{opacity:0;transform:scale(0.8) translateY(20px)}to{opacity:1;transform:none}}
.welcome-hearts{font-size:40px;margin-bottom:16px;animation:welcomeHearts 2s ease-in-out infinite}
@keyframes welcomeHearts{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
.welcome-title{font-family:'Instrument Serif',serif;font-size:26px;margin-bottom:8px;background:linear-gradient(135deg,#7c5cbf,#e06377);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.welcome-msg{font-size:15px;color:var(--ink2);line-height:1.7;margin-bottom:20px}
.welcome-code{font-size:13px;color:var(--pink);font-weight:700;letter-spacing:2px;margin-bottom:20px;padding:10px;background:rgba(224,99,119,0.06);border-radius:10px}

/* DAD'S LOVE NOTE OVERLAY */
.love-overlay{position:fixed;inset:0;background:rgba(15,10,25,0.8);z-index:400;display:none;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(6px)}
.love-overlay.active{display:flex}
.love-card{background:var(--card);border-radius:20px;padding:36px;max-width:340px;width:90%;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,0.3);animation:welcomeIn 0.6s cubic-bezier(0.34,1.56,0.64,1)}

/* BOTTOM TAB BAR */
.tab-bar{position:fixed;bottom:0;left:0;right:0;height:72px;background:var(--card);border-top:1px solid var(--border2);display:flex;justify-content:center;align-items:center;gap:4px;padding:0 12px;z-index:100;padding-bottom:env(safe-area-inset-bottom)}
.tab{flex:1;max-width:85px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;border-radius:10px;cursor:pointer;transition:all 0.2s;color:var(--ink3);position:relative}
.tab:hover{color:var(--ink2);background:var(--hover)}
.tab.active{color:var(--accent);background:rgba(124,92,191,0.08)}
[data-theme="dark"] .tab.active{background:rgba(124,92,191,0.18)}
.tab-icon{font-size:22px;transition:transform 0.2s}
.tab.active .tab-icon{transform:scale(1.1)}
.tab-label{font-size:10px;font-weight:600;letter-spacing:0.3px}
.tab.tab-disabled{opacity:0.42;cursor:not-allowed;filter:grayscale(0.35)}
.tab.tab-disabled:hover{color:var(--ink3);background:transparent}
.tab-badge{position:absolute;top:2px;right:calc(50% - 18px);background:var(--red);color:white;font-size:9px;font-weight:700;padding:2px 5px;border-radius:10px;min-width:16px;text-align:center}
.back-btn{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:600;color:var(--ink3);cursor:pointer;padding:6px 10px;border-radius:8px;border:none;background:none;font-family:'DM Sans',sans-serif;margin-bottom:10px;transition:all 0.15s}
.back-btn:hover{color:var(--accent);background:rgba(124,92,191,0.06)}

/* MAIN */
.main{max-width:1100px;margin:0 auto;padding:16px 14px 100px;padding-bottom:calc(100px + env(safe-area-inset-bottom,0))}
.main:has(.learn-layout){max-width:100%;padding-left:0;padding-right:0}
.card{background:var(--card);border:none;border-radius:18px;padding:22px;margin-bottom:14px;transition:all 0.25s;box-shadow:0 2px 12px rgba(0,0,0,0.06)}
.card:hover{box-shadow:0 4px 20px rgba(0,0,0,0.1);transform:translateY(-2px)}
[data-theme="dark"] .card{box-shadow:0 2px 12px rgba(0,0,0,0.35)}
[data-theme="dark"] .card:hover{box-shadow:0 4px 20px rgba(0,0,0,0.45)}
.section-title{font-family:'Instrument Serif',serif;font-size:22px;color:var(--ink);margin-bottom:4px}
.section-sub{font-size:12px;color:var(--ink3);margin-bottom:14px}
.tag{display:inline-block;padding:3px 10px;border-radius:6px;font-size:11px;font-weight:700;color:#fff}
.btn{border:none;cursor:pointer;border-radius:12px;font-weight:600;font-family:'DM Sans',sans-serif;transition:all 0.2s;font-size:14px;padding:12px 24px}
.btn-primary{background:var(--grad);color:#fff}
.btn-primary:hover{opacity:0.9;transform:translateY(-1px)}
.btn-primary:disabled{opacity:0.4;cursor:not-allowed;transform:none}
.btn-secondary{background:var(--bg2);color:var(--ink2);border:1px solid var(--border)}
.btn-secondary:hover{border-color:var(--accent);color:var(--accent)}
.btn-sm{padding:8px 16px;font-size:12px;border-radius:8px}
.btn-xs{padding:5px 10px;font-size:11px;border-radius:6px}
.learn-stats-ribbon{display:flex;gap:8px;margin-left:auto;font-size:11px;align-items:center}
.lsr-stat{padding:3px 8px;background:var(--bg2);border-radius:6px;color:var(--ink2);font-weight:600}
.lsr-stat strong{color:var(--accent);font-weight:800}
.lsr-stat.mastery{color:var(--green)}
.lsr-stat.weak{background:rgba(245,158,11,0.1);color:var(--orange)}
input,textarea,select{font-family:'DM Sans',sans-serif;font-size:14px;border:1.5px solid var(--border);border-radius:10px;padding:10px 14px;outline:none;transition:border 0.2s;background:var(--card);color:var(--ink);width:100%;box-sizing:border-box;-webkit-appearance:none;appearance:none}
input::placeholder,textarea::placeholder{color:var(--ink3);opacity:1}
input:focus,textarea:focus{border-color:var(--accent)}
/* Chrome autofill: match card background + readable text in dark mode */
input:-webkit-autofill,textarea:-webkit-autofill,select:-webkit-autofill{
  -webkit-box-shadow:0 0 0 1000px var(--card) inset;
  box-shadow:0 0 0 1000px var(--card) inset;
  -webkit-text-fill-color:var(--ink);
  caret-color:var(--ink);
  transition:background-color 99999s ease-out;
}
[data-theme="dark"] select option,[data-theme="dark"] select optgroup{background-color:var(--card);color:var(--ink)}
textarea{resize:vertical;min-height:120px;line-height:1.7}
button{-webkit-appearance:none;appearance:none}
body.scroll-locked{overflow:hidden;position:fixed;width:100%;top:var(--scroll-top,0)}
.progress-bar{height:5px;background:var(--bg2);border-radius:3px;overflow:hidden;margin:6px 0}
.progress-fill{height:100%;border-radius:3px;transition:width 0.6s ease}
.progress-fill.purple{background:var(--grad)}
.progress-fill.green{background:var(--grad2)}

/* HERO STATS */
.hero{padding:28px;background:linear-gradient(135deg,var(--card),var(--bg2));border:1px solid var(--border2);border-radius:var(--radius-lg);color:var(--ink);text-align:center;margin-bottom:16px;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:-50%;right:-20%;width:300px;height:300px;background:radial-gradient(circle,rgba(124,92,191,0.08) 0%,transparent 70%);pointer-events:none}
.hero-title{font-family:var(--font-display);font-size:26px;font-weight:700;position:relative}
.hero-sub{color:var(--ink2);font-size:14px;margin-top:6px;position:relative}
.hero-stats{display:flex;justify-content:center;gap:28px;margin-top:14px;font-size:14px;font-weight:600;position:relative}
.hero-bar{margin-top:12px;background:var(--bg3);border-radius:4px;height:8px;position:relative}
.hero-bar-fill{height:100%;background:var(--grad);border-radius:4px;transition:width 0.5s}
.hero-hint{font-size:12px;color:var(--ink3);margin-top:6px;position:relative}

/* STAT ROW */
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px}
.stat-box{background:var(--card);border:1px solid var(--border2);border-radius:10px;padding:10px;text-align:center}
.stat-val{font-family:'JetBrains Mono',monospace;font-size:20px;font-weight:700;color:var(--accent)}
.stat-lbl{font-size:9px;color:var(--ink3);text-transform:uppercase;letter-spacing:1px;font-weight:700;margin-top:2px}

/* TOPIC GRID */
.topic-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:14px}
.topic-card{background:var(--card);border:1px solid var(--border2);border-radius:12px;padding:14px;cursor:pointer;transition:all 0.2s;position:relative;overflow:hidden}
.topic-card:hover{transform:translateY(-2px);box-shadow:var(--shadow2);border-color:var(--accent)}
.sub-card{background:var(--card);border:1px solid var(--border2);border-radius:10px;padding:12px 14px;cursor:pointer;transition:all 0.15s;border-left:4px solid var(--accent);margin-bottom:6px}
.sub-card:hover{transform:translateX(3px);box-shadow:var(--shadow)}
.formula-box{background:var(--bg2);border-radius:10px;padding:10px 14px;font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--accent);white-space:pre-line;margin:10px 0}
.example-box{background:#fff5f7;border-radius:10px;padding:12px;font-size:13px;line-height:1.7;color:var(--ink2);margin:8px 0}
[data-theme="dark"] .example-box{background:rgba(224,99,119,0.08)}
.tip-box{background:#fffbeb;border-radius:10px;padding:12px;font-size:13px;line-height:1.6;color:#92620e;margin:8px 0}
[data-theme="dark"] .tip-box{background:rgba(184,134,11,0.1);color:var(--gold)}
.back-btn{background:none;border:none;cursor:pointer;color:var(--accent);font-size:13px;font-weight:700;padding:0;margin-bottom:12px;font-family:'DM Sans',sans-serif}

/* HUH BUTTON */
.huh-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:20px;border:1px solid var(--border2);background:var(--card);color:var(--ink);font-size:13px;font-weight:700;cursor:pointer;transition:all 0.2s;font-family:'DM Sans',sans-serif;box-shadow:0 2px 6px rgba(0,0,0,0.06)}
.huh-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent);transform:scale(1.05)}
.huh-btn:active{transform:scale(0.95)}
.huh-btn .huh-girl{font-size:18px;animation:huhWobble 2.5s ease-in-out infinite}
@keyframes huhWobble{0%,100%{transform:rotate(0deg)}15%{transform:rotate(-12deg)}30%{transform:rotate(10deg)}45%{transform:rotate(-8deg)}60%{transform:rotate(6deg)}75%{transform:rotate(-3deg)}}
.huh-result{background:var(--card);border:2px solid var(--accent);border-radius:14px;padding:16px;margin-top:12px;position:relative;animation:huhSlide 0.4s cubic-bezier(0.34,1.56,0.64,1)}
@keyframes huhSlide{from{opacity:0;transform:translateY(-10px) scale(0.97)}to{opacity:1;transform:none}}
.huh-result .huh-style{display:inline-block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--pink);background:rgba(224,99,119,0.08);padding:3px 10px;border-radius:6px;margin-bottom:8px}
.huh-result .huh-body{font-size:14px;line-height:1.75;color:var(--ink2)}
.huh-counter{font-size:10px;opacity:0.6;margin-left:4px}

/* CONCEPT DETAIL HERO */
.concept-hero{background:linear-gradient(135deg,var(--card),var(--bg2));border:1px solid var(--border2);border-radius:16px;padding:22px;color:var(--ink);margin-bottom:12px;position:relative;overflow:hidden}
.concept-hero::before{content:'';position:absolute;top:-50%;right:-20%;width:200px;height:200px;background:radial-gradient(circle,rgba(124,92,191,0.08) 0%,transparent 70%);pointer-events:none}
.concept-hero .ch-progress{font-size:11px;color:var(--accent);font-weight:700;letter-spacing:0.5px;margin-bottom:8px}
.concept-hero h2{font-family:'Instrument Serif',serif;font-size:24px;margin-bottom:10px;color:var(--ink)}
.concept-hero .ch-formula{font-family:'JetBrains Mono',monospace;font-size:14px;background:var(--bg2);border:1px solid var(--border);padding:8px 14px;border-radius:10px;white-space:pre-line;margin-bottom:12px;display:inline-block;color:var(--ink)}
.concept-hero .ch-plain{font-size:14px;line-height:1.75;color:var(--ink2)}

/* CONCEPT EXAMPLE / TIP ROW */
.concept-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.concept-ex{background:var(--card);border:1px solid var(--border2);border-radius:12px;padding:14px;font-size:13px;line-height:1.7;color:var(--ink2)}
.concept-ex .cx-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px}
.concept-ex .cx-label.pink{color:var(--pink)}
.concept-ex .cx-label.gold{color:var(--gold)}

/* CONCEPT ACTIONS */
.concept-actions{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.concept-actions-v2{margin:16px 0}
.rate-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.rate-row .rate-btn{border:1px solid var(--border2);background:var(--card);color:var(--ink2);padding:8px 16px;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;transition:all 0.2s}
.rate-row .rate-btn:hover{border-color:var(--accent);color:var(--accent)}
.rate-row .rate-btn.sel-green{background:rgba(39,174,96,0.1);border-color:var(--green);color:var(--green)}
.rate-row .rate-btn.sel{background:rgba(124,92,191,0.1);border-color:var(--accent);color:var(--accent)}
.rate-row .rate-btn.sel-orange{background:rgba(245,158,11,0.1);border-color:var(--orange);color:var(--orange)}
.test-me-btn{margin-left:auto;padding:10px 20px;background:var(--accent);color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;transition:all 0.2s}
.test-me-btn:hover{background:var(--accent2);transform:translateY(-1px)}
.study-tools-collapse{margin:12px 0}
.study-tools-collapse summary{cursor:pointer;padding:10px 14px;background:var(--bg2);border-radius:8px;font-size:12px;font-weight:600;color:var(--ink3)}
.study-tools-collapse summary:hover{background:var(--bg3)}
.study-tools-collapse .ctb-buttons{display:flex;gap:8px;flex-wrap:wrap}
.life-link{font-size:12px;color:var(--accent);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.life-link:hover{color:var(--accent2)}
.test-options-menu{display:flex;gap:8px;padding:12px;background:var(--bg2);border-radius:10px;margin:10px 0;flex-wrap:wrap}
.test-options-menu button{flex:1;min-width:200px;padding:12px 16px;background:var(--card);border:1px solid var(--border2);border-radius:8px;font-size:12px;font-weight:600;color:var(--ink);cursor:pointer;text-align:left;transition:all 0.2s}
.test-options-menu button:hover{border-color:var(--accent);background:rgba(124,92,191,0.05)}
.go-deeper-v2{margin:14px 0;border:1px solid var(--border2);border-radius:10px;overflow:hidden}
.go-deeper-v2 summary{cursor:pointer;padding:12px 14px;background:var(--bg2);font-size:12px;font-weight:600;color:var(--ink2)}
.go-deeper-v2 summary:hover{background:var(--bg3)}
.go-deeper-v2 .gd-body{padding:12px 14px}

/* ═══ BOTTOM CARDS GRID — Outlook-style muted panels ═══ */
.bottom-cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-top:16px}
.bc-card{background:var(--bg2);border:1px solid var(--border2);border-radius:10px;padding:10px 12px;opacity:0.7;transition:all 0.2s;cursor:pointer}
.bc-card:hover,.bc-card.expanded{opacity:1;border-color:var(--accent);background:var(--card);box-shadow:0 2px 8px rgba(124,92,191,0.1)}
.bc-header{font-size:11px;font-weight:700;color:var(--ink3);text-transform:uppercase;letter-spacing:0.5px;display:flex;align-items:center;gap:6px}
.bc-card:hover .bc-header,.bc-card.expanded .bc-header{color:var(--ink)}
.bc-icon{font-size:14px}
.bc-body{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px}
.bc-body button{padding:6px 10px;font-size:11px;background:var(--card);border:1px solid var(--border2);border-radius:6px;cursor:pointer;transition:all 0.15s;color:var(--ink2)}
.bc-body button:hover{border-color:var(--accent);color:var(--accent);background:rgba(124,92,191,0.05)}
.bc-buttons{display:flex;flex-wrap:wrap;gap:6px}
.bc-links{flex-direction:column;gap:4px}
.bc-links span{font-size:11px;color:var(--accent);cursor:pointer}
.bc-links span:hover{text-decoration:underline}
.bc-related{grid-column:span 1}
@media(max-width:600px){.bottom-cards-grid{grid-template-columns:1fr}}
.gd-btn{width:100%;padding:10px 14px;background:var(--card);border:1px solid var(--border2);border-radius:8px;font-size:12px;font-weight:600;color:var(--ink2);cursor:pointer;text-align:left;transition:all 0.2s}
.gd-btn:hover{border-color:var(--accent);color:var(--accent)}
.cx-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:var(--ink3);margin-bottom:6px}
.concept-rate{display:flex;gap:6px}
.rate-btn{padding:8px 14px;border-radius:20px;border:1px solid var(--border);background:var(--card);font-size:12px;font-weight:700;cursor:pointer;font-family:'DM Sans',sans-serif;transition:all 0.15s}
.rate-btn:hover{transform:scale(1.05)}
.rate-btn.sel-green{background:var(--green);color:#fff;border-color:var(--green)}
.rate-btn.sel{background:var(--gold);color:#fff;border-color:var(--gold)}
.rate-btn.sel-orange{background:var(--orange);color:#fff;border-color:var(--orange)}

/* CONCEPT NAV */
.concept-nav{display:flex;gap:8px;align-items:center;margin-bottom:10px}
.concept-nav .cn-progress{flex:1;font-size:12px;color:var(--ink3);font-weight:600;text-align:center}
.go-deeper{background:var(--card);border:1px solid var(--border2);border-radius:12px;overflow:hidden;margin-bottom:10px}
.go-deeper-header{display:flex;align-items:center;gap:8px;padding:12px 14px;cursor:pointer;font-size:13px;font-weight:700;color:var(--ink2);transition:background 0.15s}
.go-deeper-header:hover{background:var(--hover)}
.go-deeper-header .arrow{margin-left:auto;font-size:10px;color:var(--ink3);transition:transform 0.2s}
.go-deeper-body{display:none;padding:0 14px 14px;border-top:1px solid var(--border2)}
.go-deeper-body.open{display:block}

/* TOOL SECTIONS */
.tool-section{background:var(--card);border:1px solid var(--border2);border-radius:14px;margin-bottom:12px;overflow:hidden}
.tool-header{display:flex;align-items:center;gap:10px;padding:16px 18px;cursor:pointer;transition:background 0.15s;user-select:none}
.tool-header:hover{background:var(--hover)}
.tool-header .icon{font-size:20px}
.tool-header .title{font-weight:700;font-size:15px;flex:1}
.tool-header .arrow{font-size:12px;color:var(--ink3);transition:transform 0.2s}
.tool-header.open .arrow{transform:rotate(180deg)}
.tool-body{display:none;padding:0 18px 18px;border-top:1px solid var(--border2)}
.tool-body.open{display:block}

/* FLOATING CHAT */
.chat-fab{position:fixed;bottom:20px;bottom:calc(20px + env(safe-area-inset-bottom,0));right:20px;width:56px;height:56px;border-radius:50%;background:var(--accent);color:#fff;font-size:24px;border:none;cursor:pointer;box-shadow:0 4px 16px rgba(124,92,191,0.3);z-index:200;display:flex;align-items:center;justify-content:center;transition:all 0.2s}
.chat-fab:hover{transform:scale(1.08)}
.chat-fab .badge{position:absolute;top:-2px;right:-2px;width:18px;height:18px;background:var(--pink);border-radius:50%;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid var(--bg)}
.chat-panel{position:fixed;bottom:0;right:0;width:100%;max-width:480px;height:100%;height:100dvh;background:var(--card);border-left:1px solid var(--border2);box-shadow:-8px 0 40px rgba(0,0,0,0.1);z-index:250;display:flex;flex-direction:column;transform:translateX(100%);transition:transform 0.3s cubic-bezier(0.4,0,0.2,1)}
.chat-panel.open{transform:translateX(0)}
.chat-top{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--border2);flex-shrink:0}
.chat-top .name{font-weight:700;font-size:15px;flex:1}
.chat-top .close{width:30px;height:30px;border-radius:8px;border:none;background:var(--bg2);cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;color:var(--ink3)}
.chat-msgs{flex:1;overflow-y:auto;padding:14px 18px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;scroll-behavior:smooth}
.chat-msg{margin-bottom:12px;display:flex;gap:8px;align-items:flex-start}
.chat-msg.user{flex-direction:row-reverse}
.chat-bubble{max-width:85%;padding:10px 14px;border-radius:14px;font-size:14px;line-height:1.7;word-break:break-word;overflow-wrap:break-word}
.chat-msg.ai .chat-bubble{background:var(--bg2);color:var(--ink)}
.chat-msg.user .chat-bubble{background:var(--grad);color:#fff}
.chat-av{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.chat-input-bar{display:flex;gap:8px;padding:12px 18px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0));border-top:1px solid var(--border2);flex-shrink:0;align-items:flex-end}
.chat-input-bar textarea{min-height:38px;max-height:100px;resize:none;padding:9px 12px;font-size:14px}

/* EMO BAR */
.emo-bar{display:flex;gap:8px;align-items:center;padding:10px 14px;border-radius:10px;font-size:12px;font-weight:600;margin-bottom:12px}
.emo-bar.calm{background:var(--bg2);color:var(--green);border:1px solid rgba(58,125,68,0.2)}
.emo-bar.confused{background:#fff8eb;color:var(--gold);border:1px solid rgba(184,134,11,0.2)}
[data-theme="dark"] .emo-bar.confused{background:rgba(184,134,11,0.08)}
.emo-bar.frustrated{background:#fff5f5;color:var(--orange);border:1px solid rgba(196,87,42,0.2)}
[data-theme="dark"] .emo-bar.frustrated{background:rgba(196,87,42,0.08)}
.emo-bar.anxious{background:#f8f0ff;color:var(--accent);border:1px solid rgba(124,92,191,0.2)}
[data-theme="dark"] .emo-bar.anxious{background:rgba(124,92,191,0.08)}

.ai-response{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:20px;margin-top:14px;border-left:4px solid var(--accent)}
.ai-response h3{color:var(--accent);font-size:15px;margin-bottom:8px}
.ai-body{font-size:14px;line-height:1.8;color:var(--ink2)}
.search-item{padding:8px;border-left:3px solid var(--blue);background:var(--bg2);border-radius:0 8px 8px 0;margin-bottom:6px;font-size:12px}
.search-item a{color:var(--blue);font-weight:600;text-decoration:none}

/* CALC */
.calc-btns{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.calc-btn{padding:8px 12px;border-radius:8px;border:1px solid var(--border);background:var(--card);color:var(--ink2);font-size:12px;font-weight:600;cursor:pointer;font-family:'DM Sans',sans-serif;transition:all 0.15s}
.calc-btn:hover{border-color:var(--accent);color:var(--accent)}
.calc-btn.active{background:var(--grad);color:#fff;border-color:transparent}
.calc-result-box{background:var(--grad);border-radius:12px;padding:14px 18px;margin:12px 0}
.calc-result-box .label{color:rgba(255,255,255,0.7);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px}
.calc-result-box .value{color:#fff;font-size:20px;font-weight:800;font-family:'JetBrains Mono',monospace;margin-top:3px}
.calc-work{background:var(--bg2);border-radius:10px;padding:12px;font-size:13px;line-height:1.7;white-space:pre-wrap;margin:8px 0;color:var(--ink2)}
.calc-explain{background:rgba(58,125,68,0.06);border-radius:10px;padding:12px;font-size:13px;line-height:1.6;color:var(--green)}

/* Math Workbench */
.mw-expr-input{width:100%;padding:10px 14px;border:1px solid var(--border2);border-radius:8px;font-family:'JetBrains Mono',monospace;font-size:14px;background:var(--card);color:var(--ink)}
.mw-expr-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(124,92,191,0.1)}

/* Accounting Tools */
.acct-table{width:100%;border-collapse:collapse;margin-top:12px;font-size:13px}
.acct-table th{background:var(--bg2);padding:8px 12px;text-align:left;font-weight:700;color:var(--ink2);border-bottom:2px solid var(--border)}
.acct-table td{padding:8px 12px;border-bottom:1px solid var(--border2)}
.acct-table tr:last-child td{border-bottom:none}
.taccount{background:var(--card);border:1px solid var(--border2);border-radius:10px;padding:10px;min-width:140px;flex:1;max-width:180px}
.taccount-title{font-weight:700;font-size:12px;text-align:center;padding-bottom:6px;border-bottom:2px solid var(--ink);margin-bottom:6px;color:var(--ink)}
.taccount-body{display:flex;gap:0}
.taccount-side{flex:1;text-align:right;padding:4px 6px;font-size:12px;font-family:'JetBrains Mono',monospace}
.taccount-side:first-child{border-right:1px solid var(--border);text-align:right}
.taccount-side:last-child{text-align:right}
.taccount-label{font-size:10px;font-weight:700;color:var(--ink3);text-transform:uppercase;margin-bottom:4px}
.taccount-bal{font-weight:700;margin-top:6px;padding-top:4px;border-top:1px solid var(--border)}
.ratio-card{background:var(--card);border:1px solid var(--border2);border-radius:10px;padding:12px;display:flex;align-items:center;gap:12px}
.ratio-name{font-weight:600;font-size:13px;color:var(--ink);flex:1}
.ratio-val{font-size:18px;font-weight:800;font-family:'JetBrains Mono',monospace;color:var(--accent)}
.ratio-int{font-size:11px;color:var(--ink3)}

/* PRACTICE */
.practice-card{background:var(--card);border:1px solid var(--border2);border-radius:14px;overflow:hidden;margin-bottom:10px}
.practice-card .pc-header{display:flex;align-items:center;gap:8px;padding:14px 16px;cursor:pointer;transition:background 0.15s}
.practice-card .pc-header:hover{background:var(--hover)}
.practice-card .pc-num{width:28px;height:28px;border-radius:50%;background:var(--grad);color:#fff;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.practice-card .pc-topic{font-size:11px;font-weight:700;color:var(--ink3);text-transform:uppercase;letter-spacing:0.5px}
.practice-card .pc-toggle{margin-left:auto;font-size:10px;color:var(--ink3);transition:transform 0.2s}
.practice-card.open .pc-toggle{transform:rotate(180deg)}
.practice-card .pc-body{padding:0 16px 16px}
.practice-card .pc-question{font-size:14px;font-weight:600;line-height:1.65;white-space:pre-line;margin-bottom:12px;padding:12px 14px;background:var(--bg2);border-radius:10px;border-left:3px solid var(--accent)}
/* Dark mode readability: quiz/practice question text should not be dark */
.dark-mode .practice-question,[data-theme="dark"] .practice-question{color:#f5f5f5}
[data-theme="dark"] .practice-card .pc-question{color:#f5f5f5}
[data-theme="dark"] .katex,[data-theme="dark"] .katex-display{color:var(--ink)}
.practice-card .pc-try{font-size:12px;color:var(--ink3);font-style:italic;margin-bottom:10px}
.practice-card .pc-steps{border-top:1px solid var(--border2);padding-top:10px}
.practice-card .pc-step{display:flex;gap:8px;align-items:flex-start;padding:6px 0;font-size:13px;line-height:1.65}
.pc-solution{margin-top:16px;padding-top:14px;border-top:1px solid var(--border2)}
.practice-card .pc-step-num{width:20px;height:20px;border-radius:50%;background:var(--bg2);font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--ink3);margin-top:2px}
.practice-card .pc-step.final .pc-step-num{background:var(--green);color:#fff}
.practice-card .pc-step.final{color:var(--green);font-weight:700}

/* DROP ZONE */
.drop-zone{border:2px dashed var(--border);border-radius:14px;padding:30px;text-align:center;cursor:pointer;transition:all 0.2s;background:var(--bg2);color:var(--ink2)}
.drop-zone:hover{border-color:var(--accent);color:var(--accent)}
.drop-zone .icon{font-size:28px;margin-bottom:6px}

/* OVERLAY */
.overlay{position:fixed;inset:0;background:rgba(15,10,25,0.6);z-index:300;display:none;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(4px)}
.overlay.show{display:flex}
.settings-panel{background:var(--card);border-radius:16px;max-width:420px;width:90%;padding:24px;max-height:80vh;overflow-y:auto;box-shadow:var(--shadow3)}
/* My World button pulse when empty */
.tb-btn-world{position:relative}
.tb-btn-world.world-empty::after{content:'';position:absolute;top:4px;right:4px;width:7px;height:7px;border-radius:50%;background:linear-gradient(135deg,#7c5cbf,#e06377);animation:worldPulse 2s ease-in-out infinite}
@keyframes worldPulse{0%,100%{opacity:0.5;transform:scale(0.8)}50%{opacity:1;transform:scale(1.2)}}
/* My World Modal */
.myworld-panel{background:var(--card);border-radius:20px;max-width:480px;width:92%;padding:0;max-height:88vh;overflow-y:auto;box-shadow:var(--shadow3);animation:mwSlide 0.35s cubic-bezier(0.34,1.56,0.64,1)}
@keyframes mwSlide{from{opacity:0;transform:translateY(20px) scale(0.97)}to{opacity:1;transform:translateY(0) scale(1)}}
.mw-header{padding:22px 24px 16px;background:linear-gradient(135deg,rgba(124,92,191,0.08),rgba(224,99,119,0.06));border-bottom:1px solid var(--border2);border-radius:20px 20px 0 0;position:sticky;top:0;z-index:2;backdrop-filter:blur(8px)}
.mw-body{padding:20px 24px}
.mw-section{margin-bottom:20px}
.mw-section-title{font-size:11px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink3);margin-bottom:10px}
.mw-chips{display:flex;flex-wrap:wrap;gap:6px}
.mw-chip{padding:7px 13px;border-radius:30px;border:1.5px solid var(--border2);background:var(--bg2);font-size:13px;cursor:pointer;transition:all 0.18s;color:var(--ink2);font-weight:500;user-select:none}
.mw-chip.active{border-color:var(--accent);background:linear-gradient(135deg,rgba(124,92,191,0.12),rgba(224,99,119,0.08));color:var(--accent);font-weight:700}
.mw-chip:hover:not(.active){border-color:var(--accent);color:var(--accent);transform:scale(1.03)}
.mw-input{width:100%;padding:11px 14px;border:1.5px solid var(--border2);border-radius:12px;background:var(--card);color:var(--ink);font-family:inherit;font-size:14px;line-height:1.5;transition:border-color 0.2s;resize:none;box-sizing:border-box}
.mw-input:focus{outline:none;border-color:var(--accent)}
.mw-tag{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:20px;background:linear-gradient(135deg,rgba(124,92,191,0.12),rgba(20,184,166,0.08));border:1px solid rgba(124,92,191,0.2);font-size:12px;color:var(--accent);font-weight:600;margin:2px}
.mw-tag-remove{cursor:pointer;opacity:0.6;font-size:11px;line-height:1}
.mw-tag-remove:hover{opacity:1}
.mw-tags-area{display:flex;flex-wrap:wrap;margin-bottom:8px;min-height:0}
.mw-footer{padding:16px 24px;border-top:1px solid var(--border2);display:flex;gap:8px;position:sticky;bottom:0;background:var(--card);border-radius:0 0 20px 20px}
.mw-save-btn{flex:1;padding:12px;border-radius:12px;background:linear-gradient(135deg,#7c5cbf,#e06377);color:#fff;border:none;font-weight:700;font-size:14px;cursor:pointer;transition:transform 0.15s,opacity 0.15s;font-family:inherit}
.mw-save-btn:hover{transform:scale(1.02)}
.mw-cancel-btn{padding:12px 18px;border-radius:12px;border:1.5px solid var(--border2);background:transparent;color:var(--ink2);font-weight:600;font-size:14px;cursor:pointer;font-family:inherit;transition:all 0.15s}
.mw-cancel-btn:hover{border-color:var(--accent);color:var(--accent)}
.mw-intro{font-size:13px;color:var(--ink2);margin-bottom:16px;line-height:1.6;padding:12px 14px;background:linear-gradient(135deg,rgba(124,92,191,0.05),rgba(20,184,166,0.04));border-radius:12px;border-left:3px solid #7c5cbf}

/* MOOD OVERLAY */
.mood-overlay{position:fixed;inset:0;background:rgba(15,10,25,0.8);z-index:400;display:none;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(6px)}
.mood-overlay.active{display:flex}
.mood-card{background:var(--card);border-radius:20px;padding:30px;max-width:340px;width:90%;text-align:center;box-shadow:var(--shadow3);animation:welcomeIn 0.5s ease}
.mood-title{font-family:'Instrument Serif',serif;font-size:22px;margin-bottom:4px}
.mood-sub{font-size:12px;color:var(--ink3);margin-bottom:16px}
.mood-row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:14px}
.mood-btn{width:52px;height:52px;border-radius:50%;border:2px solid var(--border);background:var(--card);font-size:24px;cursor:pointer;transition:all 0.15s}
.mood-btn:hover{transform:scale(1.1)}
.mood-btn.selected{border-color:var(--accent);box-shadow:0 0 0 3px rgba(124,92,191,0.2);transform:scale(1.1)}
.feeling-btn{padding:8px 14px;border-radius:20px;border:1.5px solid var(--border);background:var(--card);color:var(--ink);font-size:13px;font-weight:600;cursor:pointer;transition:all 0.15s;font-family:'DM Sans',sans-serif}
.feeling-btn:hover{border-color:var(--accent)}
.feeling-btn.selected{border-color:var(--accent);background:rgba(124,92,191,0.1);color:var(--accent)}

/* LEVEL UP */
.levelup-overlay{position:fixed;inset:0;background:rgba(15,10,25,0.85);z-index:500;display:none;align-items:center;justify-content:center}
.levelup-overlay.show{display:flex}
.levelup-card{background:var(--card);border-radius:20px;padding:36px;max-width:340px;width:90%;text-align:center;box-shadow:var(--shadow3);animation:welcomeIn 0.6s cubic-bezier(0.34,1.56,0.64,1)}

/* ACHIEVEMENTS / CELEBRATIONS */
.achievement-popup{position:fixed;top:20px;right:20px;background:var(--card);border:2px solid var(--gold);border-radius:14px;padding:14px 18px;box-shadow:var(--shadow3);z-index:600;display:flex;gap:10px;align-items:center;transform:translateX(120%);transition:transform 0.5s cubic-bezier(0.34,1.56,0.64,1),opacity 0.3s;max-width:320px}
.achievement-popup.show{transform:translateX(0)}
[dir="rtl"] .achievement-popup{right:auto;left:20px;transform:translateX(-120%)}
[dir="rtl"] .achievement-popup.show{transform:translateX(0)}
.celebration-overlay{position:fixed;inset:0;z-index:550;pointer-events:none;overflow:hidden}
.confetti{position:absolute;top:-20px;width:10px;height:10px;animation:confettiFall 3s ease-in forwards}
@keyframes confettiFall{0%{transform:translateY(0) rotate(0deg);opacity:1}100%{transform:translateY(100vh) rotate(720deg);opacity:0}}

/* FLOATING HEARTS */
.floating-hearts{position:fixed;inset:0;pointer-events:none;z-index:100;overflow:hidden}
.float-heart{position:absolute;bottom:-30px;animation:floatUp var(--dur) ease-out forwards;opacity:0;pointer-events:none}
@keyframes floatUp{0%{transform:translateX(0) translateY(0) scale(0.5);opacity:0}10%{opacity:var(--peak,0.3)}50%{transform:translateX(var(--sway)) translateY(-50vh) scale(1)}100%{transform:translateX(calc(var(--sway)*-0.5)) translateY(-105vh) scale(0.3);opacity:0}}

/* SPARKLES */
.sparkle-burst{position:fixed;pointer-events:none;z-index:1000}.sparkle{position:absolute;width:6px;height:6px;border-radius:50%;animation:sparkleOut 0.6s ease-out forwards}
@keyframes sparkleOut{0%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(var(--tx),var(--ty)) scale(0);opacity:0}}

/* STILL CONFUSED */
.still-confused-wrap{display:inline-block;padding:2px;border-radius:20px;background:linear-gradient(135deg,#7c5cbf,#e06377);background-size:200% 200%;animation:infinityFlow 3s ease infinite}
.still-confused{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:18px;border:none;background:var(--card);color:var(--ink2);font-size:12px;font-weight:700;cursor:pointer;font-family:'DM Sans',sans-serif}
.still-confused:hover{background:var(--bg2)}

/* FOLLOW-UP PILLS */
.followup-pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.followup-pill{padding:6px 12px;border-radius:16px;border:1px solid var(--border);background:var(--card);font-size:12px;font-weight:600;cursor:pointer;color:var(--accent);transition:all 0.15s;font-family:'DM Sans',sans-serif}
.followup-pill:hover{background:rgba(124,92,191,0.1);border-color:var(--accent)}
.followup-pill.loading{opacity:0.5;pointer-events:none}

/* DAD MOMENT TOAST */
.dad-moment{position:fixed;bottom:90px;bottom:calc(90px + env(safe-area-inset-bottom,0));left:50%;transform:translateX(-50%) translateY(60px);background:var(--card);border:2px solid var(--gold);border-radius:16px;padding:14px 22px;box-shadow:var(--shadow3);z-index:300;text-align:center;transition:transform 0.5s cubic-bezier(0.34,1.56,0.64,1);opacity:0;max-width:85%}
.dad-moment.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* CHAT BACKDROP (mobile) */
.chat-backdrop{display:none;position:fixed;inset:0;z-index:200}
@media(max-width:600px){.chat-backdrop.open{display:block}}
.hide-m{display:inline}
@media(max-width:600px){.hide-m{display:none}}

/* TOGGLE SWITCH */
.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0}
.toggle-row .label{font-size:13px;font-weight:600}
/* Toggle thumb only — no ::before "OFF/ON" text (that leaked into the a11y tree as stray text). State = role="switch" + aria-checked on the button. */
button.toggle-switch{margin:0;padding:0;border:none;font:inherit;color:inherit;-webkit-appearance:none;appearance:none}
.toggle-switch{width:48px;height:26px;border-radius:13px;background:var(--border);position:relative;cursor:pointer;transition:background 0.2s;flex-shrink:0}
.toggle-switch.on{background:var(--accent)}
.toggle-switch:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.toggle-switch::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform 0.2s;box-shadow:0 1px 3px rgba(0,0,0,0.2)}
.toggle-switch.on::after{transform:translateX(22px)}

/* ═══ MOBILE RESPONSIVE ═══ */
@media(max-width:600px){
  .concept-row{grid-template-columns:1fr}
  .stat-row{grid-template-columns:repeat(4,1fr);gap:6px}
  .stat-val{font-size:18px}
  .stat-lbl{font-size:8px}
  .concept-hero h2{font-size:20px}
  .concept-hero .ch-formula{font-size:12px}
  .concept-hero .ch-plain{font-size:13px}
  .rate-btn{padding:8px 12px;font-size:11px}
  .sub-card{padding:12px;min-height:44px;display:flex;align-items:center}
  .practice-card .pc-header{padding:12px 14px;min-height:48px}
  .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .btn-sm{min-height:40px}
  .btn-xs{min-height:36px;padding:8px 12px}
  .calc-btns{overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;padding-bottom:4px;scrollbar-width:none}
  .calc-btns::-webkit-scrollbar{display:none}
  .calc-btn{min-height:40px;white-space:nowrap}
  .tool-header{padding:14px;min-height:48px}
  .tool-body{padding:0 14px 14px}
  .chat-panel{max-width:100%;width:100%;left:0;right:0;height:100%;height:100dvh;border-radius:0;border-left:none;box-shadow:none;transform:translateX(100%)}
  .chat-panel.open{transform:translateX(0)}
  .chat-fab{bottom:16px;bottom:calc(16px + env(safe-area-inset-bottom,0));right:16px;width:52px;height:52px;font-size:22px}
  .chat-msgs{padding:10px 12px}
  .chat-bubble{font-size:14px;padding:10px 14px;max-width:92%;line-height:1.7}
  .chat-av{width:24px;height:24px;font-size:12px}
  .chat-input-bar{padding:10px 12px;padding-bottom:calc(10px + env(safe-area-inset-bottom,0));gap:6px}
  .chat-input-bar textarea{font-size:16px;min-height:40px;padding:10px 12px}
  .huh-btn{padding:10px 14px;font-size:12px;min-height:44px}
  .settings-panel{width:95%;padding:18px;max-height:75vh}
  .mood-card{width:95%;padding:22px}
  .mood-btn{width:48px;height:48px;font-size:22px}
  .feeling-btn{padding:10px 14px;font-size:12px;min-height:44px}
  .welcome-card{padding:28px 20px;width:92%}
  .love-card{padding:28px 20px;width:92%}
  input,textarea{font-size:16px;padding:12px 14px}
  select{font-size:16px;padding:12px 14px}
  .levelup-card{padding:28px 20px;max-width:90%}
  .dad-moment{padding:12px 18px;max-width:85%;font-size:13px}
  .breather-card{padding:28px 20px;max-width:92%}
  .emox-encourage{font-size:12px;padding:10px 12px}
  .fc-body{padding:14px}
  .fc-header{padding:12px 14px}
  .fc-quote{font-size:14px;padding:10px 12px}
  .fc-answer-input{flex-direction:column}
  .fc-answer-input input{font-size:16px}
  .teach-msgs{padding:10px 12px;max-height:350px}
  .teach-msg .tm-bubble{font-size:13px;padding:8px 12px;max-width:90%}
  .teach-input{padding:10px 12px}
  .teach-input textarea{font-size:16px;min-height:44px}
  .peer-body{padding:12px}
  .peer-quote{font-size:14px;padding:10px 12px}
  .review-btns{flex-wrap:nowrap}
  .review-btns button{font-size:11px;padding:8px 4px}
  .exam-textarea{font-size:16px;min-height:100px}
  .section-title{font-size:20px}
  .achievement-popup{right:10px;left:10px;max-width:none}
  [dir="rtl"] .achievement-popup{right:10px;left:10px;transform:translateX(-120%)}
  [dir="rtl"] .achievement-popup.show{transform:translateX(0)}
  .course-grid{grid-template-columns:1fr}
}
@media(max-width:380px){
  .lnd-for{font-size:36px}
  .concept-hero h2{font-size:19px}
  .rate-btn{padding:8px 10px;font-size:10px}
  .hero-title{font-size:18px}
  .stat-val{font-size:16px}
  .topbar{height:44px}
  .course-bar{top:44px}
  .tab-bar{height:64px}
  .tab{padding:6px 4px}
  .tab-icon{font-size:20px}
  .tab-label{font-size:9px}
  .course-tab{padding:8px 12px;font-size:12px}
  .course-tab-add{padding:8px 10px;font-size:11px}
  .course-tab-lib{padding:8px 10px;font-size:10px}
}
/* ═══ FLIP CARDS ═══ */
.fc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin:12px 0}
.fc-card{perspective:600px;height:220px;cursor:pointer}
.fc-card-inner{position:relative;width:100%;height:100%;transition:transform 0.5s;transform-style:preserve-3d;border-radius:14px}
.fc-card.flipped .fc-card-inner{transform:rotateY(180deg)}
.fc-card-front,.fc-card-back{position:absolute;width:100%;height:100%;backface-visibility:hidden;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px;text-align:center;box-sizing:border-box}
.fc-card-front{background:var(--card);border:2px solid var(--border2)}
.fc-card-back{background:var(--accent);color:#fff;transform:rotateY(180deg);font-size:12px;line-height:1.5;overflow-y:auto}
.fc-card-front .fc-emoji{font-size:40px;margin-bottom:10px}
.fc-card-front .fc-word{font-weight:700;font-size:15px;line-height:1.4}
.fc-card-front .fc-formula{font-size:11px;color:var(--ink3);margin-top:6px;font-family:JetBrains Mono,monospace;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.fc-card-back .fc-back-title{font-weight:700;font-size:13px;margin-bottom:6px}
.fc-card-back .fc-back-tip{font-size:11px;opacity:0.8;margin-top:8px;font-style:italic}
.fc-meme-btn{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;border:none;background:linear-gradient(135deg,#ff6b6b,#feca57);color:#1a1a1a;font-size:14px;cursor:pointer;opacity:0.7;transition:all 0.2s;display:flex;align-items:center;justify-content:center;z-index:5}
.fc-meme-btn:hover{opacity:1;transform:scale(1.15)}
/* Creative Tools Bar */
.creative-tools-bar{margin:12px 0;padding:12px 14px;background:linear-gradient(135deg,rgba(255,107,107,0.05),rgba(254,202,87,0.05),rgba(72,219,251,0.05));border:1px solid rgba(255,107,107,0.15);border-radius:14px}
.ctb-label{font-size:11px;font-weight:700;color:var(--ink3);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:8px}
.ctb-buttons{display:flex;gap:8px;flex-wrap:wrap}
.ctb-btn{display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:10px;border:1px solid var(--border2);background:var(--card);color:var(--ink);font-size:12px;font-weight:600;cursor:pointer;transition:all 0.2s}
.ctb-btn:hover{border-color:var(--accent);transform:translateY(-1px);box-shadow:0 2px 8px rgba(0,0,0,0.1)}
.ctb-btn span{font-size:14px}
.ctb-meme{background:linear-gradient(135deg,rgba(255,107,107,0.1),rgba(254,202,87,0.1));border-color:rgba(255,107,107,0.3)}
.ctb-meme:hover{background:linear-gradient(135deg,rgba(255,107,107,0.2),rgba(254,202,87,0.2));border-color:rgba(255,107,107,0.5)}
/* Create FAB Speed Dial */
.create-fab-wrap{position:fixed;bottom:20px;bottom:calc(20px + env(safe-area-inset-bottom,0));left:20px;z-index:200;display:flex;flex-direction:column;align-items:center;gap:10px}
.create-fab{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#ff6b6b,#feca57);color:#1a1a1a;font-size:24px;border:none;cursor:pointer;box-shadow:0 4px 15px rgba(255,107,107,0.4);display:flex;align-items:center;justify-content:center;transition:all 0.3s}
.create-fab:hover{transform:scale(1.08)}
.create-fab-wrap.open .create-fab{transform:rotate(45deg);background:linear-gradient(135deg,#ff6b6b,#ee5a5a)}
.create-fab-options{display:flex;flex-direction:column;gap:8px;opacity:0;transform:translateY(20px) scale(0.8);pointer-events:none;transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1)}
.create-fab-wrap.open .create-fab-options{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.cfab-opt{width:44px;height:44px;border-radius:50%;background:var(--card);border:2px solid var(--border2);font-size:18px;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,0.15);transition:all 0.2s;display:flex;align-items:center;justify-content:center}
.cfab-opt:hover{transform:scale(1.1);border-color:var(--accent);box-shadow:0 4px 15px rgba(0,0,0,0.2)}
@media(max-width:600px){.create-fab-wrap{bottom:80px;left:16px}.create-fab{width:50px;height:50px;font-size:20px}.cfab-opt{width:40px;height:40px;font-size:16px}}
.fc-controls{display:flex;gap:8px;align-items:center;margin-bottom:10px;flex-wrap:wrap}
.fc-counter{font-size:11px;color:var(--ink3);margin-left:auto}
/* ═══ FULLSCREEN ═══ */
.fs-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--bg1);z-index:9999;overflow-y:auto;padding:20px;box-sizing:border-box;animation:fadeIn 0.2s}
.fs-overlay .fs-close{position:fixed;top:12px;right:16px;font-size:20px;background:var(--card);border:1px solid var(--border2);border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:10000;box-shadow:var(--shadow)}
.fs-overlay .fs-content{max-width:700px;margin:0 auto;padding:20px 0 60px;background:var(--bg)}
.fs-overlay .fs-title{font-family:'Instrument Serif',serif;font-size:28px;margin-bottom:16px;text-align:center}
.fs-overlay .fs-formula{font-family:'JetBrains Mono',monospace;font-size:16px;background:var(--bg2);padding:16px 20px;border-radius:12px;margin-bottom:16px;text-align:center;border-left:4px solid var(--accent)}
.fs-overlay .fs-explain{font-size:16px;line-height:1.7;margin-bottom:20px;color:var(--ink)}
.fs-overlay .fs-section{margin-bottom:20px;padding:16px;background:var(--card);border-radius:12px;border:1px solid var(--border2)}
.fs-overlay .fs-section-title{font-weight:700;font-size:13px;margin-bottom:8px}
.fs-overlay .fs-section-body{font-size:14px;line-height:1.6;color:var(--ink2)}
.fs-nav{display:flex;gap:10px;justify-content:center;margin-top:20px}
/* ═══ POMODORO TIMER ═══ */
.pomo-bar{display:flex;align-items:center;gap:8px;padding:6px 10px;background:var(--card);border:1px solid var(--border2);border-radius:10px;font-size:12px;cursor:pointer;user-select:none}
.pomo-bar .pomo-time{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:14px;min-width:48px;text-align:center}
.pomo-bar .pomo-label{font-size:10px;color:var(--ink3);font-weight:600}
.pomo-bar.studying .pomo-time{color:var(--accent)}
.pomo-bar.onbreak .pomo-time{color:var(--green)}
.pomo-bar.done{animation:pulse 1s ease-in-out 3}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.5}}
/* ═══ VISUALS: KATEX, DIAGRAMS, CONCEPT MAP ═══ */
.katex-display{margin:8px 0;overflow-x:auto;overflow-y:hidden}
.vis-container{margin:12px 0;padding:16px;background:var(--card);border:1px solid var(--border2);border-radius:14px;overflow:hidden;overflow-x:auto}
.vis-container>div:first-child{font-size:13px;line-height:1.6}
.vis-container table{border-collapse:collapse;width:100%}
.vis-container td,.vis-container th{padding:6px 10px;border:1px solid var(--border2);font-size:12px}
.vis-container .vis-label{font-size:11px;color:var(--ink3);text-align:center;margin-top:8px}
.brain-primer{margin:8px 0 14px;padding:12px 16px;background:rgba(255,255,255,0.1);border-radius:12px;border-left:3px solid rgba(255,255,255,0.4)}
.brain-primer .bp-what{font-size:15px;font-weight:700;line-height:1.5;margin-bottom:4px}
.brain-primer .bp-why{font-size:13px;opacity:0.85;line-height:1.5}
.brain-primer .bp-hook{font-size:12px;opacity:0.7;font-style:italic;margin-top:6px}
.brain-primer:empty{display:none}
.vis-loading{text-align:center;padding:20px;color:var(--ink3);font-size:13px;font-weight:600}
.vis-loading::before{content:'';display:block;width:28px;height:28px;border:3px solid var(--bg3);border-top-color:var(--accent);border-radius:50%;animation:spin 0.8s linear infinite;margin:0 auto 8px}
.vis-btn{display:inline-flex;align-items:center;gap:5px;padding:9px 16px;border-radius:10px;border:2px solid var(--border);background:var(--card);cursor:pointer;font-size:13px;font-weight:800;color:var(--accent);font-family:'DM Sans',sans-serif;transition:all 0.15s;box-shadow:var(--shadow)}
.vis-btn:hover{background:var(--hover);border-color:var(--accent);transform:scale(1.04);box-shadow:var(--shadow2)}
.vis-btn:disabled{cursor:wait;transform:none;box-shadow:none}
.vis-spin{display:inline-block;width:14px;height:14px;border:2px solid rgba(124,92,191,0.2);border-top-color:var(--accent);border-radius:50%;animation:spin 0.7s linear infinite;vertical-align:middle}
.vis-loading-card{text-align:center;padding:32px 20px;margin:12px 0;background:linear-gradient(135deg,rgba(124,92,191,0.04),rgba(224,99,119,0.04));border:1.5px dashed var(--accent);border-radius:16px;animation:visPulse 2s ease-in-out infinite}
.vis-spin-big{width:36px;height:36px;border:3px solid rgba(124,92,191,0.15);border-top-color:var(--accent);border-radius:50%;animation:spin 0.8s linear infinite;margin:0 auto 12px}
@keyframes visPulse{0%,100%{opacity:1}50%{opacity:0.7}}
/* Concept map */
.cmap-container{width:100%;padding:12px;background:var(--bg2);border-radius:12px;margin:12px 0}
.cmap-header{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.cmap-controls{display:flex;align-items:center;gap:6px;margin-left:auto}
.cmap-ctrl-btn{width:28px;height:28px;border-radius:6px;border:1px solid var(--border2);background:var(--card);color:var(--ink);font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.15s}
.cmap-ctrl-btn:hover{border-color:var(--accent);background:var(--accent);color:#fff}
.cmap-zoom-level{font-size:11px;font-weight:600;color:var(--ink3);min-width:40px;text-align:center}
.cmap-expand-btn{font-size:14px}
.cmap-legend{display:flex;gap:10px;font-size:10px;margin-bottom:10px;flex-wrap:wrap}
.cmap-dot{display:inline-block;width:10px;height:10px;border-radius:3px;vertical-align:middle;margin-right:3px}
.cmap-viewport{width:100%;height:400px;overflow:hidden;border-radius:10px;background:var(--card);border:1px solid var(--border2);cursor:grab;position:relative}
.cmap-viewport:active{cursor:grabbing}
.cmap-inner{transition:transform 0.1s ease-out;min-width:100%;min-height:100%}
.cmap-node{cursor:pointer;transition:opacity 0.2s}
.cmap-node:hover{opacity:0.8}
.cmap-node text{font-family:'DM Sans',sans-serif}
/* Fullscreen modal */
.cmap-fullscreen-modal{position:fixed;inset:0;background:var(--bg);z-index:9999;display:flex;flex-direction:column}
.cmap-fs-header{padding:12px 16px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--border2);background:var(--card)}
.cmap-fs-legend{padding:8px 16px;display:flex;gap:12px;font-size:11px;background:var(--bg2);border-bottom:1px solid var(--border2)}
.cmap-fs-viewport{flex:1;overflow:hidden;cursor:grab;position:relative}
.cmap-fs-viewport:active{cursor:grabbing}
.cmap-close-btn{background:var(--pink)!important;color:#fff!important;border-color:var(--pink)!important;font-size:14px}
/* Chat visual output */
.chat-visual{margin:8px 0;padding:10px;background:var(--bg2);border-radius:10px;overflow:hidden}
.chat-visual svg{max-width:100%;height:auto}
@media print{.vis-container{break-inside:avoid}}
/* ═══ PRINT (hidden on screen) ═══ */
@media print{body *{visibility:hidden}.print-sheet,.print-sheet *{visibility:visible}.print-sheet{position:absolute;left:0;top:0;width:100%}}

/* ═══ DASHBOARD ═══ */
.dash-hero-card{background:linear-gradient(135deg,var(--card),var(--bg2));border:1px solid var(--border2);border-radius:18px;padding:32px 28px;color:var(--ink);position:relative;overflow:hidden;margin-bottom:20px}
.dash-hero-card::before{content:'';position:absolute;top:-40%;right:-15%;width:250px;height:250px;background:radial-gradient(circle,rgba(124,92,191,0.08) 0%,transparent 70%);border-radius:50%;pointer-events:none}
.dash-hero-card h2{font-family:'Instrument Serif',serif;font-size:28px;margin-bottom:4px;position:relative;color:var(--ink)}
.dash-hero-card p{font-size:14px;color:var(--ink2);position:relative}

/* ═══ CONTINUE LEARNING HERO ═══ */
.dash-continue-hero{background:linear-gradient(135deg,var(--card),var(--bg2));border:1px solid var(--border2);border-radius:var(--radius-lg);padding:28px;margin-bottom:20px;cursor:pointer;transition:all 0.25s ease;position:relative;overflow:hidden}
.dash-continue-hero:hover{transform:translateY(-3px);box-shadow:var(--glow)}
.dash-continue-hero::before{content:'';position:absolute;top:-50%;right:-20%;width:300px;height:300px;background:radial-gradient(circle,rgba(124,92,191,0.08) 0%,transparent 70%);pointer-events:none}
.dash-continue-hero::after{display:none}
.dch-top{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.dch-icon{font-size:36px}
.dch-meta{flex:1}
.dch-title{font-size:20px;font-weight:800;color:var(--ink);font-family:'Instrument Serif',serif}
.dch-subject{font-size:12px;color:var(--ink3);font-weight:600;margin-top:2px}
.dch-pct-ring{position:relative;width:56px;height:56px;flex-shrink:0}
.dch-pct-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;color:var(--accent)}
.dch-progress-track{height:8px;background:rgba(124,92,191,0.1);border-radius:4px;margin-bottom:10px;overflow:hidden}
.dch-progress-fill{height:100%;background:var(--grad);border-radius:4px;transition:width 0.6s ease-out}
.dch-stats-row{display:flex;gap:16px;font-size:12px;color:var(--ink2);flex-wrap:wrap;margin-bottom:12px}
.dch-stats-row strong{color:var(--ink);font-weight:800}
.dch-next{background:rgba(124,92,191,0.05);border-radius:12px;padding:10px 14px;margin-bottom:14px}
.dch-next-label{font-size:10px;font-weight:800;letter-spacing:1px;color:var(--accent);margin-bottom:3px}
.dch-next-name{font-size:14px;font-weight:700;color:var(--ink)}
.dch-next-reason{font-size:11px;color:var(--ink3);margin-top:2px}
.dch-cta{text-align:center;padding:14px;background:var(--accent);color:#fff;border-radius:var(--radius-sm);font-weight:700;font-size:15px;letter-spacing:0.3px;transition:all 0.2s;box-shadow:0 2px 8px rgba(124,92,191,0.25)}
.dash-continue-hero:hover .dch-cta{transform:scale(1.02);box-shadow:0 4px 12px rgba(124,92,191,0.35)}

.dash-hero-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.dash-hero-stats{display:flex;gap:10px;font-size:11px;font-weight:700;color:var(--ink3)}
.dash-hero-progress-row{display:flex;align-items:center;gap:20px;margin-bottom:16px}
.dash-hero-progress-text{flex:1}
.dash-hero-meta-row{display:flex;gap:12px;font-size:11px;font-weight:700}
.dash-explored-msg{padding:10px 14px;background:rgba(124,92,191,0.05);border-radius:12px;margin-bottom:14px;text-align:center;font-size:13px;color:var(--ink2)}
.dash-srs-banner{display:flex;align-items:center;gap:12px;padding:12px 16px;margin-bottom:10px;background:linear-gradient(135deg,rgba(245,158,11,0.12),rgba(224,99,119,0.08));border:2px solid rgba(245,158,11,0.3);border-radius:14px;cursor:pointer;animation:fadeIn 0.3s}
.dash-srs-banner .dch-arrow{font-size:20px;color:var(--orange)}

/* RTL: "Let's learn" / main content on the left in Arabic */
[dir="rtl"] .dash-continue-hero .dash-hero-top{flex-direction:row-reverse}
[dir="rtl"] .dash-continue-hero .dash-hero-progress-row{flex-direction:row-reverse}
[dir="rtl"] .dash-quick-row{flex-direction:row-reverse;flex-wrap:wrap-reverse}
[dir="rtl"] .dash-note-item:hover{transform:translateX(-3px)}
[dir="rtl"] .dash-note-item .dni-badge{margin-left:0;margin-right:auto}

/* ═══ QUICK ACTION PILLS ═══ */
.dash-quick-row{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.dqr-pill{display:inline-flex;align-items:center;gap:5px;padding:8px 14px;border-radius:12px;border:1px solid var(--border2);background:var(--card);font-size:12px;font-weight:700;color:var(--ink2);cursor:pointer;transition:all 0.2s;font-family:'DM Sans',sans-serif;white-space:nowrap}
.dqr-pill:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px);box-shadow:var(--shadow)}
.dqr-pill span{font-size:14px}
.dqr-pill small{font-size:10px;color:var(--ink3);font-weight:600}
.dqr-add{border-style:dashed;border-color:var(--accent);color:var(--accent);background:rgba(124,92,191,0.05)}
.dqr-add:hover{background:var(--accent);color:#fff;border-style:solid}

/* ═══ MINI STATS ROW ═══ */
.dash-mini-stats{display:flex;gap:4px;margin-bottom:16px;flex-wrap:wrap}
.dms-item{flex:1;min-width:50px;text-align:center;padding:8px 4px;background:var(--card);border:1px solid var(--border2);border-radius:10px}
.dms-val{display:block;font-family:'Instrument Serif',serif;font-size:18px;color:var(--accent);font-weight:700}
.dms-lbl{display:block;font-size:9px;font-weight:700;color:var(--ink3);text-transform:uppercase;letter-spacing:0.5px;margin-top:1px}

/* ═══ OLD DASH CLASSES (keep for other views) ═══ */
.dash-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:24px}
.dash-action{background:var(--card);border:1px solid var(--border2);border-radius:14px;padding:20px;cursor:pointer;transition:all 0.2s;position:relative;overflow:hidden}
.dash-action:hover{transform:translateY(-2px);box-shadow:var(--shadow2);border-color:var(--accent)}
.dash-action .da-icon{font-size:28px;margin-bottom:10px}
.dash-action h4{font-size:14px;font-weight:700;margin-bottom:3px}
.dash-action p{font-size:12px;color:var(--ink3);line-height:1.4}
.dash-action .da-arrow{position:absolute;top:20px;right:18px;font-size:16px;color:var(--ink3);transition:all 0.2s}
.dash-action:hover .da-arrow{color:var(--accent);transform:translateX(3px)}
.dash-stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-bottom:24px}
.dash-stat{background:var(--card);border:1px solid var(--border2);border-radius:14px;padding:18px;text-align:center;box-shadow:var(--shadow)}
.dash-stat .ds-val{font-family:'Instrument Serif',serif;font-size:32px;color:var(--accent)}
.dash-stat .ds-lbl{font-size:11px;font-weight:600;color:var(--ink3);text-transform:uppercase;letter-spacing:1px;margin-top:2px}
.dash-recent{margin-bottom:20px}
.dash-recent h3{font-size:16px;font-weight:700;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.dash-note-item{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--border2);border-radius:12px;padding:12px 16px;margin-bottom:8px;cursor:pointer;transition:all 0.2s}
.dash-note-item:hover{border-color:var(--accent);transform:translateX(3px)}
.dash-note-item .dni-icon{font-size:22px}
.dash-note-item .dni-title{font-weight:600;font-size:13px}
.dash-note-item .dni-meta{font-size:11px;color:var(--ink3)}
.dash-note-item .dni-badge{margin-left:auto;font-size:11px;font-weight:700;padding:3px 10px;border-radius:8px;background:rgba(58,125,68,0.1);color:var(--green)}

/* ═══ MOBILE: DASHBOARD ═══ */
@media(max-width:600px){
  .precourse-header{flex-direction:column;align-items:stretch}
  .precourse-lang-switch{width:100%}
  .precourse-lang-btn{flex:1}
  .dash-continue-hero{padding:18px}
  .dch-title{font-size:17px}
  .dch-icon{font-size:28px}
  .dch-pct-ring{width:48px;height:48px}
  .dch-pct-ring svg{width:48px;height:48px}
  .dch-cta{padding:10px;font-size:14px}
  .dqr-pill{padding:6px 10px;font-size:11px}
  .dms-item{padding:6px 2px}
  .dms-val{font-size:15px}
}

/* ═══ NOTES DROP ═══ */
.notes-drop-zone{background:var(--card);border:2px dashed var(--border);border-radius:18px;padding:32px 24px;text-align:center;margin-bottom:20px;transition:all 0.3s}
.notes-drop-zone.drag-hover{border-color:var(--accent);background:rgba(124,92,191,0.05)}
.notes-drop-zone .ndz-icon{font-size:40px;margin-bottom:8px}
.notes-drop-zone h3{font-family:'Instrument Serif',serif;font-size:22px;margin-bottom:4px}
.notes-drop-zone p{color:var(--ink3);font-size:13px;margin-bottom:16px}
.notes-subject-input{width:100%;padding:12px 16px;border:1px solid var(--border);border-radius:12px;font-family:'DM Sans',sans-serif;font-size:14px;background:var(--bg2);color:var(--ink);outline:none;margin-bottom:10px;transition:border-color 0.2s}
.notes-subject-input:focus{border-color:var(--accent)}
.notes-textarea{width:100%;min-height:180px;padding:16px;border:1px solid var(--border);border-radius:12px;font-family:'DM Sans',sans-serif;font-size:14px;line-height:1.7;resize:vertical;background:var(--bg2);color:var(--ink);outline:none;transition:border-color 0.2s}
.notes-textarea:focus{border-color:var(--accent)}
.notes-btn-row{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap;justify-content:center}
.notes-loading{text-align:center;padding:48px 20px}
.notes-spinner{width:40px;height:40px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin 0.8s linear infinite;margin:0 auto 16px}
.notes-loading .nl-text{font-size:15px;font-weight:500;color:var(--ink2)}
.notes-loading .nl-sub{font-size:12px;color:var(--ink3);margin-top:4px}

/* Processed notes cards */
.pn-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:10px}
.pn-header h2{font-family:'Instrument Serif',serif;font-size:24px}
.pn-section{background:var(--card);border:1px solid var(--border2);border-radius:14px;margin-bottom:14px;overflow:hidden;box-shadow:var(--shadow)}
.pn-section-hdr{padding:16px 20px;display:flex;align-items:center;gap:10px;cursor:pointer;transition:background 0.2s;user-select:none}
.pn-section-hdr:hover{background:var(--hover)}
.pn-section-hdr .pns-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.pn-section-hdr h3{font-size:15px;font-weight:700;flex:1}
.pn-section-hdr .pns-toggle{font-size:11px;color:var(--ink3);transition:transform 0.3s}
.pn-section.open .pns-toggle{transform:rotate(180deg)}
.pn-section-body{padding:0 20px 20px;display:none}
.pn-section.open .pn-section-body{display:block}
.pn-concept{background:var(--bg2);border-radius:12px;padding:16px;margin-bottom:10px}
.pn-concept h4{font-size:14px;font-weight:700;margin-bottom:6px;display:flex;align-items:center;gap:6px}
.pn-concept p{font-size:13px;line-height:1.7;color:var(--ink2)}
.pn-formula{font-family:'JetBrains Mono',monospace;font-size:14px;background:var(--bg-dark,#1e1e2e);color:#F6C549;padding:12px 16px;border-radius:10px;margin:8px 0;display:inline-block}
[data-theme="light"] .pn-formula{background:#1e1e2e;color:#F6C549}
.pn-mnemonic{background:linear-gradient(135deg,rgba(124,92,191,0.08),rgba(224,99,119,0.08));border-radius:10px;padding:12px 16px;margin:8px 0;font-size:13px;line-height:1.6;display:flex;align-items:flex-start;gap:8px}
.pn-exam-q{background:rgba(184,134,11,0.08);border-left:3px solid var(--gold);border-radius:0 10px 10px 0;padding:12px 16px;margin:8px 0}
.pn-exam-q .peq-label{font-size:10px;font-weight:700;color:var(--gold);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:4px}
.pn-exam-q p{font-size:13px;line-height:1.5}
.pn-tip{background:rgba(15,123,108,0.08);border-left:3px solid var(--teal);border-radius:0 10px 10px 0;padding:12px 16px;margin:8px 0}
.pn-tip .pt-label{font-size:10px;font-weight:700;color:var(--teal);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:4px}
.pn-mistake{background:rgba(220,38,38,0.06);border-left:3px solid var(--red);border-radius:0 10px 10px 0;padding:12px 16px;margin:8px 0}
.pn-mistake .pm-label{font-size:10px;font-weight:700;color:var(--red);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:4px}
.pn-quick-strip{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:16px}
.pn-quick-strip .pqs{background:rgba(184,134,11,0.1);color:var(--gold);padding:8px 14px;border-radius:8px;font-size:12px;font-weight:600;white-space:nowrap;flex-shrink:0}

/* Notes library */
.notes-lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-top:16px}
.notes-lib-card{background:var(--card);border:1px solid var(--border2);border-radius:14px;padding:20px;cursor:pointer;transition:all 0.2s;box-shadow:var(--shadow)}
.notes-lib-card:hover{transform:translateY(-2px);box-shadow:var(--shadow2);border-color:var(--accent)}
.notes-lib-card .nlc-emoji{font-size:24px;margin-bottom:8px;display:block}
.notes-lib-card h4{font-size:15px;font-weight:700;margin-bottom:4px}
.notes-lib-card .nlc-meta{font-size:11px;color:var(--ink3)}
.notes-lib-card .nlc-actions{display:flex;gap:6px;margin-top:10px}

/* ═══ GAMIFIED QUIZ ═══ */
.gq-container{max-width:600px;margin:0 auto}
.gq-progress{display:flex;gap:3px;margin-bottom:16px}
.gq-progress .gqp{flex:1;height:5px;border-radius:3px;background:var(--bg3);transition:all 0.4s}
.gq-progress .gqp.correct{background:var(--green)}
.gq-progress .gqp.wrong{background:var(--pink)}
.gq-progress .gqp.current{background:var(--accent)}
.gq-timer-row{display:flex;align-items:center;gap:10px;margin-bottom:16px;background:var(--bg2);padding:10px 14px;border-radius:12px;border:1.5px solid var(--border2)}
.gq-timer-num{font-family:'JetBrains Mono',monospace;font-size:28px;font-weight:800;min-width:40px;text-align:center;transition:color 0.3s}
.gq-timer-bar{flex:1;height:10px;background:var(--bg3);border-radius:5px;overflow:hidden}
.gq-timer-fill{height:100%;border-radius:5px;transition:width 1s linear,background 0.3s}
.gq-score{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--gold);display:flex;align-items:center;gap:5px}
.gq-streak{font-size:12px;color:var(--accent);font-weight:700;margin-bottom:12px}
@keyframes gqBounce{0%{transform:scale(0)}60%{transform:scale(1.1)}100%{transform:scale(1)}}
.gq-streak{animation:gqBounce 0.4s ease-out}
.gq-q-num{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink3);letter-spacing:2px;text-transform:uppercase;margin-bottom:8px}
.gq-question{font-family:'Instrument Serif',serif;font-size:22px;line-height:1.35;margin-bottom:20px}
.gq-option{font-family:'DM Sans',sans-serif;font-size:15px;font-weight:500;width:100%;text-align:left;background:var(--card);border:1.5px solid var(--border2);border-radius:12px;padding:14px 18px;margin-bottom:8px;cursor:pointer;transition:all 0.2s;display:flex;align-items:center;gap:12px}
.gq-option:hover:not(:disabled){border-color:var(--accent);background:rgba(124,92,191,0.05);transform:translateX(3px)}
.gq-option:disabled{cursor:default}
.gq-option .gqo-letter{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:600;color:var(--ink3);min-width:20px}
.gq-option.gq-correct{background:rgba(58,125,68,0.08);border-color:var(--green);color:var(--green)}
.gq-option.gq-correct .gqo-letter{color:var(--green)}
.gq-option.gq-wrong{background:rgba(224,99,119,0.08);border-color:var(--pink);color:var(--pink)}
.gq-option.gq-wrong .gqo-letter{color:var(--pink)}
.gq-option.gq-dimmed{opacity:0.35}
.gq-fact{background:rgba(184,134,11,0.08);border-left:3px solid var(--gold);border-radius:0 10px 10px 0;padding:12px 16px;margin-top:12px;font-size:13px;line-height:1.6}
.gq-next{width:100%;margin-top:12px}
.gq-results{text-align:center;padding:20px 0}
.gq-results .gqr-emoji{font-size:48px;margin-bottom:6px}
.gq-results h2{font-family:'Instrument Serif',serif;font-size:32px;margin-bottom:2px}
.gq-results .gqr-sub{color:var(--ink3);font-size:14px;margin-bottom:20px}
.gqr-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px}
.gqr-stat{background:var(--bg2);border-radius:12px;padding:16px 10px}
.gqr-stat .gqrs-val{font-family:'Instrument Serif',serif;font-size:28px}
.gqr-stat .gqrs-lbl{font-size:10px;font-weight:600;color:var(--ink3);text-transform:uppercase;letter-spacing:1px;margin-top:2px}
.gqr-review{text-align:left;margin-bottom:20px}
.gqr-review-item{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--bg3);font-size:13px}
.gqr-review-item .gqri-icon{font-size:14px;min-width:20px;text-align:center}
.gqr-review-item .gqri-q{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gqr-review-item .gqri-ans{font-size:11px;color:var(--ink3)}
@keyframes gqTimerPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes fadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

/* LIVE STUDY SESSION — TOP BAR */
.ss-bar{position:sticky;top:0;z-index:100;background:var(--card);border-bottom:2px solid var(--accent);padding:8px 16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;box-shadow:0 2px 12px rgba(0,0,0,0.08);animation:ssSlideIn 0.3s ease-out}
@keyframes ssSlideIn{from{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}
.ss-bar-timer{font-family:'JetBrains Mono',monospace;font-size:24px;font-weight:700;min-width:70px;letter-spacing:-1px}
.ss-bar-timer.warning{color:var(--pink);animation:ssPulse 1s infinite}
@keyframes ssPulse{0%,100%{opacity:1}50%{opacity:0.6}}
.ss-bar-phase{font-size:11px;font-weight:700;padding:3px 10px;border-radius:8px;text-transform:uppercase;letter-spacing:1px;white-space:nowrap}
.ss-bar-phase.study{background:rgba(124,92,191,0.1);color:var(--accent)}
.ss-bar-phase.break{background:rgba(58,125,68,0.1);color:var(--green)}
.ss-bar-phase.review{background:rgba(245,158,11,0.1);color:var(--orange)}
.ss-bar-stats{font-size:11px;color:var(--ink3);display:flex;gap:8px;align-items:center}
.ss-bar-stats span{display:flex;align-items:center;gap:2px}
.ss-bar-btns{margin-left:auto;display:flex;gap:6px;align-items:center}
.ss-bar-btns button{font-size:11px;padding:4px 10px;border-radius:8px;border:1px solid var(--border);background:var(--bg2);cursor:pointer;color:var(--ink);font-weight:600;font-family:'DM Sans',sans-serif}
.ss-bar-btns button:hover{background:var(--hover)}
.ss-bar-btns .ss-end{background:rgba(224,99,119,0.08);border-color:rgba(224,99,119,0.2);color:var(--pink)}
.ss-expand{background:var(--card);border:1.5px solid var(--accent);border-radius:0 0 16px 16px;padding:18px;margin:-2px 16px 14px;box-shadow:0 4px 16px rgba(0,0,0,0.06)}
.ss-expand h4{font-size:14px;font-weight:700;margin-bottom:8px}
.ss-expand textarea{width:100%;min-height:60px;padding:10px;border:1px solid var(--border);border-radius:10px;font-family:'DM Sans',sans-serif;font-size:13px;resize:none;background:var(--bg2);color:var(--ink)}
.ss-expand .ss-ai-resp{background:rgba(124,92,191,0.05);border-left:3px solid var(--accent);border-radius:0 12px 12px 0;padding:12px;margin-top:10px;font-size:13px;line-height:1.6}
.ss-container{max-width:600px;margin:0 auto}
.ss-stats-row{display:flex;gap:8px;justify-content:center;margin-bottom:16px;flex-wrap:wrap}
.ss-stat{background:var(--bg2);border-radius:10px;padding:8px 14px;font-size:12px;text-align:center}
.ss-stat strong{display:block;font-size:16px;font-family:'JetBrains Mono',monospace}

/* ═══ EXAM COUNTDOWN ═══ */
.exam-banner{background:linear-gradient(135deg,rgba(220,38,38,0.06),rgba(245,158,11,0.06));border:1.5px solid rgba(220,38,38,0.15);border-radius:16px;padding:20px;margin-bottom:16px;cursor:pointer;transition:all 0.2s}
.exam-banner:hover{transform:scale(1.01);box-shadow:var(--shadow)}
.exam-banner .eb-days{font-family:'Instrument Serif',serif;font-size:48px;font-weight:700;line-height:1}
.exam-banner .eb-days.urgent{color:var(--red)}
.exam-banner .eb-days.warning{color:var(--orange)}
.exam-banner .eb-days.calm{color:var(--teal)}
.exam-banner .eb-label{font-size:12px;font-weight:600;color:var(--ink3);text-transform:uppercase;letter-spacing:1px}
.exam-banner .eb-name{font-size:14px;font-weight:700;margin-top:4px}
.exam-plan{background:var(--card);border:1px solid var(--border2);border-radius:14px;padding:18px;margin-bottom:14px}
.exam-plan h3{font-size:16px;font-weight:700;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.ep-today{display:flex;flex-direction:column;gap:8px}
.ep-task{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--bg2);border-radius:10px;cursor:pointer;transition:all 0.2s}
.ep-task:hover{background:var(--hover);transform:translateX(3px)}
.ep-task .ept-icon{font-size:18px;min-width:24px;text-align:center}
.ep-task .ept-info{flex:1}
.ep-task .ept-title{font-size:13px;font-weight:600}
.ep-task .ept-meta{font-size:11px;color:var(--ink3)}
.ep-task .ept-go{font-size:14px;color:var(--accent)}
.ep-weak{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.ep-weak-tag{font-size:11px;padding:4px 10px;border-radius:6px;background:rgba(220,38,38,0.08);color:var(--red);font-weight:600}

/* ═══ CONFIDENCE CALIBRATION ═══ */
.cc-gauge{position:relative;width:160px;height:80px;margin:0 auto 10px;overflow:hidden}
.cc-gauge svg{width:100%;height:100%}
.cc-gauge-label{position:absolute;bottom:2px;left:50%;transform:translateX(-50%);font-family:'JetBrains Mono',monospace;font-size:20px;font-weight:700}
.cc-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:8px;font-size:11px;font-weight:700}
.cc-badge.over{background:rgba(220,38,38,0.08);color:var(--red)}
.cc-badge.under{background:rgba(59,130,246,0.08);color:#3b82f6}
.cc-badge.calibrated{background:rgba(58,125,68,0.08);color:var(--green)}
.cc-topic-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--bg3);font-size:13px}
.cc-topic-row .cc-bar{flex:1;height:20px;background:var(--bg3);border-radius:4px;position:relative;overflow:hidden;min-width:100px}
.cc-topic-row .cc-bar-fill{height:100%;border-radius:4px;position:absolute;left:0;top:0}
.cc-topic-row .cc-bar-marker{position:absolute;top:-2px;bottom:-2px;width:3px;border-radius:2px;background:var(--ink);z-index:2}

/* ═══ NIGHT-BEFORE / MORNING MODE ═══ */
.nb-mode{background:linear-gradient(135deg,#0f0f18,#1a1030);border-radius:18px;padding:28px;color:#fff;margin-bottom:16px;position:relative;overflow:hidden}
.nb-mode::before{content:'';position:absolute;top:10%;right:8%;width:60px;height:60px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ffecd2,#fcb69f);opacity:0.2;pointer-events:none}
.nb-mode h2{font-family:'Instrument Serif',serif;font-size:24px;margin-bottom:4px}
.nb-mode p{font-size:13px;opacity:0.7;line-height:1.6}
.nb-mode .nb-hours{font-family:'JetBrains Mono',monospace;font-size:36px;color:#fcb69f;font-weight:700}
.nb-sleep-prompt{background:rgba(124,92,191,0.1);border:1px solid rgba(124,92,191,0.2);border-radius:14px;padding:18px;text-align:center;margin-top:16px}
.nb-sleep-prompt .emoji{font-size:32px;margin-bottom:6px}
.nb-rapid-card{background:var(--card);border:1.5px solid var(--border2);border-radius:14px;padding:20px;text-align:center;margin-bottom:14px}
.nb-rapid-card .nrc-q{font-family:'Instrument Serif',serif;font-size:20px;margin:10px 0}
.nb-rapid-card .nrc-num{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink3);letter-spacing:2px;text-transform:uppercase}

/* ═══ PERSONAL ANCHORS ═══ */
.anchor-card{background:linear-gradient(135deg,rgba(124,92,191,0.04),rgba(252,182,159,0.04));border:1px solid rgba(124,92,191,0.15);border-radius:12px;padding:14px 16px;margin-top:10px;font-size:13px;line-height:1.6}
.anchor-card .ac-label{font-size:10px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:4px;display:flex;align-items:center;gap:4px}
.anchor-loading{color:var(--ink3);font-size:12px;font-style:italic}

/* ═══════════════════════════════════════════════════════════════
   MEMORY NOTES - Animated Study Cards with Emotional Hooks
   ═══════════════════════════════════════════════════════════════ */
.mem-studio{max-width:700px;margin:0 auto;padding:16px}
.mem-header{text-align:center;padding:20px 0 24px;position:relative}
.mem-header h2{font-family:'Instrument Serif',serif;font-size:28px;margin-bottom:4px;background:linear-gradient(135deg,var(--accent),var(--pink));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.mem-header p{color:var(--ink3);font-size:13px}
.mem-header .mem-brain{font-size:48px;margin-bottom:8px;animation:memBrain 3s ease-in-out infinite}
@keyframes memBrain{0%,100%{transform:scale(1) rotate(0deg)}25%{transform:scale(1.1) rotate(-3deg)}50%{transform:scale(1) rotate(0deg)}75%{transform:scale(1.1) rotate(3deg)}}

/* Input area */
.mem-input-zone{background:var(--card);border:2px dashed var(--border);border-radius:20px;padding:28px;margin-bottom:20px;transition:all 0.3s}
.mem-input-zone.active{border-color:var(--accent);border-style:solid;box-shadow:0 0 30px rgba(124,92,191,0.15)}
.mem-input-zone textarea{width:100%;min-height:140px;padding:16px;border:none;background:var(--bg2);border-radius:12px;font-family:'DM Sans',sans-serif;font-size:14px;line-height:1.8;resize:vertical;outline:none;color:var(--ink)}
.mem-input-zone textarea::placeholder{color:var(--ink3)}
.mem-input-zone .mem-hint{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:12px;color:var(--ink3)}
.mem-input-zone .mem-hint span{font-size:16px}

/* Step indicators */
.mem-step{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:700;color:var(--ink2);margin:20px 0 10px;padding-left:4px}
.mem-step-num{width:24px;height:24px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}

/* Quick actions bar (when cards exist) */
.mem-quick-actions{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap;justify-content:center}
.mqa-btn{display:flex;align-items:center;gap:6px;padding:10px 16px;border-radius:12px;border:1px solid var(--border2);background:var(--card);color:var(--ink);font-size:13px;font-weight:600;cursor:pointer;transition:all 0.2s}
.mqa-btn:hover{border-color:var(--accent);transform:translateY(-1px)}
.mqa-btn span{font-size:15px}
.mqa-meme{background:linear-gradient(135deg,rgba(255,107,107,0.1),rgba(254,202,87,0.1));border-color:rgba(255,107,107,0.3)}
.mqa-meme:hover{background:linear-gradient(135deg,rgba(255,107,107,0.2),rgba(254,202,87,0.2));border-color:rgba(255,107,107,0.5)}

/* Collapsible input section */
.mem-input-collapsed{max-height:0;overflow:hidden;opacity:0;transition:all 0.3s ease}
.mem-input-expanded{max-height:400px;opacity:1;margin-bottom:20px}

/* Tip banner */
.mem-tip-banner{display:flex;align-items:center;gap:8px;padding:12px 16px;background:linear-gradient(135deg,rgba(255,107,107,0.08),rgba(254,202,87,0.06));border-radius:12px;font-size:12px;color:var(--ink2);margin-top:20px}
.mem-tip-banner span{font-size:16px}

/* Preview banner (before cards exist) */
.mem-preview-banner{background:var(--bg2);border-radius:16px;padding:20px;text-align:center;margin-top:10px}
.mpb-title{font-size:13px;font-weight:700;color:var(--ink2);margin-bottom:12px}
.mpb-items{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
.mpb-items span{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink3)}

/* Animation style selector */
.mem-style-row{display:flex;gap:8px;margin:16px 0;flex-wrap:wrap;justify-content:center}
.mem-style-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 16px;border:2px solid var(--border2);border-radius:14px;background:var(--card);cursor:pointer;transition:all 0.25s;min-width:85px}
.mem-style-btn:hover{border-color:var(--accent);transform:translateY(-2px)}
.mem-style-btn.active{border-color:var(--accent);background:rgba(124,92,191,0.08);box-shadow:0 4px 15px rgba(124,92,191,0.2)}
.mem-style-btn .mss-icon{font-size:24px}
.mem-style-btn .mss-name{font-size:10px;font-weight:700;color:var(--ink2);text-transform:uppercase;letter-spacing:0.5px}

/* Generated memory cards grid */
.mem-cards-grid{display:flex;flex-direction:column;gap:16px}

/* Individual memory card */
.mem-card{background:var(--card);border:1px solid var(--border2);border-radius:20px;overflow:hidden;box-shadow:var(--shadow2);position:relative}
.mem-card.generating{opacity:0.7}
.mem-card-header{padding:18px 20px 14px;background:linear-gradient(135deg,rgba(124,92,191,0.06),rgba(224,99,119,0.04));border-bottom:1px solid var(--border2);display:flex;align-items:center;gap:12px}
.mem-card-icon{width:48px;height:48px;border-radius:14px;background:var(--grad);display:flex;align-items:center;justify-content:center;font-size:24px;color:#fff;flex-shrink:0;animation:memIconPop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards}
@keyframes memIconPop{0%{transform:scale(0) rotate(-180deg);opacity:0}100%{transform:scale(1) rotate(0deg);opacity:1}}
.mem-card-title{font-family:'Instrument Serif',serif;font-size:20px;font-weight:600;color:var(--ink)}
.mem-card-tag{font-size:10px;font-weight:700;padding:4px 10px;border-radius:6px;background:rgba(124,92,191,0.1);color:var(--accent);text-transform:uppercase;letter-spacing:1px;margin-left:auto}

/* Memory card body with animations */
.mem-card-body{padding:20px}

/* Animated fact items */
.mem-fact{display:flex;gap:12px;padding:14px 16px;margin-bottom:10px;background:var(--bg2);border-radius:14px;border-left:4px solid var(--accent);opacity:0;transform:translateX(-30px);animation:memFactSlide 0.5s ease forwards}
.mem-fact:nth-child(1){animation-delay:0.1s}
.mem-fact:nth-child(2){animation-delay:0.25s}
.mem-fact:nth-child(3){animation-delay:0.4s}
.mem-fact:nth-child(4){animation-delay:0.55s}
.mem-fact:nth-child(5){animation-delay:0.7s}
@keyframes memFactSlide{to{opacity:1;transform:translateX(0)}}
.mem-fact-emoji{font-size:28px;flex-shrink:0;animation:memEmojiBounce 0.6s ease-out forwards;animation-delay:inherit}
@keyframes memEmojiBounce{0%{transform:scale(0)}50%{transform:scale(1.3)}100%{transform:scale(1)}}
.mem-fact-content{flex:1}
.mem-fact-key{font-size:11px;font-weight:800;color:var(--accent);text-transform:uppercase;letter-spacing:1px;margin-bottom:2px}
.mem-fact-text{font-size:14px;line-height:1.6;color:var(--ink)}

/* Emotional hook highlight */
.mem-hook{background:linear-gradient(135deg,#fef3c7,#fef9e7);border:2px solid #f59e0b;border-radius:14px;padding:16px;margin:14px 0;position:relative;overflow:hidden}
.mem-hook::before{content:'🧠';position:absolute;top:-5px;right:-5px;font-size:40px;opacity:0.15}
.mem-hook-label{font-size:10px;font-weight:800;color:#b45309;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:4px}
.mem-hook-text{font-size:15px;font-weight:600;color:#92400e;line-height:1.5}

/* Personal world connection */
.mem-world{background:linear-gradient(135deg,rgba(124,92,191,0.08),rgba(252,182,159,0.08));border:1px solid rgba(124,92,191,0.2);border-radius:14px;padding:14px 16px;margin-top:14px;font-size:13px;line-height:1.6}
.mem-world-label{font-size:10px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:4px;display:flex;align-items:center;gap:5px}

/* Video generation button */
.mem-video-btn{display:flex;align-items:center;justify-content:center;gap:10px;padding:14px 24px;margin-top:16px;background:linear-gradient(135deg,#1a1a2e,#2d1f4e);border:2px solid transparent;border-radius:14px;color:#fff;font-family:'DM Sans',sans-serif;font-size:14px;font-weight:700;cursor:pointer;transition:all 0.3s;position:relative;overflow:hidden}
.mem-video-btn::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.1),transparent);transform:translateX(-100%);transition:transform 0.6s}
.mem-video-btn:hover::before{transform:translateX(100%)}
.mem-video-btn:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(124,92,191,0.35);border-color:var(--accent)}
.mem-video-btn:disabled{opacity:0.6;cursor:not-allowed}
.mem-video-btn .mvb-icon{font-size:20px}
.mem-video-btn .mvb-kling{font-size:10px;opacity:0.7;margin-left:4px}

/* Hero Movie Button */
.mem-movie-hero{background:linear-gradient(135deg,#1a1030,#2d1f4e,#1a1030);border-radius:24px;padding:28px;margin-bottom:24px;text-align:center;position:relative;overflow:hidden;border:2px solid rgba(124,92,191,0.3);box-shadow:0 8px 40px rgba(124,92,191,0.2)}
.mem-movie-hero::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0L30 60M0 30L60 30' stroke='rgba(124,92,191,0.1)' stroke-width='1'/%3E%3C/svg%3E");opacity:0.5}
.mem-movie-hero::after{content:'✨';position:absolute;top:15px;right:20px;font-size:24px;animation:memSparkle 2s ease-in-out infinite}
@keyframes memSparkle{0%,100%{opacity:0.3;transform:scale(1) rotate(0deg)}50%{opacity:1;transform:scale(1.2) rotate(15deg)}}
.mem-movie-icon{font-size:56px;margin-bottom:12px;position:relative;z-index:1;animation:memMovieFloat 3s ease-in-out infinite}
@keyframes memMovieFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.mem-movie-title{font-family:'Instrument Serif',serif;font-size:26px;color:#fff;margin-bottom:6px;position:relative;z-index:1}
.mem-movie-sub{font-size:13px;color:rgba(255,255,255,0.7);margin-bottom:18px;position:relative;z-index:1}
.mem-movie-btn{display:inline-flex;align-items:center;gap:12px;padding:16px 36px;background:linear-gradient(135deg,#7c5cbf,#e06377,#fcb69f);background-size:200% 200%;animation:memGradFlow 4s ease infinite;border:none;border-radius:16px;color:#fff;font-family:'DM Sans',sans-serif;font-size:17px;font-weight:800;cursor:pointer;transition:all 0.3s;position:relative;z-index:1;box-shadow:0 4px 20px rgba(224,99,119,0.4)}
@keyframes memGradFlow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes memeGradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.mem-meme-btn:hover{transform:scale(1.02);box-shadow:0 4px 15px rgba(255,107,107,0.3)}
.mem-tab-badge{position:absolute;top:-8px;right:-20px;background:linear-gradient(135deg,#ff6b6b,#feca57);color:#1a1a1a;font-size:8px;font-weight:800;padding:2px 5px;border-radius:6px;animation:memBadgePulse 2s ease-in-out infinite}
@keyframes memBadgePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
.mem-movie-btn:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 8px 30px rgba(224,99,119,0.5)}
.mem-movie-btn:disabled{opacity:0.6;cursor:not-allowed;transform:none}
.mem-movie-powered{font-size:11px;color:rgba(255,255,255,0.5);margin-top:12px;position:relative;z-index:1}

/* Video status/preview */
.mem-video-status{background:var(--bg2);border-radius:14px;padding:20px;margin-top:14px;text-align:center}
.mem-video-status.generating{animation:memVideoPulse 2s ease-in-out infinite}
@keyframes memVideoPulse{0%,100%{box-shadow:0 0 0 0 rgba(124,92,191,0.2)}50%{box-shadow:0 0 0 15px rgba(124,92,191,0)}}
.mem-video-preview{border-radius:12px;overflow:hidden;margin-top:12px;box-shadow:var(--shadow2)}
.mem-video-preview video{width:100%;display:block}

/* Cinematic reveal animation style */
.mem-card.style-cinematic .mem-fact{transform:translateY(40px) scale(0.9);opacity:0;animation:memCinematic 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards}
@keyframes memCinematic{to{transform:translateY(0) scale(1);opacity:1}}

/* Puzzle assembly animation style */
.mem-card.style-puzzle .mem-fact{transform:rotate(-5deg) scale(0.8);opacity:0;animation:memPuzzle 0.6s ease forwards}
@keyframes memPuzzle{50%{transform:rotate(3deg) scale(1.05)}100%{transform:rotate(0deg) scale(1);opacity:1}}

/* Story arc animation style */
.mem-card.style-story .mem-fact{clip-path:inset(0 100% 0 0);animation:memStory 0.7s ease forwards}
@keyframes memStory{to{clip-path:inset(0 0 0 0)}}

/* Flash animation style */
.mem-card.style-flash .mem-fact{animation:memFlash 0.4s ease forwards}
@keyframes memFlash{0%{background:rgba(124,92,191,0.3);transform:scale(1.02)}100%{background:var(--bg2);transform:scale(1);opacity:1}}

/* Memory cards library */
.mem-library{margin-top:24px}
.mem-library h3{font-size:16px;font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.mem-lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.mem-lib-card{background:var(--card);border:1px solid var(--border2);border-radius:14px;padding:16px;cursor:pointer;transition:all 0.2s;text-align:center}
.mem-lib-card:hover{transform:translateY(-3px);box-shadow:var(--shadow2);border-color:var(--accent)}
.mem-lib-card .mlc-emoji{font-size:32px;margin-bottom:6px}
.mem-lib-card h4{font-size:13px;font-weight:700;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mem-lib-card .mlc-meta{font-size:11px;color:var(--ink3)}
.mem-lib-card .mlc-video{display:inline-flex;align-items:center;gap:4px;margin-top:6px;font-size:10px;color:var(--accent);font-weight:700}

/* Kling video generation modal */
.kling-modal{position:fixed;inset:0;z-index:600;background:rgba(0,0,0,0.7);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;animation:fadeIn 0.3s forwards}
.kling-modal-box{background:var(--card);border-radius:24px;max-width:500px;width:100%;max-height:85vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,0.3)}
.kling-modal-header{padding:24px 24px 16px;border-bottom:1px solid var(--border2);display:flex;align-items:center;gap:12px}
.kling-modal-header h3{font-family:'Instrument Serif',serif;font-size:22px;flex:1}
.kling-modal-close{width:36px;height:36px;border-radius:10px;border:none;background:var(--bg2);cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;transition:all 0.2s}
.kling-modal-close:hover{background:var(--hover);color:var(--pink)}
.kling-modal-body{padding:24px}
.kling-prompt-preview{background:var(--bg2);border-radius:12px;padding:14px;margin-bottom:16px;font-size:13px;line-height:1.6;color:var(--ink2);max-height:120px;overflow-y:auto}
.kling-settings{display:flex;flex-direction:column;gap:12px;margin-bottom:20px}
.kling-setting{display:flex;align-items:center;gap:12px}
.kling-setting label{font-size:13px;font-weight:600;min-width:80px}
.kling-setting select{flex:1;padding:10px 14px;border:1px solid var(--border);border-radius:10px;background:var(--bg2);font-size:13px;color:var(--ink)}
.kling-generate-btn{width:100%;padding:16px;background:linear-gradient(135deg,#7c5cbf,#e06377);border:none;border-radius:14px;color:#fff;font-family:'DM Sans',sans-serif;font-size:16px;font-weight:700;cursor:pointer;transition:all 0.3s;display:flex;align-items:center;justify-content:center;gap:10px}
.kling-generate-btn:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(124,92,191,0.4)}
.kling-generate-btn:disabled{opacity:0.6;cursor:not-allowed;transform:none}
.kling-credits{text-align:center;font-size:11px;color:var(--ink3);margin-top:12px}

/* ═══ CLEAN MODE — Minimal, professional, competition-ready ═══ */
body.clean-mode .persona-bar{display:none}
body.clean-mode .overwhelm-bar{display:none}
body.clean-mode .concept-hero{background:var(--card);border:1px solid var(--border2)}
body.clean-mode .concept-hero h2{color:var(--ink)}
body.clean-mode .concept-hero .ch-progress{color:var(--accent)}
body.clean-mode .concept-hero .ch-formula{background:var(--bg2);color:var(--ink);border:1px solid var(--border)}
body.clean-mode .concept-hero .ch-plain{color:var(--ink2)}
body.clean-mode .concept-row{gap:12px}
body.clean-mode .concept-ex{background:var(--card);border:1px solid var(--border2);border-left:3px solid var(--accent)}
body.clean-mode .concept-ex .cx-label{background:transparent;color:var(--ink2);font-size:10px}
body.clean-mode .concept-ex .cx-label.pink,.concept-ex .cx-label.gold{background:transparent}
body.clean-mode .vis-diagram{border-radius:12px;overflow:hidden}
body.clean-mode .vis-diagram>div{filter:saturate(0.6) brightness(1.05)}
body.clean-mode .teach-btn{background:var(--accent);color:#fff}
body.clean-mode .btn-primary{background:var(--accent)}
body.clean-mode .creative-tools-bar{background:var(--bg2);border-color:var(--border)}
body.clean-mode .ctb-label{color:var(--ink3)}
body.clean-mode .life-example{background:var(--card);border-color:var(--border2)}
body.clean-mode .dad-card{border-color:var(--border2)}
body.clean-mode .dad-card-inner{background:var(--card)}
body.clean-mode .syl-sidebar-body{background:var(--bg1)}
body.clean-mode .emox-encourage{background:var(--card);border:1px solid var(--border2)}
body.clean-mode .emox-encourage.gentle{border-left:3px solid var(--accent)}
body.clean-mode .emox-encourage.challenge{border-left:3px solid var(--green)}

/* ═══ DARK MODE — contrast & surfaces (supplement to tokens above) ═══ */
[data-theme="dark"] .persona-chip.active{background:rgba(124,92,191,0.22)}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:var(--border2)}
[data-theme="dark"] .chat-panel{box-shadow:-8px 0 40px rgba(0,0,0,0.45)}
[data-theme="dark"] .tb-btn,[data-theme="dark"] .btn-secondary{color:var(--ink2)}
[data-theme="dark"] .enrich-help-btn.accent{background:rgba(124,92,191,0.14);border-color:rgba(124,92,191,0.35)}
[data-theme="dark"] .diag-opt:hover{background:rgba(124,92,191,0.12)}
[data-theme="dark"] .test-options-menu button:hover{background:rgba(124,92,191,0.12)}

/* ═══ RTL (Arabic) support ═══ */
[dir="rtl"],.is-rtl{direction:rtl;text-align:right}
[dir="rtl"] .topbar,[dir="rtl"] .tab-bar,[dir="rtl"] .course-bar-scroll,[dir="rtl"] .learn-layout,[dir="rtl"] .concept-nav,[dir="rtl"] .chat-input-bar,[dir="rtl"] .mw-footer,[dir="rtl"] .settings-panel>div:first-child,[dir="rtl"] .continue-other,[dir="rtl"] .app-launcher-grid{flex-direction:row-reverse}
@media(min-width:601px){[dir="rtl"] .precourse-header{flex-direction:row-reverse}}
[dir="rtl"] .tab-bar .tab{border-top:3px solid transparent}
[dir="rtl"] .tab.active{border-top-color:var(--accent)}
[dir="rtl"] .continue-course .cc-arrow{transform:scaleX(-1)}
[dir="rtl"] .syl-topic{border-left:none;border-right:2px solid var(--border2)}
[dir="rtl"] .syl-topic-hdr,[dir="rtl"] .concept-hero .ch-formula,[dir="rtl"] .fc-quote{border-left:none;border-right:3px solid}
[dir="rtl"] .fc-quote{border-right-color:#7c5cbf}
[dir="rtl"] .back-btn::before{content:'→ '}
[dir="rtl"] .back-btn{text-align:right}
[dir="rtl"] .landing-content{text-align:center}
[dir="rtl"] .lnd-enter-wrap{direction:ltr}
[dir="rtl"] .chat-panel{left:0;right:auto;transform:translateX(-100%);border-left:none;border-right:1px solid var(--border2);box-shadow:8px 0 40px rgba(0,0,0,0.1)}
[dir="rtl"] .chat-panel.open{transform:translateX(0)}
[dir="rtl"] body.chat-active{margin-right:0;margin-left:480px}
[dir="rtl"] .chat-fab{left:16px;right:auto}
[dir="rtl"] .create-fab-wrap{left:auto;right:20px}
[dir="rtl"] .theme-mascot{left:16px;right:auto}
[dir="rtl"] .mascot-speech{right:auto;left:0}
[dir="rtl"] .tb-spacer{margin-right:auto;margin-left:0}
[dir="rtl"] .learn-sidebar{border-right:none;border-left:1px solid var(--border2)}
[dir="rtl"] .syl-toggle{left:0;right:auto}
[dir="rtl"] .course-tab-add,.course-tab-lib{order:-1}
[dir="rtl"] input,[dir="rtl"] textarea,[dir="rtl"] select{text-align:right}
[dir="rtl"] .mw-chip,[dir="rtl"] .age-choice-btn,[dir="rtl"] .comp-tab{direction:rtl}
[dir="rtl"] .lang-select-wrap{margin-left:0;margin-right:8px}