/* ==========================================================================
   modern.css — 2026 现代化视觉层（覆盖式换肤，不改动任何功能逻辑）
   加载顺序：置于 style.css / v11.css 之后
   支持：深色模式（html.dark）、玻璃拟态导航、极光渐变、卡片微动效
   ========================================================================== */

/* ---------- 设计令牌（浅色） ---------- */
:root {
  --c-primary: #4F46E5;
  --c-primary-light: #6366F1;
  --c-primary-bg: #EEF2FF;
  --c-secondary: #059669;
  --c-secondary-light: #10B981;
  --c-secondary-bg: #ECFDF5;
  --c-accent: #7C3AED;
  --c-accent-light: #8B5CF6;
  --c-accent-bg: #F5F3FF;
  --c-purple: #9333EA;
  --c-purple-bg: #FAF5FF;
  --c-teal: #0D9488;
  --c-teal-bg: #F0FDFA;
  --c-red: #E11D48;
  --c-amber: #D97706;

  --c-bg: #F5F6FA;
  --c-surface: #FFFFFF;
  --c-surface-alt: #F8F9FC;
  --c-border: #E8EAF1;
  --c-text: #101426;
  --c-text-2: #4B5567;
  --c-text-3: #98A1B3;

  --c-shadow: 0 1px 2px rgba(16,20,38,.04), 0 4px 16px rgba(16,20,38,.06);
  --c-shadow-lg: 0 4px 12px rgba(16,20,38,.06), 0 16px 40px rgba(16,20,38,.10);
  --c-radius: 16px;
  --c-radius-sm: 12px;
  --c-radius-lg: 24px;
  --c-transition: .28s cubic-bezier(.4,0,.2,1);

  --grad-brand: linear-gradient(135deg, #4F46E5 0%, #7C3AED 55%, #A855F7 100%);
  --grad-brand-soft: linear-gradient(135deg, rgba(79,70,229,.10), rgba(124,58,237,.10));
  --nav-glass: rgba(255,255,255,.78);
}

/* ---------- 设计令牌（深色） ---------- */
html.dark {
  --c-primary: #818CF8;
  --c-primary-light: #A5B4FC;
  --c-primary-bg: rgba(99,102,241,.14);
  --c-secondary: #34D399;
  --c-secondary-light: #6EE7B7;
  --c-secondary-bg: rgba(16,185,129,.12);
  --c-accent: #A78BFA;
  --c-accent-light: #C4B5FD;
  --c-accent-bg: rgba(139,92,246,.14);
  --c-purple: #C084FC;
  --c-purple-bg: rgba(192,132,252,.12);
  --c-teal: #2DD4BF;
  --c-teal-bg: rgba(45,212,191,.12);
  --c-red: #FB7185;
  --c-amber: #FBBF24;

  --c-bg: #0C1020;
  --c-surface: #151A2E;
  --c-surface-alt: #1B2138;
  --c-border: #272F4A;
  --c-text: #E8EBF4;
  --c-text-2: #A6AFC2;
  --c-text-3: #6B7689;

  --c-shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.3);
  --c-shadow-lg: 0 4px 12px rgba(0,0,0,.35), 0 16px 40px rgba(0,0,0,.45);
  --grad-brand: linear-gradient(135deg, #6366F1 0%, #8B5CF6 55%, #C084FC 100%);
  --grad-brand-soft: linear-gradient(135deg, rgba(99,102,241,.18), rgba(139,92,246,.18));
  --nav-glass: rgba(12,16,32,.72);
}

/* ---------- 基础 ---------- */
html { scroll-behavior: smooth; }
body {
  background:
    radial-gradient(1200px 500px at 85% -10%, rgba(124,58,237,.06), transparent 60%),
    radial-gradient(900px 400px at -10% 10%, rgba(79,70,229,.05), transparent 55%),
    var(--c-bg);
  background-attachment: fixed;
}
html.dark body {
  background:
    radial-gradient(1200px 500px at 85% -10%, rgba(124,58,237,.10), transparent 60%),
    radial-gradient(900px 400px at -10% 10%, rgba(79,70,229,.08), transparent 55%),
    var(--c-bg);
  background-attachment: fixed;
}
::selection { background: rgba(99,102,241,.25); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--c-text-3); border: 2px solid transparent; background-clip: content-box; }
:focus-visible { outline: 2px solid var(--c-primary-light); outline-offset: 2px; border-radius: 4px; }

/* ---------- 顶部导航：玻璃拟态 ---------- */
#header {
  background: var(--nav-glass);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--c-border);
  box-shadow: 0 1px 24px rgba(16,20,38,.05);
}
.nav-logo-icon {
  background: var(--grad-brand);
  box-shadow: 0 4px 14px rgba(99,102,241,.35);
  border-radius: 12px;
}
.nav-link { border-radius: 999px; font-weight: 500; }
.nav-link:hover { background: var(--c-primary-bg); color: var(--c-primary); }
.nav-link.active {
  background: var(--grad-brand);
  color: #fff;
  box-shadow: 0 4px 14px rgba(99,102,241,.35);
}
.nav-btn { border-radius: 12px; border: 1px solid var(--c-border); background: var(--c-surface); }
.nav-btn:hover { border-color: var(--c-primary-light); color: var(--c-primary); transform: translateY(-1px); }

/* 主题切换按钮 */
.theme-toggle { position: relative; }
.theme-toggle .icon-sun, .theme-toggle .icon-moon { display: block; transition: transform .4s cubic-bezier(.4,0,.2,1), opacity .3s; }
html:not(.dark) .theme-toggle .icon-moon { display: none; }
html.dark .theme-toggle .icon-sun { display: none; }

/* ---------- Hero：极光渐变 ---------- */
.hero {
  background:
    radial-gradient(600px 300px at 15% 20%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(500px 260px at 85% 80%, rgba(45,212,191,.28), transparent 60%),
    var(--grad-brand);
  position: relative;
  overflow: hidden;
  border-radius: var(--c-radius-lg);
}
.hero::before, .hero::after {
  content: ''; position: absolute; border-radius: 50%; filter: blur(60px); opacity: .5; pointer-events: none;
}
.hero::before { width: 420px; height: 420px; background: rgba(168,85,247,.45); top: -160px; right: -80px; animation: floatBlob 12s ease-in-out infinite; }
.hero::after  { width: 320px; height: 320px; background: rgba(56,189,248,.30); bottom: -140px; left: -60px; animation: floatBlob 14s ease-in-out infinite reverse; }
@keyframes floatBlob {
  0%, 100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(-24px,20px) scale(1.08); }
}
.hero h1 { letter-spacing: -1px; text-shadow: 0 2px 20px rgba(0,0,0,.18); }
.hero .hero-slogan, .hero p { text-shadow: 0 1px 8px rgba(0,0,0,.15); }

