/* ============================================================
   Liquid Glass Surface — site-wide theme
   Load this AFTER each page's own <style> block so equal-
   specificity rules here win via document order.
   ============================================================ */

/* ── Google Font (Inter) ─────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ── CSS custom properties ──────────────────────────────── */
:root {
  --glass-bg:        rgba(10, 15, 45, 0.55);
  --glass-bg-inner:  rgba(10, 15, 45, 0.45);
  --glass-bg-deep:   rgba(10, 15, 45, 0.35);
  --glass-blur:      blur(50px) saturate(1.6) brightness(1.08);
  --glass-blur-sm:   blur(24px) saturate(1.4);
  --border-top:      1px solid rgba(255,255,255,0.38);
  --border-left:     1px solid rgba(255,255,255,0.20);
  --border-bottom:   1px solid rgba(200,180,255,0.08);
  --border-right:    1px solid rgba(160,200,255,0.09);
  --shadow-panel:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 40px rgba(80,60,140,0.08),
    0 10px 40px rgba(0,0,0,0.45),
    0 2px 8px rgba(0,0,0,0.35);
  --text-primary:   rgba(255,255,255,0.92);
  --text-secondary: rgba(255,255,255,0.55);
  --text-muted:     rgba(255,255,255,0.3);
  --accent:         rgba(180,200,255,0.75);
}

/* ── Body ─────────────────────────────────────────────────── */
body {
  background:
    radial-gradient(ellipse at 25% 35%, rgba(100,140,255,0.22) 0%, transparent 50%),
    radial-gradient(ellipse at 75% 65%, rgba(180,100,255,0.18) 0%, transparent 45%),
    radial-gradient(ellipse at 50% 50%, rgba(0,80,160,0.15) 0%, transparent 70%),
    linear-gradient(145deg, #0e1020, #0b0a18) !important;
  color: var(--text-primary);
  font-family: 'Inter', 'Nunito', sans-serif;
  min-height: 100vh;
}

/* ── Typography ──────────────────────────────────────────── */
h1, h2, h3, h4, h5 {
  color: var(--text-primary) !important;
  text-shadow: 0 1px 8px rgba(160,180,255,0.2) !important;
}
p, li { color: var(--text-secondary); }
label { color: var(--text-primary) !important; }
.subtitle, .activity-description { color: var(--text-secondary) !important; }
.loading { color: rgba(200,210,255,0.65) !important; }

/* ── Main container / white card panels ──────────────────── */
.container,
#settings-menu {
  background: rgba(10, 15, 45, 0.55) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-top:    var(--border-top)    !important;
  border-left:   var(--border-left)   !important;
  border-bottom: var(--border-bottom) !important;
  border-right:  var(--border-right)  !important;
  box-shadow: var(--shadow-panel) !important;
  color: var(--text-primary) !important;
}

/* ── Inner panels (user header, progress summary, etc.) ───── */
.user-header,
.progress-summary,
.login-prompt {
  background: rgba(10, 15, 45, 0.45) !important;
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  border-radius: 16px !important;
  border-top:    1px solid rgba(255,255,255,0.22) !important;
  border-left:   1px solid rgba(255,255,255,0.1)  !important;
  border-bottom: 1px solid rgba(200,180,255,0.05) !important;
  border-right:  1px solid rgba(200,180,255,0.05) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 4px 16px rgba(0,0,0,0.3) !important;
}
.login-prompt h3,
.login-prompt p { color: var(--text-primary) !important; }

/* ── Progress items ───────────────────────────────────────── */
.progress-item {
  background: rgba(255,255,255,0.04) !important;
  border: none !important;
  border-top:  1px solid rgba(255,255,255,0.14) !important;
  border-left: 1px solid rgba(255,255,255,0.07) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07) !important;
  color: var(--text-primary) !important;
}
.progress-item h4 { color: var(--text-primary) !important; }
.progress-item p  { color: var(--text-secondary) !important; }

/* ── Question / answer / progress display panels ────────── */
.question-box,
.progress-display,
.user-info {
  background: var(--glass-bg-inner) !important;
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  border-top:    1px solid rgba(255,255,255,0.26) !important;
  border-left:   1px solid rgba(255,255,255,0.13) !important;
  border-bottom: 1px solid rgba(200,180,255,0.06) !important;
  border-right:  1px solid rgba(160,200,255,0.06) !important;
  border-radius: 16px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 4px 14px rgba(0,0,0,0.3) !important;
  color: var(--text-primary) !important;
}
.user-info { padding: 10px 16px !important; }
.question-box h2,
.question-box h3,
.question-box p,
.progress-display h3,
.progress-display p { color: var(--text-primary) !important; }

/* ── Inputs & selects ────────────────────────────────────── */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
select {
  background: rgba(255,255,255,0.07) !important;
  backdrop-filter: blur(12px);
  color: rgba(255,255,255,0.88) !important;
  border-top:    1px solid rgba(255,255,255,0.28) !important;
  border-left:   1px solid rgba(255,255,255,0.14) !important;
  border-bottom: 1px solid rgba(200,200,255,0.08) !important;
  border-right:  1px solid rgba(200,200,255,0.08) !important;
  box-shadow: inset 0 1px 4px rgba(0,0,0,0.18), inset 0 0 20px rgba(80,80,180,0.06) !important;
  outline: none;
  transition: all 0.2s;
}
input[type="text"]::placeholder,
input[type="password"]::placeholder { color: rgba(200,210,255,0.35) !important; }
input[type="text"]:focus,
input[type="password"]:focus,
select:focus {
  background: rgba(255,255,255,0.1) !important;
  border-top-color: rgba(255,255,255,0.5) !important;
  box-shadow: inset 0 1px 4px rgba(0,0,0,0.12), 0 0 0 2px rgba(160,180,255,0.18), 0 0 20px rgba(120,140,255,0.1) !important;
}
select option {
  background: #1a1a2e;
  color: rgba(255,255,255,0.88);
}

/* ── Primary button ──────────────────────────────────────── */
button,
.btn,
.answer-button,
.difficulty-button,
.back-button {
  background: rgba(255,255,255,0.12) !important;
  backdrop-filter: blur(16px);
  color: rgba(255,255,255,0.95) !important;
  border-top:    1px solid rgba(255,255,255,0.42) !important;
  border-left:   1px solid rgba(255,255,255,0.22) !important;
  border-bottom: 1px solid rgba(200,200,255,0.06) !important;
  border-right:  1px solid rgba(200,200,255,0.06) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 0 30px rgba(120,100,255,0.06),
    0 4px 18px rgba(0,0,0,0.3),
    0 1px 4px rgba(0,0,0,0.2) !important;
  text-shadow: none !important;
  font-family: 'Inter', 'Nunito', sans-serif !important;
  cursor: pointer;
  transition: all 0.2s !important;
}
button:hover,
.btn:hover,
.answer-button:hover,
.difficulty-button:hover,
.back-button:hover {
  background: rgba(255,255,255,0.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.3),
    inset 0 0 30px rgba(120,100,255,0.1),
    0 6px 24px rgba(0,0,0,0.35),
    0 0 40px rgba(120,140,255,0.08) !important;
  transform: translateY(-1px) !important;
}

/* ── Secondary / cancel buttons ─────────────────────────── */
.btn-secondary {
  background: rgba(255,255,255,0.05) !important;
  border-top-color:  rgba(255,255,255,0.18) !important;
  border-left-color: rgba(255,255,255,0.1)  !important;
  color: rgba(255,255,255,0.45) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 2px 8px rgba(0,0,0,0.2) !important;
}

