/* ============================================================
   问卷调查管理 手机端样式（独立于PC端，不混用）
   主题配色以 --sv-* 变量定义，暗色主题块见文件底部
   ============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

/* Vue 挂载前隐藏模板，避免插值字符闪现 */
[v-cloak] { display: none !important; }

:root {
  --sv-bg: #f2f3f7;
  --sv-bg-image: none;
  --sv-text: #303133;
  --sv-text-sub: #909399;
  --sv-accent: #409eff;
  --sv-accent-strong: #1f6feb;
  --sv-card: #ffffff;
  --sv-border: #dcdfe6;
  --sv-divider: #ebeef5;
  --sv-hover: #f5f9ff;
  --sv-soft-bg: #f7f8fa;
  --sv-selected: #409eff;
  --sv-selected-bg: #ecf5ff;
  --sv-selected-text: #1f6feb;
  --sv-btn: #409eff;
  --sv-btn-hover: #66b1ff;
  --sv-btn-shadow: rgba(64, 158, 255, .4);
  --sv-header-bg: linear-gradient(135deg, #1f6feb, #409eff);
  --sv-header-text: #ffffff;
  --sv-header-shadow: 0 2px 8px rgba(31, 111, 235, .3);
  --sv-header-btn-bg: rgba(255, 255, 255, .18);
  --sv-badge-bg: #ecf5ff;
  --sv-badge-text: #409eff;
  --sv-badge-border: #d9ecff;
  --sv-badge2-bg: #f4f4f5;
  --sv-badge2-text: #909399;
  --sv-hover-border: #d9ecff;
  --sv-tip-bg: #fdf2f5;
  --sv-tip-border: #f7dae2;
  --sv-tip-text: #cc5f78;
  --sv-danger: #f56c6c;
  --sv-danger-bg: #fef0f0;
  --sv-danger-border: #fbc4c4;
  --sv-success: #67c23a;
  --sv-success-bg: #f0f9eb;
  --sv-success-border: #c2e7b0;
  --sv-title-weight: 600;
  --sv-opt-text: #303133;
  --sv-pop-bg: rgba(255, 255, 255, .95);
  --sv-fabbar-top: rgba(242, 243, 247, .75);
  --sv-fabbar-bottom: rgba(242, 243, 247, .98);
  --sv-shadow: 0 1px 3px rgba(0, 21, 41, .06);
  --sv-card-border: transparent;
  --sv-font: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', '微软雅黑', sans-serif;
  --sv-letter-spacing: normal;
  --sv-paper-lh: 1.6;
  --sv-selected-glow: transparent;
}

html {
  font-size: 16px;
  background-color: var(--sv-bg);
}

body {
  font-family: var(--sv-font);
  color: var(--sv-text);
  background-color: var(--sv-bg);
  background-image: var(--sv-bg-image);
  background-attachment: fixed;
  letter-spacing: var(--sv-letter-spacing);
  min-height: 100vh;
}

/* ---------- 顶部导航 ---------- */
.m-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 50px;
  background: var(--sv-header-bg);
  color: var(--sv-header-text);
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 8px;
  box-shadow: var(--sv-header-shadow);
}

.m-header .m-back {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  margin-left: -6px;
  background: none;
  border: none;
  color: inherit;
}

.m-header .m-title {
  font-size: 16px;
  font-weight: 600;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.m-header .m-sub { font-size: 12px; opacity: .85; }

.m-header .m-action {
  font-size: 13px;
  padding: 6px 9px;
  border-radius: 4px;
  background: var(--sv-header-btn-bg);
  border: none;
  color: var(--sv-header-text);
  flex: none;          /* 按钮不被压缩 */
  white-space: nowrap; /* 文字不折行（行内放不下时整行滚动而不是变形） */
  display: inline-flex; /* 图标与文字垂直居中 */
  align-items: center;
  justify-content: center;
  gap: 3px;
}

/* ---------- 主体 ---------- */
.m-body {
  max-width: 560px;
  margin: 0 auto;
  padding: 12px 12px calc(24px + env(safe-area-inset-bottom));
}

/* ---------- 模块信息横幅 ---------- */
.m-banner {
  background: var(--sv-card);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 12px;
  border: 1px solid var(--sv-card-border);
  border-left: 4px solid var(--sv-accent);
}

.m-banner .m-banner-title {
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.4;
}

.m-banner .m-banner-tag {
  flex: none;
  background: var(--sv-badge-bg);
  color: var(--sv-badge-text);
  border: 1px solid var(--sv-badge-border);
  border-radius: 4px;
  font-size: 11px;
  font-weight: normal;
  padding: 2px 6px;
}

/* 开场白：纯文本样式（不要方框底色，紧贴标题下方） */
.m-banner .m-banner-tip {
  margin-top: 6px;
  font-size: 14px;
  font-weight: normal;
  word-break: break-all;
  color: var(--sv-text-sub);
  line-height: 1.8;
}

/* ---------- 工具条 ---------- */
.m-toolbar {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  align-items: center;
}

.m-toolbar .m-search { flex: 1; }

/* ---------- 卡片列表 ---------- */
.m-card-list { display: flex; flex-direction: column; gap: 10px; }

.m-item-card {
  background: var(--sv-card);
  border-radius: 12px;
  padding: 14px;
  box-shadow: var(--sv-shadow);
  border: 1px solid var(--sv-card-border);
}

.m-item-card .m-item-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.m-item-card .m-sort {
  flex: none;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 4px;
  background: var(--sv-accent);
  color: #fff;
  font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  margin-top: 1px;
}

.m-item-card .m-item-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  word-break: break-all;
  flex: 1;
}

.m-item-card .m-item-tip { margin-top: 6px; font-size: 13px; color: var(--sv-text-sub); line-height: 1.6; word-break: break-all; }

.m-item-card .m-item-meta {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--sv-text-sub);
}

