/* ========================================
   LingooAI语宝 - 清华紫主题样式
   ======================================== */

/* ===== CSS Variables ===== */
:root {
  --tsinghua-purple: #660874;  --tsinghua-purple-light: #8B2D9B;
  --tsinghua-purple-lighter: #B57DC0;
  --tsinghua-purple-pale: #F0E6F2;
  --tsinghua-purple-dark: #4A0556;
  --tsinghua-gold: #C49A2C;
  --tsinghua-gold-light: #E8C76E;

  --score-blue: #2F6FED;
  --score-blue-light: #6FA8F6;

  --bg-primary: #F8F6FA;
  --bg-surface: #FFFFFF;
  --bg-surface-alt: #FAF8FC;
  --bg-dark: #2D1B33;

  --text-primary: #1A1520;
  --text-secondary: #6B6577;
  --text-light: #9B95A8;
  --text-white: #FFFFFF;

  --border-color: #E5DDE9;
  --border-hover: #D0C2D8;

  --success: #2E9E5B;
  --error: #D64545;
  --warning: #E8941A;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;

  --shadow-sm: 0 2px 8px rgba(102, 8, 116, 0.06);
  --shadow-md: 0 4px 20px rgba(102, 8, 116, 0.1);
  --shadow-lg: 0 8px 32px rgba(102, 8, 116, 0.15);

  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', -apple-system, sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
}

#app {
  width: 100%;
  height: 100vh;
  position: relative;
}

/* ===== Page System ===== */
.page {
  display: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.page.active {
  display: flex;
  flex-direction: column;
  opacity: 1;
}

/* ===== Welcome Page ===== */
#welcome-page {
  align-items: center;
  background: linear-gradient(135deg, #F8F6FA 0%, #F0E6F2 50%, #E8DCEF 100%);
  overflow-y: auto;   /* 内容超高时可滚动，头像/底部须知/ICP 不再被裁剪 */
  padding: 24px 16px;
  position: relative;
}

.welcome-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

/* LingooAI LOGO moved down a bit (below avatar + nickname) */
.logo-text {
  margin-top: 2px;
}

/* Nickname row directly under the avatar — text centered with avatar,
   edit button floats to the right without shifting the text center */
.avatar-nickname {
  display: flex;
  align-items: center;
  position: relative;
}

.avatar-nickname-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--tsinghua-purple);
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.avatar-nickname-edit {
  position: absolute;
  left: calc(100% + 6px);
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  font-size: 13px;
  cursor: pointer;
  padding: 2px 4px;
}

.avatar-nickname-edit:hover {
  color: var(--tsinghua-purple);
}

.avatar-nickname-input {
  display: flex;
  align-items: center;
  gap: 8px;
}

.avatar-nickname-input .setting-input {
  width: 180px;
  padding: 6px 10px;
  font-size: 13px;
}

.logo-avatar {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--tsinghua-purple);
  background: var(--bg-surface);
  transition: var(--transition);
  animation: pulse-glow 3s ease-in-out infinite;
}

.logo-avatar:hover {
  border-color: var(--tsinghua-gold);
  transform: scale(1.05);
}

.logo-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.avatar-upload-hint {
  position: absolute;
  bottom: 2px;
  right: 2px;
  font-size: 16px;
  background: var(--tsinghua-purple);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: var(--transition);
}

.logo-avatar:hover .avatar-upload-hint {
  opacity: 1;
}

.welcome-content {
  text-align: center;
  position: relative; /* 作为氛围背景与内部 absolute 元素的定位基准 */
  z-index: 1;
  margin: auto;   /* 空间充足时垂直居中；内容超高时自动从顶部展开，配合容器滚动不裁剪 */
  padding: 22px 48px 26px;
  width: 560px;     /* 固定宽度：四语种（中/英/日/韩）卡片尺寸一致，不再随译文长度伸缩 */
  max-width: 100%;  /* 窄屏兜底：不超出视口 */
  background: var(--bg-surface);
  border-radius: 24px;
  box-shadow: 0 8px 40px rgba(102, 8, 116, 0.12);
  border: 1px solid rgba(102, 8, 116, 0.08);
}

/* 头像/昵称/LOGO 及其后内容浮于氛围背景（z-index:0）之上 */
.welcome-logo,
.welcome-tagline,
.welcome-tagline-zh {
  position: relative;
  z-index: 1;
}

@keyframes pulse-glow {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 4px 12px rgba(102, 8, 116, 0.15)); }
  50% { transform: scale(1.05); filter: drop-shadow(0 8px 24px rgba(102, 8, 116, 0.25)); }
}

.logo-text {
  font-size: 52px;
  font-weight: 800;
  color: var(--tsinghua-purple);
  letter-spacing: -1px;
}

/* 品牌 LOGO 防闪：JS 渲染真实品牌名之前隐藏默认占位，避免刷新时旧名 LingooAI 一晃而过 */
.logo-text#brand-logo-text,
.auth-logo#brand-auth-logo {
  visibility: hidden;
}
body.brand-synced #brand-logo-text,
body.brand-synced #brand-auth-logo {
  visibility: visible;
}

.up-accent {
  color: var(--tsinghua-gold);
}

/* ===== 中文 LOGO（英文名之后，如「LingooAI 语宝」）：品牌紫、字号略收敛防中文视觉过大 ===== */
.brand-zh {
  color: inherit; /* 跟随所在 LOGO 的品牌紫 */
  font-size: 0.92em;
  margin-left: 3px;
  letter-spacing: 1px;
}
/* 中文 LOGO 书法图片形态：已上传时等高替换文字版（高度跟随所在 LOGO 字号） */
.brand-zh-img {
  height: 1.05em;
  width: auto;
  margin-left: 4px;
  vertical-align: -0.12em;
}
.cert-brand-zh {
  font-size: 0.92em;
  margin-left: 3px;
  letter-spacing: 1px;
}

/* ===== 副标题 LOGO（欢迎页主 LOGO 下方第二行，2026-09-20 需求）：行间距紧凑、纯清华紫、
   字号收敛为副标题量级；空值时整行隐藏（JS 控制 .hidden）；
   注释语（金色小字）绝对定位挂 LOGO 右侧，不参与居中计算——LOGO 本身保持水平居中不动 ===== */
.logo-sub-row {
  margin-top: 2px;
  line-height: 1.2;
  display: inline-flex;
  align-items: baseline;
  position: relative;
}
.logo-sub-text {
  font-size: 20px;
  font-weight: 800;
  color: var(--tsinghua-purple);
  letter-spacing: 0.5px;
}
.logo-sub-note {
  position: absolute;
  left: 100%;
  bottom: 0;
  margin-left: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--tsinghua-gold);
  letter-spacing: 0.5px;
  line-height: 1;
  white-space: nowrap;
  max-width: none;
  overflow: visible; /* 四语种注释语无论多长一律单行，绝不换行（2026-09-20 用户裁决） */
  user-select: none;
  -webkit-user-select: none;
}
/* 与主 LOGO 同口径防闪：JS 渲染真实副标题前隐藏，避免刷新闪现 */
.logo-sub-row {
  visibility: hidden;
}
body.brand-synced .logo-sub-row {
  visibility: visible;
}

.welcome-tagline {
  font-size: 22px;
  color: var(--text-primary);
  font-weight: 600;
  margin-bottom: 6px;
  letter-spacing: 0.5px;
  white-space: nowrap; /* 标语单行：长英文译文不换行 */
}

.welcome-tagline-zh {
  font-size: 16px;
  color: var(--text-secondary);
  margin-bottom: 20px;
  white-space: nowrap; /* 标语单行：英文/日/韩译文长于中文，强制不换行保持美观 */
}

.welcome-features {
  display: flex;
  flex-wrap: nowrap; /* 四个词组强制单行：英/日译文较长也不换行 */
  gap: 10px;
  justify-content: center;
  margin-bottom: 16px;
}

.feature-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 50px;
  padding: 8px 16px;
  font-size: 14px;
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  white-space: nowrap; /* chip 内文字不换行 */
  flex-shrink: 0; /* chip 不压缩变形，宽度随文字自适应 */
}

.feature-chip:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--tsinghua-purple-lighter);
}

.feature-icon {
  font-size: 18px;
}

/* 非中文界面：四个功能词组译文远长于中文，缩小字号/间距确保单行不超出卡片边界
   （卡片内容区 464px，EN 译文 14px 时约 640px；缩至 10.5px 后约 440px，左右留边距） */
html[lang="en"] .welcome-features,
html[lang="ja"] .welcome-features,
html[lang="ko"] .welcome-features {
  gap: 6px;
  padding: 0 4px;
}
html[lang="en"] .feature-chip,
html[lang="ja"] .feature-chip,
html[lang="ko"] .feature-chip {
  font-size: 10.5px;
  padding: 4px 9px;
  gap: 4px;
}

/* ===== Feature Video (四个功能词点击弹窗·纯视频+透明圆角卡片外框) ===== */
.feature-chip.feature-chip-video {
  cursor: pointer;
  user-select: none;
}
/* 后台「欢迎页介绍视频」卡片：制作规范灰色备注 + 实际规格回填 */
.fv-spec-note {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.7;
  color: #999;
}
.fv-dims {
  display: block;
  color: #999;
  font-size: 12px;
}
.feature-chip.feature-chip-video:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}
.feature-video-stage {
  position: relative;
  /* 比欢迎页卡片（560px）略小一档；窄屏不超视口 */
  width: min(92vw, 520px);
  background: transparent; /* 100% 透明卡片外框 */
  border: 2px solid var(--tsinghua-purple);
  border-radius: 24px;
  padding: 6px;
  animation: modal-in 0.3s ease;
}
.feature-video-player {
  display: block;
  width: 100%;
  max-height: 88vh;
  background: transparent;
  border-radius: 18px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
}

/* ===== 合成预览：双视频叠放 + 交叉淡化（消除切换黑屏） ===== */
.sv-pair-videos {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
  background: transparent;
}
.sv-pair-videos .sv-pair-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.sv-pair-videos .sv-pair-video.sv-pair-active {
  opacity: 1;
  pointer-events: auto;
}
.feature-video-close {
  position: absolute;
  top: -46px;
  right: 0;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 16px;
  line-height: 34px;
  text-align: center;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.feature-video-close:hover {
  background: rgba(255, 255, 255, 0.32);
  transform: rotate(90deg);
}

/* ===== 后台场景视频「合成预览」弹窗（复用介绍视频弹窗骨架，2026-09-15） ===== */
.sv-pair-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 10px 6px;
}
.sv-pair-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}
.sv-pair-mode {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--tsinghua-purple);
  background: var(--tsinghua-purple-pale);
  border-radius: 999px;
  padding: 2px 12px;
  margin-left: 10px;
  white-space: nowrap;
  transition: color .2s ease, background .2s ease;
}
.sv-pair-mode.listening {
  color: #fff;
  background: var(--tsinghua-purple);
}
.sv-pair-note {
  padding: 6px 10px 4px;
  font-size: 12px;
  color: #999;
  line-height: 1.5;
}
.sv-pair-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}
@media (max-width: 640px) {
  .feature-video-close {
    top: -42px;
    width: 30px;
    height: 30px;
    line-height: 30px;
  }
}

/* ===== Certificate Button (welcome page) ===== */
.btn-cert {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: fit-content;
  margin: 0 auto 12px;
  background: linear-gradient(135deg, #F5EEF9, var(--tsinghua-purple-pale) 60%, #EADDF2);
  color: var(--tsinghua-purple);
  border: 1px solid rgba(102, 8, 116, 0.16);
  border-radius: 999px;
  padding: 9px 30px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(102, 8, 116, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  transition: var(--transition);
}

.btn-cert:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(102, 8, 116, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  border-color: rgba(102, 8, 116, 0.28);
}

.btn-cert:active {
  transform: translateY(0);
}

/* ===== Buttons ===== */
.btn-primary {
  background: var(--tsinghua-purple);
  color: var(--text-white);
  border: none;
  border-radius: var(--radius-md);
  padding: 14px 32px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-primary:hover {
  background: var(--tsinghua-purple-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(102, 8, 116, 0.3);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-lg {
  padding: 16px 40px;
  font-size: 18px;
  border-radius: var(--radius-lg);
}

.btn-arrow {
  transition: transform 0.3s ease;
}

.btn-primary:hover .btn-arrow {
  transform: translateX(4px);
}

.btn-text {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 14px;
  cursor: pointer;
  padding: 10px 20px;
  margin-bottom: 16px;
  transition: var(--transition);
}

#settings-btn-welcome {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

/* 欢迎页吉祥物行中部：设置按钮 + 语言选择器垂直堆叠，位于朵朵与步步中间（不单独占行） */
.welcome-mascot-mid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.welcome-mascot-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: -4px;
  margin-bottom: 10px;
}

.welcome-mascot-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: default;
}

.welcome-mascot-img-wrap {
  position: relative;
  display: inline-block;
  line-height: 0;
}

.welcome-mascot-img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(102, 8, 116, 0.12));
}

/* 吉祥物圈C版权标（2026-09-22 上线 / 2026-09-23 调位）：字体字号颜色与商标圈R
   （.welcome-brand-r：Georgia 12.5px/600、#A9A2B2、1.5px 圆环 20px）完全一致；
   朵朵在图形左下角、步步在图形右下角（用户指定）；
   后台「数字吉祥物」卡可切换显现/隐藏（hidden 类控制） */
.mascot-c-mark {
  position: absolute;
  bottom: -5px;
  width: 20px;
  height: 20px;
  border: 1.5px solid #A9A2B2;
  border-radius: 50%;
  color: #A9A2B2;
  font-size: 12.5px;
  font-weight: 600;
  font-family: Georgia, 'Times New Roman', serif;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 1px;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}
#mascot-c-mark-wave { right: -7px; }
#mascot-c-mark-daily { left: -7px; }

.welcome-mascot-name {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 600;
  white-space: nowrap;
}

@media (max-width: 480px) {
  #welcome-page {
    padding: 14px 10px;
  }
  .welcome-mascot-row {
    gap: 12px;
  }
  .welcome-mascot-img {
    width: 52px;
    height: 52px;
  }
  .welcome-mascot-name {
    font-size: 11px;
  }
}

#start-btn {
  display: block;
  width: fit-content;
  margin: 0 auto;
}

.btn-text:hover {
  color: var(--tsinghua-purple);
}

/* 设置弹窗「检查更新」按钮：发现新版本时高亮为紫底白字胶囊 */
.btn-text.update-available {
  color: #fff;
  background: linear-gradient(135deg, var(--tsinghua-purple), #8a2be2);
  border-radius: 16px;
  padding: 4px 14px;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(102, 8, 116, 0.35);
  animation: va-update-pulse 1.6s ease-in-out infinite;
}
.btn-text.update-available:hover {
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(102, 8, 116, 0.45);
}
@keyframes va-update-pulse {
  0%, 100% { box-shadow: 0 2px 8px rgba(102, 8, 116, 0.35); }
  50% { box-shadow: 0 2px 16px rgba(102, 8, 116, 0.6); }
}

.btn-secondary {
  background: var(--bg-surface);
  color: var(--tsinghua-purple);
  border: 1px solid var(--tsinghua-purple-lighter);
  border-radius: var(--radius-md);
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.btn-secondary:hover {
  background: var(--tsinghua-purple-pale);
}

.btn-sm {
  padding: 6px 12px;
  font-size: 13px;
  white-space: nowrap;
}

/* 对话页反馈按钮：灰色低存在感，字体与右上角“对话轮次”一致 */
#feedback-btn {
  color: var(--text-light);
  border-color: var(--text-light);
  font-size: 11px;
  font-weight: 500;
  font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', -apple-system, sans-serif;
}

#feedback-btn:hover {
  color: var(--text-secondary);
  border-color: var(--text-secondary);
  background: transparent;
}

.btn-icon {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 20px;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-icon:hover {
  background: var(--tsinghua-purple-pale);
  color: var(--tsinghua-purple);
}

/* Minimal reset icon — smaller than the standard icon button */
.btn-icon-mini {
  font-size: 15px;
  padding: 6px 8px;
  opacity: 0.5;
  transition: opacity var(--transition), background var(--transition), color var(--transition);
}
.btn-icon-mini:hover {
  opacity: 1;
  color: var(--danger, #d93025);
}

/* Danger button (for destructive confirm actions) */
.btn-danger {
  background: #d93025;
  color: var(--text-white);
  border: none;
  border-radius: var(--radius-md);
  padding: 14px 32px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-danger:hover {
  background: #b3231b;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(217, 48, 37, 0.3);
}

/* Compact confirm dialog */
.confirm-modal {
  width: 380px;
}
.modal-footer {
  gap: 12px;
}

/* ===== Scene Selection Page ===== */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 32px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}

.page-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap; /* 标题单行：窄视口不被 header-right 挤压换行 */
}

/* ===== 场景页 header 紧凑化：元素多（8+ 项），收紧间距确保全部可见 ===== */
#scene-page .page-header {
  padding: 10px 14px;
}
#scene-page .header-left {
  gap: 10px;
}
#scene-page .header-right {
  gap: 6px;
}
#scene-page .level-select {
  font-size: 13px;
  padding: 5px 24px 5px 9px;
}
#scene-page .btn-secondary.btn-sm {
  padding: 5px 10px;
  font-size: 12px;
}
#scene-page .btn-icon {
  padding: 6px 8px;
  font-size: 18px;
}
#scene-page .user-chip {
  padding: 4px 10px;
}
#scene-page .user-chip-name {
  font-size: 12px;
}
#scene-page .user-chip-time {
  font-size: 11px;
}
#scene-page .page-title {
  font-size: 18px;
}

/* ===== Word Quiz Page (单词学习) ===== */
.wordquiz-level-chip {
  font-size: 13px;
  font-weight: 600;
  color: var(--tsinghua-purple);
  background: var(--tsinghua-purple-pale);
  border-radius: 999px;
  padding: 4px 12px;
  white-space: nowrap;
}

.wordquiz-score {
  font-size: 14px;
  color: var(--text-secondary);
  font-weight: 500;
  white-space: nowrap;
}

.wordquiz-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
}

.wordquiz-card {
  position: relative;
  width: 100%;
  max-width: 1200px;
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 92px 40px 36px;
  text-align: center;
}

.wordquiz-prompt {
  position: absolute;
  top: 18px;
  left: 24px;
  font-size: 15px;
  color: var(--text-secondary);
  text-align: left;
}

/* 陪练员组合：虚拟陪练 + Wave 朵朵 / Daily 步步 紧挨排列（卡片右上角） */
.wq-partner-group {
  position: absolute;
  top: 18px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.wordquiz-partner {
  font-size: 15px;
  font-weight: 600;
  color: var(--tsinghua-purple);
  letter-spacing: 0.04em;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  line-height: 1;
  white-space: nowrap;
}
.wordquiz-partner:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.wq-mascot {
  position: absolute;
  top: 44px;
  right: 18px;
  width: 130px;
  height: 130px;
  object-fit: contain;
  pointer-events: none;
  z-index: 5;
  filter: drop-shadow(0 8px 18px rgba(102, 8, 116, 0.22));
  transition: opacity .18s ease, transform .18s ease;
  opacity: 1;
  transform: translateY(0);
}
.wq-mascot.hidden {
  opacity: 0;
  transform: translateY(8px);
}

/* Wrong answer: mascot spins 360° in place around the axis perpendicular
   to the screen. transform: rotate() keeps the character facing the user
   while it spins like a pinwheel — no 3D backface needed. */
.wq-mascot.wq-mascot-spin {
  animation: wqMascotSpin 0.9s cubic-bezier(0.45, 0.05, 0.55, 0.95);
}
@keyframes wqMascotSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.wordquiz-word {
  font-size: 44px;
  font-weight: 700;
  color: var(--tsinghua-purple);
  letter-spacing: 1px;  margin-bottom: 18px;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 巩固复现：复盘通过的词紧接着重考时，单词行右侧的标识徽章。
   绝对定位于整行右缘、与单词垂直居中对齐，不占布局、不挤单词 */
.wordquiz-word-row {
  position: relative;
  width: 100%;
}

.wq-requiz-tag {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  padding: 3px 10px;
  color: var(--tsinghua-purple);
  background: rgba(102, 8, 116, 0.08);
  letter-spacing: 0.04em;
  pointer-events: none;
}

/* ===== Word pronunciation row (播放 / 音色 / 自动-静音) ===== */
.wordquiz-pron-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.wq-pron-btn {
  border: 1px solid rgba(102, 8, 116, 0.2);
  background: var(--bg-surface);
  color: var(--tsinghua-purple);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
  white-space: nowrap;
}
.wq-pron-btn:hover {
  border-color: var(--tsinghua-purple);
  background: var(--tsinghua-purple-pale);
}
.wq-pron-btn.playing {
  background: var(--tsinghua-purple-pale);
  border-color: var(--tsinghua-purple);
}
.wq-pron-voices {
  display: inline-flex;
  background: var(--bg-secondary, #f3f0f7);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.wq-pron-voice-btn {
  border: none;
  background: transparent;
  color: var(--text-secondary, #777);
  font-size: 13px;
  padding: 5px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: var(--transition);
  font-family: inherit;
}
.wq-pron-voice-btn:hover {
  color: var(--tsinghua-purple);
}
.wq-pron-voice-btn.active {
  background: var(--tsinghua-purple);
  color: var(--text-white, #fff);
  box-shadow: 0 2px 8px rgba(102, 8, 116, 0.2);
}

.wordquiz-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 10px;
  width: 100%;
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}

.wordquiz-option {
  background: var(--bg-surface-alt);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  transition: var(--transition);
  text-align: left;
  line-height: 1.5;
  display: flex;
  align-items: center;
}

/* A. B. C. D. letter badge in front of each option */
.wq-option-letter {
  flex-shrink: 0;
  min-width: 30px;
  margin-right: 6px;
  font-weight: 700;
  font-size: 15px;
  color: var(--tsinghua-purple);
  letter-spacing: 0.5px;
}

.wq-option-text {
  flex: 1;
  min-width: 0;
}

.wordquiz-option.correct .wq-option-letter {
  color: var(--text-white);
}

.wordquiz-option:hover {
  border-color: var(--tsinghua-purple-light);
  color: var(--tsinghua-purple);
  background: var(--tsinghua-purple-pale);
}

.wordquiz-option.correct {
  background: var(--success);
  border-color: var(--success);
  color: var(--text-white);
  font-weight: 600;
}

/* Wrong pick: red so the mistake reads instantly next to the green correct answer */
.wordquiz-option.wrong {
  background: var(--error);
  border-color: var(--error);
  color: var(--text-white);
  font-weight: 600;
}

.wordquiz-option.wrong .wq-option-letter {
  color: var(--text-white);
}

.wordquiz-option.correct,
.wordquiz-option.wrong {
  pointer-events: none;
}

.wordquiz-feedback {
  font-size: 15px;
  font-weight: 600;
  min-height: 24px;
  margin-bottom: 14px;
}

.wordquiz-feedback.ok {
  color: var(--success);
}

.wordquiz-feedback.bad {
  /* The line now only says 回答错误 — red to match the wrong pick */
  color: var(--error);
}

/* 体验配额用尽提示：手机端红字（黑字访客易看不清），桌面端保持默认色 */
@media (max-width: 720px) {
  .wordquiz-feedback.quota-out {
    color: var(--error);
  }
}

/* 「下一个」：低存在感幽灵按钮 — 透明底、细边框、按内容自适应宽度 */
#wordquiz-next {
  min-width: 0;
  background: transparent;
  color: var(--text-dark);
  border: 1px solid var(--border-color);
  font-weight: 500;
  padding: 6px 14px;
}

#wordquiz-next:hover {
  background: var(--tsinghua-purple-pale);
  border-color: var(--tsinghua-purple-lighter);
  color: var(--tsinghua-purple);
}

/* ===== Word Quiz Review Panel (复盘清单) ===== */
.wordquiz-review-panel {
  width: 100%;
  max-width: 720px;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 24px 28px;
}

.wordquiz-review-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-shrink: 0;
}

.wordquiz-review-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
}

.wordquiz-review-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* 复盘头部陪练员组合：虚拟陪练 + 音色切换 紧挨排列 */
.wq-review-partner-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.wordquiz-review-partner {
  font-size: 14px;
  font-weight: 600;
  color: var(--tsinghua-purple);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.wordquiz-review-list {
  flex: 1;
  min-height: 0; /* let the list scroll inside the panel instead of pushing the page */
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-right: 4px;
}

.wordquiz-review-empty {
  text-align: center;
  color: var(--text-secondary);
  padding: 40px 0;
}

/* ===== Forced review (累计答错 10 词后的强制复盘) ===== */
.wq-forced-hint {
  background: rgba(102, 8, 116, 0.06);
  border: 1px solid rgba(102, 8, 116, 0.18);
  color: var(--tsinghua-purple);
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 14px;
  margin-bottom: 12px;
  text-align: center;
  flex-shrink: 0;
}
.wq-review-steps {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.wq-step {
  border: 1px solid rgba(102, 8, 116, 0.25);
  background: var(--tsinghua-purple-pale);
  color: var(--tsinghua-purple);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
  white-space: nowrap;
}
.wq-step:hover {
  background: var(--tsinghua-purple);
  border-color: var(--tsinghua-purple);
  color: #fff;
}
.wq-step.playing {
  background: var(--tsinghua-purple);
  border-color: var(--tsinghua-purple);
  color: #fff;
}
.wq-step.done {
  border-color: rgba(34, 154, 22, 0.35);
  background: rgba(34, 154, 22, 0.08);
  color: var(--success);
  cursor: default;
}
.wq-step.done:hover {
  background: rgba(34, 154, 22, 0.08);
  border-color: rgba(34, 154, 22, 0.35);
  color: var(--success);
}
#wordquiz-review-back:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Celebration overlay (答对 10 词礼花彩带画布) */
.wq-celebration {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9999;
}

.wq-review-card {
  background: var(--bg-surface-alt);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 16px 18px;
}

.wq-review-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.wq-review-word {
  font-size: 22px;
  font-weight: 700;
  color: var(--tsinghua-purple);
}

.wq-review-ipa {
  font-size: 14px;
  color: var(--text-secondary);
}

.wq-review-speak {
  background: var(--tsinghua-purple-pale);
  border: none;
  border-radius: 999px;
  width: 30px;
  height: 30px;
  font-size: 14px;
  cursor: pointer;
  transition: var(--transition);
  flex-shrink: 0;
}

.wq-review-speak:hover {
  background: var(--tsinghua-purple);
  transform: scale(1.08);
}

/* ===== Word Quiz: voice toggle & example-sentence playback ===== */
.wq-voice-toggle {
  display: inline-flex;
  background: var(--bg-secondary, #f3f0f7);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
  flex-shrink: 0;
}

.wq-voice-btn {
  border: none;
  background: transparent;
  color: var(--text-secondary, #777);
  font-size: 13px;
  padding: 5px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: var(--transition);
  font-family: inherit;
}

.wq-voice-btn:hover {
  color: var(--tsinghua-purple);
}

.wq-voice-btn.active {
  background: var(--tsinghua-purple);
  color: var(--text-white, #fff);
  box-shadow: 0 2px 8px rgba(102, 8, 116, 0.2);
}

.wq-review-speak-ex {
  background: var(--tsinghua-purple-pale);
  border: none;
  border-radius: 999px;
  color: var(--tsinghua-purple);
  font-size: 14px;
  width: 30px;
  height: 30px;
  padding: 0;
  cursor: pointer;
  transition: var(--transition);
  flex-shrink: 0;
  font-family: inherit;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.wq-review-speak-ex:hover {
  background: var(--tsinghua-purple);
  color: var(--text-white, #fff);
}

.wq-review-speak.playing,
.wq-review-speak-ex.playing {
  animation: wq-pulse 1s ease-in-out infinite;
}

@keyframes wq-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

.wq-review-tag {
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  padding: 3px 10px;
  margin-left: auto;
}

.wq-review-tag.wrong {
  color: var(--error);
  background: rgba(214, 69, 69, 0.1);
}

.wq-review-tag.slow {
  color: var(--warning);
  background: rgba(232, 148, 26, 0.12);
}

.wq-review-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
}

.wq-review-label {
  font-size: 12px;
  color: var(--text-light);
  white-space: nowrap;
  flex-shrink: 0;
  width: 52px;
}

.wq-review-en {
  font-size: 14px;
  color: var(--text-primary);
}

.wq-review-zh {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-secondary);
}

.wq-review-ex {
  font-size: 14px;
  color: var(--text-primary);
  font-style: italic;
}

.wq-review-exzh {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 2px 0 0 62px;
}

/* Scene Grid */
.scene-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  /* 行高吃内容（2026-09-22）：无此声明时定高容器下 Chrome 会把 12 行 auto 轨
     等分压缩（390×844 实测行高仅 45px，卡片 desc/zh 被 overflow:hidden 裁掉）；
     实测 rows=137px、可滚动 scrollH=1804px，桌面矮窗同受益 */
  grid-auto-rows: max-content;
  gap: 16px;
  padding: 24px 28px;
  overflow-y: auto;
  align-content: start;
}

.scene-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  position: relative;
}

.scene-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--tsinghua-purple-lighter);
}

/* 2026-09-14 用户定稿：场景卡统一为无色带标题直排，
   渐变缩略区（.scene-card-thumb）与性别徽章（.scene-card-gender）规则随 DOM 一并移除 */
.scene-card-body {
  padding: 12px 14px 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.scene-card-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.scene-card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}

.scene-card-zh {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

/* Per-scene conversation-round bar (between EN title and ZH name) */
.scene-rounds-row {
  margin: 3px 0 4px;
}

.scene-rounds-bar {
  display: block;
  width: 100%;
  height: 4px;
  background: var(--border-color);
  border-radius: 2px;
  overflow: hidden;
}

.scene-rounds-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--tsinghua-purple-pale), var(--tsinghua-purple));
  border-radius: 2px;
  transition: width 0.4s ease;
}

