/* 题再练 · VI 设计令牌与组件层（v3 可见版）
 * 加载顺序：style.css → vi.css。本文件做三件事：
 *   1) 重新赋值变量（兼容 style.css 既有 --primary/--bg 等名字）
 *   2) 组件皮肤（按钮/卡片/徽标/胶囊/表单/数据可视化）—— 视觉差异都在这一层
 *   3) 后台 admin.html 专用组件（表格/KPI/分区标题），该页只引本文件
 * 改色只改本文件顶部；三端对照见《题再练-VI规范v2-落地版.html》。
 *
 * v3 说明：v2 只把 #2563eb 换成 #2B6CB0、#f4f5f7 换成 #F7FAFC，
 * 两组色相与明度都太接近，肉眼看不出换肤——所以 v3 不再靠"改色值"，
 * 改的是**可感知的形**：顶部品牌线、按钮立体感、卡片圆角与投影、
 * 数字等宽、空状态图形、底栏浮起。这些变化与旧版一眼可辨。
 */

:root {
  /* ---- 品牌色板 ---- */
  --brand: #2B6CB0;          /* 信任蓝：导航/主按钮/链接 */
  --brand-dark: #1B4E86;     /* 深蓝：标题、按下态 */
  --brand-100: #D3E3F3;      /* 浅蓝：进度底、示意块 */
  --brand-soft: #E8F1FA;     /* 极浅蓝：徽标底、悬停 */
  --brand-line: #BFD6EC;     /* 描边：选中态边框 */

  --grow: #2F8F5B;           /* 成长绿：掌握/正确/进步（压深一档，白底更清楚） */
  --grow-soft: #E9F6EF;
  --grow-line: #BCE0CB;

  --accent: #C2620F;         /* 活力橙：待复习/提醒 */
  --accent-soft: #FCEFE2;

  --red: #D33B37;            /* 错题红：错题/红笔/危险 */
  --red-soft: #FCEBEA;
  --red-line: #F3C6C4;

  /* ---- 中性色 ---- */
  --ink: #16202E;            /* 正文 */
  --ink-2: #43536B;          /* 次级正文 */
  --muted: #6B7C93;          /* 辅助文字 */
  --muted-2: #9AA9BC;        /* 占位/禁用 */
  --line: #E2E9F2;           /* 分割线/描边 */
  --line-2: #EEF3F9;
  --bg: #EDF2F8;             /* 页面底（比 v2 更深一档，白卡才浮得起来） */
  --card: #FFFFFF;
  --surface-2: #F4F8FC;

  /* ---- 语义别名：兼容 style.css 里既有的变量名 ---- */
  --text: var(--ink);
  --primary: var(--brand);
  --primary-soft: var(--brand-soft);
  --ok: var(--grow);
  --ok-soft: var(--grow-soft);
  --warn: var(--accent);
  --danger: var(--red);

  /* ---- 形状 ---- */
  --radius: 14px;
  --radius-sm: 9px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --shadow-1: 0 1px 2px rgba(22, 50, 84, .06);
  --shadow-2: 0 8px 24px rgba(22, 50, 84, .10);

  /* ---- 字阶（H5 px；小程序 = ×2 rpx）---- */
  --fs-title: 20px;
  --fs-h2: 16px;
  --fs-body: 15px;
  --fs-sm: 13px;
  --fs-xs: 12px;
  --fs-2xs: 11px;

  /* ---- 间距八分栅格 ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;

  --tap: 44px;               /* 最小可点区域（拇指） */
  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  --font-num: "SF Mono", "DIN Alternate", Consolas, monospace;
}

/* ================= 基础排版 ================= */
html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--brand-100); color: var(--brand-dark); }

/* ================= 品牌头部 =================
 * 旧版是半透明灰底；新版改纯白 + 一条「蓝→绿」渐隐品牌线：
 * 蓝代表"识别/整理"，绿代表"掌握"，这条线就是产品叙事的缩影，
 * 也是全站最容易一眼看出换肤的地方。
 */
.topbar {
  background: #fff;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 10px rgba(22, 50, 84, .05);
}
.topbar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand) 62%, var(--grow) 100%);
  opacity: .95;
  pointer-events: none;
}
.topbar h1 {
  color: var(--brand-dark);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .2px;
}
.topbar h1::before {
  content: "";
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 3px;
  background: linear-gradient(135deg, var(--brand) 0%, var(--grow) 130%);
  margin-right: 8px;
  vertical-align: 1px;
}
.topbar .sub { color: var(--muted); }

