/* ═══════════════════════════════════════════════
   法语跟读 · 样式
   深色底 + 法国国旗三色点缀（蓝 / 白 / 红）
   ═══════════════════════════════════════════════ */

:root {
  --bg:          #0d1117;
  --bg-soft:     #131a24;
  --surface:     #171f2b;
  --surface-2:   #1e2836;
  --line:        #27323f;
  --line-soft:   #1f2833;

  --text:        #e8edf4;
  --text-dim:    #9aa8ba;
  --text-faint:  #6b7887;

  --bleu:        #2b6cb0;
  --bleu-light:  #4a90d9;
  --rouge:       #d64550;
  --rouge-light: #ef5a66;
  --vert:        #3fa66b;
  --ambre:       #d99a3d;

  --radius:      16px;
  --radius-sm:   10px;
  --shadow:      0 10px 30px rgba(0, 0, 0, .35);
  --ease:        cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; }

/* 关键：本文件多处设置了 display，会覆盖 hidden 属性的默认样式 */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* 背景微光 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 500px at 12% -10%, rgba(43, 108, 176, .18), transparent 60%),
    radial-gradient(800px 500px at 100% 0%,  rgba(214, 69, 80, .12),  transparent 55%);
  z-index: 0;
}

kbd {
  font-family: inherit;
  font-size: 11px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--text-dim);
}

.app {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 288px 1fr;
  /* 行高必须钉死为可视高度：默认 auto 会让侧栏按内容撑高，
     于是页脚被顶到屏幕外、底部按键被裁掉（矮窗口特别明显）。 */
  grid-template-rows: minmax(0, 1fr);
  height: 100%;
}

/* ══════════ 侧栏 ══════════ */

.sidebar {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line-soft);
  background: linear-gradient(180deg, var(--bg-soft), var(--bg));
  overflow: hidden;
  min-height: 0;
}

/* 侧栏中部：功能网格 + 课程单元的唯一滚动区。
   品牌/统计固定在顶部、页脚固定在底部，中间这一段整体滚动。
   不要给 .sidebar-actions / .unit-list 再加 max-height + overflow，
   否则矮窗口下两段会各自被压扁、内容互相遮挡。 */
.sidebar-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.sidebar-scroll::-webkit-scrollbar { width: 6px; }
.sidebar-scroll::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 3px;
}
.sidebar-scroll::-webkit-scrollbar-track { background: transparent; }

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 16px 10px;
}

.brand-flag {
  display: flex;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  overflow: hidden;
  flex: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}
.brand-flag span { flex: 1; }
.brand-flag span:nth-child(1) { background: #002395; }
.brand-flag span:nth-child(2) { background: #ffffff; }
.brand-flag span:nth-child(3) { background: #ed2939; }

.brand-text h1 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.3;
  color: #fff;
}
.brand-sub {
  margin: 1px 0 0;
  font-size: 12px;
  color: var(--bleu-light);
  letter-spacing: .04em;
  font-weight: 500;
}

.disclaimer {
  font-size: 9px;
  color: var(--text-faint);
  opacity: .7;
  padding: 6px 16px 4px;
  line-height: 1.4;
  text-align: center;
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 0 16px 18px;
}
.stat {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  padding: 9px 6px;
  text-align: center;
}
.stat-num {
  display: block;
  font-size: 19px;
  font-weight: 650;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.stat-label {
  display: block;
  font-size: 10.5px;
  color: var(--text-faint);
  letter-spacing: .03em;
}

.unit-list {
  flex: none;
  overflow: visible;
  padding: 0 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.unit-list::-webkit-scrollbar { width: 8px; }
.unit-list::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 4px;
}

/* 课程列表分区标题（我的自定义 / 内置课程） */
.unit-section-title {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--text-faint);
  padding: 6px 4px 4px;
}
.unit-section-title:first-child { padding-top: 2px; }

/* 作业长条按钮 + 作业标签 + 作业卡片 */
.btn-homework-bar {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
  padding: 9px 12px;
  font: inherit;
  font-size: 12.5px;
  color: var(--text-dim);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  transition: all .18s var(--ease);
}
.btn-homework-bar:hover { color: var(--text); border-color: rgba(74, 144, 217, .45); }
.btn-homework-bar b { font-weight: 600; }
.tag-homework {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .05em;
  color: #7ec8ff;
  border: 1px solid rgba(74, 144, 217, .45);
  border-radius: 4px;
  padding: 0 4px;
  flex: none;
}
.hw-list { display: flex; flex-direction: column; gap: 10px; }
.hw-card {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}
.hw-card.is-done { border-color: rgba(90, 180, 120, .4); }
.hw-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hw-card-title { font-size: 14px; font-weight: 650; color: var(--text); }
.hw-card-status {
  flex: none;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--text-faint);
  background: var(--surface-2);
  border-radius: 20px;
  padding: 2px 8px;
}
.hw-card-status.is-ok { color: #7ec89a; background: rgba(90, 180, 120, .12); }
.hw-card-meta { font-size: 11px; color: var(--text-faint); margin: 4px 0 10px; }
.hw-go { width: 100%; }
/* 作业卡片底部：跟读 + 录音打卡 */
.hw-card-actions { display: flex; gap: 8px; }
.hw-card-actions .hw-go { flex: 1 1 auto; width: auto; }
.hw-card-actions .hw-rec-btn { flex: 0 0 auto; white-space: nowrap; }
.hw-card-check { font-size: 11.5px; color: var(--text-faint); margin: 0 0 8px; }
.hw-card-check.is-done { color: #7ec89a; }

/* ── 作业录音打卡弹窗 ── */
.hw-check-tip { font-size: 12.5px; color: var(--text-dim); line-height: 1.6; margin: 0 0 10px; }
.hw-check-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 54vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.hw-check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface-2);
}
.hw-check-row.is-done { border-color: rgba(90, 180, 120, .45); }
.hw-check-row.is-rec { border-color: var(--rouge); background: rgba(214, 69, 80, .08); }
.hw-check-idx { flex: none; min-width: 14px; font-size: 11px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.hw-check-fr {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text);
  font-family: Georgia, "Times New Roman", serif;
  word-break: break-word;
}
.hw-rec-time { flex: none; min-width: 34px; text-align: right; font-size: 11px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.hw-check-row .btn-sm { flex: none; }
.hw-rec-stop { background: rgba(214, 69, 80, .16); border-color: var(--rouge); color: var(--rouge-light); }

/* 提交前试听：行内小圆钮 */
.hw-play-btn {
  flex: none;
  width: 26px;
  height: 26px;
  padding: 0;
  font: inherit;
  font-size: 10px;
  line-height: 1;
  color: var(--bleu-light);
  background: rgba(43, 108, 176, .16);
  border: 1px solid rgba(43, 108, 176, .42);
  border-radius: 50%;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.hw-play-btn:hover { background: rgba(43, 108, 176, .3); }
.hw-play-btn.is-playing {
  color: #fff;
  background: var(--bleu-light);
  border-color: var(--bleu-light);
}
.hw-check-row.is-playing {
  border-color: rgba(74, 144, 217, .65);
  background: rgba(43, 108, 176, .1);
}
/* 手机窄屏：按钮收窄一点，别把法语句子挤成一条线 */
@media (max-width: 420px) {
  .hw-play-btn { width: 24px; height: 24px; font-size: 9px; }
  .hw-check-row { gap: 6px; padding: 8px; }
}

/* 管理员：打卡名单 */
.hw-review-btn {
  flex: none;
  font: inherit;
  font-size: 11.5px;
  color: var(--text-dim);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 3px 8px;
  cursor: pointer;
}
.hw-review-btn:hover { border-color: var(--bleu); color: var(--bleu-light); }
.hw-review-row {
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface-2);
}
.hw-review-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--text); }
.hw-review-head span { font-size: 11px; color: var(--text-faint); }
.hw-review-audio { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.hw-review-audio span { flex: none; font-size: 11px; color: var(--text-dim); }
.hw-review-audio audio { flex: 1; height: 32px; max-width: 100%; }
.hw-admin-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.hw-admin-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
}
.hw-admin-info { font-size: 12.5px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.course-admin-list { display: flex; flex-direction: column; gap: 8px; }
.course-admin-row { margin: 0; }

/* 自定义内容长横条栏目（样式同"管理"块），点击展开/收起 */
.unit-section-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  transition: all .18s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.unit-section-toggle:hover {
  color: var(--text);
  border-color: rgba(74, 144, 217, .45);
  background: rgba(43, 108, 176, .1);
}
.unit-section-toggle:active { transform: scale(.98); }
.custom-group { display: flex; flex-direction: column; gap: 6px; padding-top: 6px; }
.custom-group[data-open="0"] { display: none; }

.unit {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.unit:hover { background: var(--surface); color: var(--text); }
.unit.is-active {
  background: linear-gradient(90deg, rgba(43, 108, 176, .22), rgba(43, 108, 176, .06));
  border-color: rgba(74, 144, 217, .35);
  color: var(--text);
}
.unit-icon { font-size: 17px; flex: none; }
.unit-body { flex: 1; min-width: 0; }
.unit-title {
  font-size: 13.5px;
  font-weight: 550;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.unit-sub {
  font-size: 10.5px;
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.unit-progress {
  flex: none;
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  color: var(--text-faint);
  background: var(--surface-2);
  border-radius: 20px;
  padding: 2px 7px;
}
.unit.is-active .unit-progress { color: var(--bleu-light); }

/* 管理员工 tiles 是 3 列网格里的第 19 个，会落单成孤行 —— 让它横跨整行，看起来是刻意设计的宽按钮 */
.btn-admin {
  grid-column: 1 / -1;
  justify-content: center;
}

.unit-lv {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--text-faint);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0 4px;
  flex: none;
}

.sidebar-foot {
  padding: 12px 16px 16px;
  border-top: 1px solid var(--line-soft);
  /* 滚动区到底时的分层阴影：让"上面还有内容可以滚"这件事看起来是设计，
     而不是"元素被切了一半" */
  box-shadow: 0 -10px 16px -8px rgba(0, 0, 0, .45);
}
.hint {
  margin: 10px 0 0;
  font-size: 10.5px;
  color: var(--text-faint);
  line-height: 1.8;
}

.btn-ghost {
  width: 100%;
  padding: 7px 12px;
  font: inherit;
  font-size: 12px;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  transition: all .18s var(--ease);
}
.btn-ghost:hover {
  color: var(--rouge-light);
  border-color: rgba(214, 69, 80, .5);
  background: rgba(214, 69, 80, .08);
}

/* ══════════ 主区 ══════════ */

.main {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 26px;
  border-bottom: 1px solid var(--line-soft);
  flex: none;
}

.menu-btn { display: none; }
/* 桌面端隐藏顶栏设置按钮（左侧栏已有）；手机端由媒体查询打开 */
.settings-btn { display: none; }

.breadcrumb {
  font-size: 12.5px;
  color: var(--text-faint);
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  /* 窄屏时课程名/句子号很长，必须单行省略，否则会折成两行把顶栏撑高 */
  flex: 1 1 auto;
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow: hidden;
}
.breadcrumb #crumbUnit {
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.breadcrumb #crumbIdx {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: none;
}
.crumb-sep { opacity: .45; flex: none; }

.topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: none;
  flex-wrap: nowrap;
  min-width: 0;
}

/* 顶栏翻译快捷按钮：比普通 badge 更醒目 */
.topbar-trans {
  cursor: pointer;
  border: 1px solid rgba(74, 144, 217, .45) !important;
  background: rgba(43, 108, 176, .14) !important;
  color: var(--bleu-light) !important;
  transition: all .18s var(--ease);
}
.topbar-trans:hover {
  background: rgba(43, 108, 176, .3) !important;
  transform: translateY(-1px);
}

.badge {
  font-size: 11px;
  color: var(--text-dim);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 4px 11px;
  white-space: nowrap;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.badge.is-warn {
  color: var(--ambre);
  border-color: rgba(217, 154, 61, .45);
  background: rgba(217, 154, 61, .1);
}

.stage {
  flex: 1;
  overflow-y: auto;
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 1080px;
  width: 100%;
  margin: 0 auto;
}
.stage::-webkit-scrollbar { width: 10px; }
.stage::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 5px;
  border: 3px solid var(--bg);
}

.card {
  background: linear-gradient(180deg, var(--surface), var(--bg-soft));
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px 26px;
}

/* ── 句子卡片 ── */

.card-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

.level-tag {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  color: #fff;
  background: linear-gradient(135deg, var(--bleu), var(--bleu-light));
  border-radius: 5px;
  padding: 3px 9px;
  flex: none;
}

.dots {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.dot {
  width: 22px;
  height: 5px;
  padding: 0;
  border: none;
  border-radius: 3px;
  background: var(--line);
  cursor: pointer;
  transition: all .2s var(--ease);
}
.dot:hover { background: var(--text-faint); }
.dot.is-done { background: rgba(63, 166, 107, .6); }
.dot.is-active {
  background: var(--bleu-light);
  width: 34px;
}

.fr-sentence {
  font-family: Georgia, "Times New Roman", "Songti SC", serif;
  font-size: clamp(22px, 3.1vw, 33px);
  line-height: 1.45;
  font-weight: 400;
  letter-spacing: .005em;
  margin: 0 0 12px;
  color: #fff;
}
.fr-sentence .hl {
  color: var(--bleu-light);
  font-style: italic;
}

.zh-sentence {
  margin: 0 0 18px;
  font-size: 14.5px;
  color: var(--text-dim);
}

/* 自定义内容的「翻译这句」行 */
.zh-action-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -10px 0 16px;
}
.zh-trans-btn {
  font: inherit;
  font-size: 12.5px;
  color: var(--bleu-light);
  background: rgba(43, 108, 176, .1);
  border: 1px solid rgba(74, 144, 217, .4);
  border-radius: 8px;
  padding: 5px 13px;
  cursor: pointer;
  transition: all .18s var(--ease);
}
.zh-trans-btn:hover { background: rgba(43, 108, 176, .22); }
.zh-trans-btn:disabled { opacity: .55; cursor: wait; }
.zh-trans-loading {
  font-size: 12px;
  color: var(--text-faint);
  animation: blink 1.2s ease-in-out infinite;
}

.tip-row {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: 12.5px;
  color: var(--text-faint);
  background: rgba(43, 108, 176, .08);
  border-left: 3px solid rgba(74, 144, 217, .5);
  border-radius: 0 8px 8px 0;
  padding: 9px 13px;
  margin-bottom: 24px;
}
.tip-icon { flex: none; }

/* ── 播放控制 ── */

.controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
}