.scene-rounds-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.scene-card-desc {
  font-size: 12px;
  color: var(--text-light);
  line-height: 1.5;
  flex: 1;
}

.scene-card-enter {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--tsinghua-purple);
  margin-top: 8px;
  transition: var(--transition);
}

.scene-card:hover .scene-card-enter {
  gap: 10px;
}

/* ===== Conversation Page ===== */
#conversation-page {
  background: var(--bg-primary);
  transition: none; /* appear instantly so the video-loading overlay is visible
                       immediately — no fade-in gap where the overlay is still
                       transparent and the user sees bare black */
}

/* Top Bar */
.conv-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 8px 10px 2px; /* 左侧贴边收紧：给中间中英文提示留足空间（2026-09-12 二轮加强） */
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
  z-index: 10;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 2px; /* 紧凑：返回按钮/版本号/场景徽章间距收紧 */
  flex-shrink: 0;
}

/* 会话页首栏左侧元素再收紧：返回按钮/版本号/场景徽章（Study Q/A、Roundtable 等长英文名不遮挡中间提示） */
.conv-topbar .topbar-left .btn-icon {
  padding: 8px 4px;
  font-size: 19px;
}
.conv-topbar .page-version-topbar {
  margin-right: 2px;
}

.topbar-center {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.conv-notice {
  flex: 1;
  max-width: 680px;
  text-align: center;
  min-width: 0;
}

.conv-notice-en {
  font-size: 9px;
  color: var(--tsinghua-purple); /* 安全提示英文 · 改清华紫（2026-09-02 需求） */
  font-family: inherit; /* 与场景对话 AI 英文同字体：继承默认（Segoe UI），去黑体（2026-09-02 需求） */
  font-weight: 400; /* 与 AI 英文正文同常规字重 */
  line-height: 1.4;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

.conv-notice-zh {
  font-size: 10px;
  color: var(--tsinghua-purple); /* 安全提示中文 · 改清华紫（2026-09-02 需求） */
  font-family: inherit; /* 与「单词学习」按钮同字体：继承默认（微软雅黑），去黑体（2026-09-02 需求） */
  font-weight: 600; /* 与「单词学习」按钮同字重（600） */
  line-height: 1.5;
  margin-top: 2px;
  white-space: nowrap;
}

.topbar-center .level-display {
  margin-left: auto;
  margin-right: 12px; /* 与右侧「试用」chip 留出间隔（2026-09-09 需求） */
  flex-shrink: 0; /* 下拉宽度固定，不被提示语挤压也不盖住提示语（2026-09-14 遮挡修复） */
}

/* 中间提示语：禁止侵占难度下拉区域——超出时自身截断而非盖住下拉（2026-09-14 遮挡修复） */
.conv-notice {
  overflow: hidden;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 0;
}

.topbar-right .btn-icon {
  padding: 8px 6px;
}

.scene-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--tsinghua-purple-pale);
  padding: 4px 6px;
  border-radius: var(--radius-md);
}

.scene-badge-icon {
  font-size: 24px;
}

.scene-badge-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--tsinghua-purple);
}

.scene-badge-sub {
  font-size: 11px;
  color: var(--text-secondary);
}

.level-display {
  display: flex;
  align-items: center;
  gap: 8px;
  /* 单框化：外容器去边框/底色/内边距，只保留下拉自身的单框（2026-09-08 需求） */
}

.level-display-label {
  font-size: 12px;
  color: var(--text-secondary);
}

.level-display-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--tsinghua-purple);
}

/* Conversation-page difficulty dropdown — same 4 levels as the scene-select
   page, styled to match the topbar (light surface + tsinghua-purple accent) */
.level-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 1px solid var(--border-color);
  background-color: var(--bg-surface);
  color: var(--tsinghua-purple);
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  line-height: 1;
  padding: 5px 26px 5px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23660874' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 10px 6px;
}
.level-select:hover {
  border-color: var(--tsinghua-purple-lighter);
}
.level-select:focus {
  border-color: var(--tsinghua-purple);
  box-shadow: 0 0 0 2px var(--tsinghua-purple-pale);
}
.level-select option {
  color: var(--text-primary);
  font-weight: 400;
}

/* Info Bar (above video) */
.conv-infobar {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 10px 20px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 16px;
}

.info-label {
  font-size: 11px;
  color: var(--text-light);
  font-weight: 500;
}

.info-value {
  font-size: 14px;
  color: var(--text-primary);
  font-weight: 600;
}

.info-vocab {
  flex: 1;
}

.vocab-text {
  color: var(--tsinghua-purple);
  font-size: 13px;
}

/* Individual vocab word — hoverable with tooltip */
.vocab-word {
  display: inline-block;
  cursor: pointer;
  padding: 1px 3px;
  border-radius: 4px;
  transition: background 0.15s, color 0.15s;
}

.vocab-word:hover {
  background: rgba(106, 27, 154, 0.12);
  color: var(--tsinghua-purple);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
}

/* Shared tooltip for vocab words */
.vocab-tooltip {
  position: fixed;
  z-index: 9999;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 8px 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  font-size: 13px;
  max-width: 260px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s, transform 0.2s;
  white-space: normal;
}

.vocab-tooltip.visible {
  opacity: 1;
  transform: translateY(0);
}

.vocab-tooltip .vt-word {
  font-weight: 700;
  color: var(--tsinghua-purple);
  margin-bottom: 4px;
  font-size: 14px;
}

.vocab-tooltip .vt-phonetic {
  color: #e65100;
  font-family: 'Segoe UI', Arial, sans-serif;
  font-size: 13px;
  margin-bottom: 4px;
}

.vocab-tooltip .vt-meaning {
  color: var(--text-primary);
  line-height: 1.4;
}

.vocab-tooltip .vt-loading {
  color: var(--text-secondary);
  font-style: italic;
}

.info-divider {
  width: 1px;
  height: 28px;
  background: var(--border-color);
}

/* Main Content: Video + Chat */
.conv-main {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(400px, 1fr) minmax(380px, 440px);
  grid-template-rows: 1fr;
  gap: 0;
  overflow: hidden;
  min-height: 0;
}

/* Video Section (left) */
.conv-video-section {
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border-right: 1px solid var(--border-color);
  padding: 16px;
  gap: 10px;
  overflow: hidden;
  min-height: 0;
  height: 100%;
}

.video-wrapper {
  flex: 1;
  background: #000;
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  min-height: 200px;
  box-shadow: var(--shadow-md);
}

.video-wrapper video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

/* Listening video overlay — sits on top of speaking video, crossfades in */
#scene-video-listening {
  z-index: 5;
  opacity: 0;
  pointer-events: none; /* clicks pass through to #scene-video below */
}

/* ===== Video Loading Overlay (covers black area until first frame) ===== */
.video-loading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 匹配过场（2026-09-25 用户实测裁决）：浅紫柔光底与随后视频画面视觉跳跃，
     底框回归黑色与视频区一致；提示语/雷达光圈用浅紫灰保持品牌感 */
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 8; /* above both videos, below mic button (z-index 30) */
  pointer-events: none; /* never block clicks on the video */
  opacity: 1;
  transition: opacity 0.25s ease; /* 首帧即隐藏（黑屏优化 2026-09-03）：快速淡出不拖尾 */
}

/* 空场景优雅占位（2026-09-22 用户裁决不隐藏空场景）：视频素材未发布时
   替代黑屏——浅紫柔光卡 + 场景名，语音对话全功能照常；素材导入发布后
   占位自动消失（有可用套即不显示）。层级：两视频(5)之上、黑框(8)之下 */
.scene-video-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: linear-gradient(160deg, #faf9ff 0%, #f4f0fb 55%, #ece6fa 100%);
  z-index: 6;
  pointer-events: none;
}
.scene-video-placeholder .ph-emoji {
  font-size: 64px;
  line-height: 1;
  filter: drop-shadow(0 6px 18px rgba(106, 76, 175, 0.18));
}
.scene-video-placeholder .ph-title {
  font-size: 22px;
  font-weight: 700;
  color: #4b3f78;
  letter-spacing: 0.02em;
}
.scene-video-placeholder .ph-sub {
  font-size: 13px;
  color: #8d84b0;
}
.scene-video-placeholder.hidden {
  display: none;
}

.video-loading.hidden {
  opacity: 0;
}

/* 秒显慢隐（2026-09-25 用户实测黑缝根修）：过场层「出现」必须瞬时——
   重开场景时若走 250ms 淡入，黑色视频区会在过场层半透明期透出成黑缝；
   「消失」保留 250ms 淡出（与底下已就绪的画面交叠，平滑） */
.video-loading.no-fade {
  transition: none !important;
}

/* ===== 匹配陪练员雷达过场（2026-09-25 用户裁决：黑屏→匹配主题化） =====
   中心陪练员头像（海报探测成功即换真人照，否则浅紫剪影）+ 三圈清华紫
   雷达波扩散扫描；门闩开门瞬间 .matched 锁定：雷达波停、头像微放大、
   「已匹配」徽标随黑框 250ms 淡出一并退场——零额外等待，声画同帧优先 */
.match-radar {
  position: relative;
  width: 168px;
  height: 168px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.match-ring {
  position: absolute;
  inset: 0;
  border: 2px solid rgba(166, 127, 212, 0.55); /* 浅紫光圈（黑底高可见，2026-09-25 用户裁决） */
  border-radius: 50%;
  animation: matchRadar 2.4s ease-out infinite;
}
.match-ring.r2 { animation-delay: 0.8s; }
.match-ring.r3 { animation-delay: 1.6s; }
@keyframes matchRadar {
  0% { transform: scale(0.3); opacity: 0.85; }
  100% { transform: scale(1); opacity: 0; }
}
.match-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #241f38 center / cover no-repeat; /* 深紫灰底（黑框上的剪影托底） */
  border: 2px solid rgba(166, 127, 212, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: matchAvatarBreath 2.4s ease-in-out infinite;
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.match-avatar svg path { fill: #b9aee0; } /* 剪影浅紫（覆盖 HTML 内联 fill） */
.match-avatar.has-photo svg { display: none; }
@keyframes matchAvatarBreath {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
.match-status {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%) scale(0.85);
  padding: 3px 14px;
  border-radius: 999px;
  background: #6a4caf;
  color: #fff;
  font-size: 12px;
  letter-spacing: 1px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.video-loading.matched .match-ring { animation: none; opacity: 0; }
.video-loading.matched .match-avatar { animation: none; transform: scale(1.08); border-color: #a67fd4; }
.video-loading.matched .match-status { opacity: 1; transform: translateX(-50%) scale(1); }

.video-loading-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

/* 过渡语（.video-loading-phrase / .vlp-prefix）已于 2026-09-03 整体下线删除，
   黑框仅剩 spinner + 常驻提示语（.video-loading-hint）。 */

@keyframes vlpFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 匹配过场提示语：雷达下方居中；浅紫字（黑底高可读）+ 末尾
   紫色心跳脉冲点，营造「正在智能匹配陪练员」的实时连线感。
   匹配过场（2026-09-25 用户实测裁决）：底框回归黑色，文字用浅紫灰。 */
.video-loading-hint {
  text-align: center;
  font-size: 12.5px;
  line-height: 1.6;
  color: #b3a8dc; /* 浅紫（黑底高可读性） */
  font-family: 'PingFang SC', 'Microsoft YaHei', -apple-system, sans-serif;
  letter-spacing: 1.5px;
  animation: vlpFadeIn 0.3s ease both; /* 即刻淡入，不等黑框消失 */
}
.video-loading-hint::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  margin-left: 8px;
  vertical-align: 2px;
  background: #A67FD4; /* 清华紫亮化脉冲点 */
  box-shadow: 0 0 6px rgba(166, 127, 212, 0.9);
  animation: vldPulse 1.1s ease-in-out infinite;
}
@keyframes vldPulse {
  0%, 100% { opacity: 0.35; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.15); }
}
@media (max-width: 720px) {
  .video-loading-hint {
    font-size: 11px;
    letter-spacing: 1px;
    max-width: 86%;
  }
}

/* ===== Fullscreen Button ===== */
.video-fullscreen-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 30;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.2s, opacity 0.2s;
  opacity: 0.75;
}

.video-fullscreen-btn:hover {
  background: rgba(0, 0, 0, 0.85);
  transform: scale(1.1);
  opacity: 1;
}

.video-fullscreen-btn svg {
  width: 20px;
  height: 20px;
  fill: #FFFFFF;
}

/* ===== Fullscreen state ===== */
.video-wrapper:fullscreen,
.video-wrapper:-webkit-full-screen {
  background: #000;
  border-radius: 0;
  box-shadow: none;
  width: 100vw;
  height: 100vh;
  flex: none;
  min-height: 0;
}

/* In fullscreen the wrapper size changes instantly; force the replay button to
   the bottom-right corner of the fullscreen area and pin the mic/fullscreen
   buttons to the top layer so they always stay visible and clickable. */
.video-wrapper:fullscreen .video-replay-btn,
.video-wrapper:-webkit-full-screen .video-replay-btn {
  top: auto !important;          /* override any stale inline positioning from the small layout */
  /* bottom/right are set inline by positionReplayBtn() — JS letterbox math applies in fullscreen too */
  right: 12px;                   /* pre-JS fallback only; inline value wins once JS runs */
  left: auto !important;
  transform: none;
  z-index: 2147483000 !important;
  pointer-events: auto !important;
}
.video-wrapper:fullscreen .video-replay-btn:hover,
.video-wrapper:-webkit-full-screen .video-replay-btn:hover {
  transform: scale(1.08);
}
.video-wrapper:fullscreen .mic-btn,
.video-wrapper:-webkit-full-screen .mic-btn,
.video-wrapper:fullscreen .video-fullscreen-btn,
.video-wrapper:-webkit-full-screen .video-fullscreen-btn {
  z-index: 2147483000 !important;
  pointer-events: auto !important;
}

/* Fullscreen: double the box-shadow pulse radius for a bigger glow */
.video-wrapper:fullscreen .mic-btn.recording,
.video-wrapper:-webkit-full-screen .mic-btn.recording {
  animation: mic-pulse-deep-fs 1.1s ease-in-out infinite;
}

@keyframes mic-pulse-deep-fs {
  0%, 100% { box-shadow: 0 0 0 0 rgba(183, 28, 28, 0.6); }
  50% { box-shadow: 0 0 0 56px rgba(183, 28, 28, 0); }
}

.video-overlay-info {
  position: absolute;
  bottom: 16px;
  left: 16px;
  background: rgba(102, 8, 116, 0.85);
  backdrop-filter: blur(8px);
  border-radius: var(--radius-sm);
  padding: 6px 14px;
  z-index: 20;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

.video-label {
  font-size: 12px;
  color: var(--text-white);
  font-weight: 600;
}

/* ===== 静默唤醒遮罩（双端 2026-10-01）：长时间无对话活动时铺上，
   毛玻璃模糊+深色压罩+浅色呼吸提示，双击/双触唤醒。
   z 序：波形10<场景标20<遮罩25<麦克风30<重播35（遮罩盖画面不盖控件） ===== */
.video-idle-veil {
  position: absolute;
  inset: 0;
  z-index: 25;
  background: rgba(24, 16, 34, 0.42);
  backdrop-filter: blur(12px); /* 2026-10-01 用户裁决：模糊值 8px 再提 50% → 12px */
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  animation: idle-veil-in 0.45s ease;
}
@keyframes idle-veil-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.video-idle-veil-text {
  color: rgba(255, 255, 255, 0.92);
  font-size: 15px;
  letter-spacing: 2px;
  padding: 10px 22px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
  user-select: none;
  -webkit-user-select: none;
  animation: idle-veil-pulse 2.2s ease-in-out infinite;
}
@keyframes idle-veil-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* ===== Audio Waveform (overlaid on video, floating above black bars) ===== */
.audio-waveform {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 36px;
  background: rgba(0, 0, 0, 0.75);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  overflow: hidden;
  z-index: 10;
}

.audio-waveform.active {
  display: flex;
  animation: waveform-fade-in 0.3s ease;
}

@keyframes waveform-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.waveform-bars {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 22px;
  justify-content: center;
}

.waveform-bar {
  width: 1px;
  min-height: 3px;
  background: #FFFFFF;
  border-radius: 1px;
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.4);
  animation: waveform-pulse 0.7s ease-in-out infinite;
}

@keyframes waveform-pulse {
  0% { height: 3px; opacity: 0.4; }
  50% { height: 18px; opacity: 1; }
  100% { height: 3px; opacity: 0.4; }
}

/* Chat Section (right) */
.conv-chat-section {
  display: flex;
  flex-direction: column;
  background: var(--bg-surface-alt);
  overflow: hidden;
  position: relative;
  min-height: 0;
}

.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}

.chat-ai-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.chat-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.chat-avatar.female {
  background: linear-gradient(135deg, var(--tsinghua-purple-pale), var(--tsinghua-purple-lighter));
}

.chat-avatar.male {
  background: linear-gradient(135deg, #DCE6F0, #6B8FB5);
}

.chat-avatar.girl {
  background: linear-gradient(135deg, #F3E2F1, #C9A6D8);
}

.chat-avatar.boy {
  background: linear-gradient(135deg, #DFF0E4, #8FC7A6);
}

/* Voice gender dropdown — compact select in chat header */
.voice-gender-select {
  margin-left: auto;
  padding: 4px 8px;
  border: 1px solid var(--tsinghua-purple-light, #b8a9d9);
  border-radius: 8px;
  background: var(--bg-card, #fff);
  color: var(--text-primary, #333);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  outline: none;
  transition: var(--transition, all 0.2s);
  flex-shrink: 0;
}
.voice-gender-select:hover {
  border-color: var(--tsinghua-purple, #660874);
  background: var(--tsinghua-purple-pale, #f5f0fa);
}
.voice-gender-select:focus {
  border-color: var(--tsinghua-purple, #660874);
  box-shadow: 0 0 0 2px var(--tsinghua-purple-pale, #f5f0fa);
}

.chat-ai-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}

.chat-ai-status {
  font-size: 12px;
  color: var(--success);
  display: flex;
  align-items: center;
  gap: 4px;
}

.chat-ai-status.waiting {
  color: var(--text-light);
}

.chat-ai-status.speaking {
  color: var(--text-light);
}

.chat-ai-status.offline {
  color: var(--text-primary);
}

.chat-header-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--tsinghua-purple);
  font-weight: 600;
  background: var(--tsinghua-purple-pale);
  padding: 4px 12px;
  border-radius: 50px;
}

.pulse-dot {
  width: 8px;
  height: 8px;
  background: var(--tsinghua-purple);
  border-radius: 50%;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}

/* Chat Messages */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  scroll-behavior: smooth;
}

.chat-messages::-webkit-scrollbar {
  width: 6px;
}

.chat-messages::-webkit-scrollbar-track {
  background: transparent;
}

.chat-messages::-webkit-scrollbar-thumb {
  background: var(--border-hover);
  border-radius: 3px;
}

.message {
  display: flex;
  gap: 10px;
  max-width: 88%;
  animation: msg-in 0.3s ease;
}

@keyframes msg-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.message.ai {
  align-self: flex-start;
}

.message.user {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.message-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.message.ai .message-avatar {
  background: linear-gradient(135deg, var(--tsinghua-purple-pale), var(--tsinghua-purple-lighter));
}

.message.user .message-avatar {
  background: linear-gradient(135deg, #E0D4E8, #B0A0BC);
}

.message-content {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.message.user .message-content {
  align-items: flex-end;
}

.message-bubble {
  padding: 10px 16px;
  border-radius: var(--radius-md);
  font-size: 15px;
  line-height: 1.55;
  word-wrap: break-word;
}

.message.ai .message-bubble {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  border-top-left-radius: 4px;
}

/* ===== Chinese translation line (AI bubbles) ===== */
/* Appended under the English text once the reply is finalized. Subtle gray
   small type + a tiny purple "中" chip — informative but never dominant. */
.msg-translation {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px dashed rgba(102, 63, 180, 0.22);
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--text-light);
  display: flex;
  gap: 6px;
  align-items: flex-start;
}
.msg-translation-label {
  flex: none;
  font-size: 10px;
  line-height: 1.6;
  color: var(--tsinghua-purple);
  border: 1px solid rgba(102, 63, 180, 0.35);
  border-radius: 4px;
  padding: 0 3px;
  margin-top: 1px;
}
.msg-translation-text {
  flex: 1;
  min-width: 0;
}

.message.user .message-bubble {
  background: var(--tsinghua-purple);
  color: var(--text-white);
  border-top-right-radius: 4px;
}

.message-meta {
  font-size: 11px;
  color: var(--text-light);
  padding: 0 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ===== Replay button (AI messages, icon-only) ===== */
.replay-btn {
  border: none;
  background: none;
  color: var(--text-light);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 5px;
  border-radius: 4px;
  transition: var(--transition);
}
.replay-btn:hover {
  background: var(--tsinghua-purple-pale);
  color: var(--tsinghua-purple);
  transform: scale(1.12);
}

/* Replay button inside the AI bubble — inline at the END of the English
   text (last line), with the Chinese translation appended BELOW it. */
.message-bubble .bubble-replay {
  display: inline-block;
  margin-left: 6px;
  vertical-align: middle;
  font-size: 14px;
  padding: 2px 4px;
}

/* ===== Score badge (user messages) ===== */
.score-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  background: rgba(108, 117, 125, 0.12);
  color: #6C757D;
  border-radius: 12px;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}
.score-badge:hover {
  background: rgba(108, 117, 125, 0.22);
}
/* Overall score text is neutral gray — no loud green/orange/red */
.score-badge.good,
.score-badge.mid,
.score-badge.low {
  background: rgba(108, 117, 125, 0.12);
  color: #6C757D;
}
.score-badge.failed {
  color: var(--text-light);
}

/* ===== Score tooltip (data holder — never shown in-place) ===== */
/* The evaluation card is rendered into the GLOBAL tooltip below on hover,
   so it is never clipped by the chat scroll container nor covered by AI text. */
.score-tooltip {
  display: none;
}

/* ===== Global score tooltip (fixed to <body>, always outermost layer) ===== */
.score-tooltip-global {
  position: fixed;
  z-index: 100000;
  width: 280px;
  max-height: 70vh;
  overflow-y: auto;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 12px;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  pointer-events: none;
}
.score-tooltip-global.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* ===== Word dictionary tooltip ===== */
.dict-word {
  cursor: help;
  border-radius: 3px;
  transition: background 0.15s ease;
}
.dict-word:hover {
  background: rgba(102, 8, 116, 0.10);
  text-decoration: underline dotted rgba(102, 8, 116, 0.45);
  text-underline-offset: 3px;
}
.dict-tooltip {
  position: fixed;
  z-index: 100001;
  display: none;
  background: #ffffff;
  border: 1px solid rgba(102, 8, 116, 0.18);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  padding: 8px 10px;
  font-size: 12.5px;
  line-height: 1.5;
  text-align: left;
  pointer-events: none;
  max-width: 280px;
}
.dict-tip-word {
  display: block;
  font-weight: 700;
  color: #4A0556;
  margin-bottom: 2px;
}
.dict-tip-def {
  color: #3a3a3a;
}
.dict-tip-loading {
  color: #999;
}
.score-tooltip-header {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-color);
}
.score-dim {
  margin-bottom: 9px;
}
.score-dim-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  margin-bottom: 3px;
}
.score-dim-label {
  color: var(--text-primary);
  font-weight: 500;
}
.score-dim-value {
  font-weight: 700;
  color: var(--tsinghua-purple);
}
.score-bar {
  height: 5px;
  background: var(--border-color);
  border-radius: 3px;
  overflow: hidden;
}
.score-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--score-blue), var(--score-blue-light));
  border-radius: 3px;
  transition: width 0.6s ease;
}
.score-dim-note {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 3px;
  line-height: 1.45;
}
.score-suggestion {
  margin-top: 10px;
  border-top: 1px dashed var(--border-color);
  padding-top: 8px;
}
.score-suggestion-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--tsinghua-purple);
  margin-bottom: 5px;
}
.score-suggestion-en {
  font-size: 12.5px;
  color: var(--text-primary);
  line-height: 1.5;
  font-weight: 500;
  background: rgba(102, 8, 116, 0.08);
  border-radius: 6px;
  padding: 6px 9px;
}
.score-suggestion-note {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 5px;
  line-height: 1.45;
}

.message.speaking .message-bubble {
  border-color: var(--tsinghua-purple);
  box-shadow: 0 0 0 2px var(--tsinghua-purple-pale);
}

.speaking-indicator {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 6px;
}

.speaking-indicator span {
  width: 3px;
  height: 12px;
  background: var(--tsinghua-purple);
  border-radius: 2px;
  animation: speaking-bar 0.6s ease-in-out infinite;
}

.speaking-indicator span:nth-child(2) { animation-delay: 0.15s; }
.speaking-indicator span:nth-child(3) { animation-delay: 0.3s; }

@keyframes speaking-bar {
  0%, 100% { height: 4px; }
  50% { height: 14px; }
}

/* Chat Input Area */
.chat-input-area {
  padding: 14px 20px;
  background: var(--bg-surface);
  border-top: 1px solid var(--border-color);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mic-section {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Mic button — now floats at top-center of the video wrapper (black letterbox area) */
.mic-btn {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: var(--error);
  color: var(--text-white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  flex-shrink: 0;
  box-shadow: 0 2px 12px rgba(214, 69, 69, 0.45);
}

.mic-btn:hover {
  background: var(--tsinghua-purple-dark);
  transform: scale(1.05);
}

/* AI speaking/thinking — mic is dimmed (not your turn to talk) */
.mic-btn.ai-speaking {
  background: #181818;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5);
  animation: none;
  color: #2E2E2E;
}

/* Listening / waiting for user speech — color DEEPENED + glow to prompt user */
.mic-btn.recording {
  background: #B71C1C;
  animation: mic-pulse-deep 1.1s ease-in-out infinite;
}

@keyframes mic-pulse-deep {
  0%, 100% { box-shadow: 0 0 0 0 rgba(183, 28, 28, 0.6); }
  50% { box-shadow: 0 0 0 28px rgba(183, 28, 28, 0); }
}

/* ===== Replay button in the bottom-right corner (replays the AI's last line as sound only) ===== */
.video-replay-btn {
  position: absolute;
  bottom: 30px; /* JS 预载前的兜底值；加载后由 positionReplayBtn() 按信箱区计算，钉在黑带内 LingooAI 水印正上方（2026-09-12 用户定位） */
  right: 12px;
  z-index: 35; /* above waveform (10) and scene label (20), same layer as mic/fullscreen */
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(2px);
  color: rgba(255, 255, 255, 0.92);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.video-replay-btn:hover {
  background: var(--tsinghua-purple);
  color: #fff;
  transform: scale(1.08);
}

.video-replay-btn:active {
  transform: scale(0.95);
}

/* While the AI's line is being replayed, give the button a subtle highlight */
.video-replay-btn.playing {
  background: var(--tsinghua-purple);
  color: #fff;
  animation: replay-glow 0.9s ease-in-out infinite;
}

@keyframes replay-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(102, 8, 116, 0.55); }
  50% { box-shadow: 0 0 0 12px rgba(102, 8, 116, 0); }
}

.mic-status {
  font-size: 14px;
  color: var(--text-secondary);
  margin-left: auto;
}

.mic-status.listening {
  color: var(--text-light);
  font-weight: 600;
}

.mic-status.thinking {
  color: var(--text-light);
  font-weight: 600;
}

.interim-text {
  font-size: 14px;
  color: var(--text-light);
  font-style: italic;
  min-height: 0;
  padding: 0 4px;
}

.interim-text:not(:empty) {
  min-height: 20px;
}

.chat-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* 手机端专属反馈按钮：桌面恒隐藏，≤720px 媒体查询内恢复（2026-10-01） */
.feedback-btn-mobile {
  display: none;
}

/* ===== Modal ===== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(26, 21, 32, 0.5);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fade-in 0.2s ease;
}

.modal-overlay.hidden {
  display: none;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal {
  background: var(--bg-surface);
  border-radius: var(--radius-xl);
  width: 440px;
  max-width: 90%;
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  animation: modal-in 0.3s ease;
}

@keyframes modal-in {
  from { opacity: 0; transform: translateY(20px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-color);
}

.modal-header h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}

/* Leaderboard modal title in Tsinghua purple */
.leaderboard-modal .modal-header h3 {
  color: var(--tsinghua-purple);
}

.modal-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.modal-body {
  padding: 24px;
}

.setting-group {
  margin-bottom: 20px;
}

.setting-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.setting-input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: 14px;
  outline: none;
  transition: var(--transition);
}

.setting-input:focus {
  border-color: var(--tsinghua-purple);
  box-shadow: 0 0 0 3px var(--tsinghua-purple-pale);
}

.setting-hint {
  font-size: 12px;
  color: var(--text-light);
  margin-top: 6px;
}

/* 设置弹窗「关于」区块：升级状态提示（紫调、与主题呼应） */
.setting-update-status {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--tsinghua-purple);
  word-break: break-all;
}
.setting-update-status.setting-update-error {
  color: var(--danger, #c0392b);
}
.setting-update-status.setting-update-ok {
  color: var(--text-light);
}

/* AI 服务提示行：文字左侧 + 按钮右侧同一水平线 */
.setting-hint-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* 服务在线登录页红色警示文字 */
.admin-warning {
  color: #D32F2F;
  font-weight: 500;
}

.setting-hint-row .setting-hint {
  margin-top: 0;
}

/* 按钮与提示文字字号一致（12px），同一水平线显示 */
.setting-hint-row .btn-text {
  font-size: 12px;
  padding: 0;
  margin-bottom: 0;
  white-space: nowrap;
}

.setting-hint a {
  color: var(--tsinghua-purple);
}

.setting-slider {
  width: 100%;
  accent-color: var(--tsinghua-purple);
}

.setting-value {
  display: inline-block;
  margin-left: 8px;
  font-size: 14px;
  color: var(--tsinghua-purple);
  font-weight: 600;
}

.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-end;
}

/* ===== Share Button (used on welcome / scene / conversation pages) ===== */
.btn-share-welcome {
  margin-top: 8px;
  padding: 8px 20px;
  font-size: 13px;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition);
}

.btn-share-welcome:hover {
  background: var(--tsinghua-purple-pale);
  color: var(--tsinghua-purple);
  border-color: var(--tsinghua-purple);
}

/* ===== Loading Overlay ===== */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(26, 21, 32, 0.4);
  backdrop-filter: blur(2px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  z-index: 999;
}

.loading-overlay.hidden {
  display: none;
}

.loading-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--tsinghua-purple-pale);
  border-top-color: var(--tsinghua-purple);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loading-text {
  font-size: 15px;
  color: var(--text-white);
  font-weight: 500;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* ===== Toast ===== */
.toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--bg-dark);
  color: var(--text-white);
  padding: 12px 24px;
  border-radius: var(--radius-md);
  font-size: 14px;
  z-index: 1001;
  opacity: 0;
  transition: all 0.3s ease;
  box-shadow: var(--shadow-lg);
  pointer-events: none;
}

