/* 管理后台主题：更偏运营工具，保留小程序的暖色文化调性。 */
/* ==================== 主题变量 ==================== */
/* 所有常用颜色、阴影、圆角集中放在 :root，后续换主题时优先修改这里。 */
:root {
  --bg-page: #f3eadf;
  --bg-panel: rgba(255, 251, 246, 0.92);
  --bg-panel-strong: #fffaf4;
  --bg-soft: #f7e5d1;
  --bg-muted: rgba(255, 246, 236, 0.72);
  --line: rgba(108, 78, 55, 0.12);
  --line-strong: rgba(108, 78, 55, 0.2);
  --text-main: #2d2119;
  --text-sub: #7a6655;
  --brand: #b65e32;
  --brand-dark: #8f4521;
  --success: #2e7d56;
  --danger: #bd5146;
  --warning: #c77a26;
  --shadow: 0 22px 56px rgba(91, 60, 36, 0.09);
  --radius: 18px;
}

/* ==================== 基础重置 ==================== */
/* 统一盒模型，避免表单、按钮、卡片在不同浏览器中宽度计算不一致。 */
* {
  box-sizing: border-box;
}

/* 页面底色使用暖米色渐变，和小程序端保持同一套视觉气质。 */
body {
  margin: 0;
  min-height: 100vh;
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  color: var(--text-main);
  background:
    linear-gradient(135deg, rgba(182, 94, 50, 0.08), transparent 32%),
    linear-gradient(180deg, #f8f0e6 0%, var(--bg-page) 52%, #eee1d1 100%);
}

/* 表单控件继承页面字体，避免浏览器默认字体破坏整体观感。 */
button,
input,
textarea,
select {
  font: inherit;
}

/* 按钮文字不可选中，减少连续点击时出现选中文字的干扰。 */
button {
  user-select: none;
}

/* 通用隐藏类：页面模块切换、答案区域切换、登录态切换都复用它。 */
.hidden {
  display: none !important;
}

/* ==================== 登录页 ==================== */
/* 登录页居中展示，不依赖后台主框架布局。 */
.login-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px;
}

/* 登录卡片：控制登录页主体宽度和暖色卡片质感。 */
.login-card {
  width: min(460px, 100%);
  padding: 34px;
  background: var(--bg-panel-strong);
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 28px;
  box-shadow: var(--shadow);
}

/* 品牌方块：用于登录页和侧边栏，强化“档案”活动识别。 */
.brand-mark {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  color: #fff7ef;
  background: linear-gradient(135deg, #cf7a43, #8f4521);
  box-shadow: 0 14px 28px rgba(182, 94, 50, 0.2);
  font-size: 24px;
  font-weight: 800;
  margin-bottom: 20px;
}

/* 侧边栏中的品牌标识尺寸更小，避免挤压导航区域。 */
.brand-mark-small {
  width: 46px;
  height: 46px;
  border-radius: 15px;
  font-size: 19px;
  margin: 0;
}

/* 英文/辅助标签样式，例如 Archive Quiz、Activity Config。 */
.eyebrow {
  margin: 0 0 8px;
  color: var(--brand);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* 标题和段落的默认上边距归零，减少卡片内布局不可控间距。 */
h1,
h2,
h3,
p {
  margin-top: 0;
}

.login-card h1,
.topbar h1,
.sidebar h2,
.section-head h3 {
  margin-bottom: 0;
}

/* 弱化说明文字：用于提示、说明、导入格式提醒等。 */
.muted {
  color: var(--text-sub);
  line-height: 1.7;
}

/* 登录页默认账号提示。 */
.hint {
  margin: 14px 0 0;
  color: var(--text-sub);
  font-size: 13px;
}

/* ==================== 表单基础样式 ==================== */
/* field 是后台所有输入项的基础结构：标签在上，控件在下。 */
.field {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 16px;
}

/* 字段标题使用较小字号和浅色，突出输入框内容本身。 */
.field span {
  color: var(--text-sub);
  font-size: 13px;
  font-weight: 600;
}

/* 文本框、下拉框、文本域统一外观。 */
.field input,
.field textarea,
.field select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--text-main);
  outline: none;
  padding: 13px 14px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

/* 题干文本域默认给较高高度，便于录入长题目。 */
.field textarea {
  resize: vertical;
  min-height: 112px;
}

/* 聚焦态用品牌色浅描边，提示当前编辑位置。 */
.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: rgba(182, 94, 50, 0.46);
  box-shadow: 0 0 0 4px rgba(182, 94, 50, 0.08);
  background: #fff;
}

