/* ============================================================
   成长记录 · Baby Tracker ——「手账」视觉主题
   融合自「小豆芽 · 成长手账」的设计语言：
   —— 站酷快乐体标题 + Baloo 2 数字 + Noto Sans SC 正文
   —— 蜂蜜奶油暖色 + 鲜艳的玩具感分类色
   —— 3D 按压按钮（硬底边阴影）+ emoji 磁贴图标
   —— 太阳 / 流云 / 星光手账氛围层
   保留原有功能架构、全部 class 名与深浅双主题。
   ============================================================ */

/* ── 0. 本地字体（自托管，摆脱 Google Fonts CDN，国内稳定） ── */
@font-face{
  font-family:'ZCOOL KuaiLe';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('./fonts/zcool-kuaile.ttf') format('truetype');
}
@font-face{
  font-family:'Baloo 2';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url('./fonts/baloo2-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ── 1. 设计令牌 ────────────────────────────────────────── */
:root{
  /* 中性面（奶油纸感） */
  --canvas:#FFFDF8;
  --surface:#FFFFFF;
  --parchment:#FBF3E1;
  --hairline:#EFE3D0;
  --hairline-strong:#E4D3B4;

  /* 文字 */
  --ink:#3B3230;
  --ink-2:#7A6A53;
  --ink-muted:#A39070;
  --ink-faint:#C6B795;

  /* 强调色 —— 蜂蜜橙 */
  --accent:#E08700;
  --accent-strong:#B36200;
  --accent-soft:#FFF3D6;
  --on-accent:#5C3A00;
  --honey:#FFC93C;
  --honey-2:#FFB703;
  --honey-shadow:#E08700;

  /* 数据分类色 —— 玩具感鲜艳色，仅用于数据可视化 */
  --c-feeding:#E08700;   /* 喂奶 · 橙 */
  --c-sleep:#4A66D8;     /* 睡眠 · 蓝 */
  --c-diaper:#0E9A82;    /* 尿布 · 青 */
  --c-growth:#D6487E;    /* 生长 · 粉 */
  --c-health:#E84A5F;    /* 体温 · 红 */
  --c-food:#7AA81E;      /* 辅食 · 绿 */
  --c-milestone:#C58A00; /* 里程碑 · 金 */

  /* 字号阶梯 */
  --fs-hero:46px;
  --fs-display:30px;
  --fs-title:20px;
  --fs-lead:17px;
  --fs-body:15px;
  --fs-caption:13px;
  --fs-micro:11px;

  /* 间距（8px 基准） */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px;
  --s6:24px; --s8:32px; --s10:40px; --s12:48px;

  /* 圆角 */
  --r-xs:8px; --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:24px; --r-2xl:32px; --r-pill:999px;

  /* 手账氛围层（太阳 / 流云 / 星光） */
  --sky:linear-gradient(180deg,#FFF8E7 0%,#FFEFE2 48%,#EAF4EC 100%);
  --sky-sun:#FFE29A;
  --sky-cloud:#FFFFFF;
  --sky-tw:#F2C46B;

  /* 层次：卡片极淡投影 + 1px 暖色 hairline */
  --sh-card:0 1px 2px rgba(59,50,48,.05), 0 6px 18px rgba(150,110,50,.06);
  --sh-fab:0 8px 20px rgba(224,135,0,.38), 0 2px 4px rgba(224,135,0,.20);
  --sh-sheet:0 -8px 40px rgba(90,60,20,.16);

  --font:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "PingFang SC",
         "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-display:"ZCOOL KuaiLe", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-num:"Baloo 2", "Noto Sans SC", system-ui, sans-serif;

  --tabbar-h:62px;
  --ease:cubic-bezier(.32,.72,0,1);
}

html[data-theme="dark"]{
  --canvas:#191512;
  --surface:#211B17;
  --parchment:#2A221C;
  --hairline:#3A2E24;
  --hairline-strong:#4C3C2E;
  --ink:#F5EEE6;
  --ink-2:#CFC0AD;
  --ink-muted:#9C8872;
  --ink-faint:#7A6A58;
  --accent:#FFB703;
  --accent-strong:#FFC93C;
  --accent-soft:#3A2C1A;
  --on-accent:#3B2600;
  --honey:#FFC93C;
  --honey-2:#FFB703;
  --honey-shadow:#A86800;
  --c-feeding:#F5AC5E;
  --c-sleep:#8C96E8;
  --c-diaper:#4FC2A8;
  --c-growth:#F07FA6;
  --c-health:#F0808C;
  --c-food:#A8CB5C;
  --c-milestone:#E5B44C;
  --sh-card:0 1px 2px rgba(0,0,0,.32);
  --sh-fab:0 8px 20px rgba(255,185,3,.25);
  --sh-sheet:0 -8px 40px rgba(0,0,0,.5);

  --sky:linear-gradient(180deg,#1B1611 0%,#211A14 46%,#172019 100%);
  --sky-sun:#3A2E1C;
  --sky-cloud:#2E251D;
  --sky-tw:#D9A64C;
}

/* ── 2. 基础 ────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}          /* .field 等 flex 容器会覆盖 UA 的 display:none */
html,body{margin:0;padding:0}
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font);
  font-size:var(--fs-body);
  line-height:1.5;
  color:var(--ink);
  background:var(--canvas);
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior-y:none;
}
h1,h2,h3,h4,p{margin:0}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
svg.ico{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;flex:none}
svg.ico--sm{width:16px;height:16px}
svg.ico--lg{width:24px;height:24px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── 2.1 登录门 ─────────────────────────────────────────── */
.gate{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;
  background:var(--sky);padding:20px}
.gate__card{width:100%;max-width:340px;background:var(--surface);border:1px solid var(--hairline);
  border-radius:var(--r-xl);padding:var(--s10) var(--s6);text-align:center;box-shadow:var(--sh-card)}
.gate__logo{font-size:46px;line-height:1;display:block}
.gate__title{font-family:var(--font-display);font-weight:400;font-size:var(--fs-display);letter-spacing:.5px;margin-top:var(--s3)}
.gate__sub{color:var(--ink-muted);font-size:var(--fs-caption);margin:var(--s1) 0 var(--s5)}
.gate__msg{font-size:var(--fs-caption);min-height:20px;margin-top:var(--s3)}
.gate__msg.err{color:var(--c-health)}

/* 手账字体映射：标题用站酷快乐体、数字用 Baloo 2 */
.card__title,.sheet__title,.topbar__title,.empty__title,.sidebar__brandtext strong{
  font-family:var(--font-display);font-weight:400;letter-spacing:.3px}
.hero__value,.timer__num,.stat__val,.calday__num,.stepper__input,.topclock b,
.bar__v,.tl__time,.mrow__vals,.mrow__date,.datebar__title small{
  font-family:var(--font-num)}

/* ── 3. 骨架 ────────────────────────────────────────────── */
.app{display:flex;min-height:100dvh}

.sidebar{display:none}

.main{flex:1;display:flex;flex-direction:column;min-width:0;position:relative;z-index:1}

/* ── 3.1 手账氛围层：暖色天空 + 光晕 + 流云 + 星光 ──────── */
.ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:var(--sky)}
.ambient > *{position:absolute}
.ambient__sun{top:-96px;right:-64px;width:310px;height:310px;border-radius:50%;
  background:radial-gradient(circle,var(--sky-sun) 0%,transparent 66%)}
.ambient__cloud{border-radius:999px;background:var(--sky-cloud);
  animation:drift 62s ease-in-out infinite}
.ambient__cloud::before,.ambient__cloud::after{content:"";position:absolute;border-radius:50%;
  background:var(--sky-cloud)}
.c1{width:152px;height:40px;top:8%;left:5%;opacity:.85}
.c1::before{width:58px;height:58px;top:-26px;left:24px}
.c1::after{width:42px;height:42px;top:-17px;right:26px}
.c2{width:110px;height:32px;top:25%;right:6%;opacity:.7;
  animation-duration:80s;animation-direction:reverse}
.c2::before{width:44px;height:44px;top:-20px;left:18px}
.c2::after{width:32px;height:32px;top:-13px;right:20px}
.c3{width:128px;height:36px;bottom:15%;left:11%;opacity:.55;animation-duration:94s}
.c3::before{width:50px;height:50px;top:-22px;left:20px}
.c3::after{width:36px;height:36px;top:-15px;right:22px}
@keyframes drift{0%,100%{transform:translateX(-3vw)}50%{transform:translateX(5vw)}}
.ambient__tw{font-size:13px;line-height:1;color:var(--sky-tw);
  animation:twinkle 3.6s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.2;transform:scale(.8)}50%{opacity:.85;transform:scale(1.12)}}
html[data-theme="dark"] .ambient__cloud{opacity:.5}

.topbar{
  position:sticky;top:0;z-index:30;
  padding:calc(env(safe-area-inset-top) + 10px) var(--s4) 10px;
  background:color-mix(in srgb, var(--canvas) 82%, transparent);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid transparent;
  transition:border-color .2s;
}
.topbar.is-stuck{border-bottom-color:var(--hairline)}
.topbar__row{display:flex;align-items:center;gap:var(--s3);max-width:560px;margin:0 auto;width:100%}
.topbar__titles{flex:1;min-width:0}
.topbar__title{font-size:var(--fs-title);font-weight:600;letter-spacing:-.3px;line-height:1.25}
.topbar__sub{font-size:var(--fs-caption);color:var(--ink-muted);line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.avatar{
  width:40px;height:40px;border-radius:50%;flex:none;
  display:grid;place-items:center;font-size:21px;
  background:radial-gradient(circle at 30% 25%,#FFE9A8,#FFC93C);
  border:2px solid #fff;box-shadow:0 3px 8px rgba(224,135,0,.3);
}

.scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding-bottom:calc(var(--tabbar-h) + var(--s8) + var(--s10) + env(safe-area-inset-bottom))}
.wrap{max-width:560px;margin:0 auto;padding:var(--s4) var(--s4) var(--s6);
  display:flex;flex-direction:column;gap:var(--s5)}

/* ── 4. 底部胶囊 Tab Bar ────────────────────────────────── */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  padding:var(--s3) 21px calc(21px + env(safe-area-inset-bottom));
  pointer-events:none;
}
.tabpill{
  pointer-events:auto;
  display:flex;align-items:center;gap:var(--s1);
  height:var(--tabbar-h);border-radius:36px;padding:4px;
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border:1px solid var(--hairline);
  box-shadow:var(--sh-card);
  max-width:560px;margin:0 auto;
}
.tab{
  flex:1;height:100%;border-radius:26px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:var(--ink-muted);transition:color .18s, background-color .18s, box-shadow .18s, transform .12s;
}
.tab:active{transform:scale(.95)}
.tab.is-active{background:var(--honey);color:var(--on-accent);box-shadow:0 3px 0 var(--honey-shadow)}
.tab__label{font-size:var(--fs-micro);font-weight:700;letter-spacing:.4px;line-height:1}

.fab{
  position:fixed;z-index:41;right:21px;
  bottom:calc(21px + var(--tabbar-h) + var(--s3) + env(safe-area-inset-bottom));
  width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(160deg,#FFC93C,#FF9E3D);color:#fff;
  box-shadow:var(--sh-fab);transition:transform .12s var(--ease);
}
.fab:active{transform:scale(.9) rotate(90deg)}
.fab .ico{width:26px;height:26px;stroke-width:2.2}

/* ── 5. 通用组件 ────────────────────────────────────────── */
.card{
  background:var(--surface);
  border:1px solid var(--hairline);
  border-radius:var(--r-lg);
  padding:var(--s4);
  box-shadow:var(--sh-card);
}
.card--flush{padding:0;overflow:hidden}
.card--soft{background:var(--parchment);box-shadow:none}
.card--accent{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 22%,transparent)}

.card__head{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s3)}
.card__title{font-size:var(--fs-lead);font-weight:400;letter-spacing:.3px;flex:1;min-width:0}
.card__action{font-size:var(--fs-caption);color:var(--accent);font-weight:700}

