*{box-sizing:border-box;margin:0;padding:0;}
:root{
  --void:#050508;
  --deep:#08080f;
  --surface:#0c0c16;
  --panel:#10101e;
  --raised:#141428;
  --border:#1e1e38;
  --border2:#282848;
  --muted:#32325a;
  --text:#d0d0f0;
  --textSub:#5a5a90;
  --textDim:#2e2e52;
  --indigo:#6366f1;
  --indigoHi:#818cf8;
  --indigoLo:#1e1e4a;
  --green:#00ff9d;
  --greenDim:#00cc7d;
  --greenBg:#001a0f;
  --amber:#f59e0b;
  --amberBg:#1c1400;
  --red:#f87171;
  --redBg:#1a0505;
  --blue:#60a5fa;
  --blueBg:#051428;
  --pink:#f472b6;
  --heading:#fff;
  --headingSoft:#d8d8f0;
  --chromeBlur:rgba(5,5,8,.85);
  --mono:'JetBrains Mono',monospace;
  --sans:'Inter',system-ui,sans-serif;
}

/* Light mode — same variable names, light values. Core chrome
   (backgrounds, borders, text) fully switches; small decorative/accent
   colors (confetti, some badges, accessory art) intentionally stay as-is
   since vivid accent colors read fine on either background. */
body.light-mode{
  --void:#f7f7fb;
  --deep:#ffffff;
  --surface:#ffffff;
  --panel:#ffffff;
  --raised:#eef0fa;
  --border:#e2e4f0;
  --border2:#cdd0e8;
  --muted:#9a9dc0;
  --text:#1a1a2e;
  --textSub:#5a5a7a;
  --textDim:#a8aac4;
  --indigo:#6366f1;
  --indigoHi:#4f46e5;
  --indigoLo:#eef0ff;
  --green:#00a86b;
  --greenDim:#008f5b;
  --greenBg:#e6fff5;
  --amber:#d97706;
  --amberBg:#fff7e6;
  --red:#dc2626;
  --redBg:#ffeded;
  --blue:#2563eb;
  --blueBg:#eaf3ff;
  --pink:#db2777;
  --heading:#1a1a2e;
  --headingSoft:#3a3a52;
  --chromeBlur:rgba(247,247,251,.85);
}

body{background:var(--void);color:var(--text);font-family:var(--sans);min-height:100vh;overflow-x:hidden;}
button{font-family:inherit;cursor:pointer;transition:all .15s;}
textarea,input{font-family:inherit;}

::-webkit-scrollbar{width:4px;height:4px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px;}
::-webkit-scrollbar-thumb:hover{background:var(--muted);}

/* SCREEN TRANSITIONS */
.screen{display:none;opacity:0;transform:translateY(8px);transition:opacity .25s ease,transform .25s ease;}
.screen.active{display:block;animation:fadeUp .25s ease forwards;}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}

/* NOTIFICATION */
#notif{position:fixed;top:20px;right:20px;padding:12px 20px;border-radius:10px;font-weight:700;font-size:13px;z-index:9999;box-shadow:0 4px 30px rgba(0,0,0,.6);display:none;color:#fff;pointer-events:none;font-family:var(--mono);letter-spacing:.03em;}

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

/* ═══════════════════════════════════════════
   HOME SCREEN
═══════════════════════════════════════════ */
#home{min-height:100vh;padding-bottom:100px;}

.home-nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 32px;border-bottom:1px solid var(--border);
  background:var(--chromeBlur);backdrop-filter:blur(12px);
  position:sticky;top:0;z-index:100;
}
.nav-logo{display:flex;align-items:center;gap:10px;}
.nav-logo-mark{
  width:34px;height:34px;border-radius:50%;object-fit:cover;
  background:var(--surface);border:1px solid var(--border2);
}
.nav-logo-text{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--heading);letter-spacing:.04em;}
.nav-logo-text span{color:var(--indigoHi);}
.nav-stats{display:flex;gap:20px;align-items:center;}
.nav-auth-btn{
  background:var(--raised);border:1px solid var(--border2);color:var(--textSub);
  border-radius:8px;padding:8px 14px;font-size:12px;font-weight:600;
  font-family:var(--sans);cursor:pointer;transition:.15s;white-space:nowrap;
}
.nav-auth-btn:hover{border-color:var(--indigo);color:var(--indigoHi);}
.nav-settings-btn{
  background:var(--raised);border:1px solid var(--border2);color:var(--textSub);
  border-radius:8px;padding:8px 11px;font-size:14px;cursor:pointer;transition:.15s;
}
.nav-settings-btn:hover{border-color:var(--indigo);color:var(--indigoHi);transform:rotate(20deg);}
.auth-field select{
  width:100%;background:var(--raised);border:1px solid var(--border2);border-radius:10px;
  padding:11px 14px;font-size:14px;color:var(--text);font-family:var(--sans);outline:none;
}
.auth-field select:focus{border-color:var(--indigo);}

/* ══ SETTINGS SCREEN ══ */
.settings-page-title{font-size:20px;font-weight:800;color:var(--heading);}
.settings-content{max-width:640px;margin:0 auto;padding:32px;}
.settings-section{
  background:var(--panel);border:1px solid var(--border);border-radius:16px;
  padding:24px;margin-bottom:20px;
}
.settings-section-title{font-size:15px;font-weight:700;color:var(--heading);margin-bottom:6px;}
.settings-section-desc{font-size:13px;color:var(--textSub);line-height:1.5;margin-bottom:16px;}
.settings-note{font-size:11px;color:var(--textDim);line-height:1.5;margin-top:6px;}
.settings-toggle-row{display:flex;gap:10px;}
.settings-opt-btn{
  flex:1;background:var(--raised);border:1px solid var(--border2);color:var(--textSub);
  border-radius:10px;padding:12px 0;font-size:13px;font-weight:600;font-family:var(--sans);
  cursor:pointer;transition:.15s;
}
.settings-opt-btn:hover{border-color:var(--indigo);color:var(--text);}
.settings-opt-btn.active{background:var(--indigoLo);border-color:var(--indigo);color:var(--indigoHi);}