/* 总分是自动计算字段，因此使用只读强调样式。 */
.field input[readonly] {
  color: var(--brand-dark);
  font-weight: 800;
  background: rgba(247, 229, 209, 0.72);
}

/* checkbox 行：用于启用状态、多选答案等。 */
.check-field {
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  color: var(--text-sub);
  font-size: 14px;
}

/* 使用品牌色作为 checkbox 选中颜色，保持视觉一致。 */
.check-field input {
  width: 18px;
  height: 18px;
  accent-color: var(--brand);
}

/* ==================== 按钮系统 ==================== */
/* button 是所有按钮的基础类，具体颜色由 primary/soft/ghost/danger 扩展。 */
.button {
  min-height: 42px;
  padding: 0 18px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  color: var(--text-main);
  transition: transform 0.16s ease, box-shadow 0.16s ease, opacity 0.16s ease;
}

/* hover 轻微上浮，增强网页端可点击反馈。 */
.button:hover {
  transform: translateY(-1px);
}

/* 主要操作按钮：保存、登录、导出 XLSX 等。 */
.button-primary {
  color: #fff9f3;
  background: linear-gradient(135deg, #c8713c 0%, #9a4722 100%);
  box-shadow: 0 12px 24px rgba(182, 94, 50, 0.17);
}

/* 次级暖色按钮：批量启用、刷新数据等中性操作。 */
.button-soft {
  color: var(--brand-dark);
  background: var(--bg-soft);
}

/* 轻按钮：清空、取消、导出 CSV/XLS 等低风险操作。 */
.button-ghost {
  color: var(--brand-dark);
  background: rgba(255, 248, 240, 0.8);
  border: 1px solid rgba(182, 94, 50, 0.18);
}

/* 危险按钮：删除题目、删除题库、删除奖品。 */
.button-danger {
  color: #fff9f3;
  background: linear-gradient(135deg, #ca675b, #a94437);
}

/* 块级按钮：登录页和侧边栏底部按钮需要占满宽度。 */
.button-block {
  width: 100%;
}

/* ==================== 后台整体框架 ==================== */
/* 主框架：左侧固定宽度导航，右侧自适应内容区。 */
.admin-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 272px minmax(0, 1fr);
}

/* 侧边栏固定在视口内，适合管理端长列表操作。 */
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 26px;
  border-right: 1px solid var(--line);
  background: rgba(255, 250, 244, 0.76);
  backdrop-filter: blur(18px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* 侧边栏品牌行。 */
.sidebar-brand {
  display: flex;
  gap: 14px;
  align-items: center;
}

/* 导航按钮纵向排列，移动端会切换成两列网格。 */
.nav-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 34px;
}

/* 单个导航项基础样式。 */
.nav-item {
  width: 100%;
  border: none;
  background: transparent;
  color: var(--text-sub);
  padding: 12px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  text-align: left;
}

/* 导航图标小方块：用单字降低图标资源依赖。 */
.nav-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(182, 94, 50, 0.08);
  color: var(--brand-dark);
  font-size: 14px;
  font-weight: 800;
}

/* 当前模块高亮状态。 */
.nav-item-active {
  background: #f3dfca;
  color: var(--brand-dark);
  font-weight: 800;
}

/* 侧边栏底部操作区：刷新数据、退出登录。 */
.sidebar-foot {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 右侧内容区，min-width:0 避免网格子项撑破页面。 */
.content {
  min-width: 0;
  padding: 28px;
}

/* 顶部标题区：展示当前模块标题和辅助 eyebrow。 */
.topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}

