/* 考研 agent — 全站样式（浅色、安静、信息密度优先）
   设计语言「秋日书桌」：奶油纸面 + 深棕墨字 + 一条琥珀品牌带 + 蜜金点缀（2026-09-22 暖色改版）。
   约束：颜色一律走变量；语义色只表达状态；动效预算封顶（换色 180ms / 按压 100ms /
   抽屉 250ms / toast 250ms / 进度条 300ms / 弹层进场 200ms），番茄页零新增动效。
   换主色三处联动：style.css 变量、stats.js heatColor()、8 个 HTML 的 favicon/theme-color。 */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
:root {
  /* 背景层 */
  --bg: #f8f3ea;
  --surface: #ffffff;
  --surface-2: #fdfaf3;
  --surface-3: #f3ecdd;
  --line: #eae2d2;
  --line-strong: #d8cdb8;
  --overlay: rgba(46,34,18,.48);
  --hero-grad: linear-gradient(135deg, #e89a26 0%, #f2b13c 100%);
  --hero-chip-bg: rgba(255,255,255,.5);
  --hero-chip-line: rgba(122,82,13,.22);
  /* 文本层（禁纯黑，深棕墨系） */
  --text: #33261a;
  --text-2: #5c4d3c;
  --muted: #8a7a64;
  --faint: #b3a68f;
  /* 主色（fill=#d98e1f 图形面 / ink=#8f6115 浅底小字 / soft=#faf0d8 浅底；琥珀上永不放白字） */
  --primary: #d98e1f;
  --primary-weak: #faf0d8;
  --primary-600: #c9881c;
  --primary-700: #a3680f;
  --primary-border: #eac36c;
  --primary-ring: rgba(217,142,31,.26);
  --primary-ink: #8f6115;
  /* 语义三件套：fill 图形 / ink 小字 / soft 浅底（不可挪用；warn=陶土锈橙，与主色蜜金双通道分离） */
  --ok: #38935a;  --ok-ink: #2b7a4b;  --ok-soft: #e8f4e4;
  --warn: #c05a1f; --warn-ink: #94430f; --warn-soft: #fae9d0;
  --danger: #d64c3a; --danger-ink: #b23a2c; --danger-soft: #fbeae3;
  /* 字号阶梯（角色制，不新增中间档） */
  --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-15: 15px;
  --fs-17: 17px; --fs-20: 20px; --fs-28: 28px; --fs-40: 40px; --fs-44: 44px;
  /* 间距（4px 网格） */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;
  /* 圆角 */
  --r-tag: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 14px; --r-xl: 18px; --r-full: 999px;
  /* 阴影（暖棕基调，柔和不发色） */
  --shadow-1: 0 1px 2px rgba(74,56,32,.06), 0 2px 6px rgba(74,56,32,.05);
  --shadow-2: 0 4px 14px rgba(74,56,32,.11);
  --shadow-3: 0 16px 48px rgba(74,56,32,.19);
  --shadow-drawer: -8px 0 32px rgba(74,56,32,.15);
  --shadow-ring: 0 0 0 3px var(--primary-ring);
}
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto,
    "HarmonyOS Sans SC", "MiSans",
    "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC",
    "Noto Sans CJK SC", sans-serif;
  background: var(--bg); color: var(--text);
  font-size: var(--fs-15); line-height: 1.6; padding-bottom: 60px;
  color-scheme: light;
}
.container { max-width: 880px; margin: 0 auto; padding: 0 14px; }

/* 数字工具类：读数/日期/比例一律等宽 */
.num, .est, .bar-num, .bar-week, .kd-date, .metric .mv, .cal-cell .t, .cal-cell .d,
.progress-text, .summary-row { font-variant-numeric: tabular-nums; }

