/* ===== 设计令牌 ===== */
:root {
  --bg: #FAF8F5;
  --bg-card: #FFFFFF;
  --bg-soft: #F3F0EB;
  --ink: #1A1A2E;
  --ink-soft: #4A4A5A;
  --ink-muted: #8A8A9A;
  --primary: #2D6A8F;
  --primary-dark: #1E4F6E;
  --primary-light: #E8F1F7;
  --accent: #E8A838;
  --accent-light: #FDF3E0;
  --success: #4A7C59;
  --success-light: #E8F0EB;
  --error: #C75B5B;
  --error-light: #F7E8E8;
  --border: #E5E1DA;
  --border-strong: #D0CCC4;
  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 1px 3px rgba(26,26,46,0.06), 0 1px 2px rgba(26,26,46,0.04);
  --shadow-md: 0 4px 12px rgba(26,26,46,0.08);
  --font-sans: "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Noto Serif SC", Georgia, "Times New Roman", serif;
  --font-en: Georgia, "Times New Roman", serif;
}

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

html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  min-height: 100vh;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ===== 顶部导航 ===== */
.app-header {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
}

.brand:hover { text-decoration: none; }

.brand-mark {
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  font-size: 0.8rem;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  letter-spacing: 0.5px;
}

.brand-text {
  font-weight: 600;
  font-size: 1rem;
  white-space: nowrap;
}

.header-stats {
  font-size: 0.85rem;
  color: var(--ink-muted);
  white-space: nowrap;
}

.header-stats strong {
  color: var(--primary);
  font-weight: 600;
}

/* ===== 主内容 ===== */
#mainContent {
  max-width: 960px;
  margin: 0 auto;
  padding: 24px 20px 60px;
}

/* ===== 课程列表页 ===== */
.list-header {
  margin-bottom: 24px;
}

.list-title {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 6px;
}

.list-subtitle {
  color: var(--ink-soft);
  font-size: 0.95rem;
  margin-bottom: 16px;
}

.search-box {
  position: relative;
  margin-bottom: 20px;
}

.search-box input {
  width: 100%;
  padding: 12px 16px 12px 42px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  font-size: 0.95rem;
  font-family: var(--font-sans);
  background: var(--bg-card);
  color: var(--ink);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.search-box input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
}

.search-box svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--ink-muted);
}

.progress-bar-wrap {
  margin-bottom: 24px;
}

.progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-bottom: 6px;
}

.progress-track {
  height: 8px;
  background: var(--bg-soft);
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--primary-dark));
  border-radius: 4px;
  transition: width 0.4s ease;
}

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

.lesson-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
  display: block;
  text-decoration: none;
  color: var(--ink);
  position: relative;
}

.lesson-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
  text-decoration: none;
}

.lesson-card.completed {
  border-color: var(--success);
  background: var(--success-light);
}

.lesson-num {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.lesson-title-en {
  font-family: var(--font-en);
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 2px;
  color: var(--ink);
}

.lesson-title-cn {
  font-size: 0.82rem;
  color: var(--ink-soft);
}

.lesson-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
}

.lesson-badge.done {
  background: var(--success);
  color: #fff;
}

.lesson-type-tag {
  display: inline-block;
  font-size: 0.7rem;
  padding: 1px 6px;
  border-radius: 3px;
  margin-top: 6px;
  font-weight: 500;
}

.lesson-type-tag.new {
  background: var(--primary-light);
  color: var(--primary);
}

.lesson-type-tag.practice {
  background: var(--accent-light);
  color: #9A7018;
}

/* ===== 课程详情页 ===== */
.lesson-header {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin-bottom: 12px;
  text-decoration: none;
}

.back-link:hover {
  color: var(--primary);
  text-decoration: none;
}

.lesson-header h1 {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.lesson-header .subtitle {
  font-family: var(--font-en);
  font-size: 1.1rem;
  color: var(--ink-soft);
}

/* Tab 导航 */
.tab-nav {
  display: flex;
  gap: 4px;
  margin-bottom: 24px;
  background: var(--bg-soft);
  padding: 4px;
  border-radius: var(--radius);
  overflow-x: auto;
}

.tab-btn {
  flex: 1;
  min-width: 100px;
  padding: 10px 16px;
  border: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink-soft);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}

.tab-btn:hover {
  color: var(--ink);
}

.tab-btn.active {
  background: var(--bg-card);
  color: var(--primary);
  box-shadow: var(--shadow);
  font-weight: 600;
}

.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ===== 课文领读 ===== */
.reading-intro {
  background: var(--primary-light);
  border-left: 3px solid var(--primary);
  padding: 12px 16px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-bottom: 20px;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.reading-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.reading-item {
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
}

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

.reading-num {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-muted);
  padding-top: 2px;
}