.eyebrow{font-size:var(--fs-micro);font-weight:700;letter-spacing:.9px;
  text-transform:uppercase;color:var(--accent-strong)}

/* 3D 按压按钮：硬底边阴影 + 按下下沉 */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  height:46px;padding:0 var(--s5);border-radius:14px;
  font-size:var(--fs-body);font-weight:700;letter-spacing:-.2px;
  transition:transform .12s var(--ease), box-shadow .12s, background-color .18s, color .18s, border-color .18s, opacity .18s;
  white-space:nowrap;border:1px solid transparent;
}
.btn:active{transform:translateY(3px)}
.btn:disabled{opacity:.42;pointer-events:none}
.btn--primary{background:var(--honey);color:var(--on-accent);box-shadow:0 4px 0 var(--honey-shadow)}
.btn--primary:active{box-shadow:0 1px 0 var(--honey-shadow)}
.btn--secondary{background:var(--surface);color:var(--accent);border:1px solid var(--accent)}
.btn--ghost{background:var(--parchment);color:var(--ink-2);border:1px solid var(--hairline);box-shadow:0 4px 0 var(--hairline-strong)}
.btn--ghost:active{box-shadow:0 1px 0 var(--hairline-strong)}
.btn--quiet{background:transparent;color:var(--ink-muted)}
.btn--danger{background:color-mix(in srgb,var(--c-health) 12%,var(--surface));color:var(--c-health);
  border:1px solid color-mix(in srgb,var(--c-health) 40%,transparent)}
