/* ===== SPARK智慧课程平台 - 学生端样式 ===== */
:root {
  --primary: #0e7c66;
  --primary-dark: #0a5d4d;
  --primary-light: #e6f4f0;
  --accent: #2d7dd2;
  --accent-light: #e8f1fb;
  --warm: #d97706;
  --warm-light: #fdf3e3;
  --danger: #dc2626;
  --text: #1f2937;
  --text-light: #6b7280;
  --border: #e5e7eb;
  --bg: #f5f7f6;
  --card: #ffffff;
  --radius: 12px;
  --shadow: 0 1px 3px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.06);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
/* 微信内置浏览器横屏兼容：横屏旋转后若出现横向滚动（视口宽度未更新），WebKit/X5 会让
   position: sticky 整体失效（标题栏/Tab 栏不吸顶）。overflow-x: clip 隐藏横向溢出但
   不创建滚动容器（hidden 会破坏 sticky，clip 不会），支持性 fallback 到 hidden */
html { overflow-x: hidden; overflow-x: clip; }
body {
  margin: 0; /* 消除默认 8px 边距（iPad PWA 全屏时两侧/顶部白边来源） */
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}
a { color: var(--primary); text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ===== 登录页 ===== */
.login-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0e7c66 0%, #0f5f7a 100%);
  padding: 20px;
}
.login-card {
  width: 100%;
  max-width: 400px;
  background: #fff;
  border-radius: 16px;
  padding: 40px 36px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.login-logo { text-align: center; margin-bottom: 28px; }
.logo-circle {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #fff;
  font-size: 30px;
  font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
}
.login-logo h1 { font-size: 22px; color: var(--text); }
.login-logo p { font-size: 24px; color: var(--text-light); margin-top: 4px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 24px; color: var(--text); margin-bottom: 6px; font-weight: 500; }
.field input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 24px;
  outline: none;
  transition: border-color .2s;
}
.field input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(14,124,102,.12); }
.login-hint { font-size: 12px; color: var(--text-light); margin-bottom: 16px; }
.login-error {
  background: #fef2f2;
  color: var(--danger);
  font-size: 24px;
  padding: 10px 12px;
  border-radius: 8px;
  margin-bottom: 14px;
}
.login-footer { text-align: center; font-size: 12px; color: var(--text-light); margin-top: 24px; }