.reading-en {
  font-family: var(--font-en);
  font-size: 1.05rem;
  color: var(--ink);
  margin-bottom: 4px;
  line-height: 1.5;
}

.reading-cn {
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin-bottom: 4px;
}

.reading-note {
  font-size: 0.82rem;
  color: var(--accent);
  background: var(--accent-light);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  display: inline-block;
  margin-top: 2px;
}

/* ===== 测验通用 ===== */
.quiz-info {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.quiz-info-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  font-size: 0.85rem;
}

.quiz-info-item strong {
  color: var(--primary);
  font-weight: 600;
}

.question-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 16px;
}

.question-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
}

.question-num {
  background: var(--primary);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  min-width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.question-text {
  font-size: 0.98rem;
  line-height: 1.6;
  padding-top: 3px;
}

.question-text .blank {
  display: inline-block;
  min-width: 80px;
  border-bottom: 2px solid var(--primary);
  text-align: center;
  font-weight: 600;
  color: var(--primary);
}

/* 填空题输入 */
.fill-input {
  width: 100%;
  max-width: 300px;
  padding: 10px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-family: var(--font-en);
  transition: border-color 0.2s;
}

.fill-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
}

.fill-input.correct {
  border-color: var(--success);
  background: var(--success-light);
}

.fill-input.wrong {
  border-color: var(--error);
  background: var(--error-light);
}

/* 选择题选项 */
.options-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.option-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  font-size: 0.92rem;
}

.option-item:hover {
  border-color: var(--primary);
  background: var(--primary-light);
}

.option-item.selected {
  border-color: var(--primary);
  background: var(--primary-light);
}

.option-item.correct {
  border-color: var(--success);
  background: var(--success-light);
}

.option-item.wrong {
  border-color: var(--error);
  background: var(--error-light);
}

.option-letter {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 600;
  flex-shrink: 0;
  color: var(--ink-soft);
}

.option-item.selected .option-letter {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

.option-item.correct .option-letter {
  border-color: var(--success);
  background: var(--success);
  color: #fff;
}

.option-item.wrong .option-letter {
  border-color: var(--error);
  background: var(--error);
  color: #fff;
}

.option-text {
  font-family: var(--font-en);
}

/* 答案解析 */
.answer-explanation {
  margin-top: 12px;
  padding: 10px 14px;
  background: var(--bg-soft);
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  color: var(--ink-soft);
  display: none;
}

.answer-explanation.show { display: block; }

.answer-explanation .label {
  font-weight: 600;
  color: var(--primary);
  margin-right: 6px;
}

.answer-result {
  font-size: 0.85rem;
  font-weight: 600;
  margin-top: 8px;
  display: none;
}

.answer-result.show { display: block; }
.answer-result.correct { color: var(--success); }
.answer-result.wrong { color: var(--error); }

/* 测验按钮 */
.quiz-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
  flex-wrap: wrap;
}

.btn {
  padding: 10px 24px;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 0.92rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}

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

.btn-primary {
  background: var(--primary);
  color: #fff;
}

.btn-primary:hover { background: var(--primary-dark); }

.btn-secondary {
  background: var(--bg-soft);
  color: var(--ink-soft);
}

.btn-secondary:hover { background: var(--border); }

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 测验结果 */
.quiz-result {
  text-align: center;
  padding: 32px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-top: 24px;
  display: none;
}

.quiz-result.show { display: block; }

.quiz-score {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 4px;
}

.quiz-score-label {
  font-size: 0.9rem;
  color: var(--ink-muted);
  margin-bottom: 16px;
}

.quiz-result-msg {
  font-size: 1rem;
  color: var(--ink-soft);
  margin-bottom: 20px;
}

/* 生词表 */
.vocab-section {
  margin-top: 28px;
}

.vocab-title {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--primary);
  display: inline-block;
}

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

.vocab-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.vocab-word {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
}

.vocab-phonetic {
  font-size: 0.8rem;
  color: var(--ink-muted);
  font-family: var(--font-en);
}

.vocab-pos {
  font-size: 0.75rem;
  color: var(--primary);
  font-style: italic;
}

.vocab-meaning {
  font-size: 0.88rem;
  color: var(--ink-soft);
  width: 100%;
}

/* ===== 空状态 ===== */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--ink-muted);
}

.empty-state svg {
  width: 48px;
  height: 48px;
  margin-bottom: 12px;
  opacity: 0.4;
}

