/* =============================================================================
   Lingua Atlas v2 — 组件样式层
   ---------------------------------------------------------------------------
   配套 js/ui.js · pages.js · pages-lesson.js · games.js 使用。
   全部基于 styles.css 中已有的设计变量（--bg / --surface / --ink / --line /
   --primary / --accent / --radius / --shadow …），因此深色模式自动生效。
   命名统一使用 la- 前缀，避免与旧样式冲突。
   ============================================================================= */

/* ===========================================================================
   1. 骨架与栅格
   ======================================================================== */
.la-page { max-width: var(--maxw); margin: 0 auto; padding: 28px 20px 60px; }
.la-main { display: block; }

.la-section { margin: 0 0 22px; }
.la-section:last-child { margin-bottom: 0; }

.la-cols { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.la-col-main { min-width: 0; }
.la-col-side { min-width: 0; display: flex; flex-direction: column; gap: 18px; }

.la-page-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.la-back-row { display: flex; gap: 12px; flex-wrap: wrap; }
.la-card-foot { margin-top: 16px; }
.la-card-meta { display: flex; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--ink-faint); margin: 8px 0; }
.la-card-meta span { background: var(--bg-2); border-radius: 999px; padding: 3px 9px; }
.la-card-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.la-muted { color: var(--ink-soft); font-size: 13px; }
.la-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; }

.la-kicker { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-deep); font-weight: 700; margin-bottom: 6px; }
.la-layer-h2, .la-lesson-h2 { font-family: var(--font-display); font-size: 26px; line-height: 1.25; margin: 4px 0 12px; color: var(--ink); }

.la-points { margin: 8px 0 0; padding-left: 20px; }
.la-points li { margin-bottom: 8px; line-height: 1.65; color: var(--ink-soft); }
.la-points.is-warn li { color: var(--danger); }

.la-tip-box {
  background: var(--accent-soft); border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm); padding: 12px 14px; line-height: 1.7;
  color: var(--ink); margin: 6px 0 12px;
}

.la-link-btn {
  background: none; border: 0; padding: 2px 4px; cursor: pointer;
  color: var(--primary); font: inherit; font-size: 13px; font-weight: 600;
  border-radius: var(--radius-sm); transition: background .15s;
}
.la-link-btn:hover { background: var(--primary-soft); }

.la-icon-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-width: 38px; height: 38px; padding: 0 8px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  cursor: pointer; font-size: 16px; line-height: 1; transition: all .16s;
}
.la-icon-btn:hover { background: var(--bg-2); transform: translateY(-1px); }

/* ===========================================================================
   2. 顶栏补充
   ======================================================================== */
.la-skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--primary); color: #fff; padding: 10px 16px;
  border-radius: 0 0 var(--radius) 0; font-weight: 700;
}
.la-skip:focus { left: 0; }

.la-nav-badge {
  margin-left: 5px; background: var(--accent); color: #fff;
  font-size: 10px; font-weight: 800; border-radius: 999px;
  padding: 1px 6px; line-height: 1.5;
}

.la-user { display: flex; align-items: center; }

.la-goal-mini { position: relative; }
.la-ring { width: 26px; height: 26px; transform: rotate(-90deg); }
.la-ring.is-mini { width: 22px; height: 22px; }
.la-ring-bg { fill: none; stroke: var(--line); stroke-width: 3.2; }
.la-ring-fill { fill: none; stroke: var(--accent); stroke-width: 3.2; stroke-linecap: round; transition: stroke-dasharray .5s ease; }
.la-goal-mini-text { font-size: 10px; font-weight: 700; color: var(--ink-soft); }

.la-more { position: relative; }
.la-more-menu {
  position: absolute; right: 0; top: calc(100% + 10px); min-width: 208px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 6px; opacity: 0; visibility: hidden;
  transform: translateY(-6px); transition: all .18s; z-index: 60;
}
.la-more-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.la-more-head { font-size: 11px; color: var(--ink-faint); padding: 8px 10px 6px; border-bottom: 1px solid var(--line-soft); margin-bottom: 4px; }
.la-more-menu a {
  display: flex; align-items: center; gap: 9px; padding: 9px 10px;
  border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; font-size: 13.5px;
}
.la-more-menu a:hover { background: var(--bg-2); }
.la-more-menu a span { width: 18px; text-align: center; }

/* ===========================================================================
   3. 移动端底栏
   ======================================================================== */
.la-tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 7px 0 6px; color: var(--ink-faint); text-decoration: none;
  font-size: 10.5px; font-weight: 600; position: relative;
}
.la-tab.active { color: var(--accent-deep); }
.la-tab.active::before {
  content: ''; position: absolute; top: 0; width: 26px; height: 3px;
  border-radius: 0 0 3px 3px; background: var(--accent);
}
.la-tab-icon { font-size: 20px; line-height: 1; position: relative; }
.la-tab-label { letter-spacing: .02em; }
.la-tab-badge {
  position: absolute; top: -2px; right: -8px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--danger); border: 1.5px solid var(--surface);
}

/* ===========================================================================
   4. 模态 / 抽屉
   ======================================================================== */
body.la-modal-open { overflow: hidden; }

.la-modal-mask {
  position: fixed; inset: 0; z-index: 300; background: rgba(15, 20, 24, .52);
  backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center;
  padding: 20px; animation: laFade .18s ease;
}
.la-modal-mask.is-sheet { align-items: flex-end; padding: 0; }

.la-modal {
  background: var(--surface); border-radius: var(--radius-lg); width: 100%;
  max-width: 560px; max-height: 88vh; display: flex; flex-direction: column;
  box-shadow: var(--shadow-lg); border: 1px solid var(--line);
  animation: laPop .22s cubic-bezier(.2, .9, .3, 1.2);
}
.la-modal.is-wide { max-width: 760px; }
.la-modal.is-sheet { border-radius: var(--radius-lg) var(--radius-lg) 0 0; max-height: 92vh; animation: laSlide .24s ease; }

