/* ==========================================================================
   BINGO GO 学 — Global Stylesheet
   Design System: Apple iOS — Clean & Modern
   Version: 4.0 (iOS)
   ========================================================================== */

/* ==========================================================================
   1. CSS Custom Properties / Design Tokens
   ========================================================================== */

:root {
  /* ---- Brand Colors (iOS Blue theme) ---- */
  --brand-blue: #007AFF;
  --brand-blue-light: #4A9FFF;
  --brand-blue-dark: #0056CC;
  --brand-blue-glow: rgba(0, 122, 255, 0.25);

  --green-duo: #58CC02;
  --green-duo-light: #78E828;
  --green-duo-dark: #46A500;
  --green-duo-glow: rgba(88, 204, 2, 0.30);

  --orange-warm: #FF8C00;
  --orange-warm-light: #FFA333;
  --orange-warm-glow: rgba(255, 140, 0, 0.30);

  --pink-soft: #FF6B81;
  --pink-soft-light: #FF8C9E;
  --pink-soft-glow: rgba(255, 107, 129, 0.25);

  --yellow-warm: #FFB800;
  --yellow-warm-light: #FFD54F;

  /* ---- iOS Theme Backgrounds ---- */
  --bg-deep: #F2F2F7;
  --bg-champagne: #F2F2F7; /* (legacy alias) */
  --bg-system: #F2F2F7;
  --bg-cream: #FFFFFF;
  --bg-white: #FFFFFF;
  --bg-warm: #F2F2F7;
  --bg-card: rgba(255, 255, 255, 0.85);
  --bg-card-hover: rgba(255, 245, 235, 0.95);
  --bg-glass: rgba(255, 255, 255, 0.82);
  --bg-input: #E5E5EA;
  --bg-overlay: rgba(0, 0, 0, 0.35);

  /* ---- Text Colors (light theme) ---- */
  --text-primary: #000000;
  --text-secondary: #3C3C43;
  --text-tertiary: #8E8E93;
  --text-muted: #C7C7CC;

  /* ---- Borders ---- */
  --border-subtle: rgba(0, 0, 0, 0.06);
  --border-medium: rgba(0, 0, 0, 0.10);
  --border-glow: rgba(0, 122, 255, 0.20);

  /* ---- Spacing ---- */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 20px;
  --space-2xl: 24px;
  --space-3xl: 32px;
  --space-4xl: 48px;

  /* ---- Border Radius ---- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* ---- Typography ---- */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display",
    "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", "Fira Code", "Cascadia Code", Consolas, monospace;

  --text-xs: 10px;
  --text-sm: 12px;
  --text-base: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --text-3xl: 36px;
  --text-4xl: 48px;

  /* ---- Shadows ---- */
  --shadow-xs: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.10);
  --shadow-glow-blue: 0 4px 20px var(--brand-blue-glow);
  --shadow-glow-green: 0 4px 20px var(--green-duo-glow);
  --shadow-glow-orange: 0 4px 20px var(--orange-warm-glow);

  /* ---- Transitions ---- */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 0.15s;
  --duration-normal: 0.25s;
  --duration-slow: 0.4s;
  --duration-bounce: 0.5s;

  /* ---- Layout ---- */
  --tab-height: 64px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --max-width: 420px;

  /* ---- Z-Index ---- */
  --z-base: 0;
  --z-card: 10;
  --z-sticky: 100;
  --z-tabbar: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-tooltip: 600;
}

/* ==========================================================================
   2. CSS Reset & Base
   ========================================================================== */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--bg-system);
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg {
  display: block;
  max-width: 100%;
}

a {
  color: var(--brand-blue-light);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out-expo);
}
a:hover { color: var(--brand-blue); }
a:active { color: var(--brand-blue-dark); }

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

ul, ol { list-style: none; }

/* ==========================================================================
   3. Typography
   ========================================================================== */

h1, .h1 { font-size: var(--text-3xl); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
h2, .h2 { font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }
h3, .h3 { font-size: var(--text-xl); font-weight: 700; line-height: 1.3; }
h4, .h4 { font-size: var(--text-lg); font-weight: 600; line-height: 1.35; }

.text-xs   { font-size: var(--text-xs); }
.text-sm   { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-md   { font-size: var(--text-md); }
.text-lg   { font-size: var(--text-lg); }
.text-xl   { font-size: var(--text-xl); }
.text-2xl  { font-size: var(--text-2xl); }
.text-3xl  { font-size: var(--text-3xl); }
.text-4xl  { font-size: var(--text-4xl); }

.font-bold    { font-weight: 700; }
.font-extrabold { font-weight: 800; }
.font-black   { font-weight: 900; }
.font-medium  { font-weight: 500; }
.font-normal  { font-weight: 400; }

.text-secondary { color: var(--text-secondary); }
.text-tertiary  { color: var(--text-tertiary); }
.text-muted     { color: var(--text-muted); }
.text-brand     { color: var(--brand-blue); }
.text-green     { color: var(--green-duo); }
.text-orange    { color: var(--orange-warm); }
.text-pink      { color: var(--pink-soft); }

.text-center { text-align: center; }
.text-right  { text-align: right; }

.uppercase { text-transform: uppercase; letter-spacing: 0.05em; }

/* ==========================================================================
   4. Layout & Container
   ========================================================================== */

/* App shell — mobile-first, desktop centers to 420px */
.app-shell {
  position: relative;
  width: 100%;
  max-width: var(--max-width);
  min-height: 100dvh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Desktop: wrap in phone-like frame */
@media (min-width: 600px) {
  html {
    background: #F5F0EB;
  }
  body {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F5F0EB;
    padding: var(--space-xl);
  }
  .app-shell {
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-lg), 0 0 0 1px var(--border-subtle);
    background: var(--bg-white);
  }
}

/* Main scroll area — fills space above tab bar */
.page-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(var(--tab-height) + var(--safe-bottom) + var(--space-xl));
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
  padding-top: var(--space-lg);
  scroll-behavior: smooth;
}

/* Section spacing */
.section { margin-bottom: var(--space-2xl); }
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-md);
}
.section-title {
  font-size: var(--text-lg);
  font-weight: 700;
}
.section-link {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  transition: color var(--duration-fast);
}
.section-link:hover { color: var(--text-primary); }

/* ==========================================================================
   5. Bottom Tab Bar (Scrollable)
   ========================================================================== */

.tab-bar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--max-width);
  height: auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 6px 0;
  padding-bottom: calc(6px + var(--safe-bottom));
  background: rgba(242, 242, 247, 0.85);
  backdrop-filter: blur(20px) saturate(100%);
  -webkit-backdrop-filter: blur(20px) saturate(100%);
  border-top: 1px solid var(--border-subtle);
  z-index: var(--z-tabbar);
}

.tab-bar::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 16px;
  right: 16px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 0, 0, 0.04),
    transparent
  );
}

.tab-bar-scroll {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 6px 4px;
  gap: 2px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.tab-bar-scroll::-webkit-scrollbar {
  display: none;
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  flex: 1;
  padding: 6px 4px 5px;
  border-radius: 0;
  white-space: nowrap;
  position: relative;
  text-decoration: none;
  color: var(--text-tertiary);
  transition: color var(--duration-fast) var(--ease-out-expo);
  -webkit-tap-highlight-color: transparent;
}
.tab-item .tab-svg {
  width: 24px;
  height: 24px;
  color: var(--text-tertiary);
  transition: color var(--duration-fast);
}
.tab-item.active .tab-svg {
  color: var(--brand-blue);
}

.tab-item:active {
  transform: scale(0.92);
  background: rgba(0, 0, 0, 0.04);
}

/* 中央凸起 GO学 按钮 */
.tab-item.tab-center {
  flex: 1;
  position: relative;
  top: -14px;
}
.tab-center-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--on-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(255, 214, 10, 0.42);
  transition: transform var(--duration-fast) var(--ease-out-expo);
  margin-bottom: 3px;
}
.tab-item.tab-center .tab-svg {
  width: 24px;
  height: 24px;
  color: var(--on-brand);
}
.tab-item.tab-center:active .tab-center-icon {
  transform: scale(0.9);
}
.tab-item.tab-center:active {
  transform: none;
  background: transparent;
}

/* 成就庆祝浮层 */
.badge-toast {
  position: fixed;
  left: 50%;
  bottom: calc(90px + var(--safe-bottom, 0px));
  transform: translate(-50%, 24px);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-radius: 16px;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  z-index: 1200;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.4s var(--ease-out-expo, cubic-bezier(0.22, 1, 0.36, 1)), opacity 0.3s ease;
}
.badge-toast.show {
  transform: translate(-50%, 0);
  opacity: 1;
}
.bt-icon { font-size: 30px; line-height: 1; }
.bt-body { display: flex; flex-direction: column; }
.bt-title { font-size: 12px; color: var(--text-secondary); font-weight: 700; }
.bt-name { font-size: 15px; font-weight: 800; color: var(--text); margin-top: 1px; }

/* 新手引导提示条 */
.guide-tip {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  left: 50%;
  transform: translate(-50%, -120%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
  z-index: 1200;
  max-width: calc(100% - 40px);
  transition: transform 0.45s var(--ease-out-expo, cubic-bezier(0.22, 1, 0.36, 1));
}
.guide-tip.show { transform: translate(-50%, 0); }
.gt-icon { font-size: 20px; line-height: 1; flex-shrink: 0; }
.gt-text { font-size: 13.5px; color: var(--text); font-weight: 600; line-height: 1.4; }
.gt-close { border: none; background: transparent; color: var(--text-tertiary); cursor: pointer; font-size: 14px; padding: 2px; flex-shrink: 0; }

/* Tab icon wrapper */
.tab-icon {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--text-tertiary);
  transition:
    color var(--duration-normal) var(--ease-out-expo),
    transform var(--duration-normal) var(--ease-out-back);
  position: relative;
}

.tab-label {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-tertiary);
  transition: color var(--duration-fast);
  letter-spacing: -0.1px;
}

/* Active tab */
.tab-item.active .tab-icon {
  color: var(--brand-blue);
  transform: scale(1.15);
}

/* SVG tab icon active */
.tab-item.active .tab-svg {
  color: var(--brand-blue);
}

.tab-item.active .tab-label {
  color: var(--brand-blue);
  font-weight: 700;
}

/* Active tab indicator dot */
.tab-item.active::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--brand-blue);
  box-shadow: 0 0 6px var(--brand-blue-glow);
}

/* Tab icon bounce animation on tap */
@keyframes tabBounce {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.25); }
  60%  { transform: scale(0.9); }
  100% { transform: scale(1.15); }
}
.tab-item.active .tab-icon {
  animation: tabBounce var(--duration-bounce) var(--ease-out-expo) forwards;
}

/* ==========================================================================
   6. Cards
   ========================================================================== */

/* Base card — iOS white card */
.card {
  background: var(--bg-white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--duration-normal) var(--ease-out-expo),
    box-shadow var(--duration-normal) var(--ease-out-expo),
    border-color var(--duration-normal) var(--ease-out-expo);
  position: relative;
  overflow: hidden;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-medium);
}

.card:active {
  transform: scale(0.98);
}

/* Card with large border radius */
.card-xl {
  border-radius: var(--radius-xl);
}

.card-2xl {
  border-radius: var(--radius-2xl);
}

/* Stat card — colored left border accent */
.stat-card {
  background: var(--bg-white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-xl);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  transition:
    transform var(--duration-normal) var(--ease-out-expo),
    box-shadow var(--duration-normal) var(--ease-out-expo);
}

.stat-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 4px;
  border-radius: 0 2px 2px 0;
}

.stat-card.blue::before  { background: linear-gradient(180deg, var(--brand-blue), var(--brand-blue-light)); }
.stat-card.green::before  { background: linear-gradient(180deg, var(--green-duo), var(--green-duo-light)); }
.stat-card.orange::before { background: linear-gradient(180deg, var(--orange-warm), var(--orange-warm-light)); }
.stat-card.pink::before   { background: linear-gradient(180deg, var(--pink-soft), var(--pink-soft-light)); }

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.stat-card .stat-value {
  font-size: var(--text-2xl);
  font-weight: 800;
  line-height: 1.15;
  color: var(--text-primary);
}

.stat-card .stat-label {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Horizontal stat row */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-md);
}

/* Hero card — prominent, gradient-accented */
.hero-card {
  background: var(--bg-white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}

.hero-card::after {
  content: "";
  position: absolute;
  top: -50%;
  right: -30%;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--brand-blue-glow), transparent 70%);
  pointer-events: none;
}

