/* ============================================================
   工作台 · 设计系统
   ============================================================ */

:root {
  /* 颜色 · 松绿（默认） */
  --bg: #F3F6F4;
  --page-bg: #E6EBE7;
  --bg-grad: radial-gradient(1200px 400px at 50% -10%, #EDF4F0 0%, rgba(243,246,244,0) 70%);
  --surface: #FFFFFF;
  --surface-2: #FAFBFA;
  --surface-3: #EFF4F1;
  --line: #E1E9E4;
  --line-soft: #EEF4F0;

  --text: #23282A;
  --text-2: #67706B;
  --text-3: #9CA5A0;

  --brand: #3F7D6B;
  --brand-ink: #2E6152;
  --brand-soft: rgba(63, 125, 107, 0.10);
  --brand-line: rgba(63, 125, 107, 0.24);

  --amber: #C0872B;
  --amber-soft: rgba(192, 135, 43, 0.12);
  --danger: #C4574A;
  --danger-soft: rgba(196, 87, 74, 0.10);
  --info: #4E6FA8;
  --info-soft: rgba(78, 111, 168, 0.10);
  --violet: #7A6BA8;
  --violet-soft: rgba(122, 107, 168, 0.10);

  /* 撞色里的第二个颜色：交互走 --brand，它走标题这类高视觉权重的位置 */
  --accent2: var(--amber);

  /* 尺寸 */
  --r-lg: 18px;
  --r-md: 13px;
  --r-sm: 9px;
  --r-pill: 999px;
  --gap: 12px;
  --pad: 16px;
  --tabbar-h: 62px;
  --fs: 15px;

  --shadow-1: 0 1px 2px rgba(30, 34, 38, 0.04), 0 4px 14px rgba(30, 34, 38, 0.04);
  --shadow-2: 0 8px 30px rgba(30, 34, 38, 0.12);
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
}

[data-theme="dark"] {
  --bg: #121415;
  --page-bg: #0A0B0C;
  --bg-grad: radial-gradient(1200px 400px at 50% -10%, #1B2420 0%, rgba(18,20,21,0) 70%);
  --surface: #1B1E20;
  --surface-2: #202426;
  --surface-3: #262A2D;
  --line: #2C3134;
  --line-soft: #24282B;

  --text: #E7E9EA;
  --text-2: #98A0A6;
  --text-3: #6B7379;

  --brand: #63A991;
  --brand-ink: #7CBCA6;
  --brand-soft: rgba(99, 169, 145, 0.14);
  --brand-line: rgba(99, 169, 145, 0.30);

  --amber: #D8A44A;
  --amber-soft: rgba(216, 164, 74, 0.14);
  --danger: #D9776A;
  --danger-soft: rgba(217, 119, 106, 0.14);
  --info: #7C99CC;
  --info-soft: rgba(124, 153, 204, 0.14);
  --violet: #A192CC;
  --violet-soft: rgba(161, 146, 204, 0.14);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 14px rgba(0, 0, 0, 0.22);
  --shadow-2: 0 10px 34px rgba(0, 0, 0, 0.5);
}

[data-font="sm"] { --fs: 14px; }
[data-font="md"] { --fs: 15px; }
[data-font="lg"] { --fs: 16.5px; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-size: var(--fs);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Segoe UI", Roboto, system-ui, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
  overflow-x: hidden;
}

button, input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

/* 浏览器给 <button> 的默认 padding（1px 6px）会把内容盒压得比图标还小，
   用 grid/flex 居中的图标就会被挤偏。统一清掉；需要内边距的按钮
   各自在类里写（.btn / .seg / .chip / .tab / .del / .mood-btn 都有）。 */
button { padding: 0; }

/* ---------- 外壳 ---------- */
.phone {
  position: relative;
  width: 100%;
  max-width: 480px;
  min-height: 100dvh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  background-image: var(--bg-grad);
}

@media (min-width: 520px) {
  body { background: var(--page-bg); }
  .phone {
    min-height: 100dvh;
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.07);
  }
}

/* ---------- 顶栏 ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: calc(env(safe-area-inset-top, 0px) + 18px) var(--pad) 10px;
  background: var(--bg);
}

.app-title {
  margin: 0;
  font-size: 1.55em;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--accent2);
}

.app-sub {
  margin: 1px 0 0;
  font-size: 0.78em;
  color: var(--text-3);
  letter-spacing: 0.01em;
}

.topbar-actions { display: flex; gap: 8px; padding-bottom: 4px; }

/* ---------- 视图区 ---------- */
.view {
  flex: 1;
  padding: 4px var(--pad) calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 28px);
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  animation: fade 0.24s var(--ease);
}

@keyframes fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 底部导航 ---------- */
.tabbar {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  z-index: 30;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  padding: 6px 4px calc(env(safe-area-inset-bottom, 0px) + 6px);
  background: var(--surface);
  border-top: 1px solid var(--line);
}

.tab {
  appearance: none;
  border: 0;
  background: none;
  padding: 5px 0 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: var(--text-2);
  cursor: pointer;
  transition: color 0.18s var(--ease);
  border-radius: var(--r-sm);
}

.tab svg { width: 21px; height: 21px; stroke-width: 1.8; }
.tab span { font-size: 10.5px; letter-spacing: 0.02em; }
.tab.on { color: var(--accent2); }
.tab.on svg { stroke-width: 2.1; }
.tab:active { opacity: 0.6; }

.tab.hidden-module { display: none; }

/* ---------- 卡片 ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 14px 15px 13px;
  box-shadow: var(--shadow-1);
}

.card.tight { padding: 12px 14px; }
.card.flush { padding: 14px 0 8px; }
.card.flush > .card-h, .card.flush > .card-sub { padding-left: 15px; padding-right: 15px; }

.card-h {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.card-h .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
  flex: none;
}

.card-h h2 {
  margin: 0;
  font-size: 0.95em;
  font-weight: 650;
  letter-spacing: 0.01em;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 7px;
}

.card-h .hint {
  font-size: 0.74em;
  font-weight: 500;
  color: var(--text-3);
}

.card-sub {
  margin: -6px 0 10px;
  font-size: 0.76em;
  color: var(--text-3);
}

/* 卡片主题色 */
.card[data-accent="amber"]  .card-h .dot { background: var(--amber); }
.card[data-accent="info"]   .card-h .dot { background: var(--info); }
.card[data-accent="danger"] .card-h .dot { background: var(--danger); }
.card[data-accent="violet"] .card-h .dot { background: var(--violet); }