/* ===== 通用按钮 ===== */
.btn {
  display: inline-block;
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  font-size: 24px;
  font-weight: 500;
  transition: all .2s;
}
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-outline { background: #fff; color: var(--primary); border: 1px solid var(--primary); }
.btn-outline:hover { background: var(--primary-light); }
.btn-ghost { background: transparent; color: var(--text-light); }
.btn-ghost:hover { background: #f3f4f6; }
.btn-block { width: 100%; padding: 12px; font-size: 24px; }
.btn-sm { padding: 6px 14px; font-size: 24px; }
.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { background: #2563a8; }
.btn-warm { background: var(--warm); color: #fff; }
.btn-warm:hover { background: #b45f04; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ===== 顶部导航 ===== */
.topbar {
  background: #fff;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 100;
  /* 安全区自适应：standalone 时视口延伸到状态栏下，topbar 顶部留出状态栏高度（浏览器模式 env=0 无副作用） */
  padding-top: env(safe-area-inset-top, 0px);
}
/* 桌面 App（standalone）形态：状态栏透明悬浮在页面上，topbar 顶部留出状态栏高度（20px 保底 ≈ 状态栏图标底部，
   v0818.30 从 24 收到 20：logo 上移 4px 贴合图标底；若个别设备仍遮挡则回调 22） */
@media (display-mode: standalone) {
  .topbar { padding-top: max(env(safe-area-inset-top, 0px), 20px); }
  .topbar-inner { padding-top: 0; }
}
.topbar-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 12px 16px;
  display: flex; align-items: center; justify-content: space-between;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand .logo-mini {
  width: 34px; height: 34px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #fff; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
}
.brand-name { font-size: 24px; font-weight: 600; }
.app-ver { font-size: 11px; color: #9ca3af; font-weight: 400; margin-left: 6px; white-space: nowrap; }
.topbar-user { display: flex; align-items: center; gap: 12px; }
.topbar-user .topbar-home {
  color: var(--primary);
  font-size: 20px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.topbar-user .topbar-home:hover { text-decoration: underline; color: var(--primary-dark); }
.topbar-user .user-chip {
  background: var(--primary-light);
  color: var(--primary-dark);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 20px;
  font-weight: 500;
}
.topbar-user .logout {
  color: var(--text-light);
  font-size: 20px;
  border: none; background: none;
}
.topbar-user .logout:hover { color: var(--danger); }
/* 浏览器全屏按钮（隐藏浏览器标签/地址栏，扩大学习区） */
.topbar-user .fs-btn {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 15px;
  line-height: 1.3;
  cursor: pointer;
  flex-shrink: 0;
}
.topbar-user .fs-btn:hover { background: var(--primary-dark); }

/* ===== 主容器 ===== */
.container { max-width: 1400px; margin: 0 auto; padding: 20px 16px 60px; }
.page-title { font-size: 22px; font-weight: 700; margin-bottom: 4px; }
.page-sub { font-size: 24px; color: var(--text-light); margin-bottom: 20px; }

/* ===== 卡片 ===== */
.card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  margin-bottom: 16px;
}
.card-title {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 14px;
  display: flex; align-items: center; gap: 8px;
}
.card-title .bar {
  width: 4px; height: 18px;
  background: var(--primary);
  border-radius: 2px;
}

/* ===== 学习数据概览 ===== */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 20px;
}
.stat-item {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 10px 6px;
  text-align: center;
}
.stat-item .num { font-size: 24px; font-weight: 700; color: var(--primary); }
.stat-item .num .stat-sub { font-size: 15px; font-weight: 600; color: #A6A6A6; } /* 分母/满分后缀：小两号、弱化色 */
.stat-item .label { font-size: 11px; color: var(--text-light); margin-top: 3px; }

/* ===== 课程列表 ===== */
.lesson-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.lesson-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
  border-left: 4px solid var(--primary);
  transition: transform .15s, box-shadow .15s;
  display: block;
  color: var(--text);
}
.lesson-card:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(0,0,0,.1); }
.lesson-card .unit-tag {
  font-size: 14px;
  color: var(--primary);
  background: var(--primary-light);
  padding: 2px 8px;
  border-radius: 10px;
  display: inline-block;
  margin-bottom: 8px;
}
.lesson-card h3 { font-size: 24px; margin-bottom: 2px; }
.lesson-card .ko-title { font-size: 24px; color: var(--text-light); margin-bottom: 8px; }
.lesson-card .meta { font-size: 12px; color: var(--text-light); display: flex; gap: 12px; }
.lesson-card.locked { border-left-color: #d1d5db; opacity: .65; }
.lesson-card.done { border-left-color: var(--warm); }

/* ===== 本周任务 ===== */
.task-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.task-item:last-child { border-bottom: none; }
.task-check {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid var(--border);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  cursor: pointer;
  margin-top: 2px;
  background: #fff;
  transition: all .2s;
}
.task-check.checked { background: var(--primary); border-color: var(--primary); color: #fff; }
.task-info { flex: 1; }
.task-info .task-name { font-size: 24px; font-weight: 500; }
.task-info .task-desc { font-size: 12px; color: var(--text-light); }
.task-tag {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  flex-shrink: 0;
}
.tag-online { background: var(--accent-light); color: var(--accent); }
.tag-offline { background: var(--warm-light); color: var(--warm); }
.tag-done { background: var(--primary-light); color: var(--primary); }

/* ===== 课程学习页 ===== */
.back-link { display: inline-flex; align-items: center; gap: 4px; font-size: 24px; margin-bottom: 12px; color: var(--text-light); }
.back-link:hover { color: var(--primary); }
.lesson-hero {
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
  color: #fff;
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 16px;
}
.lesson-hero .unit-tag { font-size: 16px; opacity: .9; margin-bottom: 6px; display: block; }
.lesson-hero h1 { font-size: 24px; margin-bottom: 4px; }
.lesson-hero .ko { font-size: 24px; opacity: .9; }

/* Tab 导航 */
.tabs {
  display: flex;
  gap: 4px;
  background: #fff;
  border-radius: var(--radius);
  padding: 6px;
  box-shadow: var(--shadow);
  margin-bottom: 16px;
  overflow-x: auto;
  flex-wrap: nowrap;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* 吸顶滚动防渲染伪影（iPad Safari sticky+overflow 组合易出文字变形/残影）：
     三层加固——translate3d 强制合成层 + backface 防翻转重绘 + contain 限制绘制影响范围 */
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
  contain: layout paint;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: 0 0 auto;
  min-width: 90px;
  padding: 10px 12px;
  border: none;
  background: transparent;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* 单个 tab 也建立自己的合成层，文字（含 emoji）独立渲染，避免整体重绘 */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 8px;
  font-size: 24px;
  font-weight: 500;
  color: var(--text-light);
  white-space: nowrap;
  transition: all .2s;
}
.tab.active { background: var(--primary); color: #fff; }
.tab:hover:not(.active) { background: var(--primary-light); color: var(--primary); }

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

/* 视频列表 */
.video-list { display: grid; gap: 10px; }
.video-item {
  display: flex; align-items: center; gap: 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  transition: all .2s;
}
.video-item:hover { border-color: var(--primary); background: var(--primary-light); }
.video-item.playing { border-color: var(--primary); background: var(--primary-light); }
.video-item .v-thumb {
  width: 88px; height: 50px;
  border-radius: 6px;
  background: #1f2937;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 24px;
  flex-shrink: 0;
}
.video-item .v-info { flex: 1; }
.video-item .v-name { font-size: 24px; font-weight: 500; }
.video-item .v-desc { font-size: 12px; color: var(--text-light); }
.video-item .v-status { font-size: 12px; color: var(--primary); flex-shrink: 0; }
.video-player-wrap {
  background: #000;
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 14px;
  display: none;
}
.video-player-wrap.show { display: block; }
.video-player-wrap video { width: 100%; display: block; max-height: 420px; }

/* ===== 自定义视频控件（替代浏览器原生 controls，倍速仅 1x/1.5x） ===== */
.v-controls {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.78));
  color: #fff; font-size: 12px;
}
.vc-btn {
  background: none; border: none; color: #fff;
  font-size: 15px; line-height: 1; cursor: pointer;
  padding: 4px 6px; border-radius: 6px; flex-shrink: 0;
  min-width: 26px; text-align: center;
}
.vc-btn:active { background: rgba(255,255,255,.18); }
.vc-speed { font-size: 12px; font-weight: 700; min-width: 44px; }
.vc-bar {
  position: relative; flex: 1; height: 18px; cursor: pointer;
  display: flex; align-items: center; touch-action: none;
}
.vc-bar::before {
  content: ''; position: absolute; left: 0; right: 0; height: 4px;
  background: rgba(255,255,255,.28); border-radius: 2px;
}
.vc-buf { position: absolute; left: 0; height: 4px; background: rgba(255,255,255,.4); border-radius: 2px; width: 0; }
.vc-fill { position: absolute; left: 0; height: 4px; background: #4FC3A1; border-radius: 2px; width: 0; }
.vc-thumb {
  position: absolute; top: 50%; transform: translate(-50%,-50%);
  width: 12px; height: 12px; border-radius: 50%;
  background: #4FC3A1; box-shadow: 0 1px 4px rgba(0,0,0,.5);
  left: 0; pointer-events: none;
}
.vc-time { white-space: nowrap; font-variant-numeric: tabular-nums; flex-shrink: 0; }

/* 自定义全屏（CSS 伪全屏：避免 iOS/浏览器全屏播放器的系统倍速菜单） */
.video-player-wrap.v-fullscreen {
  position: fixed !important;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  z-index: 99999;
  background: #000;
  margin: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
}
.video-player-wrap.v-fullscreen video {
  flex: 1;
  min-height: 0;
  max-height: none;
  width: 100%;
  object-fit: contain;
  background: #000;
}
.video-player-wrap.v-fullscreen .v-controls { flex-shrink: 0; padding: 12px 14px; gap: 12px; }
/* 全屏后放大控制按钮（尤其退出全屏 ⛶），iPad/手机触屏易点中（≥48px 热区） */
.video-player-wrap.v-fullscreen .vc-btn {
  font-size: 22px; line-height: 1; padding: 12px 14px;
  min-width: 52px; min-height: 52px;
}
.video-player-wrap.v-fullscreen #vcFull {
  font-size: 26px; min-width: 56px; min-height: 56px;
  background: rgba(255,255,255,.14); border-radius: 10px;
}
.video-player-wrap.v-fullscreen .vc-speed { font-size: 15px; min-width: 52px; }

/* 单词表 */
.vocab-hint { font-size: 24px; color: var(--text-light); margin-bottom: 12px; }
.vocab-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.vocab-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; row-gap: 4px;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .1s;
}
.vocab-item:hover { background: var(--accent-light); border-color: var(--primary-light); }
.vocab-item:active { transform: scale(.98); }
.vocab-item .ko { font-size: 24px; font-weight: 600; }
.vocab-item .pos { font-size: 12px; color: var(--accent); background: var(--accent-light); padding: 1px 6px; border-radius: 8px; margin-left: 6px; }
.vocab-item .cn { font-size: 24px; color: var(--text-light); }
.btn-audio {
  background: none; border: none;
  font-size: 24px;
  cursor: pointer;
  margin-left: 6px;
  padding: 2px;
  opacity: .75;
  transition: opacity .15s;
}
.btn-audio:hover { opacity: 1; }
.dialogue-title-wrap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dialogue-title-wrap h4 { margin: 14px 0 6px; }

/* 语法卡片 */
.grammar-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 12px;
}
.grammar-card h4 { font-size: 17px; color: var(--primary-dark); margin-bottom: 6px; }
.grammar-card .usage { font-size: 13.5px; color: var(--text-light); margin-bottom: 6px; }
.grammar-card .cn { font-size: 24px; margin-bottom: 12px; }
.grammar-card .examples { border-left: 3px solid var(--primary-light); padding-left: 12px; }
.grammar-card .ex { margin-bottom: 8px; }
.grammar-card .ex .ko { font-size: 24px; }
.grammar-card .ex .ko.ex-playable { cursor: pointer; }
.grammar-card .ex .ko.ex-playable:hover { text-decoration: underline; }
.grammar-card .ex .cn { font-size: 24px; color: var(--text-light); }

/* 对话 */
.dialogue-box { background: var(--card); border-radius: var(--radius); padding: 16px; }
.dialogue-line { display: flex; gap: 10px; padding: 10px 8px; border-bottom: 1px dashed var(--border); border-radius: 6px; }
.dialogue-line:last-child { border-bottom: none; }
.dialogue-line.playable { cursor: pointer; transition: background .15s; }
.dialogue-line.playable:hover { background: var(--accent-light); }
.dialogue-line.playing { background: var(--accent-light); }
.dialogue-line .spk {
  width: 76px; flex-shrink: 0;
  white-space: nowrap; /* 三字人名（如 金仲基）不换行 */
  font-size: 24px; font-weight: 600;
  color: var(--accent);
  background: var(--accent-light);
  border-radius: 6px;
  padding: 3px 0;
  text-align: center;
  height: fit-content;
}
/* 同说话人连续句的占位（无标签行对齐第一句内容起始位置） */
.dialogue-line .spk-spacer { width: 76px; flex-shrink: 0; }
.dialogue-line .ko { font-size: 24px; }
.dialogue-line .cn { font-size: 21px; color: var(--text-light); }

/* ===== 闪卡 ===== */
.flashcard-stage {
  max-width: 420px;
  margin: 0 auto 16px;
  perspective: 1000px;
}
.flashcard {
  width: 100%;
  height: 240px;
  position: relative;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform .4s;
}
.flashcard.flipped { transform: rotateY(180deg); }
.flashcard .face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  box-shadow: var(--shadow);
  padding: 20px;
}
.flashcard .front { background: linear-gradient(135deg, var(--primary), var(--accent)); color: #fff; }
.flashcard .front .ko { font-size: 42px; font-weight: 700; }
.flashcard .front .hint { font-size: 24px; opacity: .85; margin-top: 10px; }
.flashcard .back { background: #fff; transform: rotateY(180deg); border: 2px solid var(--primary-light); }
.flashcard .back .cn { font-size: 24px; font-weight: 600; }
.flashcard .back .pos { font-size: 24px; color: var(--text-light); margin-top: 6px; }
.flashcard-controls { display: flex; gap: 10px; justify-content: center; margin-bottom: 16px; }
.flashcard-progress { text-align: center; font-size: 24px; color: var(--text-light); margin-bottom: 16px; }

/* ===== 作业 ===== */
.hw-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 12px;
}
.hw-card h4 { font-size: 24px; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
.hw-card .hw-type {
  font-size: 11px; padding: 2px 8px; border-radius: 10px;
  background: var(--warm-light); color: var(--warm);
}
.hw-card p.desc { font-size: 24px; color: var(--text-light); margin-bottom: 12px; }
.hw-card textarea {
  width: 100%;
  min-height: 80px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 24px;
  font-family: inherit;
  resize: vertical;
  outline: none;
}
.hw-card textarea:focus { border-color: var(--primary); }
.hw-status { font-size: 12px; margin-top: 8px; }
.hw-status.done { color: var(--primary); }
.hw-status.pending { color: var(--warm); }

/* 小测 */
.quiz-question { margin-bottom: 18px; }
.quiz-question .q-title { font-size: 24px; font-weight: 600; margin-bottom: 10px; }
.quiz-option {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  font-size: 24px;
  border-radius: 8px;
  margin-bottom: 8px;
  cursor: pointer;
  font-size: 24px;
  transition: all .15s;
}
.quiz-option:hover { border-color: var(--primary); background: var(--primary-light); }
.quiz-option.selected { border-color: var(--primary); background: var(--primary-light); font-weight: 500; }
.quiz-option .opt-key {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #f3f4f6;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600;
  flex-shrink: 0;
}
.quiz-option.selected .opt-key { background: var(--primary); color: #fff; }
.quiz-result {
  background: var(--primary-light);
  border-radius: 10px;
  padding: 14px;
  text-align: center;
  margin-top: 12px;
}
.quiz-result .score { font-size: 28px; font-weight: 700; color: var(--primary); }

/* ===== 教师端 ===== */
.dash-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; }
.dash-filter { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.dash-filter select, .dash-filter input {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 24px;
  outline: none;
}
.dash-filter select:focus, .dash-filter input:focus { border-color: var(--primary); }
/* 数据表格：表头吸顶不动，数据行在容器内滚动（拉到底也能看清每列含义） */
.table-wrap { overflow-x: auto; overflow-y: auto; max-height: 520px; }
table.dash-table { width: 100%; border-collapse: collapse; font-size: 24px; }
table.dash-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f9fafb;
  text-align: left;
  padding: 10px 12px;
  font-weight: 600;
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
}
table.dash-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
table.dash-table tr:hover td { background: #f9fafb; }
.progress-bar { background: #f3f4f6; border-radius: 4px; height: 6px; overflow: hidden; width: 80px; }
.progress-bar .fill { background: var(--primary); height: 100%; border-radius: 4px; }
.badge { font-size: 11px; padding: 2px 8px; border-radius: 10px; font-weight: 500; }
.badge-ok { background: var(--primary-light); color: var(--primary); }
.badge-warn { background: var(--warm-light); color: var(--warm); }
.badge-danger { background: #fef2f2; color: var(--danger); }

/* ===== 学习页内卡片区 ===== */
.sec-title { font-size: 24px; font-weight: 600; margin: 20px 0 12px; display: flex; align-items: center; gap: 8px; }
.sec-title .bar { width: 4px; height: 16px; background: var(--accent); border-radius: 2px; }

/* 单元导航 */
.unit-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}
.unit-tab {
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 10px;
  text-align: center;
  cursor: pointer;
  transition: all .2s;
  font-family: inherit;
}
.unit-tab:hover { border-color: var(--primary); }
.unit-tab.active {
  border-color: var(--primary);
  background: var(--primary-light);
}
.unit-tab-num {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 2px;
}
.unit-tab-name { display: block; font-size: 24px; font-weight: 600; color: var(--text); }
.unit-tab-ko { display: block; font-size: 11px; color: var(--text-light); margin-top: 2px; }

/* 单元分组 */
.unit-group { margin-bottom: 16px; }
.unit-group-head {
  display: flex; align-items: baseline; gap: 10px;
  background: var(--primary-light);
  border-radius: 8px;
  padding: 8px 14px;
  margin-bottom: 8px;
}
.unit-group-num {
  font-size: 12px; font-weight: 700;
  color: #fff;
  background: var(--primary);
  border-radius: 10px;
  padding: 2px 10px;
  flex-shrink: 0;
}
.unit-group-name { font-size: 24px; font-weight: 600; color: var(--primary-dark); }
.unit-group-ko { font-size: 12px; color: var(--text-light); }
.unit-preview { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.unit-chip {
  font-size: 11px;
  color: var(--text);
  background: #f3f4f6;
  border-radius: 10px;
  padding: 3px 10px;
  border: 1px solid var(--border);
}
.unit-chip.chip-done { background: var(--accent-light); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.lesson-card:hover .unit-chip { background: var(--primary-light); border-color: var(--primary); }

/* 首页随机出题卡片：六个大题型按钮 */
.rand-btns { margin-top: 14px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.rand-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 14px 8px;
  border: 1.5px solid #D8CFF0;
  border-radius: 12px;
  background: #EFEAF9;
  color: #534AB7;
  font-size: 16px; font-weight: 600;
  text-decoration: none;
  transition: all .15s;
}
.rand-btn:hover { background: #534AB7; color: #fff; border-color: #534AB7; }

/* 首页课程完成度条 */
.lesson-progress {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.lesson-progress .lp-track {
  flex: 1;
  height: 6px;
  background: #f3f4f6;
  border-radius: 3px;
  overflow: hidden;
}
.lesson-progress .lp-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  border-radius: 3px;
  transition: width .4s;
}
.lesson-progress .lp-pct { font-size: 12px; font-weight: 700; color: var(--primary); }
.lesson-progress .lp-pct.done { color: var(--accent); }


/* Tab 百分比徽标 */
.tab-pct {
  display: inline-block;
  margin-left: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
  background: var(--primary-light);
  border-radius: 8px;
  padding: 0 5px;
}
.tab-pct.done { color: var(--accent); background: var(--accent-light); }

/* 语法点后的小测 */
.grammar-quiz { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border); }
/* 面板学习进度条 */
.panel-progress {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.panel-progress .pp-label { font-size: 24px; color: var(--text-light); flex-shrink: 0; }
.panel-progress .pp-track {
  flex: 1;
  height: 8px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.panel-progress .pp-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  border-radius: 4px;
  transition: width .4s;
}
.panel-progress .pp-pct { font-size: 24px; font-weight: 700; color: var(--primary); flex-shrink: 0; }
.panel-progress .pp-pct.done { color: var(--accent); }
.panel-progress .pp-pct.lock { color: #b45309; }

/* 单元Tab */
.unit-tab .unit-pct {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
  background: var(--primary-light);
  border-radius: 8px;
  padding: 1px 6px;
}
.unit-tab .unit-pct:not(:empty) { }
.unit-pct { display: inline-block; }

/* 视频观看进度 */
.video-item .v-watch { font-size: 12px; color: var(--accent); flex-shrink: 0; }

/* 移动端适配 */
@media (max-width: 640px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .lesson-list { grid-template-columns: 1fr; }
  .vocab-grid { grid-template-columns: repeat(2, 1fr); }
  .lesson-hero h1 { font-size: 24px; }
}
@media (max-width: 400px) {
  .vocab-grid { grid-template-columns: 1fr; }
}

/* ===== 三测关卡（课前测/课中测/课后测） ===== */
.test-gate { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 4px; }
.gate-card { border: 1px solid var(--color-border-tertiary, #e5e7eb); border-left: 4px solid #BA7517; border-radius: 10px; padding: 12px 14px; background: var(--color-background-secondary, #fff); }
.gate-card.done { border-left-color: #0F6E56; opacity: 0.9; }
.gate-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.gate-name { font-size: 24px; font-weight: 500; }
.gate-tag { font-size: 11px; color: #854F0B; background: #FAEEDA; border-radius: 10px; padding: 1px 8px; }
.gate-tag.ok { color: #085041; background: #E1F5EE; }
.gate-desc { font-size: 12px; color: var(--text-light, #6b7280); margin-bottom: 8px; }
.gate-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gate-status { font-size: 12px; color: var(--text-secondary, #4b5563); }
.gate-card .btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ===== 首页课后测状态 ===== */
.post-status { font-size: 12px; color: #854F0B; margin: 6px 0 2px; }
.post-status:has(> :not(.post-status)) { }
.post-status { cursor: pointer; }
.post-status:hover { text-decoration: underline; }

/* ===== 中译韩输入题与AI批改 ===== */
.q-sentence { font-size: 24px; color: var(--text-primary, #111827); margin: 6px 0; line-height: 1.6; }
.q-input { width: 100%; min-height: 52px; border: 1px solid var(--color-border-secondary, #d1d5db); border-radius: 8px; padding: 8px 10px; font-size: 24px; font-family: inherit; box-sizing: border-box; margin-top: 4px; }
.q-input:focus { outline: none; border-color: #185FA5; }
.q-review { border: 1px solid var(--color-border-tertiary, #e5e7eb); border-radius: 8px; padding: 8px 10px; margin-top: 8px; font-size: 24px; }
.q-review.right { border-left: 4px solid #0F6E56; background: #E1F5EE; }
.q-review.wrong { border-left: 4px solid #BA7517; background: #FAEEDA; }
.rv-title { font-weight: 500; margin-bottom: 4px; }
.rv-line { color: var(--text-secondary, #4b5563); line-height: 1.6; }
.test-panel-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 0; }

/* ===== 情感旅程（第17课） ===== */
.emo-card { border: 1px solid var(--color-border-tertiary, #e5e7eb); border-left: 4px solid #E05D6D; border-radius: 12px; padding: 12px 14px; background: linear-gradient(135deg, #FFF7F8, #FDF2F4); margin: 12px 0 6px; }
.emo-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.emo-title { font-size: 24px; font-weight: 600; color: #8C2F3F; }
.emo-tag { font-size: 11px; color: #A03B4B; background: #FBE3E7; border-radius: 10px; padding: 1px 8px; }
.emo-tag.ok { color: #085041; background: #E1F5EE; }
.emo-desc { font-size: 12px; color: var(--text-light, #6b7280); margin-bottom: 8px; }
.emo-track { height: 8px; background: #F3D5DA; border-radius: 6px; overflow: hidden; }
.emo-fill { height: 100%; background: linear-gradient(90deg, #E05D6D, #F08A5D); border-radius: 6px; transition: width .6s ease; }
.emo-miles { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.emo-mile { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary, #6b7280); background: #fff; border: 1px dashed #E5C6CC; border-radius: 20px; padding: 4px 10px; }
.emo-mile.done { border-style: solid; border-color: #7FC8A9; color: #0F6E56; background: #E1F5EE; }
.emo-idx { font-size: 10px; color: #B98A94; }
.emo-tip { font-size: 24px; color: #A03B4B; margin-top: 8px; min-height: 18px; }
.emo-tip.show { font-weight: 500; }

/* ===== 批判性反思栏 ===== */
.q-review.think { border-left-color: #5B5BEA; background: #F4F4FF; }
.q-review.think .q-input { min-height: 64px; }

/* ===== 朝鲜语学习助手（浮动面板，第17课） ===== */
.agent-fab { position: fixed; bottom: 22px; right: 22px; width: 52px; height: 52px; border-radius: 50%; background: #185FA5; color: #fff; font-size: 24px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 900; box-shadow: 0 2px 10px rgba(24,95,165,.35); }
.agent-panel { position: fixed; top: calc(var(--topbar-h, 60px) + 10px); bottom: 12px; right: 22px; width: min(430px, calc(100vw - 32px)); height: auto; background: var(--color-background-primary, #fff); border: 1px solid var(--color-border-secondary, #d1d5db); border-radius: 14px; display: flex; flex-direction: column; z-index: 901; overflow: hidden; }
.agent-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: #185FA5; color: #fff; }
.agent-title { font-weight: 500; font-size: 17px; }
.agent-sub { font-size: 11px; opacity: .85; flex: 1; }
.agent-close { background: transparent; border: none; color: #fff; font-size: 24px; cursor: pointer; line-height: 1; }
.agent-modes { display: flex; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--color-border-tertiary, #e5e7eb); flex-wrap: wrap; }
.agent-mode { font-size: 12px; padding: 4px 10px; border-radius: 14px; border: 1px solid var(--color-border-secondary, #d1d5db); background: transparent; cursor: pointer; color: var(--text-secondary, #4b5563); }
.agent-mode.active { background: #E6F1FB; border-color: #185FA5; color: #185FA5; }
.agent-msgs { flex: 1; min-height: 0; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; background: var(--color-background-tertiary, #f9fafb); }
.agent-msg { max-width: 88%; padding: 8px 12px; border-radius: 12px; font-size: 15px; line-height: 1.6; word-break: break-word; white-space: normal; }
.agent-msg.user { align-self: flex-end; background: #185FA5; color: #fff; border-bottom-right-radius: 4px; }
.agent-msg.bot { align-self: flex-start; background: var(--color-background-primary, #fff); border: 1px solid var(--color-border-tertiary, #e5e7eb); border-bottom-left-radius: 4px; }
.agent-h1 { font-weight: 500; font-size: 15px; margin: 4px 0 2px; }
.agent-h2 { font-weight: 500; margin: 4px 0 2px; }
.agent-h3 { font-weight: 500; margin: 3px 0 1px; }
.agent-tbl { width: 100%; border-collapse: collapse; font-size: 12px; color: var(--text-secondary, #4b5563); background: #F1EFE8; border-radius: 6px; margin: 4px 0; }
.agent-tbl th, .agent-tbl td { border: 1px solid #D3D1C7; padding: 3px 6px; text-align: left; }
.agent-tbl th { background: #E5E3DA; font-weight: 500; }
.agent-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #9ca3af; margin: 0 2px; animation: agentPulse 1s infinite; }
.agent-dot:nth-child(2) { animation-delay: .2s; }
.agent-dot:nth-child(3) { animation-delay: .4s; }
@keyframes agentPulse { 0%,100% { opacity: .3; } 50% { opacity: 1; } }
.agent-input-row { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--color-border-tertiary, #e5e7eb); }
.agent-input-row input { flex: 1; border: 1px solid var(--color-border-secondary, #d1d5db); border-radius: 8px; padding: 8px 10px; font-size: 15px; font-family: inherit; }

/* ===== 学习提醒（第17课）与问题图谱 ===== */
.stu-alert { border: 1px solid #F7C1C1; border-left: 4px solid #A32D2D; border-radius: 10px; background: #FCEBEB; padding: 10px 14px; margin: 8px 0 4px; }
.alert-line { font-size: 24px; color: #791F1F; line-height: 1.7; }
.emo-question { font-size: 12px; color: #3C3489; background: #EEEDFE; border-radius: 8px; padding: 6px 10px; margin-bottom: 8px; }

/* ===== 知识图谱共享样式（首页/单元页/知识图谱页） ===== */
.kg-canvas { background: var(--color-background-secondary, #f9fafb); border: 1px solid var(--color-border-tertiary, #e5e7eb); border-radius: 14px; padding: 8px; overflow: auto; }
.kg-canvas svg { display: block; }
.kg-node { cursor: pointer; transition: opacity .15s; }
.kg-node:hover { opacity: .8; }
.kg-detail { margin-top: 12px; border: 1px solid var(--color-border-tertiary, #e5e7eb); border-left: 4px solid #185FA5; border-radius: 10px; padding: 12px 16px; background: var(--color-background-primary, #fff); }
.kg-detail .kd-title { font-size: 24px; font-weight: 500; margin-bottom: 6px; }
.kg-detail .kd-line { font-size: 24px; color: var(--text-secondary, #4b5563); line-height: 1.8; }
.kd-ko { color: #185FA5; cursor: pointer; border-bottom: 1px dashed #85B7EB; }
.kd-ko:hover { color: #0C447C; }
.kg-cap { font-size: 12px; color: var(--text-light, #6b7280); margin-top: 8px; line-height: 1.7; }
.kg-link { font-size: 12px; color: #185FA5; cursor: pointer; margin-top: 6px; }
.kg-link:hover { text-decoration: underline; }

/* ===== 全课程知识网络（星系图） ===== */
.kg-net-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.kg-net-f { font-size: 12px; padding: 4px 12px; border-radius: 14px; border: 1px solid var(--color-border-secondary, #d1d5db); background: transparent; cursor: pointer; color: var(--text-secondary, #4b5563); }
.kg-net-f.active { background: #185FA5; border-color: #185FA5; color: #fff; }
.kg-net-back { font-size: 12px; padding: 4px 12px; border-radius: 14px; border: 1px solid #185FA5; background: #E6F1FB; color: #185FA5; cursor: pointer; margin-left: 6px; }
.kg-net-hint { font-size: 12px; color: var(--text-light, #6b7280); margin-left: auto; }
.kg-net-wrap { border: 1px solid var(--color-border-tertiary, #e5e7eb); border-radius: 14px; overflow: hidden; background: var(--color-background-secondary, #f9fafb); }
.kg-net-wrap svg { display: block; cursor: grab; }
.kg-net-wrap svg:active { cursor: grabbing; }
.kg-net-legend { display: flex; gap: 12px; align-items: center; font-size: 11px; color: var(--text-light, #6b7280); margin-top: 6px; flex-wrap: wrap; }
.kg-net-entry { float: right; font-size: 12px; color: #185FA5; text-decoration: none; }
.kg-net-entry:hover { text-decoration: underline; }

/* 发音音色切换按钮 */
#voiceToggle .v-btn.active { background: #0F6E56; color: #fff; }
#voiceToggle .v-btn:hover { background: #E1F5EE; }
#voiceToggle .v-btn.active:hover { background: #0F6E56; }

/* ===== 平板/iPad 适配（2026-08-16）：竖屏铺满减少留白；横屏等比放大（zoom 不破坏布局结构） ===== */
@media (min-width: 768px) and (max-width: 1023px) {
  .container, .topbar-inner { max-width: 96vw; }
}
/* ⚠️ 2026-09-14：本段原为 iPad 横屏专用，但 Windows 桌面在 1024~1300 CSS px 区间
   （如 1366×768@125% → 1093、1920×1080@150% → 1280）同样命中，被无辜放大 1.12 倍 →
   UI 整体偏大、教师端完成度总览被压到只剩 34px/列而挤压裁切。
   故加 `hover:none + pointer:coarse` 限定，仅触屏设备生效，桌面浏览器不再受影响。 */
@media (min-width: 1024px) and (max-width: 1300px) and (hover: none) and (pointer: coarse) {
  /* iPad 横屏：整体放大 1.12 倍，容器相应缩窄，放大后约 96% 屏宽，无横向溢出 */
  body { zoom: 1.12; }
  .container, .topbar-inner { max-width: min(1086px, 85vw); }
  .video-wrap, .player-wrap, #videoPlayer { max-width: 100%; }
}

/* ===== 手机端适配（2026-08-16）：Tab 横向滑动 + 横屏铺满更宽 ===== */
@media (max-width: 640px), (max-height: 500px) and (min-width: 568px) {
  .tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch;
          padding-left: 4px; padding-right: 24px; mask-image: linear-gradient(to right, #000 96%, transparent 100%); -webkit-mask-image: linear-gradient(to right, #000 96%, transparent 100%); }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: 0 0 auto; min-width: 96px; }
}
@media (max-height: 500px) and (min-width: 568px) {
  /* 手机横屏：容器 100% 铺满，固定小边距。
     注意：不用 env(safe-area-inset-*)——iOS Safari 横屏时左右都可能返回约 47px（圆角避让），
     叠加会形成对称白边；Safari 本身已默认在安全区内渲染，这里固定 4px 即可贴边
     注意：不给 html/body 设 overflow-x:hidden——body 设 overflow-x 会成为滚动容器，
     导致内部 position:sticky（标题栏/Tab栏）横屏失效；html 侧全局 overflow-x:clip 已兜底（clip 不创建滚动容器） */
  .container { width: 100%; max-width: none; padding: 20px 4px 60px; }
  .topbar-inner { width: 100%; max-width: none; padding-left: 8px; padding-right: 8px; }
}


/* 手机竖屏：容器 padding 减小，让内容更宽 */
@media (max-width: 640px) {
  .container { padding: 16px 8px 60px; }
}

/* ===== 教师端数据表格紧凑化（2026-08-16）：一眼看到更多学生 ===== */
table.dash-table { font-size: 15px; }
table.dash-table thead th { padding: 6px 8px; font-size: 14px; }
table.dash-table td { padding: 5px 8px; }
#matrixTable { font-size: 13.5px; }
#matrixTable thead th { font-size: 13px; padding: 5px 6px; }
#matrixTable td { font-size: 13.5px; padding: 4px 6px; }

/* 教师端表格内按钮紧凑（画像等），不影响学生端 */
table.dash-table .btn-sm { font-size: 13px; padding: 3px 10px; }

/* 完成度矩阵：单元组之间纵向分割线 */
#matrixTable th.g-start, #matrixTable td.g-start { border-left: 2px solid #c9d2de; }

/* ===== 移动端体验（2026-08-16）：禁双击放大 + 课程页 Tab 吸顶 ===== */
html, body { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button, a, .tab, .video-item, .dialogue-line, .vocab-item { touch-action: manipulation; }
/* 课程页内容 Tab 吸顶：滚动到 topbar 下方时锁定（--topbar-h 由 JS 测量设置） */
.tabs { position: sticky; top: var(--topbar-h, 60px); z-index: 90; }

/* ===== 桌面/平板端标题字号（2026-08-16）：宽屏上偏大，适度调小；手机保持大字号 ===== */
@media (min-width: 768px) {
  .lesson-hero .unit-tag { font-size: 13px; }
  .lesson-hero h1 { font-size: 17px; }
  .lesson-hero .ko { font-size: 17px; }
  .card-title { font-size: 17px; }
  .panel-progress .pp-label,
  .panel-progress .pp-pct { font-size: 17px; }
  .page-sub { font-size: 17px; }
  /* 栏目条（课前测/视频学习…）：按内容宽排布，放不下自动横向滚动，不挤压 */
  .tab { font-size: 18px; padding: 9px 14px; min-width: 92px; }
  /* 正文内容整体适度调小（手机保持 24px 大字号） */
  .vocab-hint { font-size: 20px; }
  .vocab-item .ko, .vocab-item .cn { font-size: 20px; }
  .grammar-card .cn, .grammar-card .ex .ko, .grammar-card .ex .cn { font-size: 20px; }
  .dialogue-line .ko { font-size: 20px; }
  .dialogue-line .cn { font-size: 18px; }
  .flashcard .back .cn { font-size: 20px; }
  /* 小测题多缩小一档：题目/选项/输入/句子 24→18，得分 28→22 */
  .quiz-question .q-title { font-size: 18px; }
  .quiz-option { font-size: 18px; padding: 8px 10px; }
  .q-sentence { font-size: 18px; }
  .q-input { font-size: 18px; min-height: 44px; }
  .quiz-result .score { font-size: 22px; }
  /* 提交后的对错判定区与选项同字号（rv-title/rv-line 继承） */
  .q-review { font-size: 18px; }
}

/* ===== 全局压窄标题栏/Tab 栏（用户定稿 2026-08-19：所有屏幕统一紧凑尺寸，学习区占比更大） =====
   置于文件末尾：确保覆盖 .topbar-inner/.tab/.tabs 等基础样式 */
.topbar-inner { padding: 6px 14px; }
.brand .logo-mini { width: 28px; height: 28px; font-size: 14px; }
.brand-name { font-size: 16px; }
.topbar-user { gap: 8px; }
.topbar-user .topbar-home,
.topbar-user .user-chip,
.topbar-user .logout { font-size: 15px; }
.topbar-user .user-chip { padding: 2px 10px; }
.topbar-user .fs-btn { font-size: 13px; padding: 3px 8px; }
.tabs { padding: 4px; margin-bottom: 10px; }
.tab { padding: 5px 10px; font-size: 17px; min-width: 76px; }
.tab-pct { font-size: 11px; }
/* 极低屏幕（768 高度仍挤）进一步压缩 */
@media (max-height: 700px) {
  .topbar-inner { padding: 4px 12px; }
  .tabs { margin-bottom: 8px; }
  .tab { padding: 4px 8px; font-size: 15px; min-width: 68px; }
}

/* ===== 朗读作业：录音区置顶 + 课文文本手动两栏（行均分，桌面两栏，手机单栏） ===== */
.hw-read-rec-top { margin: 8px 0 10px; }
.hw-read-script {
  background: #F5F9FF;
  border: 1px solid #DCE9F8;
  border-radius: 10px;
  padding: 10px 12px;
  margin: 4px 0 10px;
}
.hw-read-cols { display: flex; gap: 0; align-items: flex-start; }
.hw-read-col { flex: 1; min-width: 0; }
/* 两栏间浅色分割线（防止同学横着读跨栏）；用 padding 保持间距 */
.hw-read-col:first-child { border-right: 1px solid #E3EDF8; padding-right: 20px; }
.hw-read-col:last-child { padding-left: 20px; }
@media (max-width: 960px) {
  .hw-read-cols { flex-direction: column; }
  .hw-read-col:first-child { border-right: none; padding-right: 0; }
  .hw-read-col:last-child { padding-left: 0; }
}