/* ============================================================
   成长历 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: #A5481F;      /* 小字用的加深陶土色，对纸色 ≥ 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)); }
}