/* Feature card — icon + title + desc */
.feature-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  background: var(--bg-white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-xs);
  transition:
    transform var(--duration-normal) var(--ease-out-expo),
    box-shadow var(--duration-normal) var(--ease-out-expo);
}

.feature-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.feature-card .feature-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  background: var(--bg-warm);
}

.feature-card .feature-title {
  font-weight: 600;
  font-size: var(--text-base);
  margin-bottom: 2px;
}

.feature-card .feature-desc {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  line-height: 1.5;
}

/* ==========================================================================
   7. Progress Ring
   ========================================================================== */

.progress-ring-container {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.progress-ring {
  transform: rotate(-90deg);
  width: 100%;
  height: 100%;
}

.progress-ring .track {
  fill: none;
  stroke: rgba(0, 0, 0, 0.06);
}

.progress-ring .fill {
  fill: none;
  stroke: var(--brand-blue);
  stroke-linecap: round;
  transition: stroke-dashoffset 1s var(--ease-out-expo);
  filter: drop-shadow(0 0 6px var(--brand-blue-glow));
}

.progress-ring .fill.blue   { stroke: var(--brand-blue); filter: drop-shadow(0 0 6px var(--brand-blue-glow)); }
.progress-ring .fill.orange { stroke: var(--orange-warm); filter: drop-shadow(0 0 6px var(--orange-warm-glow)); }
.progress-ring .fill.pink   { stroke: var(--pink-soft); filter: drop-shadow(0 0 6px var(--pink-soft-glow)); }

.progress-ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.progress-ring-center .ring-value {
  font-size: var(--text-lg);
  font-weight: 800;
  line-height: 1;
}

.progress-ring-center .ring-label {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: 2px;
}

/* ==========================================================================
   8. Badges
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

/* Color variants */
.badge-blue {
  background: linear-gradient(135deg, rgba(255, 107, 53, 0.15), rgba(255, 140, 90, 0.10));
  color: var(--brand-blue);
  border: 1px solid rgba(255, 107, 53, 0.20);
}

.badge-green {
  background: linear-gradient(135deg, rgba(88, 204, 2, 0.12), rgba(120, 232, 40, 0.08));
  color: var(--green-duo-dark);
  border: 1px solid rgba(88, 204, 2, 0.18);
}

.badge-orange {
  background: linear-gradient(135deg, rgba(255, 140, 0, 0.12), rgba(255, 163, 51, 0.08));
  color: var(--orange-warm);
  border: 1px solid rgba(255, 140, 0, 0.18);
}

.badge-pink {
  background: linear-gradient(135deg, rgba(255, 107, 129, 0.12), rgba(255, 140, 158, 0.08));
  color: var(--pink-soft);
  border: 1px solid rgba(255, 107, 129, 0.18);
}

.badge-ghost {
  background: rgba(0, 0, 0, 0.04);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
}

/* Streak badge */
.badge-streak {
  background: linear-gradient(135deg, rgba(255, 140, 0, 0.15), rgba(255, 72, 0, 0.10));
  color: var(--orange-warm);
  border: 1px solid rgba(255, 140, 0, 0.22);
  gap: 4px;
}

.badge-streak::before {
  content: "🔥";
  font-size: 11px;
}

/* Level badge */
.badge-level {
  background: linear-gradient(135deg, rgba(255, 107, 53, 0.15), rgba(255, 140, 90, 0.10));
  color: var(--brand-blue);
  border: 1px solid rgba(255, 107, 53, 0.20);
  font-weight: 700;
}

/* ==========================================================================
   9. Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 10px 24px;
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.4;
  transition:
    transform var(--duration-fast) var(--ease-out-expo),
    box-shadow var(--duration-fast) var(--ease-out-expo),
    opacity var(--duration-fast) var(--ease-out-expo),
    background var(--duration-normal) var(--ease-out-expo);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  position: relative;
  overflow: hidden;
}

.btn:active {
  transform: scale(0.95);
}

.btn:disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* Primary button — iOS blue */
.btn-primary {
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-light));
  color: #FFFFFF;
  box-shadow: var(--shadow-glow-blue);
  font-weight: 700;
}

.btn-primary:hover {
  box-shadow: 0 6px 24px var(--brand-blue-glow);
}

.btn-primary:active {
  box-shadow: 0 2px 8px var(--brand-blue-glow);
}

/* Secondary outline button */
.btn-outline {
  background: transparent;
  color: var(--brand-blue);
  border: 1.5px solid rgba(255, 107, 53, 0.35);
}

.btn-outline:hover {
  border-color: var(--brand-blue);
  background: rgba(255, 107, 53, 0.06);
}

/* Ghost button */
.btn-ghost {
  background: rgba(0, 0, 0, 0.04);
  color: var(--text-secondary);
}

.btn-ghost:hover {
  background: rgba(0, 0, 0, 0.08);
  color: var(--text-primary);
}

/* Success button */
.btn-success {
  background: linear-gradient(135deg, var(--green-duo), var(--green-duo-light));
  color: #FFFFFF;
  box-shadow: 0 4px 16px var(--green-duo-glow);
}

.btn-success:hover {
  box-shadow: 0 6px 24px var(--green-duo-glow);
}

/* Danger button */
.btn-danger {
  background: linear-gradient(135deg, var(--pink-soft), #FF5277);
  color: #FFFFFF;
  box-shadow: 0 4px 16px var(--pink-soft-glow);
}

/* Button sizes */
.btn-sm  { padding: 6px 16px; font-size: var(--text-sm); border-radius: var(--radius-sm); }
.btn-lg  { padding: 14px 32px; font-size: var(--text-md); border-radius: var(--radius-lg); }
.btn-xl  { padding: 16px 40px; font-size: var(--text-lg); border-radius: var(--radius-xl); font-weight: 700; }

.btn-block { width: 100%; }

/* Icon button */
.btn-icon {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: var(--radius-md);
  font-size: 18px;
}

.btn-icon.btn-sm { width: 32px; height: 32px; font-size: 15px; }
.btn-icon.btn-lg { width: 48px; height: 48px; font-size: 22px; }

/* Float action button */
.fab {
  position: fixed;
  bottom: calc(var(--tab-height) + var(--safe-bottom) + 16px);
  right: 16px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-light));
  color: #FFFFFF;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px var(--brand-blue-glow);
  z-index: var(--z-sticky);
  transition:
    transform var(--duration-fast) var(--ease-out-expo),
    box-shadow var(--duration-fast) var(--ease-out-expo);
}

.fab:active {
  transform: scale(0.9);
}

/* ==========================================================================
   10. Input Fields
   ========================================================================== */

.input {
  width: 100%;
  padding: 10px 16px;
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  color: var(--text-primary);
  transition:
    border-color var(--duration-normal) var(--ease-out-expo),
    box-shadow var(--duration-normal) var(--ease-out-expo),
    background var(--duration-normal) var(--ease-out-expo);
}

.input::placeholder {
  color: var(--text-muted);
}

.input:focus {
  border-color: rgba(255, 107, 53, 0.40);
  box-shadow: 0 0 0 3px var(--brand-blue-glow);
  background: var(--bg-white);
  outline: none;
}

.input.error {
  border-color: rgba(255, 107, 129, 0.40);
  box-shadow: 0 0 0 3px var(--pink-soft-glow);
}

.input-lg {
  padding: 14px 20px;
  font-size: var(--text-md);
  border-radius: var(--radius-lg);
}

.input-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.input-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
}

.input-hint {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.input-hint.error {
  color: var(--pink-soft);
}

/* Search input */
.search-input {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 8px 14px;
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  transition:
    border-color var(--duration-normal),
    box-shadow var(--duration-normal);
}

.search-input:focus-within {
  border-color: rgba(255, 107, 53, 0.40);
  box-shadow: 0 0 0 3px var(--brand-blue-glow);
}

.search-input .search-icon {
  flex-shrink: 0;
  font-size: 16px;
  color: var(--text-tertiary);
}

.search-input input {
  flex: 1;
  background: transparent;
  color: var(--text-primary);
  font-size: var(--text-base);
}

.search-input input::placeholder {
  color: var(--text-muted);
}

/* ==========================================================================
   11. Toast Notifications
   ========================================================================== */

.toast-container {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--max-width);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-lg);
  padding-top: calc(var(--safe-bottom) + var(--space-2xl));
  z-index: var(--z-toast);
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 12px 20px;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  pointer-events: auto;
  max-width: 360px;
  animation: toastIn var(--duration-slow) var(--ease-out-back) forwards;
}

.toast.leaving {
  animation: toastOut var(--duration-normal) var(--ease-in-out) forwards;
}

.toast-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.toast-message {
  flex: 1;
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-primary);
}

.toast-close {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--text-tertiary);
  border-radius: var(--radius-sm);
  transition: color var(--duration-fast);
}

.toast-close:hover { color: var(--text-primary); }

/* Toast variants */
.toast.success { border-left: 3px solid var(--green-duo); }
.toast.success .toast-icon { color: var(--green-duo); }
.toast.error   { border-left: 3px solid var(--pink-soft); }
.toast.error .toast-icon   { color: var(--pink-soft); }
.toast.warning { border-left: 3px solid var(--orange-warm); }
.toast.warning .toast-icon { color: var(--orange-warm); }
.toast.info    { border-left: 3px solid var(--brand-blue); }
.toast.info .toast-icon    { color: var(--brand-blue); }

/* Toast animations */
@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateY(-16px) scale(0.92);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes toastOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-12px) scale(0.9);
  }
}

/* ==========================================================================
   12. Modals & Overlays
   ========================================================================== */

.overlay {
  position: fixed;
  inset: 0;
  background: var(--bg-overlay);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn var(--duration-normal) var(--ease-out-expo) forwards;
}

.modal {
  width: calc(100% - 40px);
  max-width: 380px;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  box-shadow: var(--shadow-lg);
  animation: modalIn var(--duration-slow) var(--ease-out-back) forwards;
}

.modal-title {
  font-size: var(--text-lg);
  font-weight: 700;
  margin-bottom: var(--space-md);
  text-align: center;
}

.modal-body {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: var(--space-xl);
}

.modal-actions {
  display: flex;
  gap: var(--space-md);
}

.modal-actions .btn {
  flex: 1;
}

/* Bottom sheet */
.bottom-sheet {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateY(100%);
  width: 100%;
  max-width: var(--max-width);
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: var(--space-lg) var(--space-xl) calc(var(--safe-bottom) + var(--space-xl));
  z-index: var(--z-modal);
  transition: transform var(--duration-slow) var(--ease-out-expo);
  border-top: 1px solid var(--border-subtle);
}

.bottom-sheet.open {
  transform: translateX(-50%) translateY(0);
}

.bottom-sheet-handle {
  width: 36px;
  height: 4px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 2px;
  margin: 0 auto var(--space-lg);
}

/* ==========================================================================
   13. Loading & Skeleton
   ========================================================================== */

.spinner {
  width: 24px;
  height: 24px;
  border: 2.5px solid var(--border-subtle);
  border-top-color: var(--brand-blue);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

.spinner-sm { width: 16px; height: 16px; border-width: 2px; }
.spinner-lg { width: 36px; height: 36px; border-width: 3px; }

.skeleton {
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.04) 25%,
    rgba(0, 0, 0, 0.08) 50%,
    rgba(0, 0, 0, 0.04) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

.skeleton-text {
  height: 14px;
  margin-bottom: var(--space-sm);
  border-radius: 4px;
}

.skeleton-text:last-child { width: 60%; }

.skeleton-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
}

.skeleton-card {
  height: 100px;
  border-radius: var(--radius-lg);
}

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ==========================================================================
   14. Streak & Gamification
   ========================================================================== */

/* Streak flame icon animation */
.streak-flame {
  display: inline-block;
  animation: flameFlicker 1.2s ease-in-out infinite alternate;
  transform-origin: center bottom;
}

@keyframes flameFlicker {
  0%   { transform: scaleY(1) scaleX(1); }
  25%  { transform: scaleY(1.05) scaleX(0.97); }
  50%  { transform: scaleY(0.95) scaleX(1.03); }
  75%  { transform: scaleY(1.06) scaleX(0.96); }
  100% { transform: scaleY(1) scaleX(1.02); }
}

/* Streak count display */
.streak-count {
  font-size: var(--text-4xl);
  font-weight: 900;
  background: linear-gradient(180deg, var(--orange-warm) 0%, #FF6B2B 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}

/* XP bar */
.xp-bar {
  width: 100%;
  height: 8px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.xp-bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-blue-light));
  transition: width 0.8s var(--ease-out-expo);
  box-shadow: 0 0 8px var(--brand-blue-glow);
}