/* ===== 响应式 ===== */
@media (max-width: 640px) {
  .header-inner { padding: 10px 14px; }
  .brand-text { font-size: 0.9rem; }
  .header-stats { font-size: 0.78rem; }
  #mainContent { padding: 16px 14px 40px; }
  .list-title { font-size: 1.3rem; }
  .lesson-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .lesson-card { padding: 10px 12px; }
  .lesson-header h1 { font-size: 1.25rem; }
  .tab-btn { padding: 8px 10px; font-size: 0.82rem; min-width: 80px; }
  .question-card { padding: 14px; }
  .reading-en { font-size: 0.98rem; }
  .vocab-grid { grid-template-columns: 1fr; }
  .quiz-actions { flex-direction: column; }
  .quiz-actions .btn { width: 100%; }
}

@media (max-width: 380px) {
  .lesson-grid { grid-template-columns: 1fr; }
}

/* ===== 语音朗读 TTS ===== */
.tts-bar { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:12px 14px; margin-bottom:18px; box-shadow:var(--shadow); }
.tts-btn { display:inline-flex; align-items:center; gap:7px; border:1px solid var(--border-strong); background:var(--bg-card); color:var(--ink); font-size:0.9rem; font-weight:600; padding:9px 16px; border-radius:999px; cursor:pointer; transition:background .15s,color .15s,border-color .15s; }
.tts-btn svg { width:16px; height:16px; }
.tts-btn:hover { border-color:var(--primary); color:var(--primary); }
.tts-btn-primary { background:var(--primary); border-color:var(--primary); color:#fff; }
.tts-btn-primary:hover { background:var(--primary-dark); border-color:var(--primary-dark); color:#fff; }
.tts-btn-primary.playing { background:#C0473A; border-color:#C0473A; }
.tts-group { display:inline-flex; align-items:center; gap:4px; }
.tts-label { font-size:0.82rem; color:var(--ink-muted); margin-right:2px; }
.tts-chip { border:1px solid var(--border-strong); background:var(--bg-card); color:var(--ink-soft); font-size:0.82rem; padding:5px 12px; border-radius:999px; cursor:pointer; transition:background .15s,color .15s,border-color .15s; }
.tts-chip:hover { border-color:var(--primary); color:var(--primary); }
.tts-chip.active { background:var(--primary); border-color:var(--primary); color:#fff; }
.tts-hint { font-size:0.78rem; color:var(--ink-muted); width:100%; }
.tts-group-voice { gap:6px; }
.tts-voice-sel { max-width:320px; border:1px solid var(--border-strong); background:var(--bg-card); color:var(--ink); font-size:0.84rem; padding:6px 8px; border-radius:8px; cursor:pointer; }
.tts-voice-sel:focus { outline:2px solid var(--primary); outline-offset:1px; }
.tts-voice-test { flex:none; width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--border-strong); background:var(--bg-card); color:var(--primary); border-radius:50%; cursor:pointer; padding:0; }
.tts-voice-test svg { width:15px; height:15px; }
.tts-voice-test:hover { background:var(--primary); color:#fff; border-color:var(--primary); }
.tts-unsupported { background:#FBF1E8; border-left:3px solid #D08A3E; padding:10px 14px; border-radius:0 var(--radius-sm) var(--radius-sm) 0; margin-bottom:18px; font-size:0.85rem; color:#7A5528; }
.reading-en { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.reading-en-text { flex:1; }
.speak-btn { flex:none; width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--border-strong); background:var(--bg-card); color:var(--primary); border-radius:50%; cursor:pointer; transition:background .15s,color .15s,transform .1s; }
.speak-btn svg { width:16px; height:16px; }
.speak-btn:hover { background:var(--primary); color:#fff; border-color:var(--primary); }
.speak-btn:active { transform:scale(.92); }
.reading-item.speaking { background:var(--primary-light); border-radius:var(--radius-sm); margin:0 -10px; padding-left:10px; padding-right:10px; border-bottom-color:transparent; }
.reading-item.speaking + .reading-item { border-top-color:transparent; }
.reading-item.speaking .reading-en-text { color:var(--primary-dark); font-weight:600; }
.reading-item.speaking .speak-btn { background:var(--primary); color:#fff; border-color:var(--primary); animation:ttsPulse 1.2s ease-in-out infinite; }
@keyframes ttsPulse { 0%,100% { box-shadow:0 0 0 0 rgba(45,106,143,.45);} 50% { box-shadow:0 0 0 6px rgba(45,106,143,0);} }
.vocab-speak { flex:none; width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center; border:none; background:transparent; color:var(--primary); border-radius:50%; cursor:pointer; padding:0; }
.vocab-speak svg { width:14px; height:14px; }
.vocab-speak:hover { background:var(--primary-light); }
@media (max-width:640px) { .tts-bar { gap:8px 10px; padding:10px 12px; } .tts-hint { display:none; } .speak-btn { width:30px; height:30px; } .tts-group-voice { width:100%; } .tts-voice-sel { flex:1; max-width:none; min-width:0; } }.tts-status-ok { color: var(--primary); }
.tts-status-err { color: #B0413E !important; font-weight: 600; }
/* ===== 单词练习三模式 ===== */
.mode-bar { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.mode-chip {
  border:1px solid var(--border,#d9dce3); background:#fff; color:var(--text,#333);
  padding:8px 16px; border-radius:999px; font-size:14px; cursor:pointer; transition:all .15s;
}
.mode-chip:hover { border-color:var(--primary,#4a6cf7); color:var(--primary,#4a6cf7); }
.mode-chip.active { background:var(--primary,#4a6cf7); border-color:var(--primary,#4a6cf7); color:#fff; }
.fill-subpanel[hidden] { display:none; }

.dict-toolbar { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
.dict-tip { font-size:13px; color:#8a90a2; }
.dict-prompt { display:flex; align-items:center; gap:10px; font-size:14px; color:#555; }
.dict-card.speaking { border-color:var(--primary,#4a6cf7); box-shadow:0 0 0 2px rgba(74,108,247,.15); }
.dict-slow {
  width:auto !important; min-width:34px; height:30px; padding:0 8px; border-radius:7px;
  font-size:12px; font-weight:700; line-height:1;
}
.mcq-part-title {
  font-size:15px; font-weight:700; color:var(--primary,#4a6cf7); margin:22px 0 12px;
  padding-left:10px; border-left:4px solid var(--primary,#4a6cf7);
}
.wmcq-card .question-text { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* ===== 单词详解弹窗 ===== */
.word-modal-overlay {
  position:fixed; inset:0; z-index:999; display:none;
  align-items:center; justify-content:center; padding:20px;
  background:rgba(20,24,35,.5); backdrop-filter:blur(2px);
}
.word-modal-overlay.open { display:flex; }
.word-modal {
  position:relative; background:#fff; border-radius:16px; width:100%; max-width:540px;
  max-height:88vh; overflow-y:auto; padding:26px 26px 22px; box-shadow:0 24px 60px rgba(0,0,0,.25);
  animation:wmPop .18s ease-out;
}
@keyframes wmPop { from { transform:scale(.96); opacity:0 } to { transform:scale(1); opacity:1 } }
.word-modal-close {
  position:absolute; top:10px; right:14px; border:0; background:transparent;
  font-size:28px; line-height:1; color:#9aa0b0; cursor:pointer; padding:4px 8px;
}
.word-modal-close:hover { color:#333; }
.wm-top { display:flex; gap:18px; align-items:center; }
.wm-emoji {
  flex:0 0 84px; width:84px; height:84px; border-radius:18px; display:flex; align-items:center;
  justify-content:center; font-size:46px; background:linear-gradient(135deg,#eef2ff,#e0f2fe);
  user-select:none;
}
.wm-emoji-fallback { font-size:40px; font-weight:800; color:#4a6cf7; background:linear-gradient(135deg,#eef2ff,#f5f3ff); }
.wm-info { flex:1; min-width:0; }
.wm-word-row { display:flex; align-items:center; gap:10px; }
.wm-word { font-size:26px; font-weight:800; color:#1f2430; }
.wm-phonetic { color:#7a8199; font-size:14px; margin-top:2px; }
.wm-tags { margin-top:8px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.wm-pos-badge {
  background:#eef2ff; color:#4a6cf7; font-size:12px; font-weight:700;
  padding:2px 10px; border-radius:999px;
}
.wm-meaning { font-size:16px; color:#333; }
.wm-sec { margin-top:18px; }
.wm-sec-title { font-size:13px; font-weight:700; color:#8a90a2; margin-bottom:8px; }
.wm-example { background:#f7f8fc; border-radius:10px; padding:12px 14px; }
.wm-example-en { font-size:15px; color:#1f2430; display:flex; align-items:center; gap:8px; }
.wm-example-cn { font-size:13px; color:#7a8199; margin-top:4px; }
.wm-media-actions { display:flex; gap:8px; flex-wrap:wrap; }
.btn-sm { padding:6px 12px !important; font-size:13px !important; text-decoration:none; display:inline-flex; align-items:center; }
a.btn-sm { color:inherit; }
.wm-video-box { margin-top:10px; }
.wm-video-box iframe { width:100%; height:300px; border:0; border-radius:10px; background:#000; }
.wm-media-note { font-size:12px; color:#a0a6b8; margin-top:8px; line-height:1.6; }

/* 生词表中的单词变成可点样式 */
.vocab-word.word-detail-btn { cursor:pointer; border-bottom:1px dashed #b9c2e8; }
.vocab-word.word-detail-btn:hover { color:var(--primary,#4a6cf7); }