.btn--block{width:100%}
.btn--sm{height:38px;padding:0 var(--s4);font-size:var(--fs-caption)}
.btn--lg{height:52px;padding:0 var(--s6);font-size:var(--fs-lead)}

.iconbtn{
  width:38px;height:38px;border-radius:12px;flex:none;
  display:grid;place-items:center;color:var(--ink-2);
  background:var(--parchment);border:1px solid var(--hairline);
  box-shadow:0 3px 0 var(--hairline-strong);
  transition:transform .12s var(--ease), box-shadow .12s;
}
.iconbtn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--hairline-strong)}
.iconbtn--xs{width:28px;height:28px;border-radius:9px;box-shadow:0 2px 0 var(--hairline-strong)}
.iconbtn--xs .ico{width:14px;height:14px}
.iconbtn--danger{color:var(--c-health);background:color-mix(in srgb,var(--c-health) 10%,var(--surface))}

.segmented{
  display:flex;gap:2px;padding:3px;border-radius:var(--r-pill);
  background:var(--parchment);border:1px solid var(--hairline);
}
.segmented__item{
  flex:1;height:34px;border-radius:var(--r-pill);
  font-size:var(--fs-caption);font-weight:700;color:var(--ink-muted);
  display:flex;align-items:center;justify-content:center;gap:5px;
  transition:background-color .18s,color .18s,box-shadow .18s;
}
.segmented__item.is-active{background:var(--honey);color:var(--on-accent);
  box-shadow:0 2px 0 var(--honey-shadow)}