/* ── Active difficulty button ────────────────────────────── */
.difficulty-button.active {
  background: rgba(255,255,255,0.2) !important;
  border-top-color: rgba(255,255,255,0.55) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.3),
    0 0 0 1px rgba(255,255,255,0.15),
    0 4px 16px rgba(0,0,0,0.3) !important;
  transform: none !important;
}

/* ── Correct / incorrect answer feedback ─────────────────── */
.answer-button.correct {
  background: rgba(100,255,150,0.15) !important;
  border-top-color:  rgba(100,255,150,0.45) !important;
  border-left-color: rgba(100,255,150,0.25) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.2),
    0 0 20px rgba(80,220,120,0.25),
    0 4px 14px rgba(0,0,0,0.3) !important;
  color: rgba(180,255,200,0.95) !important;
}
.answer-button.incorrect {
  background: rgba(255,100,100,0.15) !important;
  border-top-color:  rgba(255,100,100,0.45) !important;
  border-left-color: rgba(255,100,100,0.25) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.2),
    0 0 20px rgba(220,80,80,0.25),
    0 4px 14px rgba(0,0,0,0.3) !important;
  color: rgba(255,180,180,0.95) !important;
}

/* ── Validation buttons (alphabet-learner, reading-learner) ── */
.validate-btn.btn-correct {
  background: linear-gradient(135deg, #2ecc71, #27ae60) !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25), 0 0 0 1px rgba(255,255,255,0.15) !important;
  color: white !important;
}
.validate-btn.btn-correct:hover {
  box-shadow: 0 6px 20px rgba(46,204,113,0.5), 0 0 0 1px rgba(255,255,255,0.2) !important;
  transform: translateY(-2px) !important;
}
.validate-btn.btn-incorrect {
  background: linear-gradient(135deg, #e74c3c, #c0392b) !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25), 0 0 0 1px rgba(255,255,255,0.15) !important;
  color: white !important;
}
.validate-btn.btn-incorrect:hover {
  box-shadow: 0 6px 20px rgba(231,76,60,0.5), 0 0 0 1px rgba(255,255,255,0.2) !important;
  transform: translateY(-2px) !important;
}

/* ── Activity cards (index.html) ─────────────────────────── */
.activity-card {
  background: var(--glass-bg-inner) !important;
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  border-top:    1px solid rgba(255,255,255,0.34) !important;
  border-left:   1px solid rgba(255,255,255,0.16) !important;
  border-bottom: 1px solid rgba(200,210,255,0.06) !important;
  border-right:  1px solid rgba(200,210,255,0.06) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), inset 0 0 20px rgba(80,80,200,0.05), 0 4px 14px rgba(0,0,0,0.3) !important;
  color: var(--text-primary) !important;
}
.activity-card:hover {
  background: rgba(255,255,255,0.09) !important;
  border-top-color: rgba(255,255,255,0.55) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.2),
    inset 0 0 30px rgba(100,100,255,0.08),
    0 8px 28px rgba(0,0,0,0.4),
    0 0 0 1px rgba(255,255,255,0.08) !important;
  transform: translateY(-3px) !important;
}
.activity-card.coming-soon {
  opacity: 0.4 !important;
}
.activity-card.coming-soon:hover {
  transform: none !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 4px 14px rgba(0,0,0,0.3) !important;
}
.activity-title   { color: var(--text-primary)   !important; }
.activity-description { color: var(--text-secondary) !important; }
.activity-progress {
  background: rgba(255,255,255,0.08) !important;
  color: var(--text-secondary) !important;
}

/* ── Activity icons on index page ────────────────────────── */
.activity-icon {
  filter: grayscale(1) brightness(0) invert(1);
  opacity: 0.6;
}

/* ── Letter box (alphabet learner) ───────────────────────── */
#letter-box {
  background: var(--glass-bg-inner) !important;
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  border:  none !important;
  border-top:    1px solid rgba(255,255,255,0.34) !important;
  border-left:   1px solid rgba(255,255,255,0.16) !important;
  border-bottom: 1px solid rgba(200,180,255,0.06) !important;
  border-right:  1px solid rgba(160,200,255,0.07) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 0 30px rgba(80,80,180,0.08),
    0 8px 28px rgba(0,0,0,0.45) !important;
  color: rgba(255,255,255,0.92) !important;
  text-shadow: 0 2px 20px rgba(160,180,255,0.3) !important;
}

/* ── Image caption ───────────────────────────────────────── */
#image-caption { color: var(--text-muted) !important; }

/* ── Clock container ─────────────────────────────────────── */
.clock-container {
  background: rgba(255,255,255,0.93) !important;
  /* Remove thick dark border; replace with layered glass ring */
  border: none !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.55),
    0 0 0 5px rgba(255,255,255,0.08),
    0 0 0 6px rgba(200,210,255,0.12),
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(0,0,0,0.06),
    0 16px 60px rgba(0,0,0,0.55),
    0 4px 16px rgba(0,0,0,0.35) !important;
}

/* ── Scrubber panel (time-learner explore mode) ──────────── */
.scrubber-panel {
  background: var(--glass-bg-inner) !important;
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  border-top:    1px solid rgba(255,255,255,0.26) !important;
  border-left:   1px solid rgba(255,255,255,0.13) !important;
  border-bottom: 1px solid rgba(200,180,255,0.06) !important;
  border-right:  1px solid rgba(160,200,255,0.06) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 4px 14px rgba(0,0,0,0.3) !important;
  color: var(--text-primary) !important;
}
.scrubber-time { color: var(--text-primary) !important; }

/* ── Hamburger / nav menu button ─────────────────────────── */
#hamburger-menu,
.hamburger-menu {
  background: rgba(255,255,255,0.12) !important;
  backdrop-filter: blur(16px);
  border-top:    1px solid rgba(255,255,255,0.38) !important;
  border-left:   1px solid rgba(255,255,255,0.2)  !important;
  border-bottom: 1px solid rgba(200,200,255,0.06) !important;
  border-right:  1px solid rgba(200,200,255,0.06) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 4px 12px rgba(0,0,0,0.3) !important;
}
#hamburger-menu:hover,
.hamburger-menu:hover {
  background: rgba(255,255,255,0.18) !important;
}

/* ── Back button (override from above for positioning) ───── */
.back-button {
  background: rgba(255,255,255,0.1) !important;
  color: rgba(255,255,255,0.85) !important;
}

/* ── Error / success messages ────────────────────────────── */
.error-message {
  background: rgba(255,80,80,0.12) !important;
  border: 1px solid rgba(255,100,100,0.35) !important;
  color: rgba(255,180,180,0.95) !important;
}
.success-message {
  background: rgba(80,220,120,0.1) !important;
  border: 1px solid rgba(100,220,140,0.3) !important;
  color: rgba(160,255,190,0.95) !important;
}

/* ── Overlay ─────────────────────────────────────────────── */
#settings-overlay { background: rgba(0,0,0,0.65) !important; }

/* ── Profile page header ─────────────────────────────────── */
.header {
  background: rgba(255,255,255,0.06) !important;
  backdrop-filter: var(--glass-blur-sm);
  border-bottom: 1px solid rgba(255,255,255,0.12) !important;
}

/* ── Progress bar track & fill ───────────────────────────── */
.progress-bar-fill,
.progress-bar {
  background: linear-gradient(90deg, rgba(255,255,255,0.5), rgba(255,255,255,0.85)) !important;
}