.icon-btn {
  width: 40px;
  height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  font-size: 12px;
  color: var(--text-dim);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 11px;
  cursor: pointer;
  transition: all .18s var(--ease);
}
.icon-btn:hover {
  color: var(--text);
  border-color: var(--bleu);
  background: rgba(43, 108, 176, .16);
}

.btn-play {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 40px;
  padding: 0 22px;
  font: inherit;
  font-size: 14px;
  font-weight: 550;
  color: #fff;
  background: linear-gradient(135deg, var(--bleu), var(--bleu-light));
  border: none;
  border-radius: 11px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(43, 108, 176, .35);
  transition: all .18s var(--ease);
}
.btn-play:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(43, 108, 176, .45); }
.btn-play:active { transform: translateY(0); }
.btn-play.is-playing {
  background: linear-gradient(135deg, #8a2f38, var(--rouge));
  box-shadow: 0 4px 14px rgba(214, 69, 80, .35);
}

.control-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.rate { display: flex; flex-direction: column; gap: 4px; }
.rate-label {
  font-size: 11px;
  color: var(--text-faint);
  white-space: nowrap;
}
.rate-label b { color: var(--bleu-light); font-variant-numeric: tabular-nums; }

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 130px;
  height: 4px;
  border-radius: 3px;
  background: var(--line);
  outline: none;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--bleu-light);
  border: 2px solid var(--bg);
  box-shadow: 0 0 0 1px var(--bleu-light);
  cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--bleu-light);
  border: 2px solid var(--bg);
  cursor: pointer;
}

.switch {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  user-select: none;
}
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch-track {
  width: 34px;
  height: 19px;
  border-radius: 20px;
  background: var(--line);
  position: relative;
  transition: background .2s var(--ease);
  flex: none;
}
.switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--text-faint);
  transition: all .2s var(--ease);
}
.switch input:checked + .switch-track { background: rgba(43, 108, 176, .55); }
.switch input:checked + .switch-track .switch-thumb {
  left: 17px;
  background: #fff;
}
.switch-text { font-size: 11.5px; color: var(--text-faint); white-space: nowrap; }
.switch input:checked ~ .switch-text { color: var(--text-dim); }

/* ── 跟读卡片 ── */

.practice-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.practice-head h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
}

.mode-tabs {
  margin-left: auto;
  display: flex;
  gap: 4px;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 3px;
}
.mode-tab {
  font: inherit;
  font-size: 12.5px;
  color: var(--text-faint);
  background: transparent;
  border: none;
  border-radius: 7px;
  padding: 6px 13px;
  cursor: pointer;
  transition: all .18s var(--ease);
  white-space: nowrap;
}
.mode-tab:hover { color: var(--text); }
.mode-tab.is-active {
  color: #fff;
  background: var(--surface-2);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}

/* 麦克风 */

.mic-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 6px 0 4px;
}

.mic-btn {
  position: relative;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  border: none;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.mic-core {
  position: relative;
  z-index: 1;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 26px;
  background: linear-gradient(135deg, var(--bleu), var(--bleu-light));
  box-shadow: 0 6px 22px rgba(43, 108, 176, .4);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.mic-btn:hover .mic-core { transform: scale(1.05); }
.mic-btn:active .mic-core { transform: scale(.97); }

.mic-btn.rec .mic-core {
  background: linear-gradient(135deg, #8a2f38, var(--rouge));
  box-shadow: 0 6px 22px rgba(214, 69, 80, .4);
}

.mic-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--bleu-light);
  opacity: 0;
}

.mic-btn.is-live .mic-core {
  animation: pulse-core 1.5s ease-in-out infinite;
}
.mic-btn.is-live .mic-ring {
  animation: pulse-ring 1.5s ease-out infinite;
}
.mic-btn.rec.is-live .mic-core {
  background: linear-gradient(135deg, #8a2f38, var(--rouge-light));
}
.mic-btn.rec.is-live .mic-ring { border-color: var(--rouge-light); }

@keyframes pulse-core {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}
@keyframes pulse-ring {
  0%   { opacity: .85; transform: scale(.85); }
  100% { opacity: 0;   transform: scale(1.32); }
}

.mic-hint {
  margin: 0;
  font-size: 12.5px;
  color: var(--text-faint);
  text-align: center;
  min-height: 20px;
}

/* 识别中间结果 */

.hearing {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 20px;
  padding: 12px 16px;
  background: var(--bg);
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  font-size: 13px;
}
.hearing-label {
  flex: none;
  font-size: 10.5px;
  letter-spacing: .06em;
  color: var(--bleu-light);
  text-transform: uppercase;
}
.hearing-text { color: var(--text-dim); font-style: italic; }

/* 结果 */

.result {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--line-soft);
  display: grid;
  grid-template-columns: 148px 1fr;
  gap: 26px;
  animation: rise .35s var(--ease);
}
@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.score-wrap {
  position: relative;
  width: 148px;
  height: 148px;
  flex: none;
}
.score-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-bg {
  fill: none;
  stroke: var(--line);
  stroke-width: 8;
}
.ring-fg {
  fill: none;
  stroke: var(--bleu-light);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 326.7;
  stroke-dashoffset: 326.7;
  transition: stroke-dashoffset .9s var(--ease), stroke .4s var(--ease);
}
.score-inner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
}
.score-num {
  font-size: 38px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  line-height: 148px;
  color: var(--text);
}
.score-unit {
  font-size: 12px;
  color: var(--text-faint);
  line-height: 148px;
}

.score--great .ring-fg { stroke: var(--vert); }
.score--good  .ring-fg { stroke: var(--bleu-light); }
.score--ok    .ring-fg { stroke: var(--ambre); }
.score--poor  .ring-fg { stroke: var(--rouge); }

.feedback { min-width: 0; }
.feedback-text {
  margin: 0 0 14px;
  font-size: 14.5px;
  font-weight: 500;
}

.diff {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 5px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  line-height: 1.9;
  margin-bottom: 12px;
}
.word {
  padding: 1px 7px;
  border-radius: 6px;
  border: 1px solid transparent;
  transition: all .2s var(--ease);
}
.word-ok {
  color: #8fe0b0;
  background: rgba(63, 166, 107, .13);
  border-color: rgba(63, 166, 107, .3);
}
.word-near {
  color: #f0c479;
  background: rgba(217, 154, 61, .13);
  border-color: rgba(217, 154, 61, .35);
}
.word-bad {
  color: #ffa8b0;
  background: rgba(214, 69, 80, .15);
  border-color: rgba(214, 69, 80, .4);
  text-decoration: line-through;
  text-decoration-color: rgba(255, 168, 176, .6);
}
.word-miss {
  color: var(--text-faint);
  background: rgba(107, 120, 135, .12);
  border-color: transparent;
  border-bottom: 1px dashed var(--text-faint);
  border-radius: 6px 6px 2px 2px;
}
.word-heard {
  display: block;
  font-size: 11px;
  font-family: -apple-system, "Segoe UI", sans-serif;
  color: inherit;
  opacity: .75;
  text-align: center;
  line-height: 1.2;
  margin-top: -3px;
}

.legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 0 12px;
  font-size: 11px;
  color: var(--text-faint);
}
.lg::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  margin-right: 5px;
}
.lg-ok::before   { background: rgba(63, 166, 107, .8); }
.lg-near::before { background: rgba(217, 154, 61, .8); }
.lg-bad::before  { background: rgba(214, 69, 80, .8); }
.lg-miss::before { background: rgba(107, 120, 135, .7); }

.raw summary {
  font-size: 11.5px;
  color: var(--text-faint);
  cursor: pointer;
  outline: none;
}
.raw summary:hover { color: var(--text-dim); }
.raw p {
  margin: 8px 0 0;
  font-size: 12.5px;
  color: var(--text-faint);
  font-style: italic;
  background: var(--bg);
  border-radius: 8px;
  padding: 9px 12px;
}

/* 录音播放器 */

.rec-player {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  animation: rise .35s var(--ease);
}
.rec-player audio { flex: 1; min-width: 200px; height: 38px; }
.rec-time {
  font-size: 12.5px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  flex: none;
}
.rec-player .btn-ghost { width: auto; padding: 8px 14px; }

/* ── Toast ── */

.toast {
  position: fixed;
  left: 50%;
  bottom: 30px;
  transform: translate(-50%, 20px);
  padding: 10px 20px;
  font-size: 13px;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: all .28s var(--ease);
  z-index: 100;
  max-width: min(90vw, 480px);
  text-align: center;
}
.toast.is-show { opacity: 1; transform: translate(-50%, 0); }

.scrim {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  z-index: 40;
}
.scrim.is-show { display: block; }

/* ═══════════════════════════════════════════════
   新增组件：自定义内容 / 引擎状态 / 节奏评分 / 弹窗
   ═══════════════════════════════════════════════ */

/* ── 侧栏动作区 ── */

.sidebar-actions {
  padding: 0 12px 10px;
  flex: none;
  /* 高度交给外层 .sidebar-scroll 统一滚动，这里不再自己限高 */
  overflow: visible;
}