.chiprow{display:flex;gap:var(--s2);overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.chiprow::-webkit-scrollbar{display:none}
.chip{
  flex:none;height:34px;padding:0 var(--s4);border-radius:var(--r-pill);
  background:var(--surface);border:1px solid var(--hairline);
  font-size:var(--fs-caption);font-weight:700;color:var(--ink-2);
  display:inline-flex;align-items:center;gap:6px;
  transition:background-color .18s,color .18s,border-color .18s,transform .12s;
}
.chip:active{transform:scale(.93)}
.chip.is-active{background:var(--honey);border-color:var(--honey);color:var(--on-accent);
  box-shadow:0 3px 0 var(--honey-shadow)}

.dot{width:8px;height:8px;border-radius:50%;flex:none}

.field{display:flex;flex-direction:column;gap:6px}
.field__label{font-size:var(--fs-caption);font-weight:700;color:var(--ink-2)}
.field__hint{font-size:var(--fs-caption);color:var(--ink-muted)}
.input,.select{
  height:46px;padding:0 var(--s4);border-radius:var(--r-md);
  background:var(--surface);border:1px solid var(--hairline);
  font-size:var(--fs-body);width:100%;
}
.input:focus,.select:focus{outline:2px solid var(--honey);outline-offset:-1px;border-color:transparent}
.input--lg{height:54px;font-size:var(--fs-lead);font-weight:700;letter-spacing:-.3px}
.select{appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-muted) 50%),
                   linear-gradient(135deg,var(--ink-muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) 21px, calc(100% - 13px) 21px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:var(--s8)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}

.rowline{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) 0;
  border-bottom:1px solid var(--hairline)}
.rowline:last-child{border-bottom:0}
.rowline__icon{width:34px;height:34px;border-radius:var(--r-sm);display:grid;place-items:center;flex:none}
.rowline__text{flex:1;min-width:0}
.rowline__title{font-size:var(--fs-body);font-weight:700}
.rowline__sub{font-size:var(--fs-caption);color:var(--ink-muted);margin-top:1px}

.switch{width:46px;height:28px;border-radius:999px;flex:none;position:relative;
  background:var(--hairline-strong);transition:background-color .2s}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .2s var(--ease)}
.switch.is-on{background:var(--honey)}
.switch.is-on::after{transform:translateX(18px)}

.empty{display:flex;flex-direction:column;align-items:center;gap:var(--s2);
  padding:var(--s10) var(--s6);text-align:center;color:var(--ink-muted)}
.empty__emoji{font-size:40px;line-height:1;animation:breathe 2.4s ease-in-out infinite}
.empty__title{font-size:var(--fs-lead);font-weight:400;color:var(--ink);letter-spacing:.3px}
.empty__text{font-size:var(--fs-caption);max-width:32ch}

/* ── 5.1 同步日志框 ────────────────────────────────────── */
.synclog{
  margin-top:var(--s3);
  max-height:176px;overflow-y:auto;
  background:var(--parchment);
  border:1px solid var(--hairline);
  border-radius:var(--r-md);
  padding:var(--s3);
  display:flex;flex-direction:column;gap:var(--s2);
  font-size:var(--fs-micro);
}
.synclog__empty{color:var(--ink-muted);text-align:center;padding:var(--s2) 0}
.synclog__row{display:flex;gap:var(--s2);align-items:flex-start;line-height:1.5}
.synclog__time{font-family:var(--font-num);color:var(--ink-faint);flex:none;font-variant-numeric:tabular-nums}
.synclog__msg{color:var(--ink-2);word-break:break-all;min-width:0}
.synclog__row--ok .synclog__msg{color:var(--c-food)}
.synclog__row--error .synclog__msg{color:var(--c-health)}
.synclog__row--info .synclog__msg{color:var(--ink-2)}

/* ── 6. 今日页：Hero / 统计 / 时间轴 ────────────────────── */
.hero{
  background:var(--accent-soft);
  border:1px solid color-mix(in srgb,var(--accent) 20%,transparent);
  border-radius:var(--r-xl);padding:var(--s5);
  display:flex;flex-direction:column;gap:var(--s4);
}
.hero__top{display:flex;align-items:flex-start;gap:var(--s3)}
.hero__label{flex:1;min-width:0}
.hero__eyebrow{font-size:var(--fs-micro);font-weight:700;letter-spacing:.9px;
  text-transform:uppercase;color:var(--accent-strong)}
.hero__value{font-size:var(--fs-hero);font-weight:700;letter-spacing:-1.4px;line-height:1.05;
  font-variant-numeric:tabular-nums;margin-top:2px}
