/* ==========================================================================
   LINGORA — Master Platform Polish Layer
   --------------------------------------------------------------------------
   Brand Identity:
   - Primary Blue: #24599B
   - Secondary Blue: #3D7FC2
   - Light Blue: #EAF4FF
   - Background: #F7FAFE
   - White: #FFFFFF
   - Cream: #FFF7EA
   - Caramel: #F1C58D
   - Orange: #F39A38
   - Main Text: #1B3456
   - Secondary Text: #75859A
   - Border: #DCE6F2
   - Success: #3D9B83
   - Error: #D85A64
   ========================================================================== */

:root {
  --lp-blue: #24599B;
  --lp-blue-1: #24599B;
  --lp-blue-2: #3D7FC2;
  --lp-blue-soft: #EAF4FF;
  --lp-blue-light: #EAF4FF;
  --lp-bg: #F7FAFE;
  --lp-cream: #FFF7EA;
  --lp-caramel: #F1C58D;
  --lp-orange: #F39A38;
  --lp-text: #1B3456;
  --lp-muted: #75859A;
  --lp-border: #DCE6F2;
  --lp-success: #3D9B83;
  --lp-error: #D85A64;
  --lp-radius: 18px;
  --lp-radius-sm: 12px;
  --lp-shadow: 0 2px 10px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.02);
  --lp-shadow-hover: 0 8px 24px -4px rgba(36, 89, 155, 0.16);
}

/* ==========================================================================
   1. GLOBAL FRAME & CARD ELEVATION SYSTEM
   ========================================================================== */
.lingora-platform-main {
  background: var(--lp-bg);
  min-height: calc(100vh - 68px);
  padding: 24px;
}

.platform-page-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 1360px;
  margin: 0 auto;
  min-width: 0;
}

/* Base Card Frame */
.dash-section-card,
.create-post-card,
.community-post-card,
.lesson-select-card,
.interactive-lesson-player,
.placement-test-card,
.arena-solo-card,
.arena-pvp-card,
.leaderboard-table-card,
.creator-metric-card,
.shop-item-card,
.mascot-collection-card,
.private-room-card,
.partner-card,
.profile-hero-card,
.auth-card,
.llm-card {
  background: #ffffff;
  border: 1.5px solid var(--lp-border);
  border-radius: var(--lp-radius);
  box-shadow: var(--lp-shadow);
  transition: all 0.2s ease;
}

/* Interactive Lift */
.lesson-select-card:hover,
.community-post-card:hover,
.mascot-collection-card:hover,
.shop-item-card:hover,
.private-room-card:hover,
.partner-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--lp-shadow-hover);
  border-color: var(--lp-blue-2);
}

/* Section Headings */
.dash-section-title {
  color: var(--lp-text);
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.dash-section-sub {
  color: var(--lp-muted);
  font-size: 13.5px;
  margin: 0 0 16px;
  line-height: 1.5;
}

/* ==========================================================================
   2. LEARNING PAGE (/learning) — CARDS, PILLS & INTERACTIVE PLAYER
   ========================================================================== */
.learning-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 6px;
}

/* 4 Language Progress Cards */
.learning-progress-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.lps-card {
  background: #ffffff;
  border: 1.5px solid var(--lp-border);
  border-radius: 16px;
  padding: 14px 16px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  box-shadow: var(--lp-shadow);
  transition: all 0.2s ease;
}

.lps-card:hover {
  transform: translateY(-2px);
  border-color: var(--lp-blue-2);
  box-shadow: 0 4px 16px rgba(36, 89, 155, 0.12);
}

.lps-card.active {
  border: 2px solid var(--lp-blue);
  background: linear-gradient(180deg, var(--lp-blue-soft) 0%, #ffffff 80%);
  box-shadow: 0 4px 16px rgba(36, 89, 155, 0.16);
}

.lps-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 13.5px;
  color: var(--lp-text);
}

.lps-pct {
  font-weight: 800;
  color: var(--lp-blue);
  font-size: 13px;
}

/* Search & Filters Bar */
.learning-filters-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  background: #ffffff;
  border: 1.5px solid var(--lp-border);
  border-radius: 16px;
  padding: 14px 18px;
  box-shadow: var(--lp-shadow);
}

.lfb-search {
  flex: 1;
  min-width: 240px;
}

.lfb-selects {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.lfb-selects select.lingora-select {
  padding: 8px 14px;
  border: 1.5px solid var(--lp-border);
  border-radius: 10px;
  background: #ffffff;
  color: var(--lp-text);
  font-size: 13px;
  font-weight: 600;
  outline: none;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.lfb-selects select.lingora-select:focus {
  border-color: var(--lp-blue-2);
  box-shadow: 0 0 0 3px rgba(61, 127, 194, 0.15);
}

/* Lesson Selection Cards Grid */
.lessons-selector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.lesson-select-card {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
}

.lesson-select-card.active {
  border: 2px solid var(--lp-blue);
  background: linear-gradient(180deg, #f0f7ff 0%, #ffffff 70%);
  box-shadow: 0 6px 20px rgba(36, 89, 155, 0.14);
}

.lsc-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.lsc-lang {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 9999px;
  background: var(--lp-blue-soft);
  color: var(--lp-blue);
  font-size: 11.5px;
  font-weight: 700;
}

.lsc-diff {
  font-size: 12px;
  font-weight: 600;
  color: var(--lp-muted);
}

.lsc-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--lp-text);
  line-height: 1.4;
  margin: 0;
}

/* CRITICAL FIX: Skill Badges separated into distinct rounded pills */
.lsc-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 6px;
}

.skill-mini-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 9999px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #334155;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
}

.lsc-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12.5px;
  color: var(--lp-muted);
  padding-top: 10px;
  border-top: 1px dashed var(--lp-border);
  margin-top: auto;
}

.lsc-status {
  font-weight: 700;
  color: #059669;
}

/* Active Interactive Lesson Player */
.interactive-lesson-player {
  border: 2px solid var(--lp-blue);
  border-radius: 22px;
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-shadow: 0 4px 24px rgba(36, 89, 155, 0.1);
}

.ilp-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1.5px solid var(--lp-border);
}

.ilp-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 9999px;
  background: var(--lp-blue-soft);
  color: var(--lp-blue);
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 6px;
}

.ilp-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--lp-text);
  margin: 0;
  line-height: 1.3;
}

.ilp-xp-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 9999px;
  background: var(--lp-cream);
  border: 1px solid var(--lp-caramel);
  color: #92400e;
  font-size: 13px;
  font-weight: 700;
}

/* Objectives and Pronunciation Columns */
.ilp-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.ilp-box {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  padding: 16px 18px;
}

.ilp-box h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--lp-text);
  margin: 0 0 10px;
}

.ilp-box ul {
  margin: 0;
  padding-left: 18px;
  color: #334155;
  font-size: 13.5px;
  line-height: 1.6;
}

.ilp-box.cream {
  background: #fffbeb;
  border-color: #fde68a;
}

.speech-capability-note {
  margin-top: 10px;
  padding: 8px 12px;
  background: #ffffff;
  border: 1px dashed var(--lp-orange);
  border-radius: 8px;
  font-size: 12px;
  color: #92400e;
  line-height: 1.5;
}

/* Vocabulary Grid */
.ilp-vocab-section h4 {
  font-size: 16px;
  font-weight: 700;
  color: var(--lp-text);
  margin: 0 0 12px;
}

.ilp-vocab-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 12px;
}

.ilp-vocab-card {
  background: #ffffff;
  border: 1.5px solid var(--lp-border);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.03);
  transition: all 0.15s ease;
}

.ilp-vocab-card:hover {
  border-color: var(--lp-blue-2);
  box-shadow: 0 4px 12px rgba(36, 89, 155, 0.08);
}

.ivc-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.ivc-word {
  font-size: 18px;
  font-weight: 800;
  color: var(--lp-text);
  margin-right: 6px;
}

.ivc-reading {
  font-size: 13px;
  color: var(--lp-muted);
}

.ivc-meaning {
  font-size: 14px;
  font-weight: 600;
  color: #334155;
  margin-bottom: 4px;
}

.ivc-example {
  font-size: 12.5px;
  color: #64748b;
  line-height: 1.5;
}

/* Exercise Stage */
.ilp-exercise-stage {
  background: #f8fafc;
  border: 1.5px solid var(--lp-border);
  border-radius: 16px;
  padding: 20px 22px;
}

.ilp-ex-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}

.ilp-ex-header h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--lp-text);
  margin: 0;
}

.ilp-step-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.step-dot-btn {
  padding: 5px 12px;
  border-radius: 9999px;
  border: 1.5px solid var(--lp-border);
  background: #ffffff;
  color: #475569;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.step-dot-btn:hover {
  border-color: var(--lp-blue-2);
  color: var(--lp-blue);
  background: var(--lp-blue-soft);
}

.step-dot-btn.active {
  background: var(--lp-blue);
  border-color: var(--lp-blue);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(36, 89, 155, 0.3);
}

.step-dot-btn.done {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #065f46;
}

.ilp-ex-nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--lp-border);
}

/* Matching Rows */
.lec-match-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 14px 0;
}

.lec-match-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #ffffff;
  border: 1.5px solid var(--lp-border);
  border-radius: 12px;
  padding: 10px 14px;
}

.lec-match-left {
  flex: 1;
  font-weight: 700;
  color: var(--lp-text);
}

.lec-match-arrow {
  color: var(--lp-blue-2);
  font-weight: 800;
}

.lec-match-select {
  flex: 1.2;
}

/* ==========================================================================
   3. COMMUNITY PAGE (/community) — TABS, POST CARDS & INTERACTIONS
   ========================================================================== */
.community-layout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) 340px;
  gap: 22px;
  align-items: start;
}

/* CRITICAL FIX: Filter Bar with Category Tabs and Language Chips */
.community-filter-bar {
  background: #ffffff;
  border: 1.5px solid var(--lp-border);
  border-radius: var(--lp-radius);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--lp-shadow);
  margin-bottom: 18px;
}

.cfb-cats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.cfb-langs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px dashed #e2e8f0;
}

.cfb-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: 9999px;
  border: 1.5px solid var(--lp-border);
  background: #ffffff;
  color: var(--lp-text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
}

.cfb-tab:hover {
  border-color: var(--lp-blue-2);
  background: var(--lp-blue-soft);
  color: var(--lp-blue);
}

.cfb-tab.active {
  background: var(--lp-blue);
  border-color: var(--lp-blue);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(36, 89, 155, 0.3);
}