.toast:not(.hidden) {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.toast.error {
  background: var(--error);
}

.toast.success {
  background: var(--success);
}

/* ===== Utility ===== */
.hidden {
  display: none !important;
}

/* ===== Responsive ===== */
@media (max-width: 900px) {
  .conv-main {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
  }

  .conv-video-section {
    border-right: none;
    border-bottom: 1px solid var(--border-color);
  }

  .scene-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
    padding: 14px;
  }

  .wordquiz-options {
    grid-template-columns: 1fr;
  }

  .wordquiz-card {
    padding: 30px 22px 26px;
  }

  .wordquiz-prompt {
    top: 12px;
    left: 14px;
    font-size: 13px;
  }

  .wq-partner-group {
    top: 12px;
    right: 14px;
    gap: 8px;
  }

  .wordquiz-partner {
    font-size: 13px;
  }

  .wq-pron-voice-btn {
    font-size: 12px;
    padding: 4px 10px;
  }

  .wq-mascot {
    top: 36px;
    right: 10px;
    width: 100px;
    height: 100px;
  }

  .wordquiz-word {
    font-size: 34px;
  }

  .wq-requiz-tag {
    right: 0;
    font-size: 11px;
    padding: 2px 8px;
  }

  .welcome-tagline {
    font-size: 18px;
  }

  .welcome-tagline-zh {
    font-size: 13px; /* 窄屏：长英文译文单行不换行时收缩字号防溢出 */
  }

  .welcome-features {
    gap: 6px; /* 窄屏：四个词组单行时收紧间距与 chip 尺寸防溢出 */
  }

  .feature-chip {
    padding: 5px 10px;
    font-size: 11.5px;
    gap: 4px;
  }

  .logo-text {
    font-size: 40px;
  }
}

/* 品牌 LOGO 后台预览：与欢迎页 logo 同字体/字重/配色，字号按弹窗比例缩放 */
.admin-brand-preview-wrap {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-top: 14px;
  padding: 12px 16px;
  background: var(--bg-surface-alt, #f8f6fb);
  border: 1px solid var(--border-color, #E8E4EC);
  border-radius: var(--radius-md, 10px);
}
.admin-brand-preview-label {
  font-size: 12px;
  color: var(--text-light);
  flex-shrink: 0;
}
.admin-brand-preview {
  font-size: 34px;
  font-weight: 800;
  color: var(--tsinghua-purple);
  letter-spacing: -0.5px;
  line-height: 1.1;
  word-break: break-all;
}
.admin-brand-preview .up-accent { color: var(--tsinghua-gold); }
/* 副标题 LOGO 后台预览：跟随主预览，字号收敛 */
.admin-brand-sub-preview {
  font-size: 16px;
  font-weight: 800;
  color: var(--tsinghua-purple);
  letter-spacing: 0.5px;
  line-height: 1.2;
  word-break: break-all;
}
.admin-brand-sub-preview .up-accent { color: var(--tsinghua-gold); }

/* ===== 语言选择器（i18n）===== */
.lang-select {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary, #6b6580);
  background: var(--bg-surface-alt, #f8f6fb);
  border: 1px solid var(--border-color, #E8E4EC);
  border-radius: 999px;
  padding: 3px 8px;
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b6580' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
  padding-right: 20px;
  letter-spacing: 0.02em;
  transition: border-color 0.15s, color 0.15s;
}
.lang-select:hover { border-color: var(--tsinghua-purple, #660874); color: var(--tsinghua-purple, #660874); }
.lang-select:focus { border-color: var(--tsinghua-purple, #660874); }
#lang-select-scene { margin-right: 2px; }
/* 徽章预览：与学习证书顶部圆徽章同构（cert-emblem-ring/inner/-s/-u 复用同一套
   样式与 JS 同步逻辑——renderCertBrand 会一并更新这里的文字与自适应字号） */
.admin-brand-emblem-demo {
  align-self: center;
  display: flex;
  margin-left: auto;
}

/* ============ AUTH OVERLAY (login / register) ============ */
.auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: linear-gradient(160deg, var(--tsinghua-purple-dark), var(--tsinghua-purple) 45%, var(--tsinghua-purple-light));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.auth-overlay.hidden {
  display: none;
}

.auth-card {
  background: var(--bg-surface);
  border-radius: var(--radius-xl);
  width: 400px;
  max-width: 100%;
  padding: 36px 32px 28px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.35);
  animation: modal-in 0.35s ease;
  text-align: center;
}

.auth-logo {
  font-size: 34px;
  font-weight: 800;
  color: var(--tsinghua-purple);
  letter-spacing: -0.5px;
}

/* 登录/注册页品牌区两行纵向排布（2026-10-01 实测同行修复）：logo-row/logo-sub-row
   均为 inline-flex 行级盒，在 text-align:center 的卡片流式布局里相邻会挤同一行；
   欢迎页靠 .welcome-logo 的 column flex 天然分层，登录页无此容器。
   改 fit-content 块级弹性盒：各自独占一行 + margin auto 左右居中 + 宽度随内容
   收缩（™/® 绝对定位锚点在行右缘，语义与欢迎页一致） */
.auth-logo-row,
.auth-logo-sub-row {
  display: flex;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
}

.auth-sub {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 8px 0 22px;
  text-align: center;
  line-height: 1.9;
}

/* EN 态三行口号：译文内置 \n 让「— smart dialogue」等破折号后缀整体折到下一行，
   前半句保持一行；字号微收保 375px 窄屏前半句不溢出（其他语种不受影响） */
html[lang="en"] .auth-sub {
  white-space: pre-line;
  font-size: 12px;
}

.auth-phone-row {
  display: flex;
  gap: 10px;
  align-items: center;
}

.auth-phone-row .setting-input {
  flex: 1;
  min-width: 0;
}

.auth-code-btn {
  flex-shrink: 0;
  min-width: 108px;
  padding: 10px 10px;
  font-size: 13px;
  text-align: center;
}

.auth-code-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.auth-form .setting-input {
  text-align: left;
}

.auth-btn {
  width: auto;
  align-self: center;
  margin-top: 4px;
  padding: 13px 48px;
  font-size: 15px;
}

.auth-tip {
  margin-top: 16px;
  font-size: 12px;
  color: var(--text-tertiary);
  line-height: 1.6;
}

.welcome-user-row {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.welcome-user-name {
  font-size: 13px;
  color: var(--tsinghua-purple);
  font-weight: 600;
}

/* Neutralize .btn-text's asymmetric padding/margin so the logout text
   sits on the same baseline as the phone number in the same flex row */
.welcome-user-row .btn-text {
  padding: 0 4px;
  margin-bottom: 0;
  font-size: 13px;
  line-height: 1.6;
}

/* 欢迎页 登录/注册 按钮胶囊化（2026-10-03 需求，双端一致）：
   浅紫底胶囊框 + 清华紫文字；id 选择器压 .btn-text 基础样式 */
.welcome-user-row #logout-btn {
  padding: 5px 18px;
  background: var(--tsinghua-purple-pale);
  color: var(--tsinghua-purple);
  border: 1px solid var(--tsinghua-purple-lighter);
  border-radius: 999px;
  font-weight: 600;
}
.welcome-user-row #logout-btn:hover {
  background: var(--tsinghua-purple-lighter);
  color: #fff;
}

/* ============ USER CHIP (remaining time badge) ============ */
.user-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
}

.user-chip:hover {
  border-color: var(--tsinghua-purple-lighter);
  box-shadow: 0 2px 10px rgba(102, 8, 116, 0.12);
}

.user-chip-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--tsinghua-purple);
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-chip-time {
  font-size: 12px;
  font-weight: 700;
  color: #2E7D32;
  background: #E8F5E9;
  border-radius: 999px;
  padding: 2px 10px;
}

.user-chip.mini {
  padding: 5px 10px;
}

.user-chip.mini .user-chip-time {
  font-size: 12px;
}

/* ============ BILLING MODAL ============ */
.billing-modal .modal {
  width: 460px;
}

/* 付款弹窗标题栏：返回按钮左、标题居中、关闭按钮右 */
.billing-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 24px;
}
.billing-header .modal-header-left {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
}
.billing-header .btn-icon {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
}

.billing-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 16px;
  font-weight: 600;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: var(--transition);
}

.billing-back-btn:hover {
  background: var(--tsinghua-purple-pale);
  color: var(--tsinghua-purple);
}

.billing-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 8px;
}

/* ===== 档位计费（2026-09-15）：四档卡片 ===== */
/* 当日战报条（2026-09-20 获客漏斗：登录用户购买页顶部，今日练习量 + 证书入口） */
.billing-usage-today {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(102, 45, 145, 0.07);
  border: 1px solid rgba(102, 45, 145, 0.18);
  font-size: 13px;
  color: var(--text-primary);
}
.billing-usage-today .but-stats b {
  color: var(--tsinghua-purple, #660596);
  font-weight: 700;
}
.billing-usage-today .but-cert-link {
  border: none;
  background: none;
  color: var(--tsinghua-purple, #660596);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 6px;
  white-space: nowrap;
}
.billing-usage-today .but-cert-link:hover { text-decoration: underline; }

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

.billing-products {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.billing-product {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 14px 8px 12px;
  border: 1.5px solid var(--border-color);
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}

.billing-product:hover {
  border-color: var(--tsinghua-purple-lighter);
}

.billing-product.active {
  border-color: var(--tsinghua-purple);
  background: var(--tsinghua-purple-pale);
}

.billing-product.disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.billing-product .blp-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

.billing-product .blp-desc {
  font-size: 11px;
  color: var(--text-tertiary);
  line-height: 1.4;
}

.billing-product .blp-price-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 2px;
}

.billing-product .blp-price {
  font-size: 22px;
  font-weight: 800;
  color: var(--tsinghua-purple);
}

.billing-product .blp-period {
  font-size: 12px;
  color: var(--text-secondary);
}

.billing-product .blp-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--tsinghua-purple-pale, #F2EDFA);
  color: var(--tsinghua-purple);
}

.billing-product .blp-badge.off {
  background: var(--bg-subtle, #F5F5F5);
  color: var(--text-tertiary);
}

/* 特邀专家免费申请入口（替代旧的 specialExpert 下拉选项） */
.billing-special-link {
  display: block;
  margin: 0 auto;
  border: none;
  background: none;
  padding: 2px 0 0;
  font-size: 12px;
  color: var(--text-tertiary);
  text-decoration: underline;
  cursor: pointer;
}

.billing-special-link:hover {
  color: var(--tsinghua-purple);
}

/* ===== Admin API 消耗与余额卡 ===== */
.admin-usage-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 10px 0;
}
.admin-usage-block {
  background: #F7F6F3;
  border-radius: 8px;
  padding: 10px 14px;
}
.admin-usage-text {
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.7;
  white-space: pre-line;
}
.admin-usage-text .num { color: var(--tsinghua-purple); font-weight: 500; }
.admin-usage-text .low { color: #C0392B; font-weight: 500; }

/* ===== Admin 档位计费配置卡（四档价格/周期/限购 + 每日轮次） ===== */
.admin-products-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.admin-product-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.admin-product-name {
  flex: 0 0 84px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.admin-product-cell {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-tertiary);
}

.admin-product-cell input {
  width: 74px;
  padding: 5px 8px;
  font-size: 13px;
}

.billing-total {
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

.billing-qr-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: var(--bg-subtle, #FAFAFA);
  border: 1px dashed var(--tsinghua-purple-lighter);
  border-radius: var(--radius-lg);
  padding: 12px;
}

.billing-qr-wrap img {
  width: 150px;
  height: 150px;
  object-fit: contain;
  border-radius: 8px;
  background: #fff;
}

.billing-qr-tip {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.7;
  text-align: center;
}

.billing-qr-amount {
  font-weight: 800;
  color: var(--tsinghua-purple);
}

.billing-submit {
  width: auto;
  align-self: center;
  padding: 13px 48px;
}

.billing-hint {
  font-size: 12px;
  color: var(--text-tertiary);
  text-align: center;
  line-height: 1.6;
}

.billing-special-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px;
  background: var(--bg-secondary, #f5f5f7);
  border-radius: 12px;
  margin: 0 auto;
  max-width: 340px;
}

.billing-special-tip {
  font-size: 13px;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.6;
  margin: 0;
}

.billing-special-status {
  font-size: 13px;
  text-align: center;
  line-height: 1.6;
}

.billing-special-status .status-pending {
  color: #E65100;
  font-weight: 600;
}

.billing-special-status .status-approved {
  color: #2E7D32;
  font-weight: 600;
}

.billing-special-status .status-rejected {
  color: #C62828;
  font-weight: 600;
}

.billing-special-submit {
  width: auto;
  align-self: center;
  padding: 13px 48px;
}

/* Admin: special expert application review rows */
.admin-special-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: var(--bg-secondary, #f5f5f7);
  border-radius: 8px;
  gap: 8px;
}

.admin-special-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.admin-special-days-input {
  width: 64px;
  padding: 5px 8px;
  border: 1px solid var(--border, #ddd);
  border-radius: 6px;
  font-size: 13px;
}

.billing-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  margin-top: 4px;
}

.billing-orders {
  max-height: 160px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.billing-order-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  background: var(--bg-subtle, #FAFAFA);
  border: 1px solid var(--border-color);
}

.billing-order-status {
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
}

.billing-order-status.pending { background: #FFF3E0; color: #E65100; }
.billing-order-status.paid { background: #E3F2FD; color: #1565C0; }
.billing-order-status.approved { background: #E8F5E9; color: #2E7D32; }
.billing-order-status.rejected { background: #FBE9E7; color: #C62828; }

/* ============ ADMIN MODAL ============ */
.admin-modal .modal {
  width: 780px;
  max-width: 95%;
}

/* 管理窗头部：标题占满左侧空间，最小化与关闭按钮在右侧并排相邻 */
.admin-modal .modal-header h3 {
  flex: 1;
  min-width: 0;
}

.admin-modal .modal-header .btn-icon + .btn-icon {
  margin-left: 2px;
}

.admin-modal .modal-body {
  max-height: 75vh;
  overflow-y: auto;
}

/* Admin tabs */
.admin-tab-nav {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.admin-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 9px 13px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 6px 6px 0 0;
  transition: color 0.15s, background 0.15s;
  font-family: inherit;
}

.admin-tab:hover {
  color: var(--tsinghua-purple);
  background: rgba(102, 8, 116, 0.05);
}

.admin-tab.active {
  color: var(--tsinghua-purple);
  border-bottom-color: var(--tsinghua-purple);
}

.admin-tab-badge {
  display: inline-block;
  min-width: 16px;
  padding: 0 5px;
  margin-left: 5px;
  border-radius: 9px;
  background: #E65100;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

/* Overview stats cards */
.admin-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.admin-stat-card {
  background: var(--bg-subtle, #FAFAFA);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 12px 14px;
}

.admin-stat-label {
  font-size: 12px;
  color: var(--text-tertiary);
}

.admin-stat-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  margin-top: 3px;
  line-height: 1.2;
}

.admin-stat-value.purple { color: var(--tsinghua-purple); }
.admin-stat-value.green { color: #2E9E5B; }
.admin-stat-value.orange { color: #E65100; }

/* User management toolbar + pager */
.admin-user-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.admin-user-toolbar .setting-input {
  width: auto;
}

#admin-user-search {
  flex: 1;
  min-width: 170px;
}

#admin-user-status {
  min-width: 96px;
}

.admin-user-count {
  font-size: 12px;
  color: var(--text-tertiary);
  white-space: nowrap;
}

.admin-pager {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  padding: 10px 0 2px;
  font-size: 12px;
  color: var(--text-secondary);
}

.admin-user-state {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 9px;
  white-space: nowrap;
}

.admin-user-state.on {
  background: #E8F5E9;
  color: #2E9E5B;
}

.admin-user-state.off {
  background: #F3F1F6;
  color: var(--text-tertiary);
}

/* 体验中（已注册待缴费）与待人工审核 */
.admin-user-state.trial {
  background: #FFF3E0;
  color: #D97B06;
}

/* ===== 用户批量勾选（量大时一键处理）===== */
.admin-check-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
}
.admin-check-all input,
.admin-user-check {
  accent-color: var(--tsinghua-purple);
  cursor: pointer;
  flex-shrink: 0;
}
.admin-user-check {
  width: 15px;
  height: 15px;
}
.admin-user-row.checked {
  background: var(--tsinghua-purple-pale, #F5EEF9);
  border-color: rgba(102, 8, 116, 0.25);
}
.admin-batch-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 12px;
  margin-bottom: 8px;
  border-radius: var(--radius-md);
  background: var(--tsinghua-purple-pale, #F5EEF9);
  border: 1px dashed rgba(102, 8, 116, 0.3);
}
.admin-batch-count {
  font-size: 13px;
  font-weight: 700;
  color: var(--tsinghua-purple);
  margin-right: 6px;
}

.admin-user-state.wait {
  background: #EDE7F6;
  color: var(--tsinghua-purple);
}

/* 注册审核卡片：人工审核模式标签高亮 */
.admin-card-tag.regmode-manual {
  background: #FFF3E0;
  color: #D97B06;
}

.admin-login-row {
  display: flex;
  gap: 10px;
  align-items: center;
}

.admin-login-row .setting-input {
  flex: 1;
}

.admin-price-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.admin-price-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.admin-price-controls .setting-input {
  width: 110px;
}

.admin-price-status {
  font-size: 12px;
  color: #2E7D32;
}

.admin-pwd-row {
  margin-bottom: 8px;
}

.admin-pwd-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.admin-pwd-controls .setting-input {
  width: 150px;
}

.admin-pwd-hint {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 6px;
}

/* ===== 部署管理：公网+console 短信裸奔警告条 ===== */
.admin-deploy-warn {
  font-size: 13px;
  font-weight: 600;
  color: #d93025;
  background: #fdeceb;
  border: 1px solid #f5c6c2;
  border-radius: 8px;
  padding: 10px 12px;
  line-height: 1.5;
}

/* ===== 监督管理服务：最小化后的右下角恢复胶囊 ===== */
#admin-restore-pill {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 1200;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 999px;
  background: var(--bg-surface);
  border: 1px solid var(--tsinghua-purple-lighter);
  color: var(--tsinghua-purple);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(102, 8, 116, 0.16);
  user-select: none;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
#admin-restore-pill:hover {
  background: var(--tsinghua-purple-pale);
  box-shadow: 0 6px 22px rgba(102, 8, 116, 0.24);
}
#admin-restore-pill .admin-restore-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tsinghua-purple);
  box-shadow: 0 0 0 3px var(--tsinghua-purple-pale);
}

.admin-reminder-textarea {
  width: 100%;
  min-height: 72px;
  resize: vertical;
  line-height: 1.6;
  font-family: inherit;
}

/* ===== 品牌应用图标（欢迎页 LOGO 左侧 + 各页页头）===== */
.brand-app-icon {
  display: inline-block;
  object-fit: contain;
  vertical-align: middle;
}
.brand-app-icon-welcome {
  width: 34px;
  height: 34px;
  margin-right: 10px;
  align-self: center;
}
/* 欢迎页：LOGO 图标置于「学习证书」按钮框内、文字左侧 */
.brand-app-icon-cert {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
/* 学习证书页：图标置于证书标题（中英文两版）行首 */
.brand-app-icon-cert-title {
  width: 30px;
  height: 30px;
  vertical-align: -6px;
  margin-right: 8px;
}
.brand-app-icon-topbar {
  width: 24px;
  height: 24px;
  margin: 0 2px 0 4px;
}

/* 后台「品牌 LOGO」卡片 · 应用图标管理区 */
.admin-brand-icon-row {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--border-color);
}
.admin-brand-icon-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0 10px;
}
.admin-brand-icon-preview img {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  object-fit: contain;
  background: #faf7fc;
}

/* ===== Admin: 部署管理 ===== */
.admin-deploy-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 18px;
}
.admin-deploy-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  color: var(--text-secondary);
}
.admin-deploy-row b {
  color: var(--text-primary);
  font-weight: 600;
  text-align: right;
}
.admin-deploy-ips {
  font-size: 13px;
  font-weight: 600;
  color: var(--tsinghua-purple);
  line-height: 1.8;
  word-break: break-all;
}
.admin-checklist {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.admin-check-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  line-height: 1.5;
}
.admin-check-item input {
  margin-top: 3px;
  accent-color: var(--tsinghua-purple);
}
.admin-deploy-progress {
  margin-top: 12px;
  height: 6px;
  background: var(--border-color);
  border-radius: 3px;
  overflow: hidden;
}
.admin-deploy-progress-fill {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--tsinghua-purple-pale), var(--tsinghua-purple));
  border-radius: 3px;
  transition: width 0.3s ease;
}

/* ===== Admin system-config cards ===== */
.admin-card {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(26, 21, 32, 0.05);
}
.admin-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.admin-card-head::before {
  content: '';
  width: 3px;
  height: 15px;
  border-radius: 2px;
  background: var(--tsinghua-purple);
  flex-shrink: 0;
}
.admin-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.admin-card-tag {
  font-size: 11px;
  color: var(--tsinghua-purple);
  background: var(--tsinghua-purple-pale);
  border: 1px solid var(--tsinghua-purple-lighter);
  border-radius: 8px;
  padding: 1px 8px;
  font-weight: 500;
}
.admin-field-label {
  display: block;
  font-size: 12px;
  color: var(--text-tertiary);
  margin-bottom: 6px;
}
.admin-field-label.field-gap {
  margin-top: 14px;
}
.admin-card-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
/* 用户须知卡片：四语种标签页（中/英/日/韩），切换编辑对应语种正文 */
.admin-notice-langtabs {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.admin-notice-lang {
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.admin-notice-lang:hover {
  border-color: var(--tsinghua-purple-lighter);
  color: var(--tsinghua-purple);
}
.admin-notice-lang.active {
  background: var(--tsinghua-purple);
  border-color: var(--tsinghua-purple);
  color: var(--text-white);
}
.admin-card-body .admin-pwd-hint {
  margin-top: 8px;
}

/* ===== 豆包语音数字参数：标签与说明常显灰色字体（非 hover） ===== */
.tts-param-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
  max-width: 880px;
}
.tts-row {
  display: flex;
  gap: 12px;
}
.tts-row .tts-param {
  flex: 1;
  min-width: 0;
}
.tts-param {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tts-param-label {
  font-size: 12px;
  color: var(--text-tertiary);
}
.tts-param .setting-input {
  width: 100%;
  box-sizing: border-box;
  padding: 4px 6px;
}
.tts-param-note {
  font-size: 11px;
  color: var(--text-tertiary);
  line-height: 1.35;
}

/* ===== Admin gallery moderation (doodles) ===== */
.admin-doodle-list {
  margin-top: 12px;
  max-height: 420px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.admin-doodle-empty {
  padding: 24px;
  text-align: center;
  font-size: 13px;
  color: var(--text-secondary);
}
.admin-doodle-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
}
.admin-doodle-thumb {
  flex-shrink: 0;
  width: 96px;
  height: 66px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-color);
}
.admin-doodle-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.admin-doodle-info {
  flex: 1;
  min-width: 0;
}
.admin-doodle-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-doodle-meta {
  margin-top: 3px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: var(--text-secondary);
}
.admin-doodle-cmt-list {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.admin-doodle-cmt {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--text-secondary);
}
.admin-doodle-cmt-nick { color: var(--tsinghua-purple); font-weight: 600; flex-shrink: 0; }
.admin-doodle-cmt-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-doodle-cmt-del {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--text-light);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.admin-doodle-cmt-del:hover { background: rgba(231, 76, 60, 0.12); color: #E74C3C; }
.admin-doodle-cmt-empty { font-size: 11.5px; color: var(--text-light); }
.admin-doodle-del { flex-shrink: 0; }


.admin-section-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 18px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-color);
}

.admin-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-order-row,
.admin-user-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  padding: 6px 12px; /* 三行紧凑排列：行内边距收窄 */
  border-radius: var(--radius-md);
  background: var(--bg-subtle, #FAFAFA);
  border: 1px solid var(--border-color);
  flex-wrap: nowrap; /* 左侧三行信息 + 右侧状态徽章与 +1/+7/-1 按钮，整体不换行 */
}

/* 用户信息区允许压缩，保证按钮始终同屏同行 */
.admin-user-state {
  flex-shrink: 0;
}
.admin-user-row .admin-btn-row {
  flex-shrink: 0;
}

.admin-order-info {
  flex: 1;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* 用户管理行：电话号码 / 剩余时长 / 注册时间三行紧凑纵排（2026-09-09 需求），
   状态徽章与 +1/+7/-1 按钮随行右侧居中 */
.admin-user-info {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.admin-order-main {
  font-weight: 600;
  color: var(--text-primary);
}

.admin-order-sub,
.admin-user-sub {
  font-size: 11px;
  color: var(--text-secondary);
}

.admin-user-sub {
  white-space: nowrap; /* 单行完整显示，不压缩不省略 */
  flex-shrink: 0;
  line-height: 1.35;
}

.admin-user-name {
  white-space: nowrap;
  font-weight: 700;
  color: var(--tsinghua-purple);
}

.admin-btn-row {
  display: flex;
  gap: 6px;
}

/* 用户管理删除按钮：极简 ✕（hover 提示「删除该用户」），浅灰不抢眼 */
.admin-del-btn {
  color: #BBB;
  padding: 2px 4px;
  font-weight: 700;
  line-height: 1;
}

.admin-empty {
  font-size: 13px;
  color: var(--text-tertiary);
  padding: 10px 4px;
}

.settings-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
  flex-wrap: wrap;
}

/* ===== Share Modal ===== */
.share-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(26, 21, 32, 0.55);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.share-modal.hidden {
  display: none;
}

.share-modal-card {
  position: relative;
  background: #fff;
  border-radius: 16px;
  padding: 24px 20px 20px;
  width: 300px;
  max-width: 88vw;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.share-close {
  position: absolute;
  top: 10px;
  right: 14px;
  background: none;
  border: none;
  font-size: 24px;
  line-height: 1;
  color: var(--text-tertiary);
  cursor: pointer;
  padding: 4px;
}

.share-close:hover {
  color: var(--text-primary);
}

/* 安全提示弹窗正文（2026-10-01）：复用 share-modal 遮罩/卡片/关闭钮；
   弹窗内提示语取消 nowrap 允许自然回行，字号较首栏 9-10px 略升保可读 */
.conv-notice-modal-card {
  width: min(92vw, 420px);
  align-items: stretch;
}
.conv-notice-modal-body {
  text-align: left;
  padding: 4px 2px 0;
}
.conv-notice-modal-body .conv-notice-en {
  white-space: normal;
  font-size: 11px;
  line-height: 1.65;
  margin-bottom: 6px;
}
.conv-notice-modal-body .conv-notice-zh {
  white-space: normal;
  font-size: 12px;
  line-height: 1.75;
  margin-top: 4px;
  /* 2026-10-01 用户裁决：弹窗文案按三行排列、三行均左右居中（四语种同版式） */
  text-align: center;
  margin-left: 0;
}
/* 麦克风提示胶囊（2026-10-02 需求）：清华紫底 + 白字 + 全圆角，居中于三行文案之下；
   本弹窗仅微信端（≤720）弹出，桌面不弹即桌面不变 */
.conv-notice-modal-body .conv-notice-mic-hint {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 10px auto 8px;
  padding: 7px 18px;
  border-radius: 999px;
  background: var(--tsinghua-purple);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.02em;
  text-align: center;
  white-space: normal;
  box-shadow: 0 3px 10px rgba(102, 8, 116, .25);
}

.share-card {
  width: 260px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  padding: 24px 20px 16px;
  text-align: center;
  user-select: none;
  -webkit-user-select: none;
}

.share-card-header {
  margin-bottom: 8px;
}

.share-card-title {
  font-size: 26px;
  font-weight: 800;
  color: var(--tsinghua-purple);
  letter-spacing: -1px;
}

.share-card-subtitle {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 8px;
}

.share-card-desc {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 14px;
  line-height: 1.5;
}

.share-card-qr {
  background: #fff;
  border-radius: 10px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.share-card-qr canvas {
  display: block;
  width: 200px;
  height: 200px;
}

.share-card-footer {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 10px;
}

.share-modal-tip {
  margin-top: 16px;
  font-size: 13px;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.5;
}

/* ============ LEADERBOARD (conversation rounds top 100) ============ */
.leaderboard-modal .modal-body {
  max-height: 60vh;
  overflow-y: auto;
}

.leaderboard-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.leaderboard-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: var(--radius-md);
  font-size: 14px;
}

.leaderboard-row:nth-child(odd) {
  background: var(--bg-secondary, #F7F5FA);
}

.leaderboard-rank {
  min-width: 34px;
  font-weight: 700;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.leaderboard-row.top1 .leaderboard-rank { color: #D4AF37; }
.leaderboard-row.top2 .leaderboard-rank { color: #9E9E9E; }
.leaderboard-row.top3 .leaderboard-rank { color: #B87333; }

.leaderboard-name {
  flex: 1;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leaderboard-rounds {
  font-weight: 700;
  color: var(--tsinghua-purple);
  font-variant-numeric: tabular-nums;
}

.leaderboard-empty {
  text-align: center;
  color: var(--text-tertiary);
  font-size: 13px;
  padding: 24px 0;
}

/* ===== Feedback (意见建议反馈) ===== */
/* Feedback modal hint: smaller & moved up to leave more room for the input */
.feedback-modal .setting-hint {
  font-size: 11px;
  margin-top: 2px;
}

.feedback-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 34vh;
  overflow-y: auto;
  margin-bottom: 14px;
}

.feedback-empty {
  text-align: center;
  color: var(--text-tertiary);
  font-size: 12px;
  padding: 10px 0;
}

.feedback-item {
  background: var(--bg-secondary, #F7F5FA);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 10px 12px;
}

.feedback-item-text {
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.6;
  word-break: break-all;
  white-space: pre-wrap;
}

.feedback-item-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
}

.feedback-item-time {
  font-size: 12px;
  color: var(--text-tertiary);
}

.feedback-item-ops {
  display: flex;
  gap: 8px;
}

.feedback-item-ops .btn-text {
  font-size: 12px;
  padding: 0;
}

.feedback-item-ops .btn-text.delete {
  color: #D64545;
}

.feedback-editor {
  border-top: 1px solid var(--border-color);
  padding-top: 12px;
}

.feedback-editor textarea {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  min-height: 110px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  color: var(--text-primary);
  background: var(--bg-surface);
  outline: none;
  transition: var(--transition);
}

.feedback-editor textarea:focus {
  border-color: var(--tsinghua-purple);
  box-shadow: 0 0 0 3px rgba(102, 8, 116, 0.08);
}

.feedback-editor-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
}

.feedback-count {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-right: auto;
}

.avatar-nickname-text.nickname-hint {
  font-weight: 400;
  font-size: 12px;
  color: var(--text-tertiary);
}

/* ========================================
   Certificate Modal — 美式英语口语会话 LingooAI语宝 学习证书
   ======================================== */
.cert-modal-wrap {
  max-width: 640px;
  width: 92vw;
}

.cert-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-color);
}

.cert-lang-toggle {
  display: flex;
  background: var(--bg-primary);
  border-radius: var(--radius-md);
  padding: 3px;
  gap: 2px;
}

.cert-lang-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 18px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
}

.cert-lang-btn.active {
  background: var(--tsinghua-purple);
  color: #fff;
  box-shadow: 0 2px 8px rgba(102, 8, 116, 0.3);
}

.cert-body {
  padding: 22px 26px 18px;
}

/* ---- The certificate paper ---- */
.cert-card {
  position: relative;
  background:
    radial-gradient(ellipse at 50% 0%, #FFFDF6 0%, #FBF6E8 62%, #F5EED9 100%);
  border: 3px double var(--tsinghua-gold);
  outline: 1px solid rgba(196, 154, 44, 0.55);
  outline-offset: 4px;
  border-radius: 10px;
  padding: 42px 44px 36px;
  text-align: center;
  font-family: "STZhongsong", "SimSun", "Songti SC", serif;
  overflow: hidden;
}

/* decorative watermark — 由 JS 注入 --cert-watermark 与后台品牌名同步 */
.cert-card::before {
  content: var(--cert-watermark, "LingooAI");
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-24deg);
  font-size: 96px;
  font-weight: 700;
  letter-spacing: 8px;
  color: rgba(196, 154, 44, 0.07);
  font-family: Georgia, "Times New Roman", serif;
  white-space: nowrap;
  pointer-events: none;
}

/* ornamental corners */
.cert-corner {
  position: absolute;
  width: 34px;
  height: 34px;
  border-color: var(--tsinghua-gold);
  border-style: solid;
  border-width: 0;
  opacity: 0.85;
  pointer-events: none;
}

.cert-corner.tl { top: 12px; left: 12px; border-top-width: 2.5px; border-left-width: 2.5px; border-top-left-radius: 8px; }
.cert-corner.tr { top: 12px; right: 12px; border-top-width: 2.5px; border-right-width: 2.5px; border-top-right-radius: 8px; }
.cert-corner.bl { bottom: 12px; left: 12px; border-bottom-width: 2.5px; border-left-width: 2.5px; border-bottom-left-radius: 8px; }
.cert-corner.br { bottom: 12px; right: 12px; border-bottom-width: 2.5px; border-right-width: 2.5px; border-bottom-right-radius: 8px; }

/* emblem / seal-like logo at top */
.cert-emblem {
  display: flex;
  justify-content: center;
  margin-bottom: 18px;
}

.cert-emblem-ring {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--tsinghua-gold-light), var(--tsinghua-gold) 70%, #9C7A1E);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(196, 154, 44, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.cert-emblem-inner {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--bg-surface);
  border: 1.5px solid var(--tsinghua-gold);
  display: flex;
  align-items: baseline;
  justify-content: center;
  padding-top: 19px;
  color: var(--tsinghua-purple);
  font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', -apple-system, sans-serif;
  font-weight: 800;
}

/* 徽标规则：首字母（紫）+ 末 2 字母（金），字号相同，配色与 LOGO 一致 */
.cert-emblem-s {
  font-size: 18px;
  line-height: 1;
  color: var(--tsinghua-purple);
}

.cert-emblem-u {
  font-size: 18px;
  line-height: 1;
  color: var(--tsinghua-gold);
}

/* LingooAI brand on certificate — matches welcome-page LOGO exactly:
   same sans-serif font family, weight 800 and letter-spacing -1px,
   Speek = Tsinghua purple, Up = gold */
.cert-brand {
  color: var(--tsinghua-purple);
  font-weight: 800;
  font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', -apple-system, sans-serif;
  letter-spacing: -1px;
}

.cert-brand-up {
  color: var(--tsinghua-gold);
  font-weight: 800;
  font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', -apple-system, sans-serif;
  letter-spacing: -1px;
}

/* ---- Text content ---- */
.cert-overline {
  font-size: 15px;
  letter-spacing: 10px;
  color: var(--tsinghua-purple);
  margin-bottom: 8px;
  font-weight: 600;
}

.cert-title {
  font-size: 34px;
  font-weight: 700;
  color: var(--tsinghua-purple-dark);
  letter-spacing: 6px;
  margin-bottom: 4px;
  font-family: "STZhongsong", "SimSun", "Songti SC", serif;
}

.cert-title-en {
  font-size: 26px;
  letter-spacing: 1.5px;
  font-family: Georgia, "Times New Roman", serif;
}

.cert-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 14px 0 16px;
}

.cert-divider::before,
.cert-divider::after {
  content: "";
  height: 1px;
  width: 90px;
  background: linear-gradient(90deg, transparent, var(--tsinghua-gold));
}

.cert-divider::after {
  background: linear-gradient(90deg, var(--tsinghua-gold), transparent);
}

.cert-divider span {
  color: var(--tsinghua-gold);
  font-size: 16px;
  line-height: 1;
}

.cert-award-line {
  font-size: 15px;
  letter-spacing: 12px;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

.cert-name {
  font-size: 30px;
  font-weight: 700;
  color: var(--tsinghua-purple);
  letter-spacing: 6px;
  margin-bottom: 14px;
  word-break: break-all;
}

.cert-body-text {
  font-size: 16px;
  line-height: 2;
  color: var(--text-primary);
}

.cert-rounds {
  display: inline-block;
  font-size: 22px;
  font-weight: 700;
  color: var(--tsinghua-gold);
  font-family: Georgia, "Times New Roman", serif;
  padding: 0 4px;
  font-style: italic;
  font-variant-numeric: tabular-nums;
}

.cert-bottom-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: 34px;
  position: relative;
  z-index: 1;
}

/* round seal stamp */
.cert-seal {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  border: 3px solid rgba(196, 154, 44, 0.9);
  outline: 1px solid rgba(196, 154, 44, 0.55);
  outline-offset: 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--tsinghua-purple);
  transform: rotate(-12deg);
  opacity: 0.95;
  background: radial-gradient(circle, rgba(196, 154, 44, 0.08) 0%, transparent 70%);
}

.cert-seal-star {
  font-size: 20px;
  line-height: 1;
  margin-bottom: 3px;
  color: var(--tsinghua-gold);
}

.cert-seal-text {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 1px;
  text-align: center;
  color: var(--tsinghua-purple);
  font-family: "STZhongsong", "SimSun", "Songti SC", serif;
}

/* issue info */
.cert-issue {
  text-align: right;
  font-family: "STZhongsong", "SimSun", "Songti SC", serif;
}

.cert-issue-label {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.cert-issue-date {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 2px;
  /* match the "颁发日期" label font */
  font-family: "STZhongsong", "SimSun", "Songti SC", serif;
}

.cert-issue-org {
  font-size: 12px;
  color: var(--tsinghua-purple);
  margin-top: 6px;
  letter-spacing: 1px;
}

/* English content variant */
.cert-content-en .cert-overline {
  letter-spacing: 4px;
  font-family: Georgia, "Times New Roman", serif;
}

.cert-content-en .cert-name {
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: 2px;
}

.cert-content-en .cert-award-line {
  letter-spacing: 1px;
  font-family: Georgia, "Times New Roman", serif;
}

.cert-content-en .cert-body-text {
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.9;
}

.cert-modal-footer {
  display: flex;
  justify-content: center;
  padding: 0 0 18px;
}

/* ===== 手机端证书整体缩放（≤720px，2026-10-04）：桌面规格原样搬到窄屏会逐行换行
   把卡片拉成「瘦长条」——字号/内边距/徽章/印章/角标全线收敛，恢复证书纸面比例 ===== */
@media (max-width: 720px) {
  .cert-modal-wrap { width: 94vw; }
  .cert-body { padding: 12px 10px 10px; }
  .cert-card { padding: 22px 14px 18px; border-radius: 8px; }
  .cert-card::before { font-size: 46px; letter-spacing: 3px; }
  .cert-corner { width: 22px; height: 22px; }
  .cert-corner.tl { top: 8px; left: 8px; }
  .cert-corner.tr { top: 8px; right: 8px; }
  .cert-corner.bl { bottom: 8px; left: 8px; }
  .cert-corner.br { bottom: 8px; right: 8px; }
  .cert-emblem { margin-bottom: 10px; }
  .cert-emblem-ring { width: 56px; height: 56px; }
  .cert-emblem-inner { width: 44px; height: 44px; padding-top: 14px; }
  .cert-emblem-s, .cert-emblem-u { font-size: 14px; }
  .cert-overline { font-size: 12px; letter-spacing: 4px; margin-bottom: 6px; }
  .cert-title { font-size: 21px; letter-spacing: 2px; }
  .cert-title-en { font-size: 16px; letter-spacing: 1px; }
  .brand-app-icon-cert-title { width: 22px; height: 22px; vertical-align: -4px; margin-right: 5px; }
  .cert-divider { margin: 8px 0 10px; }
  .cert-divider::before, .cert-divider::after { width: 48px; }
  .cert-divider span { font-size: 13px; }
  .cert-award-line { font-size: 12px; letter-spacing: 6px; margin-bottom: 8px; }
  .cert-name { font-size: 22px; letter-spacing: 2px; margin-bottom: 10px; }
  .cert-body-text { font-size: 13px; line-height: 1.9; }
  .cert-body-text br { display: none; } /* 窄屏隐藏手工换行，交给自然流式排版 */
  .cert-rounds { font-size: 16px; }
  .cert-bottom-row { margin-top: 20px; }
  .cert-seal { width: 78px; height: 78px; border-width: 2.5px; }
  .cert-seal-star { font-size: 15px; }
  .cert-seal-text { font-size: 9px; letter-spacing: 0.5px; line-height: 1.4; }
  .cert-issue-label, .cert-issue-date { font-size: 11px; }
  .cert-issue-org { font-size: 10px; }
}

/* dark theme adjustments (if ever applied) */
[data-theme="dark"] .cert-card {
  background: linear-gradient(160deg, #2E2433, #3A2E40 55%, #33283A);
  border-color: var(--tsinghua-gold-light);
}

[data-theme="dark"] .cert-card::before {
  color: rgba(232, 199, 110, 0.06);
}

/* ===== Immersive Modules: 虚拟互动 / 创意工坊 ===== */

/* Module entry cards on word-learning page */
/* Module cards sit on the left / right of the quiz content */
.wordquiz-body {
  gap: 4px;
  align-items: stretch;
  padding: 4px 0;
  overflow: hidden; /* no scrollbar → no layout jump between questions */
}
.wordquiz-main {
  flex: 5 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Quiz card fills the center column so its top/bottom edges
   stay level with the side module cards */
.wordquiz-main .wordquiz-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 44px 40px 140px;
}
.wordquiz-main .wordquiz-prompt {
  top: 16px;
  left: 22px;
}
.wordquiz-main .wordquiz-review-panel {
  flex: 1;
}
/* Side columns: two stacked module cards per side (1:5:1) */
.wq-side-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wq-module-side {
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  justify-content: center;
  gap: 10px;
  padding: 22px 18px;
}
.wq-module-side .wq-module-icon {
  font-size: 36px;
}
.wq-module-card {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg-surface);
  border: 1px solid rgba(102, 8, 116, 0.12);
  border-radius: 14px;
  padding: 16px 18px;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}
.wq-module-card:hover {
  border-color: var(--tsinghua-purple);
  box-shadow: 0 4px 16px rgba(102, 8, 116, 0.12);
  transform: translateY(-2px);
}
.wq-module-icon {
  font-size: 32px;
  line-height: 1;
  flex-shrink: 0;
}
.wq-module-icon svg {
  display: block;
}
.wq-module-info {
  flex: 1;
  min-width: 0;
}
.wq-module-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 3px;
}

/* 阅读天地（移动端四模块入口页 2026-10-01；2026-10-03 迭代）：入口按钮
   双端放开——「LingooAI语宝三角地」新闻栏目落在阅读页，桌面端需可达；
   阅读页本体无宽度门槛，桌面双列网格正常 */
.wq-reading-btn {
  display: inline-block;
}
.reading-body {
  padding: 18px 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-content: start;
}
.reading-body .wq-module-side {
  flex: none;
  width: auto;
  max-width: none;
  align-self: stretch;
  padding: 16px 14px;
}
/* 阅读页四模块卡桌面横排（2026-10-03 用户裁决）：图标与文字信息同行，
   不再图标独占一行浪费纵向空间；作用域限 #reading-page 桌面基础规则，
   单词页侧栏卡与 ≤720 移动布局均不受影响 */
#reading-page .reading-body .wq-module-side {
  flex-direction: row;
  align-items: center;
}
/* 阅读页底部名言（2026-10-01 用户裁决）：wordquiz-quote 原为页头绝对居中，
   阅读页改静态流、网格区撑高把名言顶到窗口下部；样式/字号/点击全同源 */
#reading-page .reading-body {
  flex: 1;
}
/* 注意：必须带 #reading-page 提权——.reading-quote 与 6918 行 .wordquiz-quote 同优先级，
   裸类选择器会因次序在前被绝对居中规则覆盖（曾致名言浮在页面正中） */
#reading-page .reading-quote {
  position: static;
  transform: none;
  /* 上移凸显（2026-10-01 需求）：底距 14→72px，离开窗口下缘 */
  margin: 10px auto calc(72px + env(safe-area-inset-bottom, 0px));
  align-self: center;
  /* 胶囊化：清华紫底 + 全圆角 + 浅紫投影 */
  background: var(--tsinghua-purple);
  border-radius: 999px;
  padding: 10px 22px;
  box-shadow: 0 4px 14px rgba(102, 8, 116, .28);
}
/* 胶囊内名言白字（覆盖同源紫字规则） */
#reading-page .reading-quote .wq-quote-zh,
#reading-page .reading-quote .wq-quote-en {
  color: #fff;
}
/* 悬停/聚焦不反转成浅底深字，保持紫底白字仅加深底色 */
#reading-page .reading-quote:hover,
#reading-page .reading-quote:focus-visible {
  background: var(--tsinghua-purple-dark);
}
#reading-page .reading-quote:hover .wq-quote-zh,
#reading-page .reading-quote:hover .wq-quote-en {
  color: #fff;
}
.wq-module-desc {
  font-size: 12px;
  color: var(--text-light);
  line-height: 1.4;
}