.hero__value small{font-size:20px;font-weight:700;letter-spacing:-.3px;margin-left:3px}
.hero__note{font-size:var(--fs-caption);color:var(--ink-2);margin-top:6px;line-height:1.45}
.hero__badge{
  display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 var(--s3);
  border-radius:var(--r-pill);background:var(--surface);
  font-size:var(--fs-caption);font-weight:700;color:var(--accent-strong);flex:none;
}
.hero__actions{display:flex;gap:var(--s3);width:100%}
.hero__actions .btn{flex:1;min-width:0}
.hero__bar{height:6px;border-radius:999px;background:color-mix(in srgb,var(--accent) 16%,transparent);overflow:hidden}
.hero__bar > i{display:block;height:100%;border-radius:999px;background:var(--accent);
  transition:width .5s var(--ease)}
.hero.is-running{background:var(--surface);border:2px dashed color-mix(in srgb,var(--accent) 55%,transparent)}

.statgrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.stat{
  background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-md);
  padding:var(--s3);display:flex;flex-direction:column;gap:6px;box-shadow:var(--sh-card);
}
.stat__head{display:flex;align-items:center;gap:7px;
  font-size:var(--fs-caption);font-weight:700;color:var(--ink-muted)}
.stat__emoji{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:16px;flex:none}
.stat__val{font-size:22px;font-weight:700;letter-spacing:-.6px;font-variant-numeric:tabular-nums;line-height:1.1}
.stat__val small{font-size:var(--fs-caption);font-weight:700;color:var(--ink-muted);margin-left:3px}
.stat__foot{font-size:var(--fs-micro);color:var(--ink-faint)}

.tl{display:flex;flex-direction:column}
.tl__item{display:flex;gap:var(--s3);padding:var(--s3) 0;position:relative}
.tl__item + .tl__item{border-top:1px solid var(--hairline)}
.tl__rail{position:relative;width:36px;flex:none;display:flex;justify-content:center}
.tl__rail::before{content:"";position:absolute;top:0;bottom:0;width:2px;
  background:var(--hairline);border-radius:2px;z-index:0}
.tl__item:first-child .tl__rail::before{top:18px}
.tl__item:last-child .tl__rail::before{bottom:calc(100% - 18px)}
.tl__dot{position:relative;z-index:1;width:36px;height:36px;border-radius:11px;
  display:grid;place-items:center;font-size:18px;margin-top:1px;flex:none}
.tl__body{flex:1;min-width:0;display:flex;align-items:flex-start;gap:var(--s2)}
.tl__main{flex:1;min-width:0}
.tl__title{font-size:var(--fs-body);font-weight:700;letter-spacing:-.2px}
.tl__meta{font-size:var(--fs-caption);color:var(--ink-muted);margin-top:2px;line-height:1.45}
.tl__time{font-size:var(--fs-caption);color:var(--ink-faint);font-variant-numeric:tabular-nums;flex:none}
.tl__ops{display:flex;flex-direction:column;gap:4px;flex:none;align-self:center}
.tl__day{font-size:var(--fs-caption);font-weight:700;color:var(--ink-muted);
  padding:var(--s3) 0 var(--s1);position:sticky;top:0;background:var(--canvas);z-index:2}

/* ── 7. 成长曲线 ────────────────────────────────────────── */
.growth{display:flex;flex-direction:column;gap:var(--s4)}
.growth__chart{width:100%;display:block;overflow:visible}
.growth__legend{display:flex;flex-wrap:wrap;gap:var(--s3);font-size:var(--fs-micro);color:var(--ink-muted)}
.growth__legend span{display:inline-flex;align-items:center;gap:5px}
.growth__legend i{width:14px;height:3px;border-radius:2px;display:block}
.pctbar{display:flex;flex-direction:column;gap:6px}
.pctbar__head{display:flex;justify-content:space-between;font-size:var(--fs-caption);font-weight:700}
.pctbar__track{height:8px;border-radius:999px;position:relative;
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--c-health) 40%,transparent) 0%,
    color-mix(in srgb,var(--c-growth) 45%,transparent) 35%,
    color-mix(in srgb,var(--c-growth) 45%,transparent) 65%,
    color-mix(in srgb,var(--c-health) 40%,transparent) 100%)}
.pctbar__pin{position:absolute;top:-3px;width:14px;height:14px;border-radius:50%;
  background:var(--accent);border:2.5px solid var(--surface);box-shadow:0 1px 3px rgba(0,0,0,.18);
  transform:translateX(-50%);transition:left .4s var(--ease)}
.pctbar__scale{display:flex;justify-content:space-between;font-size:var(--fs-micro);color:var(--ink-faint)}

/* ── 8. 记录页日期条 ────────────────────────────────────── */
.datebar{display:flex;align-items:center;gap:var(--s2)}
.datebar__title{flex:1;text-align:center;font-size:var(--fs-body);font-weight:700}
.datebar__title small{display:block;font-size:var(--fs-caption);font-weight:400;color:var(--ink-muted)}
.calstrip{display:flex;gap:var(--s2);overflow-x:auto;scrollbar-width:none;
  padding:2px;margin:-2px}