.la-modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 18px 12px; border-bottom: 1px solid var(--line-soft); flex-shrink: 0;
}
.la-modal-head h3 { margin: 0; font-family: var(--font-display); font-size: 19px; }
.la-modal-body { padding: 16px 18px 22px; overflow-y: auto; -webkit-overflow-scrolling: touch; }

@keyframes laFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes laPop { from { opacity: 0; transform: translateY(14px) scale(.97) } to { opacity: 1; transform: none } }
@keyframes laSlide { from { transform: translateY(100%) } to { transform: none } }

/* ===========================================================================
   5. 搜索面板
   ======================================================================== */
.la-search-mask {
  position: fixed; inset: 0; z-index: 320; background: rgba(15, 20, 24, .5);
  backdrop-filter: blur(4px); display: flex; justify-content: center;
  padding: 8vh 18px 18px; animation: laFade .16s ease;
}
.la-search-panel {
  width: 100%; max-width: 660px; max-height: 76vh; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden;
  animation: laPop .2s ease;
}
.la-search-bar { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line-soft); }
.la-search-ico { font-size: 17px; }
.la-search-bar input, .la-search-input {
  flex: 1; border: 0; background: none; font: inherit; font-size: 15.5px; color: var(--ink); outline: none;
}
.la-search-results { overflow-y: auto; padding: 8px; }
.la-search-hint { padding: 26px 16px; text-align: center; color: var(--ink-faint); font-size: 13.5px; }
.la-search-item {
  display: flex; align-items: center; gap: 11px; padding: 11px 12px;
  border-radius: var(--radius); cursor: pointer; transition: background .14s;
}
.la-search-item:hover, .la-search-item:focus-visible { background: var(--bg-2); outline: none; }
.la-search-flag { font-size: 20px; flex-shrink: 0; }
.la-search-main { flex: 1; min-width: 0; }
.la-search-word { font-weight: 700; font-size: 15px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.la-search-pr { font-weight: 500; font-size: 12px; color: var(--ink-faint); }
.la-search-m { font-size: 12.5px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.la-search-tag { font-size: 10.5px; color: var(--ink-faint); border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; flex-shrink: 0; }

/* ===========================================================================
   6. 词条抽屉
   ======================================================================== */
.la-ws-hero { padding-bottom: 6px; border-bottom: 1px solid var(--line-soft); margin-bottom: 12px; }
.la-ws-top { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-faint); }
.la-ws-pos { background: var(--primary-soft); color: var(--primary); border-radius: 999px; padding: 2px 9px; font-weight: 700; }
.la-ws-word-row { display: flex; align-items: center; gap: 12px; margin: 8px 0 4px; }
.la-ws-word { font-family: var(--font-display); font-size: 34px; line-height: 1.15; margin: 0; word-break: break-word; }
.la-ws-pr { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.la-ws-pr-label { font-size: 11px; color: var(--ink-faint); border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px; }
.la-ws-pr-value { font-size: 15px; color: var(--primary); font-weight: 600; }
.la-ws-meaning { font-size: 17px; line-height: 1.6; margin-top: 10px; color: var(--ink); }

.la-ws-block { margin-top: 16px; }
.la-ws-block.la-mistake-block .la-fd-value { color: var(--danger); }
.la-ws-label { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); font-weight: 700; margin-bottom: 6px; }
.la-ws-value { font-size: 14px; line-height: 1.7; color: var(--ink-soft); }
.la-ws-ex { padding: 9px 0; border-bottom: 1px dashed var(--line-soft); }
.la-ws-ex:last-child { border-bottom: 0; }
.la-ws-ex-t { font-size: 15px; color: var(--ink); font-weight: 600; }
.la-ws-ex-tr { font-size: 13px; color: var(--ink-faint); margin-top: 3px; }
.la-ws-srs { font-size: 13px; }
.la-ws-srs.is-muted { color: var(--ink-faint); }

.la-ws-actions { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.la-ws-actions .btn { flex: 1; min-width: 130px; }

/* ===========================================================================
   7. 通用小组件
   ======================================================================== */
.la-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.la-chip {
  display: inline-block; font-size: 12.5px; padding: 4px 10px; border-radius: 999px;
  background: var(--bg-2); color: var(--ink-soft); border: 1px solid var(--line-soft);
}
.la-chip.is-syn { background: rgba(16, 185, 129, .12); color: #047857; border-color: rgba(16, 185, 129, .3); }
.la-chip.is-ant { background: rgba(220, 38, 38, .1); color: var(--danger); border-color: rgba(220, 38, 38, .26); }
.la-chip.is-tag { background: var(--accent-soft); color: var(--accent-deep); border-color: rgba(217, 119, 6, .26); }

.la-bar-wrap { margin: 8px 0; }
.la-bar-label { font-size: 12.5px; color: var(--ink-faint); margin-top: 6px; }

.la-empty-action { margin-top: 14px; }

.la-input {
  width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface-2); color: var(--ink); font: inherit; font-size: 14px;
  transition: border-color .15s, box-shadow .15s;
}
.la-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(26, 58, 74, .1); }
.la-input.la-select { cursor: pointer; }
.la-form { display: flex; flex-direction: column; gap: 12px; }
.la-form-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.la-form-row > .la-input { flex: 1; min-width: 160px; }
.la-label { font-size: 13px; font-weight: 600; color: var(--ink-soft); min-width: 128px; }
.la-check { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--ink-soft); cursor: pointer; }
.la-check input { width: 17px; height: 17px; accent-color: var(--primary); }
.la-range { flex: 1; min-width: 180px; accent-color: var(--accent); }