/* Narrow screens: stack modules above the quiz content */
@media (max-width: 900px) {
  .wordquiz-body {
    flex-direction: column;
    justify-content: flex-start;
  }
  .wordquiz-main {
    flex: none;
  }
  .wq-module-side {
    flex: 1 1 0; /* 横排两卡平分：不再各占 100% 宽把第二张挤出屏幕（2026-09-09 修复） */
    width: auto;
    min-width: 0;
    max-width: 720px;
    flex-direction: row;
    align-items: center;
    align-self: center;
    gap: 10px;
    padding: 12px 12px;
  }
  .wq-side-col {
    flex-direction: row;
    width: 100%;
    max-width: 720px;
    align-self: center;
    gap: 4px;
  }
  .wq-module-side .wq-module-icon {
    font-size: 32px;
  }
  .wq-module-side .wq-module-icon svg {
    width: 28px;
    height: 28px;
  }
}

/* ===== Module Viewer Page ===== */
.module-viewer-body {
  display: flex;
  gap: 20px;
  padding: 20px 24px;
  height: calc(100vh - 130px);
}
.module-player-wrap {
  flex: 1;
  position: relative;
  background: #000;
  border-radius: 14px;
  overflow: hidden;
  min-width: 0;
}
.module-player {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.module-narration-overlay {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 80%;
  padding: 10px 18px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 15px;
  line-height: 1.5;
  border-radius: 10px;
  text-align: center;
  pointer-events: none;
  z-index: 5;
}
.module-narration-overlay.follow-cursor {
  bottom: auto;
  left: 10px;
  transform: none;
  transition: left 0.06s linear, top 0.06s linear;
}
.module-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.6);
  gap: 6px;
}
.module-empty-icon { font-size: 48px; }
.module-empty-text { font-size: 18px; font-weight: 600; }
.module-empty-hint { font-size: 13px; opacity: 0.7; }

/* ===== Interactive module player (虚拟互动 · 鼠标人机互动) ===== */
/* Layer lives inside .module-player-wrap above the video; clicks pass through the
   transparent root to the video (click-to-toggle), children opt back into events. */