.lang-topic-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 13px;
  border-radius: 9999px;
  border: 1.5px solid #e2e8f0;
  background: #f8fafc;
  color: #475569;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
}

.lang-topic-chip:hover {
  border-color: var(--lp-blue-2);
  background: var(--lp-blue-soft);
  color: var(--lp-blue);
}

.lang-topic-chip.active {
  background: var(--lp-blue-2);
  border-color: var(--lp-blue-2);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(61, 127, 194, 0.3);
}

/* Create Post Card */
.create-post-card {
  padding: 20px 22px;
  margin-bottom: 18px;
}

/* Community Post Cards */
.community-post-card {
  padding: 20px 22px;
  margin-bottom: 16px;
}

.cpc-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.cpc-author {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.cpc-author-name {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--lp-text);
}

.cpc-meta-line {
  font-size: 12px;
  color: var(--lp-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.cpc-lvl-pill,
.cpc-cat-badge {
  padding: 2px 8px;
  border-radius: 9999px;
  background: var(--lp-blue-soft);
  color: var(--lp-blue);
  font-size: 11px;
  font-weight: 700;
}

.cpc-title {
  font-size: 16.5px;
  font-weight: 800;
  color: var(--lp-text);
  line-height: 1.4;
  margin: 0 0 8px;
}

.cpc-content {
  font-size: 14px;
  color: #334155;
  line-height: 1.65;
  margin: 0 0 12px;
}

.cpc-attachment-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 10px;
  background: var(--lp-cream);
  border: 1px solid var(--lp-caramel);
  color: #92400e;
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 12px;
}

.cpc-interaction-bar {
  display: flex;
  gap: 10px;
  align-items: center;
  padding-top: 10px;
  border-top: 1px dashed #e2e8f0;
  margin-top: 12px;
  flex-wrap: wrap;
}

.cpc-act-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 9999px;
  border: 1.5px solid var(--lp-border);
  background: #f8fafc;
  color: #334155;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.cpc-act-btn:hover {
  background: var(--lp-blue-soft);
  border-color: var(--lp-blue-2);
  color: var(--lp-blue);
}

.cpc-act-btn.active {
  background: var(--lp-blue-soft);
  border-color: var(--lp-blue);
  color: var(--lp-blue);
  font-weight: 700;
}

.cpc-comments-box {
  background: #f8fafc;
  border-radius: 12px;
  padding: 12px 14px;
  margin-top: 12px;
  border: 1px solid #e2e8f0;
}

.cpc-comments-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

.cpc-comment-item {
  font-size: 13px;
  line-height: 1.5;
  color: #1e293b;
}

.cpc-comment-item small {
  color: #94a3b8;
  margin-left: 6px;
}

.cpc-comment-input-row {
  display: flex;
  gap: 8px;
}

/* ==========================================================================
   4. DASHBOARD, SIDEBAR & MASCOT ASSISTANT BOX
   ========================================================================== */