.la-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.la-seg-btn { border: 0; background: var(--surface); padding: 7px 15px; font: inherit; font-size: 13px; cursor: pointer; color: var(--ink-soft); }
.la-seg-btn.is-active { background: var(--primary); color: #fff; font-weight: 700; }

.la-warn {
  border-left: 4px solid var(--warning); background: rgba(245, 158, 11, .08);
  border-radius: var(--radius); padding: 16px 18px;
}
.la-warn h3 { margin: 0 0 8px; font-size: 16px; }
.la-warn p, .la-warn ul { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--ink-soft); }
.la-warn + .card { margin-top: 16px; }

.la-danger { border-top: 1px dashed var(--line); padding-top: 14px; margin-top: 4px; }
.la-danger h4 { margin: 0 0 6px; font-size: 14.5px; color: var(--danger); }
.la-danger p { margin: 0 0 12px; font-size: 13px; color: var(--ink-soft); line-height: 1.7; }
.la-danger-btn { border-color: rgba(220, 38, 38, .4) !important; color: var(--danger) !important; }
.la-danger-btn:hover { background: rgba(220, 38, 38, .08) !important; }

.la-about-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 12px; margin: 6px 0 14px; }
.la-about-grid > div { background: var(--bg-2); border-radius: var(--radius); padding: 14px 10px; text-align: center; }
.la-about-grid strong { display: block; font-family: var(--font-display); font-size: 24px; color: var(--primary); }
.la-about-grid span { font-size: 12px; color: var(--ink-faint); }

.la-crumb { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 13px; color: var(--ink-faint); margin-bottom: 14px; }
.la-crumb a { color: var(--primary); text-decoration: none; }
.la-crumb a:hover { text-decoration: underline; }
.la-crumb i { font-style: normal; opacity: .5; }

.la-crash h2 { margin-top: 0; font-family: var(--font-display); }
.la-crash-msg {
  background: var(--bg-2); border-radius: var(--radius); padding: 12px;
  font-size: 12.5px; overflow-x: auto; color: var(--danger); white-space: pre-wrap; word-break: break-word;
}

/* ===========================================================================
   8. 页脚
   ======================================================================== */
.la-footer { border-top: 1px solid var(--line-soft); margin-top: 46px; padding: 20px 0 12px; }
.la-footer-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0 20px;
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  font-size: 12px; color: var(--ink-faint);
}
.la-footer-keys kbd {
  background: var(--surface); border: 1px solid var(--line); border-bottom-width: 2px;
  border-radius: 5px; padding: 1px 6px; font-size: 11px; font-family: inherit; margin: 0 1px;
}

/* ===========================================================================
   9. 仪表盘
   ======================================================================== */
.la-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 26px;
  align-items: center; padding: 30px 30px 28px; border-radius: var(--radius-xl, 26px);
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-deep) 100%);
  color: #F7F2E8; box-shadow: var(--shadow); margin-bottom: 22px;
}
.la-hero-left { min-width: 0; }
.la-hero .hero-greeting { font-size: 13.5px; opacity: .82; letter-spacing: .04em; }
.la-hero .hero-title { font-family: var(--font-display); font-size: 33px; line-height: 1.22; margin: 8px 0 10px; color: #fff; }
.la-hero .hero-title em { font-style: normal; color: var(--accent); }
.la-hero .hero-sub { font-size: 13.5px; opacity: .85; margin: 0; }
.la-hero .hero-sub strong { color: #fff; font-weight: 700; }
.la-hero .hero-stats { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 20px; }
.la-hero .stat-bubble { display: flex; flex-direction: column; }
.la-hero .stat-num { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: #fff; }
.la-hero .stat-label { font-size: 11.5px; opacity: .72; }
.la-hero-right { text-align: center; }

.la-goal-ring { position: relative; width: 96px; height: 96px; margin: 0 auto; }
.la-goal-ring.is-lg { width: 136px; height: 136px; }
.la-goal-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.la-goal-ring .la-ring-bg { stroke: rgba(255, 255, 255, .24); stroke-width: 2.6; }
.la-goal-ring .la-ring-fill { stroke: var(--accent); stroke-width: 2.6; }
.la-goal-ring-text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.la-goal-ring-text strong { font-family: var(--font-display); font-size: 24px; color: #fff; line-height: 1.1; }
.la-goal-ring.is-lg .la-goal-ring-text strong { font-size: 32px; }
.la-goal-ring-text span { font-size: 11px; opacity: .75; }
.la-goal-hint { font-size: 12px; opacity: .8; margin-top: 8px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.la-goal-hint .la-link-btn { color: var(--accent); font-size: 12px; }
.la-goal-hint .la-link-btn:hover { background: rgba(255, 255, 255, .12); }

.la-continue { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; border-left: 5px solid var(--card-accent, var(--accent)); }
.la-continue-sub { font-size: 12.5px; color: var(--ink-faint); margin-top: 6px; }
.la-continue-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.la-due-list { display: flex; flex-direction: column; }
.la-due-item {
  display: flex; align-items: center; gap: 12px; padding: 11px 6px;
  border-bottom: 1px solid var(--line-soft); cursor: pointer; transition: background .14s;
}
.la-due-item:last-child { border-bottom: 0; }
.la-due-item:hover { background: var(--bg-2); }
.la-due-flag { font-size: 19px; }
.la-due-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.la-due-main strong { font-size: 15px; }
.la-due-main span { font-size: 12.5px; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.la-due-reason { font-size: 11px; color: var(--accent-deep); background: var(--accent-soft); border-radius: 999px; padding: 2px 9px; flex-shrink: 0; }

.la-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.la-quick-item {
  display: flex; align-items: center; gap: 10px; padding: 13px 12px; border-radius: var(--radius);
  background: var(--bg-2); text-decoration: none; color: var(--ink); transition: transform .16s, background .16s;
}
.la-quick-item:hover { transform: translateY(-2px); background: var(--surface-2); box-shadow: var(--shadow-sm); }
.la-quick-item > span { font-size: 21px; }
.la-quick-item strong { display: block; font-size: 13.5px; }
.la-quick-item em { font-style: normal; font-size: 11.5px; color: var(--ink-faint); }

.la-weak-bar { height: 7px; border-radius: 999px; background: var(--bg-2); overflow: hidden; flex: 1; margin: 0 12px; }
.la-weak-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--danger), var(--accent)); }

/* 统计格 */
.la-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)); gap: 12px; }
.la-stat-cell { background: var(--bg-2); border-radius: var(--radius); padding: 14px 10px; text-align: center; }
.la-stat-cell strong { display: block; font-family: var(--font-display); font-size: 23px; color: var(--ink); line-height: 1.2; }
.la-stat-cell span { font-size: 11.5px; color: var(--ink-faint); }

