/* WSC Scholar's Hub — Styles */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&family=Caveat:wght@500;600;700&family=Comfortaa:wght@700&display=swap');

:root {
  --cream: #FFF8EC; --cream2: #FFF3D9;
  --pink: #FFD6E7; --pink2: #FFB3D1; --pink3: #FF8FAB;
  --lavender: #DDD6FE; --lavender2: #C4B5FD;
  --blue: #BFDBFE; --blue2: #93C5FD;
  --yellow: #FEF08A; --yellow2: #FDE68A;
  --charcoal: #2D2A32; --muted: #6B7280; --white: #FFFFFF;
  --green: #86EFAC; --green2: #22C55E;
  --radius: 20px; --radius-lg: 28px;
  --shadow: 0 8px 32px rgba(45,42,50,0.08);
  --shadow2: 0 16px 48px rgba(45,42,50,0.12);
  --sidebar-w: 260px;
  --font: 'Nunito', system-ui, sans-serif;
  --font-head: 'Comfortaa', sans-serif;
  --font-hand: 'Caveat', cursive;
}

/* ===== COLOR THEMES (full tint — background + everything) ===== */
.theme-cherry { --cream: #FFF0F2; --cream2: #FFE4E8; --pink: #FECDD3; --pink2: #FDA4AF; --pink3: #E11D48; --white: #FFF5F6; --lavender: #FFE4E6; --lavender2: #FB7185; }
.theme-ocean { --cream: #EFF6FF; --cream2: #DBEAFE; --pink: #BFDBFE; --pink2: #93C5FD; --pink3: #2563EB; --white: #F0F7FF; --lavender: #DBEAFE; --lavender2: #60A5FA; }
.theme-mint { --cream: #ECFDF5; --cream2: #D1FAE5; --pink: #A7F3D0; --pink2: #6EE7B7; --pink3: #059669; --white: #F0FDF9; --lavender: #D1FAE5; --lavender2: #34D399; }
.theme-sunset { --cream: #FFF7ED; --cream2: #FFEDD5; --pink: #FED7AA; --pink2: #FDBA74; --pink3: #EA580C; --white: #FFFBF5; --lavender: #FFEDD5; --lavender2: #FB923C; }
.theme-grape { --cream: #FAF5FF; --cream2: #F3E8FF; --pink: #E9D5FF; --pink2: #D8B4FE; --pink3: #9333EA; --white: #FCF8FF; --lavender: #F3E8FF; --lavender2: #C084FC; }
.theme-lemon { --cream: #FEFCE8; --cream2: #FEF9C3; --pink: #FEF08A; --pink2: #FDE68A; --pink3: #CA8A04; --white: #FEFFF8; --lavender: #FEF9C3; --lavender2: #FACC15; }
.theme-blush { --cream: #FDF2F8; --cream2: #FCE7F3; --pink: #F9A8D4; --pink2: #F472B6; --pink3: #DB2777; --white: #FEF7FB; --lavender: #FCE7F3; --lavender2: #F472B6; }
.theme-forest { --cream: #ECFDF5; --cream2: #D1FAE5; --pink: #6EE7B7; --pink2: #34D399; --pink3: #047857; --white: #F0FDF9; --lavender: #D1FAE5; --lavender2: #10B981; }
.theme-candy { --cream: #FDF2F8; --cream2: #FCE7F3; --pink: #F9A8D4; --pink2: #A78BFA; --pink3: #C026D3; --white: #FEF7FB; --lavender: #F3E8FF; --lavender2: #A78BFA; }
.theme-sage { --cream: #F1F5F9; --cream2: #E2E8F0; --pink: #CBD5E1; --pink2: #94A3B8; --pink3: #475569; --white: #F8FAFC; --lavender: #E2E8F0; --lavender2: #94A3B8; }
.theme-rainbow { --cream: #F5F3FF; --cream2: #EDE9FE; --pink: #E9D5FF; --pink2: #C084FC; --pink3: #7C3AED; --white: #FAF8FF; --lavender: #EDE9FE; --lavender2: #818CF8; }
.theme-navy { --cream: #EFF6FF; --cream2: #DBEAFE; --pink: #93C5FD; --pink2: #60A5FA; --pink3: #1D4ED8; --white: #F0F7FF; --lavender: #DBEAFE; --lavender2: #3B82F6; }
.theme-slate { --cream: #F1F5F9; --cream2: #E2E8F0; --pink: #CBD5E1; --pink2: #94A3B8; --pink3: #1E293B; --white: #F8FAFC; --lavender: #E2E8F0; --lavender2: #64748B; }
.theme-emerald { --cream: #ECFDF5; --cream2: #D1FAE5; --pink: #6EE7B7; --pink2: #34D399; --pink3: #065F46; --white: #F0FDF9; --lavender: #D1FAE5; --lavender2: #10B981; }
.theme-steel { --cream: #F8FAFC; --cream2: #F1F5F9; --pink: #CBD5E1; --pink2: #94A3B8; --pink3: #334155; --white: #FAFBFC; --lavender: #F1F5F9; --lavender2: #64748B; }
.theme-midnight { --cream: #0F172A; --cream2: #1E293B; --pink: #1E293B; --pink2: #334155; --pink3: #818CF8; --white: #162032; --lavender: #1E293B; --lavender2: #6366F1; --charcoal: #E2E8F0; --muted: #94A3B8; }
.theme-crimson { --cream: #FEF2F2; --cream2: #FEE2E2; --pink: #FCA5A5; --pink2: #F87171; --pink3: #991B1B; --white: #FFFAFA; --lavender: #FEE2E2; --lavender2: #EF4444; }
.theme-teal { --cream: #F0FDFA; --cream2: #CCFBF1; --pink: #5EEAD4; --pink2: #2DD4BF; --pink3: #0F766E; --white: #F5FFFD; --lavender: #CCFBF1; --lavender2: #14B8A6; }
.theme-carbon { --cream: #F4F4F5; --cream2: #E4E4E7; --pink: #D4D4D8; --pink2: #A1A1AA; --pink3: #27272A; --white: #FAFAFA; --lavender: #E4E4E7; --lavender2: #71717A; }

[data-theme="dark"] {
  --cream: #1a1625; --cream2: #231e30;
  --pink: #3d2236; --pink2: #5c2d4e; --pink3: #ff6b9d;
  --lavender: #2d2640; --lavender2: #4a3d6b;
  --blue: #1e2a3a; --blue2: #2d4a6b;
  --yellow: #3d3520; --yellow2: #5c4f30;
  --charcoal: #e8e0f0; --muted: #9b8fb8; --white: #2a2438;
  --green: #1a3a2a; --green2: #34d399;
  --shadow: 0 8px 32px rgba(0,0,0,0.3);
  --shadow2: 0 16px 48px rgba(0,0,0,0.4);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--font); background: var(--cream); color: var(--charcoal); overflow-x: hidden; min-height: 100vh; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: var(--font); border: none; background: none; }
h1, h2, h3, h4 { font-family: var(--font-head); letter-spacing: -0.02em; }

/* ===== LOGIN SCREEN ===== */
.login-screen {
  min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(600px 400px at 20% 20%, rgba(255,214,231,0.55), transparent 60%),
    radial-gradient(700px 500px at 80% 30%, rgba(221,214,254,0.5), transparent 60%),
    radial-gradient(600px 400px at 50% 90%, rgba(254,240,138,0.35), transparent 60%);
  padding: 24px; text-align: center; position: relative;
}
.login-deco { position: absolute; inset: 0; pointer-events: none; }
.login-deco .float { position: absolute; font-size: 22px; animation: floaty 4s ease-in-out infinite; }
@keyframes floaty { 0%,100% { transform: translateY(0) rotate(var(--r,0deg)); } 50% { transform: translateY(-14px) rotate(var(--r,0deg)); } }
.login-title { font-size: clamp(36px, 6vw, 56px); margin-bottom: 8px; }
.login-title em { font-style: normal; background: linear-gradient(90deg, #FF8FAB, #C4B5FD, #93C5FD); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.login-sub { font-family: var(--font-hand); font-size: 22px; color: var(--pink3); margin-bottom: 40px; }
.login-cards { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; }
.login-card {
  background: var(--white); border: 1.5px solid rgba(45,42,50,0.06); border-radius: var(--radius-lg);
  padding: 32px 28px; width: 200px; text-align: center; cursor: pointer;
  transition: 0.3s cubic-bezier(.2,.8,.2,1); box-shadow: var(--shadow);
}
.login-card:hover { transform: translateY(-8px) rotate(1deg); box-shadow: var(--shadow2); }
.login-card .avatar { font-size: 48px; margin-bottom: 12px; }
.login-card h3 { font-size: 20px; margin-bottom: 8px; }
.login-card p { font-size: 13px; color: var(--muted); }
.login-card .cta { margin-top: 14px; font-size: 13px; font-weight: 800; color: var(--pink3); }

/* ===== APP SHELL ===== */
.app { display: none; min-height: 100vh; }
.app.active { display: flex; }
.login-screen.hidden { display: none; }

/* ===== SIDEBAR ===== */
.sidebar {
  width: var(--sidebar-w); height: 100vh; position: fixed; top: 0; left: 0; z-index: 40;
  background: var(--white); border-right: 1px solid rgba(45,42,50,0.06);
  display: flex; flex-direction: column; padding: 20px 0; overflow-y: auto;
  transition: transform 0.3s ease;
}
.sidebar-logo { padding: 0 20px 20px; font-family: var(--font-head); font-size: 18px; font-weight: 700; border-bottom: 1px solid rgba(45,42,50,0.06); }
.sidebar-logo span { color: var(--pink3); }
.sidebar-nav { flex: 1; padding: 12px 10px; display: flex; flex-direction: column; gap: 4px; }
.sidebar-nav a {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px;
  font-size: 14px; font-weight: 700; transition: 0.2s; color: var(--muted);
}
.sidebar-nav a:hover { background: var(--cream); color: var(--charcoal); }
.sidebar-nav a.active { background: var(--pink); color: var(--charcoal); font-weight: 800; }
.sidebar-nav a .icon { font-size: 18px; width: 24px; text-align: center; }
.sidebar-user { padding: 16px 20px; border-top: 1px solid rgba(45,42,50,0.06); display: flex; align-items: center; gap: 10px; }
.sidebar-user .avatar { font-size: 28px; }
.sidebar-user .info { font-size: 13px; font-weight: 700; }
.sidebar-user .info small { display: block; font-size: 11px; color: var(--muted); font-weight: 600; }
.sidebar-user .logout { margin-left: auto; font-size: 18px; opacity: 0.5; transition: 0.2s; }
.sidebar-user .logout:hover { opacity: 1; }
.mobile-toggle { display: none; position: fixed; top: 16px; left: 16px; z-index: 50; width: 44px; height: 44px; border-radius: 14px; background: var(--white); box-shadow: var(--shadow); align-items: center; justify-content: center; font-size: 20px; border: 1.5px solid rgba(45,42,50,0.06); }
@media (max-width: 768px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
  .mobile-toggle { display: flex; }
  .main { margin-left: 0 !important; }
}

/* ===== MAIN CONTENT ===== */
.main { margin-left: var(--sidebar-w); flex: 1; min-height: 100vh; padding: 32px; max-width: 1100px; }
@media (max-width: 768px) { .main { padding: 72px 16px 32px; } }

/* ===== VIEW TRANSITIONS ===== */
.view { display: none; animation: fadeUp 0.4s ease; }
.view.active { display: block; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ===== DASHBOARD ===== */
.dash-greeting { margin-bottom: 8px; }
.dash-greeting h1 { font-size: clamp(28px, 4vw, 36px); }
.dash-greeting .hand { font-family: var(--font-hand); font-size: 18px; color: var(--pink3); transform: rotate(-2deg); display: inline-block; margin-left: 8px; }
.dash-subtitle { color: var(--muted); font-size: 15px; margin-bottom: 28px; }

.dash-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 20px; margin-bottom: 28px; }
@media (max-width: 860px) { .dash-grid { grid-template-columns: 1fr; } }

.progress-circle-wrap {
  background: var(--white); border-radius: var(--radius-lg); padding: 28px;
  border: 1.5px solid rgba(45,42,50,0.06); box-shadow: var(--shadow);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.progress-circle { position: relative; width: 180px; height: 180px; margin-bottom: 16px; }
.progress-circle svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.progress-circle .bg { fill: none; stroke: var(--cream); stroke-width: 10; }
.progress-circle .fg { fill: none; stroke: var(--pink3); stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset 1s ease; }
.progress-circle .label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.progress-circle .pct { font-size: 36px; font-weight: 800; }
.progress-circle .pct-label { font-size: 12px; color: var(--muted); font-weight: 700; }

.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stat-card {
  background: var(--white); border-radius: var(--radius); padding: 18px;
  border: 1.5px solid rgba(45,42,50,0.06); text-align: center;
}
.stat-card .val { font-size: 24px; font-weight: 800; }
.stat-card .lbl { font-size: 12px; color: var(--muted); font-weight: 700; margin-top: 4px; }
.stat-card.streak .val { color: #F97316; }

.badge-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.badge {
  background: var(--yellow); border-radius: 999px; padding: 6px 14px;
  font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; gap: 6px;
}

.continue-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--charcoal); color: var(--white); padding: 14px 24px;
  border-radius: 999px; font-size: 15px; font-weight: 800;
  transition: 0.2s; margin-top: 20px;
}
.continue-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(45,42,50,0.2); }

/* ===== LEARN ===== */
.section-head { margin-bottom: 24px; }
.section-head h2 { font-size: clamp(24px, 3.5vw, 32px); margin-bottom: 6px; }
.section-head .hand { font-family: var(--font-hand); font-size: 16px; color: #8B7FE8; }
.section-head p { color: var(--muted); font-size: 14px; }

.module-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.module-card {
  background: var(--white); border-radius: var(--radius-lg); padding: 22px;
  border: 1.5px solid rgba(45,42,50,0.06); cursor: pointer;
  transition: 0.3s cubic-bezier(.2,.8,.2,1); position: relative; overflow: hidden;
}
.module-card:hover { transform: translateY(-4px); box-shadow: var(--shadow2); }
.module-card .mod-icon { font-size: 32px; margin-bottom: 10px; }
.module-card h3 { font-size: 17px; margin-bottom: 6px; }
.module-card p { font-size: 13px; color: var(--muted); line-height: 1.5; margin-bottom: 14px; }
.module-card .mod-bar { height: 6px; background: var(--cream); border-radius: 999px; overflow: hidden; }
.module-card .mod-bar .fill { height: 100%; border-radius: 999px; transition: width 0.6s ease; }
.module-card .mod-meta { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: var(--muted); font-weight: 700; }

/* Topic list */
.topic-list { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.topic-item {
  background: var(--white); border-radius: var(--radius); padding: 18px;
  border: 1.5px solid rgba(45,42,50,0.06); cursor: pointer;
  display: flex; align-items: center; gap: 14px; transition: 0.2s;
}
.topic-item:hover { transform: translateX(4px); box-shadow: var(--shadow); }
.topic-item .check { width: 28px; height: 28px; border-radius: 50%; border: 2px solid rgba(45,42,50,0.12); display: grid; place-items: center; font-size: 14px; flex-shrink: 0; }
.topic-item .check.done { background: var(--green2); border-color: var(--green2); color: white; }
.topic-item .t-info h4 { font-size: 15px; margin-bottom: 2px; }
.topic-item .t-info p { font-size: 12px; color: var(--muted); }

/* Lesson viewer */
.lesson-viewer { max-width: 720px; }
.lesson-back { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--muted); margin-bottom: 20px; cursor: pointer; transition: 0.2s; }
.lesson-back:hover { color: var(--charcoal); }
.lesson-header { margin-bottom: 28px; }
.lesson-header h1 { font-size: clamp(24px, 4vw, 32px); margin-bottom: 8px; }
.lesson-header .mod-tag { display: inline-block; background: var(--pink); padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 800; }

.lesson-section { margin-bottom: 28px; }
.lesson-section h3 { font-size: 18px; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.lesson-section p, .lesson-section li { font-size: 15px; line-height: 1.7; color: var(--charcoal); }
.lesson-section ul { padding-left: 20px; }
.lesson-section li { margin-bottom: 6px; }

.concept-card {
  background: var(--white); border-radius: var(--radius); padding: 18px;
  border: 1.5px solid rgba(45,42,50,0.06); margin-bottom: 10px;
}
.concept-card .term { font-weight: 800; font-size: 15px; color: var(--pink3); margin-bottom: 4px; }
.concept-card .def { font-size: 14px; line-height: 1.6; }

.discussion-card {
  background: linear-gradient(135deg, var(--lavender), var(--blue));
  border-radius: var(--radius); padding: 18px; margin-bottom: 10px;
}
.discussion-card .q-num { font-size: 12px; font-weight: 800; color: var(--muted); margin-bottom: 4px; }
.discussion-card p { font-size: 14px; line-height: 1.6; }

.complete-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--green2); color: white; padding: 14px 28px;
  border-radius: 999px; font-size: 15px; font-weight: 800;
  transition: 0.2s; margin-top: 16px;
}
.complete-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(34,197,94,0.3); }
.complete-btn.completed { background: var(--muted); pointer-events: none; }

.lesson-nav { display: flex; justify-content: space-between; margin-top: 28px; padding-top: 20px; border-top: 1px solid rgba(45,42,50,0.06); }
.lesson-nav button { padding: 10px 18px; border-radius: 999px; font-size: 13px; font-weight: 800; border: 1.5px solid rgba(45,42,50,0.08); transition: 0.2s; }
.lesson-nav button:hover { background: var(--cream); }

/* ===== FLASHCARDS ===== */
.flashcard-area { display: flex; flex-direction: column; align-items: center; }
.fc-progress { font-size: 14px; font-weight: 700; color: var(--muted); margin-bottom: 20px; }
.flashcard-container { perspective: 1000px; width: 100%; max-width: 500px; height: 300px; margin-bottom: 24px; cursor: pointer; }
.flashcard {
  width: 100%; height: 100%; position: relative;
  transform-style: preserve-3d; transition: transform 0.6s;
}
.flashcard.flipped { transform: rotateY(180deg); }
.flashcard-face {
  position: absolute; inset: 0; backface-visibility: hidden;
  background: var(--white); border-radius: var(--radius-lg);
  border: 1.5px solid rgba(45,42,50,0.06); box-shadow: var(--shadow);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 32px; text-align: center;
}
.flashcard-back { transform: rotateY(180deg); }
.flashcard-face .fc-label { font-size: 11px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 12px; }
.flashcard-face .fc-term { font-size: 22px; font-weight: 800; font-family: var(--font-head); }
.flashcard-face .fc-def { font-size: 16px; line-height: 1.6; }
.fc-actions { display: flex; gap: 14px; }
.fc-btn {
  padding: 14px 28px; border-radius: 999px; font-size: 14px; font-weight: 800;
  border: 1.5px solid rgba(45,42,50,0.08); transition: 0.2s;
}
.fc-btn:hover { transform: translateY(-2px); }
.fc-btn.know { background: var(--green2); color: white; border-color: var(--green2); }
.fc-btn.learning { background: var(--yellow); color: var(--charcoal); border-color: var(--yellow); }
.fc-empty { text-align: center; padding: 60px 20px; }
.fc-empty .big-emoji { font-size: 64px; margin-bottom: 16px; }
.fc-empty h3 { font-size: 22px; margin-bottom: 8px; }
.fc-empty p { color: var(--muted); }

/* ===== QUIZ ===== */
.quiz-header { margin-bottom: 24px; }
.quiz-header h2 { font-size: 24px; margin-bottom: 4px; }
.quiz-header .q-progress { font-size: 14px; color: var(--muted); font-weight: 700; }
.quiz-progress-bar { height: 8px; background: var(--cream); border-radius: 999px; overflow: hidden; margin-top: 12px; }
.quiz-progress-bar .fill { height: 100%; background: var(--pink3); border-radius: 999px; transition: width 0.4s ease; }
.quiz-question { background: var(--white); border-radius: var(--radius-lg); padding: 28px; border: 1.5px solid rgba(45,42,50,0.06); box-shadow: var(--shadow); margin-bottom: 20px; }
.quiz-question h3 { font-size: 18px; line-height: 1.5; margin-bottom: 20px; }
.quiz-options { display: flex; flex-direction: column; gap: 10px; }
.quiz-opt {
  padding: 14px 18px; border-radius: var(--radius); border: 1.5px solid rgba(45,42,50,0.08);
  font-size: 15px; text-align: left; transition: 0.2s; font-weight: 600;
}
.quiz-opt:hover { background: var(--cream); border-color: var(--pink2); }
.quiz-opt.correct { background: #DCFCE7; border-color: var(--green2); color: #166534; }
.quiz-opt.wrong { background: #FEE2E2; border-color: #EF4444; color: #991B1B; }
.quiz-opt.disabled { pointer-events: none; opacity: 0.6; }
.quiz-explanation { background: var(--cream); border-radius: var(--radius); padding: 16px; margin-top: 16px; font-size: 14px; line-height: 1.6; }
.quiz-next {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--charcoal); color: white; padding: 12px 24px;
  border-radius: 999px; font-size: 14px; font-weight: 800;
  margin-top: 16px; transition: 0.2s;
}
.quiz-next:hover { transform: translateY(-2px); }
.quiz-results { text-align: center; padding: 40px 20px; }
.quiz-results .score-circle { width: 140px; height: 140px; border-radius: 50%; border: 8px solid var(--green2); display: inline-flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 20px; }
.quiz-results .score-val { font-size: 36px; font-weight: 800; }
.quiz-results .score-lbl { font-size: 12px; color: var(--muted); }

/* ===== DAILY CHALLENGE ===== */
.daily-date { font-family: var(--font-hand); font-size: 20px; color: var(--pink3); margin-bottom: 4px; }
.daily-streak { font-size: 14px; font-weight: 700; margin-bottom: 20px; }
.daily-card {
  background: var(--white); border-radius: var(--radius-lg); padding: 24px;
  border: 1.5px solid rgba(45,42,50,0.06); margin-bottom: 14px;
}
.daily-card .dc-type { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 8px; }
.daily-card h3 { font-size: 16px; line-height: 1.5; }
.daily-card .dc-prompt { font-size: 14px; color: var(--muted); line-height: 1.6; margin-top: 8px; }

/* ===== PROGRESS ===== */
.progress-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 28px; }
.p-stat {
  background: var(--white); border-radius: var(--radius); padding: 18px; text-align: center;
  border: 1.5px solid rgba(45,42,50,0.06);
}
.p-stat .val { font-size: 28px; font-weight: 800; }
.p-stat .lbl { font-size: 12px; color: var(--muted); font-weight: 700; margin-top: 4px; }
.mastery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.mastery-item {
  background: var(--white); border-radius: 14px; padding: 14px; text-align: center;
  border: 1.5px solid rgba(45,42,50,0.06); font-size: 13px; font-weight: 700;
}
.mastery-item .mi-icon { font-size: 24px; margin-bottom: 6px; }
.mastery-item.not-started { opacity: 0.5; }
.mastery-item.in-progress { border-color: var(--yellow2); background: rgba(254,240,138,0.2); }
.mastery-item.mastered { border-color: var(--green2); background: rgba(134,239,172,0.2); }
.xp-bar { height: 8px; background: var(--cream); border-radius: 999px; overflow: hidden; margin-top: 8px; }
.xp-bar .fill { height: 100%; background: linear-gradient(90deg, var(--pink3), var(--lavender2)); border-radius: 999px; }

/* ===== SETTINGS ===== */
.settings-section { background: var(--white); border-radius: var(--radius-lg); padding: 24px; border: 1.5px solid rgba(45,42,50,0.06); margin-bottom: 16px; }
.settings-section h3 { font-size: 16px; margin-bottom: 14px; }
.setting-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid rgba(45,42,50,0.06); }
.setting-row:last-child { border-bottom: none; }
.setting-row .s-label { font-size: 14px; font-weight: 700; }
.setting-row .s-desc { font-size: 12px; color: var(--muted); }
.toggle { width: 48px; height: 28px; background: rgba(45,42,50,0.12); border-radius: 999px; position: relative; cursor: pointer; transition: 0.2s; }
.toggle.on { background: var(--pink3); }
.toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; background: white; border-radius: 50%; transition: 0.2s; box-shadow: 0 2px 4px rgba(0,0,0,0.15); }
.toggle.on::after { left: 23px; }
.danger-btn { background: #FEE2E2; color: #991B1B; padding: 10px 18px; border-radius: 999px; font-size: 13px; font-weight: 800; border: 1.5px solid #FECACA; transition: 0.2s; }
.danger-btn:hover { background: #FCA5A5; }

/* ===== COLOR PICKER ===== */
.color-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 10px; }
@media (max-width: 500px) { .color-grid { grid-template-columns: repeat(3, 1fr); } }
.color-swatch {
  aspect-ratio: 1; border-radius: 16px; cursor: pointer; position: relative;
  border: 3px solid transparent; transition: 0.2s; display: flex; flex-direction: column;
  align-items: center; justify-content: center; overflow: hidden;
}
.color-swatch:hover { transform: scale(1.08); box-shadow: 0 4px 16px rgba(0,0,0,0.15); }
.color-swatch.active { border-color: var(--charcoal); box-shadow: 0 0 0 3px rgba(45,42,50,0.2); }
.color-swatch .cs-dot { width: 32px; height: 32px; border-radius: 50%; margin-bottom: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
.color-swatch .cs-name { font-size: 10px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--charcoal); }
.color-swatch .cs-check { position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; background: var(--charcoal); color: white; border-radius: 50%; display: none; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; }
.color-swatch.active .cs-check { display: flex; }

/* ===== XP TOAST ===== */
.xp-toast {
  position: fixed; bottom: 24px; right: 24px; z-index: 999;
  background: var(--charcoal); color: white; padding: 14px 22px;
  border-radius: 999px; font-size: 15px; font-weight: 800;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  animation: toastIn 0.4s ease, toastOut 0.4s ease 2.2s forwards;
}
@keyframes toastIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes toastOut { from { opacity: 1; } to { opacity: 0; transform: translateY(-10px); } }

/* ===== CONFETTI ===== */
.confetti-container { position: fixed; inset: 0; pointer-events: none; z-index: 998; overflow: hidden; }
.confetti-piece {
  position: absolute; width: 10px; height: 10px; top: -20px;
  animation: confettiFall 2.5s ease-in forwards;
}
@keyframes confettiFall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(45,42,50,0.12); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(45,42,50,0.2); }