/* ================= 按钮 ================= */
.btn {
  min-height: 40px;
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--card);
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(22, 50, 84, .04);
  transition: background .15s, border-color .15s, box-shadow .15s, transform .1s;
}
.btn:active { transform: scale(.985); }
.btn:focus-visible { outline: 2px solid var(--brand-line); outline-offset: 2px; }
.btn.primary {
  background: linear-gradient(180deg, #3079C4 0%, #245E9B 100%);
  border-color: #245E9B;
  color: #fff;
  box-shadow: 0 2px 8px rgba(35, 94, 156, .28);
}
.btn.primary:active { background: var(--brand-dark); }
.btn.ghost { background: transparent; color: var(--brand); border-color: var(--brand-line); box-shadow: none; }
.btn.ok {
  background: linear-gradient(180deg, #36A06A 0%, #2B8253 100%);
  border-color: #2B8253; color: #fff;
  box-shadow: 0 2px 8px rgba(47, 143, 91, .24);
}
.btn.danger { background: var(--card); color: var(--red); border-color: var(--red-line); }
.btn.small { min-height: 30px; padding: 5px 11px; font-size: var(--fs-sm); border-radius: var(--radius-sm); }
.btn:disabled { opacity: .45; box-shadow: none; transform: none; cursor: not-allowed; }

/* ================= 卡片 ================= */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: var(--sp-4);
}
.card.flag-red { border-left: 4px solid var(--red); }
.card.flag-grow { border-left: 4px solid var(--grow); }
.card.flag-brand { border-left: 4px solid var(--brand); }

/* 列表项：旧版靠虚线分隔，新版改成"悬浮卡片"，信息密度不变但更透气。
 * v4：首页列表重排（2026-10-23 反馈"贴边/行距挤/按钮小"）。**必须在
 * 本文件改**——这里最后加载，style.css 的同名规则会被下面两处压回去：
 *   .exam-item{padding:2px 0}  → 卡片内边距归零，文字贴边
 *   .btn.small{padding:5px 11px} → 列表「打开」按钮回到小号
 * 用 .exam-item .btn.small 三段选择器压过全局 .btn.small，顶栏/弹窗的
 * 小按钮不受影响。 */
.exam-item {
  padding: var(--sp-4) 18px;
  border-radius: var(--radius);
  gap: 14px;
}
.exam-item:active { background: var(--surface-2); }
.exam-item .t {
  font-weight: 600; color: var(--ink);
  font-size: 15.5px; line-height: 1.5; margin-bottom: 5px;
}
.exam-item .t .badge { margin-left: 8px; vertical-align: 1px; }
.exam-item .m { font-size: 13px; color: var(--muted); line-height: 1.55; }
.exam-item .btn.small {
  min-height: 40px; min-width: 78px; flex-shrink: 0;
  padding: 9px 18px; font-size: 14px; border-radius: 11px;
}
.p-item { border-bottom: 1px solid var(--line-2); }

/* 今日复习卡按钮放大（2026-10-23 反馈"开始闪卡/打印复习卷太小"）：
 * 同样只在此文件改——style.css 的 .tc-btns .btn 只有布局没字号，
 * 真正压小按钮的是本文件上方全局 .btn.small（30px 高 / 5px 11px）。
 * 用 .tc-btns 前缀三段选择器精准覆盖，弹窗/顶栏小按钮不受影响。 */
.tc-btns .btn.small {
  min-height: 46px;
  padding: 11px 16px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 12px;
}
/* 卡片底部整宽的"开启每日提醒通知"按钮顺带放大到舒适触控高度 */
#tc-notify.btn.small {
  min-height: 42px;
  padding: 10px 16px;
  font-size: 14px;
}

