/* 备考管家 · VI 令牌与基础组件 · 对应《系统总框架 v1.1》第 10 节 */
:root {
  --purple: #9B8EC4;        /* 主色：主按钮、当前 Tab、关键数字 */
  --purple-deep: #6B5B95;   /* 强调：标题、已完成 */
  --purple-light: #EDE8F5;  /* 浅底：背景、选中态 */
  --bg: #F6F3FB;
  --card: #FFFFFF;
  --line: #ECE8F4;
  --line-strong: #DDD7EC;
  --ink: #1C1A24;
  --ink-2: #3A3745;
  --muted: #6B6878;
  --muted-2: #8E8B99;
  --muted-3: #A8A5B3;
  --warn: #B8873A;          /* 唯一警示色：滞后 / 掉线深浅区分 */
  --warn-bg: #FBF3E6;
  --r-card: 16px; --r-btn: 12px; --r-input: 10px;
  --fs-big: 40px; --fs-title: 20px; --fs-body: 15px; --fs-aux: 13px;
  --font: "PingFang SC", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Microsoft YaHei", sans-serif;
  --nav-h: 84px; --side-w: 220px; --max-w: 720px;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: var(--fs-body); line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: var(--purple-deep); text-decoration: none; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 600; }
h1 { font-size: 28px; letter-spacing: -0.3px; }
h2 { font-size: var(--fs-title); }
h3 { font-size: var(--fs-body); }
.muted { color: var(--muted); } .muted-2 { color: var(--muted-2); } .aux { font-size: var(--fs-aux); }
.num-big { font-size: var(--fs-big); font-weight: 600; color: var(--purple-deep); line-height: 1; font-variant-numeric: tabular-nums; }
.num-mid { font-size: 22px; font-weight: 600; color: var(--purple-deep); font-variant-numeric: tabular-nums; }