/* ---------- 大触控操作按钮 ---------- */
.m-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.m-actions .m-btn {
  flex: 1;
  min-height: 40px;
  border-radius: 8px;
  border: 1px solid var(--sv-border);
  background: var(--sv-card);
  color: var(--sv-text);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

/* 上移/下移等次级操作：强调色幽灵按钮 */
.m-actions .m-btn,
.m-q-ops .m-btn {
  border-color: var(--sv-badge-border);
  color: var(--sv-accent);
  background: var(--sv-selected-bg);
}

/* 主操作（修改/题目管理）：实心强调色 */
.m-btn.m-btn-primary {
  border-color: var(--sv-accent);
  color: #fff;
  background: var(--sv-accent);
}

/* 边框统一用浅色描边，与默认 m-btn（浅蓝边框）观感一致，仅靠文字色区分功能 */
.m-btn.m-btn-success { border-color: var(--sv-success-border); color: var(--sv-success); background: var(--sv-success-bg); }
.m-btn.m-btn-danger { border-color: var(--sv-danger-border); color: var(--sv-danger); background: var(--sv-danger-bg); }

/* 虚线按钮（新增选项/上传）：强调色虚线 */
.m-btn.m-btn-plain {
  border-style: dashed;
  border-color: var(--sv-accent);
  color: var(--sv-accent);
  background: var(--sv-selected-bg);
}

.m-btn:disabled { opacity: .45; }

/* 上移/下移（模块卡片）：仅图标紧凑按钮，不参与 flex 平分，给文字按钮留空间 */
.m-actions .m-btn.m-btn-move {
  flex: none;
  width: 40px;
  min-width: 40px;
  padding: 0;
}

.m-mini-actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  justify-content: flex-end;
}

.m-mini-btn {
  min-width: 44px;
  min-height: 34px;
  padding: 0 8px;
  border-radius: 8px;
  border: none;
  background: var(--sv-badge2-bg);
  color: var(--sv-text-sub);
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.m-mini-btn.danger { background: var(--sv-danger-bg); color: var(--sv-danger); }
.m-mini-btn.primary { background: var(--sv-selected-bg); color: var(--sv-accent); }

/* ---------- 题目折叠卡片 ---------- */
.m-questions { display: flex; flex-direction: column; gap: 10px; }

.m-question-card {
  background: var(--sv-card);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--sv-shadow);
  border: 1px solid var(--sv-card-border);
}

/* 题目卡片头：序号+类型标签作前缀，题干换行悬挂缩进对齐，箭头绝对定位 */
.m-question-head {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  position: relative;
  padding: 13px 44px 13px 14px;
  cursor: pointer;
}

.m-question-head .m-arrow {
  position: absolute;
  right: 14px;
  top: 16px;
  color: var(--sv-text-sub);
  transition: transform .25s;
  font-size: 13px;
}

.m-question-card.is-open .m-arrow { transform: rotate(90deg); }

.m-question-body { padding: 0 14px 14px; }

.m-option-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 10px;
  background: var(--sv-soft-bg);
  border-radius: 8px;
  margin-bottom: 8px;
}

.m-option-row .m-opt-letter { flex: none; color: var(--sv-text-sub); font-size: 13px; min-width: 20px; margin-top: 2px; }

.m-option-row .m-opt-content { flex: 1; font-size: 14px; line-height: 1.6; word-break: break-all; color: var(--sv-opt-text); }

.m-option-row .m-opt-ops { flex: none; display: flex; gap: 4px; }

.m-icon-btn {
  width: 34px; height: 34px;
  border: none;
  border-radius: 8px;
  background: var(--sv-card);
  color: var(--sv-text-sub);
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(0, 21, 41, .08);
}

.m-icon-btn.danger { color: var(--sv-danger); }
.m-icon-btn.primary { color: var(--sv-accent); }

/* ---------- 预览问卷 ---------- */
.m-paper {
  background: var(--sv-card);
  border-radius: 12px;
  padding: 18px 16px 26px;
  box-shadow: var(--sv-shadow);
  border: 1px solid var(--sv-card-border);
  line-height: var(--sv-paper-lh);
}

.m-paper .m-paper-title {
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--sv-accent);
  margin-bottom: 14px;
  line-height: 1.5;
}

.m-paper .m-paper-tip {
  word-break: break-all;
  color: var(--sv-text-sub);
  font-size: 14px;
  font-weight: normal;
  line-height: 1.8;
  margin-bottom: 18px;
  white-space: pre-wrap;
}

.m-q { margin-bottom: 22px; }

/* 题头：[序号+类型]合一个标签，内联在题干开头，换行后与标签对齐 */
.m-q-head { display: flex; align-items: flex-start; gap: 8px; }

.m-q-tagcol { flex: none; display: flex; align-items: center; gap: 4px; margin-top: 2px; }

.m-q-type { margin-right: 6px; vertical-align: 1px; }

.m-q-title { flex: 1; font-size: 15px; font-weight: var(--sv-title-weight); line-height: 1.65; word-break: break-all; }

.m-q-ops { margin-top: 10px; display: flex; gap: 8px; }

/* 大块可点选项 */
.m-choice {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 12px;
  border: 1.5px solid var(--sv-border);
  border-radius: 10px;
  margin-bottom: 10px;
  background: var(--sv-card);
  color: var(--sv-opt-text);
  font-size: 14px; /* 与PC端比例一致：题干15px、选项14px */
  line-height: 1.6;
  word-break: break-all;
}

.m-choice .m-dot {
  flex: none;
  width: 20px; height: 20px;
  border: 1.5px solid var(--sv-text-sub);
  background: var(--sv-card);
}

.m-choice.radio .m-dot { border-radius: 50%; position: relative; }

.m-choice.checkbox .m-dot { border-radius: 5px; position: relative; }

.m-choice.checked {
  border-color: var(--sv-selected);
  background: var(--sv-selected-bg);
  color: var(--sv-selected-text);
}

.m-choice.checked { box-shadow: 0 0 12px var(--sv-selected-glow, transparent); }

.m-choice.checked .m-dot { border-color: var(--sv-selected); }

.m-choice.radio.checked .m-dot::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--sv-selected);
}