/* 周柱状图 */
.la-week { display: flex; gap: 7px; align-items: flex-end; height: 116px; padding-top: 8px; }
.la-week-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; }
.la-week-bar { flex: 1; width: 100%; display: flex; align-items: flex-end; }
.la-week-bar i { display: block; width: 100%; border-radius: 7px 7px 3px 3px; background: linear-gradient(180deg, var(--accent), var(--accent-deep)); min-height: 3px; transition: height .4s ease; }
.la-week-label { font-size: 10.5px; color: var(--ink-faint); margin-top: 6px; }

/* 热力图 */
.la-heatmap { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.la-heat { display: block; aspect-ratio: 1; border-radius: 3px; background: var(--bg-2); }
.la-heat.lv0 { background: var(--bg-2); }
.la-heat.lv1 { background: rgba(217, 119, 6, .28); }
.la-heat.lv2 { background: rgba(217, 119, 6, .5); }
.la-heat.lv3 { background: rgba(217, 119, 6, .74); }
.la-heat.lv4 { background: var(--accent-deep); }
.la-heat-legend { display: flex; align-items: center; gap: 4px; margin-top: 10px; font-size: 11px; color: var(--ink-faint); }
.la-heat-legend .la-heat { width: 12px; height: 12px; }

/* ===========================================================================
   10. 课程
   ======================================================================== */
.la-lang-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; margin-bottom: 18px; }
.la-lang-card {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 13px 8px 11px; border-radius: var(--radius); cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink);
  font: inherit; transition: all .16s; position: relative; overflow: hidden;
}
.la-lang-card::after { content: ''; position: absolute; inset: 0 auto auto 0; height: 3px; width: 100%; background: var(--lang-accent, var(--accent)); opacity: .32; }
.la-lang-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--lang-accent, var(--accent)); }
.la-lang-card.is-active { background: var(--lang-soft, var(--primary-soft)); border-color: var(--lang-accent, var(--accent)); box-shadow: var(--shadow); }
.la-lang-flag { font-size: 25px; }
.la-lang-name { font-size: 13.5px; font-weight: 700; }
.la-lang-native { font-size: 11px; color: var(--ink-faint); }
.la-lang-bar { width: 70%; height: 4px; border-radius: 999px; background: var(--bg-2); overflow: hidden; margin-top: 5px; }
.la-lang-bar i { display: block; height: 100%; background: var(--lang-accent, var(--accent)); border-radius: 999px; }
.la-lang-pct { font-size: 10.5px; color: var(--ink-faint); }

.la-script-note { margin-bottom: 20px; }
.la-script-head { font-weight: 700; font-size: 14.5px; margin-bottom: 8px; }
.la-script-note p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.75; color: var(--ink-soft); }

.la-level-progress { margin-left: auto; font-size: 12.5px; color: var(--ink-faint); font-weight: 700; }
.la-done-mark {
  position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--success); color: #fff; font-size: 13px; display: grid; place-items: center;
}
.course-card { position: relative; }
.course-card.is-done { border-color: rgba(16, 185, 129, .4); }

.la-hero-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }

/* ===========================================================================
   11. 课时（五种课型共用）
   ======================================================================== */
.la-lesson-bar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 14px; padding: 12px 20px;
  background: var(--surface); border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.la-lesson-bar .back-btn { flex-shrink: 0; }