/* 常见横向操作组：顶部按钮、表单按钮、卡片按钮统一复用。 */
.topbar-actions,
.inline-actions,
.form-actions,
.card-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* 默认隐藏所有模块面板。 */
.view {
  display: none;
}

/* 当前模块显示并带轻微入场动画。 */
.view-active {
  display: block;
  animation: panelEnter 0.28s ease both;
}

/* ==================== 概览与卡片布局 ==================== */
/* 统计卡片区默认 6 列，窄屏会降为 3 列或 1 列。 */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(128px, 1fr));
  gap: 14px;
}

/* 后台卡片的统一玻璃米色底、圆角和阴影。 */
.stat-card,
.panel,
.list-card,
.rule-card {
  background: var(--bg-panel);
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* 顶部统计卡片内边距。 */
.stat-card {
  padding: 18px;
}

/* 统计指标名称。 */
.stat-label {
  color: var(--text-sub);
  font-size: 13px;
}

/* 统计指标数字。 */
.stat-value {
  margin-top: 8px;
  font-size: 30px;
  font-weight: 800;
}

/* 通用内容面板内边距。 */
.panel {
  padding: 22px;
}

/* 页面内网格布局基础类。 */
.layout-grid {
  display: grid;
  gap: 18px;
  margin-top: 18px;
}

/* 两列布局：用于数据概览、选择题库。 */
.layout-grid-two {
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
}

/* 左侧表单 + 右侧列表布局：用于题目管理、奖品配置。 */
.layout-grid-side {
  grid-template-columns: minmax(320px, 0.42fr) minmax(0, 1fr);
  align-items: start;
}

/* 表单面板吸顶，方便管理员在右侧滚动列表时仍能编辑。 */
.sticky-panel {
  position: sticky;
  top: 28px;
}

/* 面板标题行：左侧标题，右侧可放按钮或徽标。 */
.section-head {
  margin-bottom: 16px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

/* 标题行允许换行，适合中奖名单导出按钮较多的区域。 */
.section-head-wrap {
  flex-wrap: wrap;
}

/* 列表容器纵向堆叠。 */
.stack-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 长列表限制高度并内部滚动，避免整页滚动过长。 */
.dense-list {
  max-height: calc(100vh - 190px);
  overflow: auto;
  padding-right: 4px;
}

/* 列表卡片：题目、奖品、题库、中奖记录复用。 */
.list-card {
  padding: 16px;
  box-shadow: none;
}

/* 列表卡片标题行。 */
.list-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

/* 列表卡片主标题。 */
.list-card h4 {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
}

/* 列表卡片说明文本。 */
.list-card p {
  margin: 8px 0 0;
  color: var(--text-sub);
  line-height: 1.7;
  font-size: 13px;
}

/* 旧规则卡片样式保留，后续如果恢复规则概览可直接复用。 */
.rule-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.rule-card {
  padding: 16px;
  box-shadow: none;
}

.rule-card span {
  display: block;
  color: var(--text-sub);
  font-size: 12px;
  margin-bottom: 8px;
}

.rule-card strong {
  font-size: 20px;
}

/* ==================== 答题分析圆图 ==================== */
/* 分析卡片：左侧圆图，右侧人数明细。 */
.analysis-card {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  min-height: 320px;
}

/* 圆图本体：背景由 app.js 写入 --chart-bg，实现动态及格/不及格比例。 */
.analysis-chart {
  width: 220px;
  height: 220px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--chart-bg);
  box-shadow: 0 18px 36px rgba(91, 60, 36, 0.1);
}

/* 圆图中心白色圆，用来显示参与人数。 */
.analysis-chart-core {
  width: 138px;
  height: 138px;
  display: grid;
  place-items: center;
  align-content: center;
  border-radius: 50%;
  background: #fffaf4;
  border: 1px solid rgba(255, 255, 255, 0.72);
}

/* 圆图中心小标题。 */
.analysis-chart-core span {
  color: var(--text-sub);
  font-size: 13px;
}

/* 圆图中心数字。 */
.analysis-chart-core strong {
  margin-top: 6px;
  font-size: 38px;
}

/* 圆图右侧图例列表。 */
.analysis-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* 单条图例：参与、及格、不及格。 */
.analysis-item {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 16px;
  border-radius: 16px;
  background: rgba(255, 248, 240, 0.76);
  border: 1px solid rgba(255, 255, 255, 0.52);
}

/* 图例标题文本。 */
.analysis-item span {
  color: var(--text-sub);
  font-size: 13px;
}

/* 图例数字文本。 */
.analysis-item strong {
  display: block;
  margin-top: 4px;
  font-size: 20px;
}

/* 图例色点基础样式。 */
.analysis-dot {
  width: 12px;
  height: 12px;
  flex: none;
  border-radius: 50%;
}

/* 参与人数色点。 */
.analysis-dot-total {
  background: var(--brand);
}

/* 及格人数色点。 */
.analysis-dot-pass {
  background: var(--success);
}

/* 不及格人数色点。 */
.analysis-dot-fail {
  background: var(--danger);
}

/* ==================== 徽标状态 ==================== */
/* badge 用于“启用/停用/当前题库/已中奖”等小状态。 */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  white-space: nowrap;
}