/* ---------- 顶栏（品牌带：全站唯一的色彩浓度区；悬浮圆角卡，参考图卡式头部） ---------- */
.hero {
  background: var(--hero-grad); color: var(--text); padding: var(--sp-6) 0 var(--sp-5);
  margin: 10px 10px 0; border-radius: 18px;
  box-shadow: 0 8px 24px rgba(217,142,31,.22);
}
.hero h1 { font-size: var(--fs-20); font-weight: 600; line-height: 1.3; }
.hero .sub { font-size: var(--fs-13); opacity: .72; margin-top: 2px; }
.count-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--sp-3); align-items: baseline; }
.count-big { display: flex; align-items: baseline; gap: 6px; font-size: var(--fs-14); font-weight: 600; }
.count-big .cb-label { opacity: .85; font-weight: 500; }
.count-big .cb-num {
  font-size: 48px; font-weight: 700; line-height: 1.05; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.count-big .cb-zero { font-size: 34px; font-weight: 700; line-height: 1.1; }
.count-chip {
  background: var(--hero-chip-bg); border: 1px solid var(--hero-chip-line);
  border-radius: var(--r-md); padding: 4px 12px; font-size: var(--fs-13);
}

/* ---------- 导航（桌面；≤560px 由底部 tab 栏接管） ---------- */
.nav { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.nav-inner { max-width: 880px; margin: 0 auto; padding: 0 14px; display: flex; gap: 4px; }
.nav a {
  color: var(--muted); text-decoration: none; padding: 8px 14px; font-size: var(--fs-14);
  border-radius: var(--r-full);
  transition: color .18s ease-out, background-color .18s ease-out;
}
.nav a:hover { color: var(--text-2); }
.nav a.active { color: var(--primary-ink); background: var(--primary-weak); font-weight: 600; }

/* ---------- 卡片与通用（无边框 + 柔投影，参考图的卡面语言） ---------- */
.card {
  background: var(--surface); border: none; border-radius: var(--r-lg); padding: var(--sp-4);
  margin-top: var(--sp-3); box-shadow: var(--shadow-1);
}
.card h2 { font-size: var(--fs-15); font-weight: 600; margin-bottom: 10px; display: flex; align-items: center; gap: var(--sp-2); }
.card h2 .hint { font-size: var(--fs-12); color: var(--muted); font-weight: 400; }
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip { background: var(--primary-weak); color: var(--primary-ink); font-size: var(--fs-12); border-radius: var(--r-full); padding: 3px 10px; }
.muted { color: var(--muted); font-size: var(--fs-13); }
.right { margin-left: auto; }

/* 空状态：图标 + 原文案，安静地在场（柔和圆底容器，对齐参考图的图标容器逻辑） */
.empty { padding: var(--sp-6) var(--sp-2); text-align: center; color: var(--text-2); font-size: var(--fs-13); }
.empty .empty-ico {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin: 0 auto var(--sp-2);
  border-radius: 50%; background: var(--primary-weak); color: var(--primary-ink);
}
.empty .empty-ico svg { display: block; width: 22px; height: 22px; }

/* ---------- 任务列表 ---------- */
.task-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 4px; border-bottom: 1px dashed var(--line); }
.task-item:last-child { border-bottom: none; }
.task-item input[type=checkbox] { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--primary); cursor: pointer; }
.task-item .title { flex: 1; word-break: break-all; }
.task-item.done .title { text-decoration: line-through; color: var(--muted); }

