/* ============================================================
   成长历 PWA · 样式
   iPhone 16 Pro (402×874pt) / iOS 26 优先
   ============================================================ */

:root {
  --paper: #f6f1e7;
  --paper-2: #efe7d9;
  --card: #fffdf8;
  --card-2: #fbf6ec;
  --ink: #2e2a24;
  --ink-2: #5d564c;
  --ink-3: #8b8273;
  --line: #e6dccb;
  --line-2: #efe6d7;
  --accent: #b4552d;
  --accent-2: #c97b55;
  --accent-soft: #f3e0d5;
  --green: #5e7a5a;
  --green-soft: #e8efe3;
  --red: #b4483a;
  --red-soft: #fbe9e2;
  --shadow: 0 10px 30px rgba(90, 65, 40, .08);
  --shadow-sm: 0 2px 10px rgba(90, 65, 40, .06);
  --serif: "Songti SC", "STSong", "Noto Serif CJK SC", ui-serif, serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Microsoft YaHei", sans-serif;
  --fs: 1;
  --radius: 20px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --tab-h: 49px;
  --top-h: 44px;
}

html[data-font="s"] { --fs: 1; }
html[data-font="m"] { --fs: 1.12; }
html[data-font="l"] { --fs: 1.24; }
html[data-font="xl"] { --fs: 1.36; }
html[data-heading="sans"] { --serif: var(--sans); }

html[data-theme="dark"] {
  --paper: #171310;
  --paper-2: #201a15;
  --card: #241e18;
  --card-2: #2a231c;
  --ink: #f1e8d9;
  --ink-2: #cfc4b2;
  --ink-3: #9c9180;
  --line: #3a3128;
  --line-2: #332b23;
  --accent: #e08a5c;
  --accent-2: #d99a72;
  --accent-soft: #3a251b;
  --green: #9db894;
  --green-soft: #24301f;
  --red: #e58a7a;
  --red-soft: #35211d;
  --shadow: 0 10px 30px rgba(0, 0, 0, .35);
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, .28);
}

@media (prefers-color-scheme: dark) {
  html[data-theme="system"] {
    --paper: #171310;
    --paper-2: #201a15;
    --card: #241e18;
    --card-2: #2a231c;
    --ink: #f1e8d9;
    --ink-2: #cfc4b2;
    --ink-3: #9c9180;
    --line: #3a3128;
    --line-2: #332b23;
    --accent: #e08a5c;
    --accent-2: #d99a72;
    --accent-soft: #3a251b;
    --green: #9db894;
    --green-soft: #24301f;
    --red: #e58a7a;
    --red-soft: #35211d;
    --shadow: 0 10px 30px rgba(0, 0, 0, .35);
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, .28);
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
html { height: 100%; background: var(--paper); }
body {
  min-height: 100dvh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: calc(17px * var(--fs));
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  overscroll-behavior-y: none;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; }
a { color: var(--accent); text-decoration: none; }
h1, h2, h3, h4, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img { display: block; max-width: 100%; }

/* ---------------- 顶部栏 ---------------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  padding-top: var(--safe-top);
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border-bottom: .5px solid var(--line-2);
}
.topbar-inner {
  height: var(--top-h);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  position: relative;
}
.topbar-title {
  font-size: calc(17px * var(--fs));
  font-weight: 600;
  letter-spacing: .02em;
}
.topbar-actions {
  position: absolute;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 示例资料提示条 */
.setup-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 2px 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: calc(12.5px * var(--fs));
  line-height: 1.5;
}
.setup-banner[hidden] { display: none; }
.setup-banner span { flex: 1; }
.setup-banner button {
  flex: none;
  border: 0;
  background: var(--card);
  color: var(--accent);
  border-radius: 9px;
  padding: 6px 10px;
  font-size: calc(12px * var(--fs));
}

/* ---------------- 拍照识别 ---------------- */
.ocr-picker {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  border: 1.5px dashed var(--line);
  border-radius: 16px;
  background: var(--card-2);
  color: var(--ink-2);
  font-size: calc(14px * var(--fs));
  cursor: pointer;
}
.ocr-preview { margin-top: 12px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); }
.ocr-preview img { width: 100%; display: block; }
.ocr-edit { padding: 12px; border: 1px solid var(--line); border-radius: 14px; margin-bottom: 10px; background: var(--card-2); }
.ocr-edit .edit-row { grid-template-columns: 1fr 70px 90px; }

/* ---------------- 底部 Tab 栏 ---------------- */
.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  padding-bottom: var(--safe-bottom);
  background: color-mix(in srgb, var(--paper) 84%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border-top: .5px solid var(--line-2);
}
.tabbar-inner {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  height: var(--tab-h);
}
.tab {
  border: 0;
  background: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--ink-3);
  font-size: calc(10px * var(--fs));
  letter-spacing: .02em;
  padding: 0;
}
.tab svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tab[aria-selected="true"] { color: var(--accent); font-weight: 600; }

/* ---------------- 主内容 ---------------- */
.main {
  padding: 14px 16px calc(var(--tab-h) + var(--safe-bottom) + 26px);
  max-width: 560px;
  margin: 0 auto;
}
.page[hidden] { display: none; }
.page { animation: fade .22s ease both; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .page { animation: none; }
}

.page-head { padding: 6px 4px 16px; }
.eyebrow {
  font-size: calc(12px * var(--fs));
  letter-spacing: .18em;
  color: var(--accent);
  text-transform: uppercase;
}
.page-title {
  font-family: var(--serif);
  font-size: calc(30px * var(--fs));
  line-height: 1.25;
  letter-spacing: .02em;
  margin: 8px 0 6px;
}
.page-sub { font-size: calc(14px * var(--fs)); color: var(--ink-3); line-height: 1.7; }

/* ---------------- 区块标题 ---------------- */
.sec-head {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin: 26px 2px 10px;
}
.sec-head .num {
  font-size: calc(10.5px * var(--fs));
  letter-spacing: .1em;
  color: var(--accent);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 7px;
  transform: translateY(-1px);
}
.sec-head h2 {
  font-family: var(--serif);
  font-size: calc(19px * var(--fs));
  font-weight: 600;
  letter-spacing: .02em;
}
.sec-head .meta { margin-left: auto; font-size: calc(12px * var(--fs)); color: var(--ink-3); }
.sec-link {
  margin-left: auto;
  border: 0;
  background: none;
  color: var(--accent);
  font-size: calc(12.5px * var(--fs));
  padding: 6px 0;
}

/* ---------------- 卡片 ---------------- */
.card {
  background: var(--card);
  border: .5px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 18px;
}
.card + .card { margin-top: 12px; }
.card-accent {
  background: linear-gradient(160deg, var(--card) 0%, var(--card-2) 100%);
  border-color: var(--accent-soft);
}
.hint { font-size: calc(12px * var(--fs)); color: var(--ink-3); line-height: 1.7; margin-top: 8px; }
.small { font-size: calc(13px * var(--fs)); }
.muted { color: var(--ink-3); }
.empty {
  text-align: center;
  color: var(--ink-3);
  font-size: calc(13.5px * var(--fs));
  line-height: 1.8;
  padding: 22px 10px;
}

/* ---------------- Hero ---------------- */
.hero {
  position: relative;
  background: linear-gradient(165deg, var(--card) 0%, var(--card-2) 100%);
  border: .5px solid var(--line);
  border-radius: 26px;
  box-shadow: var(--shadow);
  padding: 22px 20px 20px;
  text-align: center;
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-soft), transparent 70%);
  top: -120px; right: -80px;
  opacity: .7;
  pointer-events: none;
}
.seal {
  position: absolute;
  top: 16px; right: 16px;
  width: 38px; height: 38px;
  border: 1px solid var(--accent-2);
  border-radius: 10px;
  color: var(--accent);
  font-family: var(--serif);
  font-size: 20px;
  display: grid;
  place-items: center;
  transform: rotate(6deg);
  background: color-mix(in srgb, var(--card) 70%, transparent);
}
.hero-name { font-size: calc(13px * var(--fs)); letter-spacing: .16em; color: var(--ink-3); }
.hero-age {
  font-family: var(--serif);
  font-size: calc(54px * var(--fs));
  line-height: 1.1;
  margin: 12px 0 2px;
  letter-spacing: -.01em;
}
.hero-age small { font-size: .28em; font-family: var(--sans); color: var(--ink-2); margin: 0 3px; letter-spacing: 0; }
.hero-sub { font-size: calc(13.5px * var(--fs)); color: var(--ink-2); margin-top: 6px; }
.stagebar {
  height: 5px;
  border-radius: 99px;
  background: var(--paper-2);
  overflow: hidden;
  margin: 18px 0 8px;
}
.stagebar-fill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  transition: width .4s ease;
}
.stagebar-label {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: calc(12px * var(--fs));
  color: var(--ink-3);
}
.hero-link {
  margin-top: 16px;
  border: 0;
  background: none;
  color: var(--accent);
  font-size: calc(13.5px * var(--fs));
  padding: 8px 0;
}
.hero-link::after { content: " →"; }

/* ---------------- 今日小事 ---------------- */
.act-min { font-size: calc(11.5px * var(--fs)); color: var(--ink-3); letter-spacing: .08em; }
.act-kicker { font-size: calc(12.5px * var(--fs)); color: var(--accent); margin-bottom: 6px; }
.act-title { font-family: var(--serif); font-size: calc(24px * var(--fs)); line-height: 1.35; margin-bottom: 8px; }
.act-desc { font-size: calc(15.5px * var(--fs)); color: var(--ink-2); line-height: 1.85; }
.act-why { margin-top: 14px; padding-top: 10px; border-top: 1px dashed var(--line); font-size: calc(12.5px * var(--fs)); color: var(--ink-3); }
.act-why b { color: var(--accent); font-weight: 600; }

/* ---------------- 行 / 列表 ---------------- */
.rows { background: var(--card); border: .5px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.row { display: flex; gap: 12px; padding: 13px 16px; border-top: .5px solid var(--line-2); align-items: flex-start; }
.row:first-child { border-top: 0; }
.row .k {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
  display: grid; place-items: center;
  font-size: calc(13px * var(--fs));
  margin-top: 2px;
}
.row p { font-size: calc(15px * var(--fs)); color: var(--ink-2); line-height: 1.7; }
.row .row-title { font-size: calc(15.5px * var(--fs)); color: var(--ink); font-weight: 500; }
.row .row-note { font-size: calc(12.5px * var(--fs)); color: var(--ink-3); margin-top: 2px; }
.row .row-meta { margin-left: auto; flex: none; text-align: right; font-size: calc(12px * var(--fs)); color: var(--ink-3); }
.row-main { min-width: 0; flex: 1; }

.list { background: var(--card); border: .5px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.list-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-top: .5px solid var(--line-2);
  width: 100%;
  background: none;
  border-left: 0; border-right: 0; border-bottom: 0;
  text-align: left;
}
.list-row:first-child { border-top: 0; }
.list-row .lr-main { flex: 1; min-width: 0; }
.list-row .lr-title { font-size: calc(15.5px * var(--fs)); color: var(--ink); }
.list-row .lr-sub { font-size: calc(12px * var(--fs)); color: var(--ink-3); margin-top: 2px; }
.list-row .lr-side { flex: none; color: var(--ink-3); font-size: calc(12.5px * var(--fs)); display: flex; align-items: center; gap: 8px; }
.chev::after { content: "›"; font-size: 20px; color: var(--ink-3); line-height: 1; }
.list-row[disabled] { opacity: .5; }

/* 勾选 */
.check {
  flex: none;
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--card);
  display: grid; place-items: center;
  color: transparent;
  font-size: 13px;
  margin-top: 1px;
}
.check[aria-checked="true"] { background: var(--green); border-color: var(--green); color: #fff; }
.check[aria-checked="true"]::after { content: "✓"; }

/* 标签 */
.tag {
  display: inline-block;
  font-size: calc(10.5px * var(--fs));
  border-radius: 999px;
  padding: 1px 7px;
  margin-left: 6px;
  vertical-align: 1px;
  letter-spacing: .04em;
}
.tag-free { color: var(--green); background: var(--green-soft); }
.tag-self { color: var(--accent); background: var(--accent-soft); }
.tag-exam { color: var(--ink-2); background: var(--paper-2); }
.tag-ai { color: #fff; background: var(--accent); }

/* ---------------- 快速记录 ---------------- */
.quick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.qbtn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 13px 4px 11px;
  background: var(--card);
  border: .5px solid var(--line);
  border-radius: 16px;
  color: var(--ink-2);
  font-size: calc(12.5px * var(--fs));
  box-shadow: var(--shadow-sm);
}
.qbtn:active { transform: scale(.97); background: var(--accent-soft); }
.qbtn svg { width: 25px; height: 25px; stroke: var(--accent); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------- 日志 ---------------- */
.log-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-top: .5px solid var(--line-2);
  font-size: calc(14.5px * var(--fs));
}
.log-row:first-child { border-top: 0; }
.log-row .lt { color: var(--ink-3); font-variant-numeric: tabular-nums; font-size: calc(12.5px * var(--fs)); width: 44px; flex: none; }
.log-row .ln { flex: 1; color: var(--ink); }
.log-row .log-detail { font-style: normal; color: var(--ink-3); margin-left: 6px; font-size: calc(13px * var(--fs)); }
.del {
  border: 0;
  background: none;
  color: var(--ink-3);
  font-size: 18px;
  line-height: 1;
  padding: 4px 6px;
}

/* ---------------- 生长曲线 ---------------- */
.metric-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.metric-row .muted { font-size: calc(12px * var(--fs)); }
.chart { width: 100%; margin: 4px 0 10px; }
.chart svg { width: 100%; height: auto; display: block; }
.chart .grid { stroke: var(--line-2); stroke-width: 1; }
.chart .axis { fill: var(--ink-3); font-size: 8.5px; }
.chart .ref { fill: none; stroke: var(--accent-2); stroke-width: 1.4; stroke-dasharray: 4 4; }
.chart .line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.chart .dot { fill: var(--accent); stroke: var(--card); stroke-width: 1.5; }
.chart .dotlabel { fill: var(--accent); font-size: 9px; }
.chart .reflabel { fill: var(--ink-3); font-size: 8.5px; }
.grow-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-top: .5px solid var(--line-2);
  font-size: calc(14px * var(--fs));
}
.grow-row:first-child { border-top: 0; }
.grow-row .gd { color: var(--ink-3); width: 52px; flex: none; font-size: calc(12.5px * var(--fs)); }
.grow-row .del { margin-left: auto; }
.gform { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 8px; margin-top: 12px; }
.gform label { display: block; font-size: calc(11px * var(--fs)); color: var(--ink-3); }
.gform input { margin-top: 4px; }
.gform button { grid-column: 1 / -1; }