/* 成功态：启用、当前使用、已中奖。 */
.badge-success {
  color: var(--success);
  background: rgba(46, 125, 86, 0.12);
}

/* 危险态：停用等需要注意的状态。 */
.badge-danger {
  color: var(--danger);
  background: rgba(189, 81, 70, 0.12);
}

/* 柔和品牌态：普通提示或数量标签。 */
.badge-soft {
  color: var(--brand-dark);
  background: rgba(182, 94, 50, 0.12);
}

/* 警告态保留，后续可用于库存不足等状态。 */
.badge-warning {
  color: var(--warning);
  background: rgba(199, 122, 38, 0.14);
}

/* ==================== 表单布局与题目答案区域 ==================== */
/* 表单纵向堆叠容器。 */
.form-stack {
  display: flex;
  flex-direction: column;
}

/* 普通两列表单网格。 */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

/* 题目选项网格，保证 A-F 输入框顶部对齐。 */
.option-grid {
  align-items: start;
}

/* 多选题正确答案区域：
   使用两列网格，避免左侧表单较窄时 A-F 超出白色框体。 */
.multi-answer-grid {
  min-height: 46px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 10px 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.78);
  overflow: hidden;
}

/* 多选答案中的单个 A-F 选择块。 */
.check-field-compact {
  min-height: 34px;
  margin-top: 0;
  justify-content: center;
  padding: 0 6px;
  border-radius: 10px;
  background: rgba(255, 248, 240, 0.68);
  white-space: nowrap;
  min-width: 0;
}

/* 表单底部按钮组上间距。 */
.form-actions {
  margin-top: 18px;
}

/* 新建题库表单与当前题库卡片之间的距离。 */
.bank-form {
  margin-top: 22px;
}

/* 活动参数表单最大宽度，避免大屏幕上输入框过宽。 */
.config-form {
  max-width: 980px;
}

/* 活动参数使用四列，便于一次性浏览完整配置。 */
.config-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* 当前题库卡片与标题之间的距离。 */
.active-bank-card {
  margin-top: 6px;
}

/* 当前题库强调卡片。 */
.bank-active {
  padding: 22px;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(182, 94, 50, 0.13), rgba(255, 246, 236, 0.72)),
    rgba(255, 255, 255, 0.46);
  border: 1px solid rgba(182, 94, 50, 0.16);
}

/* 当前题库名称。 */
.bank-active h4 {
  margin: 12px 0 8px;
  font-size: 24px;
}

/* 当前题库说明。 */
.bank-active p {
  color: var(--text-sub);
  line-height: 1.7;
}

/* 当前题库题目数量。 */
.bank-active strong {
  display: inline-block;
  margin-top: 8px;
  color: var(--brand-dark);
  font-size: 20px;
}

/* 导入区域：虚线边框提示这里是文件导入入口。 */
.import-box {
  margin-top: 22px;
  padding: 18px;
  border-radius: 16px;
  background: rgba(255, 248, 240, 0.72);
  border: 1px dashed rgba(182, 94, 50, 0.24);
}