/* ══ AUTH MODAL ══ */
.auth-modal{position:fixed;inset:0;background:rgba(5,5,8,.93);z-index:7500;display:none;align-items:center;justify-content:center;backdrop-filter:blur(8px);}
.auth-modal.show{display:flex;}
.auth-card{
  position:relative;background:var(--panel);border:1px solid var(--border2);border-radius:20px;
  padding:36px;max-width:380px;width:90%;box-shadow:0 24px 80px rgba(0,0,0,.6);animation:fadeUp .3s ease;
}
.auth-close{position:absolute;top:16px;right:16px;background:none;border:none;color:var(--textSub);font-size:16px;cursor:pointer;}
.auth-close:hover{color:var(--text);}
.auth-title{font-size:20px;font-weight:900;color:var(--heading);margin-bottom:6px;}
.auth-sub{font-size:13px;color:var(--textSub);line-height:1.5;margin-bottom:22px;}
.auth-field{margin-bottom:14px;}
.auth-field label{display:block;font-size:11px;font-weight:700;color:var(--textSub);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px;}
.auth-field input{
  width:100%;background:var(--raised);border:1px solid var(--border2);border-radius:10px;
  padding:11px 14px;font-size:14px;color:var(--text);font-family:var(--sans);outline:none;
}
.auth-field input:focus{border-color:var(--indigo);}
.auth-error{font-size:12px;color:var(--red);min-height:16px;margin-bottom:10px;line-height:1.5;}
.auth-submit{
  background:linear-gradient(135deg,var(--indigo),var(--indigoHi));border:none;color:#fff;
  border-radius:10px;padding:12px 28px;font-size:14px;font-weight:700;width:100%;
  box-shadow:0 0 20px rgba(99,102,241,.3);cursor:pointer;
}
.auth-submit:hover{box-shadow:0 0 32px rgba(99,102,241,.5);}
.settings-account-btn{width:auto;padding:10px 24px;}
.auth-submit:disabled{opacity:.5;cursor:not-allowed;}
.auth-toggle{text-align:center;margin-top:16px;font-size:12px;color:var(--textSub);}
.auth-toggle button{background:none;border:none;color:var(--indigoHi);font-weight:700;font-size:12px;cursor:pointer;margin-left:4px;}
.auth-toggle button:hover{text-decoration:underline;}
.nav-stat{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--textSub);font-family:var(--mono);}
.nav-stat strong{color:var(--text);font-weight:700;}
.nav-xp-pill{
  background:var(--indigoLo);border:1px solid var(--indigo);
  border-radius:20px;padding:4px 12px;
  font-size:12px;font-family:var(--mono);font-weight:700;color:var(--indigoHi);
  display:flex;align-items:center;gap:6px;
}

.hero{
  padding:80px 32px 60px;max-width:1180px;margin:0 auto;
  display:grid;grid-template-columns:1fr 360px;gap:60px;align-items:center;
}
@media(max-width:800px){.hero{grid-template-columns:1fr;}.hero-visual{display:none;}}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--indigoLo);border:1px solid var(--indigo);
  border-radius:20px;padding:5px 14px;font-size:11px;
  font-family:var(--mono);color:var(--indigoHi);font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;margin-bottom:24px;
}
.hero-eyebrow-dot{width:6px;height:6px;border-radius:50%;background:var(--green);animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.4;transform:scale(.8);}}
.hero h1{
  font-size:52px;font-weight:900;line-height:1.04;
  letter-spacing:-.04em;color:var(--heading);margin-bottom:16px;
}
.hero h1 em{font-style:normal;color:transparent;background:linear-gradient(135deg,var(--indigo) 0%,var(--indigoHi) 50%,var(--green) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.hero-desc{color:var(--textSub);font-size:16px;line-height:1.7;margin-bottom:32px;max-width:480px;}

.hero-cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:32px;}
.btn-primary{
  background:linear-gradient(135deg,var(--indigo),var(--indigoHi));
  border:none;color:#fff;border-radius:10px;padding:12px 24px;
  font-size:14px;font-weight:700;letter-spacing:.02em;
  box-shadow:0 0 24px rgba(99,102,241,.3);
}
.btn-primary:hover{box-shadow:0 0 36px rgba(99,102,241,.5);transform:translateY(-1px);}
.btn-secondary{
  background:var(--raised);border:1px solid var(--border2);
  color:var(--text);border-radius:10px;padding:12px 24px;
  font-size:14px;font-weight:600;
}
.btn-secondary:hover{border-color:var(--indigo);color:var(--indigoHi);}

.hero-tags{display:flex;gap:8px;flex-wrap:wrap;}
.hero-tag{
  background:var(--surface);border:1px solid var(--border);
  border-radius:6px;padding:3px 10px;font-size:11px;
  color:var(--textSub);font-family:var(--mono);
}

/* HERO VISUAL — terminal card */
.hero-visual{
  background:var(--surface);border:1px solid var(--border);
  border-radius:16px;overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,.5);
}
.terminal-bar{
  background:var(--panel);padding:10px 16px;
  display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--border);
}
.t-dot{width:10px;height:10px;border-radius:50%;}
.terminal-title{font-family:var(--mono);font-size:11px;color:var(--textSub);margin-left:6px;}
.terminal-body{padding:20px;font-family:var(--mono);font-size:12.5px;line-height:1.8;}
.t-comment{color:var(--textSub);}
.t-keyword{color:var(--indigoHi);}
.t-fn{color:var(--green);}
.t-str{color:var(--amber);}
.t-num{color:var(--pink);}
.t-cursor{display:inline-block;width:8px;height:14px;background:var(--green);border-radius:1px;animation:blink .8s step-end infinite;vertical-align:middle;margin-left:2px;}
@keyframes blink{50%{opacity:0;}}

/* STATS ROW */
.stats-row{max-width:1180px;margin:0 auto 48px;padding:0 32px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
@media(max-width:700px){.stats-row{grid-template-columns:repeat(2,1fr);}}
@media(max-width:880px){.course-sidebar{display:none;}}
.stat-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:12px;padding:16px 20px;position:relative;overflow:hidden;
}
.stat-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--indigo),transparent);
  opacity:0;transition:.3s;
}
.stat-card:hover::before{opacity:1;}
.stat-num{font-size:28px;font-weight:900;color:var(--heading);font-family:var(--mono);margin-bottom:2px;}
.stat-label{font-size:11px;color:var(--textSub);font-weight:600;text-transform:uppercase;letter-spacing:.06em;}

/* XP BAR */
.xp-section{max-width:1180px;margin:0 auto 48px;padding:0 32px;}
.xp-header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px;}
.xp-rank{font-size:14px;font-weight:800;color:var(--heading);font-family:var(--mono);}
.xp-rank span{color:var(--indigoHi);}
.xp-next{font-size:12px;color:var(--textSub);font-family:var(--mono);}
.xp-track{height:8px;background:var(--raised);border-radius:4px;overflow:hidden;border:1px solid var(--border);}
.xp-fill{
  height:100%;background:linear-gradient(90deg,var(--indigo),var(--indigoHi),var(--green));
  border-radius:4px;transition:width .8s cubic-bezier(.4,0,.2,1);
  box-shadow:0 0 12px rgba(99,102,241,.5);
}
.xp-milestones{display:flex;justify-content:space-between;margin-top:6px;}
.xp-milestone{font-size:10px;color:var(--textDim);font-family:var(--mono);}