/* ---------------- 牙齿 ---------------- */
.teeth-rows { display: flex; flex-direction: column; gap: 10px; margin: 10px 0; }
.tooth-row { display: flex; align-items: center; gap: 8px; }
.tooth-row-label { width: 34px; flex: none; font-size: calc(11.5px * var(--fs)); color: var(--ink-3); }
.teeth { display: flex; gap: 5px; flex: 1; }
.tooth {
  flex: 1;
  aspect-ratio: 1;
  max-width: 32px;
  border-radius: 9px 9px 12px 12px;
  border: 1px solid var(--line);
  background: var(--card-2);
  color: var(--ink-3);
  font-size: calc(9px * var(--fs));
  padding: 0;
  display: grid;
  place-items: center;
}
.tooth.on { background: var(--accent-soft); border-color: var(--accent-2); color: var(--accent); }
.tooth-legend { font-size: calc(12px * var(--fs)); color: var(--ink-3); line-height: 1.7; }

/* ---------------- 疫苗 ---------------- */
.vax-row { display: flex; gap: 12px; align-items: flex-start; padding: 13px 16px; border-top: .5px solid var(--line-2); }
.vax-row:first-child { border-top: 0; }
.vax-date { flex: none; width: 48px; text-align: center; }
.vax-date b { display: block; font-family: var(--serif); font-size: calc(15px * var(--fs)); font-weight: 500; }
.vax-date em { display: block; font-style: normal; font-size: calc(10px * var(--fs)); color: var(--ink-3); }
.vax-main { flex: 1; min-width: 0; }
.vax-title { font-size: calc(15px * var(--fs)); }
.vax-note { font-size: calc(12px * var(--fs)); color: var(--ink-3); margin-top: 2px; line-height: 1.6; }
.vax-rel { display: inline-block; margin-top: 5px; font-size: calc(11px * var(--fs)); color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 1px 8px; }
.vax-rel.over { color: var(--red); background: var(--red-soft); }
.record-group { padding: 12px 16px; border-top: .5px solid var(--line-2); }
.record-group:first-child { border-top: 0; }
.record-date { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.record-date b { font-family: var(--serif); font-size: calc(15px * var(--fs)); font-weight: 500; }
.record-date span { font-size: calc(11px * var(--fs)); color: var(--ink-3); }
.record-item { font-size: calc(14px * var(--fs)); color: var(--ink-2); line-height: 1.8; }
.record-clinic { font-size: calc(11.5px * var(--fs)); color: var(--ink-3); margin-top: 2px; }
.scan-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: var(--radius);
  background: linear-gradient(150deg, var(--card) 0%, var(--accent-soft) 120%);
  border: .5px solid var(--accent-soft);
  box-shadow: var(--shadow-sm);
}
.scan-icon {
  width: 46px; height: 46px;
  border-radius: 14px;
  background: var(--card);
  display: grid; place-items: center;
  flex: none;
  color: var(--accent);
}
.scan-icon svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.scan-main { flex: 1; min-width: 0; }
.scan-main b { font-size: calc(15px * var(--fs)); }
.scan-main p { font-size: calc(11.5px * var(--fs)); color: var(--ink-3); margin-top: 2px; line-height: 1.6; }

/* ---------------- 阶段 ---------------- */
.chip-strip { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: none; }
.chip-strip::-webkit-scrollbar { display: none; }
.chip {
  flex: none;
  border: .5px solid var(--line);
  background: var(--card);
  border-radius: 999px;
  padding: 7px 13px;
  font-size: calc(12.5px * var(--fs));
  color: var(--ink-2);
  display: flex; align-items: center; gap: 6px;
}
.chip i { width: 7px; height: 7px; border-radius: 50%; display: block; }
.chip.is-now { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.stage-card { background: var(--card); border: .5px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-sm); margin-bottom: 10px; overflow: hidden; }
.stage-card summary {
  list-style: none;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
}
.stage-card summary::-webkit-details-marker { display: none; }
.s-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.s-range { font-family: var(--serif); font-size: calc(17px * var(--fs)); }
.s-theme { font-size: calc(12px * var(--fs)); color: var(--ink-3); }
.now-tag { font-size: calc(10px * var(--fs)); color: var(--accent); background: var(--accent-soft); padding: 1px 7px; border-radius: 999px; }
.s-chev { margin-left: auto; color: var(--ink-3); transition: transform .2s; }
.stage-card[open] .s-chev { transform: rotate(90deg); }
.stage-body { padding: 0 16px 18px; border-top: .5px solid var(--line-2); }
.stage-line { font-family: var(--serif); font-size: calc(17px * var(--fs)); line-height: 1.8; color: var(--ink-2); padding: 14px 0 4px; }
.stage-block { margin-top: 14px; }
.stage-block h4 {
  font-size: calc(12px * var(--fs));
  letter-spacing: .12em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.dotlist li, .warnlist li, .asklist li {
  position: relative;
  padding-left: 14px;
  font-size: calc(14px * var(--fs));
  color: var(--ink-2);
  line-height: 1.8;
  margin-bottom: 3px;
}
.dotlist li::before { content: "·"; position: absolute; left: 2px; color: var(--accent); }
.warnlist li::before { content: "!"; position: absolute; left: 2px; color: var(--accent); font-size: 10px; top: 3px; }
.asklist li::before { content: "?"; position: absolute; left: 2px; color: var(--ink-3); font-size: 11px; top: 3px; }
.mini { display: flex; gap: 9px; margin-bottom: 8px; align-items: flex-start; }
.mini .mk {
  flex: none; width: 22px; height: 22px; border-radius: 7px;
  background: var(--accent-soft); color: var(--accent);
  font-size: calc(11px * var(--fs)); display: grid; place-items: center;
  margin-top: 3px;
}
.mini p { font-size: calc(14px * var(--fs)); color: var(--ink-2); line-height: 1.75; }
.play { padding: 10px 0; border-top: .5px solid var(--line-2); }
.play:first-of-type { border-top: 0; padding-top: 0; }
.play-top { display: flex; align-items: baseline; gap: 8px; }
.play-top b { font-size: calc(14.5px * var(--fs)); font-weight: 500; }
.play-top em { font-style: normal; font-size: calc(11px * var(--fs)); color: var(--ink-3); }
.play p { font-size: calc(13.5px * var(--fs)); color: var(--ink-2); line-height: 1.75; margin-top: 3px; }
.play .why { font-size: calc(11px * var(--fs)); color: var(--ink-3); }

/* ---------------- 统计 ---------------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 8px 0 2px; }
.stats > div { text-align: center; padding: 12px 4px; background: var(--card); border: .5px solid var(--line); border-radius: 16px; }
.stats b { display: block; font-family: var(--serif); font-size: calc(21px * var(--fs)); font-weight: 500; line-height: 1.2; }
.stats span { font-size: calc(10.5px * var(--fs)); color: var(--ink-3); }

/* ---------------- 设置 ---------------- */
.settings-group { margin-bottom: 18px; }
.settings-title { font-size: calc(12px * var(--fs)); letter-spacing: .14em; color: var(--ink-3); text-transform: uppercase; margin: 18px 4px 8px; }
.settings-list { background: var(--card); border: .5px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-sm); overflow: hidden; }
.settings-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-top: .5px solid var(--line-2);
  width: 100%;
  background: none;
  border-left: 0; border-right: 0; border-bottom: 0;
  text-align: left;
  font-size: calc(15px * var(--fs));
}
.settings-row:first-child { border-top: 0; }
.settings-row .sr-main { flex: 1; min-width: 0; }
.settings-row .sr-sub { display: block; font-size: calc(12px * var(--fs)); color: var(--ink-3); margin-top: 2px; line-height: 1.5; }
.settings-row .sr-side { flex: none; color: var(--ink-3); font-size: calc(13px * var(--fs)); display: flex; align-items: center; gap: 6px; }
.settings-row .sr-value { color: var(--ink-3); font-size: calc(13px * var(--fs)); }
.settings-row.plain { border-top: .5px solid var(--line-2); }
.install-card { background: var(--card); border: .5px solid var(--line); border-radius: 18px; padding: 16px; box-shadow: var(--shadow-sm); }
.install-card ol { padding-left: 18px; margin: 8px 0 0; }
.install-card li { font-size: calc(13px * var(--fs)); color: var(--ink-2); line-height: 1.9; }
.sync-state { display: flex; align-items: center; gap: 7px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); }
.dot.on { background: var(--green); }
.dot.warn { background: var(--accent); }

/* ---------------- 表单 / 按钮 ---------------- */
.field { display: block; margin-bottom: 14px; }
.field > span { display: block; font-size: calc(12px * var(--fs)); color: var(--ink-3); margin-bottom: 6px; letter-spacing: .04em; }
input[type="text"], input[type="number"], input[type="date"], input[type="password"], select, textarea {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--card-2);
  border-radius: 12px;
  padding: 11px 12px;
  font-size: calc(16px * var(--fs));
  color: var(--ink);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent-2); box-shadow: 0 0 0 3px var(--accent-soft); }
textarea { min-height: 120px; resize: vertical; line-height: 1.8; }
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b8273' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
  padding-right: 34px;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 13px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  font-size: calc(15px * var(--fs));
  padding: 12px 16px;
  min-height: 46px;
}
.btn:active { transform: scale(.985); }
.btn-primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn-accent { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-ghost { background: transparent; }
.btn-block { width: 100%; }
.btn-sm { min-height: 36px; padding: 7px 12px; font-size: calc(13px * var(--fs)); border-radius: 10px; }
.btn-row { display: flex; gap: 10px; }
.btn-row .btn { flex: 1; }
.icon-btn {
  width: 36px; height: 36px;
  border: .5px solid var(--line);
  border-radius: 50%;
  background: var(--card);
  color: var(--ink-2);
  display: grid; place-items: center;
  font-size: 17px;
}
.seg { display: flex; padding: 3px; background: var(--paper-2); border-radius: 999px; gap: 2px; }
.seg button {
  flex: 1;
  border: 0;
  background: none;
  border-radius: 999px;
  padding: 7px 8px;
  font-size: calc(12.5px * var(--fs));
  color: var(--ink-3);
  white-space: nowrap;
}
.seg button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: var(--shadow-sm); font-weight: 600; }
.switch {
  width: 50px; height: 30px;
  border-radius: 999px;
  border: 0;
  background: var(--paper-2);
  position: relative;
  flex: none;
  transition: background .2s;
}
.switch::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
  transition: transform .2s;
}
.switch[aria-checked="true"] { background: var(--green); }
.switch[aria-checked="true"]::after { transform: translateX(20px); }

/* ---------------- 底部弹层 ---------------- */
.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(30, 24, 18, .38);
  opacity: 0;
  transition: opacity .22s ease;
}
.sheet-backdrop.open { opacity: 1; }
.sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 61;
  background: var(--card);
  border-radius: 26px 26px 0 0;
  padding: 8px 18px calc(16px + var(--safe-bottom));
  max-height: 90dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateY(102%);
  transition: transform .28s cubic-bezier(.22, .8, .3, 1);
  box-shadow: 0 -10px 40px rgba(60, 40, 20, .18);
}
html[data-theme="dark"] .sheet-backdrop { background: rgba(0, 0, 0, .55); }
.sheet.open { transform: translateY(0); }
.sheet-grip { width: 38px; height: 5px; border-radius: 99px; background: var(--line); margin: 2px auto 12px; }
.sheet-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.sheet-head h2 { font-family: var(--serif); font-size: calc(21px * var(--fs)); font-weight: 600; flex: 1; }
.sheet-close { border: 0; background: var(--paper-2); color: var(--ink-2); width: 30px; height: 30px; border-radius: 50%; font-size: 18px; line-height: 1; }
.sheet-hint { font-size: calc(12.5px * var(--fs)); color: var(--ink-3); line-height: 1.7; margin: 6px 0 14px; }
.sheet-body { padding-top: 8px; }
.sheet-foot { display: flex; gap: 10px; padding-top: 16px; }
.sheet-foot .btn { flex: 1; }
html.sheet-open { overflow: hidden; }

/* 弹层里的编辑行 */
.edit-row { display: grid; grid-template-columns: 1fr 1fr 30px; gap: 8px; align-items: center; margin-bottom: 8px; }
.edit-row input, .edit-row select { font-size: calc(14px * var(--fs)); padding: 9px 10px; }
.edit-row .vax-del { border: 0; background: none; color: var(--ink-3); font-size: 20px; }
.edit-row .full { grid-column: 1 / -1; }
.plan-edit-row { display: grid; grid-template-columns: 34px 1fr 30px; gap: 8px; align-items: center; margin-bottom: 8px; }
.plan-edit-row input { font-size: calc(14px * var(--fs)); padding: 9px 10px; }
.plan-edit-row select { font-size: calc(13px * var(--fs)); padding: 9px 8px; }

/* ---------------- Toast / 更新条 ---------------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--tab-h) + var(--safe-bottom) + 16px);
  transform: translate(-50%, 20px);
  z-index: 80;
  max-width: 86vw;
  background: rgba(46, 42, 36, .94);
  color: #fdf8ee;
  font-size: calc(13.5px * var(--fs));
  line-height: 1.5;
  padding: 10px 16px;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.update-banner[hidden] { display: none; }
.update-banner {
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(var(--tab-h) + var(--safe-bottom) + 14px);
  z-index: 79;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  font-size: calc(13px * var(--fs));
}
.update-banner button {
  border: 0;
  background: var(--ink);
  color: var(--paper);
  border-radius: 10px;
  padding: 7px 12px;
  font-size: calc(12.5px * var(--fs));
}

/* 隐私模式 */
html[data-privacy="on"] .sensitive { filter: blur(6px); pointer-events: none; user-select: none; }

/* 宽一点的屏幕 */
@media (min-width: 600px) {
  .main { padding-top: 24px; }
  .hero-age { font-size: calc(62px * var(--fs)); }
}