.m-choice.checkbox.checked .m-dot::after {
  content: '✓';
  position: absolute;
  inset: 0;
  color: #fff;
  background: var(--sv-selected);
  border-radius: 4px;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.m-choice .m-opt-ops-inline { flex: none; margin-left: auto; display: flex; gap: 4px; }

/* ---------- 底部悬浮按钮 ---------- */
.m-fab-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--sv-fabbar-bottom), var(--sv-fabbar-top));
  display: flex;
  gap: 10px;
  z-index: 90;
}

.m-fab {
  flex: 1;
  height: 46px;
  border: none;
  border-radius: 23px;
  background: var(--sv-btn);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 4px 12px var(--sv-btn-shadow);
}

.m-fab.warn { background: #e6a23c; box-shadow: 0 4px 12px rgba(230, 162, 60, .4); }

/* ---------- 答题端（fill）：总进度 ---------- */
.f-progress-card {
  background: var(--sv-card);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 12px;
  border: 1px solid var(--sv-card-border);
  box-shadow: var(--sv-shadow);
}

.f-progress-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: var(--sv-text);
  margin-bottom: 10px;
}

.f-progress-bar {
  height: 8px;
  border-radius: 4px;
  background: var(--sv-hover);
  overflow: hidden;
}

.f-progress-inner {
  height: 100%;
  border-radius: 4px;
  background: var(--sv-accent);
  transition: width .3s;
}

/* 模块状态角标 */
.f-status-chip {
  flex: none;
  margin-left: auto;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 10px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.f-status-chip.done { background: var(--sv-success-bg); color: var(--sv-success); }
.f-status-chip.doing { background: var(--sv-tip-bg); color: var(--sv-tip-text); }
.f-status-chip.todo { background: var(--sv-selected-bg); color: var(--sv-accent); }
.f-status-chip.locked { background: var(--sv-badge2-bg); color: var(--sv-text-sub); }

/* 未解锁关卡不整卡蒙灰（用户反馈灰蒙蒙难看），锁定状态由「🔒未解锁」状态牌标识 */

/* ---------- 首页：游戏介绍卡 ---------- */
.f-intro-card {
  background: var(--sv-card);
  border: 1px solid var(--sv-card-border);
  border-radius: 12px;
  box-shadow: var(--sv-shadow);
  padding: 20px 18px 22px;
}

.f-intro-title { text-align: center; font-size: 18px; font-weight: 700; margin-bottom: 6px; color: var(--sv-text); }

.f-intro-section { margin-top: 20px; }

/* 小节标题：强调色小竖条 */
.f-intro-h {
  font-size: 15px;
  font-weight: 600;
  color: var(--sv-text);
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.f-intro-h::before {
  content: '';
  width: 4px;
  height: 15px;
  border-radius: 2px;
  background: var(--sv-accent);
}

/* 游戏目的：柔和色段落 */
.f-intro-purpose { font-size: 14px; line-height: 1.9; color: var(--sv-text-sub); word-break: break-all; }

/* 游戏规则：每条一张独立小卡片，间距 10px */
/* 规则条目：无框，左缘与小节标题（强调色竖条）对齐 */
.f-rule-item:last-child { margin-bottom: 0; }

/* 序号：与题目页同款 el-tag（主题色边框+文字+浅底）。
   不用 flex 顶对齐，序号作为行内元素与文字同流，vertical-align 由基线对齐，绝不错位 */
.f-rule-item { margin-bottom: 8px; }
.f-rule-idx { margin-right: 8px; vertical-align: middle; }

.f-rule-text { font-size: 14px; line-height: 1.7; color: var(--sv-text); word-break: break-all; }

.f-intro-card p { font-size: 14px; line-height: 1.8; color: var(--sv-text); word-break: break-all; }

.f-read-btn { width: 100%; height: 48px; margin-top: 18px; font-size: 16px; border-radius: 24px; }

/* ---------- 我的页：用户横幅 ---------- */
.f-profile-card {
  background: linear-gradient(135deg, var(--sv-accent-strong), var(--sv-accent));
  border-radius: 14px;
  padding: 24px 16px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
  box-shadow: 0 4px 14px var(--sv-btn-shadow);
  margin-bottom: 12px;
}

.f-profile-avatar {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  border: 2px solid rgba(255, 255, 255, .65);
  color: #fff;
  font-size: 30px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  overflow: visible;
  cursor: pointer;
}

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

.f-avatar-edit {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  color: var(--sv-accent);
  border: 1px solid var(--sv-divider);
  display: flex;
  align-items: center;
  justify-content: center;
}

.f-profile-name { font-size: 18px; font-weight: 700; }

.f-profile-desc { font-size: 12px; opacity: .92; margin-top: 5px; }

/* ---------- 我的页：数据统计 ---------- */
.f-stat-row { display: flex; gap: 10px; margin-bottom: 12px; }

.f-stat-cell {
  flex: 1;
  background: var(--sv-card);
  border: 1px solid var(--sv-card-border);
  border-top: 3px solid var(--sv-accent);
  border-radius: 12px;
  box-shadow: var(--sv-shadow);
  padding: 12px 0;
  text-align: center;
}

.f-stat-cell:nth-child(1) { border-top-color: var(--sv-accent); }

.f-stat-cell:nth-child(2) { border-top-color: var(--sv-text-sub); }

.f-stat-cell:nth-child(3) { border-top-color: var(--sv-success); }

.f-stat-num { font-size: 20px; font-weight: 700; color: var(--sv-accent); }

.f-stat-label { font-size: 12px; color: var(--sv-text-sub); margin-top: 3px; }

/* 统计卡紧凑版（管理端 游客/用户访问统计页用，不影响填写端我的页） */
.f-stat-row.f-stat-sm { gap: 8px; margin-bottom: 10px; }

.f-stat-row.f-stat-sm .f-stat-cell { padding: 6px 0; border-top-width: 2px; border-radius: 10px; }

.f-stat-row.f-stat-sm .f-stat-num { font-size: 16px; }

.f-stat-row.f-stat-sm .f-stat-label { font-size: 11px; margin-top: 1px; }

/* ---------- 我的页：渐变大按钮 ---------- */
.f-cta-btn {
  width: 100%;
  height: 48px;
  border: none;
  border-radius: 24px;
  background: linear-gradient(135deg, var(--sv-accent-strong), var(--sv-accent));
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 4px 12px var(--sv-btn-shadow);
  margin-bottom: 12px;
}

.f-cta-btn:active { transform: scale(.98); }

/* ---------- 我的页：菜单列表 ---------- */
.f-cell-group {
  background: var(--sv-card);
  border: 1px solid var(--sv-card-border);
  border-radius: 12px;
  box-shadow: var(--sv-shadow);
  overflow: hidden;
}

.f-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 16px;
  font-size: 15px;
  color: var(--sv-text);
  border-bottom: 1px solid var(--sv-divider);
  cursor: pointer;
}

.f-cell:last-child { border-bottom: none; }

.f-cell:active { background: var(--sv-hover); }

.f-cell .el-icon:first-child { color: var(--sv-accent); font-size: 18px; }

.f-cell.f-cell-danger .el-icon:first-child { color: var(--sv-danger); }

.f-cell-arrow { margin-left: auto; color: var(--sv-text-sub); font-size: 14px; }

.f-cell-note { margin-left: auto; margin-right: 2px; font-size: 12px; color: var(--sv-text-sub); }

.f-cell-note + .f-cell-arrow { margin-left: 0; }

/* 意见反馈弹窗说明：纯文本（无方框底色） */
.f-feedback-tip {
  word-break: break-all;
  font-size: 13px;
  color: var(--sv-text-sub);
  line-height: 1.6;
  margin-bottom: 12px;
}

/* ---------- 底部导航（主页/我的） ---------- */
.f-tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 95;
  display: flex;
  background: var(--sv-card);
  border-top: 1px solid var(--sv-divider);
  padding: 6px 0 calc(6px + env(safe-area-inset-bottom));
}