.btn-primary-sm {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 550;
  color: #fff;
  background: linear-gradient(135deg, var(--bleu), var(--bleu-light));
  border: none;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(43, 108, 176, .32);
  transition: all .18s var(--ease);
  margin-bottom: 8px;
}
.btn-primary-sm:hover { transform: translateY(-1px); box-shadow: 0 5px 16px rgba(43, 108, 176, .42); }
.btn-primary-sm:active { transform: translateY(0); }

.btn-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
.btn-icon-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 4px;
  font: inherit;
  font-size: 10px;
  color: var(--text-dim);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  cursor: pointer;
  transition: all .15s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn-icon-tile span { font-size: 16px; line-height: 1; }
.btn-icon-tile:hover {
  border-color: rgba(74, 144, 217, .4);
  background: rgba(43, 108, 176, .08);
  color: var(--text);
}
.btn-icon-tile:active { transform: scale(.95); }
.btn-icon-tile.btn-admin {
  border-color: rgba(217, 154, 61, .3);
  color: var(--ambre);
}
.btn-icon-tile.btn-admin:hover {
  border-color: rgba(217, 154, 61, .5);
  background: rgba(217, 154, 61, .08);
}
#btnCheckin.is-done {
  border-color: rgba(63, 166, 107, .4);
  color: var(--vert);
}

.foot-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
}
.foot-row .btn-ghost { width: auto; }
.btn-ghost.danger:hover {
  color: var(--rouge-light);
  border-color: rgba(214, 69, 80, .5);
  background: rgba(214, 69, 80, .08);
}

/* ── 课程列表里的删除/重命名 ── */

.unit-row {
  display: flex;
  align-items: stretch;
  gap: 4px;
  min-width: 0;
}
.unit-row .unit { flex: 1; min-width: 0; overflow: hidden; }
.unit-body { flex: 1; min-width: 0; overflow: hidden; }
.unit-title {
  font-size: 13.5px;
  font-weight: 550;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  max-width: 100%;
}
.unit-sub {
  font-size: 10.5px;
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  max-width: 100%;
}
.unit-progress { flex: none; }

.unit-del, .unit-edit {
  flex: none;
  width: 28px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text-faint);
  font-size: 12px;
  cursor: pointer;
  opacity: 0;
  transition: all .18s var(--ease);
}
.unit-row:hover .unit-del,
.unit-row:hover .unit-edit { opacity: 1; }
.unit-del:hover { color: var(--rouge-light); background: rgba(214, 69, 80, .12); }
.unit-edit:hover { color: var(--bleu-light); background: rgba(43, 108, 176, .14); }

.tag-custom {
  font-size: 9px;
  font-weight: 700;
  color: var(--ambre);
  border: 1px solid rgba(217, 154, 61, .45);
  background: rgba(217, 154, 61, .1);
  border-radius: 4px;
  padding: 0 4px;
  flex: none;
}

.mini-btn {
  margin-left: auto;
  font: inherit;
  font-size: 11.5px;
  color: var(--text-faint);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 3px 10px;
  cursor: pointer;
  transition: all .18s var(--ease);
}
.mini-btn:hover { color: var(--bleu-light); border-color: rgba(74, 144, 217, .5); }

/* ── 引擎状态条 ── */

.engine-bar {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 13px;
  margin-bottom: 18px;
  font-size: 12.5px;
  color: var(--text-dim);
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
}

.engine-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
  background: var(--text-faint);
  box-shadow: 0 0 0 3px rgba(107, 120, 135, .15);
}
.engine-bar.is-ok    .engine-dot { background: var(--vert);  box-shadow: 0 0 0 3px rgba(63, 166, 107, .18); }
.engine-bar.is-warn  .engine-dot { background: var(--ambre); box-shadow: 0 0 0 3px rgba(217, 154, 61, .18); }
.engine-bar.is-error .engine-dot { background: var(--rouge); box-shadow: 0 0 0 3px rgba(214, 69, 80, .18); }
.engine-bar.is-loading .engine-dot { animation: blink 1s ease-in-out infinite; }

@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

.engine-text { flex: 1; min-width: 0; }
.engine-text b { color: var(--text); font-weight: 600; }

.engine-btn {
  flex: none;
  font: inherit;
  font-size: 11.5px;
  color: var(--bleu-light);
  background: rgba(43, 108, 176, .12);
  border: 1px solid rgba(74, 144, 217, .35);
  border-radius: 7px;
  padding: 3px 11px;
  cursor: pointer;
  transition: all .18s var(--ease);
}
.engine-btn:hover { background: rgba(43, 108, 176, .24); }

/* ── 电平表 ── */

.level-bar {
  width: 190px;
  height: 6px;
  margin-top: 4px;
  border-radius: 4px;
  background: var(--line);
  overflow: hidden;
}
.level-fill {
  height: 100%;
  width: 0%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--vert), #6fd39a);
  transition: width .06s linear, background .2s var(--ease);
}
.level-bar.is-clip .level-fill { background: linear-gradient(90deg, var(--ambre), var(--rouge-light)); }

/* ── 提示卡片（错误 / 说明） ── */

.notice {
  margin-top: 20px;
  padding: 15px 17px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--bg);
  animation: rise .3s var(--ease);
}
.notice-error {
  border-color: rgba(214, 69, 80, .4);
  background: rgba(214, 69, 80, .07);
}
.notice-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 14px;
  color: #ffb3ba;
}
.notice-detail {
  margin: 0 0 8px;
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.75;
}
.notice-advice {
  margin: 0 0 12px;
  font-size: 12.5px;
  color: var(--text-faint);
  line-height: 1.75;
}
.notice-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.btn-sm {
  font: inherit;
  font-size: 12.5px;
  color: var(--text-dim);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 14px;
  cursor: pointer;
  transition: all .18s var(--ease);
}
.btn-sm:hover { color: var(--text); border-color: var(--bleu); background: rgba(43, 108, 176, .16); }
.btn-sm.primary {
  color: #fff;
  background: linear-gradient(135deg, var(--bleu), var(--bleu-light));
  border-color: transparent;
}
.btn-sm.primary:hover { filter: brightness(1.1); }

/* ── 节奏评分的时长对比 ── */

.compare {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 4px 0 12px;
}
.compare-row {
  display: grid;
  grid-template-columns: 54px 1fr 62px;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--text-faint);
}
.compare-track {
  height: 14px;
  border-radius: 7px;
  background: var(--line);
  overflow: hidden;
}
.compare-fill {
  height: 100%;
  border-radius: 7px;
  transition: width .7s var(--ease);
}
.compare-row.is-ref  .compare-fill { background: linear-gradient(90deg, #2b6cb0, #4a90d9); }
.compare-row.is-mine .compare-fill { background: linear-gradient(90deg, #3fa66b, #6fd39a); }
.compare-row.is-mine.is-slow .compare-fill { background: linear-gradient(90deg, #b07a2a, #d99a3d); }
.compare-row.is-mine.is-fast .compare-fill { background: linear-gradient(90deg, #a83a44, #ef5a66); }
.compare-val {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
}

.compare-note {
  margin: 0 0 12px;
  font-size: 11.5px;
  color: var(--text-faint);
}
.rhythm-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── 弹窗 ── */

.modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 20px;
  animation: fade .2s var(--ease);
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.modal-mask {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .62);
}

.modal-box {
  position: relative;
  width: min(660px, 100%);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
  animation: rise .25s var(--ease);
}

.modal-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--line-soft);
  flex: none;
}
.modal-head h2 { margin: 0; font-size: 15.5px; font-weight: 600; }
.modal-x {
  margin-left: auto;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  font-size: 13px;
  color: var(--text-faint);
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all .18s var(--ease);
}
.modal-x:hover { color: var(--text); background: var(--surface-2); }

.modal-body {
  padding: 20px 22px;
  overflow-y: auto;
  flex: 1;
}
.modal-body::-webkit-scrollbar { width: 8px; }
.modal-body::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }

.modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 22px;
  border-top: 1px solid var(--line-soft);
  flex: none;
}

/* ── 表单 ── */

.field {
  display: block;
  margin-bottom: 16px;
}
.field.grow { flex: 1; min-width: 0; margin-bottom: 0; }

.field-label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 12px;
  color: var(--text-dim);
}
.field-hint {
  font-style: normal;
  font-size: 11.5px;
  color: var(--text-faint);
  margin-left: auto;
}

/* 必填/选填 标签（登录弹窗的「专业」用它说明：注册必填、登录可留空） */
.field-tag {
  font-size: 10px;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(120, 170, 255, .14);
  border: 1px solid rgba(120, 170, 255, .28);
  color: #9fc4ff;
  white-space: nowrap;
}
/* 字段下方的补充说明 */
.field-note {
  display: block;
  margin-top: 5px;
  font-size: 11px;
  color: var(--text-faint);
  line-height: 1.5;
}
/* 必填项漏选：红框 + 抖动，明确指出问题在哪个控件 */
.field-missing {
  border-color: var(--rouge) !important;
  box-shadow: 0 0 0 3px rgba(214, 69, 80, .18) !important;
  animation: field-shake .42s ease-in-out 2;
}
@keyframes field-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

input[type="text"], input[type="password"], textarea, select {
  width: 100%;
  padding: 10px 13px;
  font: inherit;
  font-size: 13.5px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 9px;
  outline: none;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
input[type="text"]:focus, input[type="password"]:focus, textarea:focus, select:focus {
  border-color: var(--bleu);
  box-shadow: 0 0 0 3px rgba(43, 108, 176, .18);
}
textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.7;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14.5px;
}
select { cursor: pointer; }

.field-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

/* ── 分句预览 ── */

.preview {
  margin-bottom: 16px;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  max-height: 210px;
  overflow-y: auto;
}
.preview-head {
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.preview-head b { color: var(--bleu-light); }
.preview-list {
  margin: 0;
  padding-left: 22px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--text-dim);
}
.preview-list li { margin-bottom: 3px; }
.preview-list li::marker { color: var(--text-faint); font-size: 11px; }

/* ── 诊断列表 ── */

.setting-section {
  margin-bottom: 26px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line-soft);
}
.setting-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.setting-section h3 {
  margin: 0 0 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
}
.section-desc {
  margin: 0 0 14px;
  font-size: 12px;
  line-height: 1.75;
  color: var(--text-faint);
}
.section-desc code {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 11.5px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--bleu-light);
  word-break: break-all;
}
.section-desc b { color: var(--text-dim); }

.diag-list {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--line-soft);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.diag-item {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 9px 13px;
  font-size: 12.5px;
  background: var(--bg);
}
.diag-icon { text-align: center; }
.diag-name { color: var(--text-dim); }
.diag-val {
  color: var(--text-faint);
  font-size: 11.5px;
  text-align: right;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.diag-item.is-ok   .diag-val { color: var(--vert); }
.diag-item.is-warn .diag-val { color: var(--ambre); }
.diag-item.is-bad  .diag-val { color: var(--rouge-light); }

.switch-line { margin-bottom: 16px; }
.switch-line .switch-text { font-size: 12.5px; }

.test-result {
  font-size: 12px;
  color: var(--text-faint);
}
.test-result.is-ok { color: var(--vert); }
.test-result.is-bad { color: var(--rouge-light); }

/* ── 谐音标注行 ── */

.phonetic-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: -6px 0 14px;
  padding: 6px 10px;
  background: rgba(217, 154, 61, .08);
  border: 1px solid rgba(217, 154, 61, .2);
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.7;
  animation: rise .25s var(--ease);
}
.phonetic-label {
  flex: none;
  font-size: 10px;
  color: var(--ambre);
  font-weight: 600;
  letter-spacing: .05em;
  padding: 1px 5px;
  border: 1px solid rgba(217, 154, 61, .3);
  border-radius: 4px;
}
.phonetic-text {
  color: var(--text-dim);
  word-break: break-all;
}
.ph-word {
  cursor: help;
  display: inline-block;
  padding: 0 2px;
  border-bottom: 1px dotted rgba(107, 120, 135, .3);
  transition: background .2s;
}
.ph-word:hover { background: rgba(217, 154, 61, .1); }