.xp-bar-fill.green {
  background: linear-gradient(90deg, var(--green-duo), var(--green-duo-light));
  box-shadow: 0 0 8px var(--green-duo-glow);
}

.xp-bar-fill.orange {
  background: linear-gradient(90deg, var(--orange-warm), var(--orange-warm-light));
  box-shadow: 0 0 8px var(--orange-warm-glow);
}

.xp-label {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: 4px;
}

/* Achievement / milestone chip */
.achievement-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 180, 0, 0.10));
  border: 1px solid rgba(255, 215, 0, 0.25);
  font-size: var(--text-xs);
  font-weight: 600;
  color: #C8A000;
}

.achievement-chip::before {
  content: "⭐";
  font-size: 13px;
}

/* ==========================================================================
   15. Check-in / Completion Celebration
   ========================================================================== */

/* Celebration particle container */
.celebration {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-overlay);
}

.particle {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  animation: particleBurst 0.8s var(--ease-out-expo) forwards;
}

@keyframes bounceInPop {
  0%   { transform: scale(0); opacity: 0; }
  40%  { transform: scale(1.3); opacity: 1; }
  60%  { transform: scale(0.9); }
  80%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.bounce-in {
  animation: bounceInPop var(--duration-bounce) var(--ease-out-back) forwards;
}

@keyframes particleBurst {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(var(--tx), var(--ty)) scale(0);
    opacity: 0;
  }
}

/* Completion stamp */
.completion-stamp {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  animation: bounceInPop 0.6s var(--ease-out-back) forwards;
}

.completion-stamp .stamp-icon {
  font-size: 48px;
}

.completion-stamp .stamp-text {
  font-size: var(--text-lg);
  font-weight: 800;
  color: var(--green-duo);
}

/* ==========================================================================
   16. Word Card (Flashcard style)
   ========================================================================== */

.word-card {
  background: var(--bg-white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  cursor: pointer;
  transition:
    transform var(--duration-normal) var(--ease-out-expo),
    box-shadow var(--duration-normal) var(--ease-out-expo),
    border-color var(--duration-normal);
  min-height: 180px;
  justify-content: center;
}

.word-card:hover {
  border-color: var(--border-medium);
  box-shadow: var(--shadow-md);
}

.word-card .word-en {
  font-size: var(--text-2xl);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.word-card .word-phonetic {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
}

.word-card .word-zh {
  font-size: var(--text-md);
  color: var(--text-secondary);
  font-weight: 500;
}

.word-card .word-tag {
  margin-top: auto;
}

/* Word list item */
.word-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: var(--bg-white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  transition:
    background var(--duration-fast),
    border-color var(--duration-fast);
}

.word-item:hover {
  background: var(--bg-warm);
  border-color: var(--border-medium);
}

.word-item .word-rank {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-tertiary);
  flex-shrink: 0;
}

.word-item.active .word-rank {
  background: var(--brand-blue);
  color: #FFFFFF;
}

.word-item .word-main {
  flex: 1;
  min-width: 0;
}

.word-item .word-main .word-en {
  font-weight: 600;
  font-size: var(--text-base);
}

.word-item .word-main .word-zh {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: 1px;
}

/* ==========================================================================
   17. Exercise / Quiz Components
   ========================================================================== */

/* Question card */
.question-card {
  background: var(--bg-white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  box-shadow: var(--shadow-sm);
}

.question-number {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin-bottom: var(--space-md);
}

.question-prompt {
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: var(--space-2xl);
}

/* Option buttons */
.option-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.option-btn {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
  padding: 14px 18px;
  background: var(--bg-white);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--text-primary);
  text-align: left;
  box-shadow: var(--shadow-xs);
  transition:
    border-color var(--duration-fast),
    background var(--duration-fast),
    transform var(--duration-fast);
}

.option-btn:hover {
  background: var(--bg-warm);
  border-color: var(--border-medium);
}

.option-btn:active {
  transform: scale(0.98);
}

.option-btn.correct {
  border-color: var(--green-duo);
  background: rgba(88, 204, 2, 0.08);
  box-shadow: 0 0 0 3px var(--green-duo-glow);
}

.option-btn.incorrect {
  border-color: var(--pink-soft);
  background: rgba(255, 107, 129, 0.08);
  box-shadow: 0 0 0 3px var(--pink-soft-glow);
}

.option-btn .option-letter {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--text-sm);
  flex-shrink: 0;
}

.option-btn.correct .option-letter {
  background: var(--green-duo);
  color: #FFFFFF;
}

.option-btn.incorrect .option-letter {
  background: var(--pink-soft);
  color: #FFFFFF;
}

/* Result bar */
.result-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-lg) var(--space-xl);
  background: var(--bg-white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  margin-bottom: var(--space-lg);
}

.result-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.result-stat .stat-num {
  font-size: var(--text-xl);
  font-weight: 800;
}

.result-stat .stat-label {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.result-stat.green .stat-num { color: var(--green-duo); }
.result-stat.pink .stat-num  { color: var(--pink-soft); }
.result-stat.blue .stat-num  { color: var(--brand-blue); }

/* ==========================================================================
   18. Tomato Timer (Pomodoro)
   ========================================================================== */

.tomato-timer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xl);
  padding: var(--space-2xl) 0;
}

.tomato-display {
  position: relative;
  width: 220px;
  height: 220px;
}

.tomato-ring {
  transform: rotate(-90deg);
  width: 100%;
  height: 100%;
}

.tomato-ring .track {
  fill: none;
  stroke: rgba(0, 0, 0, 0.05);
  stroke-width: 6;
}

.tomato-ring .fill {
  fill: none;
  stroke: var(--brand-blue);
  stroke-width: 6;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s linear;
  filter: drop-shadow(0 0 10px var(--brand-blue-glow));
}

.tomato-time {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.tomato-time .time-display {
  font-size: var(--text-4xl);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
}

.tomato-time .time-label {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 4px;
}

.tomato-controls {
  display: flex;
  gap: var(--space-lg);
}

.tomato-session-count {
  display: flex;
  gap: var(--space-sm);
}

.tomato-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.08);
  transition: background var(--duration-normal);
}

.tomato-dot.completed {
  background: var(--brand-blue);
  box-shadow: 0 0 8px var(--brand-blue-glow);
}

/* ==========================================================================
   19. Pronunciation / Speaking
   ========================================================================== */

.speak-card {
  background: var(--bg-white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xl);
}

.speak-text {
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
  line-height: 1.4;
}

.speak-phonetic {
  font-size: var(--text-base);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
}

/* Mic button */
.mic-btn {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-light));
  color: #FFFFFF;
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px var(--brand-blue-glow);
  transition:
    transform var(--duration-fast),
    box-shadow var(--duration-fast);
}

.mic-btn:active {
  transform: scale(0.92);
}

.mic-btn.recording {
  background: linear-gradient(135deg, var(--pink-soft), #FF3B5F);
  box-shadow: 0 4px 20px var(--pink-soft-glow);
  animation: micPulse 1.5s ease-in-out infinite;
}

@keyframes micPulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--pink-soft-glow); }
  50%      { box-shadow: 0 0 0 16px rgba(255, 107, 129, 0); }
}