/* ── Time display text ───────────────────────────────────── */
.time-display { color: var(--text-primary) !important; }

/* ── Days / calendar cells ───────────────────────────────── */
.day-card,
.day-button {
  background: var(--glass-bg-inner) !important;
  backdrop-filter: var(--glass-blur-sm);
  border-top:    1px solid rgba(255,255,255,0.28) !important;
  border-left:   1px solid rgba(255,255,255,0.14) !important;
  border-bottom: 1px solid rgba(200,180,255,0.06) !important;
  border-right:  1px solid rgba(160,200,255,0.07) !important;
  color: var(--text-primary) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 3px 10px rgba(0,0,0,0.3) !important;
}

/* ── Days question text ──────────────────────────────────── */
.question-text { color: var(--text-primary) !important; }

/* ── Score / feedback text ───────────────────────────────── */
.score-display,
.feedback-text,
.streak-display { color: var(--text-secondary) !important; }

/* ── Avatar options ──────────────────────────────────────── */
.avatar-option {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.18) !important;
}
.avatar-option.selected {
  border-color: rgba(200,210,255,0.6) !important;
  background: rgba(160,180,255,0.12) !important;
}

/* ── Toggle form link ────────────────────────────────────── */
.toggle-form { color: rgba(180,200,255,0.8) !important; }

/* ── Profile progress cards ─────────────────────────────── */
.activity-progress-card {
  background: rgba(10, 15, 45, 0.55) !important;
  backdrop-filter: var(--glass-blur-sm);
  border-top:    1px solid rgba(255,255,255,0.28) !important;
  border-left:   1px solid rgba(255,255,255,0.14) !important;
  border-bottom: 1px solid rgba(200,180,255,0.06) !important;
  border-right:  1px solid rgba(160,200,255,0.07) !important;
  color: var(--text-primary) !important;
}
.activity-title,
.difficulty-name,
.difficulty-score { color: var(--text-primary) !important; }
.difficulty-item { border-bottom-color: rgba(255,255,255,0.1) !important; }
.progress-bar { background: rgba(255,255,255,0.1) !important; }

/* ── Profile page section headings & user display name ───── */
/* More specific selectors override the generic h1-h5 white rule.  */
/* Dark text-shadow ensures readability regardless of panel opacity. */
.section-title {
  color: rgba(190, 215, 255, 0.97) !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.7), 0 0 18px rgba(100,150,255,0.3) !important;
}
.user-details h3 {
  color: rgba(190, 215, 255, 0.97) !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.7), 0 0 14px rgba(100,150,255,0.25) !important;
}

/* ── Reading completion screen ───────────────────────────── */
.completion-card {
  background: rgba(255,255,255,0.07) !important;
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  border-radius: 20px !important;
  border-top:    1px solid rgba(255,255,255,0.28) !important;
  border-left:   1px solid rgba(255,255,255,0.14) !important;
  border-bottom: 1px solid rgba(200,180,255,0.06) !important;
  border-right:  1px solid rgba(160,200,255,0.07) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 16px 50px rgba(0,0,0,0.5) !important;
}
.completion-card h2 { color: rgba(140,255,180,0.9) !important; }
.completion-stats {
  background: rgba(255,255,255,0.06) !important;
  border-radius: 12px !important;
}
.stat-label { color: var(--text-secondary) !important; }
.stat-value { color: var(--text-primary) !important; }

/* ── Reading specific ────────────────────────────────────── */
.word-display,
.sentence-display,
.phonics-display {
  background: var(--glass-bg-inner) !important;
  backdrop-filter: var(--glass-blur-sm);
  border-top:    1px solid rgba(255,255,255,0.28) !important;
  border-left:   1px solid rgba(255,255,255,0.14) !important;
  border-bottom: 1px solid rgba(200,180,255,0.06) !important;
  border-right:  1px solid rgba(160,200,255,0.07) !important;
  color: var(--text-primary) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 4px 14px rgba(0,0,0,0.3) !important;
}

/* ── Math feedback bar ───────────────────────────────────── */
.feedback {
  background: rgba(255,255,255,0.07) !important;
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  border-radius: 16px !important;
  border-top:    1px solid rgba(255,255,255,0.22) !important;
  border-left:   1px solid rgba(255,255,255,0.12) !important;
  border-bottom: 1px solid rgba(200,180,255,0.06) !important;
  border-right:  1px solid rgba(160,200,255,0.06) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 8px 28px rgba(0,0,0,0.4) !important;
  color: var(--text-primary) !important;
  max-width: 600px !important;
  margin: 20px auto !important;
}
.feedback.correct {
  background: rgba(80,220,120,0.15) !important;
  border-top-color:   rgba(100,255,150,0.4) !important;
  border-left-color:  rgba(100,255,150,0.2) !important;
  box-shadow: inset 0 1px 0 rgba(100,255,150,0.2), 0 0 30px rgba(80,200,100,0.2), 0 8px 28px rgba(0,0,0,0.4) !important;
  color: rgba(180,255,200,0.95) !important;
}
.feedback.incorrect {
  background: rgba(220,60,60,0.15) !important;
  border-top-color:   rgba(255,100,100,0.4) !important;
  border-left-color:  rgba(255,100,100,0.2) !important;
  box-shadow: inset 0 1px 0 rgba(255,100,100,0.2), 0 0 30px rgba(200,60,60,0.2), 0 8px 28px rgba(0,0,0,0.4) !important;
  color: rgba(255,180,180,0.95) !important;
}

/* ── Math drills ─────────────────────────────────────────── */
.math-problem {
  color: var(--text-primary) !important;
  text-shadow: 0 1px 8px rgba(0,0,0,0.5) !important;
}
.number-block {
  background: rgba(255,255,255,0.15) !important;
  border: 1px solid rgba(255,255,255,0.35) !important;
  color: var(--text-primary) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 2px 6px rgba(0,0,0,0.3) !important;
}
.operation-symbol,
.equals-symbol {
  color: var(--text-primary) !important;
}
.result-box {
  background: rgba(255,255,255,0.06) !important;
  border: 2px dashed rgba(255,255,255,0.3) !important;
  color: var(--text-secondary) !important;
}
.result-box.filled {
  border-color: rgba(100,220,120,0.6) !important;
  background: rgba(100,220,120,0.12) !important;
  color: var(--text-primary) !important;
}
.result-box.correct {
  border-color: rgba(100,220,120,0.8) !important;
  background: rgba(80,200,100,0.25) !important;
  color: var(--text-primary) !important;
}
.result-box.incorrect {
  border-color: rgba(240,80,80,0.8) !important;
  background: rgba(220,60,60,0.25) !important;
  color: var(--text-primary) !important;
}

/* ── Hamburger dropdown ───────────────────────────────────── */
#hamburger-dropdown {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  border-top:    1px solid rgba(255,255,255,0.28) !important;
  border-left:   1px solid rgba(255,255,255,0.14) !important;
  border-bottom: 1px solid rgba(200,180,255,0.06) !important;
  border-right:  1px solid rgba(160,200,255,0.07) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 8px 28px rgba(0,0,0,0.5) !important;
}
.dropdown-item {
  color: var(--text-primary) !important;
  background: none !important;
  border-bottom-color: rgba(255,255,255,0.08) !important;
}
.dropdown-item:hover {
  background: rgba(255,255,255,0.08) !important;
}