/* ================= 快速框题（v61） ================= */
.bx-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.bx-tab {
  padding: 4px 11px; border-radius: var(--radius-pill); font-size: 12.5px;
  border: 1px solid var(--line); background: var(--card); color: var(--muted);
}
.bx-tab.ok { background: var(--grow-soft); color: var(--grow); border-color: var(--grow-line); }
.bx-tab.cur { background: var(--brand); color: #fff; border-color: var(--brand); }
.bx-tab.ready { color: var(--brand); border-color: var(--brand-line); }

.bx-stage-wrap {
  max-height: 62vh; overflow: auto;
  border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: var(--surface-2);
}
.bx-stage { position: relative; }
.bx-stage img { width: 100%; display: block; }
.bx-box {
  position: absolute; box-sizing: border-box;
  border: 2px solid var(--brand); background: rgba(43, 108, 176, .08);
  touch-action: none; cursor: move;
}
.bx-box .ch {
  position: absolute; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 2px solid var(--brand); box-sizing: border-box;
}
.bx-box .ch.nw { left: -10px; top: -10px; cursor: nwse-resize; }
.bx-box .ch.ne { right: -10px; top: -10px; cursor: nesw-resize; }
.bx-box .ch.sw { left: -10px; bottom: -10px; cursor: nesw-resize; }
.bx-box .ch.se { right: -10px; bottom: -10px; cursor: nwse-resize; }
.bx-box .ch.n { left: 50%; top: -10px; margin-left: -9px; cursor: ns-resize; }
.bx-box .ch.s { left: 50%; bottom: -10px; margin-left: -9px; cursor: ns-resize; }
.bx-box .ch.w { left: -10px; top: 50%; margin-top: -9px; cursor: ew-resize; }
.bx-box .ch.e { right: -10px; top: 50%; margin-top: -9px; cursor: ew-resize; }
.bx-tag {
  position: absolute; left: 0; top: 0;
  background: var(--brand); color: #fff; font-size: 11px; line-height: 1.7;
  padding: 1px 8px; border-bottom-right-radius: 8px; white-space: nowrap;
  pointer-events: none;
}
.bx-x {
  position: absolute; right: 0; top: 0;
  background: var(--red); color: #fff; font-size: 11px; line-height: 1.7;
  padding: 1px 8px; border-bottom-left-radius: 8px; cursor: pointer;
}
.bx-bar { display: flex; gap: 8px; margin-top: 12px; }
.bx-bar .btn { flex: 1; min-height: 44px; }
.bx-bar .btn.primary { font-weight: 600; min-height: 46px; }

/* ================= 徽标 / 胶囊 / 分段 ================= */
.badge {
  display: inline-block;
  font-size: var(--fs-xs);
  line-height: 1.6;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  background: var(--brand-soft);
  color: var(--brand);
  border: 1px solid transparent;
}
.badge.grow { background: var(--grow-soft); color: var(--grow); border-color: var(--grow-line); }
.badge.warn { background: var(--accent-soft); color: var(--accent); border-color: #EDD3B6; }
.badge.red { background: var(--red-soft); color: var(--red); border-color: var(--red-line); }
.badge.muted { background: var(--line-2); color: var(--muted); }

.chip {
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  color: var(--ink-2);
  background: var(--card);
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(22, 50, 84, .04);
}
.chip.on {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  box-shadow: 0 2px 8px rgba(43, 108, 176, .30);
}
.kidbar #kid-add { color: var(--brand); border-color: var(--brand-line); background: var(--brand-soft); }

.seg { border-radius: var(--radius-sm); border-color: var(--line); background: var(--card); }
.seg-btn { background: var(--card); font-family: inherit; cursor: pointer; color: var(--muted); }
.seg-btn.on { background: var(--brand); color: #fff; }

/* ================= 题号 / 题图卡 ================= */
.qno {
  background: var(--brand-soft);
  color: var(--brand);
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-family: var(--font-num);
}
.qcard { border-radius: var(--radius); box-shadow: var(--shadow-1); }
.qcard.on { border-color: var(--brand-line); box-shadow: 0 0 0 3px var(--brand-soft); }
.qcard .toggle { border-radius: var(--radius-sm); cursor: pointer; }
.qcard.on .qhead .toggle { background: var(--grow-soft); color: var(--grow); border-color: var(--grow-line); }
.qimg { border-radius: var(--radius-sm); border-color: var(--line); }

.tag-red {
  color: var(--red);
  background: var(--red-soft);
  border-color: var(--red-line);
}

/* ================= 数据可视化（全 CSS 手画） ================= */
.stat-card { border-radius: var(--radius); box-shadow: var(--shadow-1); }
.stat-card b { color: var(--brand); font-family: var(--font-num); font-weight: 700; }
.k-bar, .rp-bar { background: var(--line-2); }
.k-bar i, .rp-bar i, .fbar-in {
  background: linear-gradient(90deg, var(--brand) 0%, #4E8FD0 100%);
}
.heat .hc { background: var(--line-2); }
.heat .hc.l1 { background: var(--brand-100); }
.heat .hc.l2 { background: #7FA8D2; }
.heat .hc.l3 { background: var(--brand); }
.trend .tb-b.done { background: var(--brand); }
.trend .tb-b.add { background: var(--brand-100); }
.lg.done { background: var(--brand); }
.lg.add { background: var(--brand-100); }

/* 今日复习卡：绿系渐变，暗示"该做的事"，与蓝系操作卡区分开 */
.today-card {
  border-color: var(--grow-line);
  background: linear-gradient(180deg, #F4FBF7 0%, #E9F6EF 100%);
}
.tc-streak { color: var(--accent); background: var(--accent-soft); }

/* 成绩单大数字 */
.rp-score .big { font-family: var(--font-num); color: var(--brand-dark); letter-spacing: -.5px; }
.rp-stat b { font-family: var(--font-num); }

/* ================= 输入 / 上传 ================= */
.field label { color: var(--ink-2); font-weight: 500; }
.field input, .field select, .field textarea {
  border-radius: 11px;
  border-color: var(--line);
  background: var(--card);
  color: var(--ink);
  font-size: var(--fs-body);
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(43, 108, 176, .14);
  outline: none;
}
.dropzone {
  border: 1.5px dashed var(--brand-line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, #F7FBFF 0%, var(--brand-soft) 100%);
  color: var(--muted);
  transition: border-color .15s, background .15s;
}
.dropzone:active { border-color: var(--brand); }
.dropzone b { color: var(--brand); font-weight: 600; }

/* ================= 步骤条 / 进度 ================= */
.steps div { height: 4px; border-radius: 999px; background: var(--line); }
.steps div.on { background: linear-gradient(90deg, var(--brand) 0%, #4E8FD0 100%); }

/* ================= 反馈 ================= */
.toast { background: rgba(22, 32, 46, .94); border-radius: 12px; box-shadow: var(--shadow-2); }
.spinner { border-color: rgba(255, 255, 255, .35); border-top-color: #fff; }
.empty { color: var(--muted); }
.empty::before {
  content: "";
  display: block;
  width: 46px; height: 46px;
  margin: 0 auto 12px;
  border: 2px dashed var(--brand-line);
  border-radius: 50%;
  background: var(--brand-soft);
}
.empty b { display: block; color: var(--ink-2); font-weight: 600; margin-bottom: 6px; }
.modal {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: 0 -8px 32px rgba(22, 32, 46, .18);
}
.modal h3 { color: var(--ink); font-weight: 600; }
.bottombar {
  border-top: 1px solid var(--line);
  box-shadow: 0 -4px 16px rgba(22, 50, 84, .07);
  background: rgba(255, 255, 255, .97);
}
.preview-frame, .page-shot, .crop-stage { border-radius: var(--radius-sm); }
.crop-box { border-color: var(--brand); background: rgba(43, 108, 176, .10); }
.crop-box .ch { background: var(--brand); }

/* 分区标题：左侧竖条 = 品牌节奏，替代旧版纯文字加粗 */
.sec-t {
  position: relative;
  padding-left: 10px;
  font-weight: 600;
  color: var(--ink);
}
.sec-t::before {
  content: "";
  position: absolute; left: 0; top: 50%;
  width: 3px; height: 15px;
  margin-top: -7.5px;
  border-radius: 2px;
  background: var(--brand);
}

/* ================= 后台 / 通用数据表 ================= */
.vi-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.vi-table th {
  text-align: left;
  font-weight: 500;
  color: var(--muted);
  background: var(--surface-2);
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.vi-table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--line-2);
  color: var(--ink);
  vertical-align: middle;
}
.vi-table tbody tr:hover td { background: #F9FCFF; }
.vi-num { font-family: var(--font-num); }

.vi-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-3); }
.vi-kpi .k {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: 14px 16px;
}
.vi-kpi .k .n { font-size: 24px; line-height: 1.2; color: var(--brand); font-family: var(--font-num); font-weight: 600; }
.vi-kpi .k .l { font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }
.vi-kpi .k.grow .n { color: var(--grow); }
.vi-kpi .k.accent .n { color: var(--accent); }
.vi-kpi .k.red .n { color: var(--red); }

.vi-section {
  position: relative;
  font-size: var(--fs-h2);
  font-weight: 600;
  margin: 24px 0 10px;
  padding-left: 10px;
  color: var(--ink);
}
.vi-section::before {
  content: "";
  position: absolute; left: 0; top: 50%;
  width: 3px; height: 16px;
  margin-top: -8px;
  border-radius: 2px;
  background: var(--brand);
}
.vi-hint { font-size: var(--fs-xs); color: var(--muted); }
.mono { font-family: var(--font-num); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ================= 品牌（v65 错题时时练） ================= */
/* 顶栏 logo：内嵌 data URI（static/logo.*.b64），加载完成由 JS 回填 src */
.brand-logo {
  width: 32px; height: 32px; border-radius: 8px;
  object-fit: cover; vertical-align: -10px; margin-right: 4px;
  background: #EEF3FB; box-shadow: 0 1px 3px rgba(26,32,44,.14);
}
/* 欢迎弹窗 / 登录弹窗的主视觉 logo */
.welcome-logo {
  width: 76px; height: 76px; border-radius: 18px; object-fit: cover;
  display: block; margin: 2px auto 10px;
  background: #EEF3FB; box-shadow: 0 2px 8px rgba(26,32,44,.16);
}