/* ---------- 二级导航 ---------- */
.segmented {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px 0 4px;
  margin: 0 -2px;
}
.segmented::-webkit-scrollbar { display: none; }

.seg {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text-2);
  padding: 6px 13px;
  border-radius: var(--r-pill);
  font-size: 0.82em;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.18s var(--ease);
}
.seg.on {
  background: var(--accent2);
  border-color: var(--accent2);
  color: #fff;
  font-weight: 600;
}
[data-theme="dark"] .seg.on { color: var(--bg); }
.seg:active { transform: scale(0.96); }

/* ---------- 列表行 ---------- */
.rows { display: flex; flex-direction: column; }

.row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 15px;
  border-bottom: 1px solid var(--line-soft);
}
.row:last-child { border-bottom: 0; }
.row.inline { align-items: center; }
.row.pad0 { padding-left: 0; padding-right: 0; }

.row-main { flex: 1; min-width: 0; }
.row-title {
  font-size: 0.92em;
  line-height: 1.45;
  word-break: break-word;
}
.row-meta {
  font-size: 0.74em;
  color: var(--text-3);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.row.done .row-title {
  color: var(--text-3);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

/* ---------- 勾选 ---------- */
.check {
  flex: none;
  width: 21px;
  height: 21px;
  margin-top: 1px;
  border-radius: 50%;
  border: 1.6px solid var(--line);
  background: var(--surface-2);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all 0.18s var(--ease);
}
.check svg { width: 12px; height: 12px; stroke: #fff; stroke-width: 3; opacity: 0; transform: scale(0.5); transition: all 0.18s var(--ease); }
.check.on { background: var(--brand); border-color: var(--brand); }
.check.on svg { opacity: 1; transform: none; }
[data-theme="dark"] .check.on svg { stroke: var(--bg); }
.check:active { transform: scale(0.88); }

/* ---------- 按钮 ---------- */
.btn {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  padding: 7px 13px;
  border-radius: var(--r-sm);
  font-size: 0.82em;
  cursor: pointer;
  transition: all 0.16s var(--ease);
  white-space: nowrap;
}
.btn:active { transform: scale(0.96); opacity: 0.85; }
.btn svg { width: 14px; height: 14px; stroke-width: 2.1; vertical-align: -2px; margin-right: 3px; }
.btn.icon-only { padding: 7px 9px; }
.btn.icon-only svg { margin-right: 0; vertical-align: -3px; }
.btn.primary { background: var(--accent2); border-color: var(--accent2); color: #fff; font-weight: 600; }
[data-theme="dark"] .btn.primary { color: var(--bg); }
.btn.soft { background: var(--brand-soft); border-color: transparent; color: var(--brand-ink); font-weight: 600; }
.btn.ghost { background: transparent; }
.btn.danger { color: var(--danger); }
.btn.block { width: 100%; display: block; text-align: center; padding: 10px; }
.btn.sm { padding: 5px 10px; font-size: 0.76em; }

.add-btn {
  appearance: none;
  border: 0;
  background: var(--surface-3);
  color: var(--text-2);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.16s var(--ease);
  flex: none;
}
.add-btn svg { width: 15px; height: 15px; stroke-width: 2.2; }
.add-btn:active { transform: scale(0.9); }
.add-btn.sm { width: 26px; height: 26px; }

/* ---------- 输入 ---------- */
.field { margin-bottom: 12px; }
.field > label {
  display: block;
  font-size: 0.76em;
  color: var(--text-2);
  margin-bottom: 5px;
  font-weight: 550;
}
.input, .textarea, .select {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--surface-2);
  border-radius: var(--r-md);
  padding: 9px 11px;
  outline: none;
  transition: border-color 0.16s;
  font-size: 0.92em;
  box-sizing: border-box;
  height: 38px;
  line-height: 1.4;
}
.textarea { height: auto; resize: vertical; min-height: 76px; line-height: 1.6; }
.input:focus, .textarea:focus, .select:focus { border-color: var(--brand-line); background: var(--surface); }
.input[type="number"]::-webkit-outer-spin-button,
.input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
/* time / date input：iOS Safari 用 native 渲染，强制统一高度和 box-sizing 避免大小不一 */
.input[type="time"], .input[type="date"] {
  min-height: 38px;
  height: 38px;
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  padding: 0 11px;
}
.input-row { display: flex; gap: 14px; align-items: flex-start; }
.input-row > * { flex: 1 1 0; min-width: 0; }
@media (max-width: 380px) {
  .input-row { flex-direction: column; gap: 10px; }
}
.input-row.time-row .input[type="time"] {
  text-align: center;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.4px;
  justify-content: center;
}

.quick-add {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 2px 15px 10px;
}
.quick-add .input { border-radius: var(--r-pill); background: var(--surface-2); }

/* ---------- 搜索框 ---------- */
.search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 0 12px;
  transition: border-color 0.16s;
}
.search-bar .search-ico { display: flex; flex: none; color: var(--text-3); }
.search-bar .search-ico svg { width: 16px; height: 16px; }
.search-bar .input {
  border: 0;
  background: transparent;
  padding: 0;
  height: 38px;
  flex: 1;
  min-width: 0;
  border-radius: 0;
}
.search-bar .input:focus { background: transparent; }
.search-bar:focus-within { border-color: var(--brand-line); }

/* ---------- 月份折叠 ---------- */
.fold-head {
  width: 100%;
  appearance: none;
  border: 0;
  background: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 15px;
  cursor: pointer;
  font-size: 0.86em;
  font-weight: 650;
  color: var(--text);
  border-bottom: 1px solid var(--line-soft);
  font-family: inherit;
  text-align: left;
}
.fold-head .fold-m { flex: 1; }
.fold-head .fold-n { font-size: 0.8em; color: var(--text-3); font-weight: 400; }
.fold-head .fold-arrow { color: var(--text-3); font-size: 0.8em; flex: none; }
.fold-head:active { background: var(--surface-2); }

/* ---------- 标签 / chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips.scroll {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.chips.scroll::-webkit-scrollbar { display: none; }
.chips.scroll .chip { flex: none; }
.chip {
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text-2);
  padding: 4px 11px;
  border-radius: var(--r-pill);
  font-size: 0.78em;
  cursor: pointer;
  transition: all 0.16s var(--ease);
}
.chip.on {
  background: var(--brand-soft);
  border-color: var(--brand-line);
  color: var(--brand-ink);
  font-weight: 600;
}
.chip.static { cursor: default; }
.chip:active:not(.static) { transform: scale(0.95); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  font-size: 0.72em;
  font-weight: 600;
  background: var(--surface-3);
  color: var(--text-2);
  white-space: nowrap;
}
.pill.brand { background: var(--brand-soft); color: var(--brand-ink); }
.pill.amber { background: var(--amber-soft); color: var(--amber); }
.pill.danger { background: var(--danger-soft); color: var(--danger); }
.pill.info { background: var(--info-soft); color: var(--info); }
.pill.violet { background: var(--violet-soft); color: var(--violet); }

/* ---------- 进度条 ---------- */
.bar {
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  overflow: hidden;
}
.bar > i {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--brand);
  transition: width 0.4s var(--ease);
}
.bar.sm { height: 4px; }
.bar > i.amber { background: var(--amber); }
.bar > i.danger { background: var(--danger); }
.bar > i.info { background: var(--info); }

.stat-row { display: flex; gap: 10px; align-items: baseline; justify-content: space-between; font-size: 0.8em; margin-bottom: 5px; }
.stat-row .k { color: var(--text-2); }
.stat-row .v { font-variant-numeric: tabular-nums; font-weight: 650; }

/* ---------- 数字指标 ---------- */
.metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.metric {
  background: var(--surface-2);
  border-radius: var(--r-md);
  padding: 9px 10px;
  text-align: center;
  min-width: 0;
}
.metric .mv {
  font-size: 1.22em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.3;
}
.metric .mk { font-size: 0.72em; color: var(--text-3); margin-top: 1px; }

/* 小屏（iPhone SE 一类）把指标压紧，避免三列被数字撑破 */
@media (max-width: 380px) {
  .metric { padding: 8px 5px; }
  .metric .mv { font-size: 1.04em; letter-spacing: -0.035em; }
  .metric .mk { font-size: 0.68em; }
}

/* ---------- 心情选择 ---------- */
.mood-picker { display: flex; gap: 5px; }
.mood-btn {
  flex: 1;
  appearance: none;
  border: 1px solid var(--line);
  background: var(--surface-2);
  border-radius: var(--r-md);
  padding: 6px 0 5px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  transition: all 0.16s var(--ease);
}
.mood-btn .face { font-size: 1.14em; line-height: 1.1; }
.mood-btn .lbl { font-size: 0.64em; color: var(--text-3); }
.mood-btn.on {
  background: var(--brand-soft);
  border-color: var(--brand-line);
  transform: translateY(-1px);
}
.mood-btn.on .lbl { color: var(--brand-ink); font-weight: 600; }

/* ---------- 饮水 ---------- */
.water-cups { display: flex; flex-wrap: wrap; gap: 5px; }
.cup {
  width: 26px;
  height: 30px;
  border-radius: 4px 4px 8px 8px;
  border: 1.4px solid var(--line);
  background: var(--surface-2);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.16s var(--ease);
  padding: 0;
  appearance: none;
}
.cup.on { border-color: var(--info); }
.cup.on::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 100%;
  background: linear-gradient(to top, var(--info), color-mix(in srgb, var(--info) 55%, transparent));
  animation: fillup 0.3s var(--ease);
}
@keyframes fillup { from { height: 0; } }

