/* ── LAYER 3: AI LESSON LOADING ──────────────────────────────────────────── */

.ai-gen-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  gap: 18px;
}

.ai-gen-loading-msg {
  font-size: 1rem;
  color: #8E8C88;
  text-align: center;
  transition: opacity 0.3s;
}


/* ── LAYER 3: AI LESSON ERROR ────────────────────────────────────────────── */

.ai-gen-error-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #3C3C3B;
  margin-bottom: 8px;
}

.ai-gen-error-body {
  font-size: 0.92rem;
  color: #8E8C88;
  margin-bottom: 20px;
  line-height: 1.5;
}


/* ── CUSTOM LESSON CARD (home screen) ───────────────────────────────────── */

.custom-lesson-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 18px;
  padding: 22px 20px;
  cursor: pointer;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px rgba(102, 126, 234, 0.28);
  transition: transform 0.12s, box-shadow 0.15s;
}
.custom-lesson-card:hover  { transform: translateY(-1px); box-shadow: 0 4px 18px rgba(102,126,234,0.38); }
.custom-lesson-card:active { transform: translateY(1px); box-shadow: 0 1px 6px rgba(102,126,234,0.22); }

.custom-lesson-icon {
  font-size: 2rem;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.92);
  border-radius: 14px;
  flex-shrink: 0;
}

.custom-lesson-body {
  flex: 1;
  min-width: 0;
}

.custom-lesson-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.custom-lesson-title {
  font-size: 1rem;
  font-weight: 900;
  color: #fff;
}

.custom-lesson-badge {
  font-size: 0.68rem;
  font-weight: 800;
  background: rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.95);
  padding: 2px 8px;
  border-radius: 100px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.custom-lesson-subtitle {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.85);
  font-weight: 600;
  line-height: 1.35;
}

.custom-lesson-cta {
  font-size: 1.1rem;
  font-weight: 900;
  color: rgba(255,255,255,0.9);
  flex-shrink: 0;
}


/* ── CUSTOM LESSON SCREEN ────────────────────────────────────────────────── */

.custom-lesson-topbar-title {
  font-size: 1rem;
  font-weight: 700;
  color: #888;
}

.custom-lesson-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 24px 16px 48px;
  max-width: 520px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}


/* ── CUSTOM LESSON PREVIEW ───────────────────────────────────────────────── */

.clp-preview {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.clp-preview-header {
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--text);
  text-align: center;
  margin-bottom: 4px;
}

.clp-focus-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 16px;
  padding: 18px 16px;
  box-shadow: 0 3px 14px rgba(102,126,234,0.3);
}

.clp-focus-icon {
  font-size: 2rem;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.2);
  border-radius: 14px;
  flex-shrink: 0;
}

.clp-focus-body { flex: 1; min-width: 0; }

.clp-focus-label {
  font-size: 1rem;
  font-weight: 900;
  color: #fff;
  margin-bottom: 4px;
}

.clp-focus-reason {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.85);
  font-weight: 600;
  line-height: 1.35;
}

.clp-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.clp-stat {
  background: white;
  border: 1.5px solid #E8E5E1;
  border-radius: 14px;
  padding: 14px 12px;
  text-align: center;
}

.clp-stat-value {
  font-size: 1.4rem;
  font-weight: 900;
  color: #764ba2;
  line-height: 1.1;
}

.clp-stat-label {
  font-size: 0.78rem;
  color: #888;
  font-weight: 600;
  margin-top: 4px;
}

.btn-clp-start {
  width: 100%;
  padding: 16px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-size: 1.05rem;
  font-weight: 700;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  margin-top: 4px;
  box-shadow: 0 2px 8px rgba(102,126,234,0.28);
  transition: opacity 0.15s, transform 0.12s;
}
.btn-clp-start:hover  { opacity: 0.92; transform: translateY(-1px); }
.btn-clp-start:active { opacity: 1; transform: translateY(1px); }

.btn-clp-secondary {
  width: 100%;
  padding: 13px;
  background: none;
  color: #764ba2;
  font-size: 0.95rem;
  font-weight: 700;
  border: 2px solid #D0C0E8;
  border-radius: 14px;
  cursor: pointer;
  margin-top: 8px;
  transition: background 0.15s;
}
.btn-clp-secondary:hover { background: #F3E8FF; }


/* ── PREVIEW TOGGLES ─────────────────────────────────────────────────────── */

.clp-toggles {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg, #F5F7FA);
  border: 1.5px solid var(--border, #E8E5E1);
  border-radius: 14px;
}

.clp-toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

.clp-toggle-row--disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.clp-toggle-row input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: #764ba2;
  cursor: pointer;
  flex-shrink: 0;
  margin: 0;
}

.clp-toggle-row--disabled input[type="checkbox"] {
  cursor: not-allowed;
}

.clp-toggle-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: #555;
  line-height: 1.35;
}