/* 布局：移动端底部导航，桌面端左侧栏 */
.app { min-height: 100vh; display: flex; }
.side { display: none; }
.main { flex: 1; min-width: 0; padding: 60px 24px calc(var(--nav-h) + 24px) 24px; max-width: var(--max-w); margin: 0 auto; width: 100%; }
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; height: var(--nav-h); background: rgba(255,255,255,0.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 10px 8px 22px; z-index: 20; }
.tabbar a { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--muted-2); font-size: 11px; min-height: 44px; }
.tabbar a.on { color: var(--purple-deep); font-weight: 600; }
.tabbar svg { width: 24px; height: 24px; }
@media (min-width: 900px) {
  .tabbar { display: none; }
  .side { display: flex; flex-direction: column; gap: 4px; width: var(--side-w); flex: 0 0 var(--side-w); padding: 28px 16px; border-right: 1px solid var(--line); background: #FBFAFD; position: sticky; top: 0; height: 100vh; }
  .side .brand { padding: 4px 12px 20px; }
  .side .brand small { display: block; font-size: 11px; letter-spacing: 1.2px; color: var(--purple); font-weight: 600; }
  .side .brand b { font-size: 18px; color: var(--purple-deep); }
  .side a { height: 44px; border-radius: var(--r-btn); padding: 0 12px; display: flex; align-items: center; gap: 10px; color: var(--muted); }
  .side a.on { background: var(--purple-light); color: var(--purple-deep); font-weight: 600; }
  .side svg { width: 20px; height: 20px; }
  .side .spacer { flex: 1; }
  .main { padding: 40px 48px 48px; max-width: 1040px; margin: 0; flex: 1 1 640px; }
  .rail { display: flex; flex-direction: column; gap: 14px; width: 380px; flex: 0 0 380px; padding: 40px 48px 48px 0; position: sticky; top: 0; align-self: flex-start; }
  .rail:empty { display: none; }
}
@media (max-width: 1099px) { .rail { display: contents; } }

/* 组件 */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: 14px 16px; }
.glass { background: rgba(255,255,255,0.72); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid rgba(155,142,196,0.25); border-radius: var(--r-card); padding: 18px 20px; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.row { display: flex; align-items: center; gap: 12px; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.section-h { margin: 24px 0 10px; }
.btn { height: 48px; padding: 0 20px; border-radius: var(--r-btn); border: 0; background: var(--purple); color: #fff; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn.block { width: 100%; }
.btn.ghost { background: var(--card); color: var(--purple-deep); border: 1px solid var(--line); }
.btn.soft { background: var(--purple-light); color: var(--purple-deep); }
.btn.sm { height: 36px; padding: 0 14px; font-size: var(--fs-aux); border-radius: 10px; }
.btn:disabled { opacity: 0.5; cursor: default; }
.chip { height: 36px; padding: 0 16px; border-radius: 18px; border: 1px solid var(--line-strong); background: var(--card); color: var(--muted-2); font-size: 14px; cursor: pointer; white-space: nowrap; }
.chip.on { background: var(--purple-deep); color: #fff; border-color: var(--purple-deep); font-weight: 600; }
.chip.soon { color: var(--muted-3); }
.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.tag { font-size: 12px; color: var(--purple-deep); background: var(--purple-light); padding: 4px 10px; border-radius: 10px; }
.tag.warn { color: var(--warn); background: var(--warn-bg); }
.check { width: 22px; height: 22px; border-radius: 11px; border: 1.5px solid #C9C2E0; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: transparent; cursor: pointer; padding: 0; }
.check.on { background: var(--purple); border-color: var(--purple); }
.check svg { width: 12px; height: 12px; }
.task.done .t { color: var(--muted-2); text-decoration: line-through; }
.empty { color: var(--muted); padding: 24px 0; text-align: center; }
.empty .btn { margin-top: 12px; }

/* 表单（必填 3–5 项，其余折叠） */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: var(--fs-aux); color: var(--muted); }
.input, select.input, textarea.input { height: 44px; border: 1px solid var(--line-strong); border-radius: var(--r-input); padding: 0 12px; background: #fff; width: 100%; }
textarea.input { height: auto; min-height: 88px; padding: 10px 12px; resize: vertical; }
details.more summary { cursor: pointer; color: var(--purple); font-size: var(--fs-aux); list-style: none; padding: 6px 0; }
details.more summary::-webkit-details-marker { display: none; }
.qgrid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; }
.qgrid button { height: 36px; border-radius: 8px; border: 1px solid var(--line-strong); background: #fff; color: var(--muted); cursor: pointer; font-size: 13px; }
.qgrid button.on { background: var(--purple-deep); color: #fff; border-color: var(--purple-deep); }

/* 抽屉 / 弹层 */
.sheet-bg { position: fixed; inset: 0; background: rgba(28,26,36,0.35); z-index: 40; display: none; }
.sheet-bg.open { display: block; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; background: #fff; border-radius: 20px 20px 0 0; padding: 20px 24px calc(24px + env(safe-area-inset-bottom)); max-height: 88vh; overflow: auto; z-index: 41; transform: translateY(100%); transition: transform .22s ease; }
.sheet.open { transform: none; }
.sheet h2 { margin-bottom: 14px; }
@media (min-width: 900px) { .sheet { left: 50%; right: auto; bottom: auto; top: 50%; width: 560px; transform: translate(-50%, -50%) scale(.98); opacity: 0; border-radius: 20px; pointer-events: none; } .sheet.open { transform: translate(-50%, -50%); opacity: 1; pointer-events: auto; } }

/* 周历 */
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.week .d { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.week .d small { font-size: 11px; color: var(--muted-3); }
.week .d .cell { width: 100%; max-width: 44px; height: 48px; border-radius: 12px; background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; cursor: pointer; font-size: 13px; color: var(--muted); }
.week .d .cell b { font-size: 10px; color: var(--purple-deep); }
.week .d.today .cell { background: var(--purple); border-color: var(--purple); color: #fff; }
.week .d.today .cell b { color: #fff; }
.week .d.sel .cell { outline: 2px solid var(--purple-deep); }

/* 提示 */
.toast { position: fixed; left: 50%; bottom: calc(var(--nav-h) + 16px); transform: translateX(-50%); background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 12px; font-size: 14px; z-index: 50; opacity: 0; transition: opacity .2s; pointer-events: none; }
.toast.show { opacity: 1; }
.timer { font-size: 32px; font-weight: 600; color: var(--purple-deep); font-variant-numeric: tabular-nums; }
.bar { height: 6px; border-radius: 3px; background: var(--purple-light); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--purple); }
.hidden { display: none !important; }