.sidebar-assistant-card {
  background: linear-gradient(135deg, #fffbeb 0%, #ffffff 70%);
  border: 1.5px solid var(--lp-caramel);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 2px 8px rgba(243, 154, 56, 0.08);
}

.sidebar-assistant-card .sac-speech-bubble {
  background: #ffffff;
  border: 1px solid #fde68a;
  border-radius: 12px;
  padding: 8px 12px;
  font-size: 12px;
  color: #92400e;
  line-height: 1.5;
  margin: 10px 0;
}

.sidebar-assistant-card .sac-buttons-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Welcome Banner in Dashboard */
.dash-welcome-banner {
  background: linear-gradient(120deg, var(--lp-blue-soft) 0%, #ffffff 50%, var(--lp-cream) 100%);
  border: 1.5px solid var(--lp-border);
  border-radius: 22px;
  padding: 24px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  box-shadow: var(--lp-shadow);
}

.dwb-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.dwb-level-pill {
  padding: 4px 12px;
  border-radius: 9999px;
  background: var(--lp-blue);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
}

.dwb-title-pill {
  padding: 4px 12px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #ffe8c2 0%, var(--lp-caramel) 100%);
  color: #7a4a10;
  font-size: 12px;
  font-weight: 800;
}

.dwb-demo-tag {
  padding: 3px 10px;
  border-radius: 9999px;
  background: #ffffff;
  border: 1px dashed var(--lp-border);
  font-size: 11px;
  color: var(--lp-muted);
}

.dwb-greeting {
  font-size: 24px;
  font-weight: 800;
  color: var(--lp-text);
  margin: 10px 0 6px;
}

.dwb-motivational {
  font-size: 14px;
  color: #475569;
  margin: 0;
}

.dwb-mascot-frame {
  background: #ffffff;
  border: 2px solid var(--lp-caramel);
  border-radius: 20px;
  padding: 12px 16px;
  text-align: center;
  box-shadow: 0 4px 16px rgba(243, 154, 56, 0.12);
}

.dwb-mascot-caption {
  font-size: 12px;
  font-weight: 700;
  color: #92400e;
  margin-top: 6px;
}

/* ==========================================================================
   5. ARENA, LEADERBOARD, CREATOR HUB, SHOP & SETTINGS POLISH
   ========================================================================== */
/* Arena Cards */
.arena-hero-banner {
  background: linear-gradient(120deg, #1b3456 0%, #24599b 60%, #3d7fc2 100%);
  color: #ffffff;
  border-radius: 22px;
  padding: 26px 30px;
  box-shadow: 0 8px 24px rgba(27, 52, 86, 0.2);
}

.arena-mode-tab {
  padding: 8px 18px;
  border-radius: 9999px;
  border: 1.5px solid var(--lp-border);
  background: #ffffff;
  color: var(--lp-text);
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s ease;
}

.arena-mode-tab.active {
  background: var(--lp-blue);
  border-color: var(--lp-blue);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(36, 89, 155, 0.3);
}

.aqc-opt-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 12px 16px;
  border-radius: var(--lp-radius-sm);
  border: 1.5px solid var(--lp-border);
  background: #ffffff;
  color: var(--lp-text);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.aqc-opt-btn:hover {
  border-color: var(--lp-blue-2);
  background: var(--lp-blue-soft);
}

.aqc-opt-btn.selected {
  border-color: var(--lp-blue);
  background: var(--lp-blue-soft);
}

.aqc-opt-btn.correct {
  border-color: var(--lp-success);
  background: #ecfdf5;
  color: #065f46;
}

.aqc-opt-btn.wrong {
  border-color: var(--lp-error);
  background: #fff1f2;
  color: #9f1239;
}

/* Leaderboard */
.leaderboard-table-card {
  padding: 20px 22px;
}

.leaderboard-full-row {
  display: grid;
  grid-template-columns: 50px minmax(0, 1.6fr) 130px 140px 120px;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1.5px solid var(--lp-border);
  background: #ffffff;
  margin-bottom: 8px;
  transition: all 0.15s ease;
}

.leaderboard-full-row:hover {
  border-color: var(--lp-blue-2);
  box-shadow: 0 2px 10px rgba(36, 89, 155, 0.08);
}

.leaderboard-full-row.highlight-kk {
  background: linear-gradient(135deg, #fffbeb 0%, #fff7ea 100%);
  border: 2px solid var(--lp-orange);
  box-shadow: 0 4px 16px rgba(243, 154, 56, 0.15);
}

/* Shop */
.shop-hero-banner {
  background: linear-gradient(120deg, var(--lp-cream) 0%, #ffffff 50%, var(--lp-blue-soft) 100%);
  border: 1.5px solid var(--lp-caramel);
  border-radius: 22px;
  padding: 24px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.shop-balance-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #ffffff;
  border: 2px solid var(--lp-caramel);
  border-radius: 16px;
  padding: 14px 20px;
  box-shadow: 0 4px 14px rgba(243, 154, 56, 0.12);
}

.sbc-label {
  font-size: 12px;
  font-weight: 700;
  color: #92400e;
}

.sbc-amount {
  font-size: 26px;
  font-weight: 800;
  color: #b45309;
}

.shop-item-card {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sic-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sic-icon {
  font-size: 32px;
}

.sic-cat {
  padding: 3px 10px;
  border-radius: 9999px;
  background: var(--lp-blue-soft);
  color: var(--lp-blue);
  font-size: 11px;
  font-weight: 700;
}

.sic-title {
  font-size: 16.5px;
  font-weight: 800;
  color: var(--lp-text);
  margin: 4px 0 2px;
}

.sic-desc {
  font-size: 13px;
  color: #475569;
  line-height: 1.5;
  margin: 0;
}

.sic-req {
  font-size: 12px;
  color: #92400e;
  background: #fffbeb;
  border: 1px dashed #fde68a;
  border-radius: 8px;
  padding: 6px 10px;
}

.sic-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px dashed var(--lp-border);
}

.sic-price {
  font-size: 16px;
  font-weight: 800;
  color: #b45309;
}

/* Interface Languages Grid */
.interface-lang-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.interface-lang-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 16px;
  border: 1.5px solid var(--lp-border);
  background: #ffffff;
  cursor: pointer;
  text-align: left;
  font: inherit;
  box-shadow: var(--lp-shadow);
  transition: all 0.18s ease;
}

.interface-lang-card:hover {
  border-color: var(--lp-blue-2);
  background: var(--lp-blue-soft);
  transform: translateY(-2px);
}

.interface-lang-card.active {
  border: 2px solid var(--lp-blue);
  background: linear-gradient(180deg, var(--lp-blue-soft) 0%, #ffffff 80%);
  box-shadow: 0 4px 14px rgba(36, 89, 155, 0.15);
}

.ilc-flag {
  font-size: 28px;
}

.ilc-texts {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.ilc-texts strong {
  font-size: 14.5px;
  color: var(--lp-text);
}

.ilc-texts span {
  font-size: 12px;
  color: var(--lp-muted);
}

.ilc-check {
  font-size: 12px;
  font-weight: 700;
  color: var(--lp-blue);
}

/* ==========================================================================
   6. RESPONSIVE DESIGN
   ========================================================================== */
@media (max-width: 1100px) {
  .learning-progress-strip {
    grid-template-columns: repeat(2, 1fr);
  }
  .ilp-info-grid {
    grid-template-columns: 1fr;
  }
  .community-layout-grid {
    grid-template-columns: 1fr;
  }
  .leaderboard-full-row {
    grid-template-columns: 40px minmax(0, 1.4fr) 110px 100px;
  }
  .lfr-langs-col {
    display: none;
  }
}

@media (max-width: 640px) {
  .lingora-platform-main {
    padding: 14px;
  }
  .learning-progress-strip {
    grid-template-columns: 1fr;
  }
  .learning-filters-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .lfb-selects {
    flex-direction: column;
  }
  .lessons-selector-grid {
    grid-template-columns: 1fr;
  }
  .interactive-lesson-player {
    padding: 16px;
  }
  .cfb-cats,
  .cfb-langs {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: thin;
  }
  .cfb-tab,
  .lang-topic-chip {
    flex: 0 0 auto;
  }
}

/* ==========================================================================
   FEATURE 1: SPACED REPETITION (SRS) STYLES
   ========================================================================== */

.srs-page-container,
.daily-quests-page-container,
.speech-page-container,
.stroke-page-container,
.analytics-page-container,
.weakness-page-container {
  padding: 0;
  max-width: 1360px;
  margin: 0 auto;
  width: 100%;
}

.srs-header-banner,
.quest-hero-banner,
.speech-hero-banner,
.stroke-hero-banner,
.analytics-hero-banner {
  background: linear-gradient(135deg, #ffffff 0%, var(--lp-blue-light) 60%, var(--lp-cream) 100%);
  border: 1.5px solid var(--lp-border);
  border-radius: 20px;
  padding: 24px 28px;
  margin-bottom: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  box-shadow: 0 4px 16px rgba(36, 89, 155, 0.05);
}

.srs-pill-badge,
.quest-pill-tag,
.speech-pill-badge,
.stroke-pill-badge,
.analytics-pill-badge {
  display: inline-block;
  background: var(--lp-blue-1);
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 4px 12px;
  border-radius: 9999px;
  margin-bottom: 8px;
}

.srs-page-title,
.quest-page-title,
.speech-page-title,
.stroke-page-title,
.analytics-page-title {
  font-size: 24px;
  font-weight: 800;
  color: var(--lp-text);
  margin: 0 0 6px;
}

.srs-page-subtitle,
.quest-page-subtitle,
.speech-page-subtitle,
.stroke-page-subtitle,
.analytics-page-subtitle {
  font-size: 14px;
  color: #64748b;
  margin: 0;
  max-width: 760px;
  line-height: 1.6;
}

.srs-toggle-practice-btn {
  background: #EAF4FF !important;
  border: 1.5px solid #3D7FC2 !important;
  color: #24599B !important;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 1px 3px rgba(36, 89, 155, 0.08);
}

.srs-toggle-practice-btn:hover,
.srs-toggle-practice-btn.active {
  background: #24599B !important;
  color: #ffffff !important;
  border-color: #24599B !important;
}

/* 4 Metrics Grid */
.srs-stats-grid,
.analytics-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.srs-stat-card,
.kpi-card {
  background: #ffffff;
  border: 1.5px solid var(--lp-border);
  border-radius: 16px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
}

.srs-stat-icon,
.kpi-icon {
  font-size: 28px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--lp-blue-light);
  border-radius: 12px;
  flex-shrink: 0;
}

.due-stat .srs-stat-icon { background: #fee2e2; }
.learning-stat .srs-stat-icon { background: #fef3c7; }
.reviewing-stat .srs-stat-icon { background: #e0f2fe; }
.mastered-stat .srs-stat-icon { background: #dcfce7; }

.srs-stat-value,
.kpi-val {
  display: block;
  font-size: 22px;
  font-weight: 800;
  color: var(--lp-text);
  line-height: 1.2;
}

.srs-stat-label,
.kpi-label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: #64748b;
  margin-top: 2px;
}

/* 2-Column SRS Viewport */
.srs-two-column-layout {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 24px;
  align-items: start;
}

.srs-flashcard {
  background: #ffffff;
  border: 2px solid var(--lp-border);
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(36, 89, 155, 0.07);
  display: flex;
  flex-direction: column;
  min-height: 460px;
}

.srs-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1.5px solid var(--lp-border);
  margin-bottom: 20px;
}

.srs-card-tags {
  display: flex;
  gap: 8px;
  align-items: center;
}

.srs-hsk-badge,
.srs-stroke-badge,
.srs-state-badge {
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 9999px;
  background: #f1f5f9;
  color: #475569;
}

.srs-state-badge.state-learning { background: #fef3c7; color: #92400e; }
.srs-state-badge.state-reviewing { background: #e0f2fe; color: #075985; }
.srs-state-badge.state-mastered { background: #dcfce7; color: #166534; }

.srs-card-counter {
  font-size: 13px;
  color: #64748b;
}

.srs-card-front {
  text-align: center;
  padding: 30px 20px 20px;
}

.srs-character-display {
  font-size: 96px;
  font-weight: 800;
  color: var(--lp-blue-1);
  line-height: 1;
  margin-bottom: 20px;
  user-select: none;
}

.srs-tts-circle-btn {
  background: #EAF4FF !important;
  border: 1.5px solid #3D7FC2 !important;
  color: #24599B !important;
  font-size: 14px;
  font-weight: 700;
  padding: 8px 20px;
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.srs-tts-circle-btn:hover {
  background: #24599B !important;
  color: #ffffff !important;
  border-color: #24599B !important;
}

.srs-reveal-trigger-wrap {
  margin-top: auto;
  text-align: center;
  padding-top: 24px;
}

.srs-reveal-btn {
  background: linear-gradient(135deg, #24599B 0%, #3D7FC2 100%) !important;
  color: #ffffff !important;
  border: none;
  font-size: 16px;
  font-weight: 800;
  padding: 14px 28px;
  border-radius: 14px;
  cursor: pointer;
  width: 100%;
  transition: all 0.15s ease;
  box-shadow: 0 4px 14px rgba(36, 89, 155, 0.25);
}

.srs-reveal-btn:hover {
  background: linear-gradient(135deg, #1B457D 0%, #2A64A0 100%) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(36, 89, 155, 0.35);
}

.srs-shortcut-hint {
  font-size: 12px;
  color: #94a3b8;
  margin-top: 8px;
}

/* Card Back */
.srs-card-back {
  padding-top: 10px;
  border-top: 1.5px dashed var(--lp-border);
  margin-top: 16px;
}

.srs-pinyin-display {
  font-size: 24px;
  font-weight: 700;
  color: var(--lp-orange);
  text-align: center;
  margin-bottom: 4px;
}

.srs-meaning-display {
  font-size: 18px;
  font-weight: 700;
  color: var(--lp-text);
  text-align: center;
  margin-bottom: 16px;
}

.srs-example-box {
  background: #f8fafc;
  border: 1.5px solid var(--lp-border);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 20px;
}

.srs-example-label {
  font-size: 11.5px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.srs-example-zh {
  font-size: 16px;
  font-weight: 700;
  color: var(--lp-text);
  margin-bottom: 2px;
}

.srs-example-pinyin {
  font-size: 13.5px;
  color: #64748b;
  margin-bottom: 2px;
}

.srs-example-th {
  font-size: 13.5px;
  color: #334155;
  margin-bottom: 8px;
}

.srs-example-audio-btn {
  background: #ffffff;
  border: 1px solid var(--lp-border);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  cursor: pointer;
  color: var(--lp-blue-1);
}

.srs-example-audio-btn:hover {
  background: var(--lp-blue-light);
}

/* SM-2 4-Tier Buttons */
.srs-rating-container {
  margin-top: 16px;
}

.srs-rating-prompt {
  font-size: 13px;
  font-weight: 700;
  color: #475569;
  margin-bottom: 10px;
  text-align: center;
}

.srs-rating-buttons-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.srs-rate-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 6px;
  border-radius: 12px;
  border: 2px solid var(--lp-border);
  background: #ffffff;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.rate-emoji { font-size: 16px; margin-bottom: 3px; }
.rate-title { font-size: 13px; font-weight: 800; color: inherit; }
.rate-sub { font-size: 11px; font-weight: 600; opacity: 0.85; margin-top: 2px; }

.rate-1-again {
  background: #fef2f2 !important;
  border-color: #fca5a5 !important;
  color: #991b1b !important;
}
.rate-1-again:hover {
  background: #fee2e2 !important;
  border-color: #ef4444 !important;
  transform: translateY(-1px);
}

.rate-2-hard {
  background: #fffbeb !important;
  border-color: #fde68a !important;
  color: #92400e !important;
}
.rate-2-hard:hover {
  background: #fef3c7 !important;
  border-color: #f59e0b !important;
  transform: translateY(-1px);
}

.rate-3-good {
  background: #eff6ff !important;
  border-color: #bfdbfe !important;
  color: #1e40af !important;
}
.rate-3-good:hover {
  background: #dbeafe !important;
  border-color: #3b82f6 !important;
  transform: translateY(-1px);
}

.rate-4-easy {
  background: #f0fdf4 !important;
  border-color: #a7f3d0 !important;
  color: #065f46 !important;
}
.rate-4-easy:hover {
  background: #dcfce7 !important;
  border-color: #10b981 !important;
  transform: translateY(-1px);
}

/* Forgetting Curve Card */
.srs-curve-card {
  background: #ffffff;
  border: 1.5px solid var(--lp-border);
  border-radius: 20px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
}

.srs-curve-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.srs-curve-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--lp-text);
  margin: 0;
}

.srs-retention-pill {
  background: #dcfce7;
  color: #166534;
  font-size: 12px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 9999px;
}

.srs-curve-desc {
  font-size: 12.5px;
  color: #64748b;
  margin: 0 0 14px;
}

.srs-svg-graph-wrap {
  width: 100%;
  overflow: hidden;
  border-radius: 12px;
  background: #fbfcfe;
  border: 1px solid #f1f5f9;
  padding: 8px 4px;
}

.forgetting-curve-svg {
  width: 100%;
  height: auto;
  display: block;
}

.srs-curve-legend {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
  font-size: 11.5px;
  color: #475569;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.legend-color {
  width: 14px;
  height: 4px;
  border-radius: 2px;
  display: inline-block;
}

.legend-color.no-review { background: #ef4444; }
.legend-color.review-1 { background: #f59e0b; }
.legend-color.review-2 { background: #3b82f6; }
.legend-color.review-sm2 { background: #24599b; height: 5px; }

.srs-tip-box {
  background: #ffffff;
  border: 1.5px solid var(--lp-border);
  border-radius: 16px;
  padding: 18px;
}

.srs-tip-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--lp-text);
  margin-bottom: 8px;
}

.srs-tip-list {
  padding-left: 18px;
  margin: 0;
  font-size: 12px;
  color: #475569;
  line-height: 1.6;
}

/* Session Complete Card */
.srs-complete-card {
  background: #ffffff;
  border: 2px solid var(--lp-border);
  border-radius: 20px;
  padding: 40px 30px;
  text-align: center;
  box-shadow: 0 4px 24px rgba(36, 89, 155, 0.08);
}

.srs-complete-icon { font-size: 54px; margin-bottom: 12px; }
.srs-complete-title { font-size: 22px; font-weight: 800; color: var(--lp-text); margin: 0 0 8px; }
.srs-complete-desc { font-size: 14px; color: #64748b; max-width: 500px; margin: 0 auto 24px; line-height: 1.6; }

.srs-complete-stats {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 28px;
}

.sc-stat {
  background: #f8fafc;
  border: 1.5px solid var(--lp-border);
  border-radius: 14px;
  padding: 12px 18px;
}

.sc-val { display: block; font-size: 20px; font-weight: 800; color: var(--lp-blue-1); }
.sc-lbl { font-size: 12px; color: #64748b; font-weight: 600; }

.srs-complete-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.btn-primary-action {
  background: var(--lp-blue-1);
  color: #ffffff;
  border: none;
  font-size: 14px;
  font-weight: 700;
  padding: 12px 24px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-primary-action:hover { background: var(--lp-blue-2); }

.btn-secondary-action {
  background: #ffffff;
  color: var(--lp-text);
  border: 1.5px solid var(--lp-border);
  font-size: 14px;
  font-weight: 700;
  padding: 12px 24px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-secondary-action:hover { background: #f8fafc; }

/* ==========================================================================
   FEATURE 2: DAILY QUESTS & MASCOT EVOLUTION STYLES
   ========================================================================== */

.quest-streak-display {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.streak-badge-main {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  border: 2px solid #fdba74;
  border-radius: 16px;
  padding: 10px 18px;
  box-shadow: 0 4px 12px rgba(243, 154, 56, 0.15);
}

.streak-flame {
  font-size: 32px;
  animation: pulse-flame 1.5s infinite ease-in-out;
}

@keyframes pulse-flame {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

.streak-num {
  display: block;
  font-size: 22px;
  font-weight: 800;
  color: #c2410c;
  line-height: 1.1;
}

.streak-lbl {
  font-size: 11.5px;
  font-weight: 700;
  color: #ea580c;
}

.streak-sub-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: #475569;
}

.quest-simulation-box {
  background: #ffffff;
  border: 2px solid var(--lp-caramel);
  border-radius: 18px;
  padding: 18px 22px;
  max-width: 340px;
  box-shadow: 0 4px 14px rgba(241, 197, 141, 0.2);
}

.sim-box-title {
  font-size: 13px;
  font-weight: 800;
  color: #92400e;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.sim-box-desc {
  font-size: 12px;
  color: #64748b;
  margin: 0 0 12px;
  line-height: 1.5;
}

.btn-simulate-day {
  background: linear-gradient(135deg, var(--lp-orange) 0%, #ea580c 100%);
  color: #ffffff;
  border: none;
  font-size: 14px;
  font-weight: 800;
  padding: 10px 18px;
  border-radius: 12px;
  cursor: pointer;
  width: 100%;
  box-shadow: 0 4px 12px rgba(234, 88, 12, 0.25);
  transition: all 0.15s ease;
}

.btn-simulate-day:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(234, 88, 12, 0.35);
}

.quest-grid-layout {
  display: grid;
  grid-template-columns: 1.25fr 0.85fr;
  gap: 24px;
}

.quests-cards-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.daily-quest-card {
  background: #ffffff;
  border: 1.5px solid var(--lp-border);
  border-radius: 18px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
  transition: all 0.15s ease;
}

.daily-quest-card.is-completed {
  border-color: #86efac;
  background: #f0fdf4;
}

.dqc-icon-wrap {
  font-size: 28px;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--lp-blue-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dqc-content {
  flex: 1;
  min-width: 0;
}

.dqc-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.dqc-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--lp-text);
  margin: 0;
}

.dqc-rewards {
  display: flex;
  gap: 6px;
}

.reward-xp {
  background: var(--lp-blue-light);
  color: var(--lp-blue-1);
  font-size: 11px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 6px;
}

.reward-coins {
  background: var(--lp-cream);
  color: #92400e;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 6px;
}

.dqc-desc {
  font-size: 12.5px;
  color: #64748b;
  margin: 0 0 8px;
}

.dqc-progress-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dqc-counter {
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  min-width: 40px;
  text-align: right;
}

.btn-quest-go {
  background: linear-gradient(135deg, #24599B 0%, #3D7FC2 100%) !important;
  color: #ffffff !important;
  border: none;
  font-size: 12.5px;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(36, 89, 155, 0.2);
  transition: all 0.15s ease;
}

.btn-quest-go:hover {
  background: linear-gradient(135deg, #1B457D 0%, #2A64A0 100%) !important;
  transform: translateY(-1px);
}

.badge-completed {
  color: #166534;
  font-size: 12.5px;
  font-weight: 700;
  background: #dcfce7;
  padding: 6px 14px;
  border-radius: 9999px;
  white-space: nowrap;
}

/* Mascot Evolution Stage */
.evolution-mascot-stage {
  background: linear-gradient(180deg, #ffffff 0%, var(--lp-cream) 100%);
  border: 1.5px solid var(--lp-border);
  border-radius: 20px;
  padding: 24px;
  text-align: center;
  margin-bottom: 20px;
}

.evo-svg-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}

.evo-mascot-name {
  font-size: 18px;
  font-weight: 800;
  color: var(--lp-text);
}

.evo-mascot-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--lp-orange);
  margin-top: 2px;
}

.milestones-timeline {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.milestone-item {
  display: flex;
  gap: 14px;
  background: #ffffff;
  border: 1.5px solid var(--lp-border);
  border-radius: 14px;
  padding: 14px 16px;
  align-items: flex-start;
}

.milestone-item.unlocked {
  border-color: #86efac;
  background: #f0fdf4;
}

.ms-marker {
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 2px;
}

.ms-info { flex: 1; }

.ms-title {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: var(--lp-text);
  margin-bottom: 3px;
}

.ms-days {
  font-size: 12px;
  font-weight: 700;
  color: var(--lp-orange);
}

.ms-desc {
  font-size: 12px;
  color: #64748b;
  margin: 0 0 6px;
}

.ms-status-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
}

.ms-status-tag.unlocked { background: #dcfce7; color: #166534; }
.ms-status-tag.locked { background: #f1f5f9; color: #64748b; }

/* ==========================================================================
   FEATURE 3: SPEECH RECOGNITION (MIC) STYLES
   ========================================================================== */

.speech-main-grid {
  display: grid;
  grid-template-columns: 1.25fr 0.85fr;
  gap: 24px;
  align-items: start;
}

.speech-studio-card {
  background: #ffffff;
  border: 1.5px solid var(--lp-border);
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 4px 18px rgba(36, 89, 155, 0.05);
}

.speech-nav-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--lp-border);
}

.speech-tab-btn {
  padding: 8px 18px;
  border-radius: 10px;
  border: 1.5px solid var(--lp-border);
  background: #f8fafc;
  font-size: 13px;
  font-weight: 700;
  color: #475569;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.speech-tab-btn:hover,
.speech-tab-btn.active {
  background: linear-gradient(135deg, #24599B 0%, #3D7FC2 100%) !important;
  color: #ffffff !important;
  border-color: #1B457D !important;
  box-shadow: 0 2px 8px rgba(36, 89, 155, 0.2);
}

.speech-target-box {
  background: linear-gradient(135deg, #f8fafc 0%, var(--lp-blue-light) 100%);
  border: 1.5px solid var(--lp-border);
  border-radius: 18px;
  padding: 24px;
  text-align: center;
  margin-bottom: 24px;
}

.target-category-tag {
  display: inline-block;
  background: #ffffff;
  border: 1px solid var(--lp-border);
  color: #64748b;
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 9999px;
  margin-bottom: 12px;
}

.target-chinese-text {
  font-size: 32px;
  font-weight: 800;
  color: var(--lp-text);
  margin-bottom: 6px;
  line-height: 1.3;
}

.target-pinyin-text {
  font-size: 16px;
  font-weight: 700;
  color: var(--lp-orange);
  margin-bottom: 6px;
}

.target-meaning-text {
  font-size: 14.5px;
  color: #475569;
  margin-bottom: 16px;
}

.btn-tts-listen {
  background: #EAF4FF !important;
  border: 1.5px solid #3D7FC2 !important;
  color: #24599B !important;
  font-size: 13.5px;
  font-weight: 700;
  padding: 10px 24px;
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 2px 8px rgba(36, 89, 155, 0.08);
}

.btn-tts-listen:hover {
  background: #24599B !important;
  color: #ffffff !important;
  border-color: #24599B !important;
}

.speech-mic-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.btn-mic-record {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: linear-gradient(135deg, #24599B 0%, #3D7FC2 100%) !important;
  color: #ffffff !important;
  border: 2px solid #1B457D !important;
  font-size: 15px;
  font-weight: 800;
  padding: 16px 36px;
  border-radius: 9999px;
  cursor: pointer;
  width: 100%;
  max-width: 520px;
  box-shadow: 0 6px 20px rgba(36, 89, 155, 0.35);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.btn-mic-record:hover {
  background: linear-gradient(135deg, #1B457D 0%, #2A64A0 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(36, 89, 155, 0.45);
}

.btn-mic-record:active {
  transform: translateY(0);
}

.btn-mic-record .mic-icon {
  font-size: 24px;
  line-height: 1;
}

.btn-mic-record .mic-label {
  font-size: 15px;
  font-weight: 800;
  color: #ffffff !important;
  letter-spacing: 0.2px;
}

.btn-mic-record.listening {
  background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%) !important;
  border-color: #991b1b !important;
  box-shadow: 0 6px 24px rgba(220, 38, 38, 0.45);
}

.btn-mic-record.pulsing {
  animation: pulse-mic 1.2s infinite ease-in-out;
}

@keyframes pulse-mic {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

.speech-demo-sim-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  background: #f1f5f9;
  border: 1.5px solid var(--lp-border);
  border-radius: 14px;
  padding: 12px 18px;
  width: 100%;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03);
}

.sim-label {
  font-size: 12.5px;
  font-weight: 800;
  color: #334155;
}

.sim-btns-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.btn-sim-preset {
  font-size: 12px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}

.btn-sim-preset.perfect {
  background: #ecfdf5 !important;
  border: 1.5px solid #86efac !important;
  color: #047857 !important;
}
.btn-sim-preset.perfect:hover {
  background: #d1fae5 !important;
  border-color: #10b981 !important;
  transform: translateY(-1px);
}

.btn-sim-preset.good {
  background: #eff6ff !important;
  border: 1.5px solid #bfdbfe !important;
  color: #1d4ed8 !important;
}
.btn-sim-preset.good:hover {
  background: #dbeafe !important;
  border-color: #3b82f6 !important;
  transform: translateY(-1px);
}

.btn-sim-preset.poor {
  background: #fff7ed !important;
  border: 1.5px solid #fed7aa !important;
  color: #c2410c !important;
}
.btn-sim-preset.poor:hover {
  background: #ffedd5 !important;
  border-color: #f97316 !important;
  transform: translateY(-1px);
}

/* Score Card */
.pronunciation-score-card {
  background: #ffffff;
  border: 2px solid var(--lp-border);
  border-radius: 18px;
  padding: 20px;
}

.pronunciation-score-card.score-excellent { border-color: #86efac; background: #f0fdf4; }
.pronunciation-score-card.score-good { border-color: #93c5fd; background: #f8faff; }
.pronunciation-score-card.score-needs-work { border-color: #fdba74; background: #fffaf5; }

.score-card-header {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 16px;
}

.score-circle-display {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid var(--lp-blue-1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(36, 89, 155, 0.12);
}

.score-number {
  font-size: 26px;
  font-weight: 800;
  color: var(--lp-blue-1);
  line-height: 1;
}

.score-out-of {
  font-size: 10px;
  font-weight: 700;
  color: #94a3b8;
}

.score-grade-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--lp-text);
  margin-bottom: 2px;
}

.score-summary-text {
  font-size: 13px;
  color: #475569;
  line-height: 1.4;
}

.score-xp-pill {
  display: inline-block;
  background: var(--lp-blue-1);
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 6px;
  margin-top: 6px;
}

.character-diff-box {
  background: #ffffff;
  border: 1.5px solid var(--lp-border);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 12px;
}

.diff-title {
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  margin-bottom: 8px;
}

.diff-chars-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.diff-char-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--lp-border);
  background: #f8fafc;
}

.diff-char-chip.correct {
  border-color: #86efac;
  background: #dcfce7;
}

.diff-char-chip.substituted,
.diff-char-chip.missed {
  border-color: #fca5a5;
  background: #fee2e2;
}

.diff-char {
  font-size: 20px;
  font-weight: 800;
  color: var(--lp-text);
}

.diff-status-icon {
  font-size: 11px;
  font-weight: 800;
}

.diff-char-chip.correct .diff-status-icon { color: #166534; }
.diff-char-chip.substituted .diff-status-icon,
.diff-char-chip.missed .diff-status-icon { color: #991b1b; }

.diff-label {
  font-size: 10px;
  color: #64748b;
}

.transcribed-text-row {
  font-size: 13px;
  color: #475569;
}

.speech-empty-state {
  text-align: center;
  padding: 30px 20px;
  background: #f8fafc;
  border: 1.5px dashed var(--lp-border);
  border-radius: 16px;
}

.empty-icon { font-size: 36px; margin-bottom: 8px; }
.empty-title { font-size: 15px; font-weight: 800; color: var(--lp-text); margin-bottom: 4px; }
.empty-desc { font-size: 13px; color: #64748b; }

.speech-info-card {
  background: #ffffff;
  border: 1.5px solid var(--lp-border);
  border-radius: 18px;
  padding: 20px;
  margin-bottom: 16px;
}

.info-card-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--lp-text);
  margin: 0 0 8px;
}

.info-card-text {
  font-size: 13px;
  color: #475569;
  line-height: 1.5;
  margin: 0 0 10px;
}

.info-card-list {
  padding-left: 18px;
  margin: 0;
  font-size: 12.5px;
  color: #475569;
  line-height: 1.6;
}

/* ==========================================================================
   FEATURE 4: HANZI WRITER & STROKE ORDER STYLES
   ========================================================================== */

.stroke-workspace-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 24px;
}

.stroke-char-picker {
  background: #ffffff;
  border: 1.5px solid var(--lp-border);
  border-radius: 20px;
  padding: 20px;
}

.picker-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--lp-text);
  margin: 0 0 14px;
}

.picker-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 20px;
}

.char-pick-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 4px;
  border-radius: 12px;
  border: 1.5px solid var(--lp-border);
  background: #ffffff;
  cursor: pointer;
  transition: all 0.15s ease;
}

.char-pick-btn:hover,
.char-pick-btn.active {
  background: var(--lp-blue-light);
  border-color: var(--lp-blue-1);
}

.cp-char { font-size: 22px; font-weight: 800; color: var(--lp-text); }
.cp-pinyin { font-size: 11px; font-weight: 600; color: var(--lp-orange); margin-top: 2px; }

.char-meta-card {
  background: #f8fafc;
  border: 1px solid var(--lp-border);
  border-radius: 14px;
  padding: 14px;
}

.cm-header {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #475569;
  margin-bottom: 8px;
}

.cm-hsk {
  background: var(--lp-blue-light);
  color: var(--lp-blue-1);
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 4px;
}

.cm-meaning {
  font-size: 13.5px;
  color: var(--lp-text);
  margin-bottom: 12px;
}

.btn-tts-char {
  background: #ffffff;
  border: 1.5px solid var(--lp-border);
  color: var(--lp-blue-1);
  font-size: 12px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 8px;
  cursor: pointer;
  width: 100%;
}

.btn-tts-char:hover {
  background: var(--lp-blue-light);
}

.stroke-board-section {
  background: #ffffff;
  border: 1.5px solid var(--lp-border);
  border-radius: 20px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stroke-mode-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 24px;
}

.sm-tab {
  padding: 10px 20px;
  border-radius: 12px;
  border: 1.5px solid var(--lp-border);
  background: #f8fafc;
  font-size: 14px;
  font-weight: 700;
  color: #475569;
  cursor: pointer;
  transition: all 0.15s ease;
}

.sm-tab:hover,
.sm-tab.active {
  background: linear-gradient(135deg, #24599B 0%, #3D7FC2 100%) !important;
  color: #ffffff !important;
  border-color: #1B457D !important;
  box-shadow: 0 4px 12px rgba(36, 89, 155, 0.2);
}

/* Mi Zi Ge Hanzi Writer Stage */
.hanzi-writer-stage-wrap {
  position: relative;
  width: 280px;
  height: 280px;
  border: 2px solid #cbd5e1;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06);
  margin-bottom: 20px;
  overflow: hidden;
}

.mizige-stage-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.mzg-line {
  position: absolute;
  background-color: #e2e8f0;
}

.mzg-line.horizontal {
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
}

.mzg-line.vertical {
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
}

.mzg-line.diag-1 {
  top: 0;
  left: 0;
  width: 141.4%;
  height: 1px;
  transform-origin: 0 0;
  transform: rotate(45deg);
  border-top: 1px dashed #e2e8f0;
  background: transparent;
}

.mzg-line.diag-2 {
  top: 0;
  right: 0;
  width: 141.4%;
  height: 1px;
  transform-origin: 100% 0;
  transform: rotate(-45deg);
  border-top: 1px dashed #e2e8f0;
  background: transparent;
}

.hanzi-writer-box {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.hanzi-fallback-text {
  font-size: 160px;
  font-weight: 800;
  color: var(--lp-blue-1);
  user-select: none;
  opacity: 0.85;
}

.stroke-controls-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 16px;
}

.btn-stroke-act {
  padding: 10px 18px;
  border-radius: 10px;
  border: 1.5px solid var(--lp-border);
  background: #f8fafc;
  font-size: 13px;
  font-weight: 700;
  color: var(--lp-text);
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}

.btn-stroke-act.primary {
  background: linear-gradient(135deg, #24599B 0%, #3D7FC2 100%) !important;
  color: #ffffff !important;
  border-color: #1B457D !important;
}

.btn-stroke-act.success {
  background: linear-gradient(135deg, #059669 0%, #10B981 100%) !important;
  color: #ffffff !important;
  border-color: #047857 !important;
}

.btn-stroke-act:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.1);
}

.stroke-quiz-status {
  font-size: 13.5px;
  color: #64748b;
  text-align: center;
  min-height: 24px;
}

/* ==========================================================================
   FEATURE 5: LEARNER ANALYTICS DASHBOARD STYLES
   ========================================================================== */

.analytics-charts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}

.chart-card,
.heatmap-section-card {
  background: #ffffff;
  border: 1.5px solid var(--lp-border);
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.03);
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 18px;
  flex-wrap: wrap;
  gap: 12px;
}

.chart-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--lp-text);
  margin: 0 0 4px;
}

.chart-sub {
  font-size: 12.5px;
  color: #64748b;
  margin: 0;
}

.chart-tag-blue {
  background: var(--lp-blue-light);
  color: var(--lp-blue-1);
  font-size: 12px;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 9999px;
}

.chart-tag-gold {
  background: var(--lp-cream);
  color: #b45309;
  font-size: 12px;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 9999px;
}

.chart-svg-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
}

.analytics-bar-svg,
.analytics-radar-svg,
.analytics-heatmap-svg {
  width: 100%;
  height: auto;
  max-height: 250px;
}

.heatmap-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: #64748b;
}

.hm-tile {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  display: inline-block;
}

.hm-tile.lvl-0 { background: #f1f5f9; }
.hm-tile.lvl-1 { background: #bfdbfe; }
.hm-tile.lvl-2 { background: #60a5fa; }
.hm-tile.lvl-3 { background: #2563eb; }
.hm-tile.lvl-4 { background: #1d4ed8; }

.heatmap-calendar-wrap {
  width: 100%;
  overflow-x: auto;
}

/* ==========================================================================
   DASHBOARD INNOVATION HUB WIDGET STYLES
   ========================================================================== */

.dash-innovation-hub-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 24px;
}

.dash-srs-quick-card,
.dash-quests-quick-card,
.dash-practice-quick-card {
  background: #ffffff;
  border: 1.5px solid var(--lp-border);
  border-radius: 18px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
  transition: all 0.15s ease;
}

.dash-srs-quick-card:hover,
.dash-quests-quick-card:hover,
.dash-practice-quick-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(36, 89, 155, 0.09);
  border-color: var(--lp-blue-2);
}

.dsqc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.dsqc-badge {
  font-size: 11px;
  font-weight: 800;
  color: var(--lp-blue-1);
  background: var(--lp-blue-light);
  padding: 2px 8px;
  border-radius: 6px;
}

.dsqc-badge.orange {
  color: #c2410c;
  background: #ffedd5;
}

.dsqc-badge.green {
  color: #166534;
  background: #dcfce7;
}

.dsqc-retention,
.dsqc-streak-tag,
.dsqc-badge-pill {
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
}

.dsqc-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--lp-text);
  margin: 0 0 6px;
}

.dsqc-desc {
  font-size: 13px;
  color: #64748b;
  margin: 0 0 16px;
  line-height: 1.5;
}

.dsqc-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid #f1f5f9;
}

.dsqc-footer.dual-btns {
  display: flex;
  gap: 8px;
}

.dsqc-footer.dual-btns button {
  flex: 1;
}

.dsqc-count {
  display: flex;
  flex-direction: column;
}

.dsqc-num {
  font-size: 20px;
  font-weight: 800;
  color: var(--lp-text);
  line-height: 1.1;
}

.dsqc-lbl {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 600;
}

/* ==========================================================================
   AI WEAKNESS ASSESSMENT & PERSONALIZED STUDY PLAN VIEW
   ========================================================================== */

.dash-weakness-quick-card {
  background: #ffffff;
  border: 1px solid var(--lp-border);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
  transition: transform 0.2s, box-shadow 0.2s;
}

.dash-weakness-quick-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(124, 58, 237, 0.08);
}

.dsqc-badge.purple {
  background: #f5f3ff;
  color: #7c3aed;
  border: 1px solid #ddd6fe;
}

.weakness-page-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.weakness-hero-banner {
  background: linear-gradient(135deg, #24599B 0%, #3D7FC2 100%);
  border-radius: 20px;
  padding: 30px;
  color: #ffffff;
  box-shadow: 0 8px 24px rgba(36, 89, 155, 0.18);
}

.weakness-pill-badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #ffffff;
  margin-bottom: 12px;
}

.weakness-page-title {
  font-size: 26px;
  font-weight: 800;
  margin-bottom: 8px;
  color: #ffffff;
  line-height: 1.25;
}

.weakness-page-subtitle {
  font-size: 15px;
  line-height: 1.6;
  opacity: 0.95;
  max-width: 850px;
}

.weakness-section-card {
  background: #ffffff;
  border: 1px solid var(--lp-border);
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 3px 12px rgba(36, 89, 155, 0.05);
}

.wsc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}

.wsc-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--lp-text);
  margin-bottom: 4px;
}

.wsc-sub {
  font-size: 13.5px;
  color: #64748b;
}

/* 5-Skill Meters */
.skills-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}

.skill-meter-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.skill-meter-card.alert {
  background: #fff7ed;
  border-color: #fed7aa;
}

.smc-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.smc-label {
  font-size: 13px;
  font-weight: 600;
  color: #475569;
}

.smc-score {
  font-size: 16px;
  font-weight: 800;
}

.smc-score.high { color: #059669; }
.smc-score.low { color: #ea580c; }
.smc-score.medium { color: #2563eb; }

.smc-status {
  font-size: 11.5px;
  font-weight: 600;
  color: #64748b;
}

.smc-status.warning {
  color: #c2410c;
}

.lingora-progress-track {
  width: 100%;
  height: 8px;
  background: #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
}

.lingora-progress-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.4s ease;
}

.lingora-progress-fill.blue { background: linear-gradient(90deg, #24599B, #3D7FC2); }
.lingora-progress-fill.orange { background: linear-gradient(90deg, #ea580c, #f97316); }
.lingora-progress-fill.green { background: linear-gradient(90deg, #059669, #10b981); }

/* Weakness Cards & Drills */
.weakness-cards-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.weakness-item-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  padding: 20px;
  transition: all 0.2s ease;
}

.weakness-item-card:hover {
  border-color: #93c5fd;
  box-shadow: 0 4px 16px rgba(36, 89, 155, 0.08);
}

.weakness-item-card.solved {
  border-color: #86efac;
  background: linear-gradient(180deg, #ffffff 0%, #f0fdf4 100%);
}

.wic-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  flex-wrap: wrap;
  gap: 8px;
}

.wic-cat-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
}

.wic-cat-pill.critical { background: #fee2e2; color: #b91c1c; }
.wic-cat-pill.high { background: #ffedd5; color: #c2410c; }
.wic-cat-pill.medium { background: #fef9c3; color: #a16207; }

.wic-acc-status {
  font-size: 12.5px;
  font-weight: 600;
  color: #64748b;
}

.wic-acc-status.done {
  color: #15803d;
  font-weight: 700;
}

.wic-acc-status.err-status {
  color: #dc2626 !important;
  font-weight: 700;
}

.wic-problem-title {
  font-size: 16px;
  font-weight: 750;
  color: #1e293b;
  margin-bottom: 12px;
}

.wic-solution-box {
  background: #eff6ff;
  border-left: 4px solid #3b82f6;
  border-radius: 0 10px 10px 0;
  padding: 12px 16px;
  margin-bottom: 14px;
}

.wsb-heading {
  font-size: 13px;
  font-weight: 750;
  color: #1d4ed8;
  margin-bottom: 4px;
}

.wsb-text {
  font-size: 14px;
  color: #334155;
  line-height: 1.55;
}

.wic-drill-wrap {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px 16px;
}

.btn-refresh-all-drills {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--lp-blue-1);
  background: var(--lp-blue-light);
  color: var(--lp-blue-1);
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-refresh-all-drills:hover {
  background: var(--lp-blue-1);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(36, 89, 155, 0.2);
}

.drill-prompt-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.drill-prompt-title {
  font-size: 14px;
  color: #1e293b;
  line-height: 1.45;
  flex: 1;
  min-width: 220px;
}

.drill-q-count {
  display: inline-block;
  background: #e2e8f0;
  color: #475569;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  margin-right: 4px;
}

.btn-refresh-single-drill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border-radius: 8px;
  border: 1.5px solid #cbd5e1;
  background: #ffffff;
  color: #475569;
  font-size: 12.5px;
  font-weight: 650;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.btn-refresh-single-drill:hover {
  background: #f1f5f9;
  color: var(--lp-blue-1);
  border-color: var(--lp-blue-1);
  transform: translateY(-1px);
}

.drill-options-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.btn-drill-opt {
  padding: 8px 16px;
  border-radius: 8px;
  border: 1.5px solid #cbd5e1;
  background: #ffffff;
  font-size: 14px;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-drill-opt:hover {
  border-color: #3b82f6;
  background: #f0f7ff;
}

.btn-drill-opt.correct.selected,
.btn-drill-opt.is-correct {
  background: #dcfce7 !important;
  border-color: #22c55e !important;
  color: #15803d !important;
  font-weight: 700 !important;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25) !important;
}

.btn-drill-opt.wrong.selected,
.btn-drill-opt.is-wrong {
  background: #fef2f2 !important;
  border-color: #ef4444 !important;
  color: #b91c1c !important;
  font-weight: 700 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25) !important;
}

.wic-drill-wrap.drill-error-wrap {
  border-color: #fca5a5 !important;
  background: #fff5f5 !important;
}

@keyframes autoFadeOutNotice {
  0% {
    opacity: 1;
    transform: translateY(0);
    max-height: 240px;
  }
  68% {
    opacity: 1;
    transform: translateY(0);
    max-height: 240px;
  }
  88% {
    opacity: 0.15;
    transform: translateY(-4px);
  }
  100% {
    opacity: 0;
    transform: translateY(-8px);
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
    overflow: hidden;
    pointer-events: none;
    visibility: hidden;
    border-width: 0;
  }
}

.drill-feedback-box {
  margin-top: 10px;
  padding: 10px 14px;
  background: #ecfdf5;
  border-radius: 8px;
  font-size: 13px;
  color: #065f46;
  border: 1px solid #a7f3d0;
  animation: autoFadeOutNotice 2.5s ease-in-out forwards;
}

.drill-feedback-box:hover {
  animation-play-state: paused;
}

.drill-feedback-box.error {
  background: #fef2f2;
  color: #b91c1c;
  border-color: #f87171;
  border-width: 1.5px;
}

/* Interest Profiles & Personalized Career Plan */
.interest-tabs-row {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.interest-tab-btn {
  padding: 8px 18px;
  border-radius: 999px;
  border: 1.5px solid #cbd5e1;
  background: #ffffff;
  font-size: 13.5px;
  font-weight: 650;
  color: #475569;
  cursor: pointer;
  transition: all 0.2s;
}

.interest-tab-btn:hover {
  border-color: #3b82f6;
  color: #24599B;
}

.interest-tab-btn.active {
  background: linear-gradient(135deg, #24599B, #3D7FC2);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(36, 89, 155, 0.25);
}

.personalized-plan-card {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  padding: 20px;
}

.ppc-header {
  margin-bottom: 16px;
}

.ppc-badge {
  font-size: 12px;
  font-weight: 700;
  color: #2563eb;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ppc-role-title {
  font-size: 20px;
  font-weight: 800;
  color: #0f172a;
  margin-top: 4px;
}

.ppc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.ppc-col-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #334155;
  margin-bottom: 6px;
}

.ppc-col-desc {
  font-size: 14px;
  color: #475569;
  line-height: 1.6;
}

.ppc-daily-box {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13.5px;
  color: #1e293b;
}

.ppc-keywords-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ppc-keyword-chip {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
}

/* Song Mnemonic Stage */
.song-switcher-btns {
  display: flex;
  gap: 8px;
}

.btn-song-switch {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  font-size: 12.5px;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-song-switch.active {
  background: #24599B;
  color: #ffffff;
  border-color: #24599B;
}

.song-stage-board {
  background: #fcfcfc;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  padding: 20px;
}

.ssb-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 10px;
}

.ssb-title {
  font-size: 19px;
  font-weight: 800;
  color: #0f172a;
}

.ssb-style-tag {
  display: inline-block;
  background: #e0e7ff;
  color: #4338ca;
  font-size: 11.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  margin-top: 4px;
}

.ssb-connection {
  font-size: 13.5px;
  color: #475569;
}

.song-lines-container {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.song-line-box {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
}

.slb-full-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  gap: 12px;
}

.slb-full-zh {
  font-size: 18px;
  font-weight: 700;
  color: #1e293b;
}

.slb-full-pinyin {
  font-size: 13.5px;
  color: #64748b;
  font-family: monospace, sans-serif;
}

.slb-full-thai {
  font-size: 13.5px;
  color: #334155;
  margin-top: 2px;
}

.btn-play-line-tts {
  padding: 6px 12px;
  border-radius: 8px;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  font-size: 12.5px;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s;
}

.btn-play-line-tts:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.slb-words-label {
  font-size: 12px;
  font-weight: 600;
  color: #94a3b8;
  margin-bottom: 6px;
}

.slb-words-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.word-token-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 10px;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}

.word-token-chip:hover {
  background: #eaf4ff;
  border-color: #3b82f6;
  transform: translateY(-1px);
}

.wt-zh {
  font-size: 15px;
  font-weight: 700;
  color: #1e293b;
}

.wt-pinyin {
  font-size: 11px;
  color: #64748b;
}

.wt-thai {
  font-size: 11px;
  color: #0284c7;
  font-weight: 600;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .srs-two-column-layout,
  .quest-grid-layout,
  .speech-main-grid,
  .stroke-workspace-layout,
  .analytics-charts-grid,
  .dash-innovation-hub-grid,
  .ppc-grid {
    grid-template-columns: 1fr;
  }

  .srs-stats-grid,
  .analytics-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .srs-stats-grid,
  .analytics-kpi-grid {
    grid-template-columns: 1fr;
  }

  .srs-rating-buttons-row {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ==========================================================================
   SECTION 18: CONTEMPORARY SLANG & CREATIVE QUOTES STYLES
   ========================================================================== */

.quotes-slang-page,
.career-scholarships-page {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.quotes-slang-hero-banner,
.career-hero-banner {
  background: linear-gradient(135deg, #1B3456 0%, #24599B 60%, #3D7FC2 100%);
  border-radius: 16px;
  padding: 32px 36px;
  color: #FFFFFF;
  box-shadow: 0 8px 24px rgba(36, 89, 155, 0.15);
}

.qsh-badge,
.chb-badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #FFF7EA;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 12px;
}

.qsh-title,
.chb-title {
  font-size: 1.85rem;
  font-weight: 800;
  margin: 0 0 10px;
  line-height: 1.3;
}

.qsh-subtitle,
.chb-subtitle {
  font-size: 0.98rem;
  line-height: 1.6;
  color: #EAF4FF;
  max-width: 820px;
  margin: 0;
}

/* Daily Highlight Card */
.daily-slang-highlight-card {
  background: linear-gradient(135deg, #FFF7EA 0%, #FFFFFF 100%);
  border: 2px solid #F1C58D;
  border-radius: 16px;
  padding: 24px 28px;
  box-shadow: 0 4px 16px rgba(241, 197, 141, 0.2);
}

.dsh-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.dsh-tag-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dsh-badge-star {
  background: #F39A38;
  color: #FFFFFF;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 12px;
}

.dsh-vibe-pill {
  background: rgba(36, 89, 155, 0.08);
  color: #24599B;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 12px;
}

.dsh-hanzi {
  font-size: 2.2rem;
  font-weight: 800;
  color: #1B3456;
  margin-bottom: 4px;
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
}

.dsh-pinyin {
  font-size: 1.05rem;
  font-weight: 600;
  color: #3D7FC2;
  margin-bottom: 8px;
}

.dsh-meaning {
  font-size: 1.15rem;
  font-weight: 700;
  color: #1B3456;
  margin-bottom: 8px;
}

.dsh-situation {
  font-size: 0.92rem;
  color: #556B82;
  line-height: 1.5;
  margin-bottom: 12px;
}

.dsh-example-box {
  background: #FFFFFF;
  border: 1px solid #DCE6F2;
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 16px;
}

.dsh-eg-zh {
  font-size: 1rem;
  font-weight: 700;
  color: #24599B;
  margin-bottom: 2px;
}

.dsh-eg-py {
  font-size: 0.85rem;
  color: #75859A;
  margin-bottom: 4px;
}

.dsh-eg-th {
  font-size: 0.9rem;
  color: #1B3456;
}

.dsh-footer {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Controls Bar */
.slang-controls-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.slang-category-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.slang-tab-btn {
  padding: 8px 14px;
  border-radius: 20px;
  border: 1px solid #DCE6F2;
  background: #FFFFFF;
  color: #1B3456;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.slang-tab-btn:hover {
  border-color: #3D7FC2;
  background: #EAF4FF;
}

.slang-tab-btn.active {
  background: #24599B;
  color: #FFFFFF;
  border-color: #24599B;
}

.slang-search-wrap {
  position: relative;
  min-width: 280px;
}

.slang-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #75859A;
  font-size: 0.9rem;
}

.slang-search-input {
  width: 100%;
  padding: 9px 36px 9px 36px;
  border-radius: 20px;
  border: 1px solid #DCE6F2;
  font-size: 0.88rem;
  color: #1B3456;
  background: #FFFFFF;
  outline: none;
  transition: border-color 0.2s;
}

.slang-search-input:focus {
  border-color: #24599B;
  box-shadow: 0 0 0 3px rgba(36, 89, 155, 0.12);
}

.slang-search-clear {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #75859A;
  font-size: 0.85rem;
  cursor: pointer;
}

/* Slang Cards Grid */
.slang-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}

.slang-card {
  background: #FFFFFF;
  border: 1px solid #DCE6F2;
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: transform 0.2s, box-shadow 0.2s;
}

.slang-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(36, 89, 155, 0.08);
}

.sc-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.sc-category-tag {
  font-size: 0.75rem;
  font-weight: 700;
  color: #24599B;
  background: #EAF4FF;
  padding: 3px 8px;
  border-radius: 8px;
}

.sc-vibe-tag {
  font-size: 0.75rem;
  color: #75859A;
}

.sc-hanzi {
  font-size: 1.55rem;
  font-weight: 800;
  color: #1B3456;
  margin: 0 0 2px;
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
}

.sc-pinyin {
  font-size: 0.88rem;
  font-weight: 600;
  color: #3D7FC2;
  margin-bottom: 6px;
}

.sc-meaning {
  font-size: 0.98rem;
  font-weight: 700;
  color: #1B3456;
  margin-bottom: 10px;
}

.sc-context {
  font-size: 0.85rem;
  color: #556B82;
  line-height: 1.5;
  margin-bottom: 12px;
  background: #F8FAFC;
  padding: 10px 12px;
  border-radius: 8px;
}

.sc-example {
  background: #FFF7EA;
  border-left: 3px solid #F39A38;
  padding: 8px 12px;
  border-radius: 6px;
  margin-bottom: 14px;
}

.sc-ex-zh {
  font-size: 0.88rem;
  font-weight: 700;
  color: #1B3456;
}

.sc-ex-th {
  font-size: 0.8rem;
  color: #75859A;
}

.sc-actions {
  display: flex;
  gap: 8px;
  border-top: 1px solid #EDF2F7;
  padding-top: 12px;
}

.btn-icon-label {
  flex: 1;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid #DCE6F2;
  background: #FFFFFF;
  color: #1B3456;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}

.btn-icon-label:hover {
  background: #EAF4FF;
  border-color: #3D7FC2;
}

.btn-icon-label.accent {
  background: #FFF7EA;
  border-color: #F1C58D;
  color: #D97706;
}

.btn-icon-label.accent:hover {
  background: #FDE68A;
}

/* Practice Section */
.slang-practice-section {
  background: #FFFFFF;
  border: 1px solid #DCE6F2;
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.sps-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 20px;
}

.sps-pill {
  display: inline-block;
  background: #EAF4FF;
  color: #24599B;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 12px;
  margin-bottom: 6px;
}

.sps-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: #1B3456;
  margin: 0 0 6px;
}

.sps-desc {
  font-size: 0.92rem;
  color: #75859A;
  margin: 0;
}

.sps-quiz-box {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 24px;
}

.sps-target-meaning {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1B3456;
  margin-bottom: 6px;
}

.sps-hint {
  font-size: 0.88rem;
  color: #75859A;
  margin-bottom: 18px;
}

.sps-workspace {
  background: #FFFFFF;
  border: 2px dashed #CBD5E1;
  border-radius: 10px;
  padding: 16px;
  min-height: 70px;
  margin-bottom: 18px;
  transition: all 0.2s;
}

.sps-workspace.solved {
  border-color: #3D9B83;
  background: #F0FDF4;
}

.sps-workspace.wrong {
  border-color: #D85A64;
  background: #FEF2F2;
}

.sps-ws-label,
.sps-bank-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: #75859A;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sps-tokens-assembled,
.sps-tokens-choices {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.sps-token-chip {
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid #CBD5E1;
  background: #FFFFFF;
  font-size: 1.05rem;
  font-weight: 700;
  color: #1B3456;
  cursor: pointer;
  transition: all 0.15s;
  font-family: "Noto Sans SC", "PingFang SC", sans-serif;
}

.sps-token-chip:hover {
  border-color: #24599B;
  background: #EAF4FF;
  transform: translateY(-2px);
}

.sps-token-chip.active {
  background: #24599B;
  color: #FFFFFF;
  border-color: #24599B;
}

.sps-placeholder {
  color: #94A3B8;
  font-style: italic;
  font-size: 0.9rem;
}

.sps-feedback {
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 0.92rem;
  margin-top: 16px;
  animation: autoFadeOutNotice 2.5s ease-in-out forwards;
}

.sps-feedback:hover {
  animation-play-state: paused;
}

.sps-feedback.success {
  background: #DCFCE7;
  color: #166534;
  border: 1px solid #86EFAC;
}

.sps-feedback.error {
  background: #FEE2E2;
  color: #991B1B;
  border: 1px solid #FCA5A5;
}

.sps-controls {
  display: flex;
  gap: 12px;
  margin-top: 18px;
}

/* ==========================================================================
   SECTION 19: CAREER PATHWAYS & CHINA SCHOLARSHIPS STYLES
   ========================================================================== */

.career-nav-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 2px solid #E2E8F0;
  padding-bottom: 4px;
  overflow-x: auto;
}

.cnt-tab-btn {
  padding: 10px 18px;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  color: #556B82;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}

.cnt-tab-btn:hover {
  color: #24599B;
}

.cnt-tab-btn.active {
  color: #24599B;
  border-bottom-color: #24599B;
}

.career-filter-bar,
.scholarship-filter-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  background: #FFFFFF;
  border: 1px solid #DCE6F2;
  border-radius: 12px;
  padding: 14px 20px;
  margin-bottom: 20px;
}

.cfb-label,
.sfb-label {
  font-size: 0.88rem;
  font-weight: 700;
  color: #1B3456;
}

.cfb-pills,
.sfb-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.cfb-pill {
  padding: 6px 12px;
  border-radius: 16px;
  border: 1px solid #DCE6F2;
  background: #F8FAFC;
  font-size: 0.82rem;
  font-weight: 600;
  color: #556B82;
  cursor: pointer;
  transition: all 0.15s;
}

.cfb-pill:hover {
  background: #EAF4FF;
  border-color: #3D7FC2;
}

.cfb-pill.active {
  background: #24599B;
  color: #FFFFFF;
  border-color: #24599B;
}

/* Career Cards Grid */
.career-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 22px;
}

.career-card {
  background: #FFFFFF;
  border: 1px solid #DCE6F2;
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.cc-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

.cc-title-th {
  font-size: 1.15rem;
  font-weight: 800;
  color: #1B3456;
  margin: 0 0 4px;
  line-height: 1.4;
}

.cc-title-zh {
  font-size: 0.88rem;
  font-weight: 600;
  color: #3D7FC2;
}

.cc-hsk-badge {
  background: #EAF4FF;
  border: 1px solid #24599B;
  color: #24599B;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 8px;
  white-space: nowrap;
}

.cc-salary-row {
  background: #FFF7EA;
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 12px;
}

.cs-label {
  display: block;
  font-size: 0.78rem;
  color: #75859A;
}

.cs-val {
  font-size: 1.05rem;
  color: #D97706;
}

.cs-sub {
  font-size: 0.85rem;
  color: #8C5E28;
  margin-left: 6px;
}

.cc-desc {
  font-size: 0.9rem;
  line-height: 1.5;
  color: #556B82;
  margin-bottom: 14px;
}

.cc-section-block,
.cc-roadmap-block {
  margin-bottom: 14px;
}

.csb-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: #1B3456;
  margin-bottom: 8px;
}

.cc-company-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.company-tag {
  background: #F1F5F9;
  color: #334155;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
}

.cc-vocab-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cc-vocab-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 0.15s;
  text-align: left;
}

.cc-vocab-chip:hover {
  background: #EAF4FF;
  border-color: #3D7FC2;
}

.cv-word {
  font-weight: 700;
  color: #24599B;
  margin-right: 6px;
}

.cv-py {
  color: #75859A;
  margin-right: 6px;
}

.cv-mean {
  color: #1B3456;
  flex: 1;
}

.cv-speaker {
  font-size: 0.85rem;
  color: #3D7FC2;
}

.cc-roadmap-steps {
  margin: 0;
  padding-left: 18px;
  font-size: 0.84rem;
  color: #556B82;
  line-height: 1.6;
}

.cc-footer {
  margin-top: 14px;
  border-top: 1px solid #F1F5F9;
  padding-top: 12px;
}

/* Scholarships Grid */
.scholarships-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 22px;
}

.scholarship-card {
  background: #FFFFFF;
  border: 1px solid #DCE6F2;
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.sc-badge-ribbon {
  display: inline-block;
  background: #F39A38;
  color: #FFFFFF;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  margin-bottom: 6px;
}

.sc-name-th {
  font-size: 1.15rem;
  font-weight: 800;
  color: #1B3456;
  margin: 0 0 2px;
  line-height: 1.4;
}

.sc-name-zh {
  font-size: 0.88rem;
  font-weight: 600;
  color: #3D7FC2;
}

.sc-level-tag {
  background: #EAF4FF;
  color: #24599B;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
}

.sc-stipend-box {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  border-radius: 10px;
  padding: 12px 14px;
  margin: 14px 0;
}

.ssb-icon {
  font-size: 1.6rem;
}

.ssb-label {
  font-size: 0.78rem;
  color: #065F46;
}

.ssb-val {
  font-size: 1.05rem;
  font-weight: 800;
  color: #047857;
}

.sc-block {
  margin-bottom: 12px;
}

.sc-block-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: #1B3456;
  margin-bottom: 6px;
}

.sc-benefits-list {
  margin: 0;
  padding-left: 18px;
  font-size: 0.84rem;
  color: #556B82;
  line-height: 1.5;
}

.sc-uni-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.uni-chip {
  background: #F1F5F9;
  color: #24599B;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
}

.sc-criteria-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  background: #F8FAFC;
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 12px;
}

.crit-col {
  display: flex;
  flex-direction: column;
  font-size: 0.78rem;
}

.crit-lbl {
  color: #75859A;
  margin-bottom: 2px;
}

.crit-col strong {
  color: #1B3456;
  font-size: 0.82rem;
}

.sc-agency-note {
  font-size: 0.8rem;
  color: #556B82;
  margin-bottom: 14px;
  line-height: 1.4;
}

/* Matcher Quiz */
.career-matcher-section {
  background: #FFFFFF;
  border: 1px solid #DCE6F2;
  border-radius: 16px;
  padding: 28px;
}

.cms-pill {
  display: inline-block;
  background: #EAF4FF;
  color: #24599B;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 12px;
  margin-bottom: 6px;
}

.cms-title {
  font-size: 1.45rem;
  font-weight: 800;
  color: #1B3456;
  margin: 0 0 6px;
}

.cms-desc {
  font-size: 0.94rem;
  color: #75859A;
  margin: 0 0 24px;
}

.matcher-quiz-card {
  display: flex;
  flex-direction: column;
  gap: 22px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 24px;
}

.mq-label {
  display: block;
  font-size: 0.98rem;
  font-weight: 700;
  color: #1B3456;
  margin-bottom: 12px;
}

.mq-options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}

.mq-option-btn {
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid #DCE6F2;
  background: #FFFFFF;
  color: #1B3456;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  text-align: left;
}

.mq-option-btn:hover {
  background: #EAF4FF;
  border-color: #3D7FC2;
}

.mq-option-btn.selected {
  background: #24599B;
  color: #FFFFFF;
  border-color: #24599B;
  box-shadow: 0 4px 12px rgba(36, 89, 155, 0.2);
}

.matcher-result-card {
  margin-top: 24px;
  background: linear-gradient(135deg, #FFF7EA 0%, #FFFFFF 100%);
  border: 2px solid #F1C58D;
  border-radius: 16px;
  padding: 24px 28px;
  box-shadow: 0 6px 20px rgba(241, 197, 141, 0.25);
}

.mrc-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.mrc-match-badge {
  display: inline-block;
  background: #3D9B83;
  color: #FFFFFF;
  font-size: 0.82rem;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 14px;
  margin-bottom: 8px;
}

.mrc-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: #1B3456;
  margin: 0 0 4px;
}

.mrc-sub {
  font-size: 0.92rem;
  color: #3D7FC2;
  font-weight: 600;
}

.mrc-salary-pill {
  background: #F39A38;
  color: #FFFFFF;
  font-size: 0.88rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 16px;
}

.mrc-reason {
  font-size: 0.94rem;
  line-height: 1.6;
  color: #1B3456;
  margin-bottom: 16px;
}

.mrc-roadmap-box {
  background: #FFFFFF;
  border: 1px solid #DCE6F2;
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 20px;
}

.mrc-box-heading {
  font-size: 0.88rem;
  font-weight: 700;
  color: #24599B;
  margin-bottom: 10px;
}

.mrc-steps {
  margin: 0;
  padding-left: 20px;
  font-size: 0.88rem;
  color: #556B82;
  line-height: 1.6;
}

.mrc-action-btns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Checklist & SOP */
.checklist-section-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.csc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  background: #FFFFFF;
  border: 1px solid #DCE6F2;
  border-radius: 16px;
  padding: 24px;
}

.csc-pill {
  display: inline-block;
  background: #EAF4FF;
  color: #24599B;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 12px;
  margin-bottom: 6px;
}

.csc-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: #1B3456;
  margin: 0 0 6px;
}

.csc-desc {
  font-size: 0.9rem;
  color: #75859A;
  margin: 0;
}

.csc-progress-box {
  min-width: 220px;
}

.cpb-stat {
  font-size: 0.88rem;
  font-weight: 700;
  color: #24599B;
  margin-bottom: 6px;
  text-align: right;
}

.checklist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 14px;
}

.checklist-item-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #FFFFFF;
  border: 1px solid #DCE6F2;
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.15s;
}

.checklist-item-card:hover {
  border-color: #3D7FC2;
  background: #F8FAFC;
}

.checklist-item-card.done {
  background: #F0FDF4;
  border-color: #86EFAC;
}

.cic-checkbox {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 2px solid #CBD5E1;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #FFFFFF;
  flex-shrink: 0;
}

.cic-checkbox.checked {
  background: #10B981;
  border-color: #10B981;
}

.cic-name {
  font-size: 0.94rem;
  font-weight: 700;
  color: #1B3456;
  margin-bottom: 4px;
}

.req-tag {
  font-size: 0.72rem;
  font-weight: 700;
  color: #DC2626;
  background: #FEE2E2;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 4px;
}

.cic-desc {
  font-size: 0.82rem;
  color: #75859A;
  line-height: 1.4;
}

.sop-guide-card {
  background: #FFFFFF;
  border: 1px solid #DCE6F2;
  border-radius: 16px;
  padding: 28px;
}

.sgc-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: #1B3456;
  margin: 0 0 6px;
}

.sgc-intro {
  font-size: 0.92rem;
  color: #556B82;
  margin: 0 0 20px;
}

.sop-parts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.sop-part {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 18px;
}

.sp-num {
  font-size: 0.75rem;
  font-weight: 800;
  color: #24599B;
  background: #EAF4FF;
  padding: 3px 8px;
  border-radius: 6px;
  display: inline-block;
  margin-bottom: 8px;
}

.sop-part h4 {
  font-size: 0.96rem;
  font-weight: 700;
  color: #1B3456;
  margin: 0 0 8px;
}

.sop-part p {
  font-size: 0.85rem;
  color: #556B82;
  line-height: 1.5;
  margin: 0 0 10px;
}

.sp-example {
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 0.78rem;
  color: #24599B;
  font-family: "Noto Sans SC", sans-serif;
  line-height: 1.4;
}

/* Dashboard Quick Cards for Slang and Career */
.dash-quotes-quick-card,
.dash-career-quick-card {
  background: #FFFFFF;
  border: 1px solid #DCE6F2;
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}