/* ---------- 按钮 ---------- */
.btn { border-radius: 999px; font-weight: 600; transition: var(--c-transition); }
.btn-primary {
  background: var(--grad-brand);
  color: #fff;
  box-shadow: 0 6px 20px rgba(99,102,241,.35);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(99,102,241,.45);
  filter: brightness(1.06);
}
.hero .btn-primary, .cta-banner .btn-primary { background: #fff; color: #4F46E5; box-shadow: 0 6px 20px rgba(0,0,0,.18); }
.hero .btn-primary:hover, .cta-banner .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.25); }
.btn-outline { border: 1.5px solid rgba(255,255,255,.5); color: #fff; backdrop-filter: blur(4px); }
.btn-outline:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.85); }
.btn-buy { background: linear-gradient(135deg, #F59E0B, #F97316); color: #fff; box-shadow: 0 6px 20px rgba(249,115,22,.35); }

/* ---------- CTA 横幅 ---------- */
.cta-banner {
  background: var(--grad-brand);
  border-radius: var(--c-radius-lg);
  box-shadow: 0 12px 32px rgba(99,102,241,.30);
}

/* ---------- 卡片体系 ---------- */
.section-header h1 { letter-spacing: -.8px; }
.section-header h1::after {
  content: ''; display: block; width: 56px; height: 4px; margin-top: 10px;
  border-radius: 2px; background: var(--grad-brand);
}
.stat-card, .feature-card, .letter-card, .vocab-card, .conv-card, .settings-card, .roadmap, .quiz-card, .grammar-item {
  border-radius: var(--c-radius);
  box-shadow: var(--c-shadow);
  transition: transform var(--c-transition), box-shadow var(--c-transition), border-color var(--c-transition);
}
.stat-card:hover, .feature-card:hover, .letter-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--c-shadow-lg);
  border-color: transparent;
}
.stat-card:hover, .feature-card:hover {
  background-image: var(--grad-brand-soft);
}
.stat-card .stat-num {
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.feature-icon { border-radius: 14px; box-shadow: 0 6px 16px rgba(99,102,241,.25); }
.roadmap-num { box-shadow: 0 4px 12px rgba(99,102,241,.3); }
.vocab-card:hover { transform: translateY(-3px); border-color: var(--c-primary-light); box-shadow: var(--c-shadow-lg); }

/* 字母卡：大字母渐变 */
.letter-card .letter-big {
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.letter-card:hover .letter-big { animation: letterPop .45s cubic-bezier(.34,1.56,.64,1); }
@keyframes letterPop { 0% { transform: scale(1); } 40% { transform: scale(1.14); } 100% { transform: scale(1); } }

/* ---------- 发音按钮 ---------- */
.audio-btn {
  background: var(--c-primary-bg);
  color: var(--c-primary);
  border: 1px solid transparent;
}
.audio-btn:hover {
  background: var(--grad-brand);
  color: #fff;
  transform: scale(1.08);
  box-shadow: 0 4px 14px rgba(99,102,241,.4);
}

/* ---------- 标签 / 筛选 ---------- */
.cat-tab { border-radius: 999px; font-weight: 500; }
.cat-tab.active {
  background: var(--grad-brand);
  color: #fff; border-color: transparent;
  box-shadow: 0 4px 12px rgba(99,102,241,.3);
}
.level-chip.active {
  background: var(--grad-brand);
  color: #fff; border-color: transparent;
  box-shadow: 0 4px 12px rgba(99,102,241,.3);
}
.search-box input {
  border-radius: 999px; padding-left: 44px;
  background: var(--c-surface);
}
.search-box input:focus {
  border-color: var(--c-primary-light);
  box-shadow: 0 0 0 4px rgba(99,102,241,.15);
}
.section-header .badge { border-radius: 999px; }

/* ---------- 测验 ---------- */
.quiz-option { border-radius: var(--c-radius-sm); }
.quiz-option:hover { background: var(--c-primary-bg); border-color: var(--c-primary-light); }
.dw-result { background: var(--c-surface); border-radius: var(--c-radius-lg); }

/* ---------- 学习弹层 ---------- */
.study-card, .conv-detail, .pay-modal { border-radius: var(--c-radius-lg); }

/* ---------- 页脚 ---------- */
.footer { background: var(--c-surface); }

/* ---------- Toast ---------- */
.toast {
  border-radius: 999px;
  box-shadow: 0 12px 32px rgba(0,0,0,.25);
  font-weight: 500;
}

/* ---------- PIN 门：极光深底 + 玻璃卡 ---------- */
.pin-gate {
  background:
    radial-gradient(800px 400px at 15% 10%, rgba(99,102,241,.45), transparent 60%),
    radial-gradient(700px 380px at 90% 85%, rgba(45,212,191,.25), transparent 60%),
    radial-gradient(600px 300px at 80% 15%, rgba(168,85,247,.35), transparent 60%),
    linear-gradient(160deg, #0B1020 0%, #141A38 55%, #0B1020 100%);
  background-attachment: fixed;
}
.pin-gate::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 26px 26px;
}
.pin-gate-card {
  /* PIN 区域背景恒为深色极光，卡片固定用深色玻璃保证浅色文字对比度 */
  background: rgba(15,20,40,.82);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 24px 80px rgba(0,0,0,.5);
  color: #F2F4FA;
  max-width: 440px;
}
.pin-gate-title { color: #F2F4FA; text-shadow: 0 2px 16px rgba(0,0,0,.4); }
.pin-gate-subtitle { color: rgba(242,244,250,.75); }
/* 卡片已为深色玻璃，内部步骤盒/强调色同步改为深色系配色 */
.pin-gate-card .pin-step { background: rgba(255,255,255,.07); }
.pin-gate-card .pin-step-desc strong { color: #FBBF24; }
.pin-gate-card .pin-gate-tip { color: #FBBF24; }
.pin-gate-card .copy-wechat-btn { border-color: rgba(255,255,255,.35); }
.pin-gate-card .copy-wechat-btn:hover { color: #fff; }
.pin-gate-card .qr-placeholder { color: rgba(255,255,255,.85); }
.pin-gate-logo-icon {
  background: var(--grad-brand);
  box-shadow: 0 8px 28px rgba(124,58,237,.55);
  border-radius: 18px;
}
.pin-step { border-radius: var(--c-radius); }
.pin-step .pin-step-header .pin-step-num { box-shadow: 0 4px 12px rgba(99,102,241,.4); }
.pin-input {
  border-radius: 14px; letter-spacing: .35em; text-align: center; font-weight: 700; font-size: 20px;
  background: rgba(255,255,255,.92); color: #101426; border: 1.5px solid transparent;
}
.pin-input:focus { outline: none; border-color: #6366F1; box-shadow: 0 0 0 4px rgba(99,102,241,.25); }
.pin-submit-btn {
  border-radius: 14px; font-weight: 700;
  background: var(--grad-brand);
  color: #fff; box-shadow: 0 8px 24px rgba(99,102,241,.45);
}
.pin-submit-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(99,102,241,.55); filter: brightness(1.05); }
.pin-gate-card .pin-step-title, .pin-gate-card .pin-step-desc, .pin-gate-card .pin-gate-wechat-label { color: rgba(242,244,250,.92); }
.pin-gate-card .pin-device-tip, .pin-gate-card .pin-gate-footer { color: rgba(242,244,250,.55); }
.pin-gate-card .pin-gate-wechat-id { background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18); border-radius: 10px; }
.pin-gate-card .wechat-id-text { color: #fff; }
.copy-wechat-btn { background: rgba(255,255,255,.16); color: #fff; border-radius: 8px; }
.copy-wechat-btn:hover { background: rgba(255,255,255,.28); }
.pin-error { color: #FDA4AF; }
.pin-gate-qr, .pin-pay-qr { border-radius: 14px; overflow: hidden; background: #fff; padding: 6px; }
.qr-placeholder { background: rgba(255,255,255,.12); border-radius: 10px; color: rgba(255,255,255,.85); }

/* ---------- 深色模式硬编码修正 ---------- */
html.dark .toast { background: #272F4A; color: #E8EBF4; }
html.dark .btn-primary { color: #fff; }
html.dark .hero .btn-primary, html.dark .cta-banner .btn-primary { background: #fff; color: #4F46E5; }
html.dark .dw-result, html.dark .pay-modal, html.dark .study-card { background: var(--c-surface); }
html.dark .pin-gate-card .pin-input { background: rgba(255,255,255,.95); }
html.dark .roadmap { background: var(--c-surface); }
html.dark img { filter: none; }

/* ---------- 入场动效（卡片网格交错浮现） ---------- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.stats-grid > *, .features-grid > *, .alphabet-grid > * {
  animation: fadeUp .5s cubic-bezier(.4,0,.2,1) both;
}
.stats-grid > *:nth-child(2), .features-grid > *:nth-child(2), .alphabet-grid > *:nth-child(2) { animation-delay: .06s; }
.stats-grid > *:nth-child(3), .features-grid > *:nth-child(3), .alphabet-grid > *:nth-child(3) { animation-delay: .12s; }
.stats-grid > *:nth-child(4), .features-grid > *:nth-child(4), .alphabet-grid > *:nth-child(4) { animation-delay: .18s; }
.alphabet-grid > *:nth-child(5) { animation-delay: .24s; }
.alphabet-grid > *:nth-child(6) { animation-delay: .30s; }

/* ---------- 减少动效偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- 移动端 ---------- */
@media (max-width: 768px) {
  .hero h1 { font-size: 30px; }
  .section-header h1 { font-size: 26px; }
  .pin-gate-card { border-radius: 20px; }
}


/* ============================================================
   Alphabet v42 — 字母学习页（2026-09 改版）
   课前必读 + 三Tab渐进 + 卡片流 + 小练习 + 弹窗对照表
   ============================================================ */

/* ---- 页头 ---- */
.alp42-header { position: relative; }
.alp42-header p { max-width: 72ch; }
.alp42-progress-overview {
  display: flex; align-items: center; gap: 16px;
  margin-top: 18px; flex-wrap: wrap;
}
.alp42-progress-bar {
  flex: 1 1 260px; min-width: 200px; height: 10px;
  background: var(--c-surface-alt); border: 1px solid var(--c-border);
  border-radius: 999px; overflow: hidden;
}
.alp42-progress-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--c-primary), var(--c-accent-light));
  transition: width var(--c-transition);
}
.alp42-progress-text { font-size: 13.5px; color: var(--c-text-2); white-space: nowrap; }
.alp42-progress-text b { color: var(--c-primary); font-size: 16px; }

/* ---- 课前必读 ---- */
.alp42-preread {
  background: linear-gradient(135deg, var(--c-primary-bg), var(--c-accent-bg));
  border: 1px solid var(--c-border); border-radius: var(--c-radius-lg);
  padding: 22px 26px; margin: 26px 0; box-shadow: var(--c-shadow);
}
.alp42-preread-head {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; user-select: none; gap: 12px;
}
.alp42-preread-head h3 { margin: 0; font-size: 17px; color: var(--c-text); }
.alp42-collapse {
  color: var(--c-text-3); font-size: 18px; line-height: 1;
  transition: transform var(--c-transition);
}
.alp42-preread-head.collapsed .alp42-collapse { transform: rotate(-90deg); }
.alp42-preread-body { margin-top: 14px; }
.alp42-preread-body.collapsed { display: none; }
.alp42-preread-item {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 12px 0; border-bottom: 1px dashed var(--c-border);
}
.alp42-preread-item:last-child { border-bottom: none; }
.alp42-preread-item p {
  margin: 0; font-size: 14.5px; line-height: 1.75; color: var(--c-text);
}
.alp42-num {
  flex: 0 0 26px; width: 26px; height: 26px; margin-top: 2px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-primary); color: #fff; font-size: 13px; font-weight: 700;
  border-radius: 8px;
}

/* ---- Tab 切换 ---- */
.alp42-tabs {
  display: flex; gap: 10px; flex-wrap: wrap; margin: 26px 0 14px;
}
.alp42-tab {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 18px; border-radius: 999px;
  background: var(--c-surface); border: 1.5px solid var(--c-border);
  color: var(--c-text-2); font-size: 14.5px; font-weight: 600;
  cursor: pointer; transition: all var(--c-transition);
  font-family: inherit;
}
.alp42-tab:hover { border-color: var(--c-primary-light); color: var(--c-primary); transform: translateY(-1px); }
.alp42-tab.active {
  background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
  border-color: transparent; color: #fff;
  box-shadow: 0 6px 18px rgba(79, 70, 229, .28);
}
.alp42-tab-count {
  font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px;
  background: var(--c-surface-alt); color: var(--c-text-2);
}
.alp42-tab.active .alp42-tab-count { background: rgba(255,255,255,.22); color: #fff; }
.alp42-tab-check { display: none; color: #fff; }
.alp42-tab.complete .alp42-tab-check { display: inline-flex; }
.alp42-tab.complete .alp42-tab-count { background: var(--c-secondary); color: #fff; }
.alp42-tab.active.complete .alp42-tab-count { background: rgba(255,255,255,.22); }
.alp42-tab-note {
  font-size: 13.5px; color: var(--c-text-2); line-height: 1.7;
  padding: 0 4px 4px; margin-bottom: 8px;
}

/* ---- 卡片 ---- */
.alp42-cards { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 920px) { .alp42-cards { grid-template-columns: 1fr 1fr; } }
.alp42-card {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--c-radius-lg); padding: 22px 24px;
  box-shadow: var(--c-shadow); transition: all var(--c-transition);
  position: relative; overflow: hidden;
}
.alp42-card::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--c-primary), var(--c-accent-light));
  opacity: 0; transition: opacity var(--c-transition);
}
.alp42-card:hover { box-shadow: var(--c-shadow-lg); transform: translateY(-2px); }
.alp42-card:hover::before, .alp42-card.learned::before { opacity: 1; }
.alp42-card-review { border-color: var(--c-accent); }
.alp42-card-top { display: flex; gap: 18px; align-items: center; }
.alp42-glyphs {
  flex: 0 0 auto; display: flex; align-items: baseline; gap: 8px;
  min-width: 118px; justify-content: center;
  background: var(--c-primary-bg); border-radius: var(--c-radius);
  padding: 14px 16px;
}
.alp42-glyph-big {
  font-size: 46px; font-weight: 800; color: var(--c-primary);
  font-family: var(--font-uz, 'Inter', sans-serif); line-height: 1;
}
.alp42-glyph-sep { color: var(--c-text-3); font-size: 20px; }
.alp42-glyph-small {
  font-size: 30px; font-weight: 600; color: var(--c-accent);
  font-family: var(--font-uz, 'Inter', sans-serif); line-height: 1;
}
.alp42-card-info { flex: 1; min-width: 0; }
.alp42-letter-name { font-size: 13px; font-weight: 700; color: var(--c-text-3); margin-bottom: 10px; letter-spacing: .04em; }
.alp42-card-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.alp42-play, .alp42-stroke-btn, .alp42-cmp, .alp42-stroke-replay, .alp42-q-audio {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 600;
  cursor: pointer; transition: all var(--c-transition); font-family: inherit;
  border: 1.5px solid var(--c-border); background: var(--c-surface); color: var(--c-text-2);
}
.alp42-play svg, .alp42-stroke-btn svg, .alp42-cmp svg, .alp42-stroke-replay svg, .alp42-q-audio svg { width: 15px; height: 15px; }
.alp42-play { border-color: var(--c-primary); color: var(--c-primary); background: var(--c-primary-bg); }
.alp42-play:hover, .alp42-stroke-btn:hover, .alp42-cmp:hover, .alp42-stroke-replay:hover, .alp42-q-audio:hover { transform: translateY(-1px); }
.alp42-play.playing, .alp42-cmp.playing, .alp42-q-audio.playing {
  background: var(--c-primary); color: #fff; border-color: var(--c-primary);
  animation: alp42Pulse 1.1s ease-in-out infinite;
}
.alp42-play.playing svg, .alp42-cmp.playing svg, .alp42-q-audio.playing svg { fill: #fff; }
@keyframes alp42Pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(79, 70, 229, .35); }
  50% { box-shadow: 0 0 0 7px rgba(79, 70, 229, 0); }
}
.alp42-cmp-wrap { margin-top: 10px; }
.alp42-done-mark {
  position: absolute; top: 14px; right: 14px; width: 26px; height: 26px;
  display: none; align-items: center; justify-content: center;
  background: var(--c-secondary); color: #fff; border-radius: 50%;
}
.alp42-done-mark svg { width: 15px; height: 15px; }
.alp42-card.learned .alp42-done-mark { display: inline-flex; }
.alp42-sound, .alp42-examples { margin-top: 16px; }
.alp42-block-title {
  display: inline-block; font-size: 11.5px; font-weight: 700; color: var(--c-accent);
  letter-spacing: .12em; margin-bottom: 8px;
  border: 1px solid var(--c-accent-bg); background: var(--c-accent-bg);
  padding: 2px 10px; border-radius: 999px;
}
html.dark .alp42-block-title { border-color: rgba(139, 92, 246, .35); }
.alp42-sound p { margin: 0; font-size: 14px; line-height: 1.8; color: var(--c-text-2); }
.alp42-ex { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; }
.alp42-ex + .alp42-ex { border-top: 1px dashed var(--c-border); }
.alp42-ex-play {
  display: inline-flex; align-items: center; gap: 9px;
  background: none; border: none; cursor: pointer; padding: 4px 6px;
  border-radius: 10px; transition: background var(--c-transition); font-family: inherit;
}
.alp42-ex-play:hover { background: var(--c-surface-alt); }
.alp42-ex-play svg { width: 15px; height: 15px; color: var(--c-primary); flex: 0 0 auto; }
.alp42-ex-play.playing svg { fill: var(--c-primary); }
.alp42-ex-play.playing { animation: alp42Pulse 1.1s ease-in-out infinite; }
.alp42-ex-uz { font-size: 17px; font-weight: 700; color: var(--c-text); font-family: var(--font-uz, 'Inter', sans-serif); }
.alp42-ex-zh { font-size: 13px; color: var(--c-text-3); white-space: nowrap; }

/* ---- 手写描红动画 ---- */
.alp42-stroke-panel {
  margin-top: 16px; padding: 18px;
  background: var(--c-surface-alt); border: 1px solid var(--c-border);
  border-radius: var(--c-radius);
}
.alp42-stroke-stage { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
.alp42-svg { width: 108px; height: 135px; background: var(--c-surface); border-radius: 12px; border: 1px dashed var(--c-border); }
.alp42-svg text {
  font-family: 'Segoe Script', 'Bradley Hand', 'Comic Sans MS', 'Comic Neue', cursive;
  font-size: 84px; font-weight: 700;
}
.alp42-svg-ghost { fill: var(--c-text-3); opacity: .14; }
.alp42-svg-draw {
  fill: none; stroke: var(--c-primary); stroke-width: 2.5; stroke-linecap: round;
  stroke-dasharray: 3200; stroke-dashoffset: 3200;
}
.alp42-svg.run .alp42-svg-draw { animation: alp42Trace 2.4s ease-in-out forwards; }
.alp42-svg-fill { fill: var(--c-primary); opacity: 0; }
.alp42-svg.run .alp42-svg-fill { animation: alp42FillIn .6s ease 2.2s forwards; }
@keyframes alp42Trace { to { stroke-dashoffset: 0; } }
@keyframes alp42FillIn { to { opacity: .88; } }
.alp42-stroke-ctrl { margin-top: 14px; }
.alp42-stroke-text { margin: 12px 0 0; font-size: 13.5px; line-height: 1.8; color: var(--c-text-2); }

/* ---- 小练习 ---- */
.alp42-quiz {
  margin-top: 34px; background: var(--c-surface);
  border: 1px solid var(--c-border); border-radius: var(--c-radius-lg);
  padding: 26px 28px; box-shadow: var(--c-shadow);
}
.alp42-quiz h3 { margin: 0 0 6px; font-size: 19px; color: var(--c-text); }
.alp42-quiz-sub { margin: 0 0 20px; font-size: 13.5px; color: var(--c-text-2); line-height: 1.7; }
.alp42-q { padding: 18px 0; border-top: 1px solid var(--c-border); }
.alp42-q:first-child { border-top: none; padding-top: 4px; }
.alp42-q-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.alp42-q-num {
  width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-primary-bg); color: var(--c-primary);
  font-size: 12.5px; font-weight: 800; border-radius: 8px;
}
.alp42-q-type { font-size: 13px; font-weight: 600; color: var(--c-text-3); }
.alp42-q-word { font-size: 17px; font-weight: 700; color: var(--c-text); margin-bottom: 12px; }
.alp42-opts { display: flex; gap: 10px; flex-wrap: wrap; }
.alp42-opt {
  padding: 9px 22px; border-radius: 999px; font-size: 15px; font-weight: 600;
  border: 1.5px solid var(--c-border); background: var(--c-surface);
  color: var(--c-text); cursor: pointer; transition: all var(--c-transition);
  font-family: var(--font-uz, 'Inter', sans-serif);
}
.alp42-opt:hover { border-color: var(--c-primary-light); color: var(--c-primary); }
.alp42-q.answered .alp42-opt { cursor: default; opacity: .75; }
.alp42-q.answered .alp42-opt.right {
  opacity: 1; background: var(--c-secondary-bg); border-color: var(--c-secondary); color: var(--c-secondary);
}
.alp42-q.answered .alp42-opt.wrong {
  opacity: 1; background: #FEF2F2; border-color: var(--c-red); color: var(--c-red);
}
html.dark .alp42-q.answered .alp42-opt.wrong { background: rgba(225, 29, 72, .16); }
.alp42-q-feedback { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.alp42-fb-right { font-size: 14px; font-weight: 700; color: var(--c-secondary); display: inline-flex; align-items: center; gap: 6px; }
.alp42-fb-right svg { width: 15px; height: 15px; }
.alp42-fb-wrong { font-size: 14px; font-weight: 700; color: var(--c-red); }
.alp42-fb-explain { font-size: 13px; color: var(--c-text-3); line-height: 1.7; }
.alp42-quiz-result { display: none; }
.alp42-quiz-result.show { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 18px; padding-top: 20px; border-top: 1px solid var(--c-border); }
.alp42-score { font-size: 22px; font-weight: 800; color: var(--c-text); }
.alp42-score b { font-size: 34px; color: var(--c-primary); }
.alp42-score.pass b { color: var(--c-secondary); }
.alp42-wrong-review { font-size: 13.5px; color: var(--c-text-2); flex: 1 1 240px; }

/* ---- 悬浮按钮 + 弹窗 ---- */
.alp42-fab {
  position: fixed; right: 22px; bottom: 26px; z-index: 900;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 20px; border: none; border-radius: 999px;
  background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
  color: #fff; font-size: 14px; font-weight: 700; cursor: pointer;
  box-shadow: 0 10px 26px rgba(79, 70, 229, .4);
  transition: all var(--c-transition); font-family: inherit;
}
.alp42-fab:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 14px 32px rgba(79, 70, 229, .5); }
.alp42-modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(16, 20, 38, .55); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; opacity: 0; transition: opacity .25s ease;
}
.alp42-modal-overlay.open { opacity: 1; }
.alp42-modal {
  width: min(860px, 100%); max-height: 86vh; display: flex; flex-direction: column;
  background: var(--c-surface); border-radius: var(--c-radius-lg);
  box-shadow: var(--c-shadow-lg); overflow: hidden;
  transform: translateY(14px) scale(.98); transition: transform .25s ease;
}
.alp42-modal-overlay.open .alp42-modal { transform: none; }
.alp42-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px 12px;
}
.alp42-modal-head h3 { margin: 0; font-size: 18px; color: var(--c-text); }
.alp42-modal-close {
  width: 34px; height: 34px; border: none; border-radius: 10px;
  background: var(--c-surface-alt); color: var(--c-text-2);
  font-size: 15px; cursor: pointer; transition: all var(--c-transition);
}
.alp42-modal-close:hover { background: var(--c-red); color: #fff; }
.alp42-modal-sub { margin: 0; padding: 0 24px 14px; font-size: 12.5px; color: var(--c-text-3); }
.alp42-modal-filters { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 24px 16px; }
.alp42-filter {
  padding: 6px 15px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  border: 1px solid var(--c-border); background: var(--c-surface);
  color: var(--c-text-2); cursor: pointer; transition: all var(--c-transition); font-family: inherit;
}
.alp42-filter.active { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.alp42-modal-thead, .alp42-row {
  display: grid; grid-template-columns: 86px 64px 84px 1fr 44px;
  gap: 10px; align-items: center; padding: 9px 24px;
}
.alp42-modal-thead {
  font-size: 11.5px; font-weight: 700; color: var(--c-text-3); letter-spacing: .08em;
  border-bottom: 1px solid var(--c-border); background: var(--c-surface-alt);
}
.alp42-modal-rows { overflow-y: auto; padding-bottom: 8px; }
.alp42-row { border-bottom: 1px solid var(--c-border); transition: background var(--c-transition); }
.alp42-row:hover { background: var(--c-surface-alt); }
.alp42-row-glyph { font-size: 19px; font-weight: 800; color: var(--c-primary); font-family: var(--font-uz, 'Inter', sans-serif); }
.alp42-row-name { font-size: 13.5px; font-weight: 600; color: var(--c-text); }
.alp42-row[data-cat="vowel"] .alp42-row-cat { color: var(--c-secondary); }
.alp42-row[data-cat="cons"] .alp42-row-cat { color: var(--c-teal); }
.alp42-row[data-cat="special"] .alp42-row-cat { color: var(--c-accent); }
.alp42-row-sound { font-size: 12.5px; color: var(--c-text-2); line-height: 1.5; }
.alp42-row-play {
  width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--c-border); border-radius: 10px; background: var(--c-surface);
  color: var(--c-primary); cursor: pointer; transition: all var(--c-transition);
}
.alp42-row-play svg { width: 14px; height: 14px; }
.alp42-row-play:hover { border-color: var(--c-primary); background: var(--c-primary-bg); }
.alp42-row-play.playing { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.alp42-row-play.playing svg { fill: #fff; }

@media (max-width: 640px) {
  .alp42-card-top { flex-direction: column; align-items: stretch; }
  .alp42-glyphs { justify-content: flex-start; }
  .alp42-modal-thead, .alp42-row { grid-template-columns: 72px 52px 1fr 38px; }
  .alp42-row-cat { display: none; }
  .alp42-modal-thead .alp42-row-cat { display: none; }
  .alp42-fab { right: 14px; bottom: 18px; padding: 12px 16px; }
}


/* ================================================================
   v46 新栏目样式：小作文集 + 儿歌（sec46-* 前缀）
   ================================================================ */
.sec46-head { margin: 0 0 22px; }
.sec46-head h2 {
  margin: 0 0 10px; font-size: 26px; font-weight: 800; color: var(--c-text);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.sec46-uz {
  font-size: 15px; font-weight: 600; color: var(--c-primary);
  background: var(--c-primary-bg); border-radius: 999px; padding: 3px 12px;
}
.sec46-intro {
  color: var(--c-text-2); font-size: 14.5px; line-height: 1.75; margin-bottom: 8px;
}
.sec46-tip {
  font-size: 12.5px; color: var(--c-text-3); background: var(--c-bg);
  border: 1px dashed var(--c-border, #E5E7EB); border-radius: 10px;
  padding: 8px 12px; display: inline-block;
}

.sec46-list { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.sec46-card {
  background: var(--c-card, #fff); border: 1px solid var(--c-border, #E5E7EB);
  border-radius: 16px; padding: 18px 18px 8px; position: relative; overflow: hidden;
  transition: box-shadow .2s, transform .2s;
}
.sec46-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--c-primary), var(--c-primary-light));
}
.sec46-card:hover { box-shadow: 0 8px 24px rgba(79,70,229,.12); transform: translateY(-2px); }

.sec46-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.sec46-idx {
  flex: none; width: 34px; height: 34px; border-radius: 10px;
  background: var(--c-primary-bg); color: var(--c-primary);
  font-weight: 800; font-size: 15px; display: flex; align-items: center; justify-content: center;
}
.sec46-song-idx { background: linear-gradient(135deg, #EEF2FF, #FDF2F8); font-size: 17px; }
.sec46-titles { flex: 1; min-width: 0; }
.sec46-titles h3 { margin: 0; font-size: 18px; font-weight: 800; color: var(--c-text); }
.sec46-zh-title { font-size: 12.5px; color: var(--c-text-3); margin-top: 2px; }

.sec46-playall {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  background: var(--c-primary); color: #fff; border: none; border-radius: 999px;
  padding: 7px 14px; font-size: 12.5px; font-weight: 700; cursor: pointer;
  transition: background .2s, transform .15s;
}
.sec46-playall:hover { background: var(--c-primary-light); transform: scale(1.04); }
.sec46-playall.playing { background: #E11D48; animation: sec46Pulse 1.2s infinite; }
@keyframes sec46Pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(225,29,72,.35); }
  50% { box-shadow: 0 0 0 6px rgba(225,29,72,0); }
}

.sec46-para { border-top: 1px solid var(--c-border, #E5E7EB); padding: 12px 0; }
.sec46-para:first-of-type { border-top: none; }
.sec46-uz { display: flex; align-items: flex-start; gap: 8px; }
.sec46-uz-text { font-size: 16px; line-height: 1.7; color: var(--c-text); font-weight: 600; }
.sec46-zh {
  display: flex; align-items: center; gap: 8px; margin-top: 5px;
  font-size: 13.5px; color: var(--c-text-2); line-height: 1.6;
}
.sec46-zh .zh-audio-btn { flex: none; }

.sec46-play {
  flex: none; width: 28px; height: 28px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--c-primary-bg); color: var(--c-primary);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .2s, transform .15s;
}
.sec46-play:hover { background: var(--c-primary); color: #fff; transform: scale(1.1); }
.sec46-play.playing { background: #E11D48; color: #fff; animation: sec46Pulse 1.2s infinite; }

/* 儿歌行 */
.sec46-song .sec46-line { display: flex; gap: 10px; padding: 10px 0; border-top: 1px dashed var(--c-border, #E5E7EB); }
.sec46-song .sec46-line:first-of-type { border-top: none; }
.sec46-line-play { margin-top: 2px; }
.sec46-line-body { flex: 1; min-width: 0; }
.sec46-song .sec46-uz-text { font-size: 16.5px; }
.sec46-song .sec46-zh { margin-top: 4px; }
.sec46-songs-head h2 { color: #DB2777; }
.sec46-songs-head .sec46-uz { color: #DB2777; background: #FDF2F8; }

/* 深色模式 */
html.dark .sec46-uz { color: #A5B4FC; background: rgba(99,102,241,.15); }
html.dark .sec46-song-idx { background: rgba(236,72,153,.12); }
html.dark .sec46-songs-head h2 { color: #F9A8D4; }
html.dark .sec46-songs-head .sec46-uz { color: #F9A8D4; background: rgba(236,72,153,.15); }
html.dark .sec46-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.35); }

/* 移动端 */
@media (max-width: 920px) {
  .sec46-list { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .sec46-head h2 { font-size: 22px; }
  .sec46-card { padding: 14px 14px 4px; }
  .sec46-card-head { flex-wrap: wrap; }
  .sec46-playall { padding: 6px 12px; }
}

/* ================================================================
   v47：插图文案 + 音符键演唱模式 + 八音琴键
   ================================================================ */
/* 卡片插图横幅 */
.sec46-ill { display: flex; align-items: center; gap: 14px; margin: 0 0 14px;
  padding: 12px 18px; border-radius: 14px;
  background: linear-gradient(135deg, #FFF8F0 0%, #FDF2F8 100%);
  border: 1px solid #FDE3EE; }
.sec46-ill-song { background: linear-gradient(135deg, #FDF7FF 0%, #FFF6F0 100%);
  border-color: #F3E3FD; }
.sec46-ill-emoji { font-size: 34px; line-height: 1;
  filter: drop-shadow(0 3px 6px rgba(236,72,153,.25)); }
.sec46-ill-cap { font-size: 13.5px; color: #9A5B74; letter-spacing: .5px; line-height: 1.5; }

/* 音符键（演唱模式） */
.sec46-sing { display: inline-flex; align-items: center; gap: 6px; margin-left: auto;
  padding: 7px 14px; border: none; border-radius: 999px; cursor: pointer;
  font-size: 13px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #F472B6, #FB923C);
  box-shadow: 0 3px 10px rgba(244,114,182,.35); transition: transform .15s, box-shadow .15s; }
.sec46-sing:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(244,114,182,.45); }
.sec46-sing .sec46-sing-icon { font-size: 14px; }
.sec46-sing.playing { animation: sec46Pulse 1.2s infinite;
  background: linear-gradient(135deg, #E11D48, #DB2777); }

/* 卡拉OK：正在演唱的歌词行 */
.sec46-line.singing { background: linear-gradient(90deg, #FFF0F7, #FFFDF7);
  border-left: 3px solid #F472B6; padding-left: 10px; border-radius: 8px;
  box-shadow: 0 2px 8px rgba(244,114,182,.12); }
.sec46-line.singing .sec46-uz { color: #DB2777; font-weight: 600; }

/* 八音琴键 */
.sec47-keys { display: flex; gap: 6px; margin: 12px 0 4px; flex-wrap: wrap; }
.sec47-key { min-width: 46px; padding: 10px 0 22px; border: 1px solid #FBCFE8;
  border-radius: 0 0 10px 10px; cursor: pointer; font-size: 13px; font-weight: 700;
  color: #9D174D; background: linear-gradient(180deg, #fff, #FDF2F8);
  box-shadow: 0 4px 0 #F9A8D4; transition: transform .08s, box-shadow .08s; }
.sec47-key:active { transform: translateY(3px); box-shadow: 0 1px 0 #F9A8D4; }
.sec47-key:hover { background: linear-gradient(180deg, #fff, #FCE7F3); }

/* 深色模式适配 */
html.dark .sec46-ill { background: rgba(56,32,52,.5); border-color: rgba(236,72,153,.25); }
html.dark .sec46-ill-cap { color: #F9A8D4; }
html.dark .sec46-line.singing { background: rgba(236,72,153,.12);
  border-left-color: #F472B6; }
html.dark .sec47-key { background: linear-gradient(180deg, #3A2A36, #2D1F2B);
  color: #F9A8D4; border-color: rgba(236,72,153,.3); box-shadow: 0 4px 0 rgba(236,72,153,.35); }

@media (max-width: 640px) {
  .sec46-ill { padding: 10px 12px; }
  .sec46-ill-emoji { font-size: 26px; }
  .sec47-key { min-width: 36px; padding: 8px 0 16px; font-size: 11px; }
}

/* ---------- 词汇记忆法（v49） ---------- */
.zh-audio-btn {
  width: 26px; height: 26px; border-radius: 50%; border: none;
  cursor: pointer; font-size: 13px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .15s, box-shadow .15s, background .2s;
  background: var(--c-primary-bg);
  color: var(--c-primary);
  padding: 0;
}
.zh-audio-btn:hover {
  background: var(--grad-brand); color: #fff;
  transform: scale(1.08); box-shadow: 0 4px 12px rgba(99,102,241,.4);
}
.zh-audio-btn.playing {
  background: linear-gradient(135deg, #F472B6, #EC4899);
  color: #fff; box-shadow: 0 4px 12px rgba(236,72,153,.4);
}
.memory-card {
  margin: 14px 0; padding: 12px 14px;
  border-radius: var(--c-radius);
  background: var(--c-surface);
  border: 1px solid var(--c-border, rgba(99,102,241,.15));
}
.mc-title {
  font-size: 16px; font-weight: 700; color: var(--c-text);
  margin-bottom: 6px;
}
.mc-zh-row {
  display: flex; align-items: flex-start; gap: 8px; justify-content: space-between;
  margin-bottom: 10px;
}
.mc-zh {
  font-size: 14px; line-height: 1.7; color: var(--c-text-2);
  flex: 1; min-width: 0;
}
.mc-examples { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.mc-ex {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: var(--c-bg, rgba(99,102,241,.04));
  border-radius: 10px;
}
.mc-ex-text { flex: 1; min-width: 0; }
.mc-ex-uz {
  font-size: 14.5px; font-weight: 600; color: var(--c-primary);
  line-height: 1.5; word-break: break-word;
}
.mc-ex-note {
  font-weight: 400; color: var(--c-text-2); margin-left: 4px;
}
.mc-ex-zh-row {
  display: flex; align-items: center; gap: 6px; margin-top: 3px;
  justify-content: space-between;
}
.mc-ex-zh {
  font-size: 13.5px; color: var(--c-text-2); line-height: 1.5;
  flex: 1; min-width: 0;
}
.audio-btn-host,
.mc-zh-audio-host,
.mc-ex-zh-audio-host {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
}
.audio-btn-host .audio-btn,
.mc-zh-audio-host .zh-audio-btn,
.mc-ex-zh-audio-host .zh-audio-btn {
  width: 28px; height: 28px; border-radius: 50%; border: none;
  cursor: pointer; font-size: 14px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .15s, box-shadow .15s, background .2s;
  background: var(--c-primary-bg);
  color: var(--c-primary);
}
.mc-zh-audio-host .zh-audio-btn,
.mc-ex-zh-audio-host .zh-audio-btn {
  width: 26px; height: 26px; font-size: 13px;
}
.audio-btn-host .audio-btn:hover,
.mc-zh-audio-host .zh-audio-btn:hover,
.mc-ex-zh-audio-host .zh-audio-btn:hover {
  background: var(--grad-brand); color: #fff;
  transform: scale(1.08); box-shadow: 0 4px 12px rgba(99,102,241,.4);
}
.audio-btn-host .audio-btn.playing,
.mc-zh-audio-host .zh-audio-btn.playing,
.mc-ex-zh-audio-host .zh-audio-btn.playing {
  background: linear-gradient(135deg, #F472B6, #EC4899);
  color: #fff;
  box-shadow: 0 4px 12px rgba(236,72,153,.4);
}

@media (max-width: 640px) {
  .mc-ex { padding: 6px 8px; }
  .mc-ex-uz { font-size: 13.5px; }
  .mc-ex-zh { font-size: 12.5px; }
}

/* ---------- 语法/会话/字母/每日 · 中文例句与讲解标准发音按钮（v50） ---------- */
.ge-zh .zh-audio-btn, .dialogue-zh .zh-audio-btn,
.dw-zh .zh-audio-btn, .dw-sent-zh .zh-audio-btn,
.alp42-sound-p .zh-audio-btn, .alp42-stroke-text .zh-audio-btn,
.alp42-row-sound .zh-audio-btn {
  width: 22px; height: 22px; font-size: 12px;
  margin-left: 6px; vertical-align: middle; flex: none;
}
.ge-zh, .dialogue-zh, .dw-zh, .dw-sent-zh { line-height: 1.6; }
.alp42-ex-zh {
  display: inline-flex; align-items: center; gap: 6px;
  vertical-align: middle;
}
.alp42-ex-zh .zh-audio-btn { width: 20px; height: 20px; font-size: 11px; margin-left: 0; }
.alp42-row-sound .zh-audio-btn { margin-left: 4px; }
@media (max-width: 640px) {
  .alp42-sound-p .zh-audio-btn, .alp42-stroke-text .zh-audio-btn,
  .ge-zh .zh-audio-btn, .dialogue-zh .zh-audio-btn,
  .dw-zh .zh-audio-btn, .dw-sent-zh .zh-audio-btn { width: 20px; height: 20px; font-size: 11px; }
}

/* ==========================================================================
   v51 — 导航小字注释 + 三个新栏目（听歌学乌语 / 乌国生活指南 / FAQ）
   ========================================================================== */

/* ---------- 导航：条目支持主标题 + 小字注释 ---------- */
#navLinks.nav-links { flex-wrap: wrap; }
.nav-link {
  display: inline-flex; flex-direction: column; align-items: flex-start;
  justify-content: center; gap: 1px; line-height: 1.2; text-align: left;
}
.nav-link .nav-t { font-size: 14px; font-weight: 600; line-height: 1.25; }
.nav-link .nav-sub {
  font-size: 10px; font-weight: 400; opacity: .72;
  letter-spacing: .2px; white-space: nowrap; max-width: 240px;
}
.nav-link.active .nav-sub { opacity: .95; }
@media (max-width: 768px) {
  .nav-link .nav-sub { white-space: normal; max-width: none; }
}

/* ---------- 栏目公共头部 ---------- */
.sls-tip, .lg-foot, .faq-foot {
  margin-top: 12px; padding: 10px 14px; border-radius: 12px;
  background: var(--c-primary-bg); color: var(--c-text-2);
  font-size: 13px; line-height: 1.7;
}
html.dark .sls-tip, html.dark .lg-foot, html.dark .faq-foot {
  color: var(--c-text-2);
}

/* ---------- 听歌学乌语 ---------- */
.sls-list { display: flex; flex-direction: column; gap: 22px; margin-top: 8px; }
.sls-card {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--c-radius-lg); padding: 20px 22px;
  box-shadow: var(--c-shadow);
}
.sls-card-head { display: flex; align-items: center; gap: 12px; }
.sls-emoji {
  font-size: 34px; line-height: 1; flex: none;
  width: 56px; height: 56px; border-radius: 16px;
  background: var(--grad-brand-soft);
  display: inline-flex; align-items: center; justify-content: center;
}
.sls-titles h3 {
  font-size: 22px; font-weight: 800; color: var(--c-text); margin: 0;
  letter-spacing: .3px;
}
.sls-zh-title {
  font-size: 13px; color: var(--c-text-2); margin-top: 3px;
}
.sls-song-intro {
  margin: 14px 0 6px; padding: 10px 14px; border-radius: 12px;
  background: var(--c-surface-alt); border: 1px dashed var(--c-border);
  color: var(--c-text-2); font-size: 13.5px; line-height: 1.75;
}
.sls-seg { margin-top: 14px; }
.sls-seg-label {
  display: inline-block; font-size: 12.5px; font-weight: 700;
  color: var(--c-primary); background: var(--c-primary-bg);
  border-radius: 999px; padding: 4px 12px; margin-bottom: 8px;
}
.sls-line {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 7px 4px; border-bottom: 1px dashed var(--c-border);
}
.sls-line:last-child { border-bottom: none; }
.sls-line-play, .sls-word .audio-btn {
  flex: none; width: 30px; height: 30px; border-radius: 50%; border: none;
  cursor: pointer; font-size: 14px; line-height: 1; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-primary-bg); color: var(--c-primary);
  transition: transform .15s, box-shadow .15s, background .2s;
  margin-top: 1px;
}
.sls-line-play:hover, .sls-word .audio-btn:hover {
  background: var(--grad-brand); color: #fff;
  transform: scale(1.08); box-shadow: 0 4px 12px rgba(99,102,241,.4);
}
.sls-line-play.playing, .sls-word .audio-btn.playing {
  background: linear-gradient(135deg, #F472B6, #EC4899);
  color: #fff; box-shadow: 0 4px 12px rgba(236,72,153,.4);
}
.sls-line-body { flex: 1; min-width: 0; }
.sls-uz {
  font-size: 16.5px; font-weight: 600; color: var(--c-text);
  line-height: 1.5; word-break: break-word;
}
.sls-zh {
  font-size: 13.5px; color: var(--c-text-2); line-height: 1.5; margin-top: 2px;
}
.sls-words, .sls-quiz { margin-top: 18px; }
.sls-words-title, .sls-quiz-title {
  font-size: 15.5px; font-weight: 800; color: var(--c-text);
  margin: 0 0 10px; padding-bottom: 8px;
  border-bottom: 2px solid var(--grad-brand);
}
.sls-words-title { border-bottom: 2px solid var(--c-border); }
.sls-word-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 8px 14px;
}
.sls-word {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 10px; border-radius: 10px;
  background: var(--c-surface-alt); border: 1px solid var(--c-border);
}
.sls-word-uz { font-size: 14.5px; font-weight: 700; color: var(--c-primary); }
.sls-word-sep { color: var(--c-text-3); font-size: 12px; }
.sls-word-zh { flex: 1; min-width: 0; font-size: 13px; color: var(--c-text-2); }
.sls-q { margin-top: 12px; }
.sls-q-text { font-size: 14.5px; font-weight: 600; color: var(--c-text); margin: 0 0 8px; line-height: 1.6; }
.sls-q-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.sls-q-opt {
  border: 1px solid var(--c-border); background: var(--c-surface-alt);
  color: var(--c-text); font-size: 13.5px; line-height: 1.5;
  border-radius: 999px; padding: 7px 14px; cursor: pointer;
  transition: var(--c-transition); text-align: left;
}
.sls-q-opt:hover:not(:disabled) {
  border-color: var(--c-primary-light); color: var(--c-primary);
  background: var(--c-primary-bg);
}
.sls-q-opt.correct, .sls-q-opt.hit {
  background: var(--c-secondary); color: #fff; border-color: var(--c-secondary);
  box-shadow: 0 4px 12px rgba(5,150,105,.35);
}
.sls-q-opt.wrong {
  background: var(--c-red); color: #fff; border-color: var(--c-red);
  box-shadow: 0 4px 12px rgba(225,29,72,.3);
}
.sls-q-opt:disabled { cursor: default; opacity: .85; }
.sls-q-fb {
  margin: 8px 0 0; padding: 9px 12px; border-radius: 10px;
  background: var(--c-secondary-bg); color: var(--c-secondary);
  font-size: 13px; line-height: 1.7;
}
html.dark .sls-q-fb { color: var(--c-secondary-light); }
@media (max-width: 640px) {
  .sls-card { padding: 14px 14px; }
  .sls-emoji { width: 46px; height: 46px; font-size: 26px; }
  .sls-titles h3 { font-size: 19px; }
  .sls-uz { font-size: 15px; }
  .sls-word-list { grid-template-columns: 1fr; }
  .sls-q-opt { width: 100%; }
}

/* ---------- 乌国生活指南 ---------- */
.lg-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px; margin-top: 8px;
}
.lg-card {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--c-radius); padding: 18px 18px 14px;
  box-shadow: var(--c-shadow);
  display: flex; flex-direction: column;
}
.lg-card-title {
  font-size: 17px; font-weight: 800; color: var(--c-text); margin: 0 0 10px;
  padding-bottom: 10px; border-bottom: 2px solid var(--c-border);
  display: flex; align-items: center; gap: 6px;
}
.lg-list { margin: 0; padding: 0; list-style: none; }
.lg-list li {
  position: relative; padding: 0 0 8px 18px;
  font-size: 13.5px; line-height: 1.75; color: var(--c-text-2);
}
.lg-list li::before {
  content: ''; position: absolute; left: 2px; top: 9px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--grad-brand);
}
.lg-foot { background: var(--c-accent-bg); }
@media (max-width: 640px) {
  .lg-grid { grid-template-columns: 1fr; }
}

/* ---------- FAQ 常见问题 ---------- */
.faq-list { margin-top: 8px; display: flex; flex-direction: column; gap: 10px; }
.faq-item {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--c-radius); overflow: hidden;
  box-shadow: var(--c-shadow);
}
.faq-q {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border: none; background: transparent;
  cursor: pointer; color: var(--c-text); text-align: left;
}
.faq-q:hover { background: var(--c-primary-bg); }
.faq-q-num {
  flex: none; font-size: 12px; font-weight: 800; color: #fff;
  background: var(--grad-brand); border-radius: 8px;
  padding: 3px 8px; letter-spacing: .5px;
}
.faq-q-text { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; line-height: 1.5; }
.faq-q-arrow { flex: none; color: var(--c-text-3); transition: transform .2s; }
.faq-a { display: none; padding: 0 16px 14px 46px; }
.faq-item.open .faq-a { display: block; }
.faq-a p {
  margin: 0; font-size: 14px; line-height: 1.85; color: var(--c-text-2);
  padding: 12px 14px; border-radius: 10px; background: var(--c-surface-alt);
}
.faq-foot p { margin: 0; font-size: 13.5px; line-height: 1.7; }
.faq-foot { background: var(--c-secondary-bg); }
.faq-foot-wechat { font-weight: 700; color: var(--c-secondary); }
@media (max-width: 640px) {
  .faq-a { padding-left: 16px; }
  .faq-q-text { font-size: 14px; }
}