/* 科目标签：基类兜底自定义科目，各科覆写 */
.tag {
  font-size: var(--fs-11); border-radius: var(--r-tag); padding: 1px 6px; flex-shrink: 0; margin-top: 3px;
  background: #f0e6dc; color: #7d5f4a; white-space: nowrap; max-width: 12em; overflow: hidden; text-overflow: ellipsis;
}
.tag[data-s="政治"] { background: #f9e6e0; color: #a8402f; }
.tag[data-s="英语"] { background: #e2eaf6; color: #33619e; }
.tag[data-s="数学"] { background: #e0f0ec; color: #186f60; }
.tag[data-s="专业课"] { background: #f3ebfa; color: #7647bd; }
.tag[data-s="通用"] { background: var(--surface-3); color: #6b5e4b; }
.est { color: var(--muted); font-size: var(--fs-12); flex-shrink: 0; margin-top: 3px; }
.del {
  color: var(--faint); cursor: pointer; border: none; background: none; font-size: 16px;
  padding: 6px 8px; margin: -4px -4px; flex-shrink: 0; border-radius: var(--r-sm);
  transition: color .18s ease-out, transform .1s ease-out;
}
.del:hover { color: var(--danger); }
.del:active { transform: translateY(1px); }

/* ---------- 表单 ---------- */
.form-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: 10px; }
input[type=text], input[type=number], input[type=date], select, textarea {
  border: 1px solid var(--line); border-radius: var(--r-md); padding: 8px 10px; font-size: var(--fs-14);
  font-family: inherit; background: var(--surface); color: var(--text);
  transition: border-color .18s ease-out, box-shadow .18s ease-out;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary-600); box-shadow: var(--shadow-ring); }
textarea { width: 100%; min-height: 64px; resize: vertical; }
.btn {
  background: var(--primary); color: var(--text); border: none; border-radius: var(--r-full);
  padding: 8px 20px; font-size: var(--fs-14); cursor: pointer; font-family: inherit;
  transition: background-color .18s ease-out, transform .1s ease-out;
}
.btn:hover { background: var(--primary-600); }
.btn:active { background: var(--primary-700); transform: translateY(1px); }
.btn.ghost { background: var(--surface); color: var(--primary-ink); border: 1px solid var(--primary-600); }
.btn.ghost:hover { background: var(--primary-weak); }
.btn.ghost:active { background: var(--primary-weak); border-color: var(--primary-600); color: var(--primary-700); }
.btn.small { padding: 4px 12px; font-size: var(--fs-13); }
.btn:disabled, .preset-chip:disabled, .filter-chip:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.progress { height: 8px; background: var(--surface-3); border-radius: var(--r-full); overflow: hidden; margin: var(--sp-2) 0 2px; }
.progress > div { height: 100%; background: var(--ok); border-radius: var(--r-full); transition: width .3s; }

/* 键盘焦点环（不占布局） */
a:focus-visible, button:focus-visible { outline: none; box-shadow: var(--shadow-ring); }

/* ---------- 日历 ---------- */
.cal-head { display: flex; align-items: center; gap: 10px; margin-top: var(--sp-3); }
.cal-title { font-size: var(--fs-17); font-weight: 600; min-width: 110px; text-align: center; font-variant-numeric: tabular-nums; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 10px; }
.cal-dow { text-align: center; font-size: var(--fs-12); color: var(--muted); padding: 4px 0; }
.cal-cell {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); min-height: 64px;
  padding: 5px 6px; font-size: var(--fs-12); cursor: pointer; position: relative;
  transition: border-color .18s ease-out, background-color .18s ease-out, box-shadow .18s ease-out, transform .1s ease-out;
}
.cal-cell:hover { border-color: var(--primary-border); box-shadow: var(--shadow-1); }
.cal-cell:active { transform: translateY(1px); }
.cal-cell.blank { background: transparent; border-color: transparent; cursor: default; box-shadow: none; }
.cal-cell.blank:hover, .cal-cell.blank:active { border-color: transparent; box-shadow: none; transform: none; }
.cal-cell.today { border: 2px solid var(--primary-600); background: #fdf3dc; }
.cal-cell .d { font-weight: 700; font-size: 13px; }
.cal-cell .t { color: var(--muted); font-size: var(--fs-11); }
.cal-cell .k { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 3px; }
.k.exam { background: var(--danger); } .k.deadline { background: var(--warn); } .k.node { background: var(--primary); }
.cal-cell .done-flag { position: absolute; right: 6px; top: 5px; color: var(--ok); font-weight: 700; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: var(--fs-12); color: var(--muted); margin-top: 10px; }

/* ---------- 规划时间轴 ---------- */
.phase { border-left: 3px solid var(--line); margin-left: 8px; padding: 2px 0 18px 16px; position: relative; }
.phase::before { content: ""; position: absolute; left: -8px; top: 6px; width: 13px; height: 13px; border-radius: 50%; background: var(--surface); border: 3px solid var(--line); }
.phase.current { border-left-color: var(--primary-600); }
.phase.current::before { border-color: var(--primary-600); background: var(--primary); }
.phase.past { border-left-color: #cfe5cd; }
.phase.past::before { border-color: var(--ok); }
.phase h3 { font-size: var(--fs-15); font-weight: 600; display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.phase .range { font-size: var(--fs-12); color: var(--muted); font-variant-numeric: tabular-nums; }
.phase p { font-size: var(--fs-13); color: var(--text-2); margin-top: 4px; }
.badge { font-size: var(--fs-11); border-radius: var(--r-tag); padding: 1px 6px; }
.badge.est { background: var(--warn-soft); color: var(--warn-ink); }
.badge.official { background: var(--ok-soft); color: var(--ok-ink); }
.badge.now { background: var(--primary); color: var(--text); }
.kd-list { margin-top: 6px; }
.kd-item { display: flex; gap: var(--sp-2); padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: var(--fs-13); align-items: baseline; flex-wrap: wrap; }
.kd-item:last-child { border-bottom: none; }
.kd-date { font-weight: 600; flex-shrink: 0; }
.kd-item.past .kd-title { color: var(--muted); text-decoration: line-through; }

/* ---------- 表单条目（向导内的问题块） ---------- */
.q-item { margin-top: 14px; }
.q-item label { display: block; font-size: var(--fs-14); font-weight: 600; margin-bottom: 5px; }
.q-item .tip { font-size: var(--fs-12); color: var(--muted); margin-bottom: 6px; }
.q-item input, .q-item select, .q-item textarea { width: 100%; }

/* ---------- 四步向导 ---------- */
.steps { display: flex; gap: 6px; margin-top: var(--sp-4); }
.step-dot {
  flex: 1; text-align: center; font-size: var(--fs-12); padding: 8px 4px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line); color: var(--muted);
  transition: background-color .18s ease-out, color .18s ease-out, border-color .18s ease-out;
}
.step-dot.on { background: var(--primary); color: var(--text); border-color: var(--primary); font-weight: 700; }
.step-dot.done { background: var(--primary-weak); color: var(--primary-ink); }
.step-dot.done::after { content: " ✓"; }
.wizard-sec { display: none; }
.summary-row { display: flex; gap: var(--sp-2); padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: var(--fs-13); }

/* ---------- 院校查证卡 ---------- */
.lookup-card { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 10px 12px; margin: var(--sp-2) 0; }
.lookup-card h4 { font-size: var(--fs-13); margin-bottom: 6px; display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.lk-btns { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.lk-btns a {
  font-size: var(--fs-12); text-decoration: none; border: 1px solid var(--primary-600); color: var(--primary-ink);
  border-radius: var(--r-sm); padding: 3px 10px; background: var(--surface);
  transition: background-color .18s ease-out, transform .1s ease-out;
}
.lk-btns a:hover { background: var(--primary-weak); }
.lk-btns a:active { transform: translateY(1px); }
.lk-results { margin-top: 6px; }
.lk-res { display: block; padding: 6px 4px; border-bottom: 1px dashed var(--line); font-size: var(--fs-13); color: var(--text); text-decoration: none; border-radius: var(--r-sm); }
.lk-res:hover { background: var(--surface-2); }
.lk-res .t { font-weight: 600; }
.lk-res .s { color: var(--muted); font-size: var(--fs-12); display: block; }
.lk-status { font-size: var(--fs-12); color: var(--muted); margin: 4px 0; }
.lk-status.warn { color: var(--warn-ink); font-weight: 600; }
.lk-reg { display: flex; gap: 6px; margin: 6px 0 2px; }
.lk-reg input { flex: 1; min-width: 0; font-size: var(--fs-12); padding: 5px 8px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }

/* ---------- 统计页 ---------- */
.metric-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: var(--sp-3); }
.metric { background: var(--surface); border: none; border-radius: var(--r-lg); padding: 14px; text-align: center; box-shadow: var(--shadow-1); }
.metric .mv { font-size: var(--fs-28); font-weight: 700; color: var(--primary-ink); line-height: 1.1; letter-spacing: -0.01em; }
.metric .ml { font-size: var(--fs-13); margin-top: 2px; color: var(--text-2); }
.heat-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; }
.heat-cell { aspect-ratio: 1; border-radius: var(--r-sm); font-size: var(--fs-11); color: var(--text-2); display: flex; align-items: center; justify-content: center; }
.heat-cell.hot { color: var(--text); font-weight: 600; }
.bar-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.bar-week { width: 70px; flex-shrink: 0; font-size: var(--fs-12); }
.bar-track { flex: 1; height: 14px; background: var(--surface-3); border-radius: var(--r-full); position: relative; overflow: hidden; }
.bar-fill { height: 100%; background: var(--primary); border-radius: var(--r-full); }
.bar-fill.gray { background: var(--line-strong); }
.bar-fill.over { position: absolute; left: 0; top: 0; background: var(--ok); opacity: .85; }
.bar-num { flex-shrink: 0; font-size: var(--fs-12); width: 110px; text-align: right; }

/* ---------- 轻提示 ---------- */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--text); color: #fff; font-size: var(--fs-13); border-radius: var(--r-md);
  padding: 10px 18px; box-shadow: var(--shadow-2);
  opacity: 0; transition: opacity .25s; pointer-events: none; z-index: 99;
}
.toast.show { opacity: .95; }

/* ---------- 移动端底部 tab 栏（common.js 注入；≤560px 显示） ---------- */
.tabbar { display: none; }
.tb-panel { display: none; }
.tb-panel.open { display: block; }

/* ---------- 按钮行（错题录入 / 教材上传共用） ---------- */
.pomo-btns { display: flex; gap: var(--sp-2); margin-top: 12px; flex-wrap: wrap; }

/* ---------- 错题本 ---------- */
.m-form label { display: block; font-size: var(--fs-13); font-weight: 600; margin: 10px 0 4px; }
.m-form textarea { min-height: 90px; }
.m-photo { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.m-photo img { max-width: 220px; max-height: 220px; border-radius: var(--r-lg); border: 1px solid var(--line); }
.m-upload {
  border: 2px dashed var(--line-strong); border-radius: var(--r-lg); min-height: 96px;
  padding: 18px 22px; text-align: center; color: var(--muted); font-size: var(--fs-13);
  cursor: pointer; background: var(--surface-2); flex: 1; min-width: 200px;
  transition: border-color .18s ease-out, background-color .18s ease-out, color .18s ease-out;
}
.m-upload-ico { display: flex; align-items: center; justify-content: center; margin-bottom: 6px; }
.m-upload-ico svg { display: block; width: 26px; height: 26px; }
.m-upload:hover { border-color: var(--primary-600); background: var(--surface); color: var(--primary-ink); }
.m-recognizing { color: var(--primary-ink); font-size: var(--fs-13); margin-top: var(--sp-2); }
.m-notes { background: var(--warn-soft); border: 1px solid #f0d9bd; color: var(--warn-ink); font-size: var(--fs-12); border-radius: var(--r-md); padding: 7px 10px; margin-top: var(--sp-2); }
.m-item { display: flex; gap: 12px; padding: 12px 4px; border-bottom: 1px dashed var(--line); cursor: pointer; align-items: flex-start; border-radius: var(--r-sm); }
.m-item:hover { background: var(--surface-2); }
.m-item:last-child { border-bottom: none; }
.m-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: var(--r-md); border: 1px solid var(--line); flex-shrink: 0; background: var(--surface-3); }
.m-item .m-q { font-size: var(--fs-14); line-height: 1.5; word-break: break-all; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.m-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 5px; align-items: center; }
.badge.mastered { background: var(--ok-soft); color: var(--ok-ink); }
.badge.unmastered { background: var(--danger-soft); color: var(--danger-ink); }
.kchip { background: var(--primary-weak); color: var(--primary-ink); font-size: var(--fs-11); border-radius: var(--r-full); padding: 1px 8px; }
.filter-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.filter-chip {
  border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-full); padding: 4px 14px;
  font-size: var(--fs-13); cursor: pointer; color: var(--muted); font-family: inherit;
  transition: border-color .18s ease-out, color .18s ease-out, background-color .18s ease-out, transform .1s ease-out;
}
.filter-chip.on { border-color: var(--primary-600); color: var(--primary-ink); background: var(--primary-weak); font-weight: 600; }
.filter-chip:active { transform: translateY(1px); }
.overlay { position: fixed; inset: 0; background: var(--overlay); z-index: 60; display: none; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 40px 14px; }
.overlay.open { display: flex; animation: overlay-in .2s ease-out; }
.sheet { background: var(--surface); border-radius: var(--r-xl); max-width: 720px; width: 100%; padding: var(--sp-5); box-shadow: var(--shadow-3); animation: sheet-in .2s ease-out; }
.sheet h3 { font-size: var(--fs-17); margin-bottom: var(--sp-2); display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.sheet .close-x { margin-left: auto; border: none; background: none; font-size: 24px; color: var(--muted); cursor: pointer; line-height: 1; padding: 4px 8px; margin-right: -4px; border-radius: var(--r-sm); }
.sheet .close-x:hover { color: var(--text-2); }
.m-detail img { max-width: 100%; max-height: 320px; border-radius: var(--r-lg); border: 1px solid var(--line); margin-top: 10px; }
.m-detail .blk { margin-top: 10px; }
.m-detail .blk b { font-size: var(--fs-13); color: var(--muted); display: block; margin-bottom: 3px; }
.m-detail .blk .val { font-size: var(--fs-14); line-height: 1.6; word-break: break-all; white-space: pre-wrap; }
.sheet-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); flex-wrap: wrap; }
@keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheet-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- 细滚动条 ---------- */
.chat-msgs::-webkit-scrollbar, .overlay::-webkit-scrollbar { width: 6px; }
.chat-msgs::-webkit-scrollbar-thumb, .overlay::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: var(--r-full); }
.chat-msgs::-webkit-scrollbar-track, .overlay::-webkit-scrollbar-track { background: transparent; }