.la-lesson-info { flex: 1; min-width: 0; }
.la-lesson-title { font-weight: 700; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.la-lesson-sub { font-size: 12px; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.la-lesson-progress { display: flex; align-items: center; gap: 9px; width: 190px; flex-shrink: 0; }
.la-lesson-progress .progress-bar { flex: 1; }
.la-lesson-pct { font-size: 11.5px; font-weight: 700; color: var(--ink-soft); min-width: 34px; text-align: right; }
.la-lesson-body { padding-top: 22px; }

/* 单词卡 */
.la-flash { max-width: 720px; margin: 0 auto; }
.la-flash-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; font-size: 12.5px; color: var(--ink-faint); }
.la-flash-count { font-weight: 800; color: var(--accent-deep); }
.la-flash-card {
  padding: 26px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.fc-front { text-align: center; }
.fc-word { font-family: var(--font-display); font-size: 46px; line-height: 1.18; margin: 14px 0 12px; word-break: break-word; }
.fc-actions { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.fc-hint { font-size: 12.5px; color: var(--ink-faint); margin-top: 14px; }
.fc-pr { text-align: center; font-size: 15px; color: var(--primary); margin: 6px 0 4px; display: flex; align-items: center; justify-content: center; gap: 9px; flex-wrap: wrap; }
.fc-pr span { font-size: 11px; color: var(--ink-faint); border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px; }
.fc-example { padding: 9px 0; border-bottom: 1px dashed var(--line-soft); }
.fc-example:last-child { border-bottom: 0; }
.fc-ex-t { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.fc-ex-tr { font-size: 12.5px; color: var(--ink-faint); margin-top: 3px; }
.fc-back { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line-soft); text-align: left; }

.la-fd-meaning { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; }
.la-fd-pos { flex-shrink: 0; font-size: 12px; font-weight: 700; color: var(--primary); background: var(--primary-soft); border-radius: 999px; padding: 3px 10px; margin-top: 3px; }
.la-fd-m { font-size: 17px; line-height: 1.6; }
.la-fd-block { margin-top: 16px; }
.la-fd-label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); font-weight: 700; margin-bottom: 6px; }
.la-fd-value { font-size: 13.5px; line-height: 1.72; color: var(--ink-soft); }

/* 评分条 */
.la-grade-bar { display: grid; gap: 10px; margin: 16px auto 0; max-width: 720px; }
.la-grade-bar.la-grade-4 { grid-template-columns: repeat(4, 1fr); }
.la-grade-bar:not(.la-grade-4) { grid-template-columns: 1fr 1fr; }
.la-grade {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 12px 6px; border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--surface); cursor: pointer; font: inherit; color: var(--ink);
  transition: all .15s; text-align: center;
}
.la-grade strong { font-size: 14px; }
.la-grade span { font-size: 10.5px; color: var(--ink-faint); }
.la-grade:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.la-grade.g0:hover { border-color: var(--danger); background: rgba(220, 38, 38, .06); }
.la-grade.g1:hover { border-color: var(--warning); background: rgba(245, 158, 11, .07); }
.la-grade.g2:hover { border-color: var(--primary); background: var(--primary-soft); }
.la-grade.g3:hover { border-color: var(--success); background: rgba(16, 185, 129, .07); }
.la-grade-foot { display: flex; justify-content: center; margin-top: 12px; }
.la-bookmark.is-on { color: var(--accent-deep); border-color: var(--accent); }
.la-flash-foot { text-align: center; margin-top: 16px; }

/* 听力 */
.la-listen-list { display: flex; flex-direction: column; margin: 14px 0; }
.la-listen-line { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--line-soft); }
.la-listen-line:last-child { border-bottom: 0; }
.la-listen-main { flex: 1; min-width: 0; }
.la-listen-tr { font-size: 12.5px; color: var(--ink-faint); margin-top: 3px; }
.listen-text.is-hidden { color: var(--ink-faint); letter-spacing: .14em; }
.la-listen-controls { margin-top: 12px; }