.mix-ui { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.mix-ui > * { pointer-events: auto; }
/* subtitle */
.mix-subtitle { position: absolute; left: 0; right: 0; bottom: 54px; z-index: 12; text-align: center; padding: 0 40px; pointer-events: none; }
.mix-subtitle .mix-en { display: inline-block; font-size: 19px; line-height: 1.5; color: #fff; letter-spacing: .3px; text-shadow: 0 1px 8px rgba(0,0,0,.75), 0 0 2px rgba(0,0,0,.6); pointer-events: auto; cursor: default; transition: opacity .3s; }
.mix-subtitle .mix-zh { margin-top: 6px; font-size: 14px; color: #F0E6F6; letter-spacing: 1px; text-shadow: 0 1px 6px rgba(0,0,0,.8); opacity: 0; transition: opacity .3s; }
.mix-subtitle:hover .mix-zh, .mix-subtitle.mix-show-zh .mix-zh { opacity: 1; }
/* transport controls */
.mix-controls { position: absolute; left: 0; right: 0; bottom: 0; z-index: 14; height: 46px; display: flex; align-items: center; gap: 14px; padding: 0 16px; background: linear-gradient(transparent, rgba(0,0,0,.55)); opacity: 0; transition: opacity .3s; }
.module-player-wrap:hover .mix-controls, .mix-controls.mix-pin { opacity: 1; }
.mix-cbtn { background: none; border: none; cursor: pointer; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; padding: 0; flex-shrink: 0; }
/* 进度条隐藏（2026-10-02 用户裁决，双端）：播放/时间/音量/全屏保留；
   JS 按百分比写 fill/dot 宽度与可见性无关，无副作用 */
.mix-progress { display: none; }
.mix-cbtn svg { width: 18px; height: 18px; fill: #fff; transition: transform .15s; }
.mix-cbtn:hover svg { transform: scale(1.15); }
.mix-progress { flex: 1; height: 4px; background: rgba(255,255,255,.28); border-radius: 4px; cursor: pointer; position: relative; }
.mix-progress .mix-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: var(--tsinghua-purple-lighter); border-radius: 4px; }
.mix-progress .mix-dot { position: absolute; top: 50%; left: 0%; width: 11px; height: 11px; background: #fff; border-radius: 50%; transform: translate(-50%,-50%); box-shadow: 0 1px 4px rgba(0,0,0,.4); pointer-events: none; }
.mix-time { font-size: 12px; color: #fff; letter-spacing: .5px; min-width: 86px; text-align: center; }
/* word chip */
.mix-chip { position: absolute; right: 22px; bottom: 104px; z-index: 16; display: flex; align-items: center; gap: 8px; cursor: pointer; background: rgba(255,255,255,.96); color: var(--tsinghua-purple); font-size: 15px; font-weight: 600; padding: 10px 18px; border-radius: 99px; border: 1.5px solid var(--tsinghua-purple); box-shadow: 0 6px 20px rgba(102,8,116,.3); letter-spacing: .5px; animation: mixChipIn .45s cubic-bezier(.34,1.56,.64,1), mixPulse 1.6s ease-in-out .5s infinite; }
.mix-chip svg { fill: var(--tsinghua-purple); flex-shrink: 0; }
@keyframes mixChipIn { from { transform: translateY(24px) scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes mixPulse { 0%,100% { box-shadow: 0 6px 20px rgba(102,8,116,.3); } 50% { box-shadow: 0 6px 28px rgba(102,8,116,.6); } }
.mix-chip.mix-out { animation: mixChipOut .3s forwards; }
@keyframes mixChipOut { to { transform: translateY(16px) scale(.8); opacity: 0; } }
/* modal mask (word card + quiz) */
.mix-mask { position: absolute; inset: 0; z-index: 24; display: none; align-items: center; justify-content: center; background: rgba(20,14,24,.45); backdrop-filter: blur(3px); }
.mix-mask.mix-show { display: flex; animation: mixMaskIn .25s ease; }
@keyframes mixMaskIn { from { opacity: 0; } to { opacity: 1; } }
.mix-word-card, .mix-quiz-card { width: 340px; max-width: 86%; background: #fff; border-radius: 16px; padding: 26px 26px 22px; box-shadow: 0 20px 60px rgba(0,0,0,.35); animation: mixCardIn .35s cubic-bezier(.34,1.4,.64,1); position: relative; }
@keyframes mixCardIn { from { transform: translateY(26px) scale(.92); opacity: 0; } to { transform: none; opacity: 1; } }
.mix-wc-head { display: flex; align-items: baseline; gap: 10px; }
.mix-wc-word { font-size: 26px; font-weight: 700; color: var(--tsinghua-purple); letter-spacing: .5px; }
.mix-wc-say { margin-left: auto; width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer; background: var(--tsinghua-purple-pale); display: flex; align-items: center; justify-content: center; transition: background .15s, transform .15s; flex-shrink: 0; }
.mix-wc-say:hover { background: #E9DAEF; transform: scale(1.08); }
.mix-wc-say svg { width: 17px; height: 17px; fill: var(--tsinghua-purple); }
.mix-wc-say.mix-playing { background: var(--tsinghua-purple); }
.mix-wc-say.mix-playing svg { fill: #fff; }
.mix-wc-phon { margin-top: 4px; font-size: 14px; color: #C9A063; letter-spacing: .5px; }
.mix-wc-pos { display: inline-block; margin-top: 10px; font-size: 11px; color: #fff; background: var(--tsinghua-purple-light); padding: 2px 9px; border-radius: 4px; letter-spacing: 1px; }
.mix-wc-en { margin-top: 12px; font-size: 14px; line-height: 1.6; color: #2B2B33; }
.mix-wc-zh { margin-top: 8px; font-size: 14px; color: #8A8A95; letter-spacing: .5px; }
.mix-wc-close { position: absolute; top: 12px; right: 14px; width: 26px; height: 26px; border: none; background: none; font-size: 17px; color: #8A8A95; cursor: pointer; line-height: 1; }
/* quiz */
.mix-quiz-tag { display: inline-block; font-size: 11px; letter-spacing: 2px; color: #C9A063; border: 1px solid #C9A063; padding: 3px 10px; border-radius: 99px; margin-bottom: 14px; }
.mix-quiz-q { font-size: 17px; line-height: 1.55; font-weight: 600; color: #2B2B33; }
.mix-quiz-qzh { margin-top: 6px; font-size: 13px; color: #8A8A95; letter-spacing: .5px; }
.mix-quiz-opts { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.mix-opt { text-align: left; font-size: 15px; padding: 12px 16px; border-radius: 10px; cursor: pointer; border: 1.5px solid #ECECF1; background: #FBFBFD; color: #2B2B33; letter-spacing: .3px; transition: border-color .15s, background .15s, transform .1s; }
.mix-opt:hover { border-color: var(--tsinghua-purple-lighter); background: var(--tsinghua-purple-pale); }
.mix-opt:active { transform: scale(.98); }
.mix-opt.mix-correct { border-color: var(--tsinghua-purple); background: var(--tsinghua-purple); color: #fff; font-weight: 600; }
.mix-opt.mix-wrong { border-color: #D9D9E2; background: #F4F4F7; color: #B9B9C4; text-decoration: line-through; }
.mix-quiz-feed { margin-top: 14px; font-size: 13px; min-height: 18px; letter-spacing: .5px; text-align: center; }
.mix-quiz-feed.mix-ok { color: var(--tsinghua-purple); }
.mix-quiz-feed.mix-no { color: #C0695B; }
/* cover */
.mix-cover { position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; background: linear-gradient(160deg, #17121F 0%, #100D16 55%, #181219 100%); transition: opacity .5s ease; }
.mix-cover.mix-hide { opacity: 0; pointer-events: none; }
.mix-cover h1 { font-size: 34px; font-weight: 600; letter-spacing: 1px; color: #EFE9F5; margin: 0; padding: 0 24px; }
.mix-cover .mix-cover-sub { font-size: 15px; color: var(--tsinghua-purple-lighter); letter-spacing: 4px; }
.mix-cover .mix-rule { width: 56px; height: 2px; background: linear-gradient(90deg, var(--tsinghua-purple-lighter), #C9A063); border-radius: 2px; }
.mix-play-btn { margin-top: 8px; display: flex; align-items: center; gap: 10px; cursor: pointer; border: none; background: var(--tsinghua-purple); color: #fff; font-size: 15px; letter-spacing: 1px; padding: 13px 34px; border-radius: 99px; box-shadow: 0 8px 24px rgba(102,8,116,.35); transition: transform .15s ease, box-shadow .15s ease; }
.mix-play-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(102,8,116,.45); }
.mix-play-btn svg { width: 14px; height: 14px; fill: #fff; }
.mix-cover .mix-cover-hint { font-size: 12px; color: #9A95A6; letter-spacing: 1px; }
/* end panel */
.mix-end { position: absolute; inset: 0; z-index: 28; display: none; flex-direction: column; align-items: center; background: linear-gradient(165deg, #F8F4FA 0%, #F1EAF4 50%, #F6F0E7 100%); padding: 34px 40px 30px; overflow: auto; }
.mix-end.mix-show { display: flex; animation: mixMaskIn .4s ease; }
.mix-end h2 { font-size: 24px; font-weight: 600; color: #2B2B33; margin: 0; }
.mix-end h2 em { font-style: normal; color: var(--tsinghua-purple); }
.mix-end .mix-end-sub { margin-top: 6px; font-size: 13px; color: #8A8A95; letter-spacing: 2px; }
.mix-review-grid { margin-top: 22px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; width: 100%; max-width: 760px; }
.mix-rw { background: #fff; border: 1.5px solid #ECECF1; border-radius: 12px; padding: 13px 6px 11px; text-align: center; cursor: pointer; transition: border-color .15s, transform .15s, box-shadow .15s; }
.mix-rw:hover { border-color: var(--tsinghua-purple); transform: translateY(-3px); box-shadow: 0 8px 20px rgba(102,8,116,.18); }
.mix-rw .mix-rw-w { font-size: 15px; font-weight: 600; color: var(--tsinghua-purple); }
.mix-rw .mix-rw-p { margin-top: 4px; font-size: 10.5px; color: #C9A063; }
.mix-rw .mix-rw-z { margin-top: 3px; font-size: 11px; color: #8A8A95; }
.mix-end-actions { margin-top: 24px; display: flex; gap: 14px; }
.mix-again { display: flex; align-items: center; gap: 8px; border: none; cursor: pointer; font-size: 14px; letter-spacing: 1px; background: var(--tsinghua-purple); color: #fff; padding: 11px 30px; border-radius: 99px; box-shadow: 0 8px 22px rgba(102,8,116,.32); transition: transform .15s; }
.mix-again:hover { transform: translateY(-2px); }
.mix-again svg { width: 14px; height: 14px; fill: #fff; }
@media (max-width: 720px) {
  .mix-review-grid { grid-template-columns: repeat(3, 1fr); }
  .mix-subtitle .mix-en { font-size: 15px; }
  .mix-cover h1 { font-size: 26px; }
}

/* 模块播放器移动适配（2026-10-02 用户反馈）：学海无涯/创意无限经「阅读天地」
   首次在移动端可达——桌面「播放器 flex:1 + 播放列表 280px」横排在 375px 下把
   播放器挤成 27px 细条（实测），视频无法呈现；改纵向堆叠：播放器 16:9 置顶，
   播放列表全宽限量高自滚，正文区超高自滚。桌面 >720px 横排不变 */
@media (max-width: 720px) {
  #module-viewer-page .module-viewer-body {
    flex-direction: column;
    flex: 1;
    min-height: 0;
    height: auto;
    overflow-y: auto;
    padding: 12px 14px;
    gap: 12px;
  }
  #module-viewer-page .module-player-wrap {
    flex: none;
    width: 100%;
    aspect-ratio: 16 / 9;
  }
  #module-viewer-page .module-playlist {
    width: 100%;
    flex: none;
    max-height: 200px;
  }
  /* 全屏按钮钉视频右上（2026-10-02 用户裁决）：≤720 由 JS 移出控制条挂到
     .mix-ui 根并加此类；z15（控制14<15<气泡16）在封面 z30 之下，
     点开始播放封面消隐后可见；.mix-ui>* 自带 pointer-events:auto 可点 */
  #module-viewer-page .mix-btn-full-tr {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 15;
    background: rgba(0, 0, 0, .45);
    border-radius: 8px;
  }
}

.module-playlist {
  width: 280px;
  flex-shrink: 0;
  background: var(--bg-surface);
  border: 1px solid rgba(102, 8, 116, 0.1);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.module-playlist-head {
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 700;
  color: var(--tsinghua-purple);
  border-bottom: 1px solid rgba(102, 8, 116, 0.08);
}
.module-playlist-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}
.module-playlist-loading {
  padding: 20px;
  text-align: center;
  font-size: 13px;
  color: var(--text-light);
}
.mp-item {
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s;
  margin-bottom: 4px;
}
.mp-item:hover { background: var(--tsinghua-purple-pale); }
.mp-item.active {
  background: var(--tsinghua-purple-pale);
  border-left: 3px solid var(--tsinghua-purple);
}
.mp-item-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mp-item-sub {
  font-size: 11px;
  color: var(--text-light);
  margin-top: 2px;
}
.mp-item-meta {
  font-size: 11px;
  color: var(--text-lighter);
  margin-top: 4px;
}

/* ===== Module Manager Page ===== */
.mm-tab-group {
  display: flex;
  gap: 4px;
  background: var(--bg-surface-alt);
  border-radius: 10px;
  padding: 3px;
}
.mm-tab {
  padding: 6px 16px;
  border: none;
  background: transparent;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-light);
  cursor: pointer;
  transition: all 0.15s;
}
.mm-tab.active {
  background: var(--bg-surface);
  color: var(--tsinghua-purple);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.mm-body {
  display: flex;
  gap: 20px;
  padding: 20px 24px;
  align-items: flex-start;
}
.mm-import-card,
.mm-list-card {
  background: var(--bg-surface);
  border: 1px solid rgba(102, 8, 116, 0.1);
  border-radius: 14px;
  padding: 20px;
}
.mm-import-card { flex: 0 0 420px; }
.mm-list-card { flex: 1; min-width: 0; }
.mm-import-title,
.mm-list-head {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 14px;
}
.mm-form-row { margin-bottom: 14px; }
.mm-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-light);
  margin-bottom: 5px;
}
.mm-input,
.mm-textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid rgba(102, 8, 116, 0.15);
  border-radius: 9px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text-primary);
  background: var(--bg-surface-alt);
  box-sizing: border-box;
  transition: border-color 0.15s;
}
.mm-input:focus,
.mm-textarea:focus {
  outline: none;
  border-color: var(--tsinghua-purple);
}
.mm-textarea { resize: vertical; line-height: 1.5; }

.mm-video-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mm-loading,
.mm-empty {
  padding: 24px;
  text-align: center;
  font-size: 13px;
  color: var(--text-light);
}
.mm-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-surface-alt);
  border-radius: 10px;
}
.mm-item-info { flex: 1; min-width: 0; }
.mm-item-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mm-item-meta {
  font-size: 11px;
  color: var(--text-lighter);
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.mm-badge {
  background: var(--tsinghua-purple-pale);
  color: var(--tsinghua-purple);
  padding: 1px 7px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
}
.mm-del-btn {
  padding: 5px 14px;
  border: 1px solid rgba(220, 60, 60, 0.3);
  background: transparent;
  border-radius: 8px;
  font-size: 12px;
  color: #c33;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}
.mm-del-btn:hover {
  background: #c33;
  color: #fff;
}
.mm-item-btns {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.mm-edit-btn {
  padding: 5px 14px;
  border: 1px solid rgba(102, 51, 153, 0.3);
  background: transparent;
  border-radius: 8px;
  font-size: 12px;
  color: var(--tsinghua-purple, #663399);
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}
.mm-edit-btn:hover {
  background: var(--tsinghua-purple, #663399);
  color: #fff;
}
.mm-badge-cand {
  background: rgba(230, 126, 34, 0.14);
  color: #d07818;
}
.mm-badge-prev {
  background: rgba(84, 84, 84, 0.12);
  color: #666;
}
.mm-edit-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 14px 0 10px;
}
.mm-edit-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

/* ===== 人机互动视频：格式规范说明卡 ===== */
.mm-ix-spec {
  margin: 0 0 14px;
  border: 1px solid rgba(102, 8, 116, 0.14);
  border-radius: 10px;
  background: var(--tsinghua-purple-pale);
  overflow: hidden;
}
.mm-ix-spec-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--tsinghua-purple);
  letter-spacing: 0.3px;
}
.mm-ix-spec-toggle:hover { background: rgba(102, 8, 116, 0.06); }
.mm-ix-spec-arrow { font-size: 11px; font-weight: 400; color: var(--text-light); }
.mm-ix-spec-body { padding: 2px 14px 14px; }
.mm-ix-spec-flow {
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--text-primary);
  background: #fff;
  border: 1px dashed rgba(102, 8, 116, 0.25);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 10px;
}
.mm-ix-spec-h { font-size: 12.5px; font-weight: 700; color: var(--tsinghua-purple); margin: 10px 0 5px; }
.mm-ix-spec-p { font-size: 12.5px; line-height: 1.7; color: var(--text-secondary, #5b5566); }
.mm-ix-spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}
.mm-ix-spec-table th, .mm-ix-spec-table td {
  border: 1px solid rgba(102, 8, 116, 0.1);
  padding: 6px 9px;
  text-align: left;
  vertical-align: top;
  line-height: 1.55;
}
.mm-ix-spec-table th { background: rgba(102, 8, 116, 0.07); color: var(--tsinghua-purple); font-weight: 600; white-space: nowrap; }
.mm-ix-spec-table td:first-child { white-space: nowrap; font-weight: 600; color: var(--text-primary); }
.mm-ix-spec-tip { margin-top: 10px; color: #8a6d1f; }

/* ===== 人机互动视频：互动数据编辑器 ===== */
.mm-ix-editor {
  margin-top: 14px;
  border: 1px solid rgba(102, 8, 116, 0.14);
  border-radius: 10px;
  background: #fff;
  padding: 14px;
}
.mm-ix-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.mm-ix-title { font-size: 13.5px; font-weight: 700; color: var(--tsinghua-purple); }
.mm-ix-status { font-size: 12px; color: var(--text-light); margin-left: auto; }
.mm-ix-total-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.mm-ix-total-row .mm-label { margin: 0; }
.mm-ix-total-input { width: 90px; }
.mm-ix-sec { margin-top: 14px; }
.mm-ix-sec-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.mm-ix-sec-title { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.mm-ix-sec-hint { font-size: 11.5px; color: var(--text-light); }
.mm-ix-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.mm-ix-table th, .mm-ix-table td {
  border: 1px solid rgba(102, 8, 116, 0.1);
  padding: 4px 6px;
  text-align: left;
  vertical-align: middle;
}
.mm-ix-table th { background: var(--tsinghua-purple-pale); color: var(--tsinghua-purple); font-weight: 600; font-size: 12px; white-space: nowrap; }
.mm-ix-table input[type="text"], .mm-ix-table input[type="number"] {
  width: 100%;
  border: none;
  background: transparent;
  font-size: 12.5px;
  padding: 3px 2px;
  color: var(--text-primary);
  outline: none;
  box-sizing: border-box;
}
.mm-ix-table input:focus { background: var(--tsinghua-purple-pale); border-radius: 4px; }
.mm-ix-num { width: 64px; }
.mm-ix-del {
  border: none;
  background: none;
  color: #b9b3c4;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 2px 6px;
}
.mm-ix-del:hover { color: #c0695b; }
.mm-ix-add {
  margin-top: 8px;
  border: 1px dashed rgba(102, 8, 116, 0.35);
  background: none;
  color: var(--tsinghua-purple);
  font-size: 12px;
  padding: 5px 14px;
  border-radius: 8px;
  cursor: pointer;
}
.mm-ix-add:hover { background: var(--tsinghua-purple-pale); }
.mm-ix-quiz {
  border: 1px solid rgba(102, 8, 116, 0.12);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 10px;
  background: #fdfcfe;
}
.mm-ix-quiz-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.mm-ix-quiz-no { font-size: 12.5px; font-weight: 700; color: var(--tsinghua-purple); }
.mm-ix-quiz-t { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-light); }
.mm-ix-quiz-t input { width: 70px; }
.mm-ix-quiz-q { width: 100%; margin-bottom: 6px; }
.mm-ix-opts { display: flex; flex-direction: column; gap: 5px; }
.mm-ix-opt { display: flex; align-items: center; gap: 8px; }
.mm-ix-opt input[type="radio"] { accent-color: var(--tsinghua-purple); flex-shrink: 0; }
.mm-ix-opt input[type="text"] { flex: 1; }
.mm-ix-opt-tag { font-size: 11px; color: #C9A063; white-space: nowrap; width: 44px; }
.mm-ix-actions { display: flex; align-items: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.mm-ix-save-note { font-size: 12px; color: var(--text-light); }
.mm-ix-danger { color: #c0695b; border-color: rgba(192, 105, 91, 0.4); }

/* ===== Module Manager (embedded in admin modal 监督管理服务) ===== */
.admin-mm .admin-mm-tabs {
  display: inline-flex;
  margin: 10px 0 14px;
}
.admin-mm .mm-list-head.admin-mm-list-head {
  margin: 18px 0 10px;
}
.admin-mm .mm-video-list {
  max-height: 240px;
  overflow-y: auto;
}
.admin-mm .mm-form-row { margin-bottom: 10px; }
.admin-mm-cols {
  display: flex;
  gap: 12px;
}
.admin-mm-cols > div { flex: 1; min-width: 0; }


/* ===== 高能例句 modal ===== */
.sentences-modal { width: 560px; }
.wq-sent-mascots {
  display: inline-flex;
  gap: 8px;
  margin-left: auto;
  margin-right: 12px;
  flex-shrink: 0;
}
/* 吉祥物音色选择按钮（Wave 朵朵 / Daily 步步，GIF 动图）——头部右侧、关闭按钮内侧 */
.sentences-modal .modal-header h3 { flex: 1; min-width: 0; }
/* 吉祥物音色选择按钮（Wave 朵朵 / Daily 步步，GIF 动图） */
.wq-sent-mascot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border-color, #E8E4EC);
  background: var(--bg-surface);
  border-radius: 999px;
  padding: 2px 10px 2px 3px;
  font-size: 11px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition);
  font-family: inherit;
}
.wq-sent-mascot-img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-secondary, #f3f0f7);
}
.wq-sent-mascot:hover { border-color: var(--tsinghua-purple); color: var(--tsinghua-purple); }
.sentences-modal .modal-header { flex-wrap: wrap; row-gap: 8px; }
@media (max-width: 480px) {
  .sentences-modal .modal-header { padding: 14px 16px; }
  .wq-sent-mascots { margin-right: 8px; gap: 6px; }
}
.wq-sent-mascot.active {
  border-color: var(--tsinghua-purple);
  background: var(--tsinghua-purple-pale);
  color: var(--tsinghua-purple);
  box-shadow: 0 2px 8px rgba(102, 8, 116, 0.12);
}
.wq-sent-count {
  font-size: 12px;
  color: var(--text-light);
  text-align: right;
  margin-bottom: 6px;
}
.wq-sent-card {
  background: var(--bg-surface-alt);
  border: 1px solid rgba(102, 8, 116, 0.12);
  border-radius: var(--radius-md);
  padding: 22px 24px;
  min-height: 150px;
}
.wq-sent-en-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.wq-sent-en {
  flex: 1;
  font-size: 19px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.55;
}
/* 重读按钮：极简胶囊样式 */
.wq-sent-replay {
  flex-shrink: 0;
  border: 1px solid rgba(102, 8, 116, 0.18);
  background: transparent;
  color: var(--text-light);
  border-radius: 999px;
  padding: 3px 14px;
  font-size: 12px;
  cursor: pointer;
  transition: var(--transition);
  font-family: inherit;
}
.wq-sent-replay:hover { border-color: var(--tsinghua-purple); color: var(--tsinghua-purple); background: rgba(102, 8, 116, 0.05); }
.wq-sent-replay.playing { background: var(--tsinghua-purple); color: #fff; border-color: var(--tsinghua-purple); }
.wq-sent-zh {
  margin-top: 12px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
}
.wq-sent-word {
  margin-top: 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--tsinghua-purple);
}
.wq-sent-nav {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 18px;
}

/* ===== 随手涂鸦 modal ===== */
.doodle-modal { width: 640px; }
.doodle-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.doodle-colors {
  display: flex;
  gap: 6px;
}
.doodle-color {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.12);
  cursor: pointer;
  padding: 0;
  transition: transform 0.15s;
}
.doodle-color.active {
  border-color: var(--tsinghua-purple);
  transform: scale(1.18);
  box-shadow: 0 0 0 2px rgba(102, 8, 116, 0.25);
}
.doodle-tools {
  display: flex;
  gap: 6px;
}
.doodle-tool {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  font-size: 15px;
  cursor: pointer;
  transition: var(--transition);
}
.doodle-tool.active {
  border-color: var(--tsinghua-purple);
  background: rgba(102, 8, 116, 0.08);
}
.doodle-toolbar .btn-primary { margin-left: auto; }
.doodle-canvas {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  cursor: crosshair;
  touch-action: none;
}
.doodle-perm {
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.5;
}
.doodle-perm.unlocked { color: #27AE60; }
.doodle-perm.locked { color: var(--text-light); }
.doodle-gallery-head {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}
.doodle-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 10px;
  max-height: 260px;
  overflow-y: auto;
}
.doodle-gallery-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--text-light);
  font-size: 13px;
  padding: 18px 0;
}
.doodle-item {
  background: var(--bg-surface-alt);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.doodle-item img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: #fff;
}
.doodle-item-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 8px;
  font-size: 11.5px;
}
.doodle-item-author {
  font-weight: 600;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.doodle-item-date { color: var(--text-light); flex-shrink: 0; }

/* ===== Doodle upload spec & likes/comments (learning ecosystem) ===== */
.doodle-upload-spec {
  font-size: 11.5px;
  color: var(--text-light);
  margin-top: 8px;
  line-height: 1.5;
}
/* ===== Admin scene videos (import → preview → publish / rollback) ===== */
.sv-spec {
  font-size: 11.5px;
  color: var(--text-light);
  background: rgba(155, 149, 168, 0.07);
  border: 1px dashed var(--border-color);
  border-radius: 8px;
  padding: 8px 12px;
  line-height: 1.7;
  margin: 10px 0 12px;
}
.sv-spec > b {
  display: block;
  color: var(--text-secondary);
  font-weight: 600;
  margin: 6px 0 2px;
}
.sv-spec > b:first-child {
  margin-top: 0;
  color: var(--tsinghua-purple);
}
.sv-spec ul {
  margin: 2px 0 4px;
  padding-left: 18px;
}
.sv-spec li {
  margin: 1px 0;
}
.sv-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 18px;
  margin-bottom: 4px;
}
/* 场景下拉独占一行（24 个场景名长，窄窗也不再挤压类型/套按钮） */
.sv-controls-scene {
  flex: 1 1 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sv-controls-scene .mm-input { width: 100%; }
/* 类型 + 套 并排第二行；内容宽度自适应 + 按钮永不换行/裁切 */
.sv-controls-filter {
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sv-file-pick {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.sv-file-pick-btn {
  cursor: pointer;
  margin: 0;
  user-select: none;
  white-space: nowrap;
}
.sv-file-name {
  font-size: 13px;
  color: var(--text-light);
  word-break: break-all;
}
.sv-file-name.warn {
  color: #D97706;
}
.sv-type-toggle {
  display: flex;
  flex-wrap: wrap; /* 极窄窗口兜底：按钮整颗换行而不是被裁切 */
  gap: 8px;
}
.sv-type-btn,
.sv-set-btn {
  font-size: 12.5px;
  color: var(--text-light);
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 6px 14px;
  cursor: pointer;
  white-space: nowrap; /* 任何窗口宽度下文字不折行、按钮不被裁切 */
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.sv-type-btn.active,
.sv-set-btn.active {
  color: var(--tsinghua-purple);
  border-color: var(--tsinghua-purple);
  background: rgba(102, 8, 116, 0.05);
  font-weight: 600;
}
.sv-preview-area {
  margin-top: 12px;
}
.sv-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 720px) {
  .sv-compare { grid-template-columns: 1fr; }
}
.sv-pane {
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}
.sv-pane-label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-secondary);
}
.sv-player {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 6px;
}
.sv-pane-meta {
  font-size: 11.5px;
  color: var(--text-light);
}
.sv-voice-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding: 8px 12px;
  background: rgba(102, 8, 116, 0.04);
  border: 1px solid rgba(102, 8, 116, 0.12);
  border-radius: 8px;
}
.sv-voice-row .mm-label { margin: 0; }
.sv-voice-select {
  width: auto;
  min-width: 210px;
  padding: 5px 10px;
  font-size: 12.5px;
}
.sv-voice-hint {
  font-size: 11.5px;
  color: var(--text-light);
}
.sv-pane-empty {
  font-size: 12px;
  color: var(--text-light);
  padding: 18px 0;
  align-self: stretch;
  text-align: center;
}
.sv-rollback-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px dashed var(--border-color);
  border-radius: 10px;
}
.sv-rollback-meta {
  font-size: 12px;
  color: var(--text-secondary);
}
/* Import preview / edit / publish bar */
.doodle-import-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1.5px dashed rgba(102, 8, 116, 0.35);
  border-radius: var(--radius-md);
  background: rgba(102, 8, 116, 0.05);
}
.doodle-import-bar.hidden { display: none; }
.doodle-import-title {
  flex: 1;
  min-width: 160px;
  padding: 7px 10px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: 13px;
  font-family: inherit;
  color: var(--text-primary);
  background: var(--bg-surface);
  outline: none;
  transition: var(--transition);
}
.doodle-import-title:focus {
  border-color: var(--tsinghua-purple);
  box-shadow: 0 0 0 2px rgba(102, 8, 116, 0.12);
}
.doodle-import-hint {
  flex-basis: 100%;
  font-size: 11.5px;
  color: var(--text-secondary);
  line-height: 1.4;
}
.doodle-item-title {
  padding: 5px 8px 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.doodle-item-actions {
  display: flex;
  gap: 6px;
  padding: 5px 8px 7px;
}
.doodle-like-btn,
.doodle-cmt-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-light);
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 2px 10px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.doodle-like-btn:hover,
.doodle-cmt-toggle:hover {
  color: var(--tsinghua-purple);
  border-color: var(--tsinghua-purple-light);
}
.doodle-like-btn.liked {
  color: #E74C3C;
  border-color: #E74C3C;
}
/* ===== Owner actions (edit / delete own work) ===== */
.doodle-own-sep {
  display: inline-block;
  width: 1px;
  height: 14px;
  background: var(--border-color);
  margin: 0 2px;
  vertical-align: middle;
}
.doodle-own-btn {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  color: var(--text-light);
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 2px 10px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.doodle-own-btn.edit:hover {
  color: var(--tsinghua-purple);
  border-color: var(--tsinghua-purple-light);
  background: rgba(102, 8, 116, 0.04);
}
.doodle-own-btn.del:hover {
  color: #C0392B;
  border-color: #E5A29B;
  background: rgba(192, 57, 43, 0.05);
}
.doodle-comments {
  border-top: 1px solid var(--border-color);
  padding: 8px;
}
.doodle-cmt-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-height: 140px;
  overflow-y: auto;
}
.doodle-cmt {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-secondary);
}
.doodle-cmt-nick {
  font-weight: 600;
  color: var(--tsinghua-purple);
  margin-right: 6px;
}
.doodle-cmt-empty {
  font-size: 12px;
  color: var(--text-light);
}
.doodle-cmt-input-row {
  display: flex;
  gap: 6px;
  margin-top: 7px;
}
.doodle-cmt-input {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  padding: 5px 10px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-primary);
  outline: none;
}
.doodle-cmt-input:focus {
  border-color: var(--tsinghua-purple-light);
}
.doodle-cmt-send {
  font-size: 12px;
  padding: 5px 12px;
  background: var(--tsinghua-purple);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
}
.doodle-cmt-send:hover {
  opacity: 0.88;
}

/* ===== WaveDaily 刷一啵 button (conversation infobar) ===== */
/* Align the button's left border with the video's left border below:
   infobar padding (20px) + info-item padding (16px) = 36px → video edge sits at 16px,
   so pull the item left by 20px */
.wavedaily-item {
  margin-left: -20px;
}
.wavedaily-btn {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-light);
}
.wavedaily-btn.done {
  border-color: rgba(39, 174, 96, 0.4);
  color: var(--text-light);
  background: rgba(39, 174, 96, 0.06);
}

/* ===== 经典会话 (Classic Conversations) ===== */
.classic-tip {
  font-size: 12px;
  color: var(--text-light);
  text-align: center;
}
/* 「悬停触播」提示悬于 上一个/下一个 按钮组正上方 */
.classic-nav-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.classic-nav-row {
  display: flex;
  gap: 8px;
}
/* 虚拟互动/创意工坊/经典会话页头名言：与单词学习页完全一致（居中、英文完整呈现） */
.classic-list {
  max-width: 880px;
  margin: 0 auto;
  width: 100%;
  padding: 22px 24px 40px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  overflow-y: auto;
  align-content: start;
}
.classic-list-loading {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--text-light);
  padding: 48px 0;
  font-size: 13px;
}
.classic-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color, #E8E4EC);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.classic-card img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
}
.classic-card-info {
  padding: 12px 16px 14px;
}
.classic-card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}
.classic-card-sub {
  font-size: 12px;
  color: var(--text-light);
  margin-top: 3px;
}
.classic-card:hover {
  transform: translateY(-3px);
  border-color: var(--tsinghua-purple-lighter);
  box-shadow: 0 10px 26px rgba(102, 8, 116, 0.12);
}
.classic-detail {
  max-width: 880px;
  margin: 0 auto;
  width: 100%;
  padding: 22px 24px 40px;
  overflow-y: auto;
}
.classic-detail-head {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color, #E8E4EC);
  border-radius: 14px;
  padding: 14px 16px;
}
.classic-detail-img {
  width: 168px;
  height: 112px;
  object-fit: cover;
  border-radius: 10px;
  flex-shrink: 0;
}
.classic-detail-meta {
  min-width: 0;
}
.classic-detail-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
}
.classic-detail-sub {
  font-size: 12px;
  color: var(--text-light);
  margin-top: 4px;
}
.classic-detail-actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}
.classic-detail-actions button:disabled {
  opacity: .4;
  pointer-events: none;
}
/* 图片行吉祥物动图（Wave 朵朵 / Daily 步步，GIF 自带动画，点击观看视频） */
.classic-mascots {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-shrink: 0;
  margin-left: 12px;
}
.classic-mascot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  user-select: none;
}
.classic-mascot.hidden {
  display: none;
}
.classic-mascot-img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: 12px;
  background: transparent;
  transition: transform .2s ease;
}
.classic-mascot:hover .classic-mascot-img {
  transform: translateY(-4px) scale(1.06);
}
.classic-mascot-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}
@media (max-width: 720px) {
  .classic-mascots {
    gap: 8px;
    margin-left: 6px;
  }
  .classic-mascot-img {
    width: 48px;
    height: 48px;
  }
}
.classic-lines {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.classic-line {
  background: var(--bg-surface);
  border: 1px solid var(--border-color, #E8E4EC);
  border-radius: 12px;
  padding: 12px 16px;
  cursor: pointer;
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  column-gap: 14px;
  align-items: start;
  transition: border-color .15s ease, background .15s ease;
}
.classic-line.me {
  background: var(--tsinghua-purple-pale);
  border-color: rgba(102, 8, 116, 0.18);
}
.classic-line-speaker {
  font-size: 11px;
  font-weight: 600;
  color: var(--tsinghua-purple);
  letter-spacing: 0.02em;
  line-height: 1.55;
  padding-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.classic-line-text {
  line-height: 1.55;
}
.classic-line-en {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-primary);
}
.classic-line-zh {
  font-size: 12px;
  color: var(--text-light);
  margin-left: 10px;
}
.classic-line:hover {
  border-color: var(--tsinghua-purple-lighter);
}
.classic-line.speaking,
.classic-line.playing {
  border-color: var(--tsinghua-purple);
  box-shadow: 0 0 0 2px rgba(102, 8, 116, 0.15);
}
.classic-line.playing .classic-line-en {
  color: var(--tsinghua-purple-dark);
  font-weight: 600;
}
@media (max-width: 720px) {
  .classic-list,
  .classic-detail {
    grid-template-columns: 1fr;
    padding: 16px;
  }
  .classic-list {
    display: grid;
  }
  .classic-detail-head {
    flex-wrap: wrap;
  }
  .classic-detail-actions {
    margin-left: 0;
    width: 100%;
  }
  .classic-line {
    grid-template-columns: 84px minmax(0, 1fr);
    column-gap: 10px;
  }
}

/* ===== Mascot admin import row ===== */
.mascot-import-row {
  margin-top: 10px;
}
.mascot-file-btn {
  flex-shrink: 0;
}
.mascot-upload-btn {
  flex-shrink: 0;
}

/* ===== 页头励志名言（单词学习/虚拟互动/创意工坊/经典会话通用，点击打开吉祥物视频） ===== */
#wordquiz-page .page-header,
#module-viewer-page .page-header,
#classic-conv-page .page-header {
  position: relative;
}
/* 单词学习页：水平 padding 收窄（左 32→4px / 右 32→14px）使 header-left
   整组贴左；header-left 内部 gap 再收紧（12→4px）。两个动作叠加让
   「单词学习」标题 + 难度下拉整体左移，避开居中名言的英文行（2026-09-02 需求，
   2026-09-13 二轮加强：返回按钮/版本号/标题/下拉全组件收紧，英文版 Vocabulary 更宽） */
#wordquiz-page .page-header {
  padding-left: 4px;
  padding-right: 14px;
}
#wordquiz-page .header-left {
  gap: 4px;
  margin-right: 4px;
}
#wordquiz-page .header-left .btn-icon {
  padding: 8px 4px;
  font-size: 19px;
}
#wordquiz-page .page-version-topbar {
  margin-right: 2px;
}
#wordquiz-page .page-title {
  font-size: 19px;
}
#wordquiz-page .level-select {
  font-size: 13px;
  padding: 4px 22px 4px 8px;
  background-position: right 7px center;
}
#wordquiz-page .header-right {
  gap: 6px;
}
/* 单词学习页难度下拉：箭头与文字留约一个字的间距（padding-right 34 − 箭头 10 −
   距右缘 9 = 15px ≈ 一字宽）；宽度由 JS 按选中文字动态收缩（见 fitLevelSelect） */
#wordquiz-level-select {
  padding-right: 34px;
}
/* 对话页难度下拉：外层 .level-display 已单框化，此处无需额外样式 */
.wordquiz-quote {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: center;
  padding: 5px 14px;
  border-radius: 10px;
  cursor: pointer;
  transition: background .15s ease;
  z-index: 4;
  user-select: none;
  /* Wide enough for the full English sentence; wraps instead of truncating */
  max-width: min(600px, 46vw);
}
.wordquiz-quote .wq-quote-zh {
  font-size: 13px;
  font-weight: 600; /* 与「虚拟助教」按钮同字重（600） */
  color: var(--tsinghua-purple); /* 名言中文 · 改清华紫（2026-09-02 需求） */
  font-family: inherit; /* 与「虚拟助教」同字体：继承页面默认（微软雅黑），去黑体（2026-09-02 需求，覆盖单词学习/虚拟互动/创意工坊/经典会话） */
  letter-spacing: 0.02em;
  transition: color .15s ease;
  white-space: nowrap;
}
.wordquiz-quote .wq-quote-en {
  font-size: 12px;
  color: var(--tsinghua-purple); /* 名言英文 · 改清华紫（2026-09-02 需求） */
  font-family: inherit; /* 与场景对话 AI 英文同字体：继承页面默认（Segoe UI），去黑体（2026-09-02 需求，覆盖单词学习/虚拟互动/创意工坊/经典会话） */
  font-weight: 400; /* 与 AI 英文正文同常规字重 */
  letter-spacing: 0.01em;
  /* Full sentence always visible: wrap, never ellipsis */
  white-space: normal;
  line-height: 1.5;
}
.wordquiz-quote:hover,
.wordquiz-quote:focus-visible {
  background: var(--tsinghua-purple-pale);
  outline: none;
}
.wordquiz-quote:hover .wq-quote-zh,
.wordquiz-quote:hover .wq-quote-en {
  color: var(--tsinghua-purple-dark); /* hover 转深紫，默认已是清华紫故加深以示反馈 */
}
@media (max-width: 720px) {
  .wordquiz-quote {
    padding: 4px 8px;
    max-width: min(600px, 74vw);
  }
  .wordquiz-quote .wq-quote-zh {
    font-size: 11px;
    white-space: normal; /* narrow screens: let the Chinese line wrap too */
  }
  .wordquiz-quote .wq-quote-en {
    font-size: 10px;
    line-height: 1.45;
  }
}

/* 英文版：左侧（Vocabulary 标题 + High School 下拉）与右侧（Settings/Share）组件均更宽，
   居中名言收窄避让（33vw-67vw 区间），英文句自动换行完整可见、不再被遮挡（2026-09-14 需求） */
html[lang="en"] .wordquiz-quote {
  max-width: min(600px, 34vw);
  padding: 4px 10px;
}
html[lang="en"] .wordquiz-quote .wq-quote-en {
  font-size: 11px;
  line-height: 1.45;
}
@media (max-width: 720px) {
  html[lang="en"] .wordquiz-quote {
    max-width: min(600px, 74vw); /* 窄屏恢复与中文版同宽 */
  }
}

/* ===== 虚拟互动/创意工坊/经典会话 首栏布局重构（2026-09-15 需求） =====
   名言由「绝对定位悬浮页首中央」改为「文档流弹性居中」：header-left 拉伸占据
   左右两组之间的全部剩余空间，名言在其内部居中——与返回/版本/图标/标题及
   设置/分享按钮物理隔离，中/英/日三语种均不可能再相互遮挡；
   英文行强制单行不折行（宽视口 11px 单行可容纳整句） */
#module-viewer-page .header-left,
#classic-conv-page .header-left {
  flex: 1 1 auto;
  min-width: 0;
  gap: 12px;
}
#module-viewer-page .wordquiz-quote,
#classic-conv-page .wordquiz-quote {
  position: static;
  transform: none;
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
}
#module-viewer-page .wordquiz-quote .wq-quote-en,
#classic-conv-page .wordquiz-quote .wq-quote-en {
  white-space: nowrap;
  font-size: 11px;
  line-height: 1.45;
}
@media (max-width: 1024px) {
  /* 中等视口：英文行允许折行并再降半号，优先保证不遮挡 */
  #module-viewer-page .wordquiz-quote .wq-quote-en,
  #classic-conv-page .wordquiz-quote .wq-quote-en {
    white-space: normal;
    font-size: 10px;
  }
}

/* ===== 单词学习页首栏名言同步重构（2026-09-15 需求） =====
   与虚拟互动/创意工坊/经典会话同款：名言从「绝对定位悬浮中央」改为文档流
   中间位（DOM 顺序在 header-right 之后，用 order 1/2 归位到中间），英文行
   单行不折行。此前为避开悬浮名言而做的左组收紧规则继续生效、不再必要但
   无害 */
#wordquiz-page .wordquiz-quote {
  position: static;
  transform: none;
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  order: 1;
  padding: 5px 10px;
}
#wordquiz-page .header-right {
  order: 2;
}
#wordquiz-page .wordquiz-quote .wq-quote-en {
  white-space: nowrap;
  font-size: 11px;
  line-height: 1.45;
}
@media (max-width: 1120px) {
  #wordquiz-page .wordquiz-quote .wq-quote-en {
    white-space: normal;
    font-size: 10px;
  }
}

/* ===== 单词学习页 EN：右组（复盘/得分/设置/分享）紧凑化（2026-09-15 需求） =====
   EN 下右组文字更长（Review N / 得分串），挤压居中名言导致英文行溢出压字；
   收紧间距与字号给名言让位，配合 1120px 折行兜底确保任何宽度不遮挡 */
html[lang="en"] #wordquiz-page .header-right {
  gap: 4px;
}
html[lang="en"] #wordquiz-page .header-right .btn-icon {
  padding: 6px 8px;
  font-size: 17px;
}
html[lang="en"] #wordquiz-page .header-right .btn-sm {
  padding: 4px 8px;
  font-size: 12px;
}
html[lang="en"] #wordquiz-page .wordquiz-score {
  font-size: 11px;
}