/* ── 可点击单词 ── */

.clickable-word {
  cursor: pointer;
  display: inline;
  padding: 2px 1px;
  border-radius: 4px;
  transition: background .15s var(--ease), box-shadow .15s var(--ease);
  position: relative;
}
.clickable-word:hover {
  background: rgba(74, 144, 217, .18);
}
.clickable-word:active {
  background: rgba(74, 144, 217, .3);
}
.clickable-word.is-speaking {
  background: rgba(74, 144, 217, .35);
  box-shadow: 0 0 0 2px rgba(74, 144, 217, .3);
  animation: word-pop .3s var(--ease);
}
.clickable-word.is-vocab::after {
  content: "⭐";
  font-size: 8px;
  position: absolute;
  top: -4px;
  right: -8px;
  opacity: .7;
}
@keyframes word-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

.mini-btn.is-active {
  color: var(--ambre);
  border-color: rgba(217, 154, 61, .5);
  background: rgba(217, 154, 61, .1);
}

/* ── 历史分数趋势 ── */

.score-history {
  margin: 8px 0 0;
  font-size: 11.5px;
  color: var(--text-faint);
  padding: 6px 10px;
  background: var(--bg);
  border-radius: 6px;
  display: inline-block;
}

/* ── 音标拆分行 ── */

.syllable-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: -6px 0 14px;
  padding: 6px 10px;
  background: rgba(63, 166, 107, .08);
  border: 1px solid rgba(63, 166, 107, .2);
  border-radius: 8px;
  font-size: 14px;
  line-height: 2;
  animation: rise .25s var(--ease);
  flex-wrap: wrap;
}
.syllable-text {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 1px;
  flex: 1;
}
.syl-group {
  display: inline-flex;
  flex-wrap: wrap;
  margin: 0 4px 0 0;
  vertical-align: middle;
}
.syl-group-sep {
  color: var(--text-faint);
  font-size: 11px;
  margin: 0 4px 0 0;
  align-self: center;
}
.syl-piece {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  padding: 1px 4px;
  border-radius: 4px;
  transition: background .15s var(--ease);
  position: relative;
  margin: 0 2px;
  min-width: 20px;
}
.syl-piece:hover {
  background: rgba(63, 166, 107, .18);
}
.syl-piece:active {
  background: rgba(63, 166, 107, .3);
}
.syl-piece.is-speaking {
  background: rgba(63, 166, 107, .35);
  animation: word-pop .3s var(--ease);
}
.syl-text {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.3;
}
.syl-ph {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.25;
  margin-top: 1px;
  font-family: -apple-system, "Segoe UI", sans-serif;
  white-space: nowrap;
}
/* 音节之间给个极淡的分隔，避免几块粘成一个词 */
.syl-piece + .syl-piece { box-shadow: inset 1px 0 0 var(--line-soft); }

/* ── 高分彩带庆祝特效 ── */

.confetti-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 200;
  overflow: hidden;
}
.confetti-piece {
  position: absolute;
  width: 10px;
  height: 10px;
  top: -20px;
  animation: confetti-fall 3s ease-out forwards;
}
@keyframes confetti-fall {
  0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

/* ── 移动端底部导航 ── */

.mobile-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 45;
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding: 6px 0 max(6px, env(safe-area-inset-bottom, 6px));
  justify-content: space-around;
}
.mnav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: transparent;
  border: none;
  color: var(--text-faint);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  transition: all .18s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.mnav-btn:active { background: var(--surface-2); }
.mnav-btn.is-active { color: var(--bleu-light); }
.mnav-icon { font-size: 18px; line-height: 1; }
.mnav-label { font-size: 9px; line-height: 1; white-space: nowrap; }

/* ── 意见反馈 ── */

.fb-kind-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.fb-kind-btn {
  font: inherit;
  font-size: 12.5px;
  color: var(--text-dim);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 7px 14px;
  cursor: pointer;
  transition: all .18s var(--ease);
  /* 触摸目标 */
  min-height: 38px;
}
.fb-kind-btn:hover { color: var(--text); border-color: var(--bleu); }
.fb-kind-btn.is-active {
  color: #fff;
  background: linear-gradient(135deg, var(--bleu), var(--bleu-light));
  border-color: transparent;
}
.fb-thanks {
  margin: 12px 0 0;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--vert);
  background: rgba(63, 166, 107, .1);
  border: 1px solid rgba(63, 166, 107, .35);
  border-radius: 10px;
  text-align: center;
}

/* 管理员反馈收件箱 */
.fb-inbox-count {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  color: #fff;
  background: var(--rouge);
  border-radius: 10px;
  padding: 1px 7px;
  margin-left: 6px;
  vertical-align: middle;
}
.fb-inbox-list {
  max-height: 320px;
  overflow-y: auto;
}
.fb-card {
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  margin-bottom: 8px;
  background: var(--bg);
}
.fb-card.is-done { opacity: .55; }
.fb-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: var(--text-faint);
  margin-bottom: 6px;
}
.fb-kind-tag {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 5px;
  background: rgba(43, 108, 176, .18);
  color: var(--bleu-light);
}
.fb-card-kind-bug .fb-kind-tag { background: rgba(214, 69, 80, .15); color: var(--rouge-light); }
.fb-card-kind-content .fb-kind-tag { background: rgba(217, 154, 61, .15); color: var(--ambre); }
.fb-from { font-weight: 600; color: var(--text-dim); }
.fb-text {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}
.fb-contact { font-size: 11px; color: var(--text-faint); margin-top: 4px; }
.fb-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.fb-actions .btn-sm { padding: 3px 10px; font-size: 11px; }
.fb-status-done { color: var(--vert); }
.fb-status-new-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--rouge);
}

/* ── AI 翻译弹窗 ── */

/* 方向切换条 */
.trans-dir {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 14px;
}
.trans-dir-btn {
  font: inherit;
  font-size: 13px;
  color: var(--text-dim);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 7px 18px;
  cursor: pointer;
  transition: all .18s var(--ease);
}
.trans-dir-btn:hover { color: var(--text); border-color: var(--bleu); }
.trans-dir-btn.is-active {
  color: #fff;
  background: linear-gradient(135deg, var(--bleu), var(--bleu-light));
  border-color: transparent;
  box-shadow: 0 2px 10px rgba(43, 108, 176, .35);
}
.trans-dir-btn.switch {
  width: 36px;
  padding: 7px 0;
  font-size: 15px;
  border-radius: 10px;
  color: var(--bleu-light);
  border-color: rgba(74, 144, 217, .4);
  background: rgba(43, 108, 176, .1);
}
.trans-dir-btn.switch:hover { transform: rotate(180deg); background: rgba(43, 108, 176, .2); }

/* 输入行 + 翻译按钮（手机端没有可靠的回车键，必须有可见按钮） */
.trans-input-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.trans-input-row input { flex: 1; min-width: 0; }
.trans-go-btn {
  flex: none;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, var(--bleu), var(--bleu-light));
  border: none;
  border-radius: 10px;
  padding: 0 18px;
  /* 触摸目标 ≥44px（移动端可访问性） */
  min-width: 64px;
  min-height: 44px;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(43, 108, 176, .35);
  transition: all .18s var(--ease);
}
.trans-go-btn:hover { transform: translateY(-1px); box-shadow: 0 5px 16px rgba(43, 108, 176, .45); }
.trans-go-btn:active { transform: translateY(0); }
.trans-go-btn:disabled { opacity: .55; cursor: wait; }

/* 译文卡片 */
.trans-ai-result {
  margin-top: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(74, 144, 217, .35);
  border-radius: 10px;
  background: rgba(43, 108, 176, .08);
  animation: rise .25s var(--ease);
}
.trans-ai-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.trans-ai-head .btn-sm { margin-left: 0; padding: 4px 10px; font-size: 11.5px; }
.trans-ai-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--bleu-light);
  text-transform: uppercase;
}
.trans-ai-head .btn-sm:last-of-type { margin-left: auto; }
.trans-ai-text {
  font-size: 15px;
  line-height: 1.8;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}
.trans-ai-text::first-line { font-size: 17px; font-weight: 550; }

.trans-loading {
  margin-top: 12px;
  padding: 12px;
  text-align: center;
  font-size: 13px;
  color: var(--text-faint);
  animation: blink 1.2s ease-in-out infinite;
}
.trans-error {
  margin-top: 12px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--rouge-light);
  background: rgba(214, 69, 80, .08);
  border: 1px solid rgba(214, 69, 80, .35);
  border-radius: 10px;
}

/* ── 课程例句搜索（原中译法） ── */

.trans-results {
  max-height: 340px;
  overflow-y: auto;
  margin-bottom: 8px;
}
.trans-empty {
  color: var(--text-faint);
  font-size: 12.5px;
  text-align: center;
  padding: 16px;
  margin: 0;
}
.trans-card {
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  margin-bottom: 8px;
  background: var(--bg);
  animation: rise .2s var(--ease);
}
.trans-card:last-child { margin-bottom: 0; }
.trans-fr {
  margin: 0 0 4px;
  font-size: 14px;
  color: var(--text);
  font-family: Georgia, "Times New Roman", serif;
}
.trans-zh {
  margin: 0;
  font-size: 12.5px;
  color: var(--text-dim);
}
.trans-tip {
  margin: 6px 0 0;
  font-size: 11.5px;
  color: var(--text-faint);
}

/* ── 生词本 ── */

.vocab-list {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 260px;
  overflow-y: auto;
}
.vocab-empty {
  color: var(--text-faint);
  font-size: 12.5px;
  text-align: center;
  padding: 12px;
}
.vocab-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  font-size: 13px;
}
.vocab-fr {
  font-family: Georgia, "Times New Roman", serif;
  color: var(--text);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vocab-zh {
  color: var(--text-faint);
  font-size: 11.5px;
  flex: none;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vocab-del {
  flex: none;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--text-faint);
  font-size: 10px;
  cursor: pointer;
  transition: all .15s var(--ease);
}
.vocab-del:hover { color: var(--rouge-light); border-color: rgba(214, 69, 80, .4); }

.btn-secondary {
  background: linear-gradient(135deg, var(--surface-2), var(--surface));
  box-shadow: none;
}
.btn-secondary:hover { filter: brightness(1.08); }

/* ── 波形可视化 ── */

.waveform-canvas {
  display: block;
  width: 100%;
  height: 80px;
  margin-top: 18px;
  border-radius: var(--radius-sm);
  background: rgba(13, 17, 23, .6);
  border: 1px solid var(--line-soft);
}

/* ── 统计仪表盘 ── */

.week-chart {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 120px;
  padding: 10px 4px 0;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 12px;
}
.week-bar {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  gap: 4px;
}
.week-bar-fill {
  width: 100%;
  max-width: 36px;
  min-height: 4px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, var(--bleu-light), var(--bleu));
  transition: height .6s var(--ease);
}
.week-bar-label {
  font-size: 10px;
  color: var(--text-faint);
  flex: none;
}
.week-bar-val {
  font-size: 9px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  flex: none;
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.stat-card {
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  padding: 12px;
  text-align: center;
}
.stat-card-num {
  display: block;
  font-size: 24px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--bleu-light);
  line-height: 1.2;
}
.stat-card-label {
  display: block;
  font-size: 10.5px;
  color: var(--text-faint);
  margin-top: 4px;
}

.focus-timer {
  text-align: center;
  padding: 12px;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  margin-top: 8px;
}
.focus-time {
  font-size: 42px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  letter-spacing: .06em;
  font-family: ui-monospace, "SF Mono", monospace;
  line-height: 1.2;
}
.focus-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}