/* 口语 */
.la-sentence-list { display: flex; flex-direction: column; gap: 12px; }
.la-sentence { border: 1px solid var(--line); border-radius: var(--radius); padding: 15px 16px; background: var(--surface); }
.la-sentence.is-done { border-color: rgba(16, 185, 129, .4); background: rgba(16, 185, 129, .04); }
.la-sentence-head { display: flex; align-items: center; gap: 11px; }
.la-sentence-idx {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
  background: var(--bg-2); display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--ink-soft);
}
.la-sentence-text { flex: 1; font-size: 17px; font-weight: 600; line-height: 1.5; }
.la-sentence-actions { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.la-sentence-score { font-size: 13px; font-weight: 800; padding: 3px 10px; border-radius: 999px; }
.la-recog { margin-top: 10px; }
.is-good { color: #047857; background: rgba(16, 185, 129, .12); }
.is-ok { color: var(--accent-deep); background: var(--accent-soft); }
.is-bad { color: var(--danger); background: rgba(220, 38, 38, .1); }

/* 精读 */
.la-reading { margin: 16px 0; }
.la-read-line { padding: 11px 0; border-bottom: 1px solid var(--line-soft); }
.la-read-line:last-child { border-bottom: 0; }
.la-read-src { font-size: 16.5px; line-height: 1.72; }
.la-read-tr { font-size: 13px; color: var(--ink-faint); margin-top: 5px; line-height: 1.65; }

/* 答题 */
.la-quiz { max-width: 760px; margin: 0 auto; }
.la-quiz-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; font-size: 12.5px; color: var(--ink-faint); }
.la-quiz-score { font-weight: 700; color: var(--accent-deep); }
.la-opt-key {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
  border: 1.5px solid var(--line); display: grid; place-items: center;
  font-size: 12px; font-weight: 800; margin-right: 10px;
}
.opt-btn { display: flex; align-items: center; text-align: left; }
.opt-btn.is-dim { opacity: .48; }
.la-opt-text { flex: 1; }
.la-opt-pr { display: block; font-style: normal; font-size: 11.5px; color: var(--ink-faint); margin-top: 2px; }
.la-explain { margin-top: 18px; padding: 15px 16px; border-radius: var(--radius); border-left: 4px solid var(--line); background: var(--bg-2); }
.la-explain.is-correct { border-left-color: var(--success); background: rgba(16, 185, 129, .08); }
.la-explain.is-wrong { border-left-color: var(--danger); background: rgba(220, 38, 38, .06); }
.la-explain-head { font-weight: 700; margin-bottom: 8px; font-size: 14.5px; }
.la-explain p { margin: 0 0 14px; font-size: 13.5px; line-height: 1.7; color: var(--ink-soft); }

/* 自评 */
.la-selfrate-target { font-size: 19px; font-weight: 700; text-align: center; margin: 6px 0 16px; }
.la-selfrate-btns { display: grid; grid-template-columns: repeat(6, 1fr); gap: 9px; margin: 18px 0 10px; }
.la-selfrate-btn {
  padding: 16px 0; border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--surface); font: inherit; font-size: 18px; font-weight: 800;
  cursor: pointer; color: var(--ink); transition: all .15s;
}
.la-selfrate-btn:hover { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ===========================================================================
   12. 结算卡
   ======================================================================== */
.la-result { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px; align-items: center; padding: 26px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.la-result.good { border-color: rgba(16, 185, 129, .45); background: linear-gradient(135deg, rgba(16, 185, 129, .08), var(--surface)); }
.la-result.ok { border-color: rgba(26, 58, 74, .3); }
.la-result.warn { border-color: rgba(245, 158, 11, .45); background: linear-gradient(135deg, rgba(245, 158, 11, .08), var(--surface)); }
.la-result.bad { border-color: rgba(220, 38, 38, .4); background: linear-gradient(135deg, rgba(220, 38, 38, .06), var(--surface)); }
.la-result-ring { font-family: var(--font-display); font-size: 46px; font-weight: 700; line-height: 1; color: var(--accent-deep); }
.la-result-ring small { font-size: 18px; }
.la-result-body h3 { margin: 0 0 6px; font-family: var(--font-display); font-size: 22px; }
.la-result-body > p { margin: 0 0 12px; font-size: 13.5px; color: var(--ink-soft); line-height: 1.7; }
.la-result-stats { display: flex; gap: 22px; flex-wrap: wrap; }
.la-result-stats > div { display: flex; flex-direction: column; }
.la-result-stats strong { font-family: var(--font-display); font-size: 20px; }
.la-result-stats span { font-size: 11.5px; color: var(--ink-faint); }
.la-result-btns { grid-column: 1 / -1; display: flex; gap: 10px; flex-wrap: wrap; }

/* ===========================================================================
   13. 复习 / 词表 / 错题
   ======================================================================== */
.la-review-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; }
.la-review-stats { display: flex; gap: 26px; flex-wrap: wrap; }
.la-review-stats > div { display: flex; flex-direction: column; }
.la-review-stats strong { font-family: var(--font-display); font-size: 25px; }
.la-review-stats span { font-size: 12px; color: var(--ink-faint); }
.la-review-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.la-review-list { display: flex; flex-direction: column; }
.la-review-item { display: flex; align-items: center; gap: 12px; padding: 11px 4px; border-bottom: 1px solid var(--line-soft); cursor: pointer; transition: background .14s; }
.la-review-item:last-child { border-bottom: 0; }
.la-review-item:hover { background: var(--bg-2); }
.la-review-idx { width: 24px; text-align: center; font-size: 11.5px; color: var(--ink-faint); font-weight: 700; flex-shrink: 0; }
.la-review-main { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.la-review-main strong { font-size: 15px; }
.la-review-main span { font-size: 12px; color: var(--primary); }
.la-review-main em { font-style: normal; font-size: 12.5px; color: var(--ink-faint); }
.la-review-src { font-size: 11.5px; color: var(--ink-faint); flex-shrink: 0; }
.la-review-reason { font-size: 11px; background: var(--accent-soft); color: var(--accent-deep); border-radius: 999px; padding: 2px 9px; flex-shrink: 0; }

.la-word-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px; }
.la-word-card {
  position: relative; display: flex; flex-direction: column; gap: 3px; text-align: left;
  padding: 13px 14px; border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--surface); cursor: pointer; font: inherit; color: var(--ink); transition: all .16s;
}
.la-word-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--primary); }
.la-word-card.is-mastered { border-color: rgba(16, 185, 129, .42); background: rgba(16, 185, 129, .05); }
.la-word-main { font-size: 17px; font-weight: 700; word-break: break-word; }
.la-word-pr { font-size: 11.5px; color: var(--primary); }
.la-word-m { font-size: 12px; color: var(--ink-faint); line-height: 1.5; }
.la-word-badge { position: absolute; top: 8px; right: 9px; color: var(--success); font-size: 13px; }

.la-drill-list, .la-mistake-list { display: flex; flex-direction: column; }
.la-drill-item { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--line-soft); flex-wrap: wrap; }
.la-drill-item:last-child { border-bottom: 0; }
.la-drill-main { flex: 1; min-width: 180px; display: flex; flex-direction: column; }
.la-drill-main strong { font-size: 14.5px; }
.la-drill-main span { font-size: 12px; color: var(--ink-faint); }