/* ===== EN/JA 内容页标题字号对齐场景对话（2026-09-15 需求） =====
   场景对话页标题 18px（#scene-page .page-title）观感最佳；虚拟互动/
   创意工坊/经典会话的外语标题（Interactive Modules / Creative Workshop /
   Classic Dialogues、バーチャル交流 / クリエイティブ工房 / クラシック会話）
   较长，从基础 22px 收敛到同款 18px。中文标题维持 22px */
html[lang="en"] #module-viewer-page .page-title,
html[lang="en"] #classic-conv-page .page-title,
html[lang="ja"] #module-viewer-page .page-title,
html[lang="ja"] #classic-conv-page .page-title {
  font-size: 18px;
}

/* ===== 我的专属服务页 + 管理端用户档案（2026-10-02）===== */
.account-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px 40px;
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.acct-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
}
.acct-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--tsinghua-purple);
  margin-bottom: 10px;
}
.acct-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 0;
  font-size: 14px;
  border-bottom: 1px dashed var(--border-color);
  gap: 12px;
}
.acct-row:last-child { border-bottom: none; }
.acct-k { color: var(--text-secondary); flex-shrink: 0; }
.acct-v { color: var(--text-primary); font-weight: 600; text-align: right; word-break: break-all; }
.acct-scene-detail { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.acct-scene-item { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-secondary); padding: 3px 0; }
.acct-scene-item b { color: var(--text-primary); font-weight: 600; }
.acct-orders { display: flex; flex-direction: column; gap: 8px; }
.acct-order {
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: center;
}
.acct-order .o-product { font-weight: 700; color: var(--text-primary); }
.acct-order .o-amount { color: var(--tsinghua-purple); font-weight: 700; }
.acct-order .o-time { color: var(--text-secondary); }
.acct-order .o-status { margin-left: auto; font-weight: 600; padding: 2px 10px; border-radius: 999px; font-size: 12px; }
.o-status.st-pending { background: #FFF3E0; color: #E65100; }
.o-status.st-paid { background: #E3F2FD; color: #1565C0; }
.o-status.st-approved { background: #E8F5E9; color: #2E7D32; }
.o-status.st-rejected { background: #FBE9E7; color: #C62828; }
.acct-empty { color: var(--text-secondary); font-size: 13px; text-align: center; padding: 12px 0; }
@media (max-width: 720px) {
  .account-body { padding: 14px 14px 32px; gap: 12px; }
  .acct-card { padding: 14px 14px; }
}

/* ===== LingooAI语宝三角地·新闻栏目（2026-10-03，双端） ===== */
/* 阅读页卡片区下方的新闻列表：与 acct-card 同族卡片语言 */
.news-section {
  max-width: 720px;
  margin: 14px auto 0;
  padding: 0 4px;
}
.news-section-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--tsinghua-purple);
  margin: 4px 2px 10px;
  letter-spacing: 0.5px;
}
.news-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.news-item {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 13px 16px;
  cursor: pointer;
  transition: var(--transition);
}
.news-item:hover {
  border-color: var(--tsinghua-purple-lighter);
  box-shadow: 0 4px 14px rgba(102, 8, 116, 0.10);
  transform: translateY(-1px);
}
.news-item-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.5;
}
.news-item-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.news-item-date {
  font-size: 12px;
  color: var(--text-tertiary);
  flex-shrink: 0;
}
.news-item-summary {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.news-empty { color: var(--text-secondary); font-size: 13px; text-align: center; padding: 12px 0; }

/* 置顶徽标（用户端列表 + 后台列表同源）：金色小胶囊 */
.anews-pin-badge {
  display: inline-block;
  background: var(--tsinghua-gold);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  border-radius: 999px;
  padding: 1px 7px;
  margin-right: 6px;
  vertical-align: 2px;
  letter-spacing: 1px;
}
/* 后台稿件行：标题行内的置顶徽标对齐 */
.anews-row .admin-user-name { line-height: 1.5; }
/* 新闻弹窗头三元素（space-between 布局）：转发钮贴关闭钮，标题占左侧 */
#news-modal .modal-header h3 { margin-right: auto; }
#news-modal-share { color: var(--tsinghua-purple); font-weight: 700; }

/* 新闻阅读弹窗：正文排版 */
.news-modal { width: min(760px, 94vw); }
.news-modal-body {
  max-height: 72vh;
  overflow-y: auto;
  padding: 18px 22px 26px;
}
.news-modal-body h1 {
  font-size: 20px;
  line-height: 1.5;
  color: var(--text-primary);
  margin: 0 0 6px;
}
.news-modal-body .news-subtitle {
  font-size: 14px;
  color: var(--tsinghua-purple);
  font-weight: 600;
  margin: 0 0 4px;
}
.news-modal-body .news-dateline {
  font-size: 13px;
  color: var(--text-tertiary);
  margin: 0 0 14px;
}
.news-modal-body h2 {
  font-size: 16px;
  color: var(--tsinghua-purple);
  margin: 18px 0 8px;
}
.news-modal-body p {
  font-size: 14px;
  line-height: 1.9;
  color: var(--text-primary);
  margin: 0 0 10px;
  text-align: justify;
}
.news-modal-body hr {
  border: none;
  border-top: 1px solid var(--border-color);
  margin: 18px 0 12px;
}
.news-modal-body .news-about {
  font-size: 13px;
  color: var(--text-secondary);
}
@media (max-width: 720px) {
  .news-section { padding: 0 2px; margin-top: 12px; }
  .news-modal-body { padding: 14px 16px 22px; }
  .news-modal-body h1 { font-size: 18px; }
}

/* ===== 吉祥物视频播放 Modal ===== */
.mascot-video-modal {
  width: min(760px, 92vw);
  position: relative;
}
/* ✕ 关闭按钮悬浮于右上角，不占用文字上方空间 */
.mv-modal-header {
  position: absolute;
  top: 10px;
  right: 12px;
  justify-content: flex-end;
  padding: 0;
  border-bottom: none;
  z-index: 6;
}
.mascot-video-modal .modal-body {
  padding-top: 12px;
}
.mv-modal-stage {
  display: flex;
  align-items: stretch;
  gap: 10px;
}
.mv-modal-player {
  flex: 1;
  min-width: 0;
  width: 100%;
  max-height: 60vh;
  border-radius: 12px;
  background: #000;
  display: block;
}
/* 左右吉祥物动图：黑色边框容器（与视频黑底一致），GIF 裸露居中 */
.mv-side-mascot {
  width: 96px;
  flex-shrink: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #000;
  border-radius: 12px;
  padding: 10px 6px;
  cursor: pointer;
  transition: opacity .2s ease, transform .2s ease;
}
.mv-side-mascot:hover {
  transform: translateY(-3px);
}
.mv-side-mascot .mv-side-img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  display: block;
}
.mv-side-mascot figcaption {
  font-size: 12px;
  color: #D8D4E0;
  letter-spacing: 0.02em;
  text-align: center;
}
/* 侧栏黑区名言：宋体竖排风格小字，适配窄栏 */
.mv-side-mascot .mv-side-quote {
  margin: 4px 0 0;
  font-family: "Songti SC", "STSong", "SimSun", serif;
  font-size: 11px;
  line-height: 1.75;
  color: #CFC8DC;
  letter-spacing: 0.04em;
  text-align: justify;
}
.mv-side-mascot.current {
  opacity: 0.55;
  cursor: default;
}
.mv-side-mascot.hidden {
  display: none;
}
@media (max-width: 720px) {
  .mv-side-mascot {
    width: 64px;
    padding: 8px 4px;
    gap: 4px;
  }
  .mv-side-mascot .mv-side-img {
    width: 48px;
    height: 48px;
  }
  .mv-side-mascot figcaption {
    font-size: 10px;
  }
  .mv-side-mascot .mv-side-quote {
    font-size: 9.5px;
    line-height: 1.6;
  }
}
/* 弹窗视频上方介绍：朵朵生花，步步登高（清华紫主题深度设计） */
.mv-modal-intro {
  margin-top: 0;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
/* 品牌图标：主标语上方居中（2026-09-14 需求） */
.brand-app-icon-mv {
  width: 44px;
  height: 44px;
  margin: 0 auto 4px;
  display: block;
}
/* 品牌区：图标 + LingooAI™ / 语宝® 双行（2026-09-28 需求）——渲染与欢迎页同源同步
   （renderBrandName / setBrandMark / renderBrandSub / renderBrandSubMark 四链挂 modal 副本 id）；
   商标标注复用 .welcome-brand-r / .logo-sub-mark 同款绝对定位，行容器相对定位+右侧留位 */
.mv-brand-row {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 8px;
}
.mv-brand-row .brand-app-icon-mv {
  position: absolute;
  right: 100%;       /* 图标右缘贴文本列左缘 */
  margin: 0 12px 0 0;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
}
.mv-brand-col {
  display: flex;
  flex-direction: column;
  align-items: center; /* 语宝行相对 LingooAI 行（含标注）左右居中（2026-09-28 需求） */
  gap: 1px;
  position: relative; /* 图标绝对定位锚点：双行文本列整体在弹窗中线居中（2026-09-28 需求） */
}
.mv-brand-main-row {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.1;
}
.mv-brand-logo {
  font-size: 25px;
  font-weight: 800;
  color: var(--tsinghua-purple);
  letter-spacing: -0.5px;
}
.mv-brand-sub-row {
  margin-top: 1px;
  display: inline-flex;
  align-items: flex-start;
  gap: 3px;
}
.mv-brand-sub-row .logo-sub-text {
  font-size: 16px;
}
/* 弹窗内商标标注改随行内联（欢迎页为绝对定位挂行右缘）：行宽=文字+标注，
   语宝行才能相对 LingooAI 行整体精确居中；视觉参数（圆环/字号/字色）原样继承 */
.mv-brand-main-row .welcome-brand-r,
.mv-brand-sub-row .logo-sub-mark {
  position: static;
  left: auto;
  top: auto;
  transform: none;
  margin-left: 0;
  flex: none;
}
.mv-brand-main-row .welcome-brand-r {
  margin-top: 1px;
}
.mv-brand-main-row .welcome-brand-r.brand-mark-tm {
  align-self: flex-start;
  transform: none;
  margin-top: 3px;
}
.mv-brand-sub-row .logo-sub-mark {
  margin-top: 2px;
}
.mv-brand-sub-row .logo-sub-mark.brand-mark-tm {
  margin-top: 1px;
}
/* 主标语：仿欢迎页 Start Practicing 按钮样式——白字 + 清华紫底色圆角条（2026-09-03 需求） */
.mv-modal-intro .mv-intro-motto {
  margin: 0 auto; /* 居中；auto margin 抵消父级 flex column 的 stretch */
  font-family: inherit; /* 与「虚拟助教」同字体（中文微软雅黑） */
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
  color: var(--text-white); /* 白字 */
  background: var(--tsinghua-purple); /* 清华紫底 */
  border-radius: 999px;
  padding: 9px 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  box-shadow: 0 3px 12px rgba(102, 8, 116, 0.18);
}
.mv-modal-intro .mv-intro-line {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.7;
  font-weight: 600; /* 与「虚拟助教」同字重 */
  color: var(--tsinghua-purple); /* 与「虚拟助教」同色：紫灰 #6F5F7B → 清华紫（2026-09-02 需求） */
}
/* 悬挂排版：名字前缀加粗醒目，空两格后正文同行接排，「负责…」回撤到下一行缩进对齐 */
.mv-modal-intro .mv-intro-head {
  font-size: 14px;
  font-weight: 600; /* 与「虚拟助教」同字重（原 700） */
  letter-spacing: 0.02em;
  color: var(--tsinghua-purple); /* 汉字与「虚拟助教」同色清华紫 */
}
/* 性格名前缀英文 Wave/Daily：与答题页题干 wordquiz-word 同字体族（继承默认 Segoe UI）+ 同字重 700 */
.mv-modal-intro .mv-intro-head .mv-intro-en {
  font-weight: 700;
}
/* 「负责…」落点行：与「虚拟助教」同色清华紫（原浅紫，2026-09-02 需求），前缀金✦小符号保留 */
.mv-modal-intro .mv-intro-tail {
  display: block;
  margin-top: 3px;
  text-align: center;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--tsinghua-purple);
}
.mv-modal-intro .mv-intro-tail::before {
  content: "✦ ";
  color: var(--tsinghua-gold);
  font-size: 9px;
  vertical-align: 1.5px;
}
/* Wave / Daily 前缀颜色统一清华紫（原 Daily 为金色区分，2026-09-02 需求改与「虚拟助教」同色）——
   颜色由上方 .mv-intro-head 基础规则统一控制，此处覆盖已移除 */
@media (max-width: 720px) {
  .mv-modal-intro .mv-intro-motto {
    font-size: 14px;
    letter-spacing: 0.08em;
    text-indent: 0.08em;
    padding: 7px 18px;
  }
  .mv-modal-intro .mv-intro-line {
    font-size: 11px;
  }
  .mv-modal-intro .mv-intro-tail {
    font-size: 10.5px;
  }
}

/* ===== 管理端：吉祥物视频切换与操作 ===== */
.mv-mascot-toggle {
  display: flex;
  gap: 8px;
  margin: 10px 0 14px;
}
.mv-mascot-btn {
  border: 1px solid var(--border-color, #E8E4EC);
  background: var(--bg-surface);
  color: var(--text-secondary);
  border-radius: 10px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s ease;
}
.mv-mascot-btn.active {
  border-color: var(--tsinghua-purple);
  background: var(--tsinghua-purple-pale);
  color: var(--tsinghua-purple);
}

/* ===== 防复制 / 防盗用 (anti-copy hardening) ===== */
body {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
input,
textarea,
[contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
}
/* 监督管理服务后台内放开文本选择（配合 guard.js 的 #admin-modal 复制豁免；
   覆盖全局 body 与 button 的 user-select:none，管理员可复制格式规范等数据） */
#admin-modal,
#admin-modal button {
  -webkit-user-select: text;
  user-select: text;
}
img,
video,
audio {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
}

/* ===== 全站版本号标识 (footer version badge) ===== */
.page-version {
  text-align: center;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.5px;
  color: rgba(102, 8, 116, 0.38);
  padding: 14px 0 12px;
  line-height: 1;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}
/* 欢迎页：版本号绝对定位贴 LOGO 右侧、与 LOGO 行底缘对齐（2026-09-03 需求：原垂直居中改为下移到底对齐，
   腾出的右侧中部位置留给商标 R 占位 .welcome-brand-r） */
.logo-row {
  display: inline-flex;
  align-items: center;
  position: relative;
}
/* 欢迎页：LOGO 居中——R/版本号/语言选择器绝对定位浮在右侧，不参与 flex 流，
   确保 LOGO 文字本身在页面水平居中（2026-09-11 用户要求） */
.page-version-logo {
  position: absolute;
  left: 100%;
  bottom: 0;
  margin-left: 10px;
  display: block;
  padding: 0;
  font-size: 11px;
  letter-spacing: 0.5px;
  color: rgba(102, 8, 116, 0.4);
  line-height: 1;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}
/* 欢迎页商标占位：圆圈 R（灰）——绝对定位，LOGO 右侧垂直居中 */
.welcome-brand-r {
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 10px;
  width: 20px;
  height: 20px;
  border: 1.5px solid #A9A2B2;
  border-radius: 50%;
  color: #A9A2B2;
  font-size: 12.5px;
  font-weight: 600;
  font-family: Georgia, 'Times New Roman', serif;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 1px;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}
/* TM 标注：不带圆圈，纯文本 ™ 上标样式（R 保留圆圈 ®，TM 脱离圆圈） */
.welcome-brand-r.brand-mark-tm {
  width: auto;
  height: auto;
  border: none;
  border-radius: 0;
  padding: 0;
  font-size: 14px;
  font-weight: 700;
  font-family: Georgia, 'Times New Roman', serif;
  letter-spacing: 0.5px;
  align-self: flex-start;
  transform: translateY(-60%);
}
/* 副标题 LOGO 商标标注（右上角小圆圈 R / TM 上标）：绝对定位挂副标题行右端顶部，
   与右下角金色注释语垂直错开互不遮挡；副标题行为空整行隐藏时随行隐藏 */
.logo-sub-mark {
  position: absolute;
  left: 100%;
  top: -3px;
  margin-left: 3px;
  width: 13px;
  height: 13px;
  border: 1.2px solid #A9A2B2;
  border-radius: 50%;
  color: #A9A2B2;
  font-size: 8.5px;
  font-weight: 600;
  font-family: Georgia, 'Times New Roman', serif;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}
.logo-sub-mark.brand-mark-tm {
  width: auto;
  height: auto;
  border: none;
  border-radius: 0;
  padding: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  top: -1px;
}
/* admin 副标题预览标注定位上下文（预览 span 本身非定位，外包一层） */
.admin-brand-sub-preview-wrap {
  position: relative;
  display: inline-block;
}
/* 场景列表/单词学习/沉浸会话等页：版本号位于首栏（page-header/topbar）最左侧，与返回按钮同行 */
.page-version-topbar {
  display: inline-block;
  padding: 0;
  margin-right: 10px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: rgba(102, 8, 116, 0.42);
  line-height: 1;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ===== 单词学习页 WaveDaily 打卡入口 =====
   与对话页 WaveDaily刷一啵 按钮共用同一打卡/连签状态与彩蛋（铃声+彩带烟花）。
   视觉沿用 wordquiz-card 左上角提示语位置：无按钮底色、保持原提示语观感，
   hover 变清华紫、打卡完成(done)变绿色。 */
.wq-wavedaily-cta {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-family: inherit;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s ease;
}
.wq-wavedaily-cta:hover {
  color: var(--tsinghua-purple);
}
.wq-wavedaily-cta.done {
  color: var(--success);
}

/* ===== ICP 备案号页脚（欢迎页 + 设置弹窗「关于」） =====
   未填备案号时元素 hidden 隐藏；展示时为极简小字、链接可跳工信部备案查询。 */
.site-icp {
  margin-top: 10px;
  text-align: center;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.3px;
  color: rgba(102, 8, 116, 0.34);
  line-height: 1;
  user-select: none;
  -webkit-user-select: none;
}
.site-icp a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;}
.site-icp a:hover {
  color: var(--tsinghua-purple);
  text-decoration: underline;
}
.site-icp .site-icp-shield {
  font-size: 11px;
  margin-right: 3px;
  vertical-align: -1px;
}
/* 合规文档页脚链接（2026-09-22）：用户协议/隐私政策，与 ICP 同区同风格，
   可点击（site-icp 是纯展示，本站链接需可点） */
.site-legal {
  margin-top: 8px;
  text-align: center;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.3px;
  color: rgba(102, 8, 116, 0.34);
  line-height: 1;
}
.site-legal a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}
.site-legal a:hover {
  color: var(--tsinghua-purple);
  text-decoration: underline;
}
.site-legal .site-legal-sep {
  margin: 0 6px;
  opacity: 0.6;
}
.setting-icp-line {
  margin-top: 2px;
  font-size: 12px;
  color: rgba(102, 8, 116, 0.34);
}

/* ===== 用户须知（2026-09-07）：欢迎页页脚入口 + 注册页同意行 + 须知弹窗 =====
   页脚入口与 ICP 备案号同区同风格：极简浅紫小字，可点击弹出须知全文。 */
.site-notice {
  margin-top: 14px;
  text-align: center;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.3px;
  color: rgba(102, 8, 116, 0.34);
  line-height: 1;
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
  transition: color 0.15s ease;
}
.site-notice:hover {
  color: var(--tsinghua-purple);
  text-decoration: underline;
}
.auth-bonus {
  display: block;
  margin: -10px 0 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--tsinghua-purple);
  background: rgba(102, 8, 116, 0.06);
  border-radius: 999px;
  padding: 6px 14px;
  text-align: center;
}
.auth-agree {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-tertiary);
  line-height: 1.6;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.auth-agree a {
  color: var(--tsinghua-purple);
  cursor: pointer;
  text-decoration: none;
}
.auth-agree a:hover {
  text-decoration: underline;
}
/* 协议勾选框（登录/注册页）：圆形自定义勾选 + 未勾选拦截高亮 */
.auth-agree-check {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-right: 2px;
  padding: 2px 5px 2px 2px;
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
  transition: background .15s;
}
.auth-agree-check:hover {
  background: var(--tsinghua-purple-pale, #F2EDFA);
}
.auth-agree-check input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.auth-agree-box {
  width: 16px;
  height: 16px;
  flex: none;
  border: 1.6px solid var(--tsinghua-purple-lighter, #B7A8D8);
  border-radius: 50%;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(102, 60, 180, .18);
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.auth-agree-check:hover .auth-agree-box {
  border-color: var(--tsinghua-purple);
  box-shadow: 0 0 0 3px var(--tsinghua-purple-pale, #F2EDFA);
}
.auth-agree-box::after {
  content: '';
  width: 7px;
  height: 4px;
  border-left: 1.8px solid #fff;
  border-bottom: 1.8px solid #fff;
  transform: rotate(-45deg) translateY(-1px);
  opacity: 0;
}
.auth-agree-check input:checked + .auth-agree-box {
  background: var(--tsinghua-purple);
  border-color: var(--tsinghua-purple);
}
.auth-agree-check input:checked + .auth-agree-box::after {
  opacity: 1;
}
.auth-agree-text {
  color: var(--text-secondary);
}
.auth-agree-check:hover .auth-agree-text {
  color: var(--tsinghua-purple);
}
.auth-agree.attention {
  animation: authAgreeShake .4s ease;
  color: #D4584E;
}
.auth-agree.attention .auth-agree-box {
  border-color: #D4584E;
}
@keyframes authAgreeShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
.notice-modal-wrap {
  width: min(640px, 92vw);
}
/* 用户须知弹窗需盖过登录注册遮罩（auth-overlay z-index:9999），
   否则在登录页点击《用户须知》被压在底层看不见 */
#notice-modal {
  z-index: 10002;
}

/* ===== 证书未生成引导视图（访客未测评 / 注册用户零练习）===== */
.cert-locked {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 44px 28px 40px;
  text-align: center;
}
.cert-locked-icon {
  font-size: 44px;
  line-height: 1;
  filter: grayscale(0.2);
}
.cert-locked-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}
.cert-locked-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.8;
  max-width: 360px;
  margin: 0;
}
.cert-locked .btn-primary {
  margin-top: 8px;
  padding: 10px 34px;
}

/* ===== 访客体验证书角标（cert-card 右上角）===== */
.cert-trial-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #fff;
  background: linear-gradient(120deg, var(--tsinghua-purple), #8A1B9B);
  border-radius: 999px;
  box-shadow: 0 3px 10px rgba(102, 8, 116, 0.28);
}

/* ===== 登录注册弹窗返回按钮 ===== */
.auth-card {
  position: relative;
}
.auth-back-btn {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 16px;
  font-weight: 600;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: var(--transition);
}
.auth-back-btn:hover {
  color: var(--tsinghua-purple);
  background: var(--tsinghua-purple-pale);
}
.notice-body {
  max-height: 62vh;
  overflow-y: auto;
  padding: 18px 22px;
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.75;
}
.notice-body p {
  margin: 0 0 6px;
  text-align: justify;
}
.setting-textarea {
  width: 100%;
  min-height: 140px;
  padding: 8px 10px;
  border: 1px solid var(--border-color, #e5e0ea);
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  line-height: 1.6;
  color: var(--text-primary);
  background: #fff;
  box-sizing: border-box;
  resize: vertical;
  outline: none;
  transition: border-color 0.15s ease;
}
.setting-textarea:focus {
  border-color: var(--tsinghua-purple);
}
.setting-icp-line a {
  color: inherit;
  text-decoration: none;
}
.setting-icp-line a:hover {
  color: var(--tsinghua-purple);
  text-decoration: underline;
}



/* ===== 访客留存（2026-09-07）===== */
.welcome-guest-hint {
  display: inline-block;
  margin: -12px 0 18px;
  font-size: 12px;
  font-weight: 600;
  color: var(--tsinghua-purple);
  background: rgba(102, 8, 116, 0.06);
  border-radius: 999px;
  padding: 5px 16px;
}

.guest-turn-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  padding: 7px 14px;
  background: rgba(102, 8, 116, 0.07);
  border-bottom: 1px solid var(--border-color);
  font-size: 13px;
  color: var(--text-primary);
}

.guest-turn-banner-text b {
  color: var(--tsinghua-purple);
  font-weight: 600;
}

.guest-banner-x {
  border: none;
  background: none;
  color: var(--text-tertiary);
  font-size: 14px;
  cursor: pointer;
  padding: 2px 4px;
  line-height: 1;
}

.guest-banner-x:hover {
  color: var(--text-primary);
}

/* ===== 访客进度行（欢迎页，2026-09-07 P2a）===== */
.welcome-guest-progress {
  display: inline-block;
  margin: -6px 0 16px;
  font-size: 12px;
  color: var(--text-secondary);
  background: rgba(102, 8, 116, 0.04);
  border: 1px dashed rgba(102, 8, 116, 0.18);
  border-radius: 999px;
  padding: 3px 14px;
}
.welcome-guest-progress b {
  color: var(--tsinghua-purple);
  font-weight: 700;
}

/* ===== 注册赠送常驻横幅（欢迎页，2026-09-07）===== */
.welcome-fresh-bonus {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  max-width: 640px;
  margin: 0 0 18px;   /* 注册赠送横幅：不再负 margin 上提，避免与上方行挤压 */
  padding: 9px 20px;
  background: linear-gradient(120deg, rgba(102, 8, 116, 0.92), rgba(122, 18, 138, 0.92));
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  border-radius: 999px;
  box-shadow: 0 4px 18px rgba(102, 8, 116, 0.22);
  line-height: 1.5;
  white-space: nowrap; /* 整条横幅不换行 */
}
.wfb-text {
  white-space: nowrap;
  flex-shrink: 0; /* 文字不参与压缩，恒保持一行 */
}
.welcome-fresh-bonus b {
  font-weight: 700;
  color: #FFD98A;
}
.wfb-x {
  border: none;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  width: 20px;
  height: 20px;
  line-height: 1;
  border-radius: 50%;
  font-size: 12px;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wfb-x:hover {
  background: rgba(255, 255, 255, 0.32);
}
[data-theme="dark"] .welcome-fresh-bonus {
  background: linear-gradient(120deg, rgba(196, 154, 44, 0.9), rgba(226, 177, 87, 0.9));
  color: #2A1E05;
}
[data-theme="dark"] .welcome-fresh-bonus b { color: #660874; }
[data-theme="dark"] .wfb-x { background: rgba(42, 30, 5, 0.25); color: #fff; }

/* ===== 体验证书角标 / 锁定视图 / 解锁条（2026-09-07 P2b）===== */
.cert-trial-badge {
  position: absolute;
  top: 44px;
  right: 22px;
  z-index: 3;
  transform: rotate(5deg);
  border: 1.5px solid rgba(102, 8, 116, 0.55);
  background: rgba(102, 8, 116, 0.05);
  color: #660874;
  border-radius: 10px;
  padding: 6px 12px 7px;
  line-height: 1.3;
  text-align: center;
  font-family: "STZhongsong", "SimSun", serif;
  pointer-events: none;
}
.cert-trial-badge span {
  display: block;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 5px;
}
.cert-trial-badge em {
  display: block;
  font-style: normal;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 9px;
  letter-spacing: 2.5px;
  opacity: 0.72;
}

.cert-locked {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 64px 30px 70px;
  text-align: center;
}
.cert-locked-icon { font-size: 54px; line-height: 1; }
.cert-locked-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--tsinghua-purple);
}
.cert-locked-sub { font-size: 13px; color: var(--text-secondary); }
.cert-locked-en {
  font-size: 12px;
  font-style: italic;
  color: var(--text-tertiary);
  font-family: Georgia, "Times New Roman", serif;
  margin-bottom: 6px;
}

.cert-guest-unlock {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: rgba(102, 8, 116, 0.06);
  border: 1px solid rgba(102, 8, 116, 0.2);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  color: var(--text-primary);
  margin-right: 14px;
}
.cert-guest-unlock-txt b { color: #E65100; font-weight: 700; }
.cert-guest-unlock-txt strong { color: var(--tsinghua-purple); font-weight: 700; }

[data-theme="dark"] .cert-trial-badge {
  border-color: rgba(226, 177, 87, 0.6);
  background: rgba(226, 177, 87, 0.08);
  color: #E2B157;
}
[data-theme="dark"] .cert-guest-unlock {
  background: rgba(226, 177, 87, 0.08);
  border-color: rgba(226, 177, 87, 0.25);
}
[data-theme="dark"] .cert-locked-title { color: #E2B157; }

/* ===== 欢迎页节日氛围背景（后台管理，衬于头像/LOGO 底层，透明边框裁剪）===== */
.welcome-deco {
  position: absolute;
  top: -1px;               /* 顶满卡片最外缘（覆盖 1px 边框线） */
  left: -1px;              /* 左右边框同样完全覆盖 */
  right: -1px;
  height: 300px;          /* 兜底高度；运行时 JS 会精确改为英文/中文标语两行中间 */
  overflow: hidden;
  border-radius: 24px 24px 0 0; /* 覆盖卡片完整圆角（含边框） */
  z-index: 0;
  pointer-events: none;   /* 纯装饰，不响应鼠标 */
}
.welcome-deco img {
  position: absolute;
  left: 50%;
  top: 50%;
  max-width: none;
  max-height: none;
  transform-origin: center center;
  user-select: none;
  -webkit-user-drag: none;
}
@media (max-width: 480px) {
  .welcome-deco { height: 250px; }
}

/* ===== admin 节日氛围背景卡片 ===== */
.admin-deco-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
}
.admin-deco-switch input {
  accent-color: var(--tsinghua-purple);
}
.admin-deco-stage {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 560 / 255; /* 与欢迎页实际展示区域（卡片宽 560，下边框在英文/中文标语中间约 255px）近似同比例 */
  max-height: 300px;
  overflow: hidden;
  border: 2px dashed rgba(102, 8, 116, 0.35); /* 「透明边框」裁剪指示 */
  border-radius: 14px;
  background:
    repeating-conic-gradient(rgba(102, 8, 116, 0.04) 0% 25%, transparent 0% 50%) 0 0 / 22px 22px,
    #FAF8FC;
  cursor: grab;
  touch-action: none;
}
.admin-deco-stage:active { cursor: grabbing; }
.admin-deco-stage img {
  position: absolute;
  left: 50%;
  top: 50%;
  max-width: none;
  max-height: none;
  transform-origin: center center;
  user-select: none;
  cursor: move;
}
.admin-deco-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--text-tertiary);
  pointer-events: none;
}
#admin-deco-scale {
  flex: 1;
  min-width: 120px;
  accent-color: var(--tsinghua-purple);
}