/* Score ring */
.score-display {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.score-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.score-value {
  font-size: var(--text-3xl);
  font-weight: 900;
  line-height: 1;
  color: var(--text-primary);
}

.score-label {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* ==========================================================================
   20. Leaderboard
   ========================================================================== */

.leaderboard-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: var(--bg-white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  transition: background var(--duration-fast);
}

.leaderboard-item:hover {
  background: var(--bg-warm);
}

.leaderboard-rank {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: var(--text-sm);
  flex-shrink: 0;
}

.leaderboard-rank.gold   { background: linear-gradient(135deg, #FFD700, #FFA500); color: #1a1a2e; }
.leaderboard-rank.silver { background: linear-gradient(135deg, #C0C0C0, #A8A8A8); color: #1a1a2e; }
.leaderboard-rank.bronze { background: linear-gradient(135deg, #CD7F32, #B87333); color: #1a1a2e; }

.leaderboard-info {
  flex: 1;
  min-width: 0;
}

.leaderboard-name {
  font-weight: 600;
  font-size: var(--text-base);
}

.leaderboard-detail {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: 1px;
}

.leaderboard-xp {
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--brand-blue);
}

.leaderboard-item.current-user {
  border-color: rgba(255, 107, 53, 0.25);
  background: rgba(255, 107, 53, 0.06);
}

/* ==========================================================================
   21. Page Backgrounds
   ========================================================================== */

/* Dashboard background */
.page-home,
.page-dashboard {
  background:
    radial-gradient(ellipse 80% 60% at 70% 15%, rgba(255, 107, 53, 0.06), transparent 60%),
    radial-gradient(ellipse 60% 50% at 30% 85%, rgba(255, 184, 0, 0.05), transparent 60%),
    linear-gradient(180deg, #F2F2F7 0%, #FAFAFA 40%, #FFFFFF 100%);
}

/* Words — lime green */
.page-words {
  background:
    radial-gradient(ellipse 80% 60% at 70% 10%, rgba(88, 204, 2, 0.06), transparent 60%),
    radial-gradient(ellipse 50% 40% at 20% 80%, rgba(74, 144, 217, 0.04), transparent 60%),
    linear-gradient(180deg, #F2F2F7 0%, #F0FFF5 40%, #FFFFFF 100%);
}

/* Practice — soft lavender */
.page-practice {
  background:
    radial-gradient(ellipse 80% 60% at 60% 15%, rgba(120, 50, 255, 0.05), transparent 60%),
    radial-gradient(ellipse 50% 40% at 30% 85%, rgba(255, 107, 53, 0.03), transparent 60%),
    linear-gradient(180deg, #F2F2F7 0%, #F2F1F9 40%, #FFFFFF 100%);
}

/* Speaking — warm orange */
.page-speaking {
  background:
    radial-gradient(ellipse 80% 60% at 65% 12%, rgba(255, 107, 53, 0.06), transparent 60%),
    radial-gradient(ellipse 50% 40% at 25% 82%, rgba(255, 184, 0, 0.03), transparent 60%),
    linear-gradient(180deg, #F2F2F7 0%, #FFF5F5 40%, #FFFFFF 100%);
}

/* Wrong Book — soft pink */
.page-wrongbook {
  background:
    radial-gradient(ellipse 80% 60% at 65% 10%, rgba(255, 107, 129, 0.05), transparent 60%),
    radial-gradient(ellipse 50% 40% at 30% 85%, rgba(255, 107, 53, 0.03), transparent 60%),
    linear-gradient(180deg, #F2F2F7 0%, #FFF5F5 40%, #FFFAFA 100%);
}

/* Tomato — mint fresh */
.page-tomato {
  background:
    radial-gradient(circle at 15% 88%, rgba(255, 107, 53, 0.04) 20px, transparent 20px),
    radial-gradient(circle at 85% 92%, rgba(88, 204, 2, 0.03) 15px, transparent 15px),
    radial-gradient(ellipse 70% 55% at 60% 15%, rgba(88, 204, 2, 0.04), transparent 60%),
    radial-gradient(ellipse 50% 40% at 30% 85%, rgba(74, 144, 217, 0.03), transparent 60%),
    linear-gradient(180deg, #F2F2F7 0%, #F0FFF5 40%, #FFFFFF 100%);
}

/* Profile */
.page-profile {
  background:
    radial-gradient(ellipse 70% 50% at 60% 20%, rgba(255, 107, 53, 0.05), transparent 60%),
    linear-gradient(180deg, #F2F2F7 0%, #FFFFFF 100%);
}

/* Generic / fallback */
.page-default {
  background:
    radial-gradient(ellipse 60% 40% at 50% 20%, rgba(255, 107, 53, 0.04), transparent 60%),
    linear-gradient(180deg, #F2F2F7 0%, #FAFAFA 100%);
}

/* Language page — same as practice */
.page-language {
  background:
    radial-gradient(ellipse 80% 60% at 60% 15%, rgba(120, 50, 255, 0.05), transparent 60%),
    radial-gradient(ellipse 50% 40% at 30% 85%, rgba(255, 107, 53, 0.03), transparent 60%),
    linear-gradient(180deg, #F2F2F7 0%, #F2F1F9 40%, #FFFFFF 100%);
}

/* Oral page — same as speaking */
.page-oral {
  background:
    radial-gradient(ellipse 80% 60% at 65% 12%, rgba(255, 107, 53, 0.06), transparent 60%),
    radial-gradient(ellipse 50% 40% at 25% 82%, rgba(255, 184, 0, 0.03), transparent 60%),
    linear-gradient(180deg, #F2F2F7 0%, #FFF5F5 40%, #FFFFFF 100%);
}

/* Planner — mint/lime gradient */
.page-planner {
  background: radial-gradient(ellipse 70% 55% at 60% 15%, rgba(88, 204, 2, 0.04), transparent 60%),
              radial-gradient(ellipse 50% 40% at 30% 85%, rgba(74, 144, 217, 0.03), transparent 60%),
              linear-gradient(180deg, #F2F2F7 0%, #F0FFF5 40%, #FFFFFF 100%);
}

/* Discovery / explore (future) */
.page-discovery {
  background:
    radial-gradient(ellipse 80% 60% at 50% 20%, rgba(255, 184, 0, 0.04), transparent 60%),
    linear-gradient(180deg, #F2F2F7 0%, #FAFAFA 100%);
}

/* ==========================================================================
   22. Page Transition Animations
   ========================================================================== */

@keyframes pageEnter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pageExit {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-8px);
  }
}

.page-enter {
  animation: pageEnter var(--duration-slow) var(--ease-out-expo) forwards;
}

.page-exit {
  animation: pageExit var(--duration-normal) var(--ease-in-out) forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modalIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ==========================================================================
   23. Headers & Navigation
   ========================================================================== */

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-lg);
  padding-top: calc(var(--safe-bottom) + var(--space-lg));
  gap: var(--space-md);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.page-header .back-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--text-secondary);
  transition: background var(--duration-fast);
}

.page-header .back-btn:hover {
  background: rgba(0, 0, 0, 0.04);
}

.page-header .page-title {
  font-size: var(--text-lg);
  font-weight: 700;
  flex: 1;
  text-align: center;
}

.page-header .header-action {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--text-secondary);
}

/* ==========================================================================
   24. Empty States
   ========================================================================== */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-4xl) var(--space-2xl);
  text-align: center;
  gap: var(--space-md);
}

.empty-state .empty-icon {
  font-size: 48px;
  opacity: 0.4;
}

.empty-state .empty-title {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--text-secondary);
}

.empty-state .empty-desc {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  line-height: 1.5;
  max-width: 260px;
}

/* ==========================================================================
   25. Tags & Labels
   ========================================================================== */

.tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 500;
  background: rgba(0, 0, 0, 0.04);
  color: var(--text-tertiary);
}

.tag.active {
  background: rgba(255, 107, 53, 0.12);
  color: var(--brand-blue);
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

/* Difficulty labels */
.difficulty-easy   { color: var(--green-duo); }
.difficulty-medium { color: var(--orange-warm); }
.difficulty-hard   { color: var(--pink-soft); }

/* ==========================================================================
   26. Utility Classes
   ========================================================================== */

.flex       { display: flex; }
.flex-col   { display: flex; flex-direction: column; }
.flex-wrap  { flex-wrap: wrap; }
.flex-1     { flex: 1; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.items-end    { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around  { justify-content: space-around; }

.gap-xs  { gap: var(--space-xs); }
.gap-sm  { gap: var(--space-sm); }
.gap-md  { gap: var(--space-md); }
.gap-lg  { gap: var(--space-lg); }
.gap-xl  { gap: var(--space-xl); }
.gap-2xl { gap: var(--space-2xl); }

.p-sm  { padding: var(--space-sm); }
.p-md  { padding: var(--space-md); }
.p-lg  { padding: var(--space-lg); }
.p-xl  { padding: var(--space-xl); }
.p-2xl { padding: var(--space-2xl); }

.px-sm  { padding-left: var(--space-sm); padding-right: var(--space-sm); }
.px-md  { padding-left: var(--space-md); padding-right: var(--space-md); }
.px-lg  { padding-left: var(--space-lg); padding-right: var(--space-lg); }
.px-xl  { padding-left: var(--space-xl); padding-right: var(--space-xl); }

.py-sm  { padding-top: var(--space-sm); padding-bottom: var(--space-sm); }
.py-md  { padding-top: var(--space-md); padding-bottom: var(--space-md); }
.py-lg  { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }
.py-xl  { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }

.mt-sm  { margin-top: var(--space-sm); }
.mt-md  { margin-top: var(--space-md); }
.mt-lg  { margin-top: var(--space-lg); }
.mt-xl  { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }

.mb-sm  { margin-bottom: var(--space-sm); }
.mb-md  { margin-bottom: var(--space-md); }
.mb-lg  { margin-bottom: var(--space-lg); }
.mb-xl  { margin-bottom: var(--space-xl); }
.mb-2xl { margin-bottom: var(--space-2xl); }

.w-full   { width: 100%; }
.h-full   { height: 100%; }
.min-h-0  { min-height: 0; }

.relative { position: relative; }
.absolute { position: absolute; }
.inset-0  { inset: 0; }
.overflow-hidden { overflow: hidden; }

.rounded-sm  { border-radius: var(--radius-sm); }
.rounded-md  { border-radius: var(--radius-md); }
.rounded-lg  { border-radius: var(--radius-lg); }
.rounded-xl  { border-radius: var(--radius-xl); }
.rounded-2xl { border-radius: var(--radius-2xl); }
.rounded-full { border-radius: var(--radius-full); }

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hidden    { display: none !important; }
.invisible { visibility: hidden; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Safety area padding helpers */
.pt-safe { padding-top: var(--safe-bottom); }
.pb-safe { padding-bottom: var(--safe-bottom); }

/* ==========================================================================
   27. Responsive — Tablet & Desktop
   ========================================================================== */

@media (min-width: 600px) {
  .tab-bar {
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    overflow: hidden;
  }

  .page-content {
    padding-left: var(--space-xl);
    padding-right: var(--space-xl);
  }

  .page-header {
    padding-left: var(--space-xl);
    padding-right: var(--space-xl);
  }
}

/* Large tablet landscape */
@media (min-width: 769px) and (max-width: 1023px) {
  .app-shell {
    max-width: var(--max-width);
  }
}

/* High-DPI screens */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   28. Print Styles
   ========================================================================== */

@media print {
  body {
    background: #FFFFFF;
    color: #000000;
  }
  .tab-bar,
  .fab,
  .toast-container,
  .overlay {
    display: none !important;
  }
}

/* ==========================================================================
   29. Page-Specific Styles (v2 — Bottom Tab Design System)
   ========================================================================== */

/* ---- App Container (mobile-first centering) ---- */
.app-container {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  padding-bottom: 80px;
  padding-top: env(safe-area-inset-top, 0px);
  position: relative;
}

.dashboard-container {
  padding: var(--space-lg);
}

/* Greeting Section */
.greeting-section {
  text-align: center;
  padding: var(--space-2xl) 0 var(--space-xl);
}

.greeting-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
}

.greeting-text {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.today-subtitle {
  font-size: var(--text-base);
  color: var(--text-tertiary);
  margin: 0 0 var(--space-lg);
}

.today-subtitle strong {
  color: var(--brand-blue);
  font-weight: 800;
}

/* Streak Badge */
.streak-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, rgba(255, 140, 0, 0.15), rgba(255, 72, 0, 0.10));
  border: 1px solid rgba(255, 140, 0, 0.20);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--orange-warm);
  animation: streakGlow 2s ease-in-out infinite;
}

@keyframes streakGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 140, 0, 0.15); }
  50% { box-shadow: 0 0 12px 2px rgba(255, 140, 0, 0.25); }
}

.streak-fire {
  font-size: 14px;
  line-height: 1;
}

.streak-days {
  font-size: var(--text-md);
}

.streak-label {
  opacity: 0.7;
}

/* Progress Ring (dashboard inline) */
.progress-ring-container {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 130px;
  margin: 0 auto;
}

.progress-ring {
  width: 100%;
  height: 100%;
}

.progress-ring-bg {
  fill: none;
}

.progress-ring-fill {
  fill: none;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.8s var(--ease-out-expo);
  filter: drop-shadow(0 0 8px var(--brand-blue-glow));
}

.progress-ring-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.progress-percent {
  font-size: 30px;
  font-weight: 900;
  color: var(--text-primary);
  line-height: 1;
}

.progress-unit {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin-top: 2px;
}

.daily-goal-label {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: var(--space-sm);
}

/* Quick Action Grid */
.quick-actions {
  margin-top: var(--space-2xl);
}

.section-title {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 var(--space-md);
}

.action-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}

.action-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--space-xl) var(--space-md);
  background: var(--bg-white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.action-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: rgba(255, 107, 53, 0.25);
}

.action-card:active {
  transform: scale(0.96);
}

.action-emoji {
  font-size: 32px;
  line-height: 1;
}

.action-title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-primary);
}

.action-sub {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* Recent Activity */
.recent-activity {
  margin-top: var(--space-2xl);
}

.activity-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.activity-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-md) 0;
}

.activity-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-blue);
  margin-top: 6px;
  box-shadow: 0 0 6px var(--brand-blue-glow);
}

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

.activity-text {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

.activity-time {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* ==========================================================================
   30. Words Page — Flashcard Flip
   ========================================================================== */

.words-container {
  padding: var(--space-lg);
}

/* Scrollable pill tabs */
.scroll-tabs {
  display: flex;
  gap: var(--space-sm);
  overflow-x: auto;
  padding-bottom: var(--space-sm);
  -webkit-overflow-scrolling: touch;
}

.scroll-tabs::-webkit-scrollbar {
  display: none;
}

.wordbank-pill,
.exam-pill,
.topic-pill {
  flex-shrink: 0;
  padding: 8px 18px;
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  border: 1px solid var(--border-subtle);
  background: rgba(0, 0, 0, 0.03);
  color: var(--text-tertiary);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.wordbank-pill.active,
.exam-pill.active,
.topic-pill.active {
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-light));
  color: #FFFFFF;
  border-color: transparent;
  box-shadow: 0 2px 12px var(--brand-blue-glow);
}

/* Flashcard */
.flashcard-section {
  margin-top: var(--space-2xl);
  perspective: 1000px;
}

.flashcard {
  width: 100%;
  min-height: 320px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.flashcard.flipped {
  transform: rotateY(180deg);
}

.flashcard-front,
.flashcard-back {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--radius-2xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xl);
}

.flashcard-front {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(255, 248, 240, 0.97));
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
}

.flashcard-back {
  background: linear-gradient(145deg, rgba(255, 107, 53, 0.06), rgba(255, 184, 0, 0.04));
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
  transform: rotateY(180deg);
}

.card-word {
  font-size: 32px;
  font-weight: 900;
  color: var(--text-primary);
  letter-spacing: 0.02em;
  text-align: center;
}

.card-phonetic {
  font-size: var(--text-base);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  margin-top: var(--space-sm);
}

.card-hint {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: var(--space-lg);
}

.card-meaning {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text-primary);
  text-align: center;
  margin-bottom: var(--space-lg);
}

.card-example {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  font-style: italic;
  text-align: center;
  line-height: 1.6;
  margin-bottom: var(--space-md);
}

.card-etymology {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  background: rgba(0, 0, 0, 0.04);
  padding: 6px 14px;
  border-radius: var(--radius-full);
}

/* Flashcard Action Buttons */
.flashcard-actions {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-2xl);
}

.btn-dontknow,
.btn-know {
  flex: 1;
  padding: 16px;
  border-radius: var(--radius-xl);
  font-size: var(--text-md);
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.btn-dontknow:active,
.btn-know:active {
  transform: scale(0.95);
}

.btn-dontknow {
  background: rgba(255, 107, 129, 0.10);
  color: var(--pink-soft);
  border: 1px solid rgba(255, 107, 129, 0.20);
}

.btn-know {
  background: linear-gradient(135deg, var(--green-duo), var(--green-duo-dark));
  color: #FFFFFF;
  box-shadow: 0 4px 16px var(--green-duo-glow);
}

/* Words Progress */
.words-progress {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

.progress-bar-track {
  flex: 1;
  height: 6px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-blue-light));
  border-radius: var(--radius-full);
  transition: width 0.4s ease;
}

.progress-count {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* ==========================================================================
   31. Language / Practice Page
   ========================================================================== */

.language-container {
  padding: var(--space-lg);
}

/* Question Type Grid */
.question-type-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.qt-checkbox {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 8px;
  border-radius: var(--radius-md);
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid var(--border-subtle);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.qt-checkbox:hover {
  border-color: var(--brand-blue);
}

.qt-checkbox input[type="checkbox"] {
  accent-color: var(--brand-blue);
  width: 14px;
  height: 14px;
}

/* Question Count Slider */
.question-count-slider {
  margin-bottom: var(--space-xl);
}

.question-count-slider label {
  display: block;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
}

.question-count-slider input[type="range"] {
  width: 100%;
  accent-color: var(--brand-blue);
  height: 6px;
  border-radius: var(--radius-full);
}

/* Generate Button */
.btn-generate {
  display: block;
  width: 100%;
  padding: 16px;
  border: none;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-light));
  color: #FFFFFF;
  font-size: var(--text-md);
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 20px var(--brand-blue-glow);
  transition: transform 0.15s ease, opacity 0.2s ease;
}