/* HOME LEFT RAIL + CLICK-TO-VIEW PANELS */
.home-content-row{max-width:1180px;margin:0 auto;padding:0 32px 60px;display:flex;gap:24px;align-items:flex-start;}
.home-left-rail{
  width:88px;flex-shrink:0;display:flex;flex-direction:column;gap:8px;
  position:sticky;top:24px;
}
.home-rail-btn{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  background:var(--panel);border:1px solid var(--border);border-radius:12px;
  padding:14px 4px;cursor:pointer;color:var(--textSub);font-family:var(--sans);
  transition:.15s;
}
.home-rail-btn:hover{border-color:var(--indigo);color:var(--text);}
.home-rail-btn.active{background:var(--indigoLo);border-color:var(--indigo);color:var(--indigoHi);}
.home-rail-btn .rail-icon{font-size:22px;line-height:1;}
.home-rail-btn .rail-label{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;}

.home-panel-area{flex:1;min-width:0;}
.home-panel-empty{
  display:flex;align-items:center;justify-content:center;min-height:220px;
  color:var(--textSub);font-size:13px;font-family:var(--mono);
  border:1px dashed var(--border2);border-radius:16px;
}
.home-panel{display:none;}
.home-panel.active{display:block;animation:fadeUp .25s ease;}
@media(max-width:700px){
  .home-content-row{flex-direction:column;}
  .home-left-rail{width:100%;flex-direction:row;position:static;}
  .home-rail-btn{flex:1;}
}

.tracks-section{min-width:0;}
.inventory-section{min-width:0;}
.inv-panel-card{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:20px;}
.levels-panel-card{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:20px;}
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;}
.section-title{font-size:11px;font-weight:700;color:var(--textSub);text-transform:uppercase;letter-spacing:.1em;font-family:var(--mono);}
.tracks-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;}

.track-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:16px;padding:24px;cursor:pointer;
  transition:all .2s;position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:0;
}
.track-card:hover{transform:translateY(-3px);background:var(--panel);}
.track-shine{
  position:absolute;top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.03),transparent);
  transition:left .4s;pointer-events:none;
}
.track-card:hover .track-shine{left:100%;}
.track-card-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:14px;}
.track-icon-wrap{
  width:48px;height:48px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;font-size:24px;
  border:1px solid var(--border);background:var(--raised);
}
.track-status{font-size:10px;font-family:var(--mono);font-weight:700;padding:3px 8px;border-radius:20px;letter-spacing:.05em;}
.track-title{font-size:17px;font-weight:800;color:var(--heading);margin-bottom:4px;}
.track-desc{font-size:12px;color:var(--textSub);line-height:1.55;margin-bottom:16px;flex:1;}
.track-tags{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:16px;}
.track-tag{font-size:10px;font-family:var(--mono);padding:2px 7px;border-radius:4px;font-weight:600;}
.track-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.track-prog-wrap{flex:1;}
.track-prog-meta{font-size:10px;color:var(--textDim);font-family:var(--mono);margin-bottom:4px;}
.track-prog-bar{height:3px;background:var(--raised);border-radius:2px;}
.track-prog-fill{height:100%;border-radius:2px;transition:width .6s;}
.track-lessons-badge{
  background:var(--raised);border:1px solid var(--border);
  border-radius:6px;padding:3px 8px;font-size:10px;
  font-family:var(--mono);color:var(--textSub);white-space:nowrap;flex-shrink:0;
}

/* ═══════════════════════════════════════════
   TRACK SCREEN
═══════════════════════════════════════════ */
#track{min-height:100vh;}
.track-page-header{
  padding:24px 32px;border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:50;
  background:var(--chromeBlur);backdrop-filter:blur(12px);
}
.track-page-header-inner{max-width:900px;margin:0 auto;}
.back-btn{
  background:none;border:none;color:var(--textSub);
  font-size:13px;padding:0;margin-bottom:12px;
  display:flex;align-items:center;gap:6px;font-family:var(--mono);
}
.back-btn:hover{color:var(--text);}
.track-page-meta{display:flex;align-items:center;gap:16px;}
.track-page-icon{font-size:36px;}
.track-page-title{font-size:24px;font-weight:900;color:var(--heading);}
.track-page-desc{font-size:13px;color:var(--textSub);margin-top:3px;}

.track-content{max-width:900px;margin:32px auto 80px;padding:0 32px;}

/* Level tabs */
.level-tabs{display:flex;gap:0;border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-bottom:28px;background:var(--surface);}
.level-tab{
  flex:1;padding:10px;text-align:center;background:none;border:none;
  font-size:12px;font-weight:600;color:var(--textSub);
  font-family:var(--mono);letter-spacing:.04em;
  border-right:1px solid var(--border);transition:all .15s;
  display:flex;align-items:center;justify-content:center;gap:6px;
}
.level-tab:last-child{border-right:none;}
.level-tab.active{background:var(--indigoLo);color:var(--indigoHi);}
.level-tab:hover:not(.active){background:var(--raised);color:var(--text);}
.level-pane{display:none;}.level-pane.active{display:block;}

.lesson-list{display:flex;flex-direction:column;gap:8px;}
.lesson-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:12px;padding:16px 20px;cursor:pointer;
  display:flex;align-items:center;gap:16px;transition:all .15s;
  position:relative;overflow:hidden;
}
.lesson-card:hover{background:var(--panel);border-color:var(--border2);}
.lesson-card.done{border-color:rgba(0,255,157,.2);}
.lesson-num-wrap{
  width:36px;height:36px;border-radius:10px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;font-family:var(--mono);
  border:1px solid var(--border2);background:var(--raised);color:var(--textSub);
}
.lesson-num-wrap.done{background:var(--greenBg);border-color:rgba(0,255,157,.3);color:var(--green);}
.lesson-num-wrap.project{background:var(--indigoLo);border-color:var(--indigo);color:var(--indigoHi);}
.lesson-info{flex:1;min-width:0;}
.lesson-card-title{font-size:14px;font-weight:700;color:#e0e0f8;display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:3px;}
.lesson-card-topic{font-size:11px;color:var(--textSub);line-height:1.45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tag-project{font-size:10px;background:var(--indigoLo);color:var(--indigoHi);border-radius:4px;padding:2px 7px;font-weight:700;font-family:var(--mono);}
.lesson-meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0;}
.lesson-xp-badge{font-size:11px;font-family:var(--mono);font-weight:700;padding:3px 8px;border-radius:6px;}
.lesson-time{font-size:10px;color:var(--textDim);font-family:var(--mono);}

/* Level progress card */
.level-progress-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:12px;padding:16px 20px;margin-bottom:20px;
  display:flex;align-items:center;gap:16px;
}
.lpc-icon{font-size:28px;}
.lpc-info{flex:1;}
.lpc-title{font-size:13px;font-weight:700;color:var(--heading);margin-bottom:2px;}
.lpc-sub{font-size:11px;color:var(--textSub);}
.lpc-bar{height:4px;background:var(--raised);border-radius:2px;margin-top:8px;}
.lpc-fill{height:100%;border-radius:2px;transition:width .5s;}