/* ---------- ≤560px：底部 tab 栏接管导航 ---------- */
@media (max-width: 560px) {
  body { padding-bottom: 100px; }
  .nav { display: none; }
  .count-big .cb-num { font-size: 36px; }
  .count-big .cb-zero { font-size: 26px; }
  .cal-cell { min-height: 52px; padding: 3px 4px; }
  /* 底部 tab 栏：深咖浮动胶囊 + 中央凸起主按钮（参考图导航的结构语言） */
  .tabbar {
    display: flex; position: fixed; left: 10px; right: 10px;
    bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 50;
    background: #2b2115; border-radius: 24px;
    box-shadow: 0 10px 28px rgba(46,34,18,.32);
    padding: 6px 8px;
  }
  .tabbar a, .tabbar .tb-more {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    font-size: var(--fs-11); color: #bda98a; text-decoration: none; padding: 5px 0; min-height: 52px;
    border: none; background: none; font-family: inherit; cursor: pointer;
  }
  .tabbar .tb-ico { width: 22px; height: 22px; }
  .tabbar .tb-ico svg { display: block; width: 100%; height: 100%; }
  .tabbar a.active { color: #f2b03c; font-weight: 600; }
  /* 中央凸起主按钮：琥珀圆钮向上出血，外圈深咖描边做出"从胶囊里长出来"的缺口感 */
  .tabbar a.tb-raise .tb-ico {
    width: 40px; height: 40px; margin-top: -22px;
    border-radius: 50%; background: var(--primary); color: var(--text);
    box-shadow: 0 5px 14px rgba(217,142,31,.45), 0 0 0 3px #2b2115;
    display: flex; align-items: center; justify-content: center;
  }
  .tabbar a.tb-raise .tb-ico svg { width: 20px; height: 20px; }
  .tb-panel {
    position: fixed; right: 8px; bottom: 92px; z-index: 51;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
    box-shadow: var(--shadow-3); padding: 6px; min-width: 128px;
  }
  .tb-panel a { display: block; padding: 10px 16px; font-size: var(--fs-14); color: var(--text); text-decoration: none; border-radius: var(--r-md); }
  .tb-panel a svg { vertical-align: -3px; margin-right: 6px; }
  .tb-panel a:hover { background: var(--surface-2); }
  .tb-panel a.active { color: var(--primary-ink); font-weight: 600; }
  .toast { bottom: 96px; }
  /* iOS 聚焦防放大 */
  input[type=text], input[type=number], input[type=date], select, textarea { font-size: 16px; }
  .nav-inner { flex-wrap: wrap; }
  .nav a { padding: 9px 10px; font-size: var(--fs-13); }
  .pomo-time { font-size: 38px; }
  .btn { min-height: 44px; }
}

/* ---------- 390px：最后一档收紧 ---------- */
@media (max-width: 390px) {
  .count-big .cb-num { font-size: 30px; }
  .heat-grid { gap: 4px; }
  .cal-cell { min-height: 48px; }
}

/* ---------- 动效弱化偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- 登录页（服务器部署后的门锁） ---------- */
.auth-body {
  min-height: 100vh; min-height: 100dvh; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(1100px 520px at 50% -12%, #f9e9c8 0%, rgba(249,233,200,0) 62%),
    var(--bg);
}
.auth-wrap { width: 100%; max-width: 400px; padding: var(--sp-5) 16px; }
.auth-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl);
  box-shadow: var(--shadow-3); padding: var(--sp-6) var(--sp-5) var(--sp-5);
}
.auth-brand { text-align: center; margin-bottom: var(--sp-5); }
.auth-logo {
  width: 54px; height: 54px; margin: 0 auto var(--sp-3); border-radius: 15px;
  background: var(--hero-grad); color: var(--text);
  font-size: 27px; font-weight: 700; line-height: 54px; text-align: center;
  box-shadow: 0 6px 16px rgba(217,142,31,.30);
}
.auth-brand h1 { font-size: var(--fs-20); font-weight: 600; letter-spacing: .01em; }
.auth-tagline { font-size: var(--fs-13); color: var(--muted); margin-top: 4px; min-height: 1.6em; }