/* ── 公告栏 ── */

.announce-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(217, 154, 61, .12), rgba(217, 154, 61, .06));
  border: 1px solid rgba(217, 154, 61, .25);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.5;
  margin-bottom: 4px;
  animation: rise .3s var(--ease);
}
.announce-icon { flex: none; font-size: 16px; }
.announce-text { flex: 1; min-width: 0; }
.announce-text b { color: var(--ambre); }

/* ── 登录弹窗 ── */

#loginModal .modal-box { max-width: 380px; }

/* ── 管理员面板 ── */

.admin-announce-list, .admin-user-list {
  max-height: 200px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}
.admin-announce-item, .admin-user-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  font-size: 12px;
}
.admin-announce-item .announce-body { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-announce-item .announce-author { color: var(--text-faint); font-size: 10.5px; flex: none; }
.admin-announce-item .announce-del {
  flex: none; width: 22px; height: 22px; display: grid; place-items: center;
  background: transparent; border: 1px solid var(--line); border-radius: 5px;
  color: var(--text-faint); font-size: 10px; cursor: pointer;
}
.admin-announce-item .announce-del:hover { color: var(--rouge-light); border-color: rgba(214, 69, 80, .4); }
.admin-user-item .user-name { flex: 1; font-weight: 500; }
.admin-user-item .user-time { color: var(--text-faint); font-size: 10.5px; }
.admin-user-item.is-admin .user-name { color: var(--ambre); font-weight: 600; }

/* 管理员操作他人账号的按钮组 */
.admin-user-actions {
  display: flex;
  gap: 5px;
  flex: none;
}
.admin-user-btn {
  font: inherit;
  font-size: 10.5px;
  color: var(--text-dim);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 3px 9px;
  cursor: pointer;
  transition: all .16s var(--ease);
  /* 触摸目标 */
  min-height: 30px;
}
.admin-user-btn:hover { color: var(--bleu-light); border-color: rgba(74, 144, 217, .5); background: rgba(43, 108, 176, .12); }
.admin-user-btn.danger:hover { color: var(--rouge-light); border-color: rgba(214, 69, 80, .5); background: rgba(214, 69, 80, .1); }

/* ── 个人中心 ── */

.profile-bookmarks {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12.5px;
}
.profile-bookmark-item {
  padding: 6px 10px;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  color: var(--text-dim);
  font-family: Georgia, serif;
  cursor: pointer;
}
.profile-bookmark-item:hover { color: var(--text); border-color: rgba(74, 144, 217, .3); }

.profile-best {
  font-size: 13px;
  color: var(--text-dim);
  padding: 8px 12px;
  background: var(--bg);
  border-radius: 8px;
}

/* ── 音素学习 ── */

.phoneme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 6px;
}
.phoneme-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 4px;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  cursor: pointer;
  transition: all .15s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.phoneme-item:hover { border-color: rgba(74, 144, 217, .4); background: rgba(43, 108, 176, .08); }
.phoneme-item:active { transform: scale(.95); }
.phoneme-item .ph-symbol {
  font-size: 18px;
  font-weight: 600;
  color: var(--bleu-light);
  font-family: Georgia, serif;
}
.phoneme-item .ph-ipa {
  font-size: 10px;
  color: var(--vert);
  font-family: ui-monospace, monospace;
  font-style: italic;
}
.phoneme-item .ph-example {
  font-size: 9.5px;
  color: var(--text-faint);
  text-align: center;
  line-height: 1.2;
}
.phoneme-item .ph-chinese {
  font-size: 9px;
  color: var(--ambre);
  text-align: center;
}

/* ── 视频学习模块 ── */

.video-embed-wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  background: #000;
}
.video-embed-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}
.video-info {
  padding: 14px 18px;
}
.video-info h3 {
  margin: 0 0 4px;
  font-size: 16px;
  color: var(--text);
}
.video-meta {
  margin: 0 0 8px;
  font-size: 11.5px;
  color: var(--text-faint);
}
.video-desc {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.6;
}

.video-catalog {
  padding: 16px 18px;
}
.video-category {
  margin-bottom: 18px;
}
.video-category-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 4px;
}
.video-category-desc {
  font-size: 11.5px;
  color: var(--text-faint);
  margin: 0 0 10px;
}
.video-lesson-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px;
}
.video-lesson-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all .15s var(--ease);
}
.video-lesson-card:hover {
  border-color: rgba(74, 144, 217, .4);
  background: rgba(43, 108, 176, .06);
}
.video-lesson-num {
  flex: none;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  background: rgba(43, 108, 176, .15);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--bleu-light);
}
.video-lesson-info { flex: 1; min-width: 0; }
.video-lesson-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  margin: 0 0 2px;
  line-height: 1.3;
}
.video-lesson-meta {
  font-size: 10.5px;
  color: var(--text-faint);
}
.video-lesson-level {
  flex: none;
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  color: #fff;
  background: var(--bleu);
}
.video-lesson-level.lv-A0 { background: #6b7887; }
.video-lesson-level.lv-A1 { background: #2b6cb0; }
.video-lesson-level.lv-A2 { background: #3fa66b; }
.video-lesson-level.lv-B1 { background: #d99a3d; }
.video-lesson-level.lv-B2 { background: #d64550; }

/* ── 打卡按钮 ── */

#btnCheckin.is-done {
  background: linear-gradient(135deg, rgba(63, 166, 107, .25), rgba(63, 166, 107, .1));
  border-color: rgba(63, 166, 107, .4);
  color: var(--vert);
}
#btnCheckin.is-done .btn-primary-sm span { opacity: .8; }

/* ── PWA 安装提示 ── */

.pwa-install-banner {
  position: fixed;
  bottom: 70px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--surface-2);
  border: 1px solid var(--bleu);
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .5);
  /* 40：低于侧栏抽屉(50)和底部导航(45)。
     原来是 95，会浮在抽屉上方挡住「粘贴内容跟读」和功能网格。 */
  z-index: 40;
  animation: pwa-slide-up .4s var(--ease);
  max-width: min(90vw, 380px);
}
@keyframes pwa-slide-up {
  from { opacity: 0; transform: translate(-50%, 20px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.pwa-banner-icon img { border-radius: 8px; display: block; }
.pwa-banner-text { flex: 1; min-width: 0; }
.pwa-banner-text b {
  display: block; font-size: 13px; color: var(--text);
}
.pwa-banner-text span {
  display: block; font-size: 11px; color: var(--text-faint); margin-top: 1px;
}
.pwa-banner-btn {
  flex: none; font: inherit; font-size: 12px; font-weight: 600;
  color: #fff; background: linear-gradient(135deg, var(--bleu), var(--bleu-light));
  border: none; border-radius: 8px; padding: 6px 16px; cursor: pointer;
}
.pwa-banner-close {
  flex: none; width: 24px; height: 24px; display: grid; place-items: center;
  background: transparent; border: none; color: var(--text-faint);
  font-size: 12px; cursor: pointer; padding: 0;
}
.pwa-banner-close:hover { color: var(--text); }

/* ── 排行榜 ── */

.lb-tabs {
  display: flex; gap: 4px; margin-bottom: 12px;
  background: var(--bg); border: 1px solid var(--line-soft); border-radius: 8px; padding: 3px;
}
.lb-tab {
  flex: 1; font: inherit; font-size: 12px; color: var(--text-faint);
  background: transparent; border: none; border-radius: 6px; padding: 6px 0; cursor: pointer;
  transition: all .15s var(--ease);
}
.lb-tab.is-active { color: #fff; background: var(--bleu); font-weight: 600; }
.lb-list { display: flex; flex-direction: column; gap: 2px; }
.lb-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  background: var(--bg); border-radius: 8px; font-size: 13px;
}
.lb-item.is-me { background: rgba(43, 108, 176, .12); border: 1px solid rgba(74, 144, 217, .3); }
.lb-rank {
  flex: none; width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: 50%; font-size: 12px; font-weight: 700; background: var(--surface-2); color: var(--text-faint);
}
.lb-rank.r1 { background: #ffd700; color: #333; }
.lb-rank.r2 { background: #c0c0c0; color: #333; }
.lb-rank.r3 { background: #cd7f32; color: #fff; }
.lb-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-name.is-admin { color: var(--ambre); font-weight: 600; }
.lb-score { flex: none; font-weight: 600; color: var(--bleu-light); font-variant-numeric: tabular-nums; }
.lb-label { flex: none; font-size: 10px; color: var(--text-faint); }

/* ── 讨论区 ── */

.forum-new-post textarea, .forum-new-post input {
  width: 100%; padding: 8px 10px; font: inherit; font-size: 13px;
  color: var(--text); background: var(--bg); border: 1px solid var(--line);
  border-radius: 8px; outline: none; resize: vertical;
}
.forum-new-post textarea:focus, .forum-new-post input:focus {
  border-color: var(--bleu); box-shadow: 0 0 0 3px rgba(43, 108, 176, .12);
}
.forum-posts { display: flex; flex-direction: column; gap: 8px; max-height: 400px; overflow-y: auto; }
.forum-post {
  padding: 10px 12px; background: var(--bg); border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
}
.forum-post-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
}
.forum-post-author { font-size: 12px; font-weight: 600; color: var(--bleu-light); }
.forum-post-time { font-size: 10.5px; color: var(--text-faint); margin-left: auto; }
.forum-post-title { font-size: 14px; font-weight: 600; color: var(--text); margin: 0 0 4px; }
.forum-post-content { font-size: 13px; color: var(--text-dim); line-height: 1.6; margin: 0 0 8px; }
.forum-post-actions { display: flex; gap: 12px; align-items: center; }
.forum-action {
  font: inherit; font-size: 11.5px; color: var(--text-faint); background: transparent;
  border: none; cursor: pointer; padding: 2px 4px; border-radius: 4px;
  display: flex; align-items: center; gap: 3px;
}
.forum-action:hover { color: var(--bleu-light); background: rgba(43, 108, 176, .08); }
.forum-action.is-liked { color: var(--rouge-light); }
.forum-replies { margin-top: 8px; padding-left: 12px; border-left: 2px solid var(--line-soft); }
.forum-reply {
  padding: 5px 0; font-size: 12px; color: var(--text-dim);
  border-bottom: 1px solid var(--line-soft);
}
.forum-reply:last-child { border-bottom: none; }
.forum-reply-author { color: var(--bleu-light); font-weight: 500; margin-right: 6px; }
.forum-reply-time { color: var(--text-faint); font-size: 10px; margin-left: 6px; }
.forum-reply-input {
  display: flex; gap: 6px; margin-top: 6px;
}
.forum-reply-input input {
  flex: 1; padding: 5px 8px; font: inherit; font-size: 12px;
  color: var(--text); background: var(--surface); border: 1px solid var(--line);
  border-radius: 6px; outline: none;
}
.forum-reply-input input:focus { border-color: var(--bleu); }
.forum-empty { text-align: center; padding: 20px; color: var(--text-faint); font-size: 13px; }

/* ── AI 免费预设 ── */

.ai-preset-info {
  padding: 10px 14px;
  background: rgba(63, 166, 107, .06);
  border: 1px solid rgba(63, 166, 107, .2);
  border-radius: 8px;
  margin-bottom: 12px;
}
.ai-preset-info .section-desc { margin: 0 0 4px; color: var(--vert); }
.ai-preset-link {
  font-size: 12.5px;
  color: var(--bleu-light);
  text-decoration: none;
  font-weight: 500;
}
.ai-preset-link:hover { text-decoration: underline; }

/* ── 查词结果 ── */

.dict-result {
  margin-top: 12px;
  padding: 14px 16px;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  color: var(--text-dim);
  line-height: 1.8;
  max-height: 300px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
.dict-result .dict-word {
  font-size: 20px;
  font-weight: 700;
  color: var(--bleu-light);
  font-family: Georgia, serif;
  margin-bottom: 4px;
}
.dict-result .dict-phonetic {
  font-size: 13px;
  color: var(--vert);
  font-style: italic;
  margin-bottom: 8px;
}
.dict-result .dict-loading {
  color: var(--text-faint);
  font-style: italic;
}
/* 标题词：点一下就发音 */
.dict-result .dict-word-row { margin-bottom: 2px; }
.dict-result .dict-word-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  margin: 0 0 0 -4px;
  padding: 2px 6px;
  background: none;
  border: 0;
  border-radius: 6px;
  font-family: Georgia, serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--bleu-light);
  text-align: left;
  white-space: normal;
  cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.dict-result .dict-word-btn:hover,
.dict-result .dict-word-btn.is-playing { background: rgba(43, 108, 176, .16); }
.dict-result .dict-spk { font-size: 14px; opacity: .75; }
/* 释义里的每个法语词都可点读 */
.dict-result .dict-tap {
  padding: 0 1px;
  border-bottom: 1px dashed var(--line);
  border-radius: 3px;
  cursor: pointer;
  transition: background .12s var(--ease), color .12s var(--ease), border-color .12s var(--ease);
}
.dict-result .dict-tap:hover {
  color: var(--bleu-light);
  border-bottom-color: var(--bleu);
  background: rgba(43, 108, 176, .1);
}
.dict-result .dict-tap.is-playing {
  color: var(--bleu-light);
  background: rgba(43, 108, 176, .28);
  border-bottom-color: transparent;
}
.dict-result .dict-tip {
  margin: 10px 0 0;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--text-faint);
}

/* ── 消息通知 ── */

.notif-btn {
  position: relative;
  font-size: 16px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  margin-right: 4px;
  border-radius: 6px;
}
.notif-btn:hover { background: var(--surface-2); }
.notif-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  background: var(--rouge);
  color: #fff;
  border-radius: 10px;
  font-size: 9px;
  font-weight: 700;
  padding: 0 3px;
}
.notif-list {
  max-height: 350px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.notif-item {
  display: flex;
  gap: 8px;
  padding: 8px 10px;
  background: var(--bg);
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--text-dim);
}
.notif-item.is-unread {
  background: rgba(43, 108, 176, .08);
  border-left: 3px solid var(--bleu-light);
}
.notif-icon { flex: none; font-size: 14px; }
.notif-text { flex: 1; line-height: 1.4; }
.notif-time { flex: none; font-size: 10px; color: var(--text-faint); }

/* ── 闯关练习 ── */

.quiz-progress {
  font-size: 13px;
  font-weight: 600;
  color: var(--bleu-light);
  margin-left: auto;
  margin-right: 8px;
  font-variant-numeric: tabular-nums;
}
.quiz-type-btns { padding: 0 20px; }
.quiz-question {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  text-align: center;
  margin-bottom: 20px;
  line-height: 1.5;
}
.quiz-question .quiz-blank {
  display: inline-block;
  min-width: 80px;
  border-bottom: 2px solid var(--bleu-light);
  color: var(--bleu-light);
  font-family: monospace;
}
.quiz-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 0 16px;
}
.quiz-option {
  font: inherit;
  font-size: 14px;
  color: var(--text);
  background: var(--surface-2);
  border: 2px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  transition: all .15s var(--ease);
  text-align: center;
}
.quiz-option:hover { border-color: var(--bleu); background: rgba(43, 108, 176, .08); }
.quiz-option.is-correct { border-color: var(--vert); background: rgba(63, 166, 107, .12); color: var(--vert); font-weight: 600; }
.quiz-option.is-wrong { border-color: var(--rouge); background: rgba(214, 69, 80, .12); color: var(--rouge-light); }
.quiz-scramble-words {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  padding: 0 16px;
  margin-bottom: 16px;
}
.quiz-word-chip {
  font: inherit;
  font-size: 14px;
  color: var(--text);
  background: var(--surface-2);
  border: 2px solid var(--line);
  border-radius: 8px;
  padding: 8px 14px;
  cursor: pointer;
  transition: all .15s var(--ease);
}
.quiz-word-chip:hover { border-color: var(--bleu); }
.quiz-word-chip.is-used { opacity: .3; pointer-events: none; }
.quiz-answer-line {
  text-align: center;
  font-size: 16px;
  color: var(--bleu-light);
  font-family: Georgia, serif;
  min-height: 30px;
  margin-bottom: 16px;
  padding: 0 16px;
}
.quiz-feedback {
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  margin-top: 12px;
  min-height: 24px;
}
.quiz-feedback.is-correct { color: var(--vert); }
.quiz-feedback.is-wrong { color: var(--rouge-light); }
.quiz-next-btn {
  display: block;
  margin: 12px auto 0;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, var(--bleu), var(--bleu-light));
  border: none;
  border-radius: 10px;
  padding: 10px 30px;
  cursor: pointer;
}

/* ── 字母表练习 ── */

.alpha-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 6px;
  margin-bottom: 14px;
}
.alpha-letter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 4px;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  cursor: pointer;
  transition: all .15s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.alpha-letter:hover { border-color: rgba(74,144,217,.4); background: rgba(43,108,176,.08); }
.alpha-letter:active { transform: scale(.95); }
.alpha-letter.is-playing {
  border-color: rgba(74,144,217,.7);
  background: rgba(43,108,176,.15);
  animation: letter-pop .3s var(--ease);
}
@keyframes letter-pop {
  0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); }
}
.alpha-letter .al-char {
  font-size: 22px;
  font-weight: 700;
  color: var(--bleu-light);
  font-family: Georgia, serif;
  line-height: 1;
}
.alpha-letter .al-word {
  font-size: 9px;
  color: var(--text-faint);
  text-align: center;
  line-height: 1.1;
}
.alpha-controls {
  display: flex;
  gap: 8px;
  justify-content: center;
}