/* ml 化饮水：进度格改为展示，不再点击 */
.water-cups .cup { cursor: default; }
.cup.half::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 50%;
  background: linear-gradient(to top, var(--info), color-mix(in srgb, var(--info) 55%, transparent));
  animation: fillup 0.3s var(--ease);
}

/* 容器快速加水网格 */
.wcon-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.wcon {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--surface-2);
  border-radius: var(--r-md);
  padding: 10px 6px 9px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  transition: all 0.15s var(--ease);
  font-family: inherit;
}
.wcon:active { transform: scale(0.95); background: var(--brand-soft); border-color: var(--brand-line); }
.wcon-ico { font-size: 1.3em; line-height: 1.2; }
.wcon-ico svg { width: 18px; height: 18px; stroke-width: 2; }
.wcon-name { font-size: 0.74em; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.wcon-ml { font-size: 0.66em; color: var(--text-3); font-variant-numeric: tabular-nums; }
.wcon.add { border-style: dashed; }
.wcon.add .wcon-ico { color: var(--brand); }
.wcon.add .wcon-name { color: var(--brand-ink); }

/* 饮水明细 ml 数 */
.wlog-ml { font-size: 0.8em; font-weight: 650; color: var(--info); font-variant-numeric: tabular-nums; flex: none; }

/* ---------- 时间轴 ---------- */
.timeline { position: relative; padding-left: 20px; }
.timeline::before {
  content: "";
  position: absolute;
  left: 4.5px;
  top: 6px;
  bottom: 6px;
  width: 1.5px;
  background: var(--line);
}
.tl-item { position: relative; padding-bottom: 12px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: "";
  position: absolute;
  left: -19.5px;
  top: 7px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--brand);
}
.tl-time {
  font-size: 0.72em;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  margin-bottom: 1px;
}
.tl-text { font-size: 0.88em; line-height: 1.5; }

/* ---------- 生活小记的配图 ---------- */
.note-imgs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.note-imgs img {
  width: 68px;
  height: 68px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--line);
  cursor: pointer;
  display: block;
  transition: transform 0.16s var(--ease);
}
.note-imgs img:active { transform: scale(0.96); }

.note-img-wrap { position: relative; display: inline-block; line-height: 0; }
.note-img-x {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--danger);
  color: #fff;
  border: 2px solid var(--surface);
  font-size: 12px;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  appearance: none;
}

/* ---------- 图片放大 ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  cursor: zoom-out;
  animation: maskIn 0.18s var(--ease);
}
.lightbox[hidden] { display: none; }
.lightbox img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* ---------- 空状态 ---------- */
.empty {
  padding: 20px 12px;
  text-align: center;
  color: var(--text-3);
  font-size: 0.8em;
}
.empty .e-ico { font-size: 1.6em; opacity: 0.4; display: block; margin-bottom: 4px; }