.clp-coming-soon {
  font-size: 0.75rem;
  font-weight: 600;
  color: #AAA;
}

.clp-audio-note {
  font-size: 0.8rem;
  font-weight: 700;
  color: #764ba2;
  text-align: center;
  padding: 7px 14px;
  background: rgba(118, 75, 162, 0.08);
  border-radius: 10px;
  margin-top: -6px;
}

/* ── LESSON INSTRUCTIONS EXPANDABLE ──────────────────────────────────────── */

.clp-instructions-wrap {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.clp-expand-btn {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  padding: 6px 0;
  text-align: center;
  width: 100%;
  font-family: inherit;
  transition: color 0.15s;
}
.clp-expand-btn:hover { color: #764ba2; }

.clp-instructions-area {
  margin-top: 8px;
}

.clp-instructions-input {
  width: 100%;
  padding: 12px 14px;
  font-size: 0.9rem;
  font-family: inherit;
  color: var(--text);
  background: white;
  border: 1.5px solid var(--border, #E8E5E1);
  border-radius: 12px;
  resize: vertical;
  line-height: 1.5;
  transition: border-color 0.15s;
  box-sizing: border-box;
}
.clp-instructions-input:focus {
  outline: none;
  border-color: #764ba2;
}
.clp-instructions-input::placeholder {
  color: #aaa;
}

/* ── CUSTOM LESSON LOADING ───────────────────────────────────────────────── */

.clp-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px 60px;
  gap: 20px;
  min-height: 300px;
}

.clp-loading-msg {
  font-size: 1rem;
  color: #8E8C88;
  text-align: center;
  transition: opacity 0.3s ease;
}


/* ── CUSTOM LESSON ERROR ─────────────────────────────────────────────────── */

.clp-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 8px;
  gap: 8px;
  text-align: center;
}

.clp-error-icon { font-size: 2.5rem; margin-bottom: 8px; }

.clp-error-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text);
}

.clp-error-body {
  font-size: 0.9rem;
  color: #888;
  line-height: 1.5;
  margin-bottom: 12px;
}


/* ── TOO HARD BUTTON ─────────────────────────────────────────────────────── */

.btn-too-hard {
  display: block;
  margin: 12px auto 0;
  background: none;
  border: none;
  color: #B0A8C0;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 8px;
  transition: color 0.15s;
}
.btn-too-hard:hover { color: #764ba2; }


/* ── TOO HARD MODAL ──────────────────────────────────────────────────────── */

.too-hard-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 1000;
  padding: 0 0 env(safe-area-inset-bottom);
}