/* ── 公告栏列表 ── */

.announce-board-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 400px;
  overflow-y: auto;
}
.announce-card {
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
}
.announce-card.is-important {
  border-color: rgba(217, 154, 61, .35);
  background: rgba(217, 154, 61, .06);
}
.announce-card-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.announce-card-icon { font-size: 14px; flex: none; }
.announce-card-author {
  font-size: 11.5px;
  color: var(--bleu-light);
  font-weight: 500;
}
.announce-card-time {
  font-size: 10.5px;
  color: var(--text-faint);
  margin-left: auto;
}
.announce-card-text {
  font-size: 13.5px;
  color: var(--text-dim);
  line-height: 1.6;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}
.announce-card.is-important .announce-card-text {
  color: var(--ambre);
}

/* ── AI 聊天助手 ── */

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg);
  min-height: 200px;
}
.chat-msg {
  display: flex;
  max-width: 85%;
}
.chat-msg.is-ai { align-self: flex-start; }
.chat-msg.is-user { align-self: flex-end; }
.chat-bubble {
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.7;
  word-break: break-word;
  white-space: pre-wrap;
}
.chat-msg.is-ai .chat-bubble {
  background: var(--surface-2);
  color: var(--text);
  border-bottom-left-radius: 4px;
}
.chat-msg.is-user .chat-bubble {
  background: linear-gradient(135deg, var(--bleu), var(--bleu-light));
  color: #fff;
  border-bottom-right-radius: 4px;
}
.chat-msg.is-typing .chat-bubble {
  background: var(--surface-2);
  color: var(--text-faint);
  font-style: italic;
}
.chat-input-area {
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--line-soft);
  flex: none;
}
.chat-input-area input {
  flex: 1;
  padding: 10px 14px;
  font: inherit;
  font-size: 13.5px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  outline: none;
}
.chat-input-area input:focus { border-color: var(--bleu); }
.chat-send-btn {
  flex: none;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, var(--bleu), var(--bleu-light));
  border: none;
  border-radius: 10px;
  padding: 8px 18px;
  cursor: pointer;
}
.chat-send-btn:disabled { opacity: .5; cursor: not-allowed; }
.chat-quick {
  display: flex;
  gap: 6px;
  padding: 0 14px 10px;
  flex-wrap: wrap;
  flex: none;
}
.chat-quick button {
  font: inherit;
  font-size: 11px;
  color: var(--text-dim);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 4px 12px;
  cursor: pointer;
  transition: all .15s var(--ease);
}
.chat-quick button:hover { border-color: var(--bleu); color: var(--bleu-light); }

@media (min-width: 981px) {
  .pwa-install-banner { bottom: 20px; }
}

/* ── OCR 图片识别 ── */

.ocr-upload {
  text-align: center;
  padding: 24px;
  border: 2px dashed var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.ocr-upload .btn-primary-sm { width: auto; }
.ocr-hint {
  font-size: 11.5px;
  color: var(--text-faint);
  margin: 0;
}
.ocr-preview { margin-bottom: 16px; }
.ocr-image {
  max-width: 100%;
  max-height: 300px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  display: block;
}
.ocr-status {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
}
.ocr-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--line);
  border-top-color: var(--bleu-light);
  border-radius: 50%;
  animation: ocr-spin .8s linear infinite;
}
@keyframes ocr-spin { to { transform: rotate(360deg); } }
.ocr-status-text { font-size: 13px; color: var(--text-dim); }
.ocr-result { animation: rise .3s var(--ease); }
.ocr-result h3 {
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--text);
}
.ocr-text {
  width: 100%;
  min-height: 100px;
  padding: 10px 13px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 9px;
  resize: vertical;
  margin-bottom: 12px;
}

/* ══════════ 响应式 ══════════ */

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

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 288px;
    z-index: 50;
    transform: translateX(-102%);
    transition: transform .28s var(--ease);
    background: var(--bg-soft);
    /* 抽屉本身不再滚：中部区 .sidebar-scroll 才是滚动容器，
       品牌/统计固定在上、页脚固定在下方，滚动时不会互相覆盖。 */
    overflow: hidden;
    /* iOS 安全区内边距，避免被 Home 指示条盖住 */
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .sidebar.is-open { transform: translateX(0); }

  /* 手机端：页脚是 flex 列的最后一块，正常参与布局（不再 sticky）。
     以前 sticky 会让它浮在内容上面，把功能网格/课程单元压掉一大条。 */
  .sidebar-foot {
    position: relative;
    z-index: 3;
    flex: none;
    background: var(--bg-soft);
    border-top: 1px solid var(--line-soft);
    box-shadow: 0 -8px 16px rgba(0, 0, 0, .28);
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  }
  /* 触屏没有键盘快捷键，这行提示纯占高度 */
  .sidebar-foot .hint { display: none; }

  .menu-btn { display: grid; }

  /* ── 手机抽屉内部重排 ──
     顺序：品牌 → 统计 → 课程单元（选课是第一要务）→ 功能网格 → 页脚。
     课程单元和功能网格都在 .sidebar-scroll 里，靠 order 互换先后；
     两者共用同一个滚动条，不再各自限高互相挤压。 */
  .sidebar { display: flex; flex-direction: column; }
  .brand { order: 0; flex: none; }
  .stats { order: 1; flex: none; }
  .sidebar-scroll {
    order: 2;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .unit-list {
    order: 2;
    flex: none;
    /* 取消内部滚动：整段交给 .sidebar-scroll 单流滚动，
       嵌套滚动区在抽屉里会把单元行裁一半。 */
    max-height: none;
    overflow: visible;
    padding: 2px 12px 10px;
  }
  .sidebar-actions { order: 1; flex: none; }
  /* 手机端同样取消内部限高，交给外层 .sidebar-scroll 统一滚动 */
  .sidebar-actions { max-height: none; overflow: visible; }
  .sidebar-actions::-webkit-scrollbar { display: none; }
  .sidebar-actions::before {
    content: '功能';
    display: block;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .08em;
    color: var(--text-faint);
    padding: 10px 4px 8px;
  }
  .sidebar-foot { order: 10; }
  /* 触屏没有 hover：自定义单元的 ✎ 重命名 / ✕ 删除按钮常显 */
  .unit-row .unit-edit,
  .unit-row .unit-del { opacity: 1; }
  .unit { padding: 12px; }
  /* 手机端标题/徽章挤压：截图里长标题（àmani…）顶开进度徽章、
     徽章又被挤到贴边。收紧间距、给徽章设下限、允许标题更省字。 */
  .unit-title { font-size: 13.5px; }
  .unit-sub { font-size: 10.5px; }
  .unit-progress { padding: 2px 6px; font-size: 9.5px; }
  .unit-row { gap: 3px; }

  .stage { padding: 18px 16px 90px; }

  .card { padding: 18px; }

  .result {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 16px;
  }
  .feedback { width: 100%; }

  .controls { gap: 10px; }
  .control-right {
    margin-left: 0;
    width: 100%;
    justify-content: space-between;
    gap: 12px;
  }
  input[type="range"] { width: 100px; }

  .topbar { padding: 12px 16px; }
  .badge { max-width: 130px; }

  .mobile-nav { display: flex; }

  /* 手机端顶栏常驻「⚙ 设置」——不依赖侧栏抽屉，保证任何情况下都能进设置 */
  .settings-btn { display: grid; }

  .fr-sentence { font-size: clamp(20px, 3.5vw, 30px); }
  .clickable-word { padding: 3px 2px; }
}