.btn-generate:active {
  transform: scale(0.96);
}

.btn-generate:disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* Quiz Panel */
.quiz-panel {
  margin-top: var(--space-md);
}

.quiz-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-xl);
}

.quiz-progress {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

.btn-quit {
  padding: 6px 16px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-subtle);
  background: rgba(0, 0, 0, 0.03);
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background 0.2s ease;
}

.btn-quit:hover {
  background: rgba(255, 107, 129, 0.10);
  color: var(--pink-soft);
}

/* Quiz Card */
.quiz-card {
  background: var(--bg-white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-2xl);
  padding: var(--space-2xl);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-xl);
}

.quiz-question {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-2xl);
  line-height: 1.5;
}

.quiz-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.quiz-option {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
  padding: 14px 18px;
  border-radius: var(--radius-lg);
  border: 2px solid var(--border-subtle);
  background: rgba(0, 0, 0, 0.02);
  color: var(--text-primary);
  font-size: var(--text-base);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}

.quiz-option:hover {
  border-color: var(--brand-blue);
  background: rgba(255, 107, 53, 0.04);
}

.quiz-option.selected {
  border-color: var(--brand-blue);
  background: rgba(255, 107, 53, 0.08);
  box-shadow: 0 0 0 4px rgba(255, 107, 53, 0.06);
}

.option-letter {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.05);
  font-size: var(--text-sm);
  font-weight: 700;
  flex-shrink: 0;
}

.quiz-option.selected .option-letter {
  background: var(--brand-blue);
  color: #FFFFFF;
}

/* Next Button */
.btn-next {
  display: block;
  width: 100%;
  padding: 16px;
  border: none;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-light));
  color: #FFFFFF;
  font-size: var(--text-md);
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 16px var(--brand-blue-glow);
  transition: transform 0.15s ease;
}

.btn-next:active {
  transform: scale(0.96);
}

/* ==========================================================================
   32. Oral / Speaking Page
   ========================================================================== */

.oral-container {
  padding: var(--space-lg);
}

/* Question Text */
.oral-question {
  background: var(--bg-white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: var(--space-xl);
  margin: var(--space-xl) 0 var(--space-2xl);
  text-align: center;
}

.question-text {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.5;
  margin: 0;
}

/* Mic Section */
.mic-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: var(--space-2xl) 0;
}

.mic-wrapper {
  position: relative;
  display: inline-flex;
}

.mic-btn {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-light));
  color: #FFFFFF;
  font-size: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 20px var(--brand-blue-glow);
  transition: transform 0.15s ease, background 0.3s ease;
  z-index: 2;
  position: relative;
}

.mic-btn:active {
  transform: scale(0.92);
}

.mic-btn.recording {
  background: linear-gradient(135deg, var(--pink-soft), #FF3B5F);
  box-shadow: 0 4px 20px var(--pink-soft-glow);
}

.mic-icon {
  line-height: 1;
}

/* Mic Pulse Ring */
.mic-pulse {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 3px solid transparent;
  z-index: 1;
  pointer-events: none;
}

.mic-pulse.active {
  border-color: var(--pink-soft);
  animation: micPulseRing 1.5s ease-in-out infinite;
}

@keyframes micPulseRing {
  0% {
    transform: scale(1);
    opacity: 1;
    border-color: var(--pink-soft);
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
    border-color: transparent;
  }
}

.mic-hint {
  margin-top: var(--space-lg);
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

/* Score Panel */
.oral-score {
  background: var(--bg-white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-sm);
  padding: var(--space-2xl);
  margin: var(--space-xl) 0;
  text-align: center;
}

.score-title {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 var(--space-xl);
}

.score-main {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-2xl);
}

.score-circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-light));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 30px var(--brand-blue-glow);
}

.score-number {
  font-size: var(--text-3xl);
  font-weight: 900;
  color: #FFFFFF;
  line-height: 1;
}

/* Score Detail Bars */
.score-details {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.score-bar-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.score-label {
  width: 48px;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  text-align: right;
  flex-shrink: 0;
}

.score-bar-track {
  flex: 1;
  height: 6px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.score-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-blue-light));
  border-radius: var(--radius-full);
  transition: width 0.6s var(--ease-out-expo);
}

.score-val {
  width: 28px;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--brand-blue);
  text-align: left;
  flex-shrink: 0;
}

.btn-retry {
  padding: 10px 28px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-medium);
  background: rgba(0, 0, 0, 0.04);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}

.btn-retry:hover {
  background: rgba(0, 0, 0, 0.08);
}

/* Typing Mode */
.oral-type-mode {
  margin-top: var(--space-2xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--border-subtle);
}

.type-mode-label {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin: 0 0 var(--space-md);
}

.type-input-row {
  display: flex;
  gap: var(--space-md);
}

.type-input {
  flex: 1;
  padding: 12px 16px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  background: var(--bg-input);
  color: var(--text-primary);
  font-size: var(--text-base);
  outline: none;
  transition: border-color 0.2s ease;
}

.type-input:focus {
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px var(--brand-blue-glow);
}

.btn-send {
  padding: 12px 24px;
  border-radius: var(--radius-lg);
  border: none;
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-light));
  color: #FFFFFF;
  font-size: var(--text-base);
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 16px var(--brand-blue-glow);
  transition: transform 0.15s ease, opacity 0.2s ease;
  flex-shrink: 0;
}

.btn-send:active {
  transform: scale(0.95);
}

.btn-send:disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* ==========================================================================
   33. Wrong Book Page
   ========================================================================== */

.wrongbook-container {
  padding: var(--space-lg);
}

.wb-header {
  margin-bottom: var(--space-xl);
}

.wb-title {
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 4px;
}

.wb-subtitle {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin: 0;
}

/* Stats Row */
.wb-stats {
  display: flex;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.wb-stat-item {
  flex: 1;
  background: var(--bg-white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  padding: var(--space-lg);
  text-align: center;
}

.wb-stat-num {
  display: block;
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--brand-blue);
  line-height: 1;
}

.wb-stat-label {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: 4px;
}

/* Filters */
.wb-filters {
  margin-bottom: var(--space-xl);
}

.wb-filter-pill {
  flex-shrink: 0;
  padding: 8px 18px;
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  border: 1px solid var(--border-subtle);
  background: rgba(0, 0, 0, 0.03);
  color: var(--text-tertiary);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.wb-filter-pill.active {
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-light));
  color: #FFFFFF;
  border-color: transparent;
  box-shadow: 0 2px 12px var(--brand-blue-glow);
}

/* Wrong Book List */
.wb-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.wb-loading,
.wb-empty {
  text-align: center;
  padding: var(--space-4xl) var(--space-2xl);
  color: var(--text-tertiary);
  font-size: var(--text-base);
}

.wb-empty-emoji {
  display: block;
  font-size: 48px;
  margin-bottom: var(--space-md);
}

.wb-date-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.wb-date-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
  margin: 0;
}

/* Wrong Book Card */
.wb-card {
  background: var(--bg-white);
  border: 1px solid var(--border-subtle);
  border-left: 4px solid var(--pink-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  padding: var(--space-lg);
}

.wb-card-question {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-md);
  line-height: 1.5;
}

.wb-card-answers {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--space-md);
}

.wb-answer {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  line-height: 1.5;
}

.wb-answer.wrong span {
  color: var(--pink-soft);
  text-decoration: line-through;
  text-decoration-color: rgba(255, 107, 129, 0.5);
}

.wb-answer.correct span {
  color: var(--green-duo);
  font-weight: 600;
}

.wb-explanation {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  background: rgba(0, 0, 0, 0.03);
  padding: 10px 14px;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
  line-height: 1.5;
}

.wb-card-meta {
  display: flex;
  gap: var(--space-sm);
}

.wb-tag {
  font-size: var(--text-xs);
  padding: 2px 10px;
  border-radius: var(--radius-full);
  background: rgba(255, 107, 53, 0.10);
  color: var(--brand-blue);
}

.wb-type {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* ==========================================================================
   34. Pomodoro Page
   ========================================================================== */

.pomodoro-container {
  padding: var(--space-lg);
  text-align: center;
}

/* Timer Ring */
.pomo-timer-section {
  display: flex;
  justify-content: center;
  margin: var(--space-2xl) 0;
}

.pomo-ring-container {
  position: relative;
  width: 220px;
  height: 220px;
}

.pomo-ring {
  width: 100%;
  height: 100%;
}

.pomo-ring-bg {
  fill: none;
}

.pomo-ring-fill {
  fill: none;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s linear;
  filter: drop-shadow(0 0 10px var(--brand-blue-glow));
}

.pomo-time-display {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.pomo-minutes,
.pomo-seconds {
  font-size: 48px;
  font-weight: 900;
  color: var(--text-primary);
  letter-spacing: 0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.pomo-colon {
  font-size: 40px;
  font-weight: 700;
  color: var(--text-tertiary);
  animation: colonPulse 1s ease-in-out infinite;
}

@keyframes colonPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* Preset Pills */
.pomo-presets {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  margin-bottom: var(--space-2xl);
}

.pomo-preset-pill {
  padding: 10px 22px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-subtle);
  background: rgba(0, 0, 0, 0.03);
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pomo-preset-pill.active {
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-light));
  color: #FFFFFF;
  border-color: transparent;
  box-shadow: 0 2px 12px var(--brand-blue-glow);
}

/* Start/Pause Button */
.pomo-control {
  margin-bottom: var(--space-3xl);
}

.pomo-btn {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-light));
  color: #FFFFFF;
  font-size: var(--text-md);
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 24px var(--brand-blue-glow);
  transition: transform 0.15s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.pomo-btn:active {
  transform: scale(0.93);
}

.pomo-btn.running {
  background: linear-gradient(135deg, var(--green-duo), var(--green-duo-dark));
  box-shadow: 0 4px 24px var(--green-duo-glow);
}

/* Stats */
.pomo-stats {
  display: flex;
  justify-content: center;
  gap: var(--space-2xl);
}

.pomo-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.pomo-stat-icon {
  font-size: 24px;
  line-height: 1;
}

.pomo-stat-val {
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--text-primary);
}

.pomo-stat-label {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* ==========================================================================
   End of BINGO GO 学 Stylesheet
   ========================================================================== */

/* ==========================================================================
   35. Discovery Square — 小红书双列瀑布流
   ========================================================================== */

.page-discovery {
  background: linear-gradient(180deg, #FAFAFA 0%, #FAFAFA 40%, #FFFFFF 100%);
}

.discovery-container {
  padding: 10px 8px var(--tab-height);
}

/* 搜索栏 */
.discovery-search {
  background: #F5F5F5 !important;
  border-radius: 20px !important;
  padding: 10px 16px !important;
}

/* 排序 */
.sort-tabs2 {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  padding: 0 4px;
}

.sort-btn2 {
  padding: 5px 16px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 600;
  border: none;
  background: #F0F0F0;
  color: #999;
  cursor: pointer;
  transition: all 0.2s;
}

.sort-btn2.active {
  background: #2D2D2D;
  color: #fff;
}

/* ===== 双列瀑布流 ===== */
.waterfall-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 0 4px;
}

.waterfall-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ===== 笔记卡片 ===== */
.note-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  cursor: pointer;
  transition: transform 0.15s;
  break-inside: avoid;
}

.note-card:active {
  transform: scale(0.97);
}

/* 封面图 */
.note-cover {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.note-cover-icon {
  font-size: 36px;
  opacity: 0.7;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}

.note-cover-tag {
  position: absolute;
  bottom: 8px;
  left: 8px;
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
  background: rgba(0,0,0,0.25);
  backdrop-filter: blur(4px);
  padding: 3px 8px;
  border-radius: 10px;
  letter-spacing: 0.3px;
}

/* 正文区 */
.note-body {
  padding: 8px 10px 4px;
}

.note-title {
  font-size: 13px;
  font-weight: 700;
  color: #222;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.note-preview {
  font-size: 11px;
  color: #999;
  line-height: 1.5;
  margin-top: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 底栏 */
.note-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px 8px;
}

.note-author {
  display: flex;
  align-items: center;
  gap: 4px;
}

.note-author-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #007AFF, #4A9FFF);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #fff;
}