/* ── Image Manager Modal ─────────────────────────────────── */
#image-manager {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-top:    var(--border-top)    !important;
  border-left:   var(--border-left)   !important;
  border-bottom: var(--border-bottom) !important;
  border-right:  var(--border-right)  !important;
  box-shadow: var(--shadow-panel) !important;
  color: var(--text-primary) !important;
}
#image-manager h2 {
  border-bottom-color: rgba(255,255,255,0.1) !important;
}
.manager-letter-row {
  border-bottom-color: rgba(255,255,255,0.1) !important;
}
.manager-letter-row label {
  color: var(--text-secondary) !important;
}
.manager-section h3 {
  color: var(--text-muted) !important;
}
#image-manager-content p {
  color: var(--text-secondary) !important;
}
.image-tile {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.12) !important;
}
.tile-name {
  color: var(--text-secondary) !important;
}
.tile-btn {
  background: rgba(255,255,255,0.1) !important;
  color: var(--text-primary) !important;
  border-top:    1px solid rgba(255,255,255,0.22) !important;
  border-left:   1px solid rgba(255,255,255,0.12) !important;
  border-bottom: 1px solid rgba(200,200,255,0.05) !important;
  border-right:  1px solid rgba(200,200,255,0.05) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12) !important;
}
.tile-btn:hover {
  background: rgba(255,255,255,0.16) !important;
}
.tile-btn.danger {
  background: rgba(220,60,60,0.15) !important;
  color: rgba(255,160,160,0.9) !important;
  border-top-color:  rgba(255,100,100,0.3) !important;
  border-left-color: rgba(255,100,100,0.15) !important;
}
.tile-btn.danger:hover {
  background: rgba(220,60,60,0.28) !important;
}
.manager-footer {
  border-top-color: rgba(255,255,255,0.1) !important;
}
.manager-footer p {
  color: var(--text-primary) !important;
}
.upload-label {
  background: rgba(100,160,220,0.18) !important;
  color: rgba(180,220,255,0.92) !important;
  border-top:    1px solid rgba(140,200,255,0.4) !important;
  border-left:   1px solid rgba(140,200,255,0.2) !important;
  border-bottom: 1px solid rgba(100,180,255,0.06) !important;
  border-right:  1px solid rgba(100,180,255,0.06) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15) !important;
}
.upload-label:hover {
  background: rgba(100,160,220,0.28) !important;
}
.upload-label.uploading {
  background: rgba(255,255,255,0.06) !important;
  color: var(--text-muted) !important;
  border-top-color: rgba(255,255,255,0.12) !important;
}
.batch-upload-label {
  background: rgba(255,255,255,0.06) !important;
  color: rgba(180,220,255,0.8) !important;
  border: 1px solid rgba(140,200,255,0.22) !important;
}
.batch-upload-label:hover {
  background: rgba(100,160,220,0.15) !important;
}
.batch-upload-label.uploading {
  background: rgba(255,255,255,0.03) !important;
  color: var(--text-muted) !important;
  border-color: rgba(255,255,255,0.1) !important;
}
.batch-results {
  background: rgba(80,200,120,0.1) !important;
  border-color: rgba(100,200,140,0.22) !important;
}
.batch-results strong {
  color: rgba(160,255,190,0.9) !important;
}
.batch-pill {
  background: rgba(100,160,220,0.25) !important;
  color: rgba(180,220,255,0.92) !important;
}
.batch-errors {
  background: rgba(255,150,50,0.1) !important;
  color: rgba(255,200,140,0.9) !important;
}

/* ── Coaching Banner (index.html) ─────────────────── */
.coaching-banner {
  background: rgba(100,160,220,0.12) !important;
  border-top:    1px solid rgba(140,200,255,0.35) !important;
  border-left:   1px solid rgba(140,200,255,0.18) !important;
  border-bottom: 1px solid rgba(100,180,255,0.06) !important;
  border-right:  1px solid rgba(100,180,255,0.06) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08) !important;
}
.coaching-banner-title {
  color: rgba(160,210,255,0.95) !important;
}
.coaching-banner-body {
  color: var(--text-secondary) !important;
}
.coaching-banner-body strong {
  color: rgba(160,210,255,0.9) !important;
}

/* ── Coach Hint (alphabet, reading activity pages) ── */
.coach-hint {
  color: var(--text-muted) !important;
}

/* ── Review Page ─────────────────────────────────── */
#review-panel,
#session-summary {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  border-top:    var(--border-top)    !important;
  border-left:   var(--border-left)   !important;
  border-bottom: var(--border-bottom) !important;
  border-right:  var(--border-right)  !important;
  box-shadow: var(--shadow-panel) !important;
}

/* Module badge colour variants */
#module-badge.badge-alphabet { background: rgba(160,120,255,0.15) !important; border-color: rgba(160,120,255,0.4) !important; color: rgba(210,185,255,0.95) !important; }
#module-badge.badge-reading  { background: rgba(80,210,140,0.15)  !important; border-color: rgba(80,210,140,0.4)  !important; color: rgba(140,235,185,0.95) !important; }
#module-badge.badge-math     { background: rgba(80,200,230,0.15)  !important; border-color: rgba(80,200,230,0.4)  !important; color: rgba(130,220,245,0.95) !important; }
#module-badge.badge-time     { background: rgba(130,150,255,0.15) !important; border-color: rgba(130,150,255,0.4) !important; color: rgba(170,185,255,0.95) !important; }
#module-badge.badge-days     { background: rgba(255,185,80,0.15)  !important; border-color: rgba(255,185,80,0.4)  !important; color: rgba(255,210,130,0.95) !important; }
#module-badge.badge-months   { background: rgba(150,210,255,0.15) !important; border-color: rgba(150,210,255,0.4) !important; color: rgba(190,225,255,0.95) !important; }
#module-badge.badge-colors   { background: rgba(255,110,160,0.15) !important; border-color: rgba(255,110,160,0.4) !important; color: rgba(255,165,200,0.95) !important; }

/* Multiple-choice buttons */
.mc-btn {
  background:   rgba(255,255,255,0.08) !important;
  border-top:   1px solid rgba(255,255,255,0.20) !important;
  border-left:  1px solid rgba(255,255,255,0.10) !important;
  border-bottom:1px solid rgba(200,180,255,0.05) !important;
  border-right: 1px solid rgba(160,200,255,0.05) !important;
  color: var(--text-primary) !important;
}
.mc-btn.mc-correct   { background: rgba(50,200,110,0.28) !important; border-color: rgba(50,200,110,0.5)  !important; color: rgba(130,250,175,0.95) !important; }
.mc-btn.mc-incorrect { background: rgba(220,55,55,0.28)  !important; border-color: rgba(220,55,55,0.5)   !important; color: rgba(255,140,130,0.95) !important; }

/* Coach buttons */
.coach-btn-correct   { background: rgba(46,204,113,0.22) !important; border: 2px solid rgba(46,204,113,0.5)  !important; color: rgba(100,240,160,0.95) !important; }
.coach-btn-incorrect { background: rgba(231,76,60,0.18)  !important; border: 2px solid rgba(231,76,60,0.45)  !important; color: rgba(255,120,100,0.95) !important; }

/* Clock face */
.clock-widget {
  background: rgba(12,16,48,0.88) !important;
  border: 2px solid rgba(255,255,255,0.15) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.08) !important;
}