/* ═══════════════════════════════════════════
   LESSON SCREEN
═══════════════════════════════════════════ */
#lesson{height:100vh;display:flex;flex-direction:column;}

.lesson-bar{
  background:var(--surface);border-bottom:1px solid var(--border);
  padding:10px 16px;display:flex;align-items:center;gap:12px;flex-shrink:0;
}
.lb-back{background:none;border:none;color:var(--textSub);font-size:24px;padding:0 4px;line-height:1;}
.lb-back:hover{color:var(--text);}
.lb-info{flex:1;min-width:0;}
.lb-track{font-size:10px;font-family:var(--mono);font-weight:700;text-transform:uppercase;letter-spacing:.08em;}
.lb-title{font-size:14px;font-weight:700;color:var(--heading);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* Lesson progress bar */
.lesson-prog-bar{height:7px;background:transparent;flex-shrink:0;display:flex;gap:3px;padding:0 16px;}
.lp-seg{flex:1;height:100%;border-radius:4px;background:var(--border);position:relative;overflow:hidden;}
.lp-seg.done{background:linear-gradient(90deg,var(--indigo),var(--green));}
.lp-seg.active{background:linear-gradient(90deg,var(--indigo),var(--indigoHi));animation:lpSegPulse 1.6s ease-in-out infinite;}
@keyframes lpSegPulse{0%,100%{box-shadow:0 0 0 0 rgba(99,102,241,.5);}50%{box-shadow:0 0 8px 1px rgba(99,102,241,.7);}}

.lesson-body{flex:1;display:flex;overflow:hidden;}

/* ══ COURSE SIDEBAR ══ */
.course-sidebar{
  width:240px;flex-shrink:0;background:var(--surface);
  border-right:1px solid var(--border);display:flex;flex-direction:column;
  overflow:hidden;
}
.cs-header{padding:14px 16px 10px;border-bottom:1px solid var(--border);flex-shrink:0;}
.cs-header-title{font-size:12px;font-weight:700;color:var(--heading);margin-bottom:2px;}
.cs-header-xp{font-size:11px;color:var(--indigoHi);font-family:var(--mono);font-weight:700;}
.cs-sections{flex:1;overflow-y:auto;padding:10px 10px 6px;}
.cs-loading{color:var(--textSub);font-size:12px;padding:16px 6px;text-align:center;font-style:italic;}
.cs-section{
  display:flex;align-items:flex-start;gap:10px;padding:10px 10px;
  border-radius:10px;margin-bottom:4px;transition:.15s;cursor:default;
  border:1px solid transparent;
}
.cs-section.active{background:var(--indigoLo);border-color:rgba(99,102,241,.3);}
.cs-section.done{opacity:0.75;}
.cs-num{
  width:22px;height:22px;border-radius:7px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;font-family:var(--mono);
  background:var(--raised);border:1px solid var(--border2);color:var(--textSub);
  margin-top:1px;
}
.cs-num.done{background:var(--greenBg);border-color:rgba(0,255,157,.3);color:var(--green);animation:csNumPop .45s ease;}
@keyframes csNumPop{0%{transform:scale(.5);}50%{transform:scale(1.25);}100%{transform:scale(1);}}
.cs-num.active{background:var(--indigo);border-color:var(--indigo);color:#fff;}
.cs-section-info{flex:1;min-width:0;}
.cs-section-name{font-size:12px;font-weight:600;color:var(--headingSoft);line-height:1.4;margin-bottom:3px;}
.cs-section.active .cs-section-name{color:var(--heading);}
.cs-section-xp{font-size:10px;font-family:var(--mono);font-weight:700;color:var(--textDim);}
.cs-section.active .cs-section-xp{color:var(--indigoHi);}
.cs-section.done .cs-section-xp{color:var(--green);}
.cs-bit-card{
  padding:12px 14px;border-top:1px solid var(--border);
  display:flex;align-items:center;gap:10px;flex-shrink:0;background:var(--panel);
}
.cs-bit-img{width:38px;height:38px;object-fit:contain;flex-shrink:0;}
.cs-bit-info{flex:1;min-width:0;}
.cs-bit-level{font-size:11px;font-weight:700;color:var(--heading);margin-bottom:4px;}
.cs-bit-bar{height:5px;background:var(--raised);border-radius:3px;overflow:hidden;}
.cs-bit-fill{height:100%;background:linear-gradient(90deg,var(--indigo),var(--green));border-radius:3px;transition:width .6s;}

/* XP pop animation when a section completes */
.xp-pop{
  position:fixed;font-family:var(--mono);font-weight:800;font-size:16px;
  color:var(--green);pointer-events:none;z-index:9000;
  animation:xpPopAnim 1.4s ease forwards;
}
@keyframes xpPopAnim{
  0%{opacity:0;transform:translateY(0) scale(.7);}
  15%{opacity:1;transform:translateY(-10px) scale(1.1);}
  75%{opacity:1;transform:translateY(-40px) scale(1);}
  100%{opacity:0;transform:translateY(-55px) scale(.9);}
}

/* ══ LEVEL UP MODAL ══ */
#levelUpModal{
  position:fixed;inset:0;background:rgba(5,5,8,.9);z-index:9500;
  display:none;align-items:center;justify-content:center;backdrop-filter:blur(6px);
}
#levelUpModal.show{display:flex;}
.lu-card{
  background:var(--panel);border:1px solid var(--indigo);border-radius:20px;
  padding:36px;max-width:380px;width:90%;text-align:center;
  box-shadow:0 0 60px rgba(99,102,241,.4);animation:fadeUp .3s ease;
}
.lu-burst{font-size:13px;color:var(--green);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-family:var(--mono);margin-bottom:10px;}
.lu-level{font-size:42px;font-weight:900;color:var(--heading);margin-bottom:6px;}
.lu-name{font-size:16px;color:var(--indigoHi);font-weight:700;margin-bottom:18px;}
.lu-reward-card{
  background:var(--raised);border:1px solid var(--border2);border-radius:14px;
  padding:18px;margin-bottom:18px;display:flex;align-items:center;gap:14px;text-align:left;
}
.lu-reward-icon{font-size:32px;flex-shrink:0;}
.lu-reward-text strong{display:block;color:var(--heading);font-size:14px;margin-bottom:2px;}
.lu-reward-text span{font-size:12px;color:var(--textSub);}
.lu-mystery{background:linear-gradient(135deg,var(--indigoLo),var(--panel));border:1px dashed var(--indigo);}
.lu-outfit-reveal{
  flex-direction:column;align-items:center;gap:10px;
  background:linear-gradient(135deg,var(--indigoLo),var(--panel));
  border:1px solid var(--indigo);box-shadow:0 0 30px rgba(99,102,241,.25);
}
.lu-outfit-img{width:140px;height:auto;object-fit:contain;filter:drop-shadow(0 4px 20px rgba(99,102,241,.5));}
.lu-close-btn{
  background:linear-gradient(135deg,var(--indigo),var(--indigoHi));border:none;color:#fff;
  border-radius:10px;padding:12px 28px;font-size:14px;font-weight:700;width:100%;
}

/* ══ INVENTORY PANE ══ */
.inv-header{font-size:13px;font-weight:700;color:var(--heading);margin-bottom:4px;}
.inv-sub{font-size:11px;color:var(--textSub);margin-bottom:18px;}
.inv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:10px;}
.inv-item{
  background:var(--surface);border:1px solid var(--border);border-radius:12px;
  padding:14px 10px;text-align:center;
}
.inv-item.equipped{border-color:var(--green);box-shadow:0 0 0 1px rgba(0,255,157,.2) inset;}
.inv-item-icon{font-size:28px;margin-bottom:6px;}
.inv-item-name{font-size:11px;font-weight:600;color:var(--headingSoft);line-height:1.3;}
.inv-item-level{font-size:9px;color:var(--textDim);font-family:var(--mono);margin-top:3px;}
.inv-equip-btn{
  margin-top:9px;width:100%;border-radius:7px;padding:5px 0;font-size:10px;font-weight:700;
  border:1px solid var(--border2);background:var(--raised);color:var(--textSub);
  font-family:var(--sans);letter-spacing:.02em;
}
.inv-equip-btn:hover{border-color:var(--indigo);color:var(--indigoHi);}
.inv-equip-btn.is-equipped{background:var(--greenBg);border-color:var(--green);color:var(--green);}
.inv-slot-label{font-size:10px;font-weight:700;color:var(--textSub);text-transform:uppercase;letter-spacing:.06em;margin:18px 0 8px;}
.inv-slot-label:first-of-type{margin-top:14px;}