@media (max-width: 520px) {
  .fr-sentence { font-size: 19px; }
  .diff { font-size: 14px; }
  .switch-text { display: none; }
  .mode-tab { padding: 5px 8px; font-size: 11px; }
  .card-head { flex-wrap: wrap; gap: 8px; }
  .btn-play { padding: 0 14px; font-size: 12px; height: 36px; }

  .switch-line .switch-text { display: inline; }
  .level-bar { width: 100%; }
  .compare-row { grid-template-columns: 40px 1fr 48px; font-size: 10px; }
  .modal { padding: 12px; align-items: center; }
  /* 92vh 居中 + 圆角，不再是顶天立地的全屏面板（管理员面板显示不全的观感问题）；
     标题栏吸顶，长内容滚动时关闭按钮永远可见 */
  .modal-box { max-height: 92vh; height: auto; border-radius: 14px; }
  .modal-head {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--surface);
    border-radius: 14px 14px 0 0;
  }
  .modal-foot {
    position: sticky;
    bottom: 0;
    z-index: 3;
    background: var(--surface);
    border-radius: 0 0 14px 14px;
  }
  .field-row { flex-direction: column; align-items: stretch; }
  .field.grow { margin-bottom: 12px; }
  .diag-val { max-width: 130px; }
  .notice-actions .btn-sm { flex: 1; }

  .phonetic-row { font-size: 11.5px; padding: 4px 8px; }
  .phonetic-text { font-size: 11.5px; }

  .icon-btn { width: 36px; height: 36px; font-size: 11px; }
  .mic-btn { width: 76px; height: 76px; }
  .mic-core { width: 56px; height: 56px; font-size: 22px; }

  .stage { padding: 12px 12px 80px; }
  .card { padding: 14px; }

  .mobile-nav { padding: 4px 0 max(4px, env(safe-area-inset-bottom, 4px)); }
  .mnav-icon { font-size: 16px; }
  .mnav-label { font-size: 8px; }

  .result { gap: 12px; }
  .score-wrap { width: 120px; height: 120px; }
  .score-num { font-size: 30px; line-height: 120px; }
  .feedback-text { font-size: 13px; }
  .word { padding: 1px 5px; font-size: 15px; }
  .legend { gap: 8px; font-size: 10px; }
}

@media (max-width: 380px) {
  .fr-sentence { font-size: 17px; }
  .topbar { padding: 8px 10px; }
  .breadcrumb { font-size: 11px; }
  .badge { max-width: 100px; font-size: 10px; }
  .stage { padding: 8px 8px 76px; }
  .card { padding: 10px; }
  .control-right { gap: 8px; }
  input[type="range"] { width: 80px; }
  .mnav-icon { font-size: 14px; }
  .mnav-label { font-size: 7px; }
  .phonetic-row { font-size: 10px; }
}


/* ── 音素学习标签页 ── */

.phoneme-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 14px;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 3px;
}
.phoneme-tab {
  flex: 1;
  font: inherit;
  font-size: 13px;
  font-weight: 550;
  color: var(--text-faint);
  background: transparent;
  border: none;
  border-radius: 6px;
  padding: 7px 0;
  cursor: pointer;
  transition: all .15s var(--ease);
}
.phoneme-tab.is-active {
  color: #fff;
  background: var(--bleu);
}
.phoneme-tab:hover:not(.is-active) { color: var(--text); }

/* ── 发音规则卡片 ── */

.pron-rules-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pron-rule-card {
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.pron-rule-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  cursor: pointer;
  transition: background .15s var(--ease);
  user-select: none;
}
.pron-rule-head:hover { background: rgba(43, 108, 176, .06); }
.pron-rule-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
}
.pron-rule-toggle {
  font-size: 10px;
  color: var(--text-faint);
  transition: transform .2s var(--ease);
}
.pron-rule-body {
  padding: 0 14px 12px;
}
.pron-rule-text {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.7;
  margin: 0 0 10px;
}
.pron-rule-example {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 6px 10px;
  background: var(--surface);
  border-radius: 6px;
  margin-bottom: 4px;
}
.pron-rule-word {
  font-size: 15px;
  font-weight: 600;
  color: var(--bleu-light);
  font-family: Georgia, serif;
  min-width: 70px;
}
.pron-rule-note {
  font-size: 12px;
  color: var(--text-faint);
}
.pron-rule-tip {
  font-size: 12px;
  color: var(--ambre);
  margin: 8px 0 0;
  padding: 8px 10px;
  background: rgba(217, 154, 61, .06);
  border-left: 3px solid rgba(217, 154, 61, .3);
  border-radius: 0 6px 6px 0;
  line-height: 1.5;
}


/* ── 音素标记（与单词分开显示） ── */

.phoneme-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 10px;
  margin-right: 8px;
  background: rgba(74, 144, 217, .12);
  border: 1px solid rgba(74, 144, 217, .3);
  border-radius: 8px;
  font-family: Georgia, serif;
  font-size: 0.9em;
  font-weight: 600;
  color: var(--bleu-light);
  cursor: pointer;
  transition: all .15s var(--ease);
  vertical-align: middle;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.phoneme-badge:hover {
  background: rgba(74, 144, 217, .2);
  border-color: rgba(74, 144, 217, .5);
}
.phoneme-badge.is-speaking {
  background: rgba(74, 144, 217, .3);
  animation: word-pop .3s var(--ease);
}


/* ── 每日一句 ── */

.daily-card {
  border: 1px solid rgba(217, 154, 61, .3);
  background: linear-gradient(135deg, rgba(217, 154, 61, .06), rgba(43, 108, 176, .04));
}
.daily-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
.daily-icon { font-size: 20px; }
.daily-label { font-size: 13px; font-weight: 600; color: var(--ambre); }
.daily-date { margin-left: auto; font-size: 11px; color: var(--text-faint); }
.daily-fr {
  font-family: Georgia, serif; font-size: 18px; color: #fff;
  margin: 0 0 6px; line-height: 1.5;
}
.daily-zh { font-size: 13px; color: var(--text-dim); margin: 0 0 6px; }
.daily-note { font-size: 11.5px; color: var(--text-faint); margin: 0 0 10px; }

/* ── 动词变位 ── */

.verb-result {
  margin-top: 12px; padding: 12px 14px;
  background: var(--bg); border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  max-height: 350px; overflow-y: auto;
  font-size: 13px; color: var(--text-dim); line-height: 1.7;
}
.verb-result .verb-name {
  font-size: 18px; font-weight: 700; color: var(--bleu-light);
  font-family: Georgia, serif; margin-bottom: 6px;
}
.verb-result .verb-tense {
  font-size: 12px; font-weight: 600; color: var(--ambre);
  margin: 10px 0 4px; padding-bottom: 2px; border-bottom: 1px solid var(--line-soft);
}
.verb-result .verb-form {
  display: flex; justify-content: space-between; padding: 2px 0;
}
.verb-result .verb-pron { color: var(--text-faint); font-size: 12px; }

/* ── 成就徽章 ── */

.achievements-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin-top: 10px;
}
.achievement {
  text-align: center; padding: 10px 4px;
  background: var(--bg); border: 1px solid var(--line-soft); border-radius: 8px;
  opacity: .3;
}
.achievement.is-earned {
  opacity: 1;
  border-color: rgba(217, 154, 61, .35);
  background: rgba(217, 154, 61, .06);
}
.achievement .ach-icon { font-size: 24px; margin-bottom: 4px; }
.achievement .ach-name { font-size: 10px; color: var(--text-dim); line-height: 1.2; }
.achievement.is-earned .ach-name { color: var(--ambre); }

/* ══════════════════════════════════════════════════════════════════
   矮屏（横屏手机 / 小窗笔记本）压缩侧栏固定区，把空间让给中部滚动区
   ─────────────────────────────────────────────────────────────────
   横屏手机可视高度只有 330~420px：品牌 66 + 统计 78 + 页脚 162 = 306，
   中部几乎没地方了。这里把固定区收紧，保证「功能网格」和「课程单元」
   始终有一屏可滚动的高度。
   ══════════════════════════════════════════════════════════════════ */
@media (max-height: 620px) {
  .brand { padding: 8px 16px 6px; }
  .brand-flag { width: 32px; height: 32px; border-radius: 8px; }
  .brand-text h1 { font-size: 13.5px; }
  .brand-sub { display: none; }
  .stats { padding-bottom: 10px; }
  .stat { padding: 6px 6px; }
  .stat-num { font-size: 16px; }
  .stat-label { font-size: 10px; }
  .sidebar-foot { padding-top: 8px; padding-bottom: 8px; }
  .sidebar-foot .hint { display: none; }
  .disclaimer { padding: 2px 16px 4px; }
  .btn-icon-tile { padding: 6px 4px; }
}

/* ══════════════════════════════════════════════════════════════════
   窄屏顶栏：只保留「☰ / 课程·句子 / 翻译 / 登录」一行，
   语音引擎名（Microsoft Denise Online - French 之类）太占宽度，
   在小屏上收起来（设置面板里能看到完整名称）。
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 520px) {
  .topbar { gap: 8px; }
  .topbar-right { gap: 6px; }
  #voiceBadge { display: none; }
  .topbar-right .badge { padding: 4px 9px; font-size: 10.5px; }
  .breadcrumb { font-size: 11.5px; gap: 5px; }
  /* 手机端顶部控件（☰、翻译、登录）不小于 32px，避免误触 */
  .topbar .icon-btn { width: 32px; height: 32px; }
}

/* ══════════════════════════════════════════════════════════════════
   窄屏「循环 / 自动下一句」：曾把 .switch-text 整体隐藏，
   结果两个开关光秃秃两个滑块，用户不知道哪个是哪个（截图里就很懵）。
   这里改成：语速独占一行，两个开关带文字另起一行。
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 520px) {
  .control-right {
    flex-wrap: wrap;
    gap: 10px 14px;
    justify-content: flex-start;
  }
  .control-right .rate { flex: 1 1 100%; }
  .control-right .rate input[type="range"] { width: 100%; }
  .control-right .switch-text {
    display: inline;
    font-size: 10.5px;
    white-space: nowrap;
  }
  .control-right .switch { gap: 6px; }
}


/* 注册引导：注册按钮脉冲高亮 */
.btn-register-hint { animation: pulse-register .9s var(--ease) 3; }
@keyframes pulse-register {
  50% {
    transform: scale(1.06);
    border-color: var(--bleu-light);
    color: var(--bleu-light);
    box-shadow: 0 0 0 4px rgba(74, 144, 217, .18);
  }
}