/* Settings panel */
#settings-panel {
  background: rgba(14,18,52,0.92) !important;
  backdrop-filter: blur(24px) saturate(1.4) !important;
  border-top:    1px solid rgba(255,255,255,0.28) !important;
  border-left:   1px solid rgba(255,255,255,0.14) !important;
  border-bottom: 1px solid rgba(200,180,255,0.07) !important;
  border-right:  1px solid rgba(160,200,255,0.08) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,0.45) !important;
}

/* Math input */
#math-input {
  background: rgba(255,255,255,0.1)   !important;
  border:     1px solid rgba(255,255,255,0.22) !important;
  color: var(--text-primary) !important;
}
#math-input:focus {
  border-color: rgba(160,180,255,0.55) !important;
  box-shadow: 0 0 0 3px rgba(140,160,255,0.15) !important;
}

/* Summary rows */
.summary-row {
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
}
#summary-breakdown {
  border-top: 1px solid rgba(255,255,255,0.08) !important;
}

/* ── Global Nav (nav.js) ────────────────────────────────── */
#nav-top-right {
  position: fixed !important;
  top: 16px !important;
  right: 16px !important;
  z-index: 1000 !important;
}

.nav-signin-pill {
  display: inline-block !important;
  padding: 8px 18px !important;
  background: rgba(255,255,255,0.12) !important;
  backdrop-filter: blur(24px) saturate(1.4) !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
  border-radius: 25px !important;
  color: var(--text-primary) !important;
  text-decoration: none !important;
  font-size: 0.9em !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
}

.nav-signin-pill:hover {
  background: rgba(255,255,255,0.2) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
}

.nav-user-menu {
  position: relative !important;
}

.nav-avatar-btn {
  width: 46px !important;
  height: 46px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.12) !important;
  backdrop-filter: blur(24px) saturate(1.4) !important;
  border-top: 1px solid rgba(255,255,255,0.38) !important;
  border-left: 1px solid rgba(255,255,255,0.20) !important;
  border-bottom: 1px solid rgba(200,180,255,0.08) !important;
  border-right: 1px solid rgba(160,200,255,0.09) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 4px 12px rgba(0,0,0,0.3) !important;
  cursor: pointer !important;
  font-size: 1.4em !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
  padding: 0 !important;
}

.nav-avatar-btn:hover {
  background: rgba(255,255,255,0.2) !important;
  transform: translateY(-1px) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 6px 16px rgba(0,0,0,0.4) !important;
}

.nav-dropdown {
  position: absolute !important;
  top: 54px !important;
  flex-direction: column !important;
  right: 0 !important;
  background: rgba(14,18,52,0.92) !important;
  backdrop-filter: blur(24px) saturate(1.4) !important;
  border-top: 1px solid rgba(255,255,255,0.28) !important;
  border-left: 1px solid rgba(255,255,255,0.14) !important;
  border-bottom: 1px solid rgba(200,180,255,0.07) !important;
  border-right: 1px solid rgba(160,200,255,0.08) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,0.45) !important;
  border-radius: 14px !important;
  padding: 8px 0 !important;
  min-width: 180px !important;
  overflow: hidden !important;
}

.nav-dropdown-name {
  padding: 10px 16px 8px !important;
  font-size: 0.85em !important;
  font-weight: 700 !important;
  color: var(--text-secondary) !important;
  border-bottom: 1px solid rgba(255,255,255,0.1) !important;
  margin-bottom: 4px !important;
}

.nav-dropdown-item {
  display: block !important;
  width: 100% !important;
  padding: 10px 16px !important;
  text-align: left !important;
  background: none !important;
  border: none !important;
  color: var(--text-primary) !important;
  text-decoration: none !important;
  font-size: 0.95em !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background 0.15s !important;
  box-sizing: border-box !important;
  font-family: inherit !important;
}

.nav-dropdown-item:hover {
  background: rgba(255,255,255,0.1) !important;
}

.nav-signout-btn {
  color: rgba(255,120,120,0.9) !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
  margin-top: 4px !important;
}

.nav-signout-btn:hover {
  background: rgba(255,80,80,0.12) !important;
}

/* ── Settings Page ───────────────────────────────────────── */
.settings-layout {
  display: flex !important;
  margin-top: 60px !important;
  max-width: 1040px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  min-height: calc(100vh - 60px) !important;
  gap: 0 !important;
}

.settings-sidebar {
  width: 220px !important;
  min-width: 220px !important;
  background: rgba(10,15,45,0.45) !important;
  backdrop-filter: blur(50px) saturate(1.6) brightness(1.08) !important;
  border-right: 1px solid rgba(255,255,255,0.1) !important;
  padding: 20px 0 !important;
  flex-shrink: 0 !important;
}

.settings-sidebar-section {
  margin-bottom: 8px !important;
  padding: 0 8px !important;
}

.settings-sidebar-label {
  font-size: 0.7em !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  padding: 12px 8px 4px !important;
  display: block !important;
}

.settings-nav-item {
  display: block !important;
  width: 100% !important;
  padding: 9px 12px !important;
  text-align: left !important;
  background: none !important;
  border: none !important;
  border-radius: 8px !important;
  color: var(--text-secondary) !important;
  font-size: 0.9em !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
  font-family: inherit !important;
  box-sizing: border-box !important;
}

.settings-nav-item:hover {
  background: rgba(255,255,255,0.07) !important;
  color: var(--text-primary) !important;
}

.settings-nav-item.active {
  background: rgba(180,200,255,0.15) !important;
  color: var(--accent) !important;
}

.settings-main {
  flex: 1 !important;
  padding: 28px 32px !important;
  overflow-y: auto !important;
  background: rgba(10,15,45,0.35) !important;
  backdrop-filter: blur(50px) saturate(1.6) brightness(1.08) !important;
}

.settings-panel {
  display: none !important;
}

.settings-panel.active {
  display: block !important;
}

.settings-panel h2 {
  color: var(--text-primary) !important;
  font-size: 1.4em !important;
  font-weight: 800 !important;
  margin-top: 0 !important;
  margin-bottom: 24px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}

.settings-field {
  margin-bottom: 20px !important;
}

.settings-field label {
  display: block !important;
  margin-bottom: 6px !important;
  font-weight: 700 !important;
  font-size: 0.9em !important;
  color: var(--text-secondary) !important;
}

.settings-field input[type="text"],
.settings-field input[type="number"],
.settings-field select {
  background: rgba(255,255,255,0.1) !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  color: var(--text-primary) !important;
  border-radius: 8px !important;
  padding: 9px 12px !important;
  font-size: 0.95em !important;
  width: 100% !important;
  box-sizing: border-box !important;
  font-family: inherit !important;
}

.settings-field input:focus,
.settings-field select:focus {
  border-color: rgba(160,180,255,0.55) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(140,160,255,0.15) !important;
}

.settings-save-btn {
  margin-top: 8px !important;
  padding: 10px 24px !important;
  background: rgba(180,200,255,0.2) !important;
  border: 1px solid rgba(180,200,255,0.35) !important;
  border-radius: 10px !important;
  color: var(--accent) !important;
  font-weight: 700 !important;
  font-size: 0.95em !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  font-family: inherit !important;
}

.settings-save-btn:hover {
  background: rgba(180,200,255,0.3) !important;
  transform: translateY(-1px) !important;
}

.settings-divider {
  border: none !important;
  border-top: 1px solid rgba(255,255,255,0.1) !important;
  margin: 24px 0 !important;
}

.settings-danger-zone {
  background: rgba(255,60,60,0.08) !important;
  border: 1px solid rgba(255,60,60,0.2) !important;
  border-radius: 12px !important;
  padding: 20px !important;
  margin-top: 24px !important;
}