.auth-form { display: block; }
/* 必须显式写：.auth-form 与 [hidden] 权重相同，样式表在 UA 样式之后会赢，
   不写这条的话 hidden 的三个面板会全部露出来叠在一起 */
.auth-form[hidden], .auth-msg[hidden], [hidden] { display: none !important; }
.auth-form label { display: block; font-size: var(--fs-13); font-weight: 600; color: var(--text-2); margin: var(--sp-3) 0 5px; }
.auth-form label:first-child { margin-top: 0; }
.auth-form input[type=password] {
  width: 100%; border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 11px 12px; font-size: var(--fs-15); font-family: inherit;
  background: var(--surface); color: var(--text); letter-spacing: .04em;
  transition: border-color .18s ease-out, box-shadow .18s ease-out;
}
.auth-form input[type=password]:focus { outline: none; border-color: var(--primary-600); box-shadow: var(--shadow-ring); }
.auth-submit { width: 100%; margin-top: var(--sp-4); min-height: 46px; font-size: var(--fs-15); font-weight: 600; }
.auth-tip { font-size: var(--fs-12); color: var(--muted); margin-top: var(--sp-3); line-height: 1.65; }
.auth-tip code, .auth-cmd {
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: var(--fs-12);
}
.auth-tip code { background: var(--surface-3); border-radius: var(--r-tag); padding: 1px 5px; color: var(--text-2); }
.auth-cmd {
  background: #2b2115; color: #f3ead9; border-radius: var(--r-md);
  padding: 10px 12px; margin-top: var(--sp-2); overflow-x: auto; white-space: pre;
}
.auth-note {
  border-radius: var(--r-md); padding: 10px 12px; font-size: var(--fs-13); line-height: 1.6;
  margin-bottom: var(--sp-3);
}
.auth-note.ok { background: var(--ok-soft); color: var(--ok-ink); }
.auth-note.warn { background: var(--warn-soft); color: var(--warn-ink); }
.auth-note strong { display: block; margin-bottom: 2px; }
.auth-msg {
  margin-top: var(--sp-4); padding: 9px 12px; border-radius: var(--r-md);
  font-size: var(--fs-13); line-height: 1.55; background: var(--surface-3); color: var(--text-2);
}
.auth-msg.warn { background: var(--danger-soft); color: var(--danger-ink); }
.auth-msg.ok { background: var(--ok-soft); color: var(--ok-ink); }
.auth-foot { text-align: center; font-size: var(--fs-12); color: var(--faint); margin-top: var(--sp-4); }