.note-author-name {
  font-size: 11px;
  color: #999;
  max-width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.note-like-btn {
  display: flex;
  align-items: center;
  gap: 2px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  padding: 2px;
  color: #bbb;
  transition: color 0.2s;
}

.note-like-btn.liked {
  color: #FF4757;
}

.note-like-num {
  font-size: 11px;
  font-weight: 600;
  color: inherit;
}

/* ===== 笔记详情弹窗 ===== */
.note-detail-modal {
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: 90vh;
  background: #fff;
  border-radius: 20px 20px 0 0;
  overflow-y: auto;
  animation: slideUp 0.3s var(--ease-out-expo);
  margin-top: auto;
}

@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.note-detail-cover {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.note-detail-cover-icon {
  font-size: 56px;
  opacity: 0.6;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15));
}

.note-detail-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(0,0,0,0.25);
  color: #fff;
  border: none;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}

.note-detail-body {
  padding: 16px 18px;
}

.note-detail-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.note-detail-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #007AFF, #4A9FFF);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #fff;
}

.note-detail-author {
  font-size: 14px;
  font-weight: 700;
  color: #222;
}

.note-detail-time {
  font-size: 11px;
  color: #bbb;
}

.note-detail-topic {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.95);
  background: linear-gradient(135deg, #007AFF, #4A9FFF);
  padding: 3px 12px;
  border-radius: 10px;
  margin-bottom: 10px;
}

.note-detail-title {
  font-size: 18px;
  font-weight: 800;
  color: #222;
  margin: 0 0 10px;
  line-height: 1.4;
}

.note-detail-content {
  font-size: 14px;
  line-height: 1.8;
  color: #444;
  white-space: pre-wrap;
  word-break: break-word;
}

.note-detail-stats {
  display: flex;
  gap: 24px;
  padding: 14px 0;
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
  margin: 16px 0;
}

/* 详情评论区 */
.note-detail-section {
  margin-top: 4px;
}

.note-detail-section-title {
  font-size: 13px;
  font-weight: 700;
  color: #444;
  margin-bottom: 10px;
}

.dcomment-item {
  display: flex;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid #f5f5f5;
}

.dcomment-item:last-child {
  border-bottom: none;
}

.dcomment-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #007AFF, #4A9FFF);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #fff;
  flex-shrink: 0;
}

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

.dcomment-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}

.dcomment-author {
  font-size: 12px;
  font-weight: 600;
  color: #444;
}

.dcomment-time {
  font-size: 10px;
  color: #ccc;
}

.dcomment-content {
  font-size: 13px;
  color: #666;
  line-height: 1.5;
}

/* 通用按钮 */
.post-action {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: #999;
  cursor: pointer;
  transition: color 0.2s;
  border: none;
  background: none;
  padding: 4px 0;
}

.post-action:hover { color: #007AFF; }

.post-action.liked { color: #FF4757; }

.post-action .action-icon {
  font-size: 16px;
  line-height: 1;
}

.load-more {
  padding: 16px 0;
  text-align: center;
}

/* ==========================================================================
   31. Badge Achievement System
   ========================================================================== */

/* ---- Badges Page Background ---- */
.page-badges {
  background: radial-gradient(ellipse 80% 60% at 50% 20%, rgba(255, 184, 0, 0.06), transparent 60%),
              linear-gradient(180deg, #F2F2F7 0%, #FFFFFF 40%, #FAFAFA 100%);
}

/* ---- Badge Grid ---- */
.badge-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

/* ---- Badge Card ---- */
.badge-card {
  background: var(--bg-white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-sm);
  box-shadow: var(--shadow-xs);
  text-align: center;
  transition: all 0.3s var(--ease-out-expo);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  position: relative;
  overflow: hidden;
}

.badge-card.earned {
  border-color: rgba(255, 184, 0, 0.35);
  background: linear-gradient(180deg, rgba(255, 248, 220, 0.5), rgba(255, 255, 255, 0.95));
  box-shadow: 0 2px 16px rgba(255, 184, 0, 0.15);
}

.badge-card.earned::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1.5px solid rgba(255, 184, 0, 0.25);
  pointer-events: none;
}

.badge-card.locked {
  opacity: 0.55;
  filter: grayscale(0.6);
}

/* ---- Badge Icon ---- */
.badge-icon-wrap {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.04);
  font-size: 28px;
  position: relative;
  flex-shrink: 0;
}

.badge-card.earned .badge-icon-wrap {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 180, 0, 0.08));
}

.badge-lock-icon {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.badge-name {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
}

.badge-card.locked .badge-name {
  color: var(--text-tertiary);
}

.badge-desc {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  line-height: 1.4;
}

.badge-earned-check {
  font-size: var(--text-xs);
  color: #C8A000;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 2px;
}

.badge-earned-date {
  font-size: 10px;
  color: var(--text-muted);
}

/* ---- Badge Stat Bar ---- */
.badge-stat-bar {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  background: var(--bg-white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-lg) var(--space-xl);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-xl);
}

.badge-stat-num {
  font-size: var(--text-3xl);
  font-weight: 900;
  background: linear-gradient(135deg, #FFB800, #FF8C00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}

.badge-stat-info {
  flex: 1;
  min-width: 0;
}

.badge-stat-label {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin-bottom: 4px;
}

.badge-stat-total {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: 2px;
}

.badge-progress-bar {
  width: 100%;
  height: 8px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-top: 6px;
}

.badge-progress-fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, #FFB800, #FF8C00);
  transition: width 0.6s var(--ease-out-expo);
  box-shadow: 0 0 8px rgba(255, 184, 0, 0.3);
}

/* ---- Badge Category Tabs ---- */
.badge-category-tabs {
  display: flex;
  gap: var(--space-sm);
  overflow-x: auto;
  padding-bottom: var(--space-sm);
  margin-bottom: var(--space-lg);
  -webkit-overflow-scrolling: touch;
}

.badge-category-tabs::-webkit-scrollbar {
  display: none;
}

.badge-cat-tab {
  flex-shrink: 0;
  padding: 6px 16px;
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border-subtle);
  background: rgba(0, 0, 0, 0.03);
  color: var(--text-tertiary);
  transition: all 0.2s ease;
  white-space: nowrap;
}

.badge-cat-tab.active {
  background: linear-gradient(135deg, rgba(255, 184, 0, 0.15), rgba(255, 140, 0, 0.10));
  color: #C8A000;
  border-color: rgba(255, 184, 0, 0.30);
  font-weight: 700;
}

/* ---- Badge Unlock Modal ---- */
.badge-unlock-card {
  width: calc(100% - 40px);
  max-width: 320px;
  background: linear-gradient(180deg, #FFFEF5 0%, #FFF8E7 50%, #FFF3D6 100%);
  border: 1.5px solid rgba(255, 184, 0, 0.3);
  border-radius: var(--radius-xl);
  padding: var(--space-3xl) var(--space-2xl);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  animation: bounceIn 0.5s var(--ease-out-back) forwards;
}

.badge-unlock-icon {
  font-size: 48px;
  animation: bounceIn 0.6s 0.1s var(--ease-out-back) forwards;
}

.badge-unlock-badge {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 180, 0, 0.1));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 44px;
  animation: badgeUnlockPop 0.5s 0.15s var(--ease-out-back) forwards;
}

.badge-unlock-title {
  font-size: var(--text-lg);
  font-weight: 800;
  color: #C8A000;
  margin: 0;
}

.badge-unlock-name {
  font-size: var(--text-xl);
  font-weight: 900;
  color: var(--text-primary);
}

.badge-unlock-desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
}