.f-tabbar button {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  border: none;
  background: none;
  color: var(--sv-text-sub);
  font-size: 11px;
  padding: 4px 0;
}

.f-tabbar button.active { color: var(--sv-accent); font-weight: 600; }

.f-body-tabbar { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }

/* ---------- 答题端：题目必填/选填标记 ---------- */
.f-required { color: var(--sv-danger); font-weight: 700; margin-right: 2px; }

.f-media-optional { font-size: 12px; color: var(--sv-text-sub); margin-bottom: 8px; }

.f-opt-letter { flex: none; font-size: 12px; color: var(--sv-text-sub); }

/* ---------- 答题页：整题一个卡片，选项为框内行 ---------- */
.m-q-card {
  background: var(--sv-card);
  border: 1px solid var(--sv-card-border);
  border-radius: 12px;
  box-shadow: var(--sv-shadow);
  padding: 14px;
  margin-bottom: 14px;
}

/* 题干：标签内联第一行，换行顶格与标签对齐 */
.m-q-card .m-q-title {
  font-size: 15px;
  font-weight: var(--sv-title-weight);
  line-height: 1.65;
  word-break: break-all;
}

.m-q-card .m-q-type { margin-right: 6px; vertical-align: 1px; }

.m-q-card .f-required { color: var(--sv-danger); font-weight: 700; margin-right: 2px; }

.m-q-card .m-q-body { margin-top: 10px; }

/* 选项行：无独立边框，整行可点 */
.m-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 6px 10px;
  border-radius: 8px;
  margin-bottom: 4px;
  color: var(--sv-opt-text);
  font-size: 14px;
  line-height: 1.6;
  word-break: break-all;
  cursor: pointer;
}

.m-opt .m-dot {
  flex: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--sv-text-sub);
  background: var(--sv-card);
}

.m-opt.radio .m-dot { border-radius: 50%; position: relative; }

.m-opt.checkbox .m-dot { border-radius: 4px; position: relative; }

.m-opt.checked {
  color: var(--sv-selected-text);
  background: var(--sv-selected-bg);
}

.m-opt.checked .m-dot { border-color: var(--sv-selected); }

.m-opt.radio.checked .m-dot::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--sv-selected);
}

.m-opt.checkbox.checked .m-dot::after {
  content: '✓';
  position: absolute;
  inset: 0;
  background: var(--sv-selected);
  color: #fff;
  border-radius: 3px;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- 答题端：底部操作栏（app/小程序风格） ---------- */
.f-body-pad { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }

.f-bottom-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: flex;
  gap: 10px;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--sv-fabbar-bottom), var(--sv-fabbar-top));
}