.settings-danger-zone h3 {
  color: rgba(255,120,120,0.9) !important;
  margin-top: 0 !important;
  margin-bottom: 12px !important;
}

.settings-danger-btn {
  padding: 10px 22px !important;
  background: rgba(255,60,60,0.15) !important;
  border: 1px solid rgba(255,60,60,0.35) !important;
  border-radius: 10px !important;
  color: rgba(255,120,120,0.9) !important;
  font-weight: 700 !important;
  font-size: 0.9em !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  font-family: inherit !important;
}

.settings-danger-btn:hover {
  background: rgba(255,60,60,0.25) !important;
}

.avatar-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 8px !important;
}

.avatar-option {
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(255,255,255,0.15) !important;
  background: rgba(255,255,255,0.08) !important;
  font-size: 1.6em !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.15s !important;
}

.avatar-option:hover,
.avatar-option.selected {
  border-color: var(--accent) !important;
  background: rgba(180,200,255,0.15) !important;
  transform: scale(1.1) !important;
}

.settings-radio-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.settings-radio-option {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: var(--text-primary) !important;
  font-size: 0.9em !important;
  cursor: pointer !important;
}

.settings-radio-option input[type="radio"] {
  width: 16px !important;
  height: 16px !important;
  accent-color: rgba(180,200,255,0.8) !important;
  cursor: pointer !important;
}

.settings-toggle {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  color: var(--text-primary) !important;
  font-size: 0.9em !important;
  cursor: pointer !important;
  font-family: inherit !important;
}

.settings-toggle input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  accent-color: rgba(180,200,255,0.8) !important;
  cursor: pointer !important;
}

.settings-migration-banner {
  background: rgba(255,200,60,0.12) !important;
  border: 1px solid rgba(255,200,60,0.3) !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  margin-bottom: 20px !important;
  color: rgba(255,220,100,0.9) !important;
  font-size: 0.88em !important;
}

.settings-status-msg {
  font-size: 0.85em !important;
  margin-top: 8px !important;
  min-height: 1.2em !important;
}

.settings-status-msg.success { color: rgba(100,220,130,0.9) !important; }
.settings-status-msg.error   { color: rgba(255,120,120,0.9) !important; }

/* Settings page — delete modal */
#delete-modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.6) !important;
  z-index: 2000 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
}

#delete-modal-overlay.open {
  display: flex !important;
}

#delete-modal {
  background: rgba(14,18,52,0.96) !important;
  backdrop-filter: blur(40px) !important;
  border-top: 1px solid rgba(255,255,255,0.28) !important;
  border-left: 1px solid rgba(255,255,255,0.14) !important;
  border-bottom: 1px solid rgba(200,180,255,0.07) !important;
  border-right: 1px solid rgba(160,200,255,0.08) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.6) !important;
  border-radius: 18px !important;
  padding: 32px !important;
  max-width: 420px !important;
  width: 90% !important;
  color: var(--text-primary) !important;
}

/* ── Days learner panels ─────────────────────────────────── */
.days-display,
.sequence-display,
.week-calendar,
.question-type-selector {
  background: var(--glass-bg-inner) !important;
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  border-top:    1px solid rgba(255,255,255,0.26) !important;
  border-left:   1px solid rgba(255,255,255,0.13) !important;
  border-bottom: 1px solid rgba(200,180,255,0.06) !important;
  border-right:  1px solid rgba(160,200,255,0.06) !important;
  border-radius: 15px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 4px 14px rgba(0,0,0,0.3) !important;
  color: var(--text-primary) !important;
}

/* ── Reading learner panels ──────────────────────────────── */
.lesson-list,
.display-card {
  background: var(--glass-bg-inner) !important;
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  border-top:    1px solid rgba(255,255,255,0.26) !important;
  border-left:   1px solid rgba(255,255,255,0.13) !important;
  border-bottom: 1px solid rgba(200,180,255,0.06) !important;
  border-right:  1px solid rgba(160,200,255,0.06) !important;
  border-radius: 12px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 4px 14px rgba(0,0,0,0.3) !important;
  color: var(--text-primary) !important;
}

/* ── Progress letter cards ───────────────────────────────── */
.letter-card {
  background: rgba(255,255,255,0.06) !important;
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: 10px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 2px 8px rgba(0,0,0,0.25) !important;
  color: var(--text-primary) !important;
}

/* Settings responsive */
@media (max-width: 640px) {
  .settings-layout {
    flex-direction: column !important;
    margin-top: 56px !important;
  }
  .settings-sidebar {
    width: 100% !important;
    min-width: unset !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    padding: 10px 0 !important;
    overflow-x: auto !important;
    display: flex !important;
    flex-wrap: nowrap !important;
  }
  .settings-sidebar-section {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    margin-bottom: 0 !important;
    padding: 0 4px !important;
  }
  .settings-sidebar-label {
    display: none !important;
  }
  .settings-nav-item {
    white-space: nowrap !important;
  }
  .settings-main {
    padding: 20px 16px !important;
  }
}

/* ── Music Learning ───────────────────────────────────── */

/* Module badge */
#module-badge.badge-music {
  background: rgba(180,130,255,0.15) !important;
  border-color: rgba(180,130,255,0.4) !important;
  color: rgba(210,180,255,0.95) !important;
}

/* Piano white keys */
.key.white {
  background: rgba(240,235,255,0.88) !important;
  color: #1a1030 !important;
  border: 1px solid rgba(0,0,0,0.28) !important;
  box-shadow:
    inset 0 -4px 0 rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.6) !important;
}

/* Piano black keys */
.key.black {
  background: rgba(10,8,25,0.92) !important;
  color: rgba(255,255,255,0.65) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  box-shadow:
    inset 0 -3px 0 rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.12) !important;
}

/* Key interaction states */
.key.white:hover { background: rgba(220,210,255,0.92) !important; }
.key.black:hover { background: rgba(30,22,50,0.95) !important; }
.key.pressed     { filter: brightness(0.78) !important; }

.key.highlight, .xyl-bar.highlight {
  background: rgba(80,150,255,0.55) !important;
  animation: key-pulse 0.9s ease infinite !important;
}

/* Centered labels on xylophone bars */
.xyl-bar { align-items: center !important; padding-bottom: 0 !important; }

.key.correct, .xyl-bar.correct {
  background: rgba(50,200,100,0.75) !important;
  box-shadow: 0 0 14px 4px rgba(50,200,100,0.55) !important;
  animation: none !important;
}

.key.incorrect, .xyl-bar.incorrect {
  background: rgba(220,55,55,0.75) !important;
  box-shadow: 0 0 12px 4px rgba(220,55,55,0.5) !important;
  animation: none !important;
}

/* Song cards */
.song-card {
  background: var(--glass-bg-inner) !important;
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
}
.song-card:hover {
  background: rgba(180,130,255,0.12) !important;
}

/* ── Reading Learner ─────────────────────────────────────── */
.lesson-title {
  color: var(--text-primary) !important;
}
.lesson-item.locked {
  opacity: 0.6 !important;
}
.display-text {
  color: var(--text-primary) !important;
}

/* ── Math Visual Groups ──────────────────────────────────── */
.math-story-text {
  font-size: 1.15em;
  color: var(--text-secondary) !important;
  margin: 0 0 12px 0;
  font-style: italic;
  min-height: 1.4em;
}

.math-visual-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 18px 0;
}