.la-mistake-item { padding: 14px 2px; border-bottom: 1px solid var(--line-soft); }
.la-mistake-item:last-child { border-bottom: 0; }
.la-mistake-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; font-size: 12px; }
.la-mistake-q { font-size: 15px; font-weight: 600; line-height: 1.6; margin-bottom: 8px; }
.la-mistake-a { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; }
.la-mistake-a .is-wrong { color: var(--danger); }
.la-mistake-a .is-right { color: #047857; font-weight: 700; }
.la-mistake-foot { margin-top: 10px; }
.la-mistake-block .la-fd-label { color: var(--danger); }

/* ===========================================================================
   14. 进度页
   ======================================================================== */
.la-lv { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; flex-wrap: wrap; }
.la-lv-num { font-family: var(--font-display); font-size: 32px; font-weight: 700; color: var(--primary); flex-shrink: 0; }
.la-lv-bar { flex: 1; min-width: 200px; }

.la-lang-progress { display: flex; flex-direction: column; gap: 4px; }
.la-lp-row { display: flex; align-items: center; gap: 11px; padding: 9px 4px; border-radius: var(--radius-sm); cursor: pointer; }
.la-lp-row:hover { background: var(--bg-2); }
.la-lp-flag { font-size: 18px; }
.la-lp-name { width: 62px; font-size: 13.5px; font-weight: 600; flex-shrink: 0; }
.la-lp-bar { flex: 1; height: 7px; border-radius: 999px; background: var(--bg-2); overflow: hidden; }
.la-lp-bar i { display: block; height: 100%; border-radius: 999px; }
.la-lp-pct { font-size: 11.5px; color: var(--ink-faint); width: 58px; text-align: right; flex-shrink: 0; }

.la-score-list { display: flex; flex-direction: column; }
.la-score-row { display: flex; align-items: center; gap: 11px; padding: 9px 4px; border-bottom: 1px solid var(--line-soft); }
.la-score-row:last-child { border-bottom: 0; }
.la-score-icon { font-size: 16px; }
.la-score-title { flex: 1; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.la-score-val { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--accent-deep); }

/* ===========================================================================
   15. 游戏
   ======================================================================== */
.la-game { max-width: 820px; margin: 0 auto; }
.la-game-stats { margin-bottom: 18px; }
.la-game-name { font-family: var(--font-display); font-size: 19px; font-weight: 700; }
.la-game-desc { font-size: 13px; color: var(--ink-soft); line-height: 1.65; margin-top: 4px; }
.la-game-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.la-game-note { margin-top: 20px; }
.la-game-hud { display: flex; align-items: center; gap: 14px; flex-shrink: 0; font-size: 12.5px; color: var(--ink-soft); flex-wrap: wrap; }
.la-game-hud strong { font-family: var(--font-display); font-size: 17px; color: var(--accent-deep); }
.la-game-board { max-width: 820px; margin: 0 auto; }
.la-game-next { margin-top: 18px; text-align: center; }
.la-game-foot-actions { display: flex; gap: 10px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }

.la-match { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.la-match-col { display: flex; flex-direction: column; gap: 9px; }
.la-match-card {
  display: flex; flex-direction: column; gap: 2px; text-align: left;
  padding: 13px 14px; border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--surface); cursor: pointer; font: inherit; color: var(--ink);
  transition: all .14s; min-height: 60px; justify-content: center;
}
.la-match-card:hover:not(:disabled) { border-color: var(--primary); transform: translateX(2px); }
.la-match-card.is-sel { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 3px rgba(26, 58, 74, .12); }
.la-match-card.is-done { border-color: rgba(16, 185, 129, .5); background: rgba(16, 185, 129, .1); opacity: .75; cursor: default; }
.la-match-card.is-wrong { border-color: var(--danger); background: rgba(220, 38, 38, .1); animation: laShake .35s; }
.la-match-word { font-size: 19px; font-weight: 700; }
.la-match-pr { font-size: 11.5px; color: var(--primary); }
.la-match-m { font-size: 13.5px; line-height: 1.5; }
@keyframes laShake { 0%, 100% { transform: translateX(0) } 25% { transform: translateX(-6px) } 75% { transform: translateX(6px) } }

.la-listen-game { text-align: center; }
.la-listen-play { margin-bottom: 22px; }
.la-big-play {
  width: 96px; height: 96px; border-radius: 50%; border: 3px solid var(--accent);
  background: var(--accent-soft); font-size: 40px; cursor: pointer; transition: all .18s;
  display: grid; place-items: center; margin: 0 auto 12px;
}
.la-big-play:hover { transform: scale(1.06); box-shadow: var(--shadow); }
.la-listen-options, .gq-options { display: flex; flex-direction: column; gap: 10px; text-align: left; }

.la-duel-arena { display: flex; align-items: center; gap: 16px; }
.la-duel-side { flex: 1; }
.la-duel-name { font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.la-duel-hp { height: 12px; border-radius: 999px; background: var(--bg-2); overflow: hidden; }
.la-duel-hp i { display: block; height: 100%; border-radius: 999px; transition: width .4s ease; }
.la-duel-hp-num { font-size: 11.5px; color: var(--ink-faint); margin-top: 4px; }
.la-duel-vs { font-family: var(--font-display); font-size: 20px; font-weight: 800; color: var(--ink-faint); }
.la-duel-question { text-align: center; margin-bottom: 18px; }
.la-duel-turn { font-size: 13px; color: var(--ink-faint); }
.la-duel-word { font-family: var(--font-display); font-size: 34px; margin-top: 8px; }
.la-duel-log { margin-top: 18px; border-top: 1px dashed var(--line); padding-top: 12px; }
.la-duel-line { font-size: 13px; color: var(--ink-soft); padding: 3px 0; }

/* ===========================================================================
   16. 社区 / 设置 / 发音
   ======================================================================== */
.la-profile-list { display: flex; flex-direction: column; gap: 6px; }
.la-profile-row {
  display: flex; align-items: center; gap: 12px; padding: 11px 13px;
  border: 1px solid var(--line); border-radius: var(--radius); flex-wrap: wrap;
}
.la-profile-row.is-active { border-color: var(--primary); background: var(--primary-soft); }
.la-profile-row > span:first-child { font-weight: 600; }

.la-goal-picker { display: flex; gap: 9px; flex-wrap: wrap; }
.la-goal-opt {
  padding: 9px 18px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); font: inherit; font-size: 13.5px; font-weight: 600;
  cursor: pointer; color: var(--ink-soft); transition: all .15s;
}
.la-goal-opt:hover { border-color: var(--accent); }
.la-goal-opt.is-active { background: var(--accent); color: #fff; border-color: var(--accent); }

.la-ach-progress { margin-bottom: 18px; }

.la-phrase-list { display: flex; flex-direction: column; }
.la-phrase { padding: 11px 2px; border-bottom: 1px solid var(--line-soft); }
.la-phrase:last-child { border-bottom: 0; }
.la-phrase-t { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.la-phrase-tr { font-size: 12.5px; color: var(--ink-faint); margin-top: 3px; }

.la-culture { position: relative; padding-left: 26px; }
.la-culture-mark { position: absolute; left: 18px; top: 20px; font-size: 22px; }
.la-culture-text { font-size: 15.5px; line-height: 1.95; margin: 0; color: var(--ink); }
.la-culture-body { font-size: 13.5px; line-height: 1.8; color: var(--ink-soft); margin: 0; }

.la-voice-result { margin-top: 16px; }
.la-voice-score { font-family: var(--font-display); font-size: 40px; font-weight: 700; border-radius: var(--radius); padding: 6px 18px; display: inline-block; margin-bottom: 12px; }

.la-page-actions .btn { white-space: nowrap; }

/* ===========================================================================
   17. 朗读按钮
   ======================================================================== */
.la-speak-btn {
  display: inline-grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 50%; border: 1px solid var(--line); background: var(--surface);
  cursor: pointer; font-size: 15px; line-height: 1; color: var(--ink);
  transition: all .15s; vertical-align: middle;
}
.la-speak-btn:hover { background: var(--accent-soft); border-color: var(--accent); transform: scale(1.06); }
.la-speak-btn.is-sm { width: 26px; height: 26px; font-size: 12px; }
.la-speak-btn.is-speaking { background: var(--accent); border-color: var(--accent); animation: laPulse 1s infinite; }
@keyframes laPulse { 0%, 100% { transform: scale(1) } 50% { transform: scale(1.12) } }

/* ===========================================================================
   18. 响应式
   ======================================================================== */
@media (max-width: 1020px) {
  .la-cols { grid-template-columns: 1fr; }
  .la-hero { grid-template-columns: 1fr; padding: 24px 22px; }
  .la-hero-right { display: flex; align-items: center; justify-content: center; gap: 16px; }
  .la-hero .hero-title { font-size: 27px; }
}

@media (max-width: 760px) {
  .la-page { padding: 16px 14px 96px; }
  .la-panel, .la-lesson-bar { padding-left: 14px; padding-right: 14px; }
  .la-lesson-progress { display: none; }
  .la-hero .hero-stats { gap: 16px; }
  .la-goal-ring.is-lg { width: 108px; height: 108px; }
  .la-goal-ring.is-lg .la-goal-ring-text strong { font-size: 26px; }
  .la-grade-bar.la-grade-4 { grid-template-columns: 1fr 1fr; }
  .la-match { grid-template-columns: 1fr; }
  .la-match-col { flex-direction: row; flex-wrap: wrap; }
  .la-match-card { flex: 1 1 45%; }
  .la-word-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .la-result { grid-template-columns: 1fr; text-align: center; }
  .la-result-stats { justify-content: center; }
  .la-result-btns { justify-content: center; }
  .la-quick { grid-template-columns: 1fr; }
  .la-lang-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  .fc-word { font-size: 36px; }
  .la-ws-word { font-size: 28px; }
  .la-duel-word { font-size: 27px; }
  .la-search-mask { padding: 0; }
  .la-search-panel { max-height: 100vh; border-radius: 0; max-width: none; }
  .la-heatmap { grid-template-columns: repeat(10, 1fr); }
  .la-selfrate-btns { grid-template-columns: repeat(3, 1fr); }
  .la-footer-inner { flex-direction: column; gap: 8px; }
  .la-review-head { flex-direction: column; align-items: stretch; }
  .la-review-src { display: none; }
  .la-lp-name { width: 48px; font-size: 12.5px; }
  .la-lp-pct { width: 46px; }
  .la-more-menu { min-width: 186px; }
}

@media (max-width: 420px) {
  .la-grade-bar.la-grade-4 { grid-template-columns: 1fr 1fr; }
  .la-match-card { flex: 1 1 100%; }
  .la-hero .hero-title { font-size: 23px; }
  .la-progress-stats, .la-review-stats { gap: 16px; }
}

/* 移动端顶栏精简：与底栏共存时避免重复导航 */
@media (max-width: 860px) {
  .topbar .nav-main { display: none; }
  .topbar .la-user { display: none; }
}

/* ===========================================================================
   19. 深色模式修补
   ======================================================================== */
:root[data-theme='dark'] .la-hero {
  background: linear-gradient(135deg, #1E3A48 0%, #0F1A20 100%);
}
:root[data-theme='dark'] .la-chip.is-syn { color: #6EE7B7; }
:root[data-theme='dark'] .la-mistake-a .is-right { color: #6EE7B7; }
:root[data-theme='dark'] .is-good { color: #6EE7B7; }
:root[data-theme='dark'] .la-input:focus { box-shadow: 0 0 0 3px rgba(127, 182, 206, .18); }
:root[data-theme='dark'] .la-match-card.is-sel { box-shadow: 0 0 0 3px rgba(127, 182, 206, .2); }
:root[data-theme='dark'] .la-crash-msg { color: #FCA5A5; }

@media (prefers-color-scheme: dark) {
  :root[data-theme='auto'] .la-hero { background: linear-gradient(135deg, #1E3A48 0%, #0F1A20 100%); }
  :root[data-theme='auto'] .la-chip.is-syn { color: #6EE7B7; }
  :root[data-theme='auto'] .la-mistake-a .is-right { color: #6EE7B7; }
  :root[data-theme='auto'] .is-good { color: #6EE7B7; }
}

/* ===========================================================================
   20. 无障碍与动效偏好
   ======================================================================== */
@media (prefers-reduced-motion: reduce) {
  .la-hero, .la-modal, .la-modal-mask, .la-search-mask, .la-search-panel,
  .la-match-card, .la-speak-btn, .la-week-bar i, .la-duel-hp i {
    animation: none !important;
    transition: none !important;
  }
}

@media print {
  .topbar, .mobile-tabbar, .la-footer, .la-grade-bar, .la-speak-btn, .la-icon-btn { display: none !important; }
  .la-page { padding: 0; }
  .card { box-shadow: none; border: 1px solid #ddd; page-break-inside: avoid; }
}