/* 登录页在窄屏上不跟全站一起留底部 tab 栏的空白 */
@media (max-width: 560px) {
  body.auth-body { padding-bottom: 0; }
  .auth-wrap { padding: var(--sp-4) 14px; }
  .auth-card { padding: var(--sp-5) var(--sp-4) var(--sp-4); }
  .auth-form input[type=password] { font-size: 16px; } /* iOS 聚焦防放大 */
}

/* ---------- 设置页：访问口令 ---------- */
.pw-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: 10px; }
.pw-row input { flex: 1 1 160px; min-width: 0; }
.pw-state { font-size: var(--fs-13); color: var(--text-2); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pw-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex-shrink: 0; }
.pw-dot.off { background: var(--warn); }
.sess-item {
  display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap;
  padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: var(--fs-13);
}
.sess-item:last-child { border-bottom: none; }
.sess-item .sess-when { color: var(--muted); font-size: var(--fs-12); font-variant-numeric: tabular-nums; }

/* ---------- 错题页 v2：选学科 + 概览卡 + 主行动（对齐设计稿 07） ---------- */
.hero h1 .hint { font-size: var(--fs-13); color: var(--muted); font-weight: 400; margin-left: 6px; }
.ov-card { margin-top: var(--sp-3); }
.ov-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ov-head b { font-size: 15px; }
.ov-mastered { font-size: var(--fs-12); color: var(--ok-ink); }
.ov-sub { font-size: var(--fs-13); color: var(--muted); margin-top: 4px; }
.ov-track { height: 6px; border-radius: var(--r-full); background: var(--surface-3); margin-top: 12px; overflow: hidden; }
.ov-fill { height: 100%; border-radius: var(--r-full); background: var(--primary); transition: width .3s ease-out; }
.m-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0; }
.m-big {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 18px 10px 14px; border: none; border-radius: 18px; cursor: pointer;
  background: var(--primary); color: var(--text); font-family: inherit;
  transition: transform .1s ease-out, filter .18s ease-out;
}
.m-big:hover { filter: brightness(1.05); }
.m-big:active { transform: translateY(1px); }
.m-big-ico { display: flex; align-items: center; justify-content: center; height: 28px; font-size: 18px; }
.m-big-ico svg { display: block; width: 24px; height: 24px; }
.m-big-label { font-size: 15px; font-weight: 600; }
.m-big-sub { font-size: var(--fs-12); opacity: .85; }
.m-ai {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 16px; border: none; border-radius: 18px; cursor: pointer; text-align: left;
  background: #2b2115; font-family: inherit; margin-bottom: var(--sp-3);
  transition: transform .1s ease-out, filter .18s ease-out;
}
.m-ai:hover { filter: brightness(1.12); }
.m-ai:active { transform: translateY(1px); }
.m-ai-ico {
  flex-shrink: 0; width: 48px; height: 48px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: #f2b03c; color: #2b2115; font-weight: 700; font-size: 17px;
}
.m-ai-txt { flex: 1; min-width: 0; color: #fff; }
.m-ai-txt b { display: block; font-size: 15px; }
.m-ai-txt small { display: block; font-size: var(--fs-12); color: #bda98a; margin-top: 3px; }
.m-ai-arrow { color: #f2b03c; font-size: 22px; }

/* ---------- 复习模式：全屏抽认卡（对齐设计稿 10） ---------- */
.rv {
  position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column;
  background:
    radial-gradient(1100px 520px at 50% -12%, #f9e9c8 0%, rgba(249,233,200,0) 62%),
    var(--bg);
}
.rv-top {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; background: var(--surface); border-bottom: 1px solid var(--line);
}
.rv-close {
  width: 32px; height: 32px; border: none; border-radius: var(--r-full); cursor: pointer;
  background: var(--surface-3); color: var(--text-2); font-size: 18px; line-height: 1; flex-shrink: 0;
}
.rv-close:hover { background: var(--line); }
.rv-title { flex: 1; font-weight: 600; font-size: var(--fs-15); }
.rv-progress { font-size: var(--fs-13); color: var(--muted); font-variant-numeric: tabular-nums; }
.rv-bar { height: 4px; background: var(--surface-3); }
.rv-bar-fill { height: 100%; background: var(--primary); transition: width .3s ease-out; }
.rv-body { flex: 1; overflow-y: auto; padding: 14px; -webkit-overflow-scrolling: touch; }
.rv-card {
  max-width: 640px; margin: 0 auto; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-2);
  padding: var(--sp-4);
}
.rv-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.rv-hot {
  font-size: var(--fs-12); font-weight: 600; padding: 2px 8px; border-radius: var(--r-tag);
  background: var(--danger-soft); color: var(--danger-ink);
}
.rv-q { font-size: var(--fs-15); line-height: 1.75; white-space: pre-wrap; word-break: break-word; }
.rv-img { max-width: 100%; border-radius: var(--r-md); margin-top: 10px; border: 1px solid var(--line); }
.rv-divider { height: 1px; background: var(--line); margin: 14px 0; }
.rv-reveal { width: 100%; margin-top: 16px; min-height: 46px; }
.rv-grade { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-top: 16px; }
.rv-btn {
  min-height: 48px; border: none; border-radius: var(--r-lg); cursor: pointer;
  font-family: inherit; font-size: var(--fs-15); font-weight: 600;
  transition: transform .1s ease-out, filter .18s ease-out;
}
.rv-btn:active { transform: translateY(1px); }
.rv-btn:hover { filter: brightness(1.05); }
.rv-btn.yes { background: var(--ok-soft); color: var(--ok-ink); }
.rv-btn.mid { background: var(--warn-soft); color: var(--warn-ink); }
.rv-btn.no { background: var(--danger-soft); color: var(--danger-ink); }
.rv-feedback {
  min-height: 1.4em; margin-top: 12px; font-size: var(--fs-13); color: var(--muted);
  opacity: 0; transition: opacity .25s;
}
.rv-feedback.show { opacity: 1; }
.rv-feedback.ok { color: var(--ok-ink); }
.rv-feedback.fuzzy { color: var(--warn-ink); }
.rv-feedback.wrong { color: var(--danger-ink); }
.rv-done { text-align: center; padding: 34px var(--sp-4); }
.rv-done-ico { font-size: 40px; margin-bottom: 8px; }
.rv-done-stats { margin-top: 8px; font-size: var(--fs-15); color: var(--text-2); }

/* 详情抽屉里的复习流水小条 */
.rv-log-i {
  display: inline-block; font-size: var(--fs-12); padding: 2px 8px; border-radius: var(--r-tag);
  background: var(--surface-3); color: var(--text-2); font-variant-numeric: tabular-nums;
}
.rv-log-i.ok { background: var(--ok-soft); color: var(--ok-ink); }
.rv-log-i.fuzzy { background: var(--warn-soft); color: var(--warn-ink); }
.rv-log-i.wrong { background: var(--danger-soft); color: var(--danger-ink); }

/* ---------- 一照多题：AI 草稿卡逐条确认（对齐设计稿 11） ---------- */
.draft-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--sp-3); margin-top: 12px;
}
.draft-card.off { opacity: .55; }
.draft-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.draft-check { display: flex; align-items: center; gap: 6px; font-size: var(--fs-13); font-weight: 600; color: var(--text-2); cursor: pointer; }
.draft-check input { accent-color: var(--primary); width: 16px; height: 16px; }
.draft-note {
  margin-top: 8px; font-size: var(--fs-12); color: var(--warn-ink);
  background: var(--warn-soft); border-radius: var(--r-sm); padding: 6px 8px; line-height: 1.6;
}