.obj-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.obj-group-label {
  font-size: 0.75em;
  color: var(--text-muted) !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.obj-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  max-width: 220px;
}

.obj-item {
  font-size: 1.9em;
  line-height: 1;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  user-select: none;
}

/* Addition: arriving objects pop in with bounce */
@keyframes mathPopIn {
  0%   { transform: scale(0) rotate(-15deg); opacity: 0; }
  55%  { transform: scale(1.35) rotate(5deg); opacity: 1; }
  75%  { transform: scale(0.88) rotate(-2deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.obj-arriving {
  animation: mathPopIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Subtraction phase 1: objects fly up and vanish */
@keyframes mathFlyOut {
  0%   { transform: scale(1) translateY(0); opacity: 1; }
  40%  { transform: scale(1.15) translateY(-14px); opacity: 0.7; }
  100% { transform: scale(0) translateY(-30px); opacity: 0; }
}

.obj-flying-out {
  animation: mathFlyOut 0.38s ease-in forwards;
}

/* Subtraction phase 2: return grayed with x badge */
@keyframes mathReturnCrossed {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.obj-crossed {
  filter: grayscale(1) opacity(0.4) !important;
  animation: mathReturnCrossed 0.28s ease-out both;
}

.obj-crossed::after {
  content: '\00d7';
  position: absolute;
  top: -5px;
  right: -5px;
  font-size: 0.45em;
  font-style: normal;
  background: #e53935;
  color: #fff;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

.math-op-badge,
.math-eq-badge {
  font-size: 2em;
  font-weight: 900;
  color: var(--accent) !important;
  line-height: 1;
  flex-shrink: 0;
}

.math-result-box {
  width: 64px;
  height: 64px;
  border: 3px dashed rgba(255,255,255,0.25);
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6em;
  font-weight: 800;
  color: var(--text-muted) !important;
  transition: all 0.25s ease;
}

.math-result-box.filled {
  border-color: rgba(180,200,255,0.5);
  color: var(--accent) !important;
  background: rgba(180,200,255,0.08);
}

.math-result-box.correct {
  border-color: rgba(100,220,130,0.7) !important;
  background: rgba(100,220,130,0.15) !important;
  color: #6ddc8b !important;
}

.math-result-box.incorrect {
  border-color: rgba(240,80,80,0.7) !important;
  background: rgba(240,80,80,0.12) !important;
  color: #f05050 !important;
}

/* Multiplication grid */
.mul-grid {
  display: grid;
  gap: 6px;
  justify-content: center;
  /* grid-template-columns set inline via JS: repeat(num2, 44px) */
}

/* Division groups */
.div-groups {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
}

.div-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.div-group-label {
  font-size: 0.72em;
  color: var(--text-muted) !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.div-group-box {
  border: 2px solid rgba(255,255,255,0.18);
  border-radius: 10px;
  padding: 8px;
  background: rgba(255,255,255,0.04);
  display: grid;
  gap: 4px;
  justify-content: center;
  /* grid-template-columns set inline via JS: repeat(cols, 44px) */
}

/* ── Image Manager Edit Form ─────────────────────────────────── */
.tile-edit-name,
.tile-edit-letter {
  background: var(--glass-bg-inner) !important;
  color: var(--text-primary) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
}

.tile-edit-name:focus,
.tile-edit-letter:focus {
  outline: none !important;
  border-color: var(--accent) !important;
}

/* ── Admin Dashboard ─────────────────────────────────────────── */
#stat-total,
#stat-active7,
#stat-active30 {
  color: var(--text-primary) !important;
}

#users-tbody td {
  color: var(--text-primary) !important;
  border-bottom-color: rgba(255,255,255,0.05) !important;
}

#users-tbody .date-cell {
  color: var(--text-secondary) !important;
}


#users-tbody .never-label {
  color: var(--text-muted) !important;
}

/* ── Days Today Card ─────────────────────────────────────── */
.today-card {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  border-top: var(--border-top) !important;
  border-left: var(--border-left) !important;
  border-bottom: var(--border-bottom) !important;
  border-right: var(--border-right) !important;
  box-shadow: var(--shadow-panel) !important;
}

.today-day-name { color: var(--text-primary) !important; }
.today-date     { color: var(--text-secondary) !important; }
.today-divider  { background: rgba(255,255,255,0.1) !important; }
.weather-temp   { color: var(--text-primary) !important; }
.weather-desc   { color: var(--text-secondary) !important; }
.weather-location { color: var(--text-muted) !important; }
.weather-error  { color: var(--text-muted) !important; }
.weather-error a { color: var(--accent) !important; }
.weather-loading { color: var(--text-muted) !important; }

/* ── Months ──────────────────────────────────────────────── */
:root {
  --season-winter: rgba(120, 170, 255, 0.55);
  --season-spring: rgba(130, 220, 150, 0.55);
  --season-summer: rgba(245, 130, 130, 0.55);
  --season-fall:   rgba(245, 170, 100, 0.55);
}

.months-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  max-width: 720px;
  margin: 0 auto;
}
@media (max-width: 480px) {
  .months-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

.month-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 110px;
  padding: 16px 12px 14px;
  border-radius: 14px;
  background: var(--glass-bg-inner) !important;
  backdrop-filter: var(--glass-blur-sm);
  border-top:    1px solid rgba(255,255,255,0.28) !important;
  border-left:   1px solid rgba(255,255,255,0.14) !important;
  border-bottom: 1px solid rgba(200,180,255,0.06) !important;
  border-right:  1px solid rgba(160,200,255,0.07) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 3px 10px rgba(0,0,0,0.3);
  color: var(--text-primary);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  overflow: hidden;
}
.month-tile::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--season-color, transparent);
  opacity: 0.42;
  pointer-events: none;
  border-radius: inherit;
}
.month-tile > * { position: relative; z-index: 1; }
.month-tile:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 6px 16px rgba(0,0,0,0.4); }
.month-tile.season-winter { --season-color: var(--season-winter); }
.month-tile.season-spring { --season-color: var(--season-spring); }
.month-tile.season-summer { --season-color: var(--season-summer); }
.month-tile.season-fall   { --season-color: var(--season-fall);   }