.calstrip::-webkit-scrollbar{display:none}
.calday{
  flex:none;width:52px;padding:var(--s2) 0;border-radius:var(--r-md);
  background:var(--surface);border:1px solid var(--hairline);
  display:flex;flex-direction:column;align-items:center;gap:3px;
  transition:background-color .18s,color .18s,border-color .18s,box-shadow .18s;
}
.calday__dow{font-size:var(--fs-micro);color:var(--ink-faint);font-weight:700}
.calday__num{font-size:var(--fs-lead);font-weight:700;font-variant-numeric:tabular-nums;line-height:1.1}
.calday__mark{width:5px;height:5px;border-radius:50%;background:var(--accent)}
.calday.is-active{background:var(--honey);border-color:var(--honey);color:var(--on-accent);
  box-shadow:0 3px 0 var(--honey-shadow)}
.calday.is-active .calday__dow{color:color-mix(in srgb,var(--on-accent) 80%,transparent)}
.calday.is-active .calday__mark{background:var(--on-accent)}
.calday.is-today .calday__num{color:var(--accent)}
.calday.is-active.is-today .calday__num{color:var(--on-accent)}

/* ── 9. Sheet / Toast ───────────────────────────────────── */
.backdrop{position:fixed;inset:0;z-index:50;background:rgba(59,50,48,.45);
  backdrop-filter:blur(2px);opacity:0;transition:opacity .26s var(--ease)}
.backdrop.is-open{opacity:1}

.sheet{
  position:fixed;z-index:51;left:0;right:0;bottom:0;
  max-height:88dvh;display:flex;flex-direction:column;
  background:var(--surface);
  border-radius:var(--r-2xl) var(--r-2xl) 0 0;
  box-shadow:var(--sh-sheet);
  transform:translateY(101%);transition:transform .34s var(--ease);
  padding-bottom:env(safe-area-inset-bottom);
}
.sheet.is-open{transform:translateY(0)}
.sheet__grab{width:44px;height:5px;border-radius:999px;background:var(--hairline-strong);
  margin:10px auto 2px;flex:none}
.sheet__head{display:flex;align-items:center;gap:var(--s3);padding:var(--s2) var(--s4) var(--s3);flex:none}
.sheet__title{flex:1;font-size:var(--fs-title);font-weight:400;letter-spacing:.3px}
.sheet__body{overflow-y:auto;padding:0 var(--s4) var(--s4);display:flex;flex-direction:column;gap:var(--s4)}
.sheet__foot{padding:var(--s3) var(--s4) var(--s4);border-top:2px dashed var(--hairline-strong);
  display:flex;gap:var(--s3);flex:none}
.sheet__foot .btn{flex:1}

.toast{
  position:fixed;z-index:60;left:50%;transform:translate(-50%,16px);
  bottom:calc(var(--tabbar-h) + 44px + env(safe-area-inset-bottom));
  max-width:min(88vw,420px);
  padding:11px var(--s4);border-radius:var(--r-pill);
  background:var(--ink);color:var(--canvas);
  font-size:var(--fs-caption);font-weight:700;
  box-shadow:0 6px 24px rgba(0,0,0,.24);
  opacity:0;transition:opacity .22s, transform .28s var(--ease);
  display:flex;align-items:center;gap:var(--s2);pointer-events:none;
}
.toast.is-open{opacity:1;transform:translate(-50%,0)}

/* 快捷类型选择（弹层菜单） */
.qgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.qitem{
  aspect-ratio:1/1;border-radius:var(--r-lg);
  background:var(--parchment);border:1px solid var(--hairline);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  font-size:var(--fs-caption);font-weight:700;color:var(--ink-2);
  transition:transform .12s var(--ease);
}
.qitem:active{transform:scale(.95)}
.qitem__emoji{font-size:26px;line-height:1}
.qitem--feeding{color:var(--c-feeding)} .qitem--sleep{color:var(--c-sleep)}
.qitem--diaper{color:var(--c-diaper)} .qitem--growth{color:var(--c-growth)}
.qitem--health{color:var(--c-health)} .qitem--food{color:var(--c-food)}

.sideopt{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3)}
.sideopt__b{
  height:86px;border-radius:var(--r-md);background:var(--parchment);
  border:1px solid var(--hairline);font-weight:700;font-size:var(--fs-body);
  color:var(--ink-2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  transition:background-color .18s,color .18s,border-color .18s,transform .12s;
}
.sideopt__b:active{transform:scale(.97)}
.sideopt__b.is-active{background:var(--honey);border-color:var(--honey);color:var(--on-accent)}
.sideopt__emoji{font-size:28px;line-height:1}

.timer{text-align:center;padding:var(--s4) 0}
.timer__num{font-size:52px;font-weight:700;letter-spacing:-2px;
  font-variant-numeric:tabular-nums;line-height:1}

/* 今日页两栏容器：移动端纵向堆叠，桌面端由媒体查询改为栅格 */
.homegrid{display:flex;flex-direction:column;gap:var(--s4)}
.homegrid > *{min-width:0;display:flex;flex-direction:column;gap:var(--s4)}

/* ── 10. 手账组件：快速记录 / 间隔 / 计时 ───────────────── */
.quickgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4) var(--s2)}
.quick{display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:var(--s1) 2px;border-radius:var(--r-md);transition:transform .12s var(--ease)}
.quick:active{transform:scale(.93)}
.quick__ic{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;
  font-size:26px;line-height:1;
  background:color-mix(in srgb,var(--qc,var(--accent)) 15%,var(--surface));
  border:1px solid color-mix(in srgb,var(--qc,var(--accent)) 26%,transparent);
  box-shadow:0 4px 0 color-mix(in srgb,var(--qc,var(--accent)) 22%,transparent);
  transition:transform .12s var(--ease), box-shadow .12s}