/* 答题页底部「保存进度」胶囊按钮（与提交按钮等高配套） */
.f-save-btn {
  flex: 1;
  height: 46px;
  border: 1px solid var(--sv-border);
  border-radius: 23px;
  background: var(--sv-card);
  color: var(--sv-text);
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.f-save-btn:active { transform: scale(.98); }

.f-save-btn:disabled { opacity: .5; }

/* ---------- 答题端：昵称登录浮层 ---------- */
/* 登录页（未登录时的独立页面，正常文档流；主页内容此时不渲染） */
.f-login-page {
  min-height: calc(100vh - 50px);
  padding: 16vh 16px 0; /* 顶部锚定：登录/注册切换导致卡片高度变化时，头部位置不动 */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.f-login-card {
  width: 86%;
  max-width: 360px;
  background: var(--sv-card);
  border: 1px solid var(--sv-card-border);
  border-radius: 14px;
  padding: 26px 22px;
}

.f-login-title { font-size: 18px; font-weight: 700; text-align: center; color: var(--sv-text); }

.f-login-sub { font-size: 13px; color: var(--sv-text-sub); text-align: center; margin: 8px 0 18px; line-height: 1.6; word-break: break-all; }

/* 登录/注册 分段切换卡片（滑动指示器） */
.f-seg {
  position: relative;
  display: flex;
  padding: 4px;
  margin-bottom: 16px;
  background: var(--sv-hover);
  border: 1px solid var(--sv-divider);
  border-radius: 10px;
}

.f-seg-thumb {
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(50% - 4px);
  height: calc(100% - 8px);
  border-radius: 8px;
  background: var(--sv-card);
  box-shadow: 0 1px 4px rgba(0, 21, 41, .18);
  transition: transform .25s ease;
}

.f-seg-thumb.right { transform: translateX(100%); }

.f-seg button {
  position: relative;
  z-index: 1;
  flex: 1;
  height: 36px;
  border: none;
  background: none;
  font-size: 14px;
  color: var(--sv-text-sub);
  transition: color .25s;
}

.f-seg button.active {
  color: var(--sv-accent);
  font-weight: 600;
}

.f-login-tip {
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--sv-text-sub);
  text-align: left;
  word-break: break-all;
}

.f-login-switch {
  margin-top: 14px;
  text-align: center;
  font-size: 13px;
  color: var(--sv-text-sub);
}

.f-login-switch span {
  color: var(--sv-accent);
  padding: 4px 6px;
}

/* ---------- 图片/视频题：预览框 ---------- */
.media-preview-box {
  position: relative;
  border: 1px solid var(--sv-border);
  border-radius: 10px;
  padding: 8px;
  background: var(--sv-card);
}

.media-preview-box .media-del {
  position: absolute;
  right: 6px;
  top: 6px;
  z-index: 3;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, .6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}

.media-preview-box .media-del:active { transform: scale(.9); }

.media-preview-box .media-img { width: 100%; height: 320px; display: block; }

.media-preview-box img {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: contain;
  border-radius: 6px;
}

.media-preview-box video {
  display: block;
  width: 100%;
  max-height: 360px;
  border-radius: 6px;
  background: #000;
}

/* 视频/语音上传后的封面块：点击前不加载媒体本体（封面为后端生成的压缩截图） */
/* 双选择器：预览框内(.media-preview-box)与答卷查看(.a-media)共用 */
.media-preview-box .media-cover,
.a-media .media-cover {
  position: relative;
  display: block;
  width: 100%;
  height: 260px;
  border-radius: 6px;
  overflow: hidden;
  background: #000;
  cursor: pointer;
  border: none;
  padding: 0;
}

.media-preview-box .media-cover img,
.a-media .media-cover img {
  width: 100%;
  height: 100%;
  max-height: none;
  border-radius: 0;
  object-fit: contain;
}

.media-preview-box .media-play,
.a-media .media-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(0, 0, 0, .25);
  font-size: 40px;
  text-shadow: 0 0 8px rgba(0, 0, 0, .6);
}

/* ---------- 语音题：录音组件 + 回放 ---------- */
.media-preview-box audio {
  display: block;
  width: 100%;
  border-radius: 6px;
}

.audio-rec { width: 100%; }

.audio-rec-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 48px;
  padding: 0 16px;
  font-size: 14px;
  border: 1px solid var(--sv-border);
  border-radius: 10px;
  background: var(--sv-card);
  color: var(--sv-text);
  cursor: pointer;
  transition: border-color .2s, color .2s;
}

.audio-rec-btn:hover:not(:disabled) { border-color: var(--sv-accent); color: var(--sv-accent); }

.audio-rec-btn:disabled { opacity: .55; cursor: not-allowed; }

.audio-rec-btn.--rec { flex: 1; border-style: dashed; border-color: var(--sv-accent); color: var(--sv-accent); }

.audio-rec-btn.--stop { border-color: var(--sv-danger); color: var(--sv-danger); }

.audio-rec-btn.--cancel { color: var(--sv-text-sub); }

.audio-rec-empty { display: flex; flex-wrap: wrap; gap: 10px; }

.audio-rec-empty .audio-rec-btn { flex: 1; min-width: 140px; }

.audio-rec-hint { width: 100%; font-size: 12px; color: var(--sv-text-sub); }

.audio-rec-rec { display: flex; align-items: center; gap: 10px; }

.audio-rec-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--sv-danger);
  animation: sv-audio-pulse 1s ease-in-out infinite;
}

.audio-rec-timer {
  font-family: Consolas, Monaco, 'Courier New', monospace;
  font-size: 15px;
  color: var(--sv-text-sub);
}

.audio-rec-row { display: block; width: 100%; box-sizing: border-box; }

@keyframes sv-audio-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .25; }
}

/* ---------- 空态 / 分页 ---------- */
.m-empty { text-align: center; color: var(--sv-text-sub); font-size: 14px; padding: 48px 0; }

/* 加载中撑起列表容器：空列表高度为 0 时 v-loading 转圈没有显示空间 */
.m-loading-h { min-height: 160px; }

.m-pager { display: flex; justify-content: center; margin-top: 14px; }

/* 弹窗适配小屏 */
.el-dialog { border-radius: 12px; }
.el-dialog .el-dialog__header { padding: 16px 16px 10px; }
.el-dialog .el-dialog__body { padding: 10px 16px; }
.el-dialog .el-form-item__label { font-size: 14px; }
.el-dialog .el-textarea__inner, .el-dialog .el-input__inner { font-size: 15px; }

/* ============================================================
   主题：暗红卧室（配色.txt 第一组）
   ============================================================ */