.too-hard-modal {
  background: var(--card-bg, #fff);
  border-radius: 20px 20px 0 0;
  padding: 24px 20px 32px;
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.too-hard-title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text, #3C3C3B);
  margin: 0;
}

.too-hard-input {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid #E0D8F0;
  border-radius: 12px;
  font-size: 0.9rem;
  font-family: inherit;
  color: var(--text, #3C3C3B);
  background: var(--card-bg, #fff);
  resize: none;
  box-sizing: border-box;
  outline: none;
}
.too-hard-input:focus { border-color: #764ba2; }

.btn-too-hard-submit {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-size: 0.95rem;
  font-weight: 800;
  border: none;
  border-radius: 12px;
  cursor: pointer;
}
.btn-too-hard-submit:hover { opacity: 0.9; }

.btn-too-hard-cancel {
  width: 100%;
  padding: 12px;
  background: none;
  color: #9C9A92;
  font-size: 0.9rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
}


/* ── STRUGGLING BANNER ───────────────────────────────────────────────────── */

.struggling-banner {
  position: fixed;
  bottom: calc(16px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: 480px;
  background: #2D2B35;
  color: #fff;
  border-radius: 16px;
  padding: 14px 16px;
  z-index: 900;
  box-shadow: 0 6px 24px rgba(0,0,0,0.25);
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: bannerSlideUp 0.25s ease;
}

@keyframes bannerSlideUp {
  from { transform: translateX(-50%) translateY(20px); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0);    opacity: 1; }
}

.struggling-banner-msg {
  font-size: 0.9rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.4;
}

.struggling-banner-actions {
  display: flex;
  gap: 8px;
}

.btn-struggling-keep {
  flex: 1;
  padding: 9px;
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.85);
  font-size: 0.85rem;
  font-weight: 700;
  border: none;
  border-radius: 10px;
  cursor: pointer;
}

.btn-struggling-easier {
  flex: 1;
  padding: 9px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-size: 0.85rem;
  font-weight: 800;
  border: none;
  border-radius: 10px;
  cursor: pointer;
}


/* ── TONE IDENTIFICATION EXERCISE ───────────────────────────────────────── */

/* 2-column grid; 5th button (Falling) spans full width */
.tone-id-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 20px 0 8px;
}

.tone-id-grid .tone-id-btn:last-child {
  grid-column: 1 / -1;
}

.tone-id-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 14px 10px;
  min-height: 64px;
  background: var(--card-bg, #fff);
  border: 2px solid #E8E5E1;
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.tone-id-btn:hover:not(:disabled) {
  background: #F8F6F3;
  border-color: #C8C5C0;
}
.tone-id-btn:active:not(:disabled) { transform: scale(0.96); }
.tone-id-btn:disabled { cursor: default; }

.tone-id-symbol {
  font-size: 1.5rem;
  line-height: 1;
  color: #5C5A55;
}

.tone-id-label {
  font-size: 0.9rem;
  font-weight: 700;
  color: #3C3C3B;
}

/* Correct answer — green */
.tone-id-btn--correct {
  background: var(--green-light) !important;
  border-color: var(--green) !important;
}
.tone-id-btn--correct .tone-id-symbol,
.tone-id-btn--correct .tone-id-label { color: #2a6a00; }

/* Wrong selection — red */
.tone-id-btn--wrong {
  background: #FDECEA !important;
  border-color: #E05C5C !important;
}
.tone-id-btn--wrong .tone-id-symbol,
.tone-id-btn--wrong .tone-id-label { color: #C62828; }

/* Reveal section (shown after answering) */
.tone-id-reveal {
  text-align: center;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #E8E5E1;
}

.tone-id-word {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-bottom: 4px;
}

.tone-id-word .thai-text  { font-size: 2rem; }
.tone-id-word .roman-text { font-size: 1rem; color: #8E8C88; }

.tone-id-word-english {
  font-size: 0.88rem;
  color: #8E8C88;
  margin-bottom: 12px;
}

/* Tone hint (shown on wrong answer) */
.tone-id-hint {
  background: #FFF8E1;
  border-left: 3px solid #F9A825;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.87rem;
  color: #5C4A00;
  text-align: left;
  margin: 0 0 12px;
  line-height: 1.5;
}

/* Replay button */
.tone-id-replay-btn {
  margin-top: 4px;
}


/* ── DARK MODE ───────────────────────────────────────────────────────────── */

@media (prefers-color-scheme: dark) {
  /* Dark mode base — warm dark body so cards don't float on light gradient */
  body { background: #131016; }
  /* Navigation bars */
  .path-topbar { background: transparent; border-bottom-color: #333; }
  .btn-back { color: #999; }
  .fluency-topbar-title { color: #999; }
  .curriculum-topbar-title { color: #999; }
  .custom-lesson-topbar-title { color: #999; }

  .ai-gen-error-title { color: #E8E5E1; }
  .ai-gen-error-body { color: #9C9A92; }

  .clp-stat {
    background: #2A2A28;
    border-color: #3D3D3A;
  }
  .clp-stat-value { color: #CE93D8; }
  .clp-stat-label { color: #9C9A92; }
  .clp-preview-header { color: #E8E5E1; }
  .clp-loading-msg { color: #9C9A92; }
  .clp-error-title { color: #E8E5E1; }
  .clp-error-body  { color: #9C9A92; }
  .btn-clp-secondary {
    color: #CE93D8;
    border-color: #4A3060;
  }
  .btn-clp-secondary:hover { background: #2E1A3E; }
  .custom-lesson-topbar-title { color: #E8E5E1; }
  .too-hard-modal { background: #2A2A28; }
  .too-hard-title { color: #E8E5E1; }
  .too-hard-input { background: #1E1E1C; border-color: #4A3060; color: #E8E5E1; }
  /* Fluency hero */
  .fluency-hero-arc  { filter: drop-shadow(0 0 20px rgba(155,122,216,0.15)); }
  .fluency-hero-name { color: #B8A0D8; }
  .fluency-hero-link { color: #B8A0D8; }
  .fluency-cefr-badge { background: #2D2640; color: #B8A0D8; border-color: #4D3A6A; }
  /* Path card */
  .path-card { background: #1C1C1E; border-color: #333; }
  .path-card-title { color: #E5E5E5; }
  .path-card-for-who { color: #999; }
  .path-card-icon { background: #2A2A2A; }
  .path-card-badge { background: #2D2640; color: #B8A0D8; }
  .path-card-arrow { color: #555; }
  .path-card-prog-fill { background: #555; }
  .path-card-prog-track { background: #333; }
  /* Curriculum nav button */
  .curriculum-nav-btn { background: #1C1C1E; border-color: #333; }
  .curriculum-nav-title { color: #999; }
  .curriculum-nav-sub { color: #666; }
  .curriculum-nav-arrow { color: #555; }
  .curriculum-topbar-title { color: #E5E5E5; }
  /* Preview screen */
  .clp-toggles { background: #1E1E1C; border-color: #3D3D3A; }
  .clp-toggle-label { color: #CCC; }
  .clp-coming-soon { color: #666; }
  .clp-audio-note { background: rgba(180,130,220,0.12); color: #C49FE0; }
  .clp-instructions-input { background: #1E1E1C; border-color: #3D3D3A; color: #E8E5E1; }
  .clp-instructions-input::placeholder { color: #666; }
  /* Fluency detail screen */
  .fluency-arc-large-hole { background: #131016; }
  .signal-bar-fill { background: #9B7AD8 !important; }
  /* Completion screen — dark mode */
  #screen-complete { background: linear-gradient(160deg, #111C2A 0%, #0F1F15 100%); }
  .cpl-stat-card { background: #2A2A28; border-color: #3D3D3A; }
  .cpl-arc-cefr { background: rgba(118,75,162,0.20); color: #CE93D8; }
  .cpl-arc-name { color: #E8E5E1; }

  /* Tone identification — dark mode */
  .tone-id-btn {
    background: #2A2A28;
    border-color: #3D3D3A;
  }
  .tone-id-btn:hover:not(:disabled) {
    background: #333330;
    border-color: #5C5A55;
  }
  .tone-id-symbol { color: #C8C5C0; }
  .tone-id-label  { color: #E8E5E1; }

  .tone-id-btn--correct {
    background: #1B3A1B !important;
    border-color: #4CAF50 !important;
  }
  .tone-id-btn--correct .tone-id-symbol,
  .tone-id-btn--correct .tone-id-label { color: #81C784; }

  .tone-id-btn--wrong {
    background: #3A1B1B !important;
    border-color: #E05C5C !important;
  }
  .tone-id-btn--wrong .tone-id-symbol,
  .tone-id-btn--wrong .tone-id-label { color: #EF9A9A; }

  .tone-id-reveal { border-top-color: #3D3D3A; }
  .tone-id-word .roman-text { color: #9C9A92; }
  .tone-id-word-english { color: #9C9A92; }
  .tone-id-hint {
    background: #2A2400;
    border-left-color: #F9A825;
    color: #F5E08A;
  }

  /* Too-hard button & cancel */
  .btn-too-hard        { color: #C8A8E0; }
  .btn-too-hard-cancel { color: #A0A0A8; }

  /* Surang intro callout */
  .surang-intro-callout { background: #1e1a2e; border-color: #553d8a; }
  .surang-intro-text    { color: #C4B5F5; }
}

/* ── SURANG INDICATOR ───────────────────────────────────────────────────────── */
.surang-indicator {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #764ba2;
  margin: 0;
  padding: 0;
  animation: surang-pulse 2s ease-in-out infinite;
}

@keyframes surang-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}

/* ── SURANG INTRO CALLOUT ───────────────────────────────────────────────────── */
.surang-intro-callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #F3E8FF;
  border: 1px solid #d8b4fe;
  border-radius: 12px;
  padding: 14px 16px;
  margin: 0 0 16px 0;
}

.surang-intro-text {
  font-size: 14px;
  color: #5b2d8e;
  line-height: 1.4;
}

.surang-intro-dismiss {
  background: #764ba2;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

.surang-intro-dismiss:hover {
  background: #5a3580;
}

/* ── 50-LESSON TRAVELER NUDGE ─────────────────────────────────────────────── */

.traveler-nudge {
  background: var(--purple-light, #F3E8FF);
  border: 1px solid var(--purple, #764ba2);
  border-radius: 12px;
  padding: 16px;
  margin: 16px 0;
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.5;
}

.traveler-nudge p {
  margin: 0;
}

@media (prefers-color-scheme: dark) {
  .traveler-nudge {
    background: #2a1f3d;
    border-color: #3a2d5a;
  }
}