/* ---------- 底部弹层 ---------- */
.sheet-mask {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(18, 20, 22, 0.45);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: maskIn 0.22s var(--ease);
}
/* 注意：hidden 属性的 display:none 会被上面的 display:flex 覆盖，必须显式声明 */
.sheet-mask[hidden] { display: none; }
@keyframes maskIn { from { opacity: 0; } }

.sheet {
  width: 100%;
  max-width: 480px;
  max-height: 88dvh;
  overflow-y: auto;
  background: var(--surface);
  border-radius: 22px 22px 0 0;
  padding: 8px var(--pad) calc(env(safe-area-inset-bottom, 0px) + 18px);
  animation: sheetIn 0.3s var(--ease);
  box-shadow: var(--shadow-2);
}
@keyframes sheetIn { from { transform: translateY(100%); } }

.sheet-grip {
  width: 38px;
  height: 4px;
  border-radius: 2px;
  background: var(--line);
  margin: 3px auto 12px;
}
.sheet h3 {
  margin: 0 0 14px;
  font-size: 1.05em;
  font-weight: 700;
}
.sheet-actions {
  display: flex;
  gap: 8px;
  margin-top: 18px;
}
.sheet-actions .btn { flex: 1; padding: 11px; font-size: 0.9em; position: relative; z-index: 2; pointer-events: auto; touch-action: manipulation; }

/* ---------- Toast ---------- */
.toast-wrap {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--tabbar-h) + 26px);
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.toast {
  background: color-mix(in srgb, var(--text) 92%, transparent);
  color: var(--bg);
  padding: 8px 16px;
  border-radius: var(--r-pill);
  font-size: 0.82em;
  font-weight: 500;
  box-shadow: var(--shadow-2);
  animation: toastIn 0.26s var(--ease);
  max-width: 80%;
}
@keyframes toastIn { from { opacity: 0; transform: translateY(10px) scale(0.94); } }
.toast.out { animation: toastOut 0.22s var(--ease) forwards; }
@keyframes toastOut { to { opacity: 0; transform: translateY(-6px); } }

/* ---------- 趋势图 ---------- */
.chart-wrap { margin: 4px 0 2px; }
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart .grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 4; }
.chart .axis-t { fill: var(--text-3); font-size: 9px; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 0.74em; color: var(--text-2); margin-top: 6px; }
.legend i { display: inline-block; width: 9px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 5px; }

/* ---------- 设置项 ---------- */
.set-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 15px;
  border-bottom: 1px solid var(--line-soft);
}
.set-row:last-child { border-bottom: 0; }
.set-row .sr-main { flex: 1; min-width: 0; }
.set-row .sr-title { font-size: 0.9em; }
.set-row .sr-desc { font-size: 0.74em; color: var(--text-3); margin-top: 1px; }

.switch {
  flex: none;
  width: 44px;
  height: 26px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  border: 0;
  position: relative;
  cursor: pointer;
  transition: background 0.22s var(--ease);
  padding: 0;
}
.switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
  transition: transform 0.22s var(--ease);
}
.switch.on { background: var(--brand); }
.switch.on::after { transform: translateX(18px); }

/* ---------- 主题色系选择 ---------- */
.theme-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 11px 8px;
  padding: 2px 0 6px;
  margin: 0 -2px;
}

.theme-tile {
  flex: none;
  width: 54px;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  appearance: none;
}
.tt-preview {
  position: relative;
  display: block;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  border: 1px solid var(--line);
  overflow: hidden;
  transition: box-shadow 0.18s var(--ease), transform 0.18s var(--ease);
}
.tt-card {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 6px;
  height: 17px;
  border-radius: 5px;
  display: block;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10);
}
.tt-dot {
  position: absolute;
  top: 7px;
  left: 7px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: block;
}
.tt-name { font-size: 10.5px; color: var(--text-3); }
.theme-tile.on .tt-preview {
  box-shadow: 0 0 0 2px var(--brand);
  border-color: transparent;
  transform: translateY(-1px);
}
.theme-tile.on .tt-name { color: var(--brand-ink); font-weight: 600; }
.theme-tile:active .tt-preview { transform: scale(0.95); }

/* ---------- 通用工具类 ---------- */
.mt6 { margin-top: 6px; }
.mt10 { margin-top: 10px; }
.mt14 { margin-top: 14px; }
.mb0 { margin-bottom: 0; }
.muted { color: var(--text-3); }
.right { text-align: right; }
.mono { font-variant-numeric: tabular-nums; }
.flex { display: flex; align-items: center; gap: 8px; }
.grow { flex: 1; }
.nowrap { white-space: nowrap; }
.hidden { display: none !important; }
.strong { font-weight: 650; }
.tiny { font-size: 0.74em; }

.del {
  appearance: none;
  border: 0;
  background: none;
  color: var(--text-3);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  flex: none;
  line-height: 0;
}
.del svg { width: 14px; height: 14px; stroke-width: 2; }
.del:active { color: var(--danger); background: var(--danger-soft); }

/* ============================================================
   主题色系 · 每套都是「撞色搭配」
   背景带明显色彩，交互色与之对撞，再配一个第二色（amber）
   深色版用 [data-theme="dark"][data-accent="..."] 覆盖同一批变量
   ============================================================ */