/* Live Bit preview — shows the actual outfit + equipped accessory artwork */
.bit-preview-wrap{position:relative;width:100%;max-width:200px;margin:0 auto 18px;}
.bit-preview-img{width:100%;display:block;}
.bit-acc-layer{position:absolute;inset:0;pointer-events:none;}
.bit-acc-item{position:absolute;transform:translate(-50%,-50%);}
.bit-acc-item svg{width:100%;display:block;overflow:visible;filter:drop-shadow(0 2px 4px rgba(0,0,0,.35));}
.inv-empty{color:var(--textSub);font-size:13px;text-align:center;padding:30px 10px;}
.inv-outfit-item{padding:12px 8px 10px;}
.inv-outfit-thumb{width:100%;max-width:90px;height:auto;object-fit:contain;margin-bottom:6px;}

/* ══ PROGRESSION PANE ══ */
.prog-header{font-size:13px;font-weight:700;color:var(--heading);margin-bottom:4px;}
.prog-sub{font-size:11px;color:var(--textSub);margin-bottom:18px;}
.prog-row{
  display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;
  margin-bottom:0;border:1px solid transparent;
}
.prog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px;}
.prog-row.current{background:var(--indigoLo);border-color:rgba(99,102,241,.3);}
.prog-row.passed{opacity:.6;}
.prog-lvl-badge{
  width:32px;height:32px;border-radius:8px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;font-family:var(--mono);
  background:var(--raised);border:1px solid var(--border2);color:var(--textSub);
}
.prog-row.passed .prog-lvl-badge{background:var(--greenBg);border-color:rgba(0,255,157,.3);color:var(--green);}
.prog-row.current .prog-lvl-badge{background:var(--indigo);border-color:var(--indigo);color:#fff;}
.prog-info{flex:1;min-width:0;}
.prog-name{font-size:12px;font-weight:600;color:var(--headingSoft);}
.prog-xp-req{font-size:10px;color:var(--textDim);font-family:var(--mono);}
.prog-reward-tag{
  font-size:10px;font-weight:700;padding:3px 9px;border-radius:20px;
  font-family:var(--mono);flex-shrink:0;white-space:nowrap;
}
.prog-reward-tag.outfit{background:linear-gradient(135deg,var(--indigoLo),#2a1a50);color:var(--indigoHi);border:1px dashed var(--indigo);}
.prog-reward-tag.accessory{background:var(--amberBg);color:var(--amber);}


/* EDITOR PANEL */
.editor-panel{
  width:380px;flex-shrink:0;border-right:1px solid var(--border);
  display:flex;flex-direction:column;background:var(--deep);
}
.editor-titlebar{
  padding:8px 14px;background:var(--surface);border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:8px;flex-shrink:0;
}
.editor-titlebar-dots{display:flex;gap:5px;}
.e-dot{width:10px;height:10px;border-radius:50%;}
.editor-lang-select{
  margin-left:auto;background:var(--raised);border:1px solid var(--border);
  color:var(--textSub);border-radius:5px;padding:2px 7px;font-size:11px;
  font-family:var(--mono);outline:none;cursor:pointer;
}
#codeEditor{
  flex:1;background:transparent;border:none;color:#c9d1d9;
  padding:16px;font-size:13px;font-family:var(--mono);
  resize:none;outline:none;line-height:1.8;tab-size:2;
  caret-color:var(--green);
}
#runOutput{
  background:#030308;border-top:1px solid var(--border);
  padding:10px 14px;font-family:var(--mono);font-size:12px;
  max-height:120px;overflow-y:auto;display:none;white-space:pre-wrap;
  flex-shrink:0;
}
#runOutput.show{display:block;}
.editor-footer{display:flex;border-top:1px solid var(--border);flex-shrink:0;}
.editor-footer button{
  flex:1;padding:9px;font-size:12px;font-weight:700;border:none;
  cursor:pointer;font-family:var(--mono);letter-spacing:.03em;transition:.15s;
}
#runBtn{background:#03180f;color:var(--green);}
#runBtn:hover{background:#052510;}
#submitBtn{background:var(--indigoLo);color:var(--indigoHi);border-left:1px solid var(--border);}
#submitBtn:hover{background:#2a2a60;}

/* CHAT AREA */
.chat-area{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;}

.lesson-right-rail{
  width:62px;flex-shrink:0;background:var(--panel);border-left:1px solid var(--border);
  display:flex;flex-direction:column;align-items:stretch;padding:14px 0;gap:2px;
}
.rail-btn{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  background:none;border:none;border-left:2px solid transparent;
  padding:11px 2px;cursor:pointer;color:var(--textSub);
  font-family:var(--sans);transition:.15s;
}
.rail-btn:hover{color:var(--text);background:var(--raised);}
.rail-btn.active{color:var(--indigoHi);background:var(--indigoLo);border-left-color:var(--indigo);}
.rail-icon{font-size:18px;line-height:1;}
.rail-label{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;}
.rail-divider{height:1px;background:var(--border);margin:8px 10px;flex-shrink:0;}
.rail-btn-done{color:var(--green);}
.rail-btn-done:hover{background:var(--greenBg);color:var(--green);}

#chatPane{flex:1;overflow-y:auto;padding:20px 20px 10px;display:flex;flex-direction:column;}
#chatPane.hidden{display:none;}
#notesPane{flex:1;background:var(--deep);border:none;color:var(--text);padding:20px;font-size:14px;resize:none;outline:none;line-height:1.75;display:none;font-family:var(--sans);}
#notesPane.active{display:block;}
#cheatPane{flex:1;overflow-y:auto;padding:16px 20px;display:none;}
#cheatPane.active{display:block;}
#roadmapPane{flex:1;overflow-y:auto;padding:16px 20px;display:none;}
#roadmapPane.active{display:block;}

/* MESSAGES */
.msg{margin-bottom:20px;display:flex;flex-direction:column;}
.msg.user{align-items:flex-end;}
.msg.assistant{align-items:flex-start;}
.msg-head{display:flex;align-items:center;gap:7px;margin-bottom:6px;}
.msg-avatar{
  width:24px;height:24px;border-radius:7px;
  background:linear-gradient(135deg,var(--indigo),var(--indigoHi));
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-family:var(--mono);color:#fff;font-weight:700;
}
.msg-name{font-size:11px;color:var(--indigoHi);font-weight:700;font-family:var(--mono);}
.msg-time{font-size:10px;color:var(--textDim);font-family:var(--mono);}
.msg-bubble{max-width:95%;padding:14px 18px;font-size:14px;line-height:1.75;}
.msg-bubble.user{
  background:var(--indigoLo);border:1px solid rgba(99,102,241,.3);
  border-radius:16px 16px 4px 16px;color:var(--text);white-space:pre-wrap;word-break:break-word;
}
.msg-bubble.assistant{
  background:var(--panel);border:1px solid var(--border);
  border-radius:4px 16px 16px 16px;color:var(--text);
}

/* In-chat checkpoint banner — turns the conversation into visible chapters */
.section-banner{
  display:flex;align-items:center;gap:10px;margin:16px 0;padding:11px 16px;
  background:var(--greenBg);border:1px solid rgba(0,255,157,.3);border-radius:12px;
  animation:sectionBannerIn .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes sectionBannerIn{0%{opacity:0;transform:scale(.92) translateY(6px);}100%{opacity:1;transform:scale(1) translateY(0);}}
.section-banner-check{
  width:24px;height:24px;border-radius:50%;background:var(--green);color:#05140d;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex-shrink:0;
}
.section-banner-text{flex:1;font-size:13px;color:var(--green);font-weight:600;}
.section-banner-text strong{color:var(--heading);}
.section-banner-xp{font-family:var(--mono);font-weight:800;font-size:12px;color:var(--green);flex-shrink:0;}

/* TYPING */
#typingIndicator{display:none;align-items:center;gap:8px;margin-bottom:16px;}
#typingIndicator.show{display:flex;}
.typing-wrap{background:var(--panel);border:1px solid var(--border);border-radius:4px 14px 14px 14px;padding:12px 16px;display:flex;gap:4px;align-items:center;}
.t-dot-anim{width:6px;height:6px;border-radius:50%;background:var(--indigo);animation:tdot 1.3s ease-in-out infinite;}
.t-dot-anim:nth-child(2){animation-delay:.15s;}
.t-dot-anim:nth-child(3){animation-delay:.3s;}
@keyframes tdot{0%,70%,100%{transform:translateY(0);opacity:.3;}35%{transform:translateY(-5px);opacity:1;}}

/* QUIZ */
#quizPanel{
  background:var(--panel);border:1px solid var(--border2);
  border-radius:14px;padding:20px;margin-bottom:16px;max-width:95%;display:none;
}
#quizPanel.show{display:block;animation:fadeUp .2s ease;}
.quiz-tag{font-size:10px;color:var(--indigoHi);font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px;font-family:var(--mono);}
.quiz-q{font-weight:700;font-size:14px;color:var(--heading);margin-bottom:16px;line-height:1.55;}
.quiz-opts{display:flex;flex-direction:column;gap:8px;}
.quiz-opt{
  background:var(--raised);border:1px solid var(--border2);color:var(--text);
  border-radius:8px;padding:10px 14px;text-align:left;font-size:13px;
  font-family:inherit;transition:all .12s;cursor:pointer;
}
.quiz-opt:hover:not(:disabled){border-color:var(--indigo);background:var(--indigoLo);color:var(--indigoHi);}
.quiz-opt.correct{background:var(--greenBg);border-color:rgba(0,255,157,.3);color:var(--green);animation:quizCorrectPop .4s ease;}
.quiz-opt.wrong{background:var(--redBg);border-color:rgba(248,113,113,.3);color:var(--red);animation:quizWrongShake .4s ease;}
@keyframes quizCorrectPop{0%{transform:scale(1);}40%{transform:scale(1.04);}100%{transform:scale(1);}}
@keyframes quizWrongShake{0%,100%{transform:translateX(0);}25%{transform:translateX(-6px);}50%{transform:translateX(5px);}75%{transform:translateX(-3px);}}
.quiz-exp{margin-top:14px;padding:12px 14px;border-radius:8px;font-size:13px;line-height:1.65;display:none;}
.quiz-exp.show{display:block;}
.quiz-footer{margin-top:12px;display:flex;gap:8px;}
.quiz-footer button{
  background:var(--raised);border:1px solid var(--border2);color:var(--text);
  border-radius:7px;padding:7px 14px;font-size:12px;font-weight:600;
  font-family:var(--mono);
}
.quiz-footer button:hover{border-color:var(--indigo);color:var(--indigoHi);}

/* QUICK PROMPTS */
.quick-row{
  padding:8px 16px 6px;display:flex;gap:6px;flex-wrap:wrap;
  background:var(--void);border-top:1px solid var(--border);flex-shrink:0;
}
.q-btn{
  background:var(--surface);border:1px solid var(--border);
  color:var(--textSub);border-radius:20px;padding:4px 12px;
  font-size:11px;font-weight:500;transition:all .12s;
}
.q-btn:hover{border-color:var(--indigo);color:var(--indigoHi);}

/* INPUT BAR */
.input-zone{padding:10px 14px;background:var(--void);flex-shrink:0;}
.input-wrap{
  display:flex;gap:8px;background:var(--surface);
  border:1px solid var(--border2);border-radius:12px;
  padding:4px 4px 4px 14px;align-items:flex-end;transition:.15s;
}
.input-wrap:focus-within{border-color:var(--indigo);box-shadow:0 0 0 3px rgba(99,102,241,.1);}
#msgInput{
  flex:1;background:none;border:none;color:var(--text);font-size:14px;
  resize:none;outline:none;padding:8px 0;line-height:1.5;
  max-height:100px;min-height:36px;
}
#msgInput::placeholder{color:var(--textDim);}
#sendBtn{
  background:linear-gradient(135deg,var(--indigo),var(--indigoHi));
  border:none;color:#fff;border-radius:9px;width:36px;height:36px;
  font-size:16px;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;box-shadow:0 0 12px rgba(99,102,241,.3);
}
#sendBtn:hover{box-shadow:0 0 20px rgba(99,102,241,.5);}
#sendBtn:disabled{background:var(--raised);color:var(--textDim);cursor:not-allowed;box-shadow:none;}