:root[data-theme="dark-red"] {
  --sv-selected-glow: rgba(192, 57, 43, .18);
  --sv-card-border: var(--sv-divider);
  --sv-bg: #0A0505;
  --sv-bg-image: radial-gradient(1100px 520px at 85% -10%, rgba(158, 26, 26, .22), transparent 60%),
                 radial-gradient(900px 460px at -10% 110%, rgba(158, 26, 26, .15), transparent 60%);
  --sv-text: #E8D0D0;
  --sv-text-sub: #A87878;
  --sv-accent: #C0392B;
  --sv-accent-strong: #9E1A1A;
  --sv-card: #0F0808;
  --sv-border: #3A1515;
  --sv-divider: #1A0A0A;
  --sv-hover: #221010;
  --sv-soft-bg: #1A0C0C;
  --sv-selected: #C0392B;
  --sv-selected-bg: #2A1414;
  --sv-selected-text: #E89080;
  --sv-btn: #A02020;
  --sv-btn-hover: #CC3333;
  --sv-btn-shadow: rgba(192, 57, 43, .35);
  --sv-header-bg: linear-gradient(135deg, #1A0808, #2A0C0C);
  --sv-header-text: #E8D0D0;
  --sv-header-shadow: 0 2px 14px rgba(158, 26, 26, .3);
  --sv-header-btn-bg: rgba(232, 208, 208, .08);
  --sv-badge-bg: #2A1414;
  --sv-badge-text: #C08080;
  --sv-badge-border: #3A1515;
  --sv-badge2-bg: #1A0808;
  --sv-badge2-text: #A87878;
  --sv-hover-border: #3A1515;
  --sv-tip-bg: #1A0808;
  --sv-tip-border: #3A1515;
  --sv-tip-text: #C08080;
  --sv-info: #A87878;
  --sv-title-weight: 700;
  --sv-opt-text: #D8B4B4;
  --sv-success: #D2AC6E;
  --sv-success-bg: #1F150A;
  --sv-success-border: #403218;
  --sv-danger: #E05A4A;
  --sv-danger-bg: #2A0E0A;
  --sv-danger-border: #5A201A;
  --sv-pop-bg: rgba(15, 8, 8, .95);
  --sv-fabbar-top: rgba(10, 5, 5, .72);
  --sv-fabbar-bottom: rgba(10, 5, 5, .98);
  --sv-shadow: 0 1px 5px rgba(0, 0, 0, .5);
  --sv-paper-lh: 1.8;
}

/* ============================================================
   主题：深紫深红（配色.txt 第二组）
   ============================================================ */
:root[data-theme="dark-purple"] {
  --sv-selected-glow: rgba(176, 42, 90, .18);
  --sv-card-border: var(--sv-divider);
  --sv-bg: #0A0508;
  --sv-bg-image: radial-gradient(1100px 520px at 85% -10%, rgba(138, 26, 74, .22), transparent 60%),
                 radial-gradient(900px 460px at -10% 110%, rgba(138, 26, 74, .15), transparent 60%);
  --sv-text: #E8D0D8;
  --sv-text-sub: #B39AA6;
  --sv-accent: #B02A5A;
  --sv-accent-strong: #8A1A4A;
  --sv-card: #100812;
  --sv-border: #3A102A;
  --sv-divider: #1A0A18;
  --sv-hover: #221020;
  --sv-soft-bg: #1A0E1A;
  --sv-selected: #B02A5A;
  --sv-selected-bg: #2A1428;
  --sv-selected-text: #E090B0;
  --sv-btn: #7A1A4A;
  --sv-btn-hover: #A83A6A;
  --sv-btn-shadow: rgba(176, 42, 90, .35);
  --sv-header-bg: linear-gradient(135deg, #140810, #200A1E);
  --sv-header-text: #E8D0D8;
  --sv-header-shadow: 0 2px 14px rgba(138, 26, 74, .3);
  --sv-header-btn-bg: rgba(232, 208, 216, .08);
  --sv-badge-bg: #2A1428;
  --sv-badge-text: #C090A8;
  --sv-badge-border: #3A102A;
  --sv-badge2-bg: #1A0818;
  --sv-badge2-text: #B39AA6;
  --sv-hover-border: #3A102A;
  --sv-tip-bg: #1A0818;
  --sv-tip-border: #3A102A;
  --sv-tip-text: #C090A8;
  --sv-info: #B39AA6;
  --sv-title-weight: 700;
  --sv-opt-text: #D8B8C4;
  --sv-success: #C08FB8;
  --sv-success-bg: #1A0E16;
  --sv-success-border: #3A2040;
  --sv-danger: #D06080;
  --sv-danger-bg: #26101C;
  --sv-danger-border: #4E2038;
  --sv-pop-bg: rgba(16, 8, 18, .95);
  --sv-fabbar-top: rgba(10, 5, 8, .72);
  --sv-fabbar-bottom: rgba(10, 5, 8, .98);
  --sv-shadow: 0 1px 5px rgba(0, 0, 0, .5);
  --sv-paper-lh: 1.8;
}

/* ============================================================
   主题：暗金欲望（配色.txt 第三组）
   ============================================================ */
:root[data-theme="dark-gold"] {
  --sv-selected-glow: rgba(192, 128, 64, .14);
  --sv-card-border: var(--sv-divider);
  --sv-bg: #0D0A06;
  --sv-bg-image: radial-gradient(1100px 520px at 85% -10%, rgba(160, 96, 42, .20), transparent 60%),
                 radial-gradient(900px 460px at -10% 110%, rgba(160, 96, 42, .14), transparent 60%);
  --sv-text: #E8DDD0;
  --sv-text-sub: #B3A48E;
  --sv-accent: #C08040;
  --sv-accent-strong: #A0602A;
  --sv-card: #12100A;
  --sv-border: #3A2A18;
  --sv-divider: #1A140A;
  --sv-hover: #221A0E;
  --sv-soft-bg: #1C160C;
  --sv-selected: #C08040;
  --sv-selected-bg: #2A2012;
  --sv-selected-text: #E8C090;
  --sv-btn: #8A5A2A;
  --sv-btn-hover: #B0824A;
  --sv-btn-shadow: rgba(192, 128, 64, .35);
  --sv-header-bg: linear-gradient(135deg, #14100A, #26200E);
  --sv-header-text: #E8DDD0;
  --sv-header-shadow: 0 2px 14px rgba(160, 96, 42, .28);
  --sv-header-btn-bg: rgba(232, 221, 208, .08);
  --sv-badge-bg: #2A2012;
  --sv-badge-text: #C0A070;
  --sv-badge-border: #3A2A18;
  --sv-badge2-bg: #1A140A;
  --sv-badge2-text: #B3A48E;
  --sv-hover-border: #3A2A18;
  --sv-tip-bg: #1A140A;
  --sv-tip-border: #3A2A18;
  --sv-tip-text: #C0A070;
  --sv-info: #B3A48E;
  --sv-title-weight: 700;
  --sv-opt-text: #DACBB4;
  --sv-success: #B3A96B;
  --sv-success-bg: #191809;
  --sv-success-border: #38351B;
  --sv-danger: #D0603A;
  --sv-danger-bg: #2A1208;
  --sv-danger-border: #5A2A16;
  --sv-pop-bg: rgba(18, 16, 10, .95);
  --sv-fabbar-top: rgba(13, 10, 6, .72);
  --sv-fabbar-bottom: rgba(13, 10, 6, .98);
  --sv-shadow: 0 1px 5px rgba(0, 0, 0, .5);
  --sv-paper-lh: 1.8;
}


/* ============================================================
   主题：灰粉欲望（配色.txt 第四组：皮肤感、温热的暧昧）
   ============================================================ */
:root[data-theme="dark-pink"] {
  --sv-selected-glow: rgba(176, 90, 106, .22);
  --sv-card-border: var(--sv-divider);
  --sv-bg: #120A0A;
  --sv-bg-image: radial-gradient(1100px 520px at 85% -10%, rgba(176, 90, 106, .18), transparent 60%),
                 radial-gradient(900px 460px at -10% 110%, rgba(176, 90, 106, .13), transparent 60%);
  --sv-text: #E8D6D6;
  --sv-text-sub: #A07880;
  --sv-accent: #B05A6A;
  --sv-accent-strong: #9A4A5A;
  --sv-card: #180E10;
  --sv-border: #3A1A22;
  --sv-divider: #1A0E12;
  --sv-hover: #241418;
  --sv-soft-bg: #1C1014;
  --sv-selected: #B05A6A;
  --sv-selected-bg: #2E1A20;
  --sv-selected-text: #E8A8B4;
  --sv-btn: #8A3A4A;
  --sv-btn-hover: #B05A66;
  --sv-btn-shadow: rgba(176, 90, 106, .35);
  --sv-header-bg: linear-gradient(135deg, #1A0E10, #2A141A);
  --sv-header-text: #E8D6D6;
  --sv-header-shadow: 0 2px 14px rgba(154, 74, 90, .3);
  --sv-header-btn-bg: rgba(232, 214, 214, .08);
  --sv-badge-bg: #2E1A20;
  --sv-badge-text: #C89098;
  --sv-badge-border: #3A1A22;
  --sv-badge2-bg: #241418;
  --sv-badge2-text: #A07880;
  --sv-hover-border: #3A1A22;
  --sv-tip-bg: #241418;
  --sv-tip-border: #3A1A22;
  --sv-tip-text: #C89098;
  --sv-danger: #E06070;
  --sv-danger-bg: #2A1016;
  --sv-danger-border: #5A2028;
  --sv-success: #C9A874;
  --sv-success-bg: #201809;
  --sv-success-border: #3E331A;
  --sv-info: #A88890;
  --sv-title-weight: 700;
  --sv-opt-text: #D8BCC0;
  --sv-pop-bg: rgba(24, 14, 16, .95);
  --sv-fabbar-top: rgba(18, 10, 10, .72);
  --sv-fabbar-bottom: rgba(18, 10, 10, .98);
  --sv-shadow: 0 1px 5px rgba(0, 0, 0, .5);
  --sv-paper-lh: 1.8;
}

:root[data-theme="dark-pink"] {
  --el-color-primary-light-3: var(--sv-btn-hover);
  --el-color-primary-light-5: #7A3A48;
  --el-color-primary-light-7: #4A222C;
  --el-color-primary-light-8: #30171E;
  --el-color-primary-light-9: #241218;
  --el-color-danger-light-3: #E87A88;
  --el-color-danger-light-5: #8A3A44;
  --el-color-danger-light-7: #481E26;
  --el-color-danger-light-8: #2A1218;
  --el-color-danger-light-9: #200D12;
  --el-color-danger-dark-2: #B44858;
  --el-color-success-light-3: #D6BC8C;
  --el-color-success-light-5: #7E683C;
  --el-color-success-light-7: #40341C;
  --el-color-success-light-8: #26200F;
  --el-color-success-light-9: #1C1710;
  --el-color-success-dark-2: #A0865C;
  --el-color-info-light-3: #B89CA4;
  --el-color-info-light-5: #6E585E;
  --el-color-info-light-7: #382C30;
  --el-color-info-light-8: #241C20;
  --el-color-info-light-9: #1A1416;
}

/* ============================================================
   暗色主题下接管 Element Plus 组件变量
   ============================================================ */
:root[data-theme="dark-red"],
:root[data-theme="dark-purple"],
:root[data-theme="dark-gold"],
:root[data-theme="dark-pink"] {
  --el-bg-color: var(--sv-card);
  --el-bg-color-overlay: var(--sv-card);
  --el-dialog-bg-color: var(--sv-card);
  --el-text-color-primary: var(--sv-text);
  --el-text-color-regular: var(--sv-text);
  --el-text-color-secondary: var(--sv-text-sub);
  --el-text-color-placeholder: var(--sv-text-sub);
  --el-text-color-disabled: var(--sv-text-sub);
  --el-border-color: var(--sv-border);
  --el-border-color-light: var(--sv-border);
  --el-border-color-lighter: var(--sv-divider);
  --el-fill-color: var(--sv-hover);
  --el-fill-color-light: var(--sv-hover);
  --el-fill-color-lighter: var(--sv-hover);
  --el-fill-color-blank: var(--sv-card);
  --el-fill-color-dark: var(--sv-hover);
  --el-mask-color: rgba(0, 0, 0, .72);
  --el-color-primary: var(--sv-btn);
  --el-color-primary-dark-2: var(--sv-accent-strong);
  --el-color-danger: var(--sv-danger);
  --el-color-danger-dark-2: var(--sv-danger-border);
  --el-color-success: var(--sv-success);
  --el-color-success-dark-2: var(--sv-success-border);
  --el-color-info: var(--sv-info);
  --el-box-shadow-light: 0 2px 8px rgba(0, 0, 0, .5);
  --el-disabled-bg-color: var(--sv-hover);
  --el-disabled-border-color: var(--sv-border);
  --el-disabled-text-color: var(--sv-text-sub);
}

/* 各主题 primary 渐变档位 */
:root[data-theme="dark-red"] {
  --el-color-primary-light-3: var(--sv-btn-hover);
  --el-color-primary-light-5: #6A2020;
  --el-color-primary-light-7: #4A1818;
  --el-color-primary-light-8: #2E1212;
  --el-color-primary-light-9: #261010;
  --el-color-danger-light-3: #E8705F;
  --el-color-danger-light-5: #8A2A1E;
  --el-color-danger-light-7: #4A1812;
  --el-color-danger-light-8: #2E100C;
  --el-color-danger-light-9: #220C09;
  --el-color-danger-dark-2: #B03020;
  --el-color-success-light-3: #DEBE8A;
  --el-color-success-light-5: #86643A;
  --el-color-success-light-7: #443418;
  --el-color-success-light-8: #28200E;
  --el-color-success-light-9: #1D1709;
  --el-color-success-dark-2: #A88756;
  --el-color-info-light-3: #B88888;
  --el-color-info-light-5: #6A4848;
  --el-color-info-light-7: #3A2828;
  --el-color-info-light-8: #261818;
  --el-color-info-light-9: #1E1212;
}

:root[data-theme="dark-purple"] {
  --el-color-primary-light-3: var(--sv-btn-hover);
  --el-color-primary-light-5: #7A3050;
  --el-color-primary-light-7: #4E2038;
  --el-color-primary-light-8: #2C1224;
  --el-color-primary-light-9: #221019;
  --el-color-danger-light-3: #DC7C98;
  --el-color-danger-light-5: #7A3050;
  --el-color-danger-light-7: #3A1828;
  --el-color-danger-light-8: #241018;
  --el-color-danger-light-9: #1A0C12;
  --el-color-danger-dark-2: #A83A6A;
  --el-color-success-light-3: #CFA6C8;
  --el-color-success-light-5: #7A5874;
  --el-color-success-light-7: #3E2C3A;
  --el-color-success-light-8: #251A22;
  --el-color-success-light-9: #1A1318;
  --el-color-success-dark-2: #997394;
  --el-color-info-light-3: #C0AAB4;
  --el-color-info-light-5: #6E5A64;
  --el-color-info-light-7: #3A2E34;
  --el-color-info-light-8: #262024;
  --el-color-info-light-9: #1C161A;
}

:root[data-theme="dark-gold"] {
  --el-color-primary-light-3: var(--sv-btn-hover);
  --el-color-primary-light-5: #8A6A3A;
  --el-color-primary-light-7: #5A4626;
  --el-color-primary-light-8: #342818;
  --el-color-primary-light-9: #282012;
  --el-color-danger-light-3: #DC7A58;
  --el-color-danger-light-5: #8A3A22;
  --el-color-danger-light-7: #482014;
  --el-color-danger-light-8: #2A140C;
  --el-color-danger-light-9: #1E0F09;
  --el-color-danger-dark-2: #A84E30;
  --el-color-success-light-3: #C2BA78;
  --el-color-success-light-5: #6E6838;
  --el-color-success-light-7: #383520;
  --el-color-success-light-8: #22200F;
  --el-color-success-light-9: #191708;
  --el-color-success-dark-2: #8C8648;
  --el-color-info-light-3: #C0B4A0;
  --el-color-info-light-5: #6E6454;
  --el-color-info-light-7: #3A3428;
  --el-color-info-light-8: #26221A;
  --el-color-info-light-9: #1C1A14;
}

/* ---------- 悬浮题卡导航（答题/预览页共享）：FAB + 题号九宫格 ---------- */
.sqn-fab {
  position: fixed;
  right: 14px;
  bottom: calc(86px + env(safe-area-inset-bottom)); /* 避开底部操作栏/悬浮栏 */
  z-index: 90;
  width: 44px; height: 44px;
  border: none; border-radius: 50%;
  background: var(--sv-btn); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--sv-btn-shadow, 0 4px 12px rgba(0, 0, 0, .25));
  cursor: pointer;
}
.sqn-fab:active { background: var(--sv-btn-hover); }

.sqn-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px;
  max-height: 56vh; overflow-y: auto;
}
.sqn-item {
  height: 36px;
  border: 1px solid var(--sv-border); border-radius: 6px;
  background: var(--sv-card); color: var(--sv-text);
  font-size: 13px; font-family: Consolas, Monaco, monospace;
  cursor: pointer;
}
.sqn-item.done { background: var(--sv-accent); border-color: var(--sv-accent); color: #fff; }

.sqn-legend {
  display: flex; align-items: center; gap: 14px;
  margin-top: 12px; font-size: 12px; color: var(--sv-text-sub);
}
.sqn-legend .sqn-dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 3px;
  margin-right: 4px; border: 1px solid var(--sv-border); vertical-align: -1px;
}
.sqn-legend .sqn-dot.done { background: var(--sv-accent); border-color: var(--sv-accent); }
.sqn-legend .sqn-total { margin-left: auto; }

/* 题号定位时避开吸顶头部 */
.m-q-card, .m-q { scroll-margin-top: 60px; }

/* 开场白可折叠：标题行可点 */
.m-banner-title.foldable { cursor: pointer; }

/* 关卡卡片开场白：默认单行折叠，点击展开 */
.m-item-tip.ell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.m-item-tip .tip-toggle { color: var(--sv-accent); font-size: 12px; white-space: nowrap; }

/* 游戏介绍配置加载中：骨架占位（避免默认文案闪换） */
.f-skl {
  height: 14px;
  border-radius: 7px;
  background: var(--sv-soft-bg);
  border: 1px solid var(--sv-divider);
  margin-bottom: 10px;
  animation: f-skl-pulse 1.2s ease-in-out infinite;
}
@keyframes f-skl-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}