/* ===== 深色模式：中性灰，去掉黄褐感（覆盖旧配色） ===== */
html[data-theme="dark"] {
  --paper: #0F1113; --paper-2: #17191C; --card: #1B1E22; --card-2: #202328;
  --ink: #F3F4F6; --ink-2: #C9CDD2; --ink-3: #8E939A;
  --line: #2C3036; --line-2: #24282D;
  --accent: #E08B63; --accent-2: #D99A72; --accent-soft: #2B211C;
  --green: #93B58C; --green-soft: #1E2A1D;
  --red: #E58A7A; --red-soft: #31201D;
  --shadow: 0 10px 30px rgba(0,0,0,.45); --shadow-sm: 0 2px 10px rgba(0,0,0,.35);
}
@media (prefers-color-scheme: dark) {
  html[data-theme="system"] {
    --paper: #0F1113; --paper-2: #17191C; --card: #1B1E22; --card-2: #202328;
    --ink: #F3F4F6; --ink-2: #C9CDD2; --ink-3: #8E939A;
    --line: #2C3036; --line-2: #24282D;
    --accent: #E08B63; --accent-2: #D99A72; --accent-soft: #2B211C;
    --green: #93B58C; --green-soft: #1E2A1D;
    --red: #E58A7A; --red-soft: #31201D;
    --shadow: 0 10px 30px rgba(0,0,0,.45); --shadow-sm: 0 2px 10px rgba(0,0,0,.35);
  }
}

/* ===== 疫苗页紧凑排版 ===== */
.scan-card.compact { padding: 12px 14px; gap: 10px; }
.scan-card.compact .scan-icon { width: 38px; height: 38px; border-radius: 12px; }
.scan-card.compact .scan-icon svg { width: 22px; height: 22px; }
.scan-card.compact .scan-main b { font-size: calc(14px * var(--fs)); }
.scan-card.compact .scan-main p { font-size: calc(11px * var(--fs)); margin-top: 1px; }
.vaxc-list { padding: 0; }
.vaxc { display: flex; align-items: flex-start; gap: 8px; padding: 9px 12px; border-top: .5px solid var(--line-2); }
.vaxc:first-child { border-top: 0; }
.vaxc.done .vaxc-title { color: var(--ink-3); text-decoration: line-through; }
.vaxc .check { width: 20px; height: 20px; margin-top: 2px; }
.vaxc-date { flex: none; width: 44px; font-size: calc(12px * var(--fs)); color: var(--ink-2); font-variant-numeric: tabular-nums; padding-top: 1px; }
.vaxc-main { flex: 1; min-width: 0; }
.vaxc-title { font-size: calc(14px * var(--fs)); line-height: 1.4; }
.vaxc-title .tag { margin-left: 4px; }
.vaxc-rel { float: right; font-size: calc(10.5px * var(--fs)); color: var(--accent); margin-left: 6px; }
.vaxc-rel.over { color: var(--red); }
.vaxc-note { margin-top: 4px; font-size: calc(11.5px * var(--fs)); color: var(--ink-3); line-height: 1.6; }
.vaxc-more { flex: none; border: 0; background: none; color: var(--ink-3); font-size: 18px; width: 20px; padding: 0; }
.rec-group { border-top: .5px solid var(--line-2); }
.rec-group:first-child { border-top: 0; }
.rec-row { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 12px; background: none; border: 0; text-align: left; }
.rec-date { flex: none; width: 44px; display: flex; flex-direction: column; }
.rec-date b { font-family: var(--serif); font-size: calc(13.5px * var(--fs)); font-weight: 500; }
.rec-date em { font-style: normal; font-size: calc(9.5px * var(--fs)); color: var(--ink-3); }
.rec-main { flex: 1; min-width: 0; }
.rec-line { display: block; font-size: calc(13px * var(--fs)); line-height: 1.4; color: var(--ink); }
.rec-sub { display: block; font-size: calc(10.5px * var(--fs)); color: var(--ink-3); margin-top: 1px; }
.rec-count { flex: none; font-size: calc(10.5px * var(--fs)); color: var(--ink-3); }
.rec-detail { padding: 0 12px 8px 65px; }
.rec-det-line { font-size: calc(11px * var(--fs)); color: var(--ink-3); line-height: 1.8; border-top: .5px dashed var(--line-2); padding-top: 4px; margin-top: 4px; }
.plan-line { display: grid; grid-template-columns: 112px 1fr 64px 26px; gap: 6px; align-items: center; margin-bottom: 8px; }
.plan-line input, .plan-line select { font-size: calc(12.5px * var(--fs)); padding: 8px 7px; border-radius: 9px; }
.plan-line .del { font-size: 18px; padding: 0; }


/* ===== 北欧式可读性：更大字号、更少留白、更高对比 ===== */
body { font-size: calc(18px * var(--fs)); line-height: 1.62; }
.main { padding: 8px 12px calc(var(--tab-h) + var(--safe-bottom) + 16px); }
.page-head { padding: 2px 2px 10px; }
.page-title { font-size: calc(26px * var(--fs)); margin: 5px 0 4px; line-height: 1.2; }
.page-sub { font-size: calc(13.5px * var(--fs)); line-height: 1.55; }
.sec-head { margin: 16px 2px 7px; }
.sec-head h2 { font-size: calc(18px * var(--fs)); }
.card { padding: 13px; }
.card + .card { margin-top: 9px; }
.hero { padding: 15px 13px 13px; border-radius: 22px; }
.hero-age { font-size: calc(48px * var(--fs)); margin: 8px 0 0; }
.hero-sub { font-size: calc(12.5px * var(--fs)); margin-top: 4px; }
.stagebar { margin: 12px 0 6px; }
.row, .list-row, .settings-row, .vaxc { padding: 9px 11px; }
.row p { font-size: calc(15px * var(--fs)); line-height: 1.55; }
.row .row-title, .list-row .lr-title { font-size: calc(15.5px * var(--fs)); }
.qbtn { padding: 9px 3px 8px; border-radius: 13px; }
.qbtn svg { width: 22px; height: 22px; }
.quick-grid { gap: 7px; }
.stats > div { padding: 8px 2px; }
.stats b { font-size: calc(19px * var(--fs)); }
.tabbar-inner { height: 50px; }
.tab { font-size: 11px; }
.tab svg { width: 24px; height: 24px; }
.scan-card.compact { padding: 10px 12px; }
.act-title { font-size: calc(21px * var(--fs)); margin-bottom: 6px; }
.act-desc { font-size: calc(15px * var(--fs)); line-height: 1.6; }
.hint { font-size: calc(12.5px * var(--fs)); line-height: 1.55; margin-top: 6px; }
.small { font-size: calc(13px * var(--fs)); }
:root { --ink-2: #4a463f; --ink-3: #6f675c; --line: #d9cdb9; }


/* 疫苗地点全称，允许换行；删除按钮更疏离 */
.rec-sub { white-space: normal; line-height: 1.5; }
.rec-row { padding: 10px 12px; }
.grow-row, .log-row { padding: 10px 2px; }
.grow-row .del, .log-row .del { padding: 4px 10px; margin-left: 6px; color: var(--ink-3); }
.card .sec-head { margin-top: 14px; }
.qbtn:active { transform: scale(.98); }


/* 疫苗行信息层次：标题 / 小字 meta（标签+时间），不再浮动 */
.vaxc-date { width: 46px; text-align: left; }
.vaxc-date b { display: block; font-weight: 500; }
.vaxc-date em { display: block; font-style: normal; font-size: calc(9.5px * var(--fs)); color: var(--ink-3); }
.vaxc-title { font-size: calc(14.5px * var(--fs)); line-height: 1.35; }
.vaxc-meta { display: flex; align-items: center; gap: 5px; margin-top: 3px; flex-wrap: wrap; }
.vaxc-meta .tag { margin-left: 0; }
.vaxc-rel { margin-left: auto; font-size: calc(10.5px * var(--fs)); color: var(--accent); }
.vaxc-rel.over { color: var(--red); }


/* ============================================================
   设计系统 v2：北欧式信息优先
   - 8pt 间距 / 6 级字号 / 单一圆角与边框层级
   - 去编号、去光晕、去双阴影
   ============================================================ */
:root {
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --radius: 16px; --radius-sm: 12px; --radius-pill: 999px;
  --shadow: none; --shadow-sm: none;
}
/* 字号系统：正文 18，辅助 13，最小 11.5 */
body { font-size: calc(18px * var(--fs)); line-height: 1.65; }
.page-title { font-size: calc(27px * var(--fs)); font-weight: 700; letter-spacing: -.01em; }
.page-sub { font-size: calc(13.5px * var(--fs)); line-height: 1.6; color: var(--ink-2); }
.eyebrow { font-size: calc(11.5px * var(--fs)); letter-spacing: .12em; text-transform: none; font-weight: 600; }
.sec-head { margin: 22px 2px 8px; gap: 0; }
.sec-head .num { display: none; }
.sec-head h2 { font-size: calc(17.5px * var(--fs)); font-weight: 700; letter-spacing: 0; }
.sec-head .meta, .sec-link { font-size: calc(12px * var(--fs)); }
/* 卡片：只留边框，去掉阴影/渐变堆叠 */
.card, .rows, .list, .hero, .settings-list, .install-card, .stage-card {
  box-shadow: none !important;
  border-radius: var(--radius);
  border: .5px solid var(--line);
}
.card { padding: var(--s3) var(--s3); }
.card + .card { margin-top: 8px; }
.hero { padding: var(--s4) var(--s3); text-align: left; background: var(--card); }
.hero::after { display: none; }
.seal { display: none; }
.hero-name { font-size: calc(12px * var(--fs)); }
.hero-age { font-size: calc(46px * var(--fs)); margin: 6px 0 0; line-height: 1.05; }
.hero-sub { font-size: calc(12.5px * var(--fs)); margin-top: 5px; }
.stagebar { margin: 14px 0 6px; height: 4px; }
.stagebar-label { font-size: calc(11.5px * var(--fs)); }
.hero-link { font-size: calc(13px * var(--fs)); margin-top: 10px; padding: 4px 0; text-align: left; }
/* 行/列表 */
.row, .list-row, .settings-row { padding: 11px 12px; gap: 10px; }
.row .k { width: 26px; height: 26px; border-radius: 8px; font-size: 12px; }
.row p { font-size: calc(15px * var(--fs)); line-height: 1.6; }
.list-row .lr-title { font-size: calc(15px * var(--fs)); }
.list-row .lr-sub, .settings-row .sr-sub { font-size: calc(12px * var(--fs)); line-height: 1.5; }
/* 按钮：统一高度和圆角 */
.btn, .btn-primary, .btn-accent, .btn-ghost { min-height: 44px; border-radius: var(--radius-sm); font-size: calc(15px * var(--fs)); font-weight: 600; }
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-ghost { background: transparent; }
.icon-btn { width: 40px; height: 40px; }
/* 触控目标 */
.check { width: 26px; height: 26px; }
.vaxc { padding: 11px 12px; gap: 10px; }
.vaxc .check { margin-top: 1px; }
.vaxc-more { width: 32px; height: 32px; font-size: 20px; }
.vaxc-date { width: 46px; }
.vaxc-title { font-size: calc(15px * var(--fs)); }
.vaxc-meta { margin-top: 3px; }
.tag { font-size: calc(11px * var(--fs)); padding: 2px 8px; margin-left: 0; }
.vax-later { margin-top: 8px; border: .5px solid var(--line); border-radius: var(--radius); background: var(--card); overflow: hidden; }
.vax-later summary { padding: 12px 14px; font-size: calc(13px * var(--fs)); color: var(--ink-2); list-style: none; }
.vax-later summary::-webkit-details-marker { display: none; }
.vax-later .list { border: 0; border-top: .5px solid var(--line-2); border-radius: 0; }
/* 统计 */
.stats { gap: 6px; }
.stats > div { border-radius: var(--radius-sm); padding: 10px 2px; }
.stats b { font-size: calc(20px * var(--fs)); }
.stats span { font-size: calc(11px * var(--fs)); }
/* 底栏：选中态更明确 */
.tabbar-inner { height: 52px; }
.tab { font-size: 11.5px; gap: 3px; }
.tab[aria-selected="true"] { color: var(--accent); }
.tab[aria-selected="true"] svg { stroke-width: 2.2; }
/* 表单统一 */
input[type="text"], input[type="number"], input[type="date"], input[type="password"], select, textarea {
  min-height: 44px; border-radius: var(--radius-sm); font-size: 16px; background: var(--card-2);
}
/* 深色：用边框做层级，不用阴影 */
html[data-theme="dark"] .card, html[data-theme="dark"] .list,
html[data-theme="dark"] .rows, html[data-theme="dark"] .hero { background: var(--card); }
/* 其它细节 */
.qbtn { min-height: 74px; }
.qbtn span { font-size: 12.5px; }
.hint { font-size: calc(12px * var(--fs)); color: var(--ink-3); }
.empty { font-size: calc(13px * var(--fs)); color: var(--ink-3); }


/* 生长记录：固定三列网格，日期不与内容错位 */
.glist { margin-top: 10px; }
.grow-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 34px;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-top: .5px solid var(--line-2);
}
.grow-row:first-child { border-top: 0; }
.grow-row .gd { display: flex; flex-direction: column; line-height: 1.2; }
.grow-row .gd b { font-family: var(--sans); font-size: calc(13px * var(--fs)); font-weight: 600; font-variant-numeric: tabular-nums; }
.grow-row .gd em { font-style: normal; font-size: calc(10px * var(--fs)); color: var(--ink-3); }
.grow-row .gv { font-size: calc(14px * var(--fs)); line-height: 1.5; color: var(--ink-2); }
.grow-row .gv b { color: var(--ink); }
.grow-row .grow-note { display: block; font-size: calc(11.5px * var(--fs)); color: var(--ink-3); margin-top: 1px; }
.grow-row .del { align-self: center; }

/* 疫苗：每行/每组独立色块，左侧色条区分类型与状态 */
.vaxc-list { background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible; }
.vaxc {
  position: relative;
  background: var(--card);
  border: .5px solid var(--line);
  border-radius: var(--radius-sm);
  margin: 0 0 6px;
  padding: 11px 12px 11px 15px !important;
  overflow: hidden;
}
.vaxc:first-child { border-top: .5px solid var(--line); }
.vaxc::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--line);
}
.vaxc.tag-free::before { background: var(--green); }
.vaxc.tag-self::before { background: var(--accent); }
.vaxc.tag-exam::before { background: var(--ink-3); }
.vaxc.is-over::before { background: var(--red); }
.vaxc.done { opacity: .55; }
.record-list { background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible; }
.rec-group {
  background: var(--card);
  border: .5px solid var(--line);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
  overflow: hidden;
}
.rec-group:nth-child(even) { background: var(--card-2); }
.rec-group .rec-row { padding: 10px 12px; }
.rec-detail { background: var(--paper-2); }
.vax-later { border: .5px solid var(--line); border-radius: var(--radius-sm); background: transparent; margin-top: 8px; overflow: hidden; }
.vax-later summary { background: var(--card-2); }