/* ---------- 松绿 + 驼金 ---------- */
[data-accent="brand"] {
  --bg: #F3F6F4; --page-bg: #E6EBE7;
  --bg-grad: radial-gradient(1200px 400px at 50% -10%, #EDF4F0 0%, rgba(243,246,244,0) 72%);
  --surface: #FFFFFF; --surface-2: #FAFBFA; --surface-3: #EFF4F1;
  --line: #E1E9E4; --line-soft: #EEF4F0;
  --text: #23282A; --text-2: #67706B; --text-3: #9CA5A0;

  --brand: #2F6B57; --brand-ink: #245545;
  --brand-soft: rgba(47, 107, 87, 0.12); --brand-line: rgba(47, 107, 87, 0.28);
  --info: #3A76A8; --info-soft: rgba(58, 118, 168, 0.13);
  --amber: #CE4624; --amber-soft: rgba(206, 70, 36, 0.13);
  --violet: #7B6BA8; --violet-soft: rgba(123, 107, 168, 0.13);
  --danger: #C25549; --danger-soft: rgba(194, 85, 73, 0.13);
}
[data-theme="dark"][data-accent="brand"] {
  --bg: #0D1512; --page-bg: #060B09;
  --bg-grad: radial-gradient(1200px 400px at 50% -10%, #143026 0%, rgba(13,21,18,0) 72%);
  --surface: #15221C; --surface-2: #1B2A23; --surface-3: #21322A;
  --line: #293D34; --line-soft: #1E2D26;
  --text: #E4EFE9; --text-2: #93A89C; --text-3: #66796E;

  --brand: #5FB894; --brand-ink: #7BC9A8;
  --brand-soft: rgba(95, 184, 148, 0.17); --brand-line: rgba(95, 184, 148, 0.36);
  --info: #6FA8D8; --info-soft: rgba(111, 168, 216, 0.17);
  --amber: #E35A38; --amber-soft: rgba(227, 90, 56, 0.17);
  --violet: #A897D4; --violet-soft: rgba(168, 151, 212, 0.17);
  --danger: #E08478; --danger-soft: rgba(224, 132, 120, 0.17);
}

/* ---------- 橄榄 + 砖红 ---------- */
[data-accent="olive"] {
  --bg: #F6F7EF; --page-bg: #E9EBDC;
  --bg-grad: radial-gradient(1200px 400px at 50% -10%, #F1F3E6 0%, rgba(246,247,239,0) 72%);
  --surface: #FFFFFF; --surface-2: #FBFCF7; --surface-3: #F1F3E5;
  --line: #E4E7D5; --line-soft: #F1F3E9;
  --text: #2A2C23; --text-2: #6B6F5E; --text-3: #A1A48F;

  --brand: #64742F; --brand-ink: #4E5C24;
  --brand-soft: rgba(100, 116, 47, 0.12); --brand-line: rgba(100, 116, 47, 0.28);
  --info: #3F6E8C; --info-soft: rgba(63, 110, 140, 0.13);
  --amber: #9555CE; --amber-soft: rgba(149, 85, 206, 0.13);
  --violet: #7A6BA0; --violet-soft: rgba(122, 107, 160, 0.13);
  --danger: #C0392B; --danger-soft: rgba(192, 57, 43, 0.13);
}
[data-theme="dark"][data-accent="olive"] {
  --bg: #12140D; --page-bg: #090A06;
  --bg-grad: radial-gradient(1200px 400px at 50% -10%, #1E2513 0%, rgba(18,20,13,0) 72%);
  --surface: #1A1E13; --surface-2: #202518; --surface-3: #262C1D;
  --line: #2E3523; --line-soft: #232818;
  --text: #E9EBDC; --text-2: #9BA082; --text-3: #6E7459;

  --brand: #A5B85C; --brand-ink: #B9CC74;
  --brand-soft: rgba(165, 184, 92, 0.17); --brand-line: rgba(165, 184, 92, 0.36);
  --info: #77A8C4; --info-soft: rgba(119, 168, 196, 0.17);
  --amber: #A162D8; --amber-soft: rgba(161, 98, 216, 0.17);
  --violet: #AC9CCB; --violet-soft: rgba(172, 156, 203, 0.17);
  --danger: #E0705C; --danger-soft: rgba(224, 112, 92, 0.17);
}

/* ---------- 藏蓝 + 芥末黄 ---------- */
[data-accent="honey"] {
  --bg: #FAF8F0; --page-bg: #F0EBDC;
  --bg-grad: radial-gradient(1200px 400px at 50% -10%, #F7F3E7 0%, rgba(250,248,240,0) 72%);
  --surface: #FFFFFF; --surface-2: #FDFCF7; --surface-3: #F7F2E6;
  --line: #ECE6D6; --line-soft: #F7F3E9;
  --text: #20293A; --text-2: #5A6172; --text-3: #939AA8;

  --brand: #C4921F; --brand-ink: #A07615;
  --brand-soft: rgba(196, 146, 31, 0.12); --brand-line: rgba(196, 146, 31, 0.28);
  --info: #2F5C8C; --info-soft: rgba(47, 92, 140, 0.13);
  --amber: #2575D0; --amber-soft: rgba(37, 117, 208, 0.13);
  --violet: #6B5B9C; --violet-soft: rgba(107, 91, 156, 0.13);
  --danger: #C0392B; --danger-soft: rgba(192, 57, 43, 0.13);
}
[data-theme="dark"][data-accent="honey"] {
  --bg: #14120A; --page-bg: #0A0905;
  --bg-grad: radial-gradient(1200px 400px at 50% -10%, #2A2210 0%, rgba(20,18,10,0) 72%);
  --surface: #1F1C12; --surface-2: #252117; --surface-3: #2B271C;
  --line: #332E20; --line-soft: #282417;
  --text: #EFEADD; --text-2: #A89F84; --text-3: #7B745E;

  --brand: #E0B24A; --brand-ink: #EDC463;
  --brand-soft: rgba(224, 178, 74, 0.17); --brand-line: rgba(224, 178, 74, 0.36);
  --info: #7BA3D4; --info-soft: rgba(123, 163, 212, 0.17);
  --amber: #3888E3; --amber-soft: rgba(56, 136, 227, 0.17);
  --violet: #A899D4; --violet-soft: rgba(168, 153, 212, 0.17);
  --danger: #E0705C; --danger-soft: rgba(224, 112, 92, 0.17);
}

/* ---------- 赤陶 + 藏青 ---------- */
[data-accent="clay"] {
  --bg: #FAF5F1; --page-bg: #F0E5DC;
  --bg-grad: radial-gradient(1200px 400px at 50% -10%, #F7EFE8 0%, rgba(250,245,241,0) 72%);
  --surface: #FFFFFF; --surface-2: #FDFAF7; --surface-3: #F7EEE7;
  --line: #ECE0D5; --line-soft: #F8F1EA;
  --text: #262F3A; --text-2: #5F6874; --text-3: #98A0AB;

  --brand: #B5603E; --brand-ink: #93482B;
  --brand-soft: rgba(181, 96, 62, 0.12); --brand-line: rgba(181, 96, 62, 0.28);
  --info: #2F5A85; --info-soft: rgba(47, 90, 133, 0.13);
  --amber: #1F826E; --amber-soft: rgba(31, 130, 110, 0.13);
  --violet: #7A5C8C; --violet-soft: rgba(122, 92, 140, 0.13);
  --danger: #B8422F; --danger-soft: rgba(184, 66, 47, 0.13);
}
[data-theme="dark"][data-accent="clay"] {
  --bg: #16100C; --page-bg: #0B0806;
  --bg-grad: radial-gradient(1200px 400px at 50% -10%, #2C1A12 0%, rgba(22,16,12,0) 72%);
  --surface: #201914; --surface-2: #261E18; --surface-3: #2D2420;
  --line: #352B25; --line-soft: #2A211C;
  --text: #EFE7E0; --text-2: #A89C90; --text-3: #7A6E62;

  --brand: #D48A63; --brand-ink: #E3A17C;
  --brand-soft: rgba(212, 138, 99, 0.17); --brand-line: rgba(212, 138, 99, 0.36);
  --info: #7FA8D4; --info-soft: rgba(127, 168, 212, 0.17);
  --amber: #41DABB; --amber-soft: rgba(65, 218, 187, 0.17);
  --violet: #B096C4; --violet-soft: rgba(176, 150, 196, 0.17);
  --danger: #E07B62; --danger-soft: rgba(224, 123, 98, 0.17);
}

/* ---------- 豆沙粉 + 墨绿 ---------- */
[data-accent="rose"] {
  --bg: #FAF4F5; --page-bg: #F0E3E4;
  --bg-grad: radial-gradient(1200px 400px at 50% -10%, #F7EDEE 0%, rgba(250,244,245,0) 72%);
  --surface: #FFFFFF; --surface-2: #FDFAFA; --surface-3: #F7EDEE;
  --line: #EEDFE0; --line-soft: #F8F0F1;
  --text: #232D28; --text-2: #5E6862; --text-3: #97A09A;

  --brand: #BC6672; --brand-ink: #9A4C57;
  --brand-soft: rgba(188, 102, 114, 0.12); --brand-line: rgba(188, 102, 114, 0.28);
  --info: #3F6E8C; --info-soft: rgba(63, 110, 140, 0.13);
  --amber: #287DA1; --amber-soft: rgba(40, 125, 161, 0.13);
  --violet: #8C6BA0; --violet-soft: rgba(140, 107, 160, 0.13);
  --danger: #B8422F; --danger-soft: rgba(184, 66, 47, 0.13);
}
[data-theme="dark"][data-accent="rose"] {
  --bg: #161011; --page-bg: #0B0808;
  --bg-grad: radial-gradient(1200px 400px at 50% -10%, #2C181A 0%, rgba(22,16,17,0) 72%);
  --surface: #201A1B; --surface-2: #261F20; --surface-3: #2D2526;
  --line: #352C2D; --line-soft: #2A2223;
  --text: #EFE8E9; --text-2: #A89A9C; --text-3: #7B6F71;

  --brand: #D68D98; --brand-ink: #E4A3AD;
  --brand-soft: rgba(214, 141, 152, 0.17); --brand-line: rgba(214, 141, 152, 0.36);
  --info: #7FA8C4; --info-soft: rgba(127, 168, 196, 0.17);
  --amber: #44ABD7; --amber-soft: rgba(68, 171, 215, 0.17);
  --violet: #BCA0CC; --violet-soft: rgba(188, 160, 204, 0.17);
  --danger: #E07B62; --danger-soft: rgba(224, 123, 98, 0.17);
}

/* ---------- 莓红 + 米金 ---------- */
[data-accent="berry"] {
  --bg: #FAF3F7; --page-bg: #F0E2EA;
  --bg-grad: radial-gradient(1200px 400px at 50% -10%, #F7ECF2 0%, rgba(250,243,247,0) 72%);
  --surface: #FFFFFF; --surface-2: #FDFAFB; --surface-3: #F7ECF2;
  --line: #EDDDE6; --line-soft: #F8EFF4;
  --text: #2B2330; --text-2: #665E6C; --text-3: #9E96A4;

  --brand: #A33D6B; --brand-ink: #823054;
  --brand-soft: rgba(163, 61, 107, 0.12); --brand-line: rgba(163, 61, 107, 0.28);
  --info: #4A6B9C; --info-soft: rgba(74, 107, 156, 0.13);
  --amber: #21853F; --amber-soft: rgba(33, 133, 63, 0.13);
  --violet: #6B5BA8; --violet-soft: rgba(107, 91, 168, 0.13);
  --danger: #B8422F; --danger-soft: rgba(184, 66, 47, 0.13);
}
[data-theme="dark"][data-accent="berry"] {
  --bg: #150F12; --page-bg: #0B0708;
  --bg-grad: radial-gradient(1200px 400px at 50% -10%, #2B1420 0%, rgba(21,15,18,0) 72%);
  --surface: #201820; --surface-2: #261D25; --surface-3: #2D222B;
  --line: #352831; --line-soft: #2A1F26;
  --text: #EFE6EB; --text-2: #A99BA2; --text-3: #7C6F76;

  --brand: #D07BA5; --brand-ink: #E092B8;
  --brand-soft: rgba(208, 123, 165, 0.17); --brand-line: rgba(208, 123, 165, 0.36);
  --info: #8FA8D4; --info-soft: rgba(143, 168, 212, 0.17);
  --amber: #44D770; --amber-soft: rgba(68, 215, 112, 0.17);
  --violet: #A899D4; --violet-soft: rgba(168, 153, 212, 0.17);
  --danger: #E0786B; --danger-soft: rgba(224, 120, 107, 0.17);
}

/* ---------- 墨紫 + 芥末金 ---------- */
[data-accent="plum"] {
  --bg: #F6F3FA; --page-bg: #E9E2F1;
  --bg-grad: radial-gradient(1200px 400px at 50% -10%, #F1EBF7 0%, rgba(246,243,250,0) 72%);
  --surface: #FFFFFF; --surface-2: #FBF9FD; --surface-3: #F1EBF7;
  --line: #E3DAEE; --line-soft: #F2ECF8;
  --text: #2A2434; --text-2: #635C74; --text-3: #9C95AE;

  --brand: #7B4FA8; --brand-ink: #613B88;
  --brand-soft: rgba(123, 79, 168, 0.12); --brand-line: rgba(123, 79, 168, 0.28);
  --info: #3A6EA5; --info-soft: rgba(58, 110, 165, 0.13);
  --amber: #D93643; --amber-soft: rgba(217, 54, 67, 0.13);
  --violet: #6B5BA8; --violet-soft: rgba(107, 91, 168, 0.13);
  --danger: #B8422F; --danger-soft: rgba(184, 66, 47, 0.13);
}
[data-theme="dark"][data-accent="plum"] {
  --bg: #120F17; --page-bg: #08070B;
  --bg-grad: radial-gradient(1200px 400px at 50% -10%, #241538 0%, rgba(18,15,23,0) 72%);
  --surface: #1D1825; --surface-2: #231D2C; --surface-3: #2A2333;
  --line: #322A3C; --line-soft: #272029;
  --text: #EAE4F1; --text-2: #A196B4; --text-3: #746A88;

  --brand: #A97FD4; --brand-ink: #BB96E0;
  --brand-soft: rgba(169, 127, 212, 0.17); --brand-line: rgba(169, 127, 212, 0.36);
  --info: #7FA8D9; --info-soft: rgba(127, 168, 217, 0.17);
  --amber: #E24451; --amber-soft: rgba(226, 68, 81, 0.17);
  --violet: #A899D4; --violet-soft: rgba(168, 153, 212, 0.17);
  --danger: #E07B6B; --danger-soft: rgba(224, 123, 107, 0.17);
}

/* ---------- 湖蓝 + 珊瑚橙 ---------- */
[data-accent="teal"] {
  --bg: #F2F7F9; --page-bg: #E3EBEF;
  --bg-grad: radial-gradient(1200px 400px at 50% -10%, #E9F3F6 0%, rgba(242,247,249,0) 72%);
  --surface: #FFFFFF; --surface-2: #F9FCFD; --surface-3: #EBF2F5;
  --line: #DCE7EC; --line-soft: #EDF3F6;
  --text: #1F2E36; --text-2: #5B6C74; --text-3: #94A4AC;

  --brand: #2A7C90; --brand-ink: #1F6172;
  --brand-soft: rgba(42, 124, 144, 0.12); --brand-line: rgba(42, 124, 144, 0.28);
  --info: #3A6EA5; --info-soft: rgba(58, 110, 165, 0.13);
  --amber: #C35118; --amber-soft: rgba(195, 81, 24, 0.13);
  --violet: #7B5C9C; --violet-soft: rgba(123, 92, 156, 0.13);
  --danger: #C74A3C; --danger-soft: rgba(199, 74, 60, 0.13);
}
[data-theme="dark"][data-accent="teal"] {
  --bg: #0B1418; --page-bg: #050A0C;
  --bg-grad: radial-gradient(1200px 400px at 50% -10%, #0F2833 0%, rgba(11,20,24,0) 72%);
  --surface: #131F24; --surface-2: #19272C; --surface-3: #1F2F35;
  --line: #273A41; --line-soft: #1C292E;
  --text: #E0EDF1; --text-2: #8CA5AE; --text-3: #617A84;

  --brand: #4FB3CB; --brand-ink: #6BC8DE;
  --brand-soft: rgba(79, 179, 203, 0.17); --brand-line: rgba(79, 179, 203, 0.36);
  --info: #7FA8DC; --info-soft: rgba(127, 168, 220, 0.17);
  --amber: #EC6E2F; --amber-soft: rgba(236, 110, 47, 0.17);
  --violet: #B49CD4; --violet-soft: rgba(180, 156, 212, 0.17);
  --danger: #E88478; --danger-soft: rgba(232, 132, 120, 0.17);
}

/* ---------- 靛蓝 + 橙 ---------- */
[data-accent="blue"] {
  --bg: #F3F5FA; --page-bg: #E4E8F1;
  --bg-grad: radial-gradient(1200px 400px at 50% -10%, #EBEFF7 0%, rgba(243,245,250,0) 72%);
  --surface: #FFFFFF; --surface-2: #FAFBFD; --surface-3: #EDF0F7;
  --line: #DEE4EE; --line-soft: #EFF2F8;
  --text: #1F2740; --text-2: #586075; --text-3: #9198AC;

  --brand: #34539B; --brand-ink: #294180;
  --brand-soft: rgba(52, 83, 155, 0.12); --brand-line: rgba(52, 83, 155, 0.28);
  --info: #2A7C90; --info-soft: rgba(42, 124, 144, 0.13);
  --amber: #D0377E; --amber-soft: rgba(208, 55, 126, 0.13);
  --violet: #6B5BA8; --violet-soft: rgba(107, 91, 168, 0.13);
  --danger: #C74A3C; --danger-soft: rgba(199, 74, 60, 0.13);
}
[data-theme="dark"][data-accent="blue"] {
  --bg: #0D1120; --page-bg: #060811;
  --bg-grad: radial-gradient(1200px 400px at 50% -10%, #131E45 0%, rgba(13,17,32,0) 72%);
  --surface: #151A28; --surface-2: #1B2130; --surface-3: #212938;
  --line: #293346; --line-soft: #1E2635;
  --text: #E3E8F4; --text-2: #919BB8; --text-3: #66708C;

  --brand: #6B8BD8; --brand-ink: #87A3E4;
  --brand-soft: rgba(107, 139, 216, 0.17); --brand-line: rgba(107, 139, 216, 0.36);
  --info: #5FB0C4; --info-soft: rgba(95, 176, 196, 0.17);
  --amber: #E873A9; --amber-soft: rgba(232, 115, 169, 0.17);
  --violet: #A899D4; --violet-soft: rgba(168, 153, 212, 0.17);
  --danger: #E88478; --danger-soft: rgba(232, 132, 120, 0.17);
}

/* ---------- 黑 + 金 ---------- */
[data-accent="ink"] {
  --bg: #F5F5F4; --page-bg: #E8E8E6;
  --bg-grad: radial-gradient(1200px 400px at 50% -10%, #EFEFEE 0%, rgba(245,245,244,0) 72%);
  --surface: #FFFFFF; --surface-2: #FBFBFA; --surface-3: #EFEFEE;
  --line: #E3E3E0; --line-soft: #F1F1EF;
  --text: #17181A; --text-2: #5F6062; --text-3: #9A9B9C;

  --brand: #1F1F1F; --brand-ink: #000000;
  --brand-soft: rgba(31, 31, 31, 0.12); --brand-line: rgba(31, 31, 31, 0.28);
  --info: #3A6EA5; --info-soft: rgba(58, 110, 165, 0.13);
  --amber: #906F0C; --amber-soft: rgba(144, 111, 12, 0.13);
  --violet: #6B5B8C; --violet-soft: rgba(107, 91, 140, 0.13);
  --danger: #B8422F; --danger-soft: rgba(184, 66, 47, 0.13);
}
[data-theme="dark"][data-accent="ink"] {
  --bg: #0C0C0C; --page-bg: #050505;
  --bg-grad: radial-gradient(1200px 400px at 50% -10%, #1A1A1A 0%, rgba(12,12,12,0) 72%);
  --surface: #171717; --surface-2: #1D1D1D; --surface-3: #242424;
  --line: #2C2C2C; --line-soft: #212121;
  --text: #EBEBE8; --text-2: #9C9C98; --text-3: #707070;

  --brand: #D4D4D0; --brand-ink: #EDEDE9;
  --brand-soft: rgba(212, 212, 208, 0.17); --brand-line: rgba(212, 212, 208, 0.36);
  --info: #8FA8CC; --info-soft: rgba(143, 168, 204, 0.17);
  --amber: #F4C127; --amber-soft: rgba(244, 193, 39, 0.17);
  --violet: #A899C4; --violet-soft: rgba(168, 153, 196, 0.17);
  --danger: #E0786B; --danger-soft: rgba(224, 120, 107, 0.17);
}

/* ---------- 薄荷绿 + 巧克力棕 ---------- */
[data-accent="mint"] {
  --bg: #F2F9F5; --page-bg: #E3EFE8;
  --bg-grad: radial-gradient(1200px 400px at 50% -10%, #E9F5EE 0%, rgba(242,249,245,0) 72%);
  --surface: #FFFFFF; --surface-2: #F9FCFB; --surface-3: #ECF5F0;
  --line: #DEEBE4; --line-soft: #EEF7F2;
  --text: #322A23; --text-2: #6E6259; --text-3: #A69A90;

  --brand: #2FA37A; --brand-ink: #23805F;
  --brand-soft: rgba(47, 163, 122, 0.12); --brand-line: rgba(47, 163, 122, 0.28);
  --info: #4A90C4; --info-soft: rgba(74, 144, 196, 0.13);
  --amber: #A66437; --amber-soft: rgba(166, 100, 55, 0.13);
  --violet: #9B7FB0; --violet-soft: rgba(155, 127, 176, 0.13);
  --danger: #D2544E; --danger-soft: rgba(210, 84, 78, 0.13);
}
[data-theme="dark"][data-accent="mint"] {
  --bg: #0B1712; --page-bg: #050B09;
  --bg-grad: radial-gradient(1200px 400px at 50% -10%, #103026 0%, rgba(11,23,18,0) 72%);
  --surface: #13251E; --surface-2: #192D25; --surface-3: #1F352C;
  --line: #274238; --line-soft: #1C2F28;
  --text: #EDE3D5; --text-2: #B3A492; --text-3: #847565;

  --brand: #4FD4A2; --brand-ink: #6FE0B6;
  --brand-soft: rgba(79, 212, 162, 0.17); --brand-line: rgba(79, 212, 162, 0.36);
  --info: #6FB4E0; --info-soft: rgba(111, 180, 224, 0.17);
  --amber: #CC814F; --amber-soft: rgba(204, 129, 79, 0.17);
  --violet: #B49CD4; --violet-soft: rgba(180, 156, 212, 0.17);
  --danger: #EE7A72; --danger-soft: rgba(238, 122, 114, 0.17);
}

/* ---------- 红 + 黑 ---------- */
[data-accent="noir"] {
  --bg: #F4F4F4; --page-bg: #E7E7E7;
  --bg-grad: radial-gradient(1200px 400px at 50% -10%, #EEEEEE 0%, rgba(244,244,244,0) 72%);
  --surface: #FFFFFF; --surface-2: #FAFAFA; --surface-3: #EFEFEF;
  --line: #E2E2E2; --line-soft: #F0F0F0;
  --text: #111112; --text-2: #5A5A5C; --text-3: #979798;

  --brand: #D81E29; --brand-ink: #A5141E;
  --brand-soft: rgba(216, 30, 41, 0.12); --brand-line: rgba(216, 30, 41, 0.28);
  --info: #2F4A6B; --info-soft: rgba(47, 74, 107, 0.13);
  --amber: #141414; --amber-soft: rgba(20, 20, 20, 0.10);
  --violet: #5B3A73; --violet-soft: rgba(91, 58, 115, 0.13);
  --danger: #DE7326; --danger-soft: rgba(222, 115, 38, 0.13);
}
[data-theme="dark"][data-accent="noir"] {
  --bg: #080808; --page-bg: #000000;
  --bg-grad: radial-gradient(1200px 400px at 50% -10%, #200508 0%, rgba(8,8,8,0) 72%);
  --surface: #131313; --surface-2: #191919; --surface-3: #202020;
  --line: #2B2B2B; --line-soft: #1E1E1E;
  --text: #F2F2F2; --text-2: #A2A2A2; --text-3: #6D6D6D;

  --brand: #FF4753; --brand-ink: #FF6A74;
  --brand-soft: rgba(255, 71, 83, 0.17); --brand-line: rgba(255, 71, 83, 0.36);
  --info: #7FA3CC; --info-soft: rgba(127, 163, 204, 0.17);
  --amber: #EDEDED; --amber-soft: rgba(237, 237, 237, 0.15);
  --violet: #A88BC4; --violet-soft: rgba(168, 139, 196, 0.17);
  --danger: #E89B5E; --danger-soft: rgba(232, 155, 94, 0.17);
}

/* ---------- 顶部提示卡（今日页） ---------- */
.hint-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
}
.hint-card {
  padding: 11px 13px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: transform 0.12s var(--ease);
}
.hint-card:active { transform: scale(0.98); }
.hint-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.hint-title {
  font-size: 0.82em;
  font-weight: 650;
  color: var(--text-2);
}
.hint-arrow {
  font-size: 0.9em;
  color: var(--text-3);
  line-height: 1;
}
.hint-value {
  font-size: 1.18em;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.hint-sub {
  font-size: 0.74em;
  color: var(--text-3);
  line-height: 1.5;
}
.hint-card .pill { align-self: flex-start; }
.hint-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin-top: 2px;
}
.hint-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.hint-metric .hm-v {
  font-size: 0.95em;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  white-space: nowrap;
}
.hint-metric .hm-k {
  font-size: 0.68em;
  color: var(--text-3);
}
.hint-empty {
  font-size: 0.8em;
  color: var(--text-3);
  padding: 4px 0 2px;
}
@media (max-width: 380px) {
  .hint-grid { grid-template-columns: 1fr; }
}