/* ---- Badge Animations ---- */
@keyframes badgeUnlockPop {
  0% {
    transform: scale(0) rotate(-180deg);
    opacity: 0;
  }
  60% {
    transform: scale(1.25) rotate(10deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

/* ==========================================================================
   36. International Subject Practice Page
   ========================================================================== */

/* Page Background */
.page-international {
  background:
    radial-gradient(ellipse 80% 60% at 60% 15%, rgba(120, 50, 255, 0.06), transparent 60%),
    radial-gradient(ellipse 50% 40% at 30% 85%, rgba(255, 107, 53, 0.03), transparent 60%),
    linear-gradient(180deg, #F2F2F7 0%, #F2F1F9 40%, #FFFFFF 100%);
}

/* Container */
.intl-container {
  padding: var(--space-lg);
  padding-bottom: 100px;
}

.intl-desc {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin: -8px 0 20px;
}

/* Labels */
.intl-label {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
  margin-top: var(--space-lg);
}

/* ---- Curriculum Cards ---- */
.intl-curriculum-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.intl-cur-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 12px;
  background: var(--bg-white);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: var(--shadow-xs);
}

.intl-cur-card:hover {
  border-color: rgba(120, 50, 255, 0.3);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.intl-cur-card.active {
  border-color: #5856D6;
  background: linear-gradient(135deg, rgba(120, 50, 255, 0.06), rgba(120, 50, 255, 0.02));
  box-shadow: 0 0 0 3px rgba(120, 50, 255, 0.10);
}

.intl-cur-icon {
  font-size: 28px;
  line-height: 1;
}

.intl-cur-name {
  font-size: var(--text-md);
  font-weight: 800;
  color: var(--text-primary);
}

.intl-cur-desc {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* ---- Subject Grid ---- */
.intl-subject-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.intl-subject-btn {
  padding: 7px 16px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-subtle);
  background: rgba(0, 0, 0, 0.03);
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.intl-subject-btn:hover {
  border-color: rgba(120, 50, 255, 0.3);
  color: var(--text-primary);
}

.intl-subject-btn.active {
  background: linear-gradient(135deg, #5856D6, #9B6BFF);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 10px rgba(120, 50, 255, 0.25);
}

/* ---- Pills (stage / difficulty / count) ---- */
.intl-stage-row,
.intl-diff-row,
.intl-count-row {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.intl-pill {
  flex: 1;
  padding: 8px 16px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-subtle);
  background: rgba(0, 0, 0, 0.03);
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  white-space: nowrap;
}

.intl-pill:hover {
  border-color: rgba(120, 50, 255, 0.3);
  color: var(--text-primary);
}

.intl-pill.active {
  background: linear-gradient(135deg, #5856D6, #9B6BFF);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 10px rgba(120, 50, 255, 0.25);
}

/* ---- Generate Button ---- */
.intl-btn-generate {
  margin-top: var(--space-xl);
  background: linear-gradient(135deg, #5856D6, #007AFF);
  box-shadow: 0 4px 24px rgba(120, 50, 255, 0.25);
}

/* ---- Quiz Panel ---- */
.intl-progress {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  margin-right: var(--space-md);
}

.intl-progress-bar {
  height: 6px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.intl-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #5856D6, #007AFF);
  border-radius: var(--radius-full);
  transition: width 0.3s ease;
  min-width: 0;
}

.intl-progress-text {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* ---- Quiz Card ---- */
.intl-quiz-card {
  margin-bottom: var(--space-lg);
  min-height: 240px;
}

.intl-quiz-meta {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.intl-quiz-type {
  font-size: var(--text-xs);
  padding: 2px 10px;
  border-radius: var(--radius-full);
  background: rgba(120, 50, 255, 0.10);
  color: #5856D6;
  font-weight: 600;
}

.intl-quiz-subject {
  font-size: var(--text-xs);
  padding: 2px 10px;
  border-radius: var(--radius-full);
  background: rgba(255, 107, 53, 0.10);
  color: var(--brand-blue);
  font-weight: 600;
}

.intl-quiz-question {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.5;
  margin-bottom: var(--space-xl);
}

/* ---- Option Buttons ---- */
.intl-quiz-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.intl-option {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
  padding: 14px 18px;
  border-radius: var(--radius-lg);
  border: 2px solid var(--border-subtle);
  background: rgba(0, 0, 0, 0.02);
  color: var(--text-primary);
  font-size: var(--text-base);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}

.intl-option:hover {
  border-color: #5856D6;
  background: rgba(120, 50, 255, 0.04);
}

.intl-option.selected {
  border-color: #5856D6;
  background: rgba(120, 50, 255, 0.08);
  box-shadow: 0 0 0 3px rgba(120, 50, 255, 0.08);
}

.intl-option .option-letter {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.05);
  font-size: var(--text-sm);
  font-weight: 700;
  flex-shrink: 0;
}

.intl-option.selected .option-letter {
  background: #5856D6;
  color: #fff;
}

/* ---- True/False Buttons ---- */
.intl-tf-btn {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
  padding: 18px 24px;
  border-radius: var(--radius-lg);
  border: 2px solid var(--border-subtle);
  background: rgba(0, 0, 0, 0.02);
  color: var(--text-primary);
  font-size: var(--text-md);
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  justify-content: center;
}

.intl-tf-btn:hover {
  border-color: #5856D6;
  background: rgba(120, 50, 255, 0.04);
}

.intl-tf-btn.intl-tf-true.selected {
  border-color: var(--green-duo);
  background: rgba(88, 204, 2, 0.08);
  box-shadow: 0 0 0 3px rgba(88, 204, 2, 0.08);
}

.intl-tf-btn.intl-tf-false.selected {
  border-color: var(--pink-soft);
  background: rgba(255, 107, 129, 0.08);
  box-shadow: 0 0 0 3px rgba(255, 107, 129, 0.08);
}

.intl-tf-icon {
  font-size: 24px;
}

/* ---- Fill / Short Answer Inputs ---- */
.intl-quiz-input,
.intl-quiz-textarea {
  margin-top: var(--space-md);
}

.intl-fill-input {
  font-size: var(--text-md);
  padding: 14px 18px;
  border-radius: var(--radius-lg);
  border: 2px solid var(--border-subtle);
  background: var(--bg-input);
  text-align: center;
}

.intl-fill-input:focus {
  border-color: #5856D6;
  box-shadow: 0 0 0 3px rgba(120, 50, 255, 0.10);
}

.intl-short-textarea {
  border: 2px solid var(--border-subtle);
  background: var(--bg-input);
  border-radius: var(--radius-lg);
  padding: 14px 18px;
  font-size: var(--text-base);
  resize: vertical;
  min-height: 80px;
}

.intl-short-textarea:focus {
  border-color: #5856D6;
  box-shadow: 0 0 0 3px rgba(120, 50, 255, 0.10);
}

/* ---- Next Button ---- */
.intl-btn-next {
  background: linear-gradient(135deg, #5856D6, #9B6BFF);
  box-shadow: 0 4px 20px rgba(120, 50, 255, 0.25);
}

/* ---- Report Panel ---- */
.intl-report-header {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.intl-score-ring-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 130px;
}

.intl-score-ring {
  width: 100%;
  height: 100%;
}

.intl-ring-track {
  fill: none;
}

.intl-ring-fill {
  fill: none;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s var(--ease-out-expo);
}

.intl-score-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.intl-score-num {
  font-size: 36px;
  font-weight: 900;
  color: var(--text-primary);
  line-height: 1;
}

.intl-score-unit {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

.intl-score-label {
  margin-top: var(--space-md);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-secondary);
}

/* ---- Stats Row ---- */
.intl-report-stats {
  display: flex;
  justify-content: space-around;
  background: var(--bg-white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-bottom: var(--space-2xl);
  box-shadow: var(--shadow-xs);
}

.intl-rstat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.intl-rstat-val {
  font-size: var(--text-xl);
  font-weight: 800;
  color: #5856D6;
}

.intl-rstat-lbl {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* ---- Section Titles ---- */
.intl-section-title {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--text-primary);
  margin: var(--space-xl) 0 var(--space-md);
}

/* ---- Review Cards ---- */
.intl-review-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.intl-review-card {
  background: var(--bg-white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-xs);
}

.intl-review-card.intl-review-wrong {
  border-left: 4px solid var(--pink-soft);
}

.intl-review-card.intl-review-correct {
  border-left: 4px solid var(--green-duo);
}

.intl-review-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-sm);
}

.intl-review-num {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--text-primary);
}

.intl-review-type {
  font-size: var(--text-xs);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: rgba(0, 0, 0, 0.05);
  color: var(--text-tertiary);
}

.intl-review-q {
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: var(--space-md);
  line-height: 1.5;
}

.intl-review-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.intl-ro {
  font-size: var(--text-xs);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.04);
  color: var(--text-secondary);
}

.intl-ro.intl-ro-correct {
  background: rgba(88, 204, 2, 0.10);
  color: var(--green-duo-dark);
  font-weight: 600;
}

.intl-review-answer {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: var(--space-sm);
  font-size: var(--text-sm);
}

.intl-review-ua {
  color: var(--pink-soft);
}

.intl-review-ca {
  color: var(--green-duo-dark);
}

.intl-review-exp {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  background: rgba(120, 50, 255, 0.05);
  padding: 10px 14px;
  border-radius: var(--radius-md);
  line-height: 1.6;
}

/* ---- Vocabulary Chips ---- */
.intl-vocab-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.intl-vocab-chip {
  font-size: var(--text-xs);
  padding: 6px 12px;
  background: rgba(255, 107, 53, 0.06);
  border: 1px solid rgba(255, 107, 53, 0.15);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
}

/* ---- Translation ---- */
.intl-trans-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.intl-trans-item {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  background: rgba(0, 0, 0, 0.02);
  padding: 10px 14px;
  border-radius: var(--radius-md);
  line-height: 1.6;
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
}

.intl-trans-num {
  flex-shrink: 0;
  font-weight: 700;
  color: #5856D6;
  font-size: var(--text-xs);
  margin-top: 2px;
}

/* ---- Report Actions ---- */
.intl-report-actions {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-2xl);
  padding-bottom: var(--space-2xl);
}

.intl-report-actions .btn {
  flex: 1;
}

/* ==========================================================================
   36. AI Essay Review — 作文批改模块
   ========================================================================== */

.page-essay {
  background: radial-gradient(ellipse 80% 60% at 70% 15%, rgba(255, 107, 53, 0.05), transparent 60%),
              radial-gradient(ellipse 50% 40% at 20% 80%, rgba(120, 50, 255, 0.03), transparent 60%),
              linear-gradient(180deg, #F2F2F7 0%, #FFF5F5 40%, #FFFAFA 100%);
}

/* ---- 输入区 ---- */
.essay-input-section {
  margin-bottom: var(--space-2xl);
}

.essay-select-row {
  margin-bottom: var(--space-md);
}

.essay-select-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
  display: block;
}

.essay-radio-group {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.essay-radio-btn {
  padding: 8px 18px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-subtle);
  background: rgba(255, 255, 255, 0.85);
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

.essay-radio-btn:hover {
  border-color: rgba(255, 107, 53, 0.35);
  color: var(--text-secondary);
}

.essay-radio-btn.active {
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-light));
  color: #FFFFFF;
  border-color: transparent;
  box-shadow: 0 2px 12px var(--brand-blue-glow);
}

/* 作文输入框 */
.essay-textarea {
  width: 100%;
  min-height: 300px;
  padding: var(--space-lg);
  background: var(--bg-white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  font-size: var(--text-base);
  color: var(--text-primary);
  line-height: 1.8;
  resize: vertical;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  font-family: var(--font-sans);
  box-shadow: var(--shadow-xs);
}

.essay-textarea:focus {
  border-color: rgba(255, 107, 53, 0.40);
  box-shadow: 0 0 0 3px var(--brand-blue-glow);
  outline: none;
}

.essay-textarea::placeholder {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* 字数统计 */
.essay-word-count {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: var(--space-sm) 0;
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

.essay-word-count span:first-child {
  font-weight: 500;
}

#wordCount {
  font-weight: 700;
  font-size: var(--text-md);
  transition: color 0.25s ease;
}

.essay-char-hint {
  color: var(--text-muted);
  font-size: var(--text-xs);
  margin-left: 4px;
}

/* 提交按钮 */
.essay-submit-btn {
  width: 100%;
  padding: 16px !important;
  font-size: var(--text-md) !important;
  border-radius: var(--radius-xl) !important;
  margin-top: var(--space-lg);
  background: linear-gradient(135deg, #007AFF, #4A9FFF) !important;
  box-shadow: 0 4px 20px rgba(255, 107, 53, 0.30) !important;
}

.essay-submit-btn:hover {
  box-shadow: 0 6px 28px rgba(255, 107, 53, 0.40) !important;
}

/* ---- 评分结果区 ---- */
.essay-result-section {
  animation: essayFadeIn 0.5s var(--ease-out-expo);
}

@keyframes essayFadeIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 总分圆环 */
.essay-score-ring-wrap {
  display: flex;
  justify-content: center;
  margin: var(--space-xl) 0 var(--space-2xl);
}

.essay-score-ring-wrap canvas {
  display: block;
}

.essay-score-center {
  position: absolute;
  /* Positioning set via JS or parent relative; here inline in the wrap */
}

/* Since canvas and text are siblings, wrap them in a relative container */
.essay-score-ring-wrap {
  position: relative;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  margin-left: auto;
  margin-right: auto;
}

.essay-score-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.essay-score-value {
  font-size: 36px;
  font-weight: 900;
  color: var(--text-primary);
  line-height: 1;
  letter-spacing: -0.02em;
}

.essay-score-label {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: 2px;
}

/* 四维评分卡片 */
.essay-dim-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
  margin-bottom: var(--space-2xl);
}

.essay-dim-card {
  background: var(--bg-white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-md) var(--space-sm);
  text-align: center;
  box-shadow: var(--shadow-xs);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.essay-dim-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.essay-dim-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-tertiary);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.essay-dim-score {
  display: block;
  font-size: var(--text-xl);
  font-weight: 900;
  line-height: 1;
  margin-bottom: 2px;
  transition: color 0.3s ease;
}

.essay-dim-name {
  display: block;
  font-size: 9px;
  color: var(--text-muted);
  line-height: 1.3;
}

/* Dim score colors */
.essay-dim-card.dim-green {
  border-color: rgba(88, 204, 2, 0.25);
  background: rgba(88, 204, 2, 0.04);
}
.essay-dim-card.dim-green .essay-dim-score { color: var(--green-duo); }
.essay-dim-card.dim-green .essay-dim-label { color: var(--green-duo-dark); }

.essay-dim-card.dim-orange {
  border-color: rgba(255, 140, 0, 0.25);
  background: rgba(255, 140, 0, 0.04);
}
.essay-dim-card.dim-orange .essay-dim-score { color: var(--orange-warm); }
.essay-dim-card.dim-orange .essay-dim-label { color: #CC7000; }

.essay-dim-card.dim-red {
  border-color: rgba(255, 107, 129, 0.25);
  background: rgba(255, 107, 129, 0.04);
}
.essay-dim-card.dim-red .essay-dim-score { color: var(--pink-soft); }
.essay-dim-card.dim-red .essay-dim-label { color: #D94A5D; }

/* ---- 详细反馈区 ---- */
.essay-detail-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.essay-feedback-block {
  background: var(--bg-white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  box-shadow: var(--shadow-xs);
}

.essay-block-header {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-md);
}

.essay-feedback-text {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: 1.8;
  white-space: pre-wrap;
}

.essay-error-count {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-weight: 400;
  margin-left: 4px;
}

/* 语法错误列表 */
.essay-grammar-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.essay-no-errors {
  font-size: var(--text-base);
  color: var(--green-duo);
  font-weight: 600;
  padding: var(--space-md) 0;
  text-align: center;
}

.essay-grammar-item {
  padding: var(--space-md);
  background: rgba(255, 107, 129, 0.04);
  border-left: 3px solid var(--pink-soft);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.essay-grammar-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: var(--radius-sm);
  margin-right: 6px;
  background: rgba(255, 107, 129, 0.12);
  color: var(--pink-soft);
}

.essay-grammar-badge.correct {
  background: rgba(88, 204, 2, 0.12);
  color: var(--green-duo);
}

.essay-grammar-orig {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: 4px;
  text-decoration: line-through;
  text-decoration-color: rgba(255, 107, 129, 0.4);
}

.essay-grammar-corr {
  font-size: var(--text-sm);
  color: var(--text-primary);
  margin-bottom: 4px;
}

.essay-grammar-corr strong {
  color: var(--green-duo-dark);
}

.essay-grammar-expl {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  line-height: 1.5;
  margin-top: 2px;
}

/* 好句高亮 */
.essay-no-highlights {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  text-align: center;
  padding: var(--space-md) 0;
}

.essay-highlights-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.essay-highlight-item {
  padding: var(--space-md);
  background: linear-gradient(135deg, rgba(88, 204, 2, 0.06), rgba(88, 204, 2, 0.02));
  border-left: 3px solid var(--green-duo);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--text-sm);
  color: var(--text-primary);
  line-height: 1.5;
  font-style: italic;
}

/* 润色范文折叠面板 */
.essay-collapse {
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
}

.essay-collapse-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-lg) var(--space-xl);
  background: var(--bg-white);
  border: none;
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--text-primary);
  cursor: pointer;
  transition: background 0.2s ease;
  box-shadow: var(--shadow-xs);
}

.essay-collapse-btn:hover {
  background: var(--bg-warm);
}

.essay-collapse-arrow {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  transition: transform 0.2s ease;
}

.essay-collapse-body {
  padding: var(--space-xl);
  background: rgba(255, 248, 240, 0.5);
  border-top: 1px solid var(--border-subtle);
}

.essay-polished-text {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--text-primary);
  line-height: 1.9;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}

/* ---- 批改历史 ---- */
.essay-history-section {
  margin-top: var(--space-3xl);
  margin-bottom: var(--space-2xl);
}

.essay-history-scroll {
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  padding: var(--space-sm) 0 var(--space-md);
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}

.essay-history-scroll::-webkit-scrollbar {
  display: none;
}

.essay-history-empty {
  width: 100%;
  text-align: center;
  padding: var(--space-2xl) 0;
  color: var(--text-tertiary);
}

.essay-history-empty-icon {
  font-size: 36px;
  display: block;
  margin-bottom: var(--space-sm);
  opacity: 0.5;
}

.essay-history-empty p {
  margin: 2px 0;
  font-size: var(--text-sm);
}

.essay-history-card {
  flex-shrink: 0;
  width: 180px;
  padding: var(--space-lg);
  background: var(--bg-white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  scroll-snap-align: start;
}

.essay-history-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: rgba(255, 107, 53, 0.30);
}

.essay-history-card:active {
  transform: scale(0.96);
}

.essay-history-card-top {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.essay-history-score {
  font-size: var(--text-xl);
  font-weight: 900;
  color: var(--brand-blue);
  line-height: 1;
}

.essay-history-exam {
  font-size: 10px;
  color: var(--text-tertiary);
  background: rgba(0, 0, 0, 0.04);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

.essay-history-preview {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-bottom: var(--space-sm);
}

.essay-history-date {
  font-size: 10px;
  color: var(--text-muted);
}

/* ---- Responsive: 紧凑模式 ---- */
@media (max-width: 360px) {
  .essay-dim-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
  }

  .essay-history-card {
    width: 150px;
  }
}

/* ---- 加载Spinner覆盖 ---- */
.essay-loading-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  padding: var(--space-2xl);
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}

/* ==========================================================================
   36. Profile — 个人中心
   ========================================================================== */

.profile-scroll {
  padding: var(--space-lg) var(--space-lg) var(--tab-height);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* 头像区 */
.profile-hero {
  text-align: center;
  padding: 12px 0 16px;
}

.profile-avatar-ring {
  position: relative;
  width: 110px;
  height: 110px;
  margin: 0 auto 12px;
}

.profile-avatar {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: linear-gradient(135deg, #007AFF, #FF9500);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 38px;
  box-shadow: 0 4px 16px rgba(255,107,53,0.3);
}

.profile-avatar-progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 110px;
  height: 110px;
}

#avatarProgressCircle {
  stroke: #007AFF;
  transition: stroke-dashoffset 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.profile-name {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 4px;
}

.profile-id-strip {
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--bg-card, #f5f5f5);
  display: inline-block;
  padding: 3px 12px;
  border-radius: 10px;
  margin-bottom: 8px;
}

.profile-streak-row {
  display: flex;
  gap: 16px;
  justify-content: center;
  font-size: 13px;
  color: var(--text-secondary);
}

.profile-streak { color: #007AFF; font-weight: 700; }
.profile-badge-count { cursor: pointer; }

/* 数据四块 */
.profile-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.profile-stat-card {
  background: var(--bg-card, #fff);
  border-radius: 14px;
  padding: 12px 8px;
  text-align: center;
  border: none;
  box-shadow: 0 1px 4px rgba(0,0,0,0.03);
}

.profile-stat-ring {
  position: relative;
  width: 52px;
  height: 52px;
  margin: 0 auto 6px;
}

.stat-mini-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 52px;
  height: 52px;
}

.stat-mini-ring circle:last-child {
  transition: stroke-dashoffset 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.profile-stat-num {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  font-weight: 800;
  color: var(--text-primary);
}

.profile-stat-label {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 600;
}

/* 区域卡片 */
.profile-section-card {
  background: var(--bg-card, #fff);
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.03);
  overflow: hidden;
}

.psc-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.psc-icon { font-size: 18px; }

.psc-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  flex: 1;
}

.psc-arrow {
  font-size: 12px;
  color: var(--accent, #007AFF);
  font-weight: 600;
}

.psc-body {
  color: var(--text-secondary);
}

.psc-empty {
  text-align: center;
  color: #ccc;
  font-size: 13px;
  padding: 12px 0;
}

.psc-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 8px 0;
}

.psc-summary-item {
  text-align: center;
}

.psc-summary-num {
  font-size: 22px;
  font-weight: 800;
  display: block;
  line-height: 1.2;
}

.psc-summary-label {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 500;
}

.psc-summary-divider {
  width: 1px;
  height: 28px;
  background: var(--border-subtle, #e8e8e8);
}

/* 菜单列表 */
.profile-menu-list {
  display: flex;
  flex-direction: column;
}

.profile-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-subtle, #f0f0f0);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: background 0.15s;
}

.profile-menu-item:last-child { border-bottom: none; }

.profile-menu-item:active { opacity: 0.7; }

.pmi-icon { font-size: 20px; width: 28px; text-align: center; }

.pmi-label {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.pmi-value {
  font-size: 12px;
  color: var(--text-secondary);
  margin-right: 4px;
}

.pmi-arrow {
  font-size: 18px;
  color: #ccc;
  font-weight: 700;
}

/* 徽章预览 */
#badgePreview {
  display: flex;
  gap: 12px;
}

.badge-preview-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.bpi-icon {
  font-size: 28px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

.bpi-name {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 600;
}

/* 版本信息 */
.profile-footer {
  text-align: center;
  padding: 20px 0 10px;
}

.profile-version {
  font-size: 12px;
  color: #ccc;
  margin: 0 0 4px;
  font-weight: 600;
}

.profile-copyright {
  font-size: 11px;
  color: #ddd;
  margin: 0;
}

/* ==========================================================================
   31. 主题选择面板
   ========================================================================== */

.theme-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.theme-card {
  aspect-ratio: 1;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  border: 3px solid transparent;
  position: relative;
  overflow: hidden;
}

.theme-card:active {
  transform: scale(0.95);
}

.theme-card.selected {
  border-color: #007AFF;
  box-shadow: 0 0 0 4px rgba(255,107,53,0.2);
}

.theme-card-icon {
  font-size: 32px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}

.theme-card-label {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* ==========================================================================
   32. 发现广场发布入口 — 小红书风格
   ========================================================================== */

/* 浮动发布按钮（小红书风格）*/
.fab-publish {
  position: fixed;
  bottom: calc(var(--tab-height, 64px) + 20px);
  right: 16px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #007AFF, #FF3B30);
  color: #fff;
  border: none;
  font-size: 28px;
  font-weight: 300;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(255,107,53,0.4);
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s, box-shadow 0.2s;
}

.fab-publish:active {
  transform: scale(0.9);
  box-shadow: 0 2px 8px rgba(255,107,53,0.3);
}

/* 顶部发布小按钮 */
.btn-publish-sm {
  background: linear-gradient(135deg, #007AFF, #4A9FFF);
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(255,107,53,0.2);
  transition: transform 0.15s;
}

.btn-publish-sm:active {
  transform: scale(0.95);
}

/* discovery-header 布局 */
.discovery-header {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
  padding: 0 4px;
}

.discovery-search {
  flex: 1;
}

/* 话题标签（发布弹窗内）*/
.topic-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.topic-tag {
  padding: 6px 14px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 600;
  background: #f5f5f5;
  color: #999;
  cursor: pointer;
  border: none;
  transition: all 0.15s;
}

.topic-tag.selected {
  background: linear-gradient(135deg, #007AFF, #4A9FFF);
  color: #fff;
  box-shadow: 0 2px 8px rgba(255,107,53,0.3);
}

/* ==========================================================================
   32. Dashboard v3 — Redesigned (XHS × Duolingo Style)
   ========================================================================== */

/* ---- Greeting Card ---- */
.dash-greeting {
  padding: var(--space-lg) 0 var(--space-sm);
}

.dash-greeting-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-xl) var(--space-2xl);
  background: linear-gradient(135deg, #F2F2F7 0%, #E5E5EA 30%, #F2F2F7 70%, #FAFAFA 100%);
  border-radius: 16px;
  border: 1px solid rgba(255, 163, 102, 0.15);
  box-shadow: 0 2px 12px rgba(255, 140, 0, 0.08);
  gap: var(--space-md);
  position: relative;
  overflow: hidden;
}

.dash-greeting-card::after {
  content: "";
  position: absolute;
  top: -30%;
  right: -15%;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 140, 0, 0.12), transparent 70%);
  pointer-events: none;
}

.dash-greeting-left {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
}

.dash-avatar {
  font-size: 40px;
  line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

.dash-greeting-info {
  flex: 1;
  min-width: 0;
}

.dash-greeting-text {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
  margin: 0;
  cursor: pointer;
  transition: color var(--duration-fast);
}

.dash-greeting-text:hover {
  color: var(--brand-blue);
}

.dash-greeting-sub {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin: 0;
  margin-top: 2px;
}

.dash-greeting-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 72px;
  position: relative;
  z-index: 1;
}

.dash-streak-num {
  font-size: var(--text-3xl);
  font-weight: 900;
  background: linear-gradient(180deg, #FF8C00 0%, #FF6B2B 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}

.dash-streak-unit {
  font-size: var(--text-xs);
  color: var(--orange-warm);
  font-weight: 600;
  margin-top: 2px;
  white-space: nowrap;
}

/* ---- Progress Section ---- */
.dash-progress-section {
  padding: var(--space-lg) 0 var(--space-sm);
}

.dash-progress-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-xl) var(--space-lg);
  background: var(--bg-white);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
}

.dash-progress-detail {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin: 0;
  font-weight: 500;
}

/* ---- Feature Card Grid ---- */
.dash-features-section {
  padding: var(--space-lg) 0 var(--space-sm);
}

.dash-feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

.dash-feature-card {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 14px var(--space-lg);
  background: var(--bg-white);
  border-radius: 14px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.05);
  border-left: 4px solid transparent;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s var(--ease-out-expo), box-shadow 0.2s var(--ease-out-expo);
  position: relative;
  overflow: hidden;
}

.dash-feature-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
}

.dash-feature-card:active {
  transform: scale(0.97);
}

/* Left border color variants */
.dash-card-coral  { border-left-color: #007AFF; } /* (legacy class name) */
.dash-card-purple { border-left-color: #7C3AED; }
.dash-card-blue   { border-left-color: #3B82F6; }
.dash-card-pink   { border-left-color: #EC4899; }
.dash-card-green  { border-left-color: #10B981; }
.dash-card-teal   { border-left-color: #14B8A6; }
.dash-card-orange { border-left-color: #F59E0B; }
.dash-card-red    { border-left-color: #EF4444; }
.dash-card-gold   { border-left-color: #F59E0B; }
.dash-card-cyan   { border-left-color: #06B6D4; }

.dash-card-icon {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
}

.dash-card-title {
  flex: 1;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}

.dash-card-arrow {
  font-size: var(--text-lg);
  color: var(--text-tertiary);
  font-weight: 700;
  flex-shrink: 0;
  transition: transform 0.2s var(--ease-out-expo);
}

.dash-feature-card:hover .dash-card-arrow {
  transform: translateX(3px);
  color: var(--brand-blue);
}

/* ---- Today Tasks ---- */
.dash-tasks-section {
  padding: var(--space-lg) 0 var(--space-sm);
}

.dash-task-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: var(--space-md);
}

.dash-task-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 12px 14px;
  background: var(--bg-white);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.03);
  transition: background var(--duration-fast);
}

.dash-task-item:hover {
  background: var(--bg-warm);
}

.dash-task-check {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}

.dash-task-title {
  flex: 1;
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--text-primary);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-task-item.dash-task-done .dash-task-title {
  text-decoration: line-through;
  color: var(--text-tertiary);
}

.dash-task-tag {
  font-size: var(--text-xs);
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 8px;
  background: rgba(255, 107, 53, 0.10);
  color: var(--brand-blue);
  flex-shrink: 0;
  white-space: nowrap;
}

/* ---- Learning Tip ---- */
.dash-tip-section {
  padding: var(--space-lg) 0 var(--space-sm);
}

.dash-tip-card {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 14px var(--space-lg);
  background: linear-gradient(135deg, #FFF8EC 0%, #F2F2F7 60%, #FAFAFA 100%);
  border: 1px solid rgba(255, 184, 0, 0.12);
  border-radius: 14px;
  box-shadow: 0 1px 6px rgba(255, 184, 0, 0.06);
}

.dash-tip-icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
  animation: tipBounce 2s ease-in-out infinite;
}

@keyframes tipBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

.dash-tip-text {
  font-size: var(--text-sm);
  font-weight: 500;
  color: #8B6914;
  line-height: 1.5;
  flex: 1;
}