/* 恢复第一版的拱形头像框 */
.hero-row { display: flex; align-items: center; gap: 16px; }
.avatar-frame {
  position: relative;
  flex: none;
  width: 86px; height: 100px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 43px 43px 16px 16px;
  background: var(--card);
  box-shadow: 0 6px 18px rgba(90, 65, 40, .10);
  cursor: pointer;
}
.avatar-frame img, .avatar-ph {
  display: block; width: 100%; height: 100%;
  border-radius: 40px 40px 13px 13px;
  object-fit: cover;
}
.avatar-ph {
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 28%, #f6dfcb 0%, #e7c5a6 100%);
  color: var(--accent);
  font-family: var(--serif);
  font-size: 38px;
}
.avatar-seal {
  position: absolute; right: -7px; bottom: -7px;
  width: 27px; height: 27px;
  display: grid; place-items: center;
  background: var(--card);
  border: 1px solid var(--accent-2);
  border-radius: 7px;
  color: var(--accent);
  font-family: var(--serif);
  font-size: 15px;
  transform: rotate(5deg);
}
.hero-main { min-width: 0; flex: 1; }
.hero-age { font-size: calc(42px * var(--fs)); }
.hero-quote {
  margin: 10px 0 2px;
  font-family: var(--serif);
  font-size: calc(13px * var(--fs));
  color: var(--ink-3);
  letter-spacing: .04em;
}
html[data-theme="dark"] .avatar-ph { background: radial-gradient(circle at 50% 28%, #3b2a20 0%, #2a1f18 100%); }


/* 「接下来」疫苗：浅色块区分类型/状态 */
.vax-reminders { background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible; }
.vax-reminders .vax-row {
  position: relative;
  background: var(--card);
  border: .5px solid var(--line);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
  padding: 11px 12px 11px 15px;
  overflow: hidden;
}
.vax-reminders .vax-row::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--line);
}
.vax-reminders .vax-row.tag-free { background: color-mix(in srgb, var(--green-soft) 50%, var(--card)); }
.vax-reminders .vax-row.tag-self { background: color-mix(in srgb, var(--accent-soft) 45%, var(--card)); }
.vax-reminders .vax-row.tag-exam { background: var(--card-2); }
.vax-reminders .vax-row.tag-free::before { background: var(--green); }
.vax-reminders .vax-row.tag-self::before { background: var(--accent); }
.vax-reminders .vax-row.tag-exam::before { background: var(--ink-3); }
.vax-reminders .vax-row.is-over { background: color-mix(in srgb, var(--red-soft) 55%, var(--card)); }
.vax-reminders .vax-row.is-over::before { background: var(--red); }

/* 疫苗页「接下来」同样给整行浅色块，而不只是左侧细条 */
.vaxc.tag-free { background: color-mix(in srgb, var(--green-soft) 45%, var(--card)); }
.vaxc.tag-self { background: color-mix(in srgb, var(--accent-soft) 40%, var(--card)); }
.vaxc.tag-exam { background: var(--card-2); }
.vaxc.is-over { background: color-mix(in srgb, var(--red-soft) 50%, var(--card)); }


/* 头像编辑角标 */
.avatar-frame { cursor: pointer; }
.avatar-edit {
  position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%);
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(46,42,36,.72); color: #fff;
  font-size: 13px; line-height: 1;
  border: 2px solid var(--card);
}
label.settings-row { cursor: pointer; }
label.settings-row input[type="file"] { display: none; }


/* 头像裁切 */
.crop-stage {
  position: relative;
  width: 300px; height: 300px;
  margin: 14px auto 10px;
  overflow: hidden;
  border-radius: 18px;
  background: #111;
  touch-action: none;
  user-select: none;
}
.crop-stage img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; pointer-events: none; }
.crop-zoom { display: flex; align-items: center; gap: 10px; margin: 10px 0 4px; font-size: 12px; color: var(--ink-3); }
.crop-zoom input { flex: 1; }
.avatar-edit { display: none !important; }


/* ============================================================
   设计系统 v2.2 · 体验修复
   1) 首屏：记录入口前置、示例条降级
   2) 可读性：陶土小字加深、微字下限、曲线字号与留白
   3) 桌面：内容与底栏同宽
   4) 交互：补记时间、撤销删除、聚焦可见
   ============================================================ */

:root {
  --accent-ink: #0062CC;      /* 小字用的深蓝，对纸色 ≥ 4.5:1 */
  --accent-ink-soft: #8E3B16;
}
html[data-theme="dark"] { --accent-ink: #E08B63; --accent-ink-soft: #F0A57D; }
@media (prefers-color-scheme: dark) {
  html[data-theme="system"] { --accent-ink: #E08B63; --accent-ink-soft: #F0A57D; }
}

/* —— 陶土色小字统一加深到 AA —— */
a,
.eyebrow,
.sec-link,
.hero-link,
.act-kicker,
.now-tag,
.tag-self,
.stage-block h4,
.dotlist li::before,
.warnlist li::before,
.vaxc-rel,
.vax-rel { color: var(--accent-ink); }
.qbtn svg { stroke: var(--accent-ink); }

/* —— 示例资料条：降级为一条中性提示，不再抢首屏 —— */
.setup-banner {
  margin: 0 0 10px;
  padding: 7px 10px;
  border-radius: 10px;
  border: .5px solid var(--line);
  background: var(--card-2);
  color: var(--ink-2);
  font-size: calc(12px * var(--fs));
  line-height: 1.45;
  gap: 8px;
}
.setup-banner button {
  flex: none;
  min-height: 30px;
  padding: 4px 9px;
  border: .5px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--accent-ink);
  font-size: calc(11.5px * var(--fs));
}

/* —— 首屏压缩：把「记一笔」提到第一屏里 —— */
.hero { padding: 14px 13px 12px; }
.hero-quote { margin: 8px 0 0; }
.hero-link { margin-top: 2px; padding: 2px 0; font-size: calc(12.5px * var(--fs)); }
.stagebar { margin: 10px 0 5px; }
.today-summary {
  margin-top: 9px;
  font-size: calc(13px * var(--fs));
  line-height: 1.55;
  color: var(--ink-2);
}

/* —— 微字下限：不再出现 9.5px 级的小字 —— */
.vaxc-date em,
.rec-date em,
.grow-row .gd em { font-size: calc(10.5px * var(--fs)); }
.rec-sub,
.rec-count,
.vaxc-rel,
.rec-det-line { font-size: calc(11.5px * var(--fs)); }
.vaxc-date,
.chip { font-size: calc(12px * var(--fs)); }
.now-tag { font-size: calc(11px * var(--fs)); }
.tag { font-size: calc(11px * var(--fs)); }
.tooth { font-size: calc(10px * var(--fs)); }
.tab { font-size: 12px; }
.gform label { font-size: calc(12px * var(--fs)); }
.scan-main p { font-size: calc(11.5px * var(--fs)); }
.play-top em,
.play .why { font-size: calc(11.5px * var(--fs)); }
.s-theme { font-size: calc(12.5px * var(--fs)); }

/* —— 生长曲线：字号、单位、点标签（结构在 records.js） —— */
.chart { margin: 6px 0 8px; }
.chart-meta { display: flex; flex-direction: column; line-height: 1.4; min-width: 0; }
.chart-meta b { font-size: calc(14px * var(--fs)); font-weight: 600; color: var(--ink); }
.chart-meta span { font-size: calc(11.5px * var(--fs)); color: var(--ink-3); }
.chart .axis { fill: var(--ink-3); font-size: calc(10.5px * var(--fs)); }
.chart .empty-hint {
  font-size: calc(11.5px * var(--fs));
  paint-order: stroke;
  stroke: var(--card);
  stroke-width: 4px;
  stroke-linejoin: round;
}
.chart .ref { stroke: var(--accent-2); stroke-width: 1.2; }
.chart .dotlabel {
  fill: var(--ink);
  font-size: calc(11.5px * var(--fs));
  font-weight: 600;
  paint-order: stroke;
  stroke: var(--card);
  stroke-width: 3px;
  stroke-linejoin: round;
}
.chart .reflabel { display: none; }

/* —— 今日概览 / 统计 —— */
.stats { gap: 6px; padding: 6px 0 2px; }
.stats > div { padding: 10px 2px 8px; border-radius: 14px; }
.stats b { font-size: calc(19px * var(--fs)); }
.stats b small {
  font-family: var(--sans);
  font-size: calc(11px * var(--fs));
  font-weight: 400;
  color: var(--ink-3);
  margin-left: 2px;
}
.stats span { font-size: calc(11px * var(--fs)); }

/* —— 记录行：可点开编辑、删除可撤销 —— */
.log-row { cursor: pointer; min-height: 52px; padding-top: 8px; padding-bottom: 8px; }
.log-row:active { background: var(--card-2); }
.log-row .lr-edit {
  flex: none;
  margin-left: auto;
  padding: 1px 6px;
  border: .5px solid var(--line);
  border-radius: 6px;
  font-size: calc(10.5px * var(--fs));
  color: var(--ink-3);
}
.log-row .del { min-width: 40px; min-height: 40px; font-size: 20px; }
.grow-row .del { min-width: 40px; min-height: 40px; font-size: 20px; }
.log-row:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; }

/* —— Toast：支持「撤销」按钮 —— */
.toast {
  max-width: 90vw;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 16px;
  text-align: left;
}
.toast.has-action { pointer-events: auto; }
.toast-msg { flex: 1; min-width: 0; }
.toast-action {
  flex: none;
  border: 0;
  border-left: .5px solid rgba(255, 255, 255, .3);
  padding: 2px 0 2px 12px;
  background: none;
  color: #F2B48C;
  font-size: calc(13px * var(--fs));
  font-weight: 700;
}

/* —— 补记时间行 —— */
input[type="time"] {
  width: 100%;
  min-height: 44px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card-2);
  color: var(--ink);
  font-size: 16px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.time-row { display: flex; align-items: center; gap: 6px; }
.time-row input[type="time"] { flex: 1; min-width: 0; }
.time-chip {
  flex: none;
  min-height: 40px;
  padding: 0 9px;
  border: .5px solid var(--line);
  border-radius: 9px;
  background: var(--card);
  color: var(--ink-2);
  font-size: calc(12px * var(--fs));
}
.time-chip.on { background: var(--accent-soft); border-color: var(--accent-2); color: var(--accent-ink); }
.time-hint { margin: 5px 0 0; font-size: calc(11px * var(--fs)); color: var(--ink-3); line-height: 1.5; }
.qbtn.on { background: var(--accent-soft); border-color: var(--accent-2); color: var(--accent-ink); }

/* —— 空状态里的动作 —— */
.empty.empty-action { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 16px 10px; }
.empty-action p { margin: 0; }
.empty-action .sec-link { margin: 0; }

/* —— 弹层关闭按钮的触控区 —— */
.sheet-close { width: 36px; height: 36px; }

/* —— 键盘可达性 —— */
button:focus-visible,
a:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 2px;
}

/* —— 桌面 / 平板：内容列与底栏同宽，不再被拉满整屏 —— */
@media (min-width: 700px) {
  .topbar-inner { max-width: 560px; margin: 0 auto; }
  .tabbar-inner { max-width: 560px; margin: 0 auto; }
  .hero-age { font-size: calc(46px * var(--fs)); }
}


/* ============================================================
   v2.3 · 体重记录导入（米家截图 / CSV / JSON）
   ============================================================ */
.wi-list {
  border: .5px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  max-height: 46dvh;
  overflow-y: auto;
  margin-top: 4px;
}
.wi-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-top: .5px solid var(--line-2);
  font-size: calc(14px * var(--fs));
}
.wi-row:first-child { border-top: 0; }
.wi-d {
  flex: none;
  width: 70px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  font-size: calc(12.5px * var(--fs));
}
.wi-w { flex: 1; min-width: 0; color: var(--ink); font-variant-numeric: tabular-nums; }
.wi-w small { color: var(--ink-3); font-size: calc(11.5px * var(--fs)); }
.wi-tag { flex: none; font-size: calc(11px * var(--fs)); border-radius: 999px; padding: 1px 8px; }
.wi-new { background: var(--green-soft); color: var(--green); }
.wi-fill { background: var(--accent-soft); color: var(--accent-ink); }
.wi-dup { background: var(--paper-2); color: var(--ink-3); }
.wi-alert {
  margin: 0 0 10px;
  padding: 9px 11px;
  border-radius: 10px;
  background: var(--red-soft);
  color: var(--red);
  font-size: calc(12.5px * var(--fs));
  line-height: 1.6;
}

/* —— v2.3.1 修复：相册 / 拍照两个入口（iOS 上 capture 会强制禁用相册） —— */
.ocr-pick-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ocr-picker.ocr-picker-sm {
  min-height: 104px;
  flex-direction: column;
  gap: 7px;
  font-size: calc(13.5px * var(--fs));
  color: var(--ink-2);
}
.ocr-pick-ico { font-size: 24px; line-height: 1; }

/* 预览图限高，避免长截图把「开始识别」按钮顶出屏幕 */
.ocr-preview { background: var(--paper-2); }
.ocr-preview img {
  max-height: 260px;
  width: 100%;
  object-fit: contain;
  margin: 0 auto;
}

/* —— v2.4 批量截图：多选后的缩略图条 —— */
.wi-preview { padding: 10px; }
.wi-thumbs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.ocr-preview .wi-thumbs img {
  flex: none;
  width: 76px;
  height: 76px;
  max-height: none;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--card);
  margin: 0;
}
.wi-count { margin: 2px 0 0; font-size: calc(12px * var(--fs)); color: var(--ink-3); }


/* 生长曲线：类型/年龄范围切换、双轴合并、二级记录入口 */
.chart-card .metric-seg,
.chart-card .range-seg { display: grid; gap: 4px; margin: 0 0 6px; }
.chart-card .metric-seg { grid-template-columns: repeat(3, 1fr); }
.chart-card .range-seg { grid-template-columns: repeat(4, 1fr); }
.chart-card .seg { padding: 3px; border-radius: 11px; }
.chart-card .seg button { padding: 7px 2px; font-size: calc(12px * var(--fs)); border-radius: 9px; }
.chart-legend { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: calc(11px * var(--fs)); color: var(--ink-3); margin: 4px 0 2px; }
.chart-legend i { display: inline-block; width: 14px; height: 2px; border-radius: 2px; background: var(--accent); vertical-align: middle; margin-right: 4px; }
.chart-legend i.lg-h { background: var(--green); }
.chart-legend .lg-note { margin-left: auto; }
.chart { margin-top: 2px; }
.chart svg { display: block; width: 100%; height: auto; }
.chart .axis { font-size: 9.5px; fill: var(--ink-3); }
.chart .axis-h { fill: var(--green); }
.chart .dotlabel { font-size: 9.5px; fill: var(--ink-2); }
.chart .line-h { stroke: var(--green); }
.chart .dot-h { fill: var(--green); }
.chart .ref-h { stroke: var(--green); opacity: .38; }
.growth-summary {
  display: flex; align-items: center; gap: 10px;
  width: 100%; margin-top: 10px; padding: 10px 12px;
  background: var(--card-2); border: .5px solid var(--line);
  border-radius: 12px; text-align: left;
}
.growth-summary .gs-main { flex: 1; min-width: 0; font-size: calc(13.5px * var(--fs)); line-height: 1.5; }
.growth-summary .gs-side { flex: none; font-size: calc(11px * var(--fs)); color: var(--ink-3); }
.sheet-records .record-group { margin-bottom: 8px; }