/* ===== 管理员登录日志（二步验证配套）===== */
.admin-loginlog {
  max-height: 320px;
  overflow-y: auto;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
/* 默认折叠：仅显示最新 3 条（每条 ~24px 高），点击「展开」查看全部 30 条 */
.admin-loginlog.collapsed {
  max-height: 78px;
  overflow: hidden;
}
/* 学习提醒短信卡片：文案预览（灰底圆角，区别于普通提示文字） */
.admin-reminder-text {
  display: inline-block;
  background: #F4F2F8;
  border-radius: 6px;
  padding: 2px 8px;
  color: #6B6475;
  line-height: 1.5;
}
.admin-log-row {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--bg-subtle, #FAFAFA);
}
.admin-log-row.ok .admin-log-res { color: #2E7D32; font-weight: 600; }
.admin-log-row.fail .admin-log-res { color: #E53935; font-weight: 600; }
.admin-log-time { color: var(--text-secondary); white-space: nowrap; }
.admin-log-ip { color: var(--text-primary); white-space: nowrap; }
.admin-log-res { margin-left: auto; }

/* ===== 移动端适配（2026-09-09 一步到位）=====
   手机视口（≤720px）三个真实问题的修复：
   ① 场景页 page-header 的 header-right（难度四级+单词学习+设置+分享等）
      总宽远超视口 → 改为可换行双行布局，控件紧凑化
   ② 单词学习页 header-right 同理换行；名言条在窄屏隐藏避免重叠
   ③ 对话页 conv-infobar 轮次角标溢出 → 换行 + 收窄间距 + 隐藏分隔线 */
@media (max-width: 720px) {
  .page-header {
    flex-wrap: wrap;
    padding: 10px 12px;
    row-gap: 8px;
  }
  .header-left {
    gap: 8px;
  }
  .header-right {
    flex-wrap: wrap;
    gap: 6px;
    row-gap: 6px;
  }
  .page-title {
    font-size: 17px;
  }
  .user-chip {
    padding: 4px 10px;
    gap: 6px;
  }
  .wordquiz-quote {
    display: none; /* 窄屏页头拥挤：名言条隐藏（点击看吉祥物视频入口在单词卡区仍可用），桌面不受影响 */
  }
  /* 阅读页底部名言不受窄屏隐藏影响（2026-10-01 用户裁决：阅读页窗口下部保留名言入口）；
     宽度定 320px——中文一行（11px×21 字≈231px）、英文 10px 长句恰排两行（2026-10-01 需求） */
  #reading-page .reading-quote {
    display: flex;
    max-width: min(320px, 88vw);
  }
  .conv-infobar {
    flex-wrap: wrap;
    row-gap: 6px;
    padding: 8px 12px;
  }
  .info-item {
    padding: 0 8px;
  }
  .info-divider {
    display: none;
  }
  .wavedaily-item {
    margin-left: -12px; /* 对齐收窄后的 infobar padding（原 -20px 会溢出左缘 8px） */
  }
  /* ===== 手机端对话页空间收敛（2026-10-01 微信端裁决，桌面全不变） =====
     ① 音色下拉隐藏（Female/Male/Boy/Girl 占位大）
     ② infobar「单词学习」整项隐藏（场景页首栏已有入口）
     ③ infobar 改两列网格：左列上中下三行=WaveDaily按钮/场景词汇标/对话轮次
        （轮次与数值同一水平线、行内排列），右列整列留给词汇单词
     ④ 「帮助与反馈」并入 mic 行左对齐，原独立行隐藏；Listening 提示
        本就 margin-left:auto 右对齐；输入区整体压缩下移，空间让给对话文字 */
  .voice-gender-select {
    display: none;
  }
  .conv-infobar {
    display: grid;
    grid-template-columns: auto 1fr; /* 左列贴内容宽，右列剩余全给单词 */
    column-gap: 12px;
    row-gap: 4px;
    align-items: center;
    padding: 6px 12px;
  }
  .conv-infobar .info-item {
    padding: 0;
  }
  .conv-infobar .wavedaily-item {
    grid-column: 1;
    grid-row: 1;
    margin-left: 0;
  }
  .conv-infobar .info-wordquiz {
    display: none;
  }
  /* ⑤ WaveDaily 按钮去图标留文字（2026-10-01 三期裁决） */
  #wavedaily-btn span[aria-hidden="true"] {
    display: none;
  }
  /* ⑥ 聊天头（头像+姓名）压缩上移：padding 14x20→6x12、头像 42→32px，
     省出的垂直空间全部让给对话文字区 */
  .chat-header {
    padding: 6px 12px;
  }
  .chat-header .chat-avatar {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }
  /* ⑦ 首栏安全提示改独立弹窗（#conv-notice-modal）：顶栏提示整体隐藏
     ——375px 实测被挤压到近零宽完全不可见；桌面 >720px 首栏三行原样显示 */
  .conv-topbar .conv-notice {
    display: none;
  }
  /* 词汇项拆格：标签落左列第二行，单词落右列跨三行 */
  .conv-infobar .info-vocab {
    display: contents;
  }
  .conv-infobar .info-vocab > .info-label {
    grid-column: 1;
    grid-row: 2;
  }
  .conv-infobar .info-vocab > .vocab-text {
    grid-column: 2;
    grid-row: 1 / 4;
    align-self: center;
  }
  /* 对话轮次：左列第三行，标签与数值同一水平线 */
  .conv-infobar .info-turns {
    grid-column: 1;
    grid-row: 3;
    flex-direction: row;
    align-items: baseline;
    gap: 6px;
    flex-basis: auto;
    margin-left: 0;
  }
  .chat-input-area {
    padding: 8px 12px; /* 原 14px 20px：压缩让 mic 行下移，空间让给对话文字 */
    gap: 4px;
  }
  .chat-input-area .chat-actions {
    display: none;
  }
  .feedback-btn-mobile {
    display: inline-block;
  }
  .mic-section .mic-status {
    text-align: right;
  }
  /* 对话页首栏提示演进：2026-09-30 曾藏第二条英文保两行 → 2026-10-01 用户
     实测 375px 提示整体被挤压不可见，改为独立弹窗（.conv-topbar .conv-notice
     整体 display:none，见上 ⑦），桌面 >720px 首栏三行原样不变 */
  .wq-module-desc {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ===== 微信内打开引导条：已于 2026-09-30 随双端定位决策移除（JS 侧同步删除） ===== */

/* 微信端隐藏「分享给好友」按钮（2026-09-30 双端定位二期）：
   微信内分享走原生「···」菜单（两步直达），网页按钮在微信内只能存图再发（次优）；
   按钮仅电脑浏览器保留——二维码弹窗是「电脑看到→手机扫码学习」唯一通道。
   html.in-wechat 由 app.js init 按 MicroMessenger UA 标记 */
.in-wechat #share-btn-welcome,
.in-wechat #share-btn-scene,
.in-wechat #share-btn-wordquiz,
.in-wechat #share-btn-module,
.in-wechat #share-btn-conv,
.in-wechat #share-btn-classic {
  display: none !important;
}

/* ===== 移动端一期适配（2026-09-22） =====
   ① 竖屏视频 cover 居中裁切（人物撑满屏宽，消灭上下大黑带）
   ② 触控优化（去点按高亮/双击缩放延迟/误选文字，mic 加大到 56px）
   ③ iPhone 刘海与底部 Home 条安全区
   ④ iOS 无语音识别常驻引导条 */
html {
  -webkit-tap-highlight-color: transparent;
}
body {
  touch-action: manipulation; /* 去 300ms 点按延迟与双击缩放 */
}
button {
  user-select: none;
  -webkit-user-select: none;
}

/* ① 竖屏小屏：cover 裁切两侧空气，人物满幅。JS positionReplayBtn
   读取 computed object-fit 同步换算（scale=max），无需重复媒体查询 */
@media (orientation: portrait) and (max-width: 900px) {
  .video-wrapper video {
    object-fit: cover;
  }
  /* 视频区分更多高度：横屏 1:1 均分在竖屏太局促，改为 3:2 偏视频 */
  .conv-main {
    grid-template-rows: 3fr 2fr;
  }
}

@media (max-width: 720px) {
  /* ② 触控目标 ≥48px（原 48px 偏小，拇指按压容错加大） */
  .mic-btn {
    width: 56px;
    height: 56px;
  }
  /* 黑色状态近乎透明（2026-10-01 用户反馈）：.ai-speaking（AI 讲话/非用户
     发言回合）黑圆钮遮挡视频画面，移动端压到 0.15 微可见保可点按（切换自动
     聆听）；红色聆听/默认态不动，桌面 >720px 不变 */
  .mic-btn.ai-speaking {
    opacity: 0.15;
    box-shadow: none;
  }
  /* 场景名称徽章分态（2026-10-01 用户反馈）：非全屏隐藏（首栏已有场景名，
     不重复占画面），视频最大化时照常保留；桌面 >720px 恒显不变。
     iPhone 微信不支持元素级全屏（enterFullscreen 静默失败），天然恒隐藏 */
  .video-overlay-info {
    display: none;
  }
  .video-wrapper:fullscreen .video-overlay-info,
  .video-wrapper:-webkit-full-screen .video-overlay-info {
    display: block;
  }
  /* 全屏态品牌角标左移（2026-10-02 用户反馈）：guard.js 注入的 .wm-badge
     钉 right:8px，手机全屏时右缘两个字母被机身边框遮挡——左移至 22px 与
     视频画面略靠近；仅微信端全屏，非全屏与桌面不变。
     优先级说明：.video-wrapper:fullscreen .wm-badge（0,3,0）> guard.js
     内联注入的 .wm-badge（0,1,0），注入时序在后也压不过 */
  .video-wrapper:fullscreen .wm-badge,
  .video-wrapper:-webkit-full-screen .wm-badge {
    right: 22px;
  }
  /* 首栏场景徽章撞色（2026-10-01 用户反馈）：底色浅紫→清华紫，
     场景名字体紫→白；中文副名同底不可读，一并提为 85% 白保层级。
     桌面 >720px 浅紫底+紫字原样不变 */
  .conv-topbar .scene-badge {
    background: var(--tsinghua-purple);
  }
  .conv-topbar .scene-badge-name {
    color: #fff;
  }
  .conv-topbar .scene-badge-sub {
    color: rgba(255, 255, 255, 0.85);
  }
  /* 首栏版本号隐藏（2026-10-01 用户裁决）：首栏空间让给场景徽章与品牌 */
  .conv-topbar .page-version-topbar {
    display: none;
  }
  /* 场景页首栏版本号隐藏（2026-10-01 用户裁决：欢迎页已有版本号此处
     不重复）；仅 #ver-scene，其他页顶栏版本号不动，桌面 >720px 不变 */
  #ver-scene {
    display: none;
  }
  /* 单词学习页首栏版本号隐藏（2026-10-02 用户裁决：欢迎页已有版本号此处
     不重复）；仅 #ver-wordquiz，其他页顶栏版本号不动，桌面 >720px 不变 */
  #ver-wordquiz {
    display: none;
  }
  /* 场景对话页首栏：一键清零移动端全态隐藏（2026-10-02 访客隐藏起；
     2026-10-03 用户裁决扩至登录/付费用户——第二行只留榜单/难度/单词
     学习三钮居中，清零属低频管理操作移动端不下放）。JS is-guest-hide
     机制保留无害；桌面 >720px 不变 */
  #reset-rounds-btn {
    display: none;
  }
  /* 场景对话页首栏重排（2026-10-02 用户裁决；2026-10-03 迭代）：设置按钮
     钉第一行最右，四语种下拉随行一并位于设置前，榜单/难度/单词学习归
     第二行且左右居中。做法沿用单词页模式——两组 display:contents 拆格，
     子元素直接成为 page-header 的 wrap 行成员：行一=返回/品牌/标题+语言
     （order:1 回填行一并 margin-left:auto 钉右缘）+设置（order:1 紧随
     语言钮后），其余控件（清零/榜单/chip/难度/单词学习）order:2 归第二
     行起。justify-content:center 对多行 flex 逐行生效：行一自由空间被
     auto 边距吸干不受影响，行二无 auto 边距天然居中。column-gap 补位
     （display:contents 拆格后原组内 gap 失效，与单词页同款处理）。
     桌面 >720px 原布局不变 */
  #scene-page .page-header {
    justify-content: center;
    column-gap: 6px;
  }
  #scene-page .header-left,
  #scene-page .header-right {
    display: contents;
  }
  #scene-page .header-left > * {
    order: 0;
  }
  #scene-page #lang-select-scene {
    order: 1;
    margin-left: auto;
  }
  #scene-page #settings-btn-scene {
    order: 1;
  }
  #scene-page .header-right > * {
    order: 2;
  }
  /* 首栏「试用」chip 隐藏（2026-10-01 用户裁决）：仅访客试用态
     （JS 打 is-guest-trial 类），欢迎页已有试用信息不重复；登录/付费
     倒计时 chip 保留，桌面 >720px 不变 */
  #user-chip-conv.is-guest-trial {
    display: none;
  }
  /* 场景页首栏「试用」chip 隐藏（2026-10-03 用户裁决）：与对话页 chip
     同机制（JS 打 is-guest-trial 类）；登录/付费倒计时 chip 保留，
     桌面 >720px 不变 */
  #user-chip.is-guest-trial {
    display: none;
  }
  /* 阅读天地（2026-10-01 用户裁决）：单词学习页四模块卡（左右两个
     side-col）迁至阅读页，单词页只留答题区；首栏显示「阅读天地」入口。
     桌面 >720px 四卡原位保留、入口按钮隐藏 */
  #wordquiz-page .wq-side-col {
    display: none;
  }
  .wq-reading-btn {
    display: inline-block;
  }
  /* 单词学习页首栏两行重排（2026-10-01 用户裁决）：
     第一行=返回/版本/品牌/标题/难度下拉/阅读天地/设置（阅读天地+设置从
     header-right 上提）；第二行=复盘+答对数值左右居中（分享钮钉右缘，
     微信端本已隐藏）。做法：两个 header 组 display:contents 拆格，子元素
     直接成为 page-header 的 wrap 行成员，order 分行、auto 边距居中；
     复盘初始 hidden 时数值靠 ~ 兄弟选择器双边 auto 单独居中。
     桌面 >720px 两组原样不变 */
  #wordquiz-page .page-header {
    justify-content: flex-start;
    column-gap: 4px;
    row-gap: 6px;
  }
  #wordquiz-page .header-left,
  #wordquiz-page .header-right {
    display: contents;
  }
  #wordquiz-page #wq-reading-btn {
    order: 0;
    padding: 4px 7px;
    font-size: 11px;
  }
  #wordquiz-page #settings-btn-wordquiz {
    order: 0;
    padding-left: 2px;
    padding-right: 2px;
  }
  #wordquiz-page #wordquiz-review-btn {
    order: 1;
    margin-left: auto;
  }
  #wordquiz-page #wordquiz-score {
    order: 1;
    margin-right: auto;
  }
  #wordquiz-page #wordquiz-review-btn.hidden ~ #wordquiz-score {
    margin-left: auto; /* 复盘未出现时，数值单独居中 */
  }
  #wordquiz-page #share-btn-wordquiz {
    order: 1;
  }
  /* EN/JA 首栏适配（2026-10-02 用户裁决）：标题/难度下拉/阅读天地译文更宽，
     第一行放不下全部——设置钉第一行右侧（与 LOGO 图标同行），阅读天地随第二行；
     卡片顶部「智能陪练」与 WaveDaily 按钮遮挡，索性隐藏（点音色按钮即可浮现
     吉祥物，不影响语义理解）。仅 EN/JA 微信端，中文与桌面 >720px 不变 */
  html[lang="en"] #wordquiz-page #settings-btn-wordquiz,
  html[lang="ja"] #wordquiz-page #settings-btn-wordquiz {
    order: 0;
    margin-left: auto;
  }
  /* 仅 EN 阅读天地随第二行（译文宽第一行放不下）；JA 第一行放得下保持原位，
     否则 order:1 的阅读天地会回填第一行反超设置位次（实测 JA settings 254<reading 279） */
  html[lang="en"] #wordquiz-page #wq-reading-btn {
    order: 1;
  }
  html[lang="en"] #wq-partner-btn,
  html[lang="ja"] #wq-partner-btn {
    display: none;
  }
  /* EN/JA 音色按钮收窄：仅靠隐藏智能陪练仍与 WaveDaily 叠 6~17px（朵朵/步步
     假名译文更宽），字号 12→11 + 内边距 10→7 + 组距 8→6 彻底让位 */
  html[lang="en"] #wordquiz-page .wq-pron-voice-btn,
  html[lang="ja"] #wordquiz-page .wq-pron-voice-btn {
    font-size: 11px;
    padding: 4px 7px;
  }
  html[lang="en"] #wordquiz-page .wq-partner-group,
  html[lang="ja"] #wordquiz-page .wq-partner-group {
    gap: 6px;
  }
  /* 消息头像左移对齐（2026-10-01 用户裁决）：AI 消息头像左缘与聊天头
     AI 头像（left 12px）垂直对齐——消息区内边距 20px，负边距左移 8px，
     气泡随之左移，右侧空间让给对话文字；桌面 >720px 不变 */
  .message.ai .message-avatar {
    margin-left: -8px;
  }
  .video-fullscreen-btn {
    width: 44px;
    height: 44px;
  }
  /* ③ 底部 Home 条安全区：视频区内边距下移，控件不贴屏缘 */
  .conv-video-section {
    /* 上下 padding 归零（2026-10-01 用户反馈）：视频上边线与顶栏分隔线重合、
       下边线与视频区底部分隔线重合，消灭两条线与视频之间的死区空隙，
       视频上移且纵向外扩填满视频区；左右安全区内边距保留 */
    padding-top: 0;
    padding-bottom: 0;
    padding-left: calc(16px + env(safe-area-inset-left, 0px));
    padding-right: calc(16px + env(safe-area-inset-right, 0px));
  }
  .welcome-footer,
  .page-footer {
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
}