/* 文件选择按钮：隐藏原生 input，用 label 承担视觉按钮。 */
.file-button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border-radius: 12px;
  cursor: pointer;
  color: var(--brand-dark);
  border: 1px solid rgba(182, 94, 50, 0.18);
  background: rgba(255, 248, 240, 0.8);
}

/* 隐藏原生文件输入框。 */
.file-button input {
  display: none;
}

/* 块级文件按钮，用于选择题库模块的大导入入口。 */
.file-button-block {
  width: 100%;
  margin-top: 12px;
}

/* 导入格式提示文字。 */
.import-tip {
  margin-top: -6px;
  margin-bottom: 14px;
  font-size: 13px;
}

/* ==================== 批量题目管理 ==================== */
/* 批量操作工具栏：显示当前题库、已选数量和批量按钮。 */
.batch-toolbar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(255, 248, 240, 0.72);
  border: 1px solid rgba(182, 94, 50, 0.12);
}

/* 批量工具栏顶部摘要行。 */
.batch-summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--text-sub);
  font-size: 13px;
}

/* 当前题库名称强调。 */
.batch-summary strong {
  color: var(--brand-dark);
}

/* 批量按钮允许换行，适配较窄屏幕。 */
.batch-actions {
  flex-wrap: wrap;
}

/* 批量工具栏按钮和下拉框统一高度。 */
.batch-actions .button,
.batch-select {
  min-height: 38px;
}

/* 移动题库的目标题库选择框。 */
.batch-select {
  min-width: 180px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.9);
}

/* 题目卡片左侧预留勾选框空间。 */
.question-list-card {
  position: relative;
  padding-left: 58px;
}

/* 题目批量勾选入口，固定在卡片左侧。 */
.question-select-wrap {
  position: absolute;
  top: 22px;
  left: 20px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--text-sub);
  font-size: 12px;
}

/* 题目勾选框使用品牌色。 */
.question-select-wrap input {
  width: 18px;
  height: 18px;
  accent-color: var(--brand);
}

/* ==================== 表格与提示层 ==================== */
/* 中奖名单表格外层滚动容器，宽表在小屏幕上可横向滚动。 */
.table-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.34);
}

/* 表格最小宽度保证列内容不会过度压缩。 */
table {
  width: 100%;
  border-collapse: collapse;
  min-width: 840px;
}

/* 表格单元格基础样式。 */
th,
td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  line-height: 1.6;
}

/* 表头吸顶，中奖名单较长时仍能看到列名。 */
thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  color: var(--text-sub);
  background: #fff7ee;
  font-weight: 700;
}

/* 最后一行去掉底边线，视觉更干净。 */
tbody tr:last-child td {
  border-bottom: none;
}

/* 全局 toast：保存、导入、错误都通过它反馈。 */
.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 20;
  max-width: min(520px, calc(100vw - 36px));
  padding: 13px 18px;
  border-radius: 14px;
  color: #fffaf4;
  background: rgba(45, 33, 25, 0.92);
  box-shadow: 0 16px 38px rgba(45, 33, 25, 0.18);
}

/* ==================== 动画与响应式 ==================== */
/* 模块切换时的轻微入场动画。 */
@keyframes panelEnter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 中等屏幕：统计卡片降为三列，左右布局改为单列。 */
@media (max-width: 1200px) {
  .stats-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .layout-grid-two,
  .layout-grid-side {
    grid-template-columns: 1fr;
  }

  .analysis-card {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .sticky-panel {
    position: static;
  }
}

/* 小屏幕：侧边栏改为顶部区域，表单网格改为单列。 */
@media (max-width: 760px) {
  .admin-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    height: auto;
    gap: 18px;
    border-right: none;
    border-bottom: 1px solid var(--line);
  }

  .nav-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .content {
    padding: 18px;
  }

  .topbar {
    flex-direction: column;
  }

  .stats-grid,
  .form-grid,
  .config-grid,
  .rule-grid {
    grid-template-columns: 1fr;
  }

  .dense-list {
    max-height: none;
  }
}