/* ============================================================
   iOS 原生健康 / 相册风 · 全局重构
   ============================================================ */
:root {
  --paper: #F2F2F7; --paper-2: #F7F7FA; --card: #FFFFFF; --card-2: #E9E9EE;
  --ink: #1C1C1E; --ink-2: #3A3A3C; --ink-3: #8E8E93;
  --line: rgba(60,60,67,.20); --line-2: rgba(60,60,67,.11);
  --accent: #007AFF; --accent-2: #0A84FF; --accent-soft: #EAF2FF;
  --green: #34C759; --green-soft: #E9F8ED;
  --red: #FF3B30; --red-soft: #FDECEA;
  --shadow: none; --shadow-sm: none;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Microsoft YaHei", sans-serif;
  --serif: "Songti SC", "STSong", Georgia, serif;
  --tab-h: 54px;
}
html[data-theme="dark"] {
  --paper: #000000; --paper-2: #0B0B0D; --card: #1C1C1E; --card-2: #2C2C2E;
  --ink: #F2F2F7; --ink-2: #D1D1D6; --ink-3: #8E8E93;
  --line: rgba(84,84,88,.65); --line-2: rgba(84,84,88,.36);
  --accent: #0A84FF; --accent-2: #409CFF; --accent-soft: #10243B;
  --green: #30D158; --green-soft: #0E2A18;
  --red: #FF453A; --red-soft: #2E1412;
}
@media (prefers-color-scheme: dark) {
  html[data-theme="system"] {
    --paper: #000000; --paper-2: #0B0B0D; --card: #1C1C1E; --card-2: #2C2C2E;
    --ink: #F2F2F7; --ink-2: #D1D1D6; --ink-3: #8E8E93;
    --line: rgba(84,84,88,.65); --line-2: rgba(84,84,88,.36);
    --accent: #0A84FF; --accent-2: #409CFF; --accent-soft: #10243B;
    --green: #30D158; --green-soft: #0E2A18;
    --red: #FF453A; --red-soft: #2E1412;
  }
}
body { background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: calc(17px * var(--fs)); line-height: 1.5; }
.app { background: var(--paper); }
.topbar { background: color-mix(in srgb, var(--paper) 86%, transparent); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: .5px solid var(--line); }
.topbar-inner { height: 46px; padding: 0 16px; }
.topbar-title { font-size: 13px; font-weight: 600; color: var(--ink-3); letter-spacing: 0; }
.main { padding: 6px 16px calc(var(--tab-h) + env(safe-area-inset-bottom) + 24px); }

/* 大标题 */
.page-head { padding: 8px 2px 12px; }
.eyebrow { font-size: 13px; font-weight: 500; color: var(--ink-3); letter-spacing: 0; text-transform: none; margin-bottom: 3px; }
.page-title { font-family: var(--sans); font-size: calc(34px * var(--fs)); font-weight: 800; letter-spacing: -.025em; line-height: 1.12; margin: 0; color: var(--ink); }
.page-sub { font-size: calc(13.5px * var(--fs)); color: var(--ink-3); line-height: 1.5; margin-top: 5px; }
.sec-head { margin: 24px 4px 8px; gap: 6px; }
.sec-head .num { display: none; }
.sec-head h2 { font-family: var(--sans); font-size: calc(20px * var(--fs)); font-weight: 700; letter-spacing: -.01em; }
.sec-head .meta { font-size: 13px; color: var(--ink-3); }
.sec-link { font-size: 15px; color: var(--accent); font-weight: 500; }

/* 分组卡 / 列表 */
.card, .rows, .list, .settings-list, .install-card, .stage-card {
  background: var(--card); border: 0; border-radius: 18px; box-shadow: none;
}
.card { padding: 16px; }
.card + .card { margin-top: 12px; }
.row, .list-row, .settings-row { padding: 13px 16px; min-height: 54px; border-top: .5px solid var(--line); background: transparent; }
.row:first-child, .list-row:first-child, .settings-row:first-child { border-top: 0; }
.row .k { width: 30px; height: 30px; border-radius: 8px; background: var(--paper-2); color: var(--accent); font-size: 12px; }
.row p { font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.list-row .lr-title { font-size: 16px; font-weight: 500; }
.list-row .lr-sub { font-size: 13px; color: var(--ink-3); }
.settings-row .sr-sub { font-size: 13px; color: var(--ink-3); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); }
.dot.on { background: var(--green); }
.chev { color: var(--ink-3); }

/* 按钮 / 控件 */
.btn { min-height: 46px; border-radius: 12px; font-size: 17px; font-weight: 600; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:active { background: var(--accent-2); }
.btn-ghost { background: var(--card-2); color: var(--ink); }
.btn-block { width: 100%; }
.seg { background: var(--card-2); border-radius: 10px; padding: 2px; }
.seg button { border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--ink-2); padding: 7px 10px; }
.seg button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.10); }
.tag { border: 0; border-radius: 100px; padding: 2px 8px; font-size: 11px; font-weight: 600; }
.tag-free { background: var(--green-soft); color: var(--green); }
.tag-self { background: var(--accent-soft); color: var(--accent); }
.tag-exam, .tag-ai { background: var(--card-2); color: var(--ink-3); }
input, select, textarea { background: var(--card); color: var(--ink); border: .5px solid var(--line); border-radius: 10px; font-family: var(--sans); }