/* 副标题注释语移动端回排（2026-09-22）：桌面绝对定位 left:100% 在窄屏
   必然溢出视口右侧造成横向滚动；≤640px 改回文档流内联，超宽时整体
   落到下一行居中（注释语自身仍 nowrap 单行，桌面排版零影响）
   2026-09-30 微信端实测修正：注释语回文档流后计入行宽，「语宝」被顶偏左
   → 注释语独占一行落到第二行居中，语宝® 单独一行精确居中 */
@media (max-width: 640px) {
  .logo-sub-row {
    flex-wrap: wrap;
    justify-content: center;
  }
  .logo-sub-note {
    position: static;
    flex-basis: 100%; /* 独占第二行，不计入语宝行宽 */
    margin-left: 0;
    margin-top: 2px;
    display: inline-block;
    text-align: center;
  }
  /* 副标题商标标注窄屏回排（2026-09-22）：note 回文档流后行宽含注释语，
     标注若仍绝对定位 left:100% 会挂到注释语末尾而非「语宝」右上角（语义错位）；
     改回文档流后按 DOM 顺序 语宝→®→注释语 天然贴副标题尾部
     2026-09-30 微信端居中修正：标注以负右边距抵消自身占位（13px 圆圈
     徽章视觉保留），行宽净贡献=0 → 与桌面端「标注不占宽」居中语义一致 */
  .logo-sub-mark {
    position: static;
    margin-left: 3px;
    margin-right: -16px; /* 3+13-16=0：视觉贴语宝右上角，布局宽度归零 */
    align-self: flex-start;
  }
  /* 欢迎页副标语窄屏回排（2026-09-30 微信端实测）：EN 译文
     「Immersive English conversation · Scenario-based speaking practice」
     66 字符 nowrap 必溢出 375px 视口；英语界面允许在「·」自然断点回两行居中。
     中文 15 字、日/韩译文均短于视口不换行；桌面 >640px 单行不变 */
  html[lang="en"] .welcome-tagline-zh {
    white-space: normal;
    line-height: 1.45;
  }
  /* 访客试用提示窄屏单行化（2026-09-30 微信端）：日/韩/英译文略超卡片内容宽
     （JA 末字「回」被挤到第二行）；≤640px 非中文收窄内边距+字号微缩强制单行。
     中文 15 字宽余充足不受影响；桌面 >640px 不变 */
  html[lang="en"] .welcome-guest-hint,
  html[lang="ja"] .welcome-guest-hint,
  html[lang="ko"] .welcome-guest-hint {
    white-space: nowrap;
    font-size: 11px;
    padding: 5px 10px;
  }
  /* 欢迎页四个功能词窄屏回排（2026-09-30 微信端实测）：非中文译文长，
     375px 视口强制单行实测溢出（EN 413px / JA 389px）；≤640px 改 2×2
     网格居中（grid 保证恰两列两行、列宽按内容自适应，视觉对称；flex-wrap
     贪心填充会成 3 行不对称）。中文四词短单行可放不受影响；桌面 >640px
     单行强制不变 */
  html[lang="en"] .welcome-features,
  html[lang="ja"] .welcome-features,
  html[lang="ko"] .welcome-features {
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-content: center;
    gap: 8px;
  }
}

/* 访客试用提示英文版居中标尺（2026-10-01 四轮定位终修）：根因=卡片左右 48px
   内边距使内容区仅 244px，EN 译文单行 298px 天生放不下——max-width:100% 反而
   把胶囊钳在 244px 致文字溢出；margin auto 在「宽于包含块」时被过约束规则
   钳到内容左缘（LTR 忽略右 auto）并不产生负边距。终解：max-content 取真实
   文字宽 + left:50% + translateX(-50%) 相对内容盒中心强制居中（卡片左右
   内边距对称 48/48，内容盒中心即卡片中心），胶囊向两侧内边距区借位
   （375px 视口胶囊 295px 两侧各借 ~25px < 48px 不出卡片）；nowrap 单行；
   ≤640px 字号 10px 收敛。仅英语界面；桌面 EN 12px/内容区 464px 无溢出 */
html[lang="en"] .welcome-guest-hint {
  display: block;
  width: max-content;
  max-width: none;
  margin: -12px 0 18px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  padding-left: 12px;
  padding-right: 12px;
  white-space: nowrap;
  text-align: center;
}
@media (max-width: 640px) {
  html[lang="en"] .welcome-guest-hint {
    font-size: 10px;
  }
}

/* ④ iOS 无语音识别常驻引导条：对话页视频区顶部，醒目但不遮挡人物面部
   （面部在画面中轴线，条带贴顶 44px 内） */
.ios-asr-notice {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 25; /* mic 30 之下、视频之上 */
  max-width: min(92%, 460px);
  background: rgba(20, 12, 28, 0.82);
  color: #F3EEFA;
  border: 1px solid rgba(166, 127, 212, 0.45);
  border-radius: 10px;
  padding: 8px 30px 8px 12px;
  font-size: 12px;
  line-height: 1.55;
  text-align: left;
  backdrop-filter: blur(4px);
}
.ios-asr-notice b {
  color: #D9C2F0;
}
/* 引导条在时 mic 下移避让（2026-09-22）：引导条 append 到 .video-wrapper 尾部
   在 mic-btn 之后，兄弟选择器 ~ 不可达，用 :has 从容器下钻（Chrome 105+）；
   引导条高约 60px，mic 从 top:16px 下移到 76px 避开文字区 */
.video-wrapper:has(.ios-asr-notice) .mic-btn {
  top: 76px;
}
.ios-asr-notice .ios-asr-close {
  position: absolute;
  top: 4px;
  right: 8px;
  border: none;
  background: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 15px;
  cursor: pointer;
  padding: 2px 6px;
}

/* ===== 手机端证书缩放补丁·二（≤720px，2026-10-04）：角标/注册解锁条的基础规则定义在文件
   后段（P2b 区块），同优先级下后定义生效——本补丁置于文件末尾确保移动缩放不被反杀 ===== */
@media (max-width: 720px) {
  .cert-trial-badge { top: 16px; right: 8px; padding: 3px 7px 4px; }
  .cert-trial-badge span { font-size: 11px; letter-spacing: 2px; }
  .cert-trial-badge em { font-size: 7px; letter-spacing: 1px; }
  .cert-guest-unlock { flex-wrap: wrap; justify-content: center; margin-right: 0; font-size: 12px; gap: 6px 10px; padding: 7px 12px; }
}

/* ===== 字里行间入口按钮（2026-10-04）：单词学习页首栏按钮仅手机端显示（桌面保持不变），
   阅读页首栏按钮紧跟「阅读天地」标题右侧；独立页复用 .news-section 版式 ===== */
.wq-news-btn { display: none; }
.rd-news-btn { margin-left: 8px; }
@media (max-width: 720px) {
  .wq-news-btn { display: inline-block; }
  .rd-news-btn { margin-left: 6px; padding-left: 10px; padding-right: 10px; }
}

/* ===== 新闻弹窗最大化（2026-10-04，手机端全屏阅读）：
   ⤢ 切换全屏；全屏态左上角露出 ← 返回键（回字里行间列表页），标题亦可点击返回；
   返回键仅全屏态显示，常规弹窗保持原三键布局 ===== */
#news-modal-back { display: none; }
#news-modal-title { cursor: pointer; }
#news-modal.news-max > .modal {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  border-radius: 0;
  margin: 0;
}
#news-modal.news-max .news-modal-body {
  max-height: calc(100dvh - 58px);
}
#news-modal.news-max #news-modal-back { display: inline-flex; }

/* 新闻弹窗标题防折行（2026-10-04）：四键行挤占标题空间，窄屏单行省略 */
#news-modal-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
@media (max-width: 720px) {
  #news-modal-title { font-size: 14px; }
}

/* 最大化/还原按钮字形加重（2026-10-04）：⛶/❐ 粗线条几何形 + 21px 加粗，
   与右侧 ↗ ✕ 按钮视觉重量对齐 */
#news-modal-max { font-size: 21px; font-weight: 700; }

/* ===== 新闻正文独立页（2026-10-04，双端网页形式）：复用 .news-modal-body 排版类，
   但解除弹窗的 72vh 限高/滚动，改为自然文档流；版心 720px 与列表页一致 ===== */
.news-article-body {
  max-width: 720px;
  margin: 0 auto;
  max-height: none;
  overflow: visible;
  padding: 18px 18px 48px;
}
@media (max-width: 720px) {
  .news-article-body { padding: 14px 16px 36px; }
}

/* 新闻正文页滚动修复（2026-10-04）：.page 为 100% 高 flex 列，正文须独立滚动——
   flex:1 + min-height:0 + overflow-y:auto，首栏钉顶不动，正文可上滑读全文 */
#news-article-page .news-article-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* 深链首刷预显（2026-10-04）：?page=news 解析期 html.pre-news ——
   复刻 .page.active 语义预显字里行间页，init 摘类后由 .active 机制无缝接管 */
html.pre-news #news-page {
  display: flex;
  flex-direction: column;
  opacity: 1;
}

/* 深链预显期压制静态 .active 的欢迎页（否则两页叠显）；
   init 摘 pre-news 类时 showPage('news') 已同步摘除欢迎页 .active，无回闪 */
html.pre-news #welcome-page {
  display: none;
}

/* ===== 应用内正文页与转发独立页版式统一（2026-10-04）：
   白卡正文（.nv-article 同参数）+ 转载说明块（.nv-reprint 同参数），双端 UI 一致 ===== */
#news-article-page .news-article-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.news-article-wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 16px 16px 48px;
}
.news-article-body {
  background: #fff;
  border: 1px solid #E4DCE8;
  border-radius: 14px;
  padding: 22px 22px 26px;
  margin: 0;
  max-width: none;
  max-height: none;
  overflow: visible;
}
.news-article-body h1 { font-size: 21px; line-height: 1.55; }
.news-article-reprint {
  margin-top: 16px;
  background: #F0E6F2;
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.8;
  color: #4A4254;
}
.news-article-reprint b { color: var(--tsinghua-purple); }
@media (max-width: 720px) {
  .news-article-wrap { padding: 12px 12px 36px; }
  .news-article-body { padding: 18px 16px 22px; }
}

/* 字里行间按钮四语种防折行（2026-10-04）：EN "Between the Lines" 较长，
   移动端 ≤720 首栏空间紧张，按钮文案恒一行 */
.wq-news-btn, .rd-news-btn { white-space: nowrap; }

/* EN 首栏设置钮钉位（2026-10-04 用户裁决）：≤720 微信端 EN 态译文撑宽，
   单词学习页「Between the Lines」入列第一行（~395px 超宽）把 ⚙ 挤落第二行、
   阅读天地页 header-right 整组（Scene Conversation+⚙ ~168px）换行落第二行。
   两页设置钮改绝对定位恒钉首栏第一行右上（top/right 对齐 10px/12px 内边距），
   彻底脱离 flex 行收集与 order 回填影响；header 加 padding-right 52px 预留
   钉位空间防重叠（被钉钮移出文档流后行一余物自然收拢/换行）。
   作用域：仅 EN ≤720，JA/KO 现状不动、桌面 >720 不变 */
@media (max-width: 720px) {
  html[lang="en"] #wordquiz-page .page-header,
  html[lang="en"] #reading-page .page-header {
    position: relative;
    padding-right: 52px;
  }
  html[lang="en"] #wordquiz-page #settings-btn-wordquiz,
  html[lang="en"] #reading-page #settings-btn-reading {
    position: absolute;
    top: 10px;
    right: 12px;
    margin-left: 0;
  }
}

/* EN 阅读页首栏钉位补强（2026-10-04）：rd-news-btn「Between the Lines」原生
   12px 字号偏宽（~125px），header-left 合计 ~315px 超出 311px 内容盒，不换行
   溢出滑到绝对钉位的 ⚙ 下方（实测 overlap=rd-news-btn）。收窄按钮字号/内边距
   对齐 wq-reading-btn 规格（~105px，余量 18px），并允许 header-left 内部换行
   兜底——即便字体度量更宽，按钮也只落第二行、绝不压钉位 */
@media (max-width: 720px) {
  html[lang="en"] #reading-page .header-left {
    flex-wrap: wrap;
    row-gap: 6px;
  }
  html[lang="en"] #reading-page #rd-news-btn {
    font-size: 11px;
    padding: 4px 7px;
  }
}

/* EN 阅读页场景对话钮上提第二行（2026-10-04 用户裁决）：原组布局下
   header-left 占行一二、header-right（场景对话）整组落行三。改 EN≤720
   两 header 组 display:contents 拆格，返回/图标/标题 order:0 居行一
   （⚙ 已绝对钉位不占流），rd-news-btn/rd-scene-btn order:1 共居行二；
   隐形 .rd-hdr-break（order:0 宽 100%）在标题后强制断行，防 order:1 项
   回填行一（行一余 ~119px 容得下 105px 新闻钮，无锚必回填）。
   默认 display:none，其余语种/桌面零影响；column-gap 补拆组后失落的组内距 */
.rd-hdr-break { display: none; }
@media (max-width: 720px) {
  html[lang="en"] #reading-page .page-header {
    column-gap: 8px;
  }
  html[lang="en"] #reading-page .header-left,
  html[lang="en"] #reading-page .header-right {
    display: contents;
  }
  html[lang="en"] #reading-page .rd-hdr-break {
    display: block;
    width: 100%;
    height: 0;
    order: 0;
  }
  html[lang="en"] #reading-page #rd-news-btn,
  html[lang="en"] #reading-page #rd-scene-btn {
    order: 1;
  }
}

/* EN 阅读页拆组后行一左对齐（2026-10-04 复测修正）：.page-header 基础
   justify-content:space-between 在拆组后把行一的标题甩到右缘、盒体压到
   绝对钉位的 ⚙（实测 overlap=page-title）。钉位方案下行一必须左堆积 */
@media (max-width: 720px) {
  html[lang="en"] #reading-page .page-header {
    justify-content: flex-start;
  }
}

/* 字里行间/新闻正文页首栏语种下拉（2026-10-04 用户裁决）：≤720 微信端
   两页首栏 ⚙ 左侧增四语种下拉，复用 .lang-select 胶囊样式；桌面 >720 隐藏 */
.hdr-lang-select { display: none; }
@media (max-width: 720px) {
  .hdr-lang-select {
    display: inline-block;
    font-size: 11px;
    padding: 3px 18px 3px 7px;
  }
}

/* 字里行间/新闻正文页首栏「新闻通稿」副标（2026-10-04 用户裁决）：读者只看到
   「字里行间」不明栏目性质——标题后、语种下拉前增小字副标，四语种随词典；
   ≤720 微信端显示，桌面 >720 隐藏 */
.news-hdr-sub { display: none; }
@media (max-width: 720px) {
  .news-hdr-sub {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary, #6b6580);
    white-space: nowrap;
    margin-left: -4px;
  }
}

/* zh 态副标「新闻通稿」放大改灰（2026-10-05 用户裁决）：字号与首栏
   「字里行间」标题一致（≤720 标题 17px），颜色改中性灰 #8a8a8a；
   375px 宽溢落第二行为既定模式（永与标题相继、不压右组钉位） */
@media (max-width: 720px) {
  html[lang="zh"] .news-hdr-sub {
    font-size: 17px;
    color: #8a8a8a;
  }
}

/* 字里行间/新闻正文页首栏右组钉位（2026-10-04 复测修正）：EN 态「Between the
   Lines + Press Releases」左组 ~330px，右组（语种下拉+⚙ ~125px）整组换行落
   第二行左侧，观感断裂。改 ≤720 两页右组整体绝对钉位第一行右上（全语种统一，
   与单词/阅读页 ⚙ 钉位同策），header 加 padding-right:140px 预留钉位；
   左组允许内部换行——副标「新闻通稿」宽溢时落第二行，永与标题相继、
   绝不压右组钉位（zh/ko 一行容下保持原位，en/ja 副标自然落行二） */
@media (max-width: 720px) {
  #news-page .page-header,
  #news-article-page .page-header {
    position: relative;
    padding-right: 140px;
  }
  #news-page .header-right,
  #news-article-page .header-right {
    position: absolute;
    top: 10px;
    right: 12px;
  }
  #news-page .header-left,
  #news-article-page .header-left {
    flex-wrap: wrap;
    row-gap: 6px;
  }
}

/* EN 阅读页行二两钮等宽（2026-10-04 用户裁决）：「Between the Lines」(~105px)
   与「Scene Conversation」(~130px) 宽度不一观感参差——EN≤720 两钮 flex 1:1
   等分行二（各 ~177px），文案居中 */
@media (max-width: 720px) {
  html[lang="en"] #reading-page #rd-news-btn,
  html[lang="en"] #reading-page #rd-scene-btn {
    flex: 1 1 0;
    text-align: center;
  }
}

/* EN 阅读页行二两钮等宽修正（2026-10-04 复测）：flex 1:1 basis:0 仍不等——
   min-width:auto 把两钮各自锁在 min-content 地板（144/154），自由空间均分
   后差值原样保留。补 min-width:0 解锁地板，两钮真等分（各 ~171px） */
@media (max-width: 720px) {
  html[lang="en"] #reading-page #rd-news-btn,
  html[lang="en"] #reading-page #rd-scene-btn {
    min-width: 0;
  }
}

/* EN 阅读页行二两钮等宽终案（2026-10-04 三轮实测）：flex 1:1 分赃受
   min-content 地板/边距干扰实测 144/154 不等——弃用 grow 分赃，改
   flex:none + width:calc(50% - 7px)（内容盒半宽扣 news 左缘 6px 外边距
   与 8px 列距的各半），任意窄屏两钮严格等宽、随屏自适应 */
@media (max-width: 720px) {
  html[lang="en"] #reading-page #rd-news-btn,
  html[lang="en"] #reading-page #rd-scene-btn {
    flex: none;
    width: calc(50% - 7px);
  }
}

/* EN 阅读页行二两钮高等宽放（2026-10-04 用户裁决改口）：撤等宽（width:calc
   作废），宽度回归自然适应文字；高度求一致——此前 news 11px/4px 7px、
   scene 13px/6px 12px 字号内边距不一致高差 3~4px，统一 12px 字号 +
   5px 12px 内边距 + 1.4 行高，两钮盒高天然相等 */
@media (max-width: 720px) {
  html[lang="en"] #reading-page #rd-news-btn,
  html[lang="en"] #reading-page #rd-scene-btn {
    flex: none;
    width: auto;
    min-width: 0;
    font-size: 12px;
    line-height: 1.4;
    padding: 5px 12px;
  }
}

/* 场景页首栏 zh 重排（2026-10-04 用户裁决）：≤720 中文态——
   ⚙ 绝对钉位第一行右对齐；榜单/难度下拉/单词学习三件套第二行左右居中
   （实测三件套 65+61+70+间距=208px，justify-content:center 天然居中）。
   行一=返回/图标/标题/语种下拉（230px 实测）；登录态 user-chip(126px)
   order:2 独落第三行居中，不挤三件套（访客态 chip 隐藏恰好两行）。
   作用域 html:not(en/ja/ko) 仅中文（含 zh-CN 首刷窗），EN/JA/KO 原布局不变 */
@media (max-width: 720px) {
  html:not([lang="en"]):not([lang="ja"]):not([lang="ko"]) #scene-page .page-header {
    position: relative;
    padding-right: 52px;
  }
  html:not([lang="en"]):not([lang="ja"]):not([lang="ko"]) #scene-page #lang-select-scene {
    order: 0;
    margin-left: 0;
  }
  html:not([lang="en"]):not([lang="ja"]):not([lang="ko"]) #scene-page #leaderboard-btn,
  html:not([lang="en"]):not([lang="ja"]):not([lang="ko"]) #scene-page #scene-level-select,
  html:not([lang="en"]):not([lang="ja"]):not([lang="ko"]) #scene-page #wordquiz-btn {
    order: 1;
  }
  html:not([lang="en"]):not([lang="ja"]):not([lang="ko"]) #scene-page #user-chip {
    order: 2;
  }
  html:not([lang="en"]):not([lang="ja"]):not([lang="ko"]) #scene-page #settings-btn-scene {
    position: absolute;
    top: 10px;
    right: 12px;
    margin-left: 0;
  }
}

/* 场景页 zh 断行锚（2026-10-04 复测修正）：order:1 的三件套首件「榜单」
   实测回填行一（行一 300px<311px 容得下 65px 榜单，行收集只看溢出）——
   语种下拉后插隐形锚（order:0 宽 100%）强制断行，行一恒=返回/图标/标题/
   语种，三件套恒居行二居中。默认 display:none 其余语种/桌面零影响 */
.sc-hdr-break { display: none; }
@media (max-width: 720px) {
  html:not([lang="en"]):not([lang="ja"]):not([lang="ko"]) #scene-page .sc-hdr-break {
    display: block;
    width: 100%;
    height: 0;
    order: 0;
  }
}

/* 场景页 zh 断行锚加锤（2026-10-04 二轮复测）：上版断行锚 display 生效但
   order/width 未压过基础 #scene-page .header-right>*{order:2}（实测 brk
   order:2/width:0），级联存疑处一律 !important 一锤定音 */
@media (max-width: 720px) {
  html:not([lang="en"]):not([lang="ja"]):not([lang="ko"]) #scene-page .sc-hdr-break {
    display: block !important;
    width: 100% !important;
    height: 0 !important;
    order: 0 !important;
  }
}

/* 场景页 zh 三件套视口居中修正（2026-10-04 三轮复测）：钉位预留的
   padding-right:52px 把内容盒左压 20px，三件套居中偏左（实测中线 167.5
   vs 视口中线 187.5）。行一实测仅 230px（居中后右缘 302<⚙左缘 331），
   无需预留——撤 padding-right 恢复对称内容盒，三件套以视口为轴居中 */
@media (max-width: 720px) {
  html:not([lang="en"]):not([lang="ja"]):not([lang="ko"]) #scene-page .page-header {
    padding-right: 12px;
  }
}

/* 场景页 zh 第二断行锚（2026-10-04 四轮复测）：登录态 user-chip(order:2)
   实测回填三件套行（208+126 容得下 351 内容盒，行收集只看溢出）——
   单词学习后再插一锚（order:1 宽 100%）强制断行，chip 恒落第三行，
   三件套恒独占行二视口居中 */
.sc-hdr-break2 { display: none; }
@media (max-width: 720px) {
  html:not([lang="en"]):not([lang="ja"]):not([lang="ko"]) #scene-page .sc-hdr-break2 {
    display: block !important;
    width: 100% !important;
    height: 0 !important;
    order: 1 !important;
  }
}

/* 场景页 zh 行一左对齐（2026-10-05 用户裁决）：行一组（返回键/网站图标/
   场景对话标题/四语种下拉）靠左排列，⚙ 绝对钉位行一右侧不动。
   justify-content 对全行生效——行二三件套居中改 auto 边距对接管
   （左 auto+右 auto 平分剩余空间，组恒以视口为轴居中，效果同原
   justify-center），行三登录 chip 同步 margin auto 接管，
   两条断行锚零宽整行不受影响 */
@media (max-width: 720px) {
  html:not([lang="en"]):not([lang="ja"]):not([lang="ko"]) #scene-page .page-header {
    justify-content: flex-start;
  }
  html:not([lang="en"]):not([lang="ja"]):not([lang="ko"]) #scene-page #leaderboard-btn {
    margin-left: auto;
  }
  html:not([lang="en"]):not([lang="ja"]):not([lang="ko"]) #scene-page #wordquiz-btn {
    margin-right: auto;
  }
  html:not([lang="en"]):not([lang="ja"]):not([lang="ko"]) #scene-page #user-chip {
    margin-left: auto;
    margin-right: auto;
  }
}

/* 场景页 zh 行一右组扩为两钮（2026-10-05 用户裁决）：四语种下拉从行一
   左组移至右组、与绝对钉位的 ⚙ 相邻——ml:auto 推右 + mr:44px 让位 ⚙
   （钉位 right:12 + ⚙ 宽约 36，预留 44 防重叠）；行一左组=返回/图标/
   标题，行二三件套与行三 chip 的 auto 居中结构不受影响 */
@media (max-width: 720px) {
  html:not([lang="en"]):not([lang="ja"]):not([lang="ko"]) #scene-page #lang-select-scene {
    margin-left: auto;
    margin-right: 44px;
  }
}

/* 单词学习页 zh 首栏两钮等高（2026-10-05 用户裁决）：「字里行间」继承
   .btn-sm 通用规格（13px/6px 12px，约 32px）比「阅读天地」移动重排版
   （11px/4px 7px，约 25px）高出一截——对齐阅读天地三件套规格
   （字号/行高/内边距），两钮上下高度一致；EN/JA/KO 现状不动 */
@media (max-width: 720px) {
  html:not([lang="en"]):not([lang="ja"]):not([lang="ko"]) #wordquiz-page #wq-news-btn {
    padding: 4px 7px;
    font-size: 11px;
  }
}

/* 单词学习页 EN 态隐藏「Between the Lines」（2026-10-05 用户裁决，手机微信端）：
   base 在 ≤720 放开 display:inline-block，此处以 id 双选择器提权重新隐藏；
   zh/ja/ko 不受影响 */
@media (max-width: 720px) {
  html[lang="en"] #wordquiz-page #wq-news-btn {
    display: none;
  }
}

/* 复盘页 EN 行二两端对齐（2026-10-05 用户裁决，手机微信端英文态）：Reading Corner
   居左（行二首项自然贴左），Review + Correct/Total 贴右——score 的 mr:auto 撤掉后
   行二自由空间全归 review 的 ml:auto，两端对齐成立。仅 review 可见时生效（复盘页/
   有复盘词时）；review 隐藏时维持 .hidden ~ 居中规则不变 */
@media (max-width: 720px) {
  html[lang="en"] #wordquiz-page #wordquiz-review-btn:not(.hidden) ~ #wordquiz-score {
    margin-right: 0;
  }
}

/* 复盘头「AI Coach」隐藏（2026-10-05 用户裁决，EN ≤720）：仅隐藏文字标签，
   Wave 朵朵 / Daily 步步 音色切换保留 */
@media (max-width: 720px) {
  html[lang="en"] .wordquiz-review-partner {
    display: none;
  }
}

/* 复盘列表移动端滚动修复（2026-10-05）：≤900 时 .wordquiz-main 高度自适应（flex:none），
   面板 max-height:100% 对 auto 高度父级失效 → 列表随内容撑高，被 .wordquiz-body
   overflow:hidden 整段裁掉（实测 375×812 下 panelBottom=1084，底部 270+px 不可达）。
   给面板钉死高度上限（首栏 EN 两行 ~106 / zh 三行 ~129，取 136 兜底 + vh 回退兼容
   老 WebView），内部 .wordquiz-review-list 的 overflow-y:auto 随即生效——用户可上滑
   自由选词、自定复盘先后；列表短时无视觉变化，四语种同修（同缺陷） */
@media (max-width: 720px) {
  #wordquiz-page .wordquiz-review-panel {
    max-height: calc(100vh - 136px);
    max-height: calc(100dvh - 136px);
  }
}

/* 复盘列表滚动条移除（2026-10-05 用户二次裁决，全语态 ≤720 手机微信端）：上滑选词时
   右侧滚动条占位抢视觉——WebKit 伪元素 + scrollbar-width 双通道隐藏，
   滚动功能保留仅隐藏轨道；初版仅 EN，真机验收后用户裁「直接去掉」扩为四语态；
   桌面 >720 保留 */
@media (max-width: 720px) {
  #wordquiz-page .wordquiz-review-list {
    scrollbar-width: none;       /* Firefox */
    -ms-overflow-style: none;    /* 旧 Edge */
  }
  #wordquiz-page .wordquiz-review-list::-webkit-scrollbar {
    display: none;               /* Chromium/微信 XWEB */
    width: 0;
    height: 0;
  }
}

/* 「清空复盘」「返回答题」按钮移除（2026-10-05 用户裁决，四语态 ≤720 手机微信端）：
   移动端不再提供清空/返回入口（返回靠重进复盘页外的既有导航）；JS 的 .hidden 切换
   与本规则同向 display:none 无冲突；.wordquiz-review-actions 空容器无副作用；
   桌面 >720 保留 */
@media (max-width: 720px) {
  #wordquiz-page #wordquiz-review-clear,
  #wordquiz-page #wordquiz-review-back {
    display: none;
  }
}

/* 「复盘清单」标题缩小防换行（2026-10-05 用户裁决，zh ≤720 手机微信端）：
   20px 标题 + 智能陪练音色组在 375px 头部挤压致标题四字折行——缩至 16px 并
   nowrap 硬性单行；en/ja/ko 与桌面 >720 不变 */
@media (max-width: 720px) {
  html[lang="zh"] #wordquiz-page .wordquiz-review-title {
    font-size: 16px;
    white-space: nowrap;
  }
}