.quick:active .quick__ic{transform:translateY(3px);box-shadow:0 1px 0 color-mix(in srgb,var(--qc,var(--accent)) 22%,transparent)}
.quick__lb{font-size:var(--fs-micro);font-weight:700;color:var(--ink-2);letter-spacing:.2px}
.quick.is-live .quick__ic{animation:breathe 1.7s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}

.intlist{margin-top:var(--s4);padding-top:var(--s1);
  border-top:1px dashed var(--hairline-strong)}
.introw{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:7px 0;font-size:var(--fs-caption);color:var(--ink-muted)}
.introw span{display:inline-flex;align-items:center;gap:6px}
.introw b{font-size:var(--fs-body);font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums;font-family:var(--font-num)}

.hero--run{background:var(--surface);border-color:var(--hairline)}
.hero__actions{flex-wrap:wrap}
.hero__actions .btn{flex:1 1 150px;min-width:0}
.timer{text-align:center;padding:var(--s2) 0 0}
.timer__num{font-size:46px;font-weight:700;letter-spacing:-1.6px;line-height:1.05;
  font-variant-numeric:tabular-nums}
.timer__sub{font-size:var(--fs-caption);color:var(--ink-muted);margin-top:6px}
.timer__side{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 var(--s3);
  border-radius:var(--r-pill);background:var(--accent-soft);color:var(--accent-strong);
  font-size:var(--fs-caption);font-weight:700}
.pulse{width:9px;height:9px;border-radius:50%;flex:none;background:#FF5D5D;
  animation:pulse 1.1s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.32;transform:scale(.62)}}
.topclock{width:auto !important;height:38px;padding:0 var(--s3) !important;
  border-radius:var(--r-pill) !important;display:inline-flex !important;
  align-items:center;justify-content:center;gap:6px !important;color:var(--accent) !important;
  box-shadow:none !important;background:var(--accent-soft) !important;border-color:transparent !important}
.topclock b{font-size:var(--fs-caption);font-weight:700;font-variant-numeric:tabular-nums}

/* ── 11. 表单：步进器 / 选项芯片 ───────────────────────── */
.stepper{display:flex;align-items:center;gap:var(--s3)}
.stepper__btn{width:48px;height:48px;flex:none;border-radius:var(--r-md);
  background:var(--parchment);border:1px solid var(--hairline);
  font-size:21px;font-weight:700;color:var(--ink-2);
  display:grid;place-items:center;box-shadow:0 3px 0 var(--hairline-strong);
  transition:transform .12s var(--ease), box-shadow .12s}
.stepper__btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--hairline-strong)}
.stepper__val{flex:1;min-width:0;height:48px;border-radius:var(--r-md);
  background:var(--surface);border:1px solid var(--hairline);
  display:flex;align-items:baseline;justify-content:center;gap:5px;padding:0 var(--s2)}
.stepper__input{width:100%;min-width:0;border:0;background:none;outline:none;text-align:right;
  font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.4px;padding:0}
.stepper__val small{font-size:var(--fs-caption);font-weight:700;color:var(--ink-muted);flex:none}
.optgrid{display:flex;flex-wrap:wrap;gap:var(--s2)}
.optchip{height:36px;padding:0 var(--s4);border-radius:var(--r-pill);
  background:var(--surface);border:1px solid var(--hairline);
  font-size:var(--fs-caption);font-weight:700;color:var(--ink-2);
  transition:background-color .18s,color .18s,border-color .18s,transform .12s}
.optchip:active{transform:scale(.93)}
.optchip.is-active{background:var(--honey);border-color:var(--honey);color:var(--on-accent);
  box-shadow:0 3px 0 var(--honey-shadow)}

/* ── 12. 近 7 天柱状图 ─────────────────────────────────── */
.bars{display:flex;align-items:flex-end;gap:var(--s2);height:176px;padding-top:var(--s2)}
.barcol{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;align-items:center;gap:5px}
.bar__v{font-size:var(--fs-micro);font-weight:700;color:var(--ink-muted);min-height:14px;
  line-height:1.25;font-variant-numeric:tabular-nums}
.bar__wrap{flex:1;width:100%;min-height:0;display:flex;align-items:flex-end;justify-content:center}
.bar{width:70%;max-width:34px;min-height:4px;border-radius:9px 9px 4px 4px;
  background:var(--accent);opacity:.62;
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.09);
  transition:height .6s cubic-bezier(.34,1.32,.42,1)}