/* 今日 */
.photo-hero { position: relative; display: block; height: 236px; border-radius: 22px; overflow: hidden; margin: 2px 0 4px; background: var(--card-2); }
.photo-hero img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.photo-empty { display: grid; place-items: center; height: 100%; font-family: var(--serif); font-size: 64px; color: var(--ink-3); background: linear-gradient(160deg, var(--card-2), var(--paper-2)); }
.photo-ov { position: absolute; left: 0; right: 0; bottom: 0; padding: 52px 16px 15px; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.62)); }
.photo-ov b { font-size: 24px; font-weight: 700; letter-spacing: -.01em; }
.photo-ov small { display: block; font-size: 13px; opacity: .88; margin-top: 2px; }
.photo-edit { position: absolute; top: 12px; right: 12px; padding: 5px 11px; border-radius: 100px; background: rgba(0,0,0,.42); color: #fff; font-size: 11px; backdrop-filter: blur(10px); }
.ios-head { display: flex; align-items: baseline; justify-content: space-between; margin: 24px 4px 8px; }
.ios-head > span:first-child, .ios-head > button:first-child { font-family: var(--sans); font-size: 20px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.ios-head button { border: 0; background: none; color: var(--accent); font-size: 15px; font-weight: 500; padding: 0; }
.ios-head-meta { font-size: 13px; color: var(--ink-3); }
.ios-list { background: var(--card); border-radius: 18px; overflow: hidden; }
.ios-row { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 12px 16px; border-top: .5px solid var(--line); }
.ios-row:first-child { border-top: 0; }
.ios-ico { flex: none; width: 34px; height: 34px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-size: 12px; }
.ios-ico.green { background: var(--green-soft); color: var(--green); }
.ios-ico.gray { background: var(--card-2); color: var(--ink-3); }
.ios-ico.orange { background: #FFF3E8; color: #FF9500; }
.ios-ico.purple { background: #F2EEFF; color: #7C5CFF; }
html[data-theme="dark"] .ios-ico.orange { background: rgba(255,149,0,.16); }
html[data-theme="dark"] .ios-ico.purple { background: rgba(124,92,255,.18); }
.ios-ico svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ios-main { flex: 1; min-width: 0; }
.ios-main b { display: block; font-size: 16px; font-weight: 600; color: var(--ink); }
.ios-main small { display: block; font-size: 13px; color: var(--ink-3); margin-top: 2px; line-height: 1.4; }
.ios-side { flex: none; font-size: 13px; color: var(--ink-3); }
.ios-side.over { color: var(--red); }
.ios-action { border: 0; background: var(--accent-soft); color: var(--accent); border-radius: 8px; padding: 7px 10px; font-size: 13px; font-weight: 600; }
.ios-stat-row { display: flex; gap: 8px; }
.ios-stat { flex: 1; background: var(--card); border-radius: 16px; padding: 12px 2px; text-align: center; }
.ios-stat b { display: block; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.ios-stat span { font-size: 11px; color: var(--ink-3); }
.ios-footnote { margin: 8px 4px 0; font-size: 12px; color: var(--ink-3); line-height: 1.5; }
.ios-card { border: 0; }
.act-kicker { font-size: 12px; color: var(--accent); font-weight: 600; }
.act-title { font-family: var(--sans); font-size: 21px; font-weight: 700; margin: 6px 0 4px; }
.act-desc { font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.act-why { font-size: 13px; color: var(--ink-3); margin-top: 8px; }
.hint { font-size: 12px; line-height: 1.5; color: var(--ink-3); }
.empty { font-size: 13px; color: var(--ink-3); }

/* 快捷记录 */
.quick-grid { gap: 8px; }
.qbtn { min-height: 74px; background: var(--card); border: 0; border-radius: 16px; box-shadow: none; color: var(--accent); padding: 12px 2px; }
.qbtn svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.qbtn span { font-size: 12px; color: var(--ink-2); margin-top: 4px; }
.qbtn:active { background: var(--card-2); }
.stats { gap: 8px; }
.stats > div { background: var(--card); border: 0; border-radius: 16px; box-shadow: none; padding: 12px 2px; }
.stats b { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.stats small { font-size: 11px; color: var(--ink-3); }
.stats span { font-size: 11px; color: var(--ink-3); }

/* 疫苗：白色分组行，状态只用小色点/标签 */
.vaxc-list { background: var(--card) !important; border: 0 !important; border-radius: 18px; overflow: hidden; }
.vaxc { position: relative; background: var(--card) !important; border: 0 !important; border-top: .5px solid var(--line) !important; border-radius: 0 !important; margin: 0 !important; padding: 13px 16px 13px 16px !important; }
.vaxc:first-child { border-top: 0 !important; }
.vaxc::before { display: none; }
.vaxc-title::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 7px; vertical-align: 2px; background: var(--ink-3); }
.vaxc.tag-free .vaxc-title::before { background: var(--green); }
.vaxc.tag-self .vaxc-title::before { background: var(--accent); }
.vaxc.tag-exam .vaxc-title::before { background: var(--ink-3); }
.vaxc.is-over .vaxc-title::before { background: var(--red); }
.vaxc-title { font-size: 16px; font-weight: 500; }
.vaxc-date { width: 50px; color: var(--ink-3); }
.vaxc-date b { font-family: var(--sans); font-size: 15px; font-weight: 500; color: var(--ink); }
.vaxc-date em { font-size: 11px; color: var(--ink-3); }
.vaxc-meta .tag { background: var(--card-2); color: var(--ink-2); }
.vaxc-rel { color: var(--ink-3); font-size: 12px; }
.check { width: 24px; height: 24px; border: 1.5px solid var(--line); border-radius: 50%; background: transparent; }
.check[aria-checked="true"] { background: var(--accent); border-color: var(--accent); }
.vax-later { background: var(--card) !important; border: 0 !important; border-radius: 18px; margin-top: 12px; overflow: hidden; }
.vax-later summary { background: transparent; color: var(--ink-3); font-size: 14px; padding: 13px 16px; }
.vax-later .list { background: var(--card); border-radius: 0; border-top: .5px solid var(--line); }
.vax-later .vaxc:first-child { border-top: 0 !important; }
.rec-group, .record-list .rec-group { background: var(--card) !important; border: 0 !important; border-radius: 18px; margin-bottom: 10px; overflow: hidden; }
.rec-row { padding: 13px 16px; }
.rec-date b { font-family: var(--sans); font-size: 15px; font-weight: 500; }
.rec-date em { font-size: 11px; color: var(--ink-3); }
.rec-line { font-size: 15px; }
.rec-sub { font-size: 12px; color: var(--ink-3); }
.rec-count { font-size: 12px; color: var(--ink-3); }
.growth-summary { background: var(--card); border: 0; border-radius: 14px; }
.chart-card .metric-seg, .chart-card .range-seg { gap: 3px; }
.chart-legend { color: var(--ink-3); }
.gform label, .field { font-size: 13px; color: var(--ink-3); }
.gform input, .field input, .field textarea { font-size: 17px; }

/* 深色卡片层级 */
html[data-theme="dark"] .card, html[data-theme="dark"] .list, html[data-theme="dark"] .rows,
html[data-theme="dark"] .settings-list, html[data-theme="dark"] .ios-list,
html[data-theme="dark"] .vaxc-list, html[data-theme="dark"] .vaxc,
html[data-theme="dark"] .rec-group, html[data-theme="dark"] .qbtn,
html[data-theme="dark"] .stats > div, html[data-theme="dark"] .ios-stat,
html[data-theme="dark"] .growth-summary { background: var(--card); }
@media (prefers-color-scheme: dark) {
  html[data-theme="system"] .card, html[data-theme="system"] .list, html[data-theme="system"] .rows,
  html[data-theme="system"] .settings-list, html[data-theme="system"] .ios-list,
  html[data-theme="system"] .vaxc-list, html[data-theme="system"] .vaxc,
  html[data-theme="system"] .rec-group, html[data-theme="system"] .qbtn,
  html[data-theme="system"] .stats > div, html[data-theme="system"] .ios-stat,
  html[data-theme="system"] .growth-summary { background: var(--card); }
}

/* 底栏 */
.tabbar { background: color-mix(in srgb, var(--paper) 86%, transparent); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-top: .5px solid var(--line); }
.tabbar-inner { height: 54px; }
.tab { font-size: 10px; gap: 3px; color: var(--ink-3); }
.tab svg { width: 25px; height: 25px; stroke-width: 1.7; }
.tab[aria-selected="true"] { color: var(--accent); font-weight: 500; }

/* 弹层 / 设置 */
.sheet { background: var(--paper-2); }
.sheet-title { font-family: var(--sans); }


/* 隐藏重复的小标题栏，直接进入大标题（iOS 大标题） */
.topbar { display: none !important; }
.main { padding-top: calc(14px + env(safe-area-inset-top)); }
body { padding-top: 0; }


/* 疫苗标题保持墨色，状态只由小圆点和标签表达 */
.vaxc-title { color: var(--ink) !important; font-weight: 500; }
.vaxc.done .vaxc-title { color: var(--ink-3) !important; text-decoration: line-through; }
.vaxc-title::before { width: 8px; height: 8px; margin-right: 8px; }


/* 阶段与设置：iOS 分组细节 */
.chip-strip { padding: 2px 2px 10px; gap: 7px; }
.chip { background: var(--card); border: 0; border-radius: 100px; font-size: 13px; padding: 8px 12px; color: var(--ink-2); }
.chip.is-now { background: var(--accent); color: #fff; }
.chip i { display: none; }
.stage-card { background: var(--card); border: 0; border-radius: 18px; box-shadow: none; margin-bottom: 10px; }
.stage-card summary { padding: 14px 16px; }
.stage-card .stage-body { padding: 0 16px 16px; }
.settings-title { font-size: 13px; color: var(--ink-3); font-weight: 500; margin: 22px 4px 7px; }
.settings-list { border-radius: 18px; }


/* 曲线拖拽：股票式十字线 + 气泡 */
.chart { position: relative; touch-action: none; user-select: none; -webkit-user-select: none; }
.chart-hint { margin: 2px 4px 2px; text-align: center; font-size: 11px; color: var(--ink-3); }
.chart-focus .focus-line { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 3 3; opacity: .65; }
.chart-focus .focus-dot { fill: var(--accent); stroke: var(--card); stroke-width: 2; }
.chart-focus .focus-dot-h { fill: var(--green); }
.chart-tip {
  position: absolute; top: 4px; z-index: 3; transform: translateX(-50%);
  min-width: 118px; padding: 8px 10px;
  background: color-mix(in srgb, var(--card) 92%, transparent);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: .5px solid var(--line); border-radius: 11px;
  box-shadow: 0 8px 24px rgba(0,0,0,.14);
  pointer-events: none; font-size: 12px; color: var(--ink);
}
.chart-tip .ct-date { display: block; font-size: 11px; color: var(--ink-3); margin-bottom: 3px; font-variant-numeric: tabular-nums; }
.chart-tip .ct-row { display: flex; align-items: center; gap: 5px; margin-top: 2px; color: var(--ink-2); }
.chart-tip .ct-row b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.chart-tip .ct-row i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.chart-tip .ct-row i.h { background: var(--green); }


/* 今日快捷卡：合并数值，不再重复四格 */
.qbtn { min-height: 86px; justify-content: center; }
.qbtn b { font-size: 11px; font-weight: 500; color: var(--ink-3); margin-top: 1px; }
.qbtn span { margin-top: 4px; }
/* 疫苗已完成折叠 */
.vax-tip { margin: 9px 6px 0; font-size: 12px; line-height: 1.5; color: var(--ink-3); }
.vax-done { margin-top: 12px; background: var(--card); border-radius: 18px; overflow: hidden; }
.vax-done summary { padding: 13px 16px; font-size: 14px; color: var(--ink-2); list-style: none; }
.vax-done summary::-webkit-details-marker { display: none; }
.vax-done .list { border-radius: 0; }
.vax-done .vaxc:first-child { border-top: .5px solid var(--line) !important; }


/* 曲线工具栏：一行，不再两层堆叠 */
.chart-toolbar { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; }
.chart-toolbar .metric-seg { flex: 1; margin: 0; }
.chart-range {
  flex: none; height: 34px; padding: 0 11px;
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--card-2); color: var(--ink); border: 0; border-radius: 10px;
  font-size: 13px; font-weight: 500;
}
.chart-range i { font-style: normal; font-size: 10px; color: var(--ink-3); }
.chart svg { touch-action: none; }
.chart-tip { max-width: 160px; }

.chart.is-dragging .dotlabel { opacity: 0; }


/* 图表触摸层 + 自定义年龄范围 */
.chart-hit { position: absolute; inset: 0; z-index: 2; touch-action: none; cursor: crosshair; background: transparent; }
.chart-tip { z-index: 3; }
.range-form { display: flex; align-items: flex-end; gap: 10px; margin: 4px 0 12px; }
.range-form label { flex: 1; display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--ink-3); }
.range-form select { height: 44px; padding: 0 10px; border: .5px solid var(--line); border-radius: 11px; background: var(--card); color: var(--ink); font-size: 16px; }
.range-dash { padding-bottom: 12px; color: var(--ink-3); }
.range-presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.range-presets button { height: 36px; border: 0; border-radius: 9px; background: var(--card-2); color: var(--ink-2); font-size: 12px; }

.vax-records .record-list { padding: 0 14px 4px; }
.vax-records .rec-group:first-child { margin-top: 0; }
.vax-records summary { font-weight: 500; }


/* 已接种记录：折叠栏内部用紧凑列表，不再每条一张大卡 */
.vax-records .record-list { padding: 0 !important; background: transparent !important; border: 0 !important; }
.vax-records .rec-group {
  background: transparent !important;
  border: 0 !important;
  border-top: .5px solid var(--line) !important;
  border-radius: 0 !important;
  margin: 0 !important;
  overflow: visible;
}
.vax-records .rec-group:first-child { border-top: 0 !important; }
.vax-records .rec-row { align-items: flex-start; padding: 10px 16px; gap: 10px; }
.vax-records .rec-date { width: 44px; padding-top: 1px; }
.vax-records .rec-date b { font-size: 14px; }
.vax-records .rec-line { display: flex; flex-direction: column; gap: 1px; }
.rec-vname { display: block; font-size: 14px; line-height: 1.4; color: var(--ink); }
.vax-records .rec-sub { font-size: 11px; line-height: 1.4; color: var(--ink-3); margin-top: 3px; }
.vax-records .rec-count { flex: none; font-size: 10.5px; color: var(--ink-3); padding-top: 2px; }
.vax-records .rec-detail { padding: 0 16px 10px 60px; }
.vax-records .rec-det-line { font-size: 11.5px; line-height: 1.6; }
.vax-records summary { position: sticky; top: 0; z-index: 1; background: var(--card); }


/* 折叠栏箭头：收起朝右，展开朝下 */
.fold-chev { display: inline-block; margin-left: 2px; transition: transform .18s ease; transform-origin: 50% 50%; }
details[open] > summary .fold-chev { transform: rotate(90deg); }
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }


/* 儿保体检 / 体检记录：与疫苗分开的紧凑块 */
.vax-exams, .vax-checkups { margin-top: 10px; }
.vax-exams summary, .vax-checkups summary { font-weight: 500; color: var(--ink-2); }
.checkup-mini-list { padding: 0 16px 10px; }
.checkup-mini { display: flex; gap: 10px; padding: 9px 0; border-top: .5px solid var(--line-2); }
.checkup-mini:first-child { border-top: 0; }
.checkup-mini .cm-date { flex: none; width: 44px; font-size: 14px; color: var(--ink); font-variant-numeric: tabular-nums; }
.checkup-mini .cm-main { flex: 1; min-width: 0; font-size: 14px; color: var(--ink); line-height: 1.4; }
.checkup-mini .cm-main b { font-weight: 500; }
.checkup-mini .cm-main small { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }


/* 功能模块色块：浅色标题带 + 左侧色条，模块一眼分开 */
.sec-head.mod-vax, .sec-head.mod-records, .sec-head.mod-checkups {
  position: relative;
  margin: 24px 0 8px;
  padding: 11px 14px 11px 22px;
  border-radius: 14px;
  background: var(--mod-tint);
}
.sec-head.mod-vax { --mod-tint: color-mix(in srgb, var(--accent-soft) 72%, var(--card)); --mod-bar: var(--accent); }
.sec-head.mod-records { --mod-tint: color-mix(in srgb, #ebedff 70%, var(--card)); --mod-bar: #6d7cff; }
.sec-head.mod-checkups { --mod-tint: color-mix(in srgb, #fff1e3 76%, var(--card)); --mod-bar: #ff9f43; }
.sec-head.mod-vax::before, .sec-head.mod-records::before, .sec-head.mod-checkups::before {
  content: ""; position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
  width: 4px; height: 22px; border-radius: 2px; background: var(--mod-bar);
}
.sec-head.mod-vax h2, .sec-head.mod-records h2, .sec-head.mod-checkups h2 { font-size: 18px; }
html[data-theme="dark"] .sec-head.mod-records { --mod-tint: rgba(109,124,255,.16); }
html[data-theme="dark"] .sec-head.mod-checkups { --mod-tint: rgba(255,159,67,.14); }
@media (prefers-color-scheme: dark) {
  html[data-theme="system"] .sec-head.mod-records { --mod-tint: rgba(109,124,255,.16); }
  html[data-theme="system"] .sec-head.mod-checkups { --mod-tint: rgba(255,159,67,.14); }
}

/* 儿保体检模块：绿色标题带 */
.vax-exams { border-radius: 16px; overflow: hidden; margin-top: 12px; }
.vax-exams summary {
  padding: 12px 16px !important;
  background: color-mix(in srgb, var(--green-soft) 74%, var(--card));
  border-left: 4px solid var(--green);
  font-weight: 600 !important;
  color: var(--ink) !important;
}
html[data-theme="dark"] .vax-exams summary { background: rgba(48,209,88,.12); }
@media (prefers-color-scheme: dark) { html[data-theme="system"] .vax-exams summary { background: rgba(48,209,88,.12); } }

/* 记录区：彩色日期块 + 交替浅底，扫读不累 */
.vax-records .rec-group:nth-child(even) { background: color-mix(in srgb, var(--paper-2) 68%, var(--card)) !important; }
.vax-records .rec-date {
  background: var(--accent-soft);
  border-radius: 9px;
  padding: 5px 6px;
  width: 48px !important;
  text-align: center;
}
.vax-records .rec-date b { color: var(--accent); font-size: 13.5px; }
.vax-records .rec-date em { color: var(--ink-3); }
.vax-checkups .cm-date {
  background: color-mix(in srgb, #fff1e3 80%, var(--card));
  color: #c2741f;
  border-radius: 8px;
  padding: 4px 5px;
  text-align: center;
  height: fit-content;
}
html[data-theme="dark"] .vax-checkups .cm-date { background: rgba(255,159,67,.14); color: #ffb35c; }
@media (prefers-color-scheme: dark) { html[data-theme="system"] .vax-checkups .cm-date { background: rgba(255,159,67,.14); color: #ffb35c; } }


/* 整体明度压暗一档（饱和度不变） */
:root {
  --paper: #E8E8EE; --paper-2: #EFEFF4; --card: #F8F8FB; --card-2: #E1E1E7;
  --ink: #17171A; --ink-2: #3A3A3F; --ink-3: #77777F;
  --line: rgba(60,60,67,.22); --line-2: rgba(60,60,67,.13);
}
html[data-theme="dark"] {
  --paper: #060608; --paper-2: #0B0B0E; --card: #151518; --card-2: #1F1F23;
  --ink: #F2F2F7; --ink-2: #C7C7CC; --ink-3: #8A8A91;
  --line: rgba(120,120,128,.38); --line-2: rgba(120,120,128,.22);
}
@media (prefers-color-scheme: dark) {
  html[data-theme="system"] {
    --paper: #060608; --paper-2: #0B0B0E; --card: #151518; --card-2: #1F1F23;
    --ink: #F2F2F7; --ink-2: #C7C7CC; --ink-3: #8A8A91;
    --line: rgba(120,120,128,.38); --line-2: rgba(120,120,128,.22);
  }
}

/* 子分区色块：每个折叠条有自己的浅色块和左侧色条 */
.vax-later { --subtint: #E5EBF5; --subbar: #7D93B2; }
.vax-finished-vax { --subtint: #E8EAF6; --subbar: #6D7CFF; }
.vax-finished-exam { --subtint: #E6F2E9; --subbar: #4CAF6A; }
.vax-exams { --subtint: #E3F1E6; --subbar: #34C759; }
.vax-records { --subtint: #EBECF8; --subbar: #6D7CFF; }
.vax-checkups { --subtint: #F8EEDF; --subbar: #FF9F43; }

html[data-theme="dark"] .vax-later { --subtint: #191E28; --subbar: #7D93B2; }
html[data-theme="dark"] .vax-finished-vax { --subtint: #1B1D2C; --subbar: #8C98FF; }
html[data-theme="dark"] .vax-finished-exam { --subtint: #16241A; --subbar: #6BD184; }
html[data-theme="dark"] .vax-exams { --subtint: #16241A; --subbar: #30D158; }
html[data-theme="dark"] .vax-records { --subtint: #1B1B2B; --subbar: #8C98FF; }
html[data-theme="dark"] .vax-checkups { --subtint: #241D16; --subbar: #FFB35C; }
@media (prefers-color-scheme: dark) {
  html[data-theme="system"] .vax-later { --subtint: #191E28; --subbar: #7D93B2; }
  html[data-theme="system"] .vax-finished-vax { --subtint: #1B1D2C; --subbar: #8C98FF; }
  html[data-theme="system"] .vax-finished-exam { --subtint: #16241A; --subbar: #6BD184; }
  html[data-theme="system"] .vax-exams { --subtint: #16241A; --subbar: #30D158; }
  html[data-theme="system"] .vax-records { --subtint: #1B1B2B; --subbar: #8C98FF; }
  html[data-theme="system"] .vax-checkups { --subtint: #241D16; --subbar: #FFB35C; }
}

.vax-later > summary,
.vax-done > summary {
  position: relative;
  padding-left: 18px !important;
  background: var(--subtint) !important;
  border-left: 3px solid var(--subbar) !important;
  border-radius: 0;
  color: var(--ink) !important;
}
.vax-later, .vax-done { background: var(--card) !important; border-radius: 14px; overflow: hidden; }
.vax-exams summary { background: var(--subtint) !important; }

/* 记录列表里的子分区：日期色块更明显，组间留一点颜色呼吸 */
.vax-records .rec-group:nth-child(odd) { background: color-mix(in srgb, var(--subtint) 30%, var(--card)) !important; }
.vax-records .rec-group:nth-child(even) { background: transparent !important; }
.vax-records .rec-date { background: var(--subtint) !important; color: var(--accent); }
.vax-checkups .checkup-mini:nth-child(odd) {
  background: color-mix(in srgb, var(--subtint) 55%, var(--card));
  border-radius: 9px;
  padding-left: 8px;
  padding-right: 8px;
}


/* ============================================================
   统一色彩语言
   蓝 = 疫苗 / 主操作；灰 = 体检 / 次要分区
   绿 = 免费/完成；红 = 过期；不再使用橙紫
   ============================================================ */
:root {
  --tint-1: color-mix(in srgb, var(--accent) 7%, var(--card));
  --tint-2: color-mix(in srgb, var(--accent) 14%, var(--card));
  --tint-neutral: var(--card-2);
  --bar-accent: var(--accent);
  --bar-neutral: var(--ink-3);
  --chart-2: #6B7F99;
}
html[data-theme="dark"] {
  --tint-1: color-mix(in srgb, var(--accent) 13%, var(--card));
  --tint-2: color-mix(in srgb, var(--accent) 22%, var(--card));
  --tint-neutral: var(--card-2);
  --chart-2: #9BB0C7;
}
@media (prefers-color-scheme: dark) {
  html[data-theme="system"] {
    --tint-1: color-mix(in srgb, var(--accent) 13%, var(--card));
    --tint-2: color-mix(in srgb, var(--accent) 22%, var(--card));
    --tint-neutral: var(--card-2);
    --chart-2: #9BB0C7;
  }
}

/* 模块头：蓝=主模块，灰=体检模块 */
.sec-head.mod-vax { --mod-tint: var(--tint-2); --mod-bar: var(--bar-accent); }
.sec-head.mod-records { --mod-tint: var(--tint-1); --mod-bar: var(--bar-accent); }
.sec-head.mod-checkups { --mod-tint: var(--tint-neutral); --mod-bar: var(--bar-neutral); }
.sec-head.mod-vax, .sec-head.mod-records, .sec-head.mod-checkups {
  background: var(--mod-tint);
  border: .5px solid color-mix(in srgb, var(--mod-bar) 18%, transparent);
}
.sec-head.mod-vax::before, .sec-head.mod-records::before, .sec-head.mod-checkups::before { background: var(--mod-bar); }

/* 子分区：统一蓝/灰，不再彩虹 */
.vax-later, .vax-finished-vax, .vax-records { --subtint: var(--tint-1); --subbar: var(--bar-accent); }
.vax-exams, .vax-finished-exam, .vax-checkups { --subtint: var(--tint-neutral); --subbar: var(--bar-neutral); }
html[data-theme="dark"] .vax-later,
html[data-theme="dark"] .vax-finished-vax,
html[data-theme="dark"] .vax-records { --subtint: var(--tint-1); --subbar: var(--bar-accent); }
html[data-theme="dark"] .vax-exams,
html[data-theme="dark"] .vax-finished-exam,
html[data-theme="dark"] .vax-checkups { --subtint: var(--tint-neutral); --subbar: var(--bar-neutral); }
@media (prefers-color-scheme: dark) {
  html[data-theme="system"] .vax-later,
  html[data-theme="system"] .vax-finished-vax,
  html[data-theme="system"] .vax-records { --subtint: var(--tint-1); --subbar: var(--bar-accent); }
  html[data-theme="system"] .vax-exams,
  html[data-theme="system"] .vax-finished-exam,
  html[data-theme="system"] .vax-checkups { --subtint: var(--tint-neutral); --subbar: var(--bar-neutral); }
}
.vax-later > summary, .vax-done > summary {
  background: var(--subtint) !important;
  border-left: 3px solid var(--subbar) !important;
  color: var(--ink) !important;
}
.vax-exams summary { background: var(--subtint) !important; border-left: 3px solid var(--subbar) !important; }

/* 疫苗记录日期=蓝，体检记录日期=灰 */
.vax-records .rec-date { background: var(--tint-1) !important; }
.vax-records .rec-date b { color: var(--accent); }
.vax-checkups .cm-date { background: var(--tint-neutral) !important; color: var(--ink-2) !important; }
.vax-records .rec-group:nth-child(odd) { background: color-mix(in srgb, var(--tint-1) 35%, var(--card)) !important; }
.vax-records .rec-group:nth-child(even) { background: transparent !important; }
.vax-checkups .checkup-mini:nth-child(odd) { background: color-mix(in srgb, var(--tint-neutral) 55%, var(--card)); }

/* 图标不再用橙/紫，统一主色或中性 */
.ios-ico.orange, .ios-ico.purple, .ios-ico.blue { background: var(--accent-soft); color: var(--accent); }
.ios-ico.gray { background: var(--card-2); color: var(--ink-3); }
.ios-ico.green { background: var(--green-soft); color: var(--green); }

/* 双轴曲线：体重=主蓝，身长=蓝灰，不再用绿色 */
.chart .axis-h { fill: var(--chart-2); }
.chart .line-h { stroke: var(--chart-2); }
.chart .dot-h, .chart .focus-dot-h { fill: var(--chart-2); }
.chart .ref-h { stroke: var(--chart-2); opacity: .38; }
.chart-tip .ct-row i.h, .chart-legend i.lg-h { background: var(--chart-2); }


/* 深色下模块头也统一为蓝/灰，不被旧紫色覆盖 */
html[data-theme="dark"] .sec-head.mod-vax { --mod-tint: var(--tint-2); --mod-bar: var(--bar-accent); }
html[data-theme="dark"] .sec-head.mod-records { --mod-tint: var(--tint-1); --mod-bar: var(--bar-accent); }
html[data-theme="dark"] .sec-head.mod-checkups { --mod-tint: var(--tint-neutral); --mod-bar: var(--bar-neutral); }
@media (prefers-color-scheme: dark) {
  html[data-theme="system"] .sec-head.mod-vax { --mod-tint: var(--tint-2); --mod-bar: var(--bar-accent); }
  html[data-theme="system"] .sec-head.mod-records { --mod-tint: var(--tint-1); --mod-bar: var(--bar-accent); }
  html[data-theme="system"] .sec-head.mod-checkups { --mod-tint: var(--tint-neutral); --mod-bar: var(--bar-neutral); }
}


/* 阶段页仅保留主色，不再使用每个阶段的彩色圆点 */
.s-dot { background: var(--accent) !important; opacity: .65; }
.now-tag { background: var(--accent-soft); color: var(--accent); }
.chip.is-now { background: var(--accent); color: #fff; }


/* 子折叠：不再整块上色，只留左侧色条，接近原生 iOS */
.vax-later > summary,
.vax-done > summary,
.vax-exams summary {
  background: var(--card) !important;
  border-left-width: 3px !important;
  border-left-style: solid !important;
  box-shadow: none !important;
}
.vax-later > summary { border-left-color: var(--bar-accent) !important; }
.vax-finished-vax > summary { border-left-color: var(--bar-accent) !important; }
.vax-records > summary { border-left-color: var(--bar-accent) !important; }
.vax-exams summary { border-left-color: var(--bar-neutral) !important; }
.vax-finished-exam > summary { border-left-color: var(--bar-neutral) !important; }
.vax-checkups > summary { border-left-color: var(--bar-neutral) !important; }
.vax-later, .vax-done { background: var(--card) !important; }


/* 去掉残留的陶土棕：所有 accent-ink 统一为主蓝 */
:root { --accent-ink: #0062CC; --accent-ink-soft: #0051A8; }
html[data-theme="dark"] { --accent-ink: #409CFF; --accent-ink-soft: #6FB5FF; }
@media (prefers-color-scheme: dark) {
  html[data-theme="system"] { --accent-ink: #409CFF; --accent-ink-soft: #6FB5FF; }
}

/* 疫苗和体检全部用蓝，只靠蓝的深浅和文案区分 */
.sec-head.mod-checkups { --mod-tint: var(--tint-1); --mod-bar: var(--bar-accent); }
.vax-exams, .vax-finished-exam, .vax-checkups { --subtint: var(--tint-1); --subbar: var(--bar-accent); }
.vax-exams summary, .vax-finished-exam > summary, .vax-checkups > summary {
  border-left-color: var(--bar-accent) !important;
}
.vax-checkups .cm-date { background: var(--tint-1) !important; color: var(--accent) !important; }
.vax-checkups .checkup-mini:nth-child(odd) { background: color-mix(in srgb, var(--tint-1) 48%, var(--card)); }
html[data-theme="dark"] .sec-head.mod-checkups { --mod-tint: var(--tint-1); --mod-bar: var(--bar-accent); }
html[data-theme="dark"] .vax-exams,
html[data-theme="dark"] .vax-finished-exam,
html[data-theme="dark"] .vax-checkups { --subtint: var(--tint-1); --subbar: var(--bar-accent); }
@media (prefers-color-scheme: dark) {
  html[data-theme="system"] .sec-head.mod-checkups { --mod-tint: var(--tint-1); --mod-bar: var(--bar-accent); }
  html[data-theme="system"] .vax-exams,
  html[data-theme="system"] .vax-finished-exam,
  html[data-theme="system"] .vax-checkups { --subtint: var(--tint-1); --subbar: var(--bar-accent); }
}

/* 今日「吃 / 睡 / 玩」恢复色块，但都在蓝色系里 */
.ios-ico.stage-eat { background: var(--tint-2); color: var(--accent); }
.ios-ico.stage-sleep { background: var(--tint-1); color: var(--accent); }
.ios-ico.stage-play { background: var(--accent-soft); color: var(--accent); }


/* 阶段页子标题：统一蓝色浅色块，不再是棕色小字 */
.stage-block h4 {
  display: inline-block;
  background: var(--tint-1);
  color: var(--accent-ink);
  padding: 4px 9px;
  border-radius: 7px;
  font-size: calc(12px * var(--fs));
  letter-spacing: .04em;
  margin-bottom: 8px;
}


/* 儿保体检与疫苗排期同级模块 */
.sec-head.mod-exams {
  position: relative;
  margin: 24px 0 8px;
  padding: 11px 14px 11px 22px;
  border-radius: 14px;
  background: var(--tint-2);
  border: .5px solid color-mix(in srgb, var(--bar-accent) 18%, transparent);
}
.sec-head.mod-exams::before {
  content: ""; position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
  width: 4px; height: 22px; border-radius: 2px; background: var(--bar-accent);
}
.sec-head.mod-exams h2 { font-size: 18px; }


/* 头围曲线：第四种类型 */
.chart-card .metric-seg { grid-template-columns: repeat(4, 1fr); }
.chart-toolbar .metric-seg button { font-size: 12px; padding: 7px 2px; }
.chart .axis-hc { fill: var(--accent); }
.chart .line-hc { stroke: var(--accent); }
.chart .dot-hc { fill: var(--accent); }
.chart .ref-hc { stroke: var(--accent); opacity: .34; }
.chart-leg-hc, .chart-legend i.lg-hc { background: var(--accent); }
.chart-tip .ct-row i.hc { background: var(--accent); }
.chart-focus .focus-dot-hc { fill: var(--accent); }


/* 记录页历史视图 */
.log-view-seg { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 0 10px; }
.log-view-seg button { font-size: 13px; }
.log-summary { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--card); border-radius: 16px; padding: 12px 4px; margin-bottom: 10px; }
.log-summary > div { text-align: center; border-left: .5px solid var(--line-2); }
.log-summary > div:first-child { border-left: 0; }
.log-summary b { display: block; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.log-summary b small { font-size: 10px; font-weight: 500; color: var(--ink-3); margin-left: 1px; }
.log-summary span { display: block; font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.week-days, .month-body { display: flex; flex-direction: column; gap: 7px; }
.day-card { background: var(--card); border-radius: 14px; overflow: hidden; }
.day-head { width: 100%; display: flex; align-items: center; gap: 9px; padding: 12px 14px; border: 0; background: transparent; text-align: left; }
.day-date { flex: none; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.day-sum { flex: 1; min-width: 0; font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.day-count { flex: none; font-size: 11px; color: var(--ink-3); }
.day-detail { border-top: .5px solid var(--line-2); padding: 0 12px; }
.day-detail .log-row { border-top: .5px solid var(--line-2); }
.day-detail .log-row:first-child { border-top: 0; }
.log-month { background: var(--card); border-radius: 16px; margin-bottom: 9px; overflow: hidden; }
.log-month > summary { padding: 13px 15px; font-size: 14px; color: var(--ink-2); list-style: none; }
.log-month > summary::-webkit-details-marker { display: none; }
.log-month .month-body { padding: 0 10px 10px; }
.log-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 28px 16px; }
.log-empty .btn { width: auto; padding: 0 22px; }


/* 下一针卡 + 排期生成选择 */
.next-vax { display: flex; align-items: center; gap: 11px; background: var(--card); border: .5px solid var(--line); border-radius: 16px; padding: 13px 14px; margin: 8px 0 0; }
.next-vax-label { flex: none; color: var(--accent); font-size: 12px; font-weight: 700; }
.next-vax-main { flex: 1; min-width: 0; }
.next-vax-main b { display: block; font-size: 16px; font-weight: 600; }
.next-vax-main small { display: block; font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.check-row { display: flex; align-items: flex-start; gap: 10px; padding: 12px 13px; background: var(--card); border-radius: 13px; font-size: 14px; color: var(--ink); }
.check-row input { width: 20px; height: 20px; margin-top: 1px; flex: none; accent-color: var(--accent); }
.check-row b { display: block; font-size: 14px; font-weight: 600; }
.check-row small { display: block; font-size: 12px; color: var(--ink-3); line-height: 1.45; margin-top: 2px; }


/* 排期编辑：日期可一键清空为待定 */
.plan-line { grid-template-columns: 100px minmax(0, 1fr) 56px 42px 24px; gap: 5px; }
.plan-clear {
  height: 34px; border: .5px solid var(--line); border-radius: 8px;
  background: var(--card); color: var(--ink-3); font-size: 10.5px; padding: 0 3px;
}
.plan-clear.is-empty { color: var(--accent); border-color: var(--accent); background: var(--tint-1); }


/* 今日首屏重排 */
.today-head { display: flex; align-items: center; gap: 11px; padding: 10px 2px 12px; }
.today-avatar { flex: none; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: var(--card-2); display: grid; place-items: center; cursor: pointer; }
.today-avatar img { width: 100%; height: 100%; object-fit: cover; }
.today-avatar span { font-family: var(--serif); font-size: 24px; color: var(--accent); }
.today-id { flex: 1; min-width: 0; }
.today-name { font-size: 20px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
.today-meta { font-size: 12px; color: var(--ink-3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.today-next-age { flex: none; font-size: 11px; color: var(--accent); white-space: nowrap; text-align: right; }
.now-card { background: var(--card); border-radius: 18px; padding: 15px 16px; margin: 0 0 12px; }
.now-label { font-size: 12px; color: var(--accent); font-weight: 600; letter-spacing: .04em; }
.now-big { font-size: 30px; font-weight: 700; letter-spacing: -.03em; line-height: 1.2; margin-top: 3px; font-variant-numeric: tabular-nums; }
.now-sub { font-size: 12px; color: var(--ink-3); margin-top: 3px; }
.quick-grid.big { grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 12px; }
.quick-grid.big .qbtn { min-height: 94px; padding: 14px 8px 12px; }
.quick-grid.big .qbtn svg { width: 26px; height: 26px; }
.quick-grid.big .qbtn span { font-size: 13px; margin-top: 5px; }
.quick-grid.big .qbtn b { font-size: 12px; }
@media (max-width: 370px) {
  .today-next-age { font-size: 10px; }
  .today-name { font-size: 18px; }
}


/* 可访问性与字号（P1-6） */
:root { --ink-3: #66666E; --green-ink: #1F7A3D; --red-ink: #C6281E; }
html[data-theme="dark"] { --ink-3: #A1A1A8; --green-ink: #5BD97C; --red-ink: #FF8078; }
@media (prefers-color-scheme: dark) {
  html[data-theme="system"] { --ink-3: #A1A1A8; --green-ink: #5BD97C; --red-ink: #FF8078; }
}
.tab { font-size: calc(11.5px * var(--fs)); color: var(--ink-3); }
.tab[aria-selected="true"] { color: var(--accent-ink); font-weight: 600; }
.sec-link, .ios-head button { position: relative; }
.sec-link::after, .ios-head button::after { display: none; }
.sec-link { padding: 8px 4px; margin: -8px -4px -8px auto; }
.ios-head button { padding: 8px 4px; margin: -8px -4px; }
.sec-head h2 { font-size: calc(18px * var(--fs)); }
.ios-head > span:first-child, .ios-head > button:first-child { font-size: calc(20px * var(--fs)); }
.ios-head button { font-size: calc(15px * var(--fs)); }
.btn { font-size: calc(17px * var(--fs)); }
.sheet-head h2 { font-size: calc(21px * var(--fs)); }
.tag-free { color: var(--green-ink); }
.tag-self { color: var(--accent-ink); }
.tag-exam { color: var(--ink-3); }
.nn-ink3, .hint, .empty, .chart-hint { color: var(--ink-3); }
@media (max-width: 360px) {
  .today-meta { font-size: 11px; }
  .page-sub { font-size: 13px; }
}


/* 特大字号下底部 Tab 不裁字 */
:root { --tab-h: 60px; }
.tabbar-inner { height: 60px; }
.tab { line-height: 1.08; padding-bottom: 2px; }


/* P2-7 全站视觉统一：section 头 + 卡片 + 图标 */
:root {
  --surface-card: var(--card);
  --surface-tint: var(--tint-1);
  --text-tertiary: var(--ink-3);
  --accent-soft: var(--tint-1);
}
.sec-head, .ios-head, .sec-head.mod-vax, .sec-head.mod-records, .sec-head.mod-checkups, .sec-head.mod-exams {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 24px 0 8px;
  padding: 10px 14px;
  background: var(--surface-tint) !important;
  border: 0 !important;
  border-radius: 14px;
}
.sec-head h2, .ios-head > span:first-child, .ios-head > button:first-child {
  font-family: var(--sans);
  font-size: calc(20px * var(--fs));
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0;
}
.sec-head .meta, .ios-head-meta { font-size: 13px; color: var(--text-tertiary); }
.sec-head .sec-link, .ios-head button { font-size: 13px; font-weight: 500; color: var(--text-tertiary); background: none; border: 0; padding: 0; }
.sec-head .num { display: none; }
.sec-head::before, .ios-head::before, .sec-head.mod-vax::before, .sec-head.mod-records::before,
.sec-head.mod-checkups::before, .sec-head.mod-exams::before { display: none !important; }

.card, .ios-list, .list, .settings-list, .stage-card, .vaxc-list, .day-card, .log-month, .now-card, .next-vax {
  background: var(--surface-card);
  border: 1px solid var(--line);
  border-radius: 18px;
}
.card { padding: 16px; }
.card + .card { margin-top: 8px; }
.list, .ios-list, .settings-list, .vaxc-list { overflow: hidden; }
.quick-grid { gap: 8px; }
.ios-head + .ios-list, .ios-head + .card { margin-top: 0; }
.oc-pick-ico svg, .ocr-pick-ico svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lr-title { display: inline-flex; align-items: center; gap: 6px; }
.lr-ico { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }


/* 小睡计时 / 尿布分类 */
.diaper-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 4px 0 4px; }
.diaper-btn { height: 78px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink-2); font-size: 18px; font-weight: 600; }
.diaper-btn.on { border-color: var(--accent); background: var(--tint-1); color: var(--accent-ink); }
.stool-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stool-btn { height: 40px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink-2); font-size: 14px; }
.stool-btn.on { border-color: var(--accent); background: var(--tint-1); color: var(--accent-ink); }
.stool-wrap { margin-top: 4px; }


/* P2-9 杂项 */
.teeth-empty { text-align: center; padding: 10px 0 4px; }
.teeth-empty p { font-size: 13px; color: var(--ink-3); margin-bottom: 10px; }
.teeth-empty .btn { width: auto; padding: 0 18px; }
.privacy-block { margin-bottom: 18px; }
.privacy-block h3 { font-size: 16px; font-weight: 700; margin-bottom: 5px; }
.privacy-block p { font-size: 14px; line-height: 1.65; color: var(--ink-2); }
.chip.is-active { outline: 2px solid var(--accent); outline-offset: 1px; }
.chip-strip {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
  padding-left: 2px;
}


/* 曲线标签光晕与系列色 */
.dotlabel { paint-order: stroke; stroke: var(--card); stroke-width: 3px; fill: var(--accent); }
.dot-h-label { fill: var(--chart-2); }
.dot-hc-label { fill: var(--accent); }
.gs-rel { display: block; font-size: 11px; color: var(--ink-3); margin-top: 2px; }


/* D: 小字文本的深蓝，图标仍用 --accent */
:root { --accent-text: #0062CC; }
html[data-theme="dark"] { --accent-text: #409CFF; }
@media (prefers-color-scheme: dark) { html[data-theme="system"] { --accent-text: #409CFF; } }
.today-next-age, .now-label, .act-kicker, .act-why b, .ios-action, .vaxc-rel { color: var(--accent-text); }
.today-next-age { font-size: 11px; }

/* E: h1 与副标题换行 */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.today-meta { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.35; }


/* F: 阶段条吸附与渐隐 */
#chipStrip { scroll-snap-type: x proximity; }
.chip { scroll-snap-align: center; }
#chipStrip {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
}


/* G: 每天摘要两行、不省略 */
.day-head { align-items: flex-start; }
.day-sum {
  white-space: normal; overflow: visible; text-overflow: clip;
  display: flex; flex-direction: column; gap: 1px;
  font-size: 12px; line-height: 1.35;
}
.day-sum span { display: block; }


/* 文字型链接不压缩、不截断；次级链接至少 36px 高 */
.sec-head { align-items: center; }
.sec-link, .ios-head button {
  flex: none;
  width: auto;
  max-width: none;
  white-space: nowrap;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 2px;
}
.sec-head h2 { flex: 1 1 auto; min-width: 0; }
.check { position: relative; }
.check::after { content: ""; position: absolute; inset: -12px; }


/* 底部导航不遮挡最后一个可点元素 */
.main { padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom) + 40px); }


/* axe color-contrast 修正 */
:root { --red-ink: #B3261E; }
html[data-theme="dark"] { --red-ink: #FF8078; }
@media (prefers-color-scheme: dark) { html[data-theme="system"] { --red-ink: #FF8078; } }
.btn-primary, .btn-primary:active { background: var(--accent-text); }
.chip.is-now { background: var(--accent-text) !important; color: #fff !important; }
.tag-ai { background: var(--accent-text); color: #fff; }
.ios-side { color: var(--ink-2); }
#clearBtn .sr-main { color: var(--red-ink) !important; }
.del { color: var(--red-ink); }


/* axe 剩余小字 */
.ios-side.over { color: var(--red-ink) !important; }
.now-tag { color: var(--accent-text) !important; }
.next-vax-label { color: var(--accent-text); }
.tag-exam { color: var(--ink-2); }

.vaxc-rel { color: var(--accent-text) !important; }
#checkUpdateRow .sr-side { color: var(--accent-text) !important; }

.empty-action .sec-link { color: var(--accent-text) !important; }


/* 验收报告复修 */
#chipStrip { scroll-snap-type: none !important; overflow-x: auto; }
.chip { scroll-snap-align: none !important; }
.ios-action { min-height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 8px 10px; }


/* 今日记录区：AD/D3 条 + 压缩四格，总高保持约 196 */
.record-zone { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.supp-strip {
  height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 0 12px; box-sizing: border-box;
}
.supp-title { font-size: 13px; font-weight: 700; white-space: nowrap; }
.supp-title small { font-size: 10px; font-weight: 400; color: var(--ink-3); margin-left: 5px; }
.supp-chips { display: flex; gap: 6px; flex: none; }
.supp-chip {
  height: 32px; min-width: 52px; padding: 0 9px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--card-2); color: var(--ink-2); font-size: 12px; font-weight: 600;
  display: flex; align-items: center; gap: 4px; justify-content: center;
}
.supp-chip.on { border-color: var(--accent); background: var(--tint-1); color: var(--accent-text); }
.supp-chip em { font-style: normal; font-size: 9.5px; font-weight: 500; color: var(--accent-text); }
.quick-grid.big { gap: 8px; margin: 0; }
.quick-grid.big .qbtn {
  min-height: 64px; height: 64px; padding: 8px 10px;
  display: grid; grid-template-columns: 22px 1fr; grid-template-rows: auto auto;
  column-gap: 8px; align-content: center; justify-items: start; text-align: left;
}
.quick-grid.big .qbtn svg { grid-row: 1 / span 2; width: 22px; height: 22px; margin: 0; align-self: center; }
.quick-grid.big .qbtn span { grid-column: 2; font-size: 12px; font-weight: 600; margin: 0; line-height: 1.2; }
.quick-grid.big .qbtn b { grid-column: 2; font-size: 11px; font-weight: 400; color: var(--ink-3); margin: 1px 0 0; line-height: 1.2; }
.supp-edit { display: flex; gap: 8px; }
.supp-edit-btn { height: 40px; min-width: 72px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink-2); font-size: 14px; font-weight: 600; }
.supp-edit-btn.on { border-color: var(--accent); background: var(--tint-1); color: var(--accent-text); }


/* 今天的一件小事：5 分钟轮换淡入 */
.act-swap { animation: act-swap .45s ease; }
@keyframes act-swap {
  from { opacity: .25; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}


/* 记录页：喂养趋势柱状图 */
.feed-trend-card { padding: 13px 14px 11px; }
.feed-trend-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.feed-metric-seg { flex: none; }
.feed-metric-seg button { padding: 6px 12px; font-size: 12px; }
.feed-range-seg { flex: none; margin-left: auto; }
.feed-range-seg button { padding: 6px 8px; font-size: 11px; }
.feed-chart { min-height: 156px; }
.feed-chart svg { display: block; width: 100%; height: auto; }
.feed-chart-empty { margin: 34px 0 30px; text-align: center; font-size: 13px; color: var(--ink-3); }
.feed-trend-summary { margin: 5px 2px 0; font-size: 11.5px; color: var(--ink-3); }


/* 记录页：喂养趋势柱状图 */
.feed-trend-card { padding: 13px 14px 11px; }
.feed-trend-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.feed-metric-seg { flex: none; }
.feed-metric-seg button { padding: 6px 12px; font-size: 12px; }
.feed-range-seg { flex: none; margin-left: auto; }
.feed-range-seg button { padding: 6px 8px; font-size: 11px; }
.feed-chart { min-height: 156px; }
.feed-chart svg { display: block; width: 100%; height: auto; }
.feed-chart-empty { margin: 34px 0 30px; text-align: center; font-size: 13px; color: var(--ink-3); }
.feed-trend-summary { margin: 5px 2px 0; font-size: 11.5px; color: var(--ink-3); }


/* 今日四格：大图标 / 大字，横向铺满 */
.quick-grid.big .qbtn {
  min-height: 64px; height: 64px; padding: 8px 10px;
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto;
  grid-template-rows: 1fr; column-gap: 8px; align-items: center;
  text-align: left;
}
.quick-grid.big .qbtn svg { grid-column: 1; grid-row: 1; width: 28px; height: 28px; margin: 0; align-self: center; }
.quick-grid.big .qbtn span { grid-column: 2; grid-row: 1; font-size: 15px; font-weight: 600; line-height: 1.1; margin: 0; }
.quick-grid.big .qbtn b { grid-column: 3; grid-row: 1; font-size: 13px; font-weight: 500; color: var(--ink-3); line-height: 1.1; margin: 0; white-space: nowrap; text-align: right; }


/* 应用内确认框 */
.confirm-layer {
  position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(0,0,0,.28); opacity: 0; transition: opacity .16s ease;
}
.confirm-layer.show { opacity: 1; }
.confirm-card {
  width: min(320px, calc(100vw - 40px)); background: var(--card); border-radius: 20px;
  padding: 20px 18px 16px; box-shadow: 0 18px 50px rgba(0,0,0,.22);
  transform: scale(.96); transition: transform .16s ease;
}
.confirm-layer.show .confirm-card { transform: scale(1); }
.confirm-title { margin: 0; text-align: center; font-size: 17px; font-weight: 700; color: var(--ink); }
.confirm-msg { margin: 9px 0 0; text-align: center; font-size: 13px; line-height: 1.55; color: var(--ink-2); }
.confirm-actions { display: flex; gap: 8px; margin-top: 18px; }
.confirm-btn {
  flex: 1; height: 44px; border-radius: 12px; border: 1px solid var(--line);
  font-size: 15px; font-weight: 600; background: var(--card-2); color: var(--ink);
}
.confirm-btn.ok { background: var(--accent-text); border-color: var(--accent-text); color: #fff; }
.confirm-btn.danger { background: var(--red-ink); border-color: var(--red-ink); color: #fff; }

/* 清掉上一代折叠栏的彩色左边条和色块 */
.vax-done, .vax-later { background: var(--card) !important; border: 1px solid var(--line) !important; border-radius: 14px !important; overflow: hidden; }
.vax-done > summary, .vax-later > summary, .vax-exams > summary, .vax-checkups > summary,
.vax-records > summary, .vax-finished-vax > summary, .vax-finished-exam > summary {
  background: transparent !important; border-left: 0 !important; color: var(--ink-2);
}
.vax-records .rec-date { background: var(--card-2) !important; color: var(--ink-2) !important; }
.vax-records .rec-group:nth-child(odd) { background: transparent !important; }