/* 用户分组管理 */
.user-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-faint);
  flex: none;
  max-width: 46%;
  overflow: hidden;
}
.user-group-sel {
  max-width: 120px;
  padding: 3px 4px;
  font: inherit;
  font-size: 11px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text-dim);
}

/* ── HTTP 访问提示条（录音需要 HTTPS） ── */
.http-notice {
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 205, 60, .96);
  color: #241c00;
  font-size: 12.5px;
  line-height: 1.4;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}
.http-notice-text { flex: 1; min-width: 0; }
.http-notice-link {
  flex: none;
  padding: 4px 10px;
  border-radius: 20px;
  background: #241c00;
  color: #ffd76e;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.http-notice-x {
  flex: none;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .12);
  color: #241c00;
  font-size: 12px;
  cursor: pointer;
}

/* ── 学生：打卡弹窗里的「我的录音」 ── */
.hw-mine {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid rgba(90, 180, 120, .45);
  border-radius: 10px;
  background: rgba(90, 180, 120, .07);
}
.hw-mine-head { font-size: 12px; color: #7ec89a; margin-bottom: 8px; }
.hw-mine-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.hw-mine-label { flex: none; min-width: 52px; font-size: 11.5px; color: var(--text-dim); }
.hw-mine-row audio { flex: 1; height: 32px; max-width: 100%; }

/* 作业卡片上的「回放我的录音」小按钮 */
.hw-play-mine {
  margin-left: 8px;
  padding: 2px 8px;
  font: inherit;
  font-size: 11px;
  color: var(--bleu-light);
  background: rgba(43, 108, 176, .14);
  border: 1px solid rgba(43, 108, 176, .4);
  border-radius: 20px;
  cursor: pointer;
}
.hw-play-mine:hover { background: rgba(43, 108, 176, .24); }

/* ── 管理员：学生完成情况 ── */
.hw-prog-bar { display: flex; gap: 8px; margin-bottom: 10px; }
.hw-prog-select {
  flex: 1;
  min-width: 0;
  padding: 7px 10px;
  font: inherit;
  font-size: 12.5px;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.hw-prog-stat {
  font-size: 12px;
  color: var(--text-dim);
  padding: 8px 10px;
  margin-bottom: 10px;
  border-radius: 8px;
  background: var(--surface-2);
  line-height: 1.5;
}
.hw-prog-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 52vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.hw-prog-row {
  padding: 9px 11px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface-2);
}
.hw-prog-row.is-ok { border-color: rgba(90, 180, 120, .45); }
.hw-prog-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hw-prog-name { font-size: 13px; font-weight: 600; color: var(--text); }
.hw-prog-user { margin-left: 6px; font-size: 11px; font-weight: 400; color: var(--text-faint); }
.hw-prog-badge {
  flex: none;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--surface);
  color: var(--text-faint);
}
.hw-prog-badge.is-ok { color: #7ec89a; background: rgba(90, 180, 120, .14); }
.hw-prog-badge.is-miss { color: var(--rouge-light); background: rgba(214, 69, 80, .12); }
.hw-prog-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 5px;
  font-size: 11.5px;
  color: var(--text-dim);
}
.hw-prog-play { margin-left: auto; }
.hw-prog-audio { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line-soft); }
.hw-prog-audio-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.hw-prog-audio-row span { flex: none; min-width: 52px; font-size: 11.5px; color: var(--text-dim); }
.hw-prog-audio-row audio { flex: 1; height: 32px; max-width: 100%; }

/* ══════════ 线上 PK（双人对战）══════════ */
.pk-mine {
  padding: 10px 12px;
  margin-bottom: 12px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--surface-2);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-dim);
}
.pk-mine-line { color: var(--text); }
.pk-top { margin-top: 3px; font-size: 11.5px; color: var(--text-faint); }

.pk-create {
  width: 100%;
  padding: 11px;
  font-size: 14px;
}

.pk-join { margin-top: 16px; }
.pk-join-label { margin-bottom: 7px; font-size: 11.5px; color: var(--text-faint); text-align: center; }
.pk-join-row { display: flex; gap: 8px; }
.pk-code-input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  font: inherit;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .28em;
  text-align: center;
  text-transform: uppercase;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.pk-code-input::placeholder { font-weight: 400; letter-spacing: .2em; color: var(--text-faint); }
.pk-code-input:focus { outline: none; border-color: var(--bleu-light); }

.pk-tip { margin: 14px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--text-faint); text-align: center; }

/* 房间头 */
.pk-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.pk-room-code { font-size: 12px; color: var(--text-dim); }
.pk-room-code b { font-size: 15px; letter-spacing: .1em; color: var(--text); }
.pk-copy {
  margin-left: 6px;
  padding: 2px 8px;
  font: inherit;
  font-size: 10.5px;
  color: var(--bleu-light);
  background: rgba(43, 108, 176, .14);
  border: 1px solid rgba(43, 108, 176, .4);
  border-radius: 20px;
  cursor: pointer;
}
.pk-copy:hover { background: rgba(43, 108, 176, .26); }
.pk-progress { font-size: 11.5px; color: var(--text-faint); font-variant-numeric: tabular-nums; }

/* 比分 */
.pk-score { display: flex; align-items: center; gap: 10px; margin: 4px 0 12px; }
.pk-side {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--surface-2);
  transition: border-color .2s, background .2s;
}
.pk-side.is-done { border-color: rgba(90, 180, 120, .55); background: rgba(90, 180, 120, .08); }
.pk-side.is-away { opacity: .55; }
.pk-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11.5px;
  color: var(--text-dim);
}
.pk-pts { font-size: 19px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.15; }
.pk-vs { flex: none; font-size: 11px; letter-spacing: .04em; color: var(--text-faint); }

/* 等待 / 倒计时 */
.pk-wait {
  padding: 22px 14px;
  text-align: center;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-dim);
  white-space: pre-line;
}

/* 题目 */
.pk-timer { height: 4px; margin: 2px 0 12px; border-radius: 4px; background: var(--surface); overflow: hidden; }
.pk-timer i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--bleu-light);
  transition: width .12s linear, background .2s;
}
.pk-timer i.is-urgent { background: var(--rouge-light); }
.pk-timer i.is-held { background: var(--text-faint); opacity: .45; transition: opacity .2s; }

.pk-q-kind { margin-bottom: 6px; font-size: 11.5px; color: var(--text-faint); text-align: center; }
.pk-q-text {
  margin-bottom: 14px;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  color: var(--text);
  word-break: break-word;
}
.pk-q-text.is-fr { font-family: Georgia, "Times New Roman", serif; }

.pk-options { display: flex; flex-direction: column; gap: 8px; }
.pk-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 13px;
  font: inherit;
  font-size: 14px;
  text-align: left;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .08s;
}
.pk-option:hover:not(:disabled) { background: rgba(43, 108, 176, .16); border-color: rgba(43, 108, 176, .5); }
.pk-option:active:not(:disabled) { transform: scale(.985); }
.pk-opt-letter {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  background: var(--surface);
  border-radius: 50%;
}
.pk-opt-text { flex: 1; min-width: 0; line-height: 1.4; word-break: break-word; }

.pk-option.is-right { background: rgba(90, 180, 120, .18); border-color: rgba(90, 180, 120, .65); }
.pk-option.is-right .pk-opt-letter { background: rgba(90, 180, 120, .3); color: #a8e5bf; }
.pk-option.is-wrong { background: rgba(214, 69, 80, .16); border-color: rgba(214, 69, 80, .6); }
.pk-option.is-wrong .pk-opt-letter { background: rgba(214, 69, 80, .3); color: #ffb3b8; }
.pk-option.is-answer { border-style: dashed; border-color: rgba(90, 180, 120, .6); }
.pk-option.is-locked { opacity: .85; cursor: default; }

.pk-after { margin-top: 10px; text-align: center; font-size: 12px; color: var(--text-dim); }

/* 结算 */
.pk-result { padding: 6px 0 2px; text-align: center; }
.pk-result-title { margin-bottom: 8px; font-size: 22px; font-weight: 700; }
.pk-result-title.is-win { color: #7ec89a; }
.pk-result-title.is-lose { color: var(--text-dim); }
.pk-result-title.is-tie { color: var(--bleu-light); }
.pk-result-note { margin-bottom: 10px; font-size: 12px; color: var(--text-faint); }
.pk-result-table { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.pk-result-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  font-size: 12.5px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface-2);
}
.pk-result-row.is-me { border-color: rgba(74, 144, 217, .5); }
.pk-result-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  color: var(--text);
}
.pk-result-score { flex: none; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.pk-result-tip { font-size: 11px; color: var(--text-faint); }

@media (max-width: 420px) {
  .pk-q-text { font-size: 18px; }
  .pk-option { padding: 10px 11px; font-size: 13.5px; }
  .pk-pts { font-size: 17px; }
  .pk-result-title { font-size: 19px; }
}

/* ── PK：大厅新增（快速匹配 / 人数选择） ── */
.pk-hint-sm { margin: 6px 0 0; font-size: 11px; line-height: 1.5; color: var(--text-faint); text-align: center; }

.pk-or {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 12px;
  font-size: 11.5px;
  color: var(--text-faint);
}
.pk-or::before, .pk-or::after { content: ''; flex: 1; height: 1px; background: var(--line-soft); }

.pk-size-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.pk-size-label { font-size: 12px; color: var(--text-dim); }
.pk-size-group { display: flex; gap: 6px; }
.pk-size-btn {
  padding: 5px 12px;
  font: inherit;
  font-size: 12px;
  color: var(--text-dim);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 20px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.pk-size-btn:hover { border-color: var(--bleu-light); }
.pk-size-btn.is-on { color: #fff; background: var(--bleu-light); border-color: var(--bleu-light); }

/* ── PK：匹配中 ── */
.pk-match-anim {
  margin: 10px 0 6px;
  font-size: 40px;
  line-height: 1;
  text-align: center;
  animation: pkPulse 1.2s ease-in-out infinite;
}
@keyframes pkPulse {
  0%, 100% { transform: scale(1); opacity: .7; }
  50% { transform: scale(1.16); opacity: 1; }
}
.pk-match-title { margin-bottom: 6px; font-size: 15px; font-weight: 600; text-align: center; color: var(--text); }
.pk-match-sub {
  font-size: 12.5px;
  text-align: center;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.pk-match-hint {
  min-height: 34px;
  margin: 10px 0 16px;
  padding: 0 6px;
  font-size: 11.5px;
  line-height: 1.6;
  text-align: center;
  color: var(--text-faint);
}
.pk-match-cancel { display: block; margin: 0 auto; }

/* ── PK：多人比分（3~4 人时变 2×2 网格） ── */
.pk-score.is-multi {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.pk-side.is-empty {
  border-style: dashed;
  border-color: var(--line);
  background: transparent;
  opacity: .5;
}
.pk-side.is-me { border-color: rgba(74, 144, 217, .45); }
.pk-side.is-empty .pk-pts { color: var(--text-faint); font-size: 15px; }

/* 等待区 */
.pk-wait-tip { line-height: 1.75; }
.pk-wait-sub { margin-top: 10px; font-size: 12px; color: var(--text-faint); }
.pk-start-btn { margin-top: 14px; padding: 9px 22px; font-size: 13.5px; }

/* ── PK：结算排行榜 ── */
.pk-result-medal { flex: none; width: 20px; font-size: 14px; text-align: center; }
.pk-result-row.is-top {
  border-color: rgba(230, 190, 90, .5);
  background: rgba(230, 190, 90, .08);
}
.pk-result-name { flex: 1; }

@media (max-width: 420px) {
  .pk-size-btn { padding: 5px 10px; font-size: 11.5px; }
  .pk-match-anim { font-size: 34px; }
}