.month-tile .month-name {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.month-tile .month-icon {
  font-size: 1.6rem;
  margin-bottom: 4px;
}
.month-tile .month-number {
  position: absolute;
  top: 6px; left: 8px;
  font-size: 0.7rem;
  color: var(--text-muted);
  z-index: 2;
}
.month-tile .month-days {
  position: absolute;
  bottom: 6px; right: 10px;
  font-size: 0.7rem;
  color: var(--text-secondary);
  z-index: 2;
}
.month-tile.current-month {
  outline: 2px solid rgba(255,255,255,0.55);
  outline-offset: -2px;
  animation: month-pulse 2s ease-in-out infinite;
}
@keyframes month-pulse {
  0%, 100% { outline-color: rgba(255,255,255,0.55); }
  50%      { outline-color: rgba(255,255,255,0.9); }
}
.month-tile .month-here {
  position: absolute;
  bottom: 6px; left: 8px;
  font-size: 0.65rem;
  color: var(--text-primary);
  background: rgba(0,0,0,0.35);
  padding: 1px 6px;
  border-radius: 8px;
  z-index: 2;
}
.month-tile .birthday-star {
  position: absolute;
  top: 6px; right: 8px;
  font-size: 1.0rem;
  filter: drop-shadow(0 0 4px rgba(255, 220, 120, 0.7));
  z-index: 2;
}

.month-header-card {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  border-top: var(--border-top) !important;
  border-left: var(--border-left) !important;
  border-bottom: var(--border-bottom) !important;
  border-right: var(--border-right) !important;
  box-shadow: var(--shadow-panel) !important;
  border-radius: 18px;
  padding: 22px 20px;
  text-align: center;
  max-width: 480px;
  margin: 0 auto 24px;
}
.month-header-card.season-winter { box-shadow: var(--shadow-panel), 0 0 0 1px rgba(120,170,255,0.4) !important; }
.month-header-card.season-spring { box-shadow: var(--shadow-panel), 0 0 0 1px rgba(130,220,150,0.4) !important; }
.month-header-card.season-summer { box-shadow: var(--shadow-panel), 0 0 0 1px rgba(245,130,130,0.4) !important; }
.month-header-card.season-fall   { box-shadow: var(--shadow-panel), 0 0 0 1px rgba(245,170,100,0.4) !important; }
.month-header-name { font-size: 2.6rem; font-weight: 800; color: var(--text-primary); margin: 0; }
.month-header-date { color: var(--text-secondary); margin-top: 4px; }
.month-header-season { color: var(--text-muted); margin-top: 6px; font-size: 0.95rem; letter-spacing: 0.04em; text-transform: uppercase; }

.month-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  display: none;
  align-items: center; justify-content: center;
  z-index: 1000;
  padding: 20px;
}
.month-modal-backdrop.open { display: flex; }
.month-modal {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  border-top: var(--border-top) !important;
  border-left: var(--border-left) !important;
  border-bottom: var(--border-bottom) !important;
  border-right: var(--border-right) !important;
  box-shadow: var(--shadow-panel) !important;
  border-radius: 18px;
  padding: 24px;
  max-width: 420px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  color: var(--text-primary);
  position: relative;
}
.month-modal h2 { margin: 0 0 4px; font-size: 1.8rem; }
.month-modal .month-modal-meta { color: var(--text-secondary); font-size: 0.95rem; margin-bottom: 14px; }
.month-modal .month-modal-section { margin-top: 14px; }
.month-modal .month-modal-section h3 { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin: 0 0 6px; }
.month-modal .month-modal-section p { margin: 0; color: var(--text-primary); }
.month-modal-close {
  position: absolute; top: 10px; right: 12px;
  background: rgba(255,255,255,0.12) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  color: var(--text-primary) !important;
  width: 32px; height: 32px; border-radius: 50%;
  font-size: 1.1rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}

.knuckle-mnemonic { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.knuckle-row { display: flex; gap: 4px; align-items: flex-end; }
.knuckle-cell {
  flex: 1;
  min-width: 30px;
  text-align: center;
  font-size: 0.7rem;
  padding: 6px 2px;
  border-radius: 6px;
  color: var(--text-secondary);
}
.knuckle-cell.knuckle-bump { background: rgba(255,255,255,0.14); color: var(--text-primary); border: 1px solid rgba(255,255,255,0.2); }
.knuckle-cell.knuckle-valley { background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.08); }
.knuckle-cell.knuckle-active { outline: 2px solid rgba(255,220,120,0.8); outline-offset: 1px; }
.knuckle-label { font-weight: 700; color: var(--text-primary); }
.knuckle-days { font-size: 0.65rem; }

.month-mode-toggle {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 20px;
}
.month-mode-toggle button {
  background: rgba(255,255,255,0.12) !important;
  border-top: 1px solid rgba(255,255,255,0.28) !important;
  border-left: 1px solid rgba(255,255,255,0.14) !important;
  border-bottom: 1px solid rgba(200,180,255,0.06) !important;
  border-right: 1px solid rgba(160,200,255,0.07) !important;
  color: var(--text-secondary) !important;
  padding: 8px 18px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
}
.month-mode-toggle button.active {
  background: rgba(180,200,255,0.22) !important;
  color: var(--text-primary) !important;
}

.month-difficulty-toggle {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-bottom: 16px;
}
.month-difficulty-toggle button {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  color: var(--text-secondary) !important;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 0.85rem;
  cursor: pointer;
}
.month-difficulty-toggle button.active {
  background: rgba(180,200,255,0.2) !important;
  color: var(--text-primary) !important;
  border-color: rgba(200,210,255,0.5) !important;
}

.month-quiz-card {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  border-top: var(--border-top) !important;
  border-left: var(--border-left) !important;
  border-bottom: var(--border-bottom) !important;
  border-right: var(--border-right) !important;
  box-shadow: var(--shadow-panel) !important;
  border-radius: 18px;
  padding: 24px;
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}
.month-question { font-size: 1.4rem; font-weight: 700; color: var(--text-primary); margin: 0 0 18px; }
.month-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.month-choices.cols-3 { grid-template-columns: repeat(3, 1fr); }
.month-choice {
  background: rgba(255,255,255,0.10) !important;
  border-top: 1px solid rgba(255,255,255,0.28) !important;
  border-left: 1px solid rgba(255,255,255,0.14) !important;
  border-bottom: 1px solid rgba(200,180,255,0.06) !important;
  border-right: 1px solid rgba(160,200,255,0.07) !important;
  color: var(--text-primary) !important;
  padding: 14px;
  border-radius: 12px;
  font-size: 1.05rem;
  font-weight: 600;
  cursor: pointer;
}
.month-choice:hover:not(:disabled) { background: rgba(255,255,255,0.16) !important; }
.month-choice.correct  { background: rgba(120,210,150,0.35) !important; border-color: rgba(140,230,170,0.6) !important; }
.month-choice.incorrect { background: rgba(220,120,120,0.35) !important; border-color: rgba(240,140,140,0.6) !important; }

.month-text-input {
  width: 100%;
  background: rgba(0,0,0,0.25) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  color: var(--text-primary) !important;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 1.1rem;
  text-align: center;
}

.month-hint-btn {
  margin-top: 12px;
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  color: var(--text-secondary) !important;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 0.85rem;
  cursor: pointer;
}
.month-feedback {
  margin-top: 14px;
  min-height: 1.4em;
  font-weight: 600;
  color: var(--text-secondary);
}
.month-feedback.correct  { color: rgba(170, 240, 190, 0.95); }
.month-feedback.incorrect { color: rgba(255, 180, 180, 0.95); }
.month-score {
  text-align: center;
  color: var(--text-muted);
  margin-top: 14px;
  font-size: 0.9rem;
}

.month-order-slots {
  display: flex; flex-wrap: wrap; gap: 6px;
  justify-content: center;
  padding: 8px;
  margin-bottom: 12px;
  border: 2px dashed rgba(255,255,255,0.18);
  border-radius: 12px;
  min-height: 60px;
}
.month-order-bank {
  display: flex; flex-wrap: wrap; gap: 6px;
  justify-content: center;
  margin-bottom: 14px;
}
.month-order-chip {
  background: rgba(255,255,255,0.12) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  color: var(--text-primary) !important;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.9rem;
  cursor: pointer;
}
.month-order-chip:hover { background: rgba(255,255,255,0.18) !important; }
.month-order-chip.placed { opacity: 0.35; cursor: not-allowed; }

.month-multi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.month-multi-tile {
  background: rgba(255,255,255,0.10) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  color: var(--text-primary) !important;
  padding: 10px;
  border-radius: 10px;
  font-size: 0.95rem;
  cursor: pointer;
}
.month-multi-tile.selected {
  background: rgba(180,200,255,0.3) !important;
  border-color: rgba(200,210,255,0.6) !important;
}