.barcol.is-today .bar{opacity:1}
.bar__lb{font-size:var(--fs-micro);font-weight:700;color:var(--ink-faint)}
.barcol.is-today .bar__lb{color:var(--accent);font-weight:800}

/* ── 13. 历次测量 / 撒花 ───────────────────────────────── */
.mrow{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) 0;
  border-bottom:1px dashed var(--hairline)}
.mrow:last-child{border-bottom:0}
.mrow__date{flex:none;width:74px;font-size:var(--fs-caption);font-weight:700;
  color:var(--ink-muted);font-variant-numeric:tabular-nums}
.mrow__vals{flex:1;min-width:0;font-size:var(--fs-caption);font-weight:700;
  font-variant-numeric:tabular-nums}
.delta{display:inline-block;font-size:var(--fs-micro);font-weight:800;
  border-radius:7px;padding:2px 6px;margin-left:5px}
.delta--up{background:color-mix(in srgb,var(--c-food) 20%,transparent);color:var(--c-food)}
.delta--down{background:color-mix(in srgb,var(--c-health) 20%,transparent);color:var(--c-health)}
.pop{position:fixed;left:50%;top:42%;z-index:70;font-size:20px;pointer-events:none}

/* ── 14. 桌面适配 ──────────────────────────────────────── */
@media (min-width:768px){
  .wrap{max-width:600px;padding:var(--s5) var(--s5) var(--s8)}
  .topbar__row{max-width:600px}
  .tabpill{max-width:600px}
}

@media (min-width:1024px){
  :root{ --fs-body:16px; --fs-lead:18px; --fs-title:21px; --fs-display:32px; --fs-hero:52px; }

  .sidebar{
    display:flex;flex-direction:column;gap:var(--s6);
    width:252px;flex:none;height:100dvh;position:sticky;top:0;z-index:2;
    padding:var(--s6) var(--s4) var(--s5);
    background:var(--parchment);border-right:1px solid var(--hairline);
  }
  .sidebar__brand{display:flex;align-items:center;gap:var(--s3);padding:0 var(--s2)}
  .sidebar__logo{width:42px;height:42px;border-radius:var(--r-md);display:grid;place-items:center;
    font-size:23px;background:var(--surface);border:1px solid var(--hairline);flex:none}
  .sidebar__brandtext{display:flex;flex-direction:column;min-width:0}
  .sidebar__brandtext strong{font-size:var(--fs-body);font-weight:400;letter-spacing:.3px}
  .sidebar__brandtext span{font-size:var(--fs-caption);color:var(--ink-muted)}
  .sidebar__nav{display:flex;flex-direction:column;gap:2px;flex:1}
  .sidenav{
    display:flex;align-items:center;gap:var(--s3);height:44px;padding:0 var(--s3);
    border-radius:var(--r-md);color:var(--ink-2);font-size:var(--fs-body);font-weight:700;
    transition:background-color .18s,color .18s,box-shadow .18s;
  }
  .sidenav:hover{background:color-mix(in srgb,var(--surface) 70%,transparent)}
  .sidenav.is-active{background:var(--honey);color:var(--on-accent);font-weight:700;
    box-shadow:0 3px 0 var(--honey-shadow)}
  .sidebar__foot{display:flex;flex-direction:column;gap:var(--s2)}

  .topbar{display:none}
  .tabbar,.fab{display:none}
  .scroll{padding-bottom:var(--s12)}
  .wrap{max-width:1080px;padding:var(--s8) var(--s8) var(--s12);gap:var(--s6)}

  .hero{padding:var(--s6);flex-direction:row;align-items:center;gap:var(--s8)}
  .hero__top{flex:1;min-width:0;flex-direction:column;gap:0}
  .hero__actions{flex:none;width:auto}
  .hero__actions .btn{flex:none}
  .hero .btn--lg{white-space:nowrap}

  .statgrid{grid-template-columns:repeat(4,1fr);gap:var(--s4)}
  .homegrid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
    gap:var(--s6);align-items:start}
  .homegrid > *{min-width:0}
  .quickgrid{grid-template-columns:repeat(6,1fr);gap:var(--s4) var(--s3)}
  .quick__ic{width:60px;height:60px}
  .bars{height:214px}
  .timer__num{font-size:54px}

  .sheet{
    left:50%;right:auto;bottom:auto;top:50%;
    width:min(560px,92vw);max-height:84dvh;
    border-radius:var(--r-xl);
    transform:translate(-50%,-46%) scale(.97);opacity:0;
  }
  .sheet.is-open{transform:translate(-50%,-50%) scale(1);opacity:1}
  .sheet__grab{display:none}
  .sheet__head{padding-top:var(--s5)}
  .sheet__body{padding:0 var(--s6) var(--s5)}
  .sheet__foot{padding:var(--s4) var(--s6) var(--s6)}

  .toast{bottom:var(--s8)}
  .qgrid{grid-template-columns:repeat(6,1fr)}
  .qitem{aspect-ratio:auto;height:92px}
}

@media (min-width:1360px){
  .wrap{max-width:1160px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
}