/* CHEAT SHEET */
.csheet-section{margin-bottom:24px;}
.csheet-section-title{
  font-size:11px;font-weight:700;color:var(--indigoHi);
  text-transform:uppercase;letter-spacing:.08em;font-family:var(--mono);
  margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid var(--border);
}
.cs-item{
  background:var(--surface);border:1px solid var(--border);
  border-radius:8px;padding:9px 12px;margin-bottom:6px;display:flex;align-items:flex-start;gap:10px;
}
.cs-cmd{
  font-family:var(--mono);font-size:12px;color:var(--amber);
  flex-shrink:0;min-width:180px;
}
.cs-desc{font-size:12px;color:var(--textSub);line-height:1.5;}

/* ROADMAP */
.roadmap-item{
  display:flex;gap:14px;margin-bottom:4px;position:relative;
}
.roadmap-item:not(:last-child)::after{
  content:'';position:absolute;left:17px;top:36px;bottom:-4px;
  width:1px;background:var(--border);
}
.roadmap-dot{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;font-family:var(--mono);
  border:2px solid var(--border);background:var(--raised);color:var(--textSub);
  position:relative;z-index:1;
}
.roadmap-dot.done{background:var(--greenBg);border-color:rgba(0,255,157,.4);color:var(--green);}
.roadmap-dot.current{background:var(--indigoLo);border-color:var(--indigo);color:var(--indigoHi);box-shadow:0 0 16px rgba(99,102,241,.3);}
.roadmap-content{flex:1;padding-bottom:16px;}
.roadmap-title{font-size:14px;font-weight:700;color:#e0e0f8;margin-bottom:2px;}
.roadmap-meta{font-size:11px;color:var(--textSub);font-family:var(--mono);}

/* MARKDOWN */
.md-code{margin:14px 0;border-radius:10px;overflow:hidden;border:1px solid var(--border2);}
.md-code-head{
  background:#070714;padding:7px 14px;font-size:11px;color:var(--indigoHi);
  font-family:var(--mono);border-bottom:1px solid var(--border2);
  display:flex;align-items:center;justify-content:space-between;
  letter-spacing:.06em;
}
.md-copy{
  background:var(--raised);border:none;color:var(--textSub);
  border-radius:4px;padding:2px 8px;font-size:10px;cursor:pointer;
  font-family:var(--mono);
}
.md-copy:hover{color:var(--text);}
.md-code-body{
  background:#060612;margin:0;padding:14px 18px;overflow-x:auto;
  font-size:12.5px;line-height:1.8;color:#c9d1d9;font-family:var(--mono);
}
.md-ic{background:#131326;color:var(--amber);border-radius:4px;padding:1px 6px;font-size:12.5px;font-family:var(--mono);}
.md-h1{font-size:18px;font-weight:800;color:var(--heading);margin:20px 0 10px;}
.md-h2{font-size:15px;font-weight:700;color:var(--heading);margin:16px 0 8px;}
.md-h3{font-size:14px;font-weight:700;color:var(--indigoHi);margin:12px 0 6px;}
.md-li{padding-left:16px;margin-bottom:3px;}
.md-li-dot{color:var(--indigo);margin-right:8px;}
.md-num-li{padding-left:16px;margin-bottom:3px;}
.md-bq{border-left:3px solid var(--indigo);padding:8px 14px;background:var(--indigoLo);border-radius:0 8px 8px 0;margin:10px 0;font-size:13px;color:var(--indigoHi);}
.md-hr{border:none;border-top:1px solid var(--border2);margin:14px 0;}
.md-sp{height:8px;}
.md-strong{color:var(--heading);font-weight:700;}
.md-em{color:#b0b0d8;font-style:italic;}

/* ACHIEVEMENT TOAST */
.achievement-toast{
  position:fixed;bottom:30px;right:20px;
  background:var(--panel);border:1px solid rgba(0,255,157,.3);
  border-radius:14px;padding:16px 20px;z-index:9997;
  display:none;flex-direction:column;gap:6px;
  box-shadow:0 8px 40px rgba(0,0,0,.6);min-width:260px;
}
.achievement-toast.show{display:flex;animation:slideInRight .3s ease;}
@keyframes slideInRight{from{opacity:0;transform:translateX(30px);}to{opacity:1;transform:translateX(0);}}
.at-label{font-size:10px;color:var(--green);font-family:var(--mono);font-weight:700;text-transform:uppercase;letter-spacing:.08em;}
.at-title{font-size:15px;font-weight:800;color:var(--heading);}
.at-xp{font-size:12px;color:var(--indigoHi);font-family:var(--mono);}

/* ══ BIT THE CAT MASCOT ══ */
#bit-container{position:fixed;bottom:24px;right:24px;z-index:8000;display:flex;flex-direction:column;align-items:flex-end;gap:8px;user-select:none;}
/* During a lesson, keep Bit out of the way of the chat input at the bottom — float him near the top-right instead, just under the lesson header */
/* Bottom-right, clear of the input box below and the action rail beside it */
body.in-lesson #bit-container{bottom:80px;right:80px;top:auto;}
#bit-bubble{background:var(--panel);border:1px solid var(--border2);border-radius:14px 14px 4px 14px;padding:12px 16px;max-width:240px;font-size:13px;line-height:1.55;color:var(--text);box-shadow:0 8px 32px rgba(0,0,0,.5);display:none;position:relative;}
#bit-bubble.show{display:block;animation:bitPop .2s cubic-bezier(.34,1.56,.64,1);}
@keyframes bitPop{from{opacity:0;transform:scale(.8) translateY(8px);}to{opacity:1;transform:scale(1) translateY(0);}}
#bit-bubble .bit-close{position:absolute;top:6px;right:8px;background:none;border:none;color:var(--textSub);font-size:14px;padding:0;cursor:pointer;}
#bit-bubble .bit-close:hover{color:var(--text);}
#bit-cat img, #bit-cat{width:68px;height:68px;cursor:pointer;filter:drop-shadow(0 4px 16px rgba(99,102,241,.4));transition:transform .2s;flex-shrink:0;}
#bit-cat:hover{transform:scale(1.1);}
#bit-cat.bounce{animation:bitBounce .5s ease;}
@keyframes bitBounce{0%,100%{transform:scale(1);}30%{transform:scale(1.15) translateY(-6px);}60%{transform:scale(.95) translateY(2px);}}
.bit-tip{position:fixed;background:var(--panel);border:1px solid var(--indigo);border-radius:10px;padding:9px 13px;font-size:12px;color:var(--text);line-height:1.5;max-width:190px;z-index:8100;pointer-events:none;animation:tipFade 2.6s ease forwards;font-family:var(--mono);}
@keyframes tipFade{0%{opacity:0;transform:translateY(4px);}15%{opacity:1;transform:translateY(0);}75%{opacity:1;}100%{opacity:0;}}

/* Equipped-accessory badges overlaid on Bit's avatar */
.bit-avatar-wrap{position:relative;display:inline-block;}
.bit-idle-float{animation:bitIdle 3.4s ease-in-out infinite;}
@keyframes bitIdle{0%,100%{transform:translateY(0) rotate(0deg);}50%{transform:translateY(-5px) rotate(-1.8deg);}}
@media (prefers-reduced-motion: reduce){
  .bit-idle-float{animation:none;}
}
.bit-badges{position:absolute;bottom:-3px;left:50%;transform:translateX(-50%);display:flex;gap:2px;pointer-events:none;}
.bit-badge{
  font-size:11px;line-height:1;background:var(--panel);border:1px solid var(--border2);
  border-radius:50%;width:18px;height:18px;display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.5);
}
.cs-bit-avatar-wrap .bit-badges{bottom:-2px;gap:1px;}
.cs-bit-avatar-wrap .bit-badge{width:13px;height:13px;font-size:8px;border-width:1px;}

.voice-toggle-btn{
  position:absolute;top:-4px;right:-4px;width:22px;height:22px;border-radius:50%;
  background:var(--panel);border:1px solid var(--border2);color:var(--text);
  font-size:11px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.4);padding:0;
}
.voice-toggle-btn:hover{border-color:var(--indigo);}

.msg-speak-btn{
  margin-left:auto;background:none;border:none;color:var(--textDim);
  font-size:12px;cursor:pointer;padding:2px 4px;border-radius:6px;
}
.msg-speak-btn:hover{color:var(--indigoHi);background:var(--raised);}

/* ══ ONBOARDING ══ */
#onboarding{position:fixed;inset:0;background:rgba(5,5,8,.93);z-index:7000;display:none;align-items:center;justify-content:center;backdrop-filter:blur(8px);}
#onboarding.show{display:flex;}
.ob-card{background:var(--panel);border:1px solid var(--border2);border-radius:20px;padding:40px;max-width:460px;width:90%;text-align:center;box-shadow:0 24px 80px rgba(0,0,0,.6);animation:fadeUp .3s ease;}
.ob-bit{margin:0 auto 18px;display:block;}
.ob-step{font-size:11px;color:var(--textSub);font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px;}
.ob-dots{display:flex;gap:6px;justify-content:center;margin-bottom:20px;}
.ob-dot{width:8px;height:8px;border-radius:50%;background:var(--border2);}
.ob-dot.active{background:var(--indigo);}
.ob-title{font-size:24px;font-weight:900;color:var(--heading);margin-bottom:10px;}
.ob-desc{font-size:14px;color:var(--textSub);line-height:1.65;margin-bottom:22px;}
.ob-choices{display:flex;flex-direction:column;gap:9px;margin-bottom:20px;text-align:left;}
.ob-choice{background:var(--raised);border:1px solid var(--border2);border-radius:10px;padding:11px 14px;cursor:pointer;font-size:13px;color:var(--text);transition:.15s;display:flex;align-items:center;gap:12px;}
.ob-choice:hover,.ob-choice.selected{border-color:var(--indigo);background:var(--indigoLo);color:var(--indigoHi);}
.ob-choice-icon{font-size:20px;flex-shrink:0;}
.ob-btn{background:linear-gradient(135deg,var(--indigo),var(--indigoHi));border:none;color:#fff;border-radius:10px;padding:12px 28px;font-size:14px;font-weight:700;width:100%;box-shadow:0 0 20px rgba(99,102,241,.3);}
.ob-btn:hover{box-shadow:0 0 32px rgba(99,102,241,.5);}
.ob-btn:disabled{opacity:.45;cursor:not-allowed;}
.ob-skip{background:none;border:none;color:var(--textSub);font-size:12px;margin-top:10px;cursor:pointer;}
.ob-skip:hover{color:var(--text);}


/* Bit image overrides */
img#bit-cat {
  width: 80px;
  height: 80px;
  cursor: pointer;
  border-radius: 16px;
  object-fit: cover;
  filter: drop-shadow(0 4px 20px rgba(99,102,241,.5));
  transition: transform .2s;
  flex-shrink: 0;
}
img#bit-cat:hover { transform: scale(1.1); }
img#bit-cat.bounce { animation: bitBounce .5s ease; }
img.ob-bit {
  width: 90px;
  height: 90px;
  border-radius: 16px;
  object-fit: cover;
  margin: 0 auto 18px;
  display: block;
  filter: drop-shadow(0 4px 16px rgba(99,102,241,.4));
}