/* ==========================================================================
   胎心记录 · 样式
   --------------------------------------------------------------------------
   设计变量与设计稿 v2 逐字一致。三档状态色是整份样式里最要紧的三个值，
   理由写在 --calm/--mind/--care 那一段。
   ========================================================================== */

:root{
  --bg:#FFE9E1;
  --card:#FFFFFF;
  --brand:#F2856D;
  --brand-2:#F7A48D;
  --brand-soft:#FDEDE9;
  --ink:#2E2A28;
  --ink-2:#5B524D;
  --ink-3:#6F655F;
  --ink-4:#9A8F88;
  --line:#EFE9E4;
  --radius:16px;
  --shadow:0 2px 12px rgba(120,95,80,.06);
  --tabbar-h:58px;
  --tabgap:12px;

  /* ---- 三档状态色 ----
     需求原话：「遇到异常的话，就是委婉的提醒用户去就医，
     千万不要大红色提醒，或者是很说的语气很吓人那种。」

     所以三档全部落在同一条暖色带上，只靠明度往下压、彩度往上收来区分轻重。
     远看是一套颜色的深浅，不是「绿灯黄灯红灯」。
     第三档 #9C5C46 是赤陶／褐玫瑰，跟正红差着一整个饱和度档位 ——
     它读起来是「沉」，不是「急」。 */
  --calm:#7FA88B;   --calm-soft:#EDF4EF;  --calm-line:#DCEAE1;   /* 一档 · 安心 */
  --mind:#B0854B;   --mind-soft:#FAF2E6;  --mind-line:#EFE1C8;   /* 二档 · 留意 */
  --care:#9C5C46;   --care-soft:#F7EDE8;  --care-line:#EBD9D0;   /* 三档 · 去看看 */

  --tide:#6E9BAF;   --tide-2:#8FB8C9;
  --tide-soft:#EAF2F6; --tide-line:#D3E3EB;
  --dim:#CDBFB7;

  --grad-hero:linear-gradient(158deg,#FFF7F3 0%,#FFE7DC 46%,#FBD8CA 100%);
  --grad-logo:linear-gradient(150deg,#F7A48D 0%,#F2856D 52%,#E9705C 100%);

  /* 全产品唯一的红。只挂在「领福利」那颗营销角标上，
     跟宝宝的任何指标都不发生关系。稀缺本身就是资产：
     红色一旦只意味着「有东西可领」，它就永久地跟「孩子出事了」脱钩了。 */
  --dot:#E8503A;
}

/* ==========================================================================
   0. 重置与「横向锁死」
   --------------------------------------------------------------------------
   横向一点都不能滑。做到这件事需要四层一起按住，少一层就漏：
     1) html/body overflow-x:hidden —— 挡住文档级横向滚动条
     2) overscroll-behavior-x:none —— 挡住 iOS 的橡皮筋回弹和左滑返回手势
     3) .app 自己也 overflow-x:hidden —— 子元素溢出时不把外层撑开
     4) 所有可能超宽的东西（表格、代码、长串数字）单独 min-width:0
   只写第 1 条的话，iOS Safari 上依然能把整页拖出一条白边。
   ========================================================================== */
*{box-sizing:border-box}
html,body{margin:0;padding:0;max-width:100%;overflow-x:hidden;overscroll-behavior-x:none}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font:15px/1.65 -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB",
       "Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{max-width:100%}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
a{color:inherit;text-decoration:none}
input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}

.app{
  max-width:520px;margin:0 auto;min-height:100vh;min-height:100dvh;
  position:relative;overflow-x:hidden;
  background:var(--bg);
  /* 底部给悬浮 tabbar 让位；再加安全区，免得 iPhone 小黑条压住最后一行 */
  padding-bottom:calc(var(--tabbar-h) + var(--tabgap) * 2 + env(safe-area-inset-bottom,0px) + 12px);
}
.page{min-height:60vh}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ==========================================================================
   1. 首页头部：logo + 胎心记录 + slogan + 孕周
   ========================================================================== */
.hero{
  background:var(--grad-hero);
  padding:calc(env(safe-area-inset-top,0px) + 20px) 18px 20px;
  border-radius:0 0 26px 26px;
  position:relative;overflow:hidden;
}
.hero::after{
  /* 右上角一团极淡的光，让整块不至于是死平的一片。
     纯装饰，所以 aria 上是不存在的。 */
  content:"";position:absolute;right:-46px;top:-58px;width:190px;height:190px;
  border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.7),transparent 68%);
  pointer-events:none;
}
.brand{display:flex;align-items:center;gap:12px;position:relative}
.logo{
  flex:0 0 46px;width:46px;height:46px;border-radius:15px;
  background:var(--grad-logo);
  display:grid;place-items:center;color:#fff;
  box-shadow:0 4px 14px rgba(233,112,92,.28);
}
.logo svg{width:26px;height:26px}
.brand-t{font-size:21px;font-weight:800;letter-spacing:.5px;line-height:1.25}
.brand-s{font-size:12px;color:var(--ink-3);margin-top:2px;letter-spacing:.2px}

.week{
  margin-top:16px;display:flex;align-items:flex-end;gap:10px;
  position:relative;
}
.week__n{font-size:34px;font-weight:800;line-height:1;letter-spacing:-.5px}
.week__n sup{font-size:17px;font-weight:700;margin-left:1px}
.week__u{font-size:13px;color:var(--ink-3);padding-bottom:4px}
.week__r{margin-left:auto;text-align:right;font-size:11.5px;color:var(--ink-3);padding-bottom:3px}
.week__bar{margin-top:11px;height:5px;border-radius:3px;background:rgba(255,255,255,.75);overflow:hidden}
.week__bar i{display:block;height:100%;border-radius:3px;background:var(--grad-logo)}

/* ==========================================================================
   2. 通用容器
   ========================================================================== */
.wrap{padding:0 16px}
.sec{margin-top:18px}
.sec__h{display:flex;align-items:baseline;gap:8px;margin:0 0 9px}
.sec__t{font-size:15px;font-weight:700}
.sec__m{margin-left:auto;font-size:12px;color:var(--brand);font-weight:600}
.card{
  background:var(--card);border-radius:var(--radius);padding:15px;
  box-shadow:var(--shadow);border:1px solid var(--line);
}
.card + .card{margin-top:11px}
.card__t{font-size:14.5px;font-weight:700;margin:0 0 7px}
.card__s{font-size:12.5px;color:var(--ink-3);line-height:1.7}
.muted{color:var(--ink-3)}
.tiny{font-size:11.5px}
.hr{height:1px;background:var(--line);margin:12px 0}

/* ==========================================================================
   3. 表盘区
   ========================================================================== */
.beat{padding:18px 15px 16px;text-align:center}
.beat__d{position:relative;width:208px;margin:0 auto}
.beat__c{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;pointer-events:none;
}
.beat__v{font-size:44px;font-weight:800;line-height:1;letter-spacing:-1px}
.beat__u{font-size:11.5px;color:var(--ink-4);margin-top:3px;letter-spacing:.4px}
/* 孕周写在盘子里，因为「这个数算不算正常」离不开孕周。
   分开放的话，用户读完数字就走了。 */
.beat__w{font-size:11px;color:var(--ink-4);margin-top:7px}
.beat__none{font-size:19px;font-weight:700;color:var(--ink-3)}
.beat__t{margin-top:13px;font-size:16px;font-weight:700}
.beat__s{margin-top:4px;font-size:12.5px;color:var(--ink-3);line-height:1.7}

/* ==========================================================================
   4. 三档状态块
   --------------------------------------------------------------------------
   三档共用同一套排版：一个小圆点、一行标题、若干行正文、可选一个行动按钮。
   分档只换颜色，不换结构、不换字号、不加感叹号、不加图标。
   加大字号或者换个惊叹图标，等于用版式喊了一嗓子 —— 那正是要避免的。
   ========================================================================== */
.st{display:flex;gap:11px;padding:13px 14px;border-radius:14px;border:1px solid}
.st + .st{margin-top:10px}
.st__d{flex:0 0 8px;width:8px;height:8px;border-radius:50%;margin-top:7px}
.st__m{flex:1;min-width:0}
.st__t{font-size:13.5px;font-weight:700;line-height:1.5}
.st__s{font-size:12.5px;color:var(--ink-2);line-height:1.75;margin-top:4px}
.st__b{
  display:inline-block;margin-top:10px;padding:8px 15px;border-radius:10px;
  font-size:12.5px;font-weight:700;color:#fff;
}
.st--calm{background:var(--calm-soft);border-color:var(--calm-line)}
.st--calm .st__d{background:var(--calm)} .st--calm .st__t{color:#4F7A5D} .st--calm .st__b{background:var(--calm)}
.st--mind{background:var(--mind-soft);border-color:var(--mind-line)}
.st--mind .st__d{background:var(--mind)} .st--mind .st__t{color:#8A6532} .st--mind .st__b{background:var(--mind)}
.st--care{background:var(--care-soft);border-color:var(--care-line)}
.st--care .st__d{background:var(--care)} .st--care .st__t{color:#8A4E39} .st--care .st__b{background:var(--care)}
.st--tide{background:var(--tide-soft);border-color:var(--tide-line)}
.st--tide .st__d{background:var(--tide)} .st--tide .st__t{color:#4E7F95} .st--tide .st__b{background:var(--tide)}

/* ==========================================================================
   5. 「我觉得今天不太对」常驻入口
   --------------------------------------------------------------------------
   刻意做成低饱和的虚线卡，不是按钮。
   一个醒目的按钮等于每天问一次「今天有没有不舒服」—— 那是在制造焦虑。
   它不争夺注意力，但只要你在找它，它永远在首页同一个位置。
   ========================================================================== */
.odd{
  display:flex;align-items:center;gap:11px;padding:12px 13px;border-radius:14px;
  background:transparent;border:1px dashed #E4D3C9;color:var(--ink-2);width:100%;text-align:left;
}
.odd__i{
  flex:0 0 32px;height:32px;border-radius:11px;background:#fff;
  display:grid;place-items:center;border:1px solid var(--line);color:var(--care);
}
.odd__i svg{width:17px;height:17px}
.odd__m{flex:1;min-width:0}
.odd__t{font-size:13.5px;font-weight:700;color:var(--ink)}
.odd__s{font-size:11.5px;color:var(--ink-3);margin-top:1px}
.odd__c{flex:0 0 auto;color:var(--dim)}

/* ==========================================================================
   6. 可能原因清单
   --------------------------------------------------------------------------
   「听不到胎心」这类页面的主体不是结论，是一串待排查项。
   序号用空心圆，不用勾也不用叉 —— 这不是「你做错了」的检查表。
   ========================================================================== */
.why{counter-reset:w;list-style:none;margin:0;padding:0}
.why li{
  position:relative;padding:10px 0 10px 31px;font-size:13px;line-height:1.7;
  color:var(--ink-2);border-bottom:1px dashed var(--line);
}
.why li:last-child{border-bottom:0;padding-bottom:2px}
.why li::before{
  counter-increment:w;content:counter(w);position:absolute;left:0;top:11px;
  width:21px;height:21px;border-radius:50%;border:1px solid var(--tide-line);
  color:var(--tide);font-size:11px;font-weight:700;display:grid;place-items:center;
}
.why b{color:var(--ink)}

/* ==========================================================================
   7. 记录列表
   ========================================================================== */
.rec{display:flex;align-items:center;gap:11px;padding:12px 0;border-bottom:1px solid var(--line)}
.rec:last-child{border-bottom:0}
.rec__v{
  flex:0 0 62px;font-size:20px;font-weight:800;line-height:1.1;letter-spacing:-.4px;
}
.rec__v small{font-size:10.5px;font-weight:600;color:var(--ink-4);margin-left:2px}
.rec__m{flex:1;min-width:0}
.rec__t{font-size:13px;font-weight:600}
.rec__s{font-size:11.5px;color:var(--ink-4);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rec__r{flex:0 0 auto;display:flex;align-items:center;gap:7px}
.rec--miss .rec__v{font-size:13px;font-weight:700;color:var(--ink-4);line-height:1.4}

/* 来源点：医生量的是实心，自己听的是空心。
   两种数据的可信度差一个量级，图上和列表上都必须分得开。 */
.src{flex:0 0 9px;width:9px;height:9px;border-radius:50%;border:1.6px solid var(--brand)}
.src--doc{background:var(--brand)}
.src--home{background:#fff}

.pill{
  display:inline-block;padding:2.5px 9px;border-radius:999px;
  font-size:10.5px;font-weight:700;line-height:1.6;white-space:nowrap;
}
.pill--calm{background:var(--calm-soft);color:#4F7A5D}
.pill--mind{background:var(--mind-soft);color:#8A6532}
.pill--care{background:var(--care-soft);color:#8A4E39}
.pill--tide{background:var(--tide-soft);color:#4E7F95}
.pill--gray{background:#F4F0ED;color:var(--ink-4)}

/* ==========================================================================
   8. 按钮 / 表单
   ========================================================================== */
.btn{
  display:block;width:100%;padding:13px;border-radius:13px;
  background:var(--brand);color:#fff;font-size:15px;font-weight:700;text-align:center;
  box-shadow:0 3px 12px rgba(242,133,109,.26);
}
.btn + .btn{margin-top:9px}
.btn--g{background:#fff;color:var(--ink-2);border:1px solid var(--line);box-shadow:none}
.btn--care{background:var(--care);box-shadow:0 3px 12px rgba(156,92,70,.24)}
.btn--tide{background:var(--tide);box-shadow:0 3px 12px rgba(110,155,175,.24)}
.btn--s{width:auto;display:inline-block;padding:7px 14px;font-size:12.5px;border-radius:10px}
.btn[disabled]{opacity:.5}

.fld{display:block;margin-bottom:12px}
.fld__l{display:block;font-size:12.5px;color:var(--ink-3);margin-bottom:6px;font-weight:600}
/* 这个 16px 是**功能**，不是审美，别顺手调小。
   iOS Safari 只要 input 的字号小于 16px，聚焦时就自动把整页放大 ——
   放大之后不会自己缩回去，页面从此比屏幕宽，人得手动双指缩。
   在填产检日期这种一屏好几格的表上，每点一格晃一下，很烦。
   另一种堵法是在 viewport 里写 user-scalable=no，但那等于把双指放大
   一起关掉 —— 这个应用是给孕妇看数字的，不能不让人放大。
   所以从这头解决：字号给到 16px，Safari 就不动了。 */
.fld__i{
  display:block;width:100%;padding:12px 13px;border-radius:12px;
  border:1px solid var(--line);background:#fff;font-size:16px;
}
.fld__i:focus{outline:none;border-color:var(--brand-2);box-shadow:0 0 0 3px var(--brand-soft)}
textarea.fld__i{min-height:78px;resize:vertical;line-height:1.6}
.fld__h{font-size:11.5px;color:var(--ink-4);margin-top:5px;line-height:1.6}

/* 分段选择器。记录来源用它，默认停在「产检时医生量的」那一格 ——
   默认值本身就是一句主张：这个应用期待你记的是什么。 */
.seg{display:flex;gap:6px;background:#F4F0ED;padding:4px;border-radius:12px}
.seg button{
  flex:1;padding:9px 4px;border-radius:9px;font-size:13px;font-weight:600;
  color:var(--ink-3);text-align:center;
}
.seg button.on{background:#fff;color:var(--ink);box-shadow:0 1px 4px rgba(120,95,80,.1)}
.seg--3 button{font-size:12.5px}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  padding:8px 13px;border-radius:11px;border:1px solid var(--line);background:#fff;
  font-size:13px;color:var(--ink-2);
}
.chip.on{border-color:var(--brand-2);background:var(--brand-soft);color:var(--brand);font-weight:700}

/* 数字键盘式的大输入。胎心是三位数，用普通输入框要人低头找小键盘。 */
.bpm{display:flex;align-items:baseline;justify-content:center;gap:8px;padding:6px 0 2px}
.bpm input{
  width:132px;border:0;border-bottom:2px solid var(--line);background:transparent;
  font-size:46px;font-weight:800;text-align:center;letter-spacing:-1px;padding:0 0 5px;
}
.bpm input:focus{outline:none;border-bottom-color:var(--brand)}
.bpm span{font-size:13px;color:var(--ink-4)}

/* ==========================================================================
   9. 图表容器
   ========================================================================== */
.chart{display:block;width:100%}
.chart-x{display:flex;justify-content:space-between;font-size:10.5px;color:var(--ink-4);margin-top:3px}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--ink-3);margin-top:10px}
.legend i{display:inline-block;width:9px;height:9px;border-radius:50%;
  border:1.6px solid var(--brand);margin-right:5px;vertical-align:-1px}
.legend i.f{background:var(--brand)}
.spark{vertical-align:middle}

/* ==========================================================================
   10. 顶栏 / tabbar
   ========================================================================== */
.nav{
  display:flex;align-items:center;gap:8px;
  padding:calc(env(safe-area-inset-top,0px) + 12px) 14px 12px;
  position:sticky;top:0;z-index:20;
  background:var(--bg);
}
/* 返回键在十二个页面里有十个都挂着，是全应用点得最多的一个控件。
   白底方块画成 34×34 是为了跟标题齐平好看，但 34 太小了 —— 苹果给的
   最小可点尺寸是 44，中间差的这 10px，在晃动的车上、或者手抖的时候
   就是"点了没反应"。
   所以视觉留 34，用一个撑开的伪元素把**可点范围**补到 44：
   看着没变，手指的容错多了三分之一。 */
.nav__b{flex:0 0 34px;height:34px;border-radius:11px;display:grid;place-items:center;
  background:#fff;border:1px solid var(--line);position:relative}
.nav__b::after{content:"";position:absolute;inset:-5px}
.nav__t{font-size:16px;font-weight:700}
.nav__x{margin-left:auto;font-size:12.5px;color:var(--brand);font-weight:600}

/* 悬浮胶囊。按需求给的图做：三格，中间那格是动作不是目的地。 */
.tabbar{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(var(--tabgap) + env(safe-area-inset-bottom,0px));
  width:calc(100% - 32px);max-width:488px;height:var(--tabbar-h);
  display:flex;align-items:center;
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  backdrop-filter:saturate(160%) blur(14px);
  border:1px solid rgba(239,233,228,.9);border-radius:19px;
  box-shadow:0 6px 22px rgba(120,95,80,.13);
  z-index:40;
}
.tab{
  flex:1;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;color:var(--ink-4);font-size:10.5px;font-weight:600;position:relative;
}
.tab svg{width:21px;height:21px}
.tab.on{color:var(--brand)}
.tab-dot{
  position:absolute;top:7px;right:calc(50% - 18px);
  width:7px;height:7px;border-radius:50%;background:var(--dot);
  border:1.5px solid #fff;
}

/* ==========================================================================
   11. 抽屉 / 提示条 / 空态
   ========================================================================== */
.mask{
  position:fixed;inset:0;background:rgba(46,42,40,.34);z-index:60;
  display:none;align-items:flex-end;justify-content:center;
}
.mask.is-on{display:flex}
.sheet{
  width:100%;max-width:520px;background:#fff;border-radius:22px 22px 0 0;
  padding:20px 18px calc(20px + env(safe-area-inset-bottom,0px));
  max-height:86vh;overflow-y:auto;
  animation:up .22s cubic-bezier(.22,.8,.3,1);
}
@keyframes up{from{transform:translateY(24px);opacity:.4}to{transform:none;opacity:1}}
.sheet__t{font-size:17px;font-weight:800;margin:0 0 5px}
.sheet__s{font-size:12.5px;color:var(--ink-3);margin:0 0 15px;line-height:1.7}
.sheet__x{position:absolute;right:16px;top:14px}

.toast{
  position:fixed;left:50%;bottom:96px;transform:translateX(-50%) translateY(10px);
  background:rgba(46,42,40,.93);color:#fff;font-size:13px;
  padding:10px 17px;border-radius:12px;z-index:80;
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;
  max-width:88%;text-align:center;line-height:1.6;
}
.toast.is-on{opacity:1;transform:translateX(-50%) translateY(0)}

.zero{text-align:center;padding:44px 24px}
.zero__i{
  width:58px;height:58px;border-radius:19px;margin:0 auto 14px;
  background:var(--brand-soft);display:grid;place-items:center;color:var(--brand);
}
.zero__i svg{width:27px;height:27px}
.zero__t{font-size:15.5px;font-weight:700}
.zero__s{font-size:12.5px;color:var(--ink-3);margin:6px 0 17px;line-height:1.75}

/* 预览态横幅。必须一眼看得出「这不是你的数据」，
   否则就成了拿示例冒充真实记录。 */
.prev{
  display:flex;align-items:center;gap:10px;margin:12px 16px 0;
  padding:10px 12px;border-radius:13px;
  background:var(--tide-soft);border:1px solid var(--tide-line);
}
.prev__m{flex:1;min-width:0;font-size:11.5px;color:#4E7F95;line-height:1.6}
.prev__m b{display:block;font-size:12.5px;font-weight:800}
.prev__b{flex:0 0 auto;background:var(--tide);color:#fff;box-shadow:none}

.note{
  display:flex;gap:9px;padding:11px 13px;border-radius:13px;
  background:var(--brand-soft);font-size:12.5px;color:var(--ink-2);line-height:1.7;
}
.note i{flex:0 0 auto;font-style:normal;color:var(--brand)}
.note--tide{background:var(--tide-soft);color:#4E7F95}
.note--tide i{color:var(--tide)}
.note--plain{background:#F7F3F0;color:var(--ink-3)}
.note--plain i{color:var(--ink-4)}

.foot{padding:26px 20px 8px;text-align:center;font-size:11px;color:var(--ink-4);line-height:1.8}

/* 列表项（我的页面那种） */
.li{display:flex;align-items:center;gap:11px;padding:13px 0;border-bottom:1px solid var(--line)}
.li:last-child{border-bottom:0}
.li__i{flex:0 0 34px;height:34px;border-radius:11px;background:var(--brand-soft);
  display:grid;place-items:center;color:var(--brand)}
.li__i svg{width:17px;height:17px}
.li__m{flex:1;min-width:0}
.li__t{font-size:14px;font-weight:600}
.li__s{font-size:11.5px;color:var(--ink-4);margin-top:1px}
.li__c{flex:0 0 auto;color:var(--dim)}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kv{text-align:center;padding:11px 6px;background:#fff;border-radius:13px;border:1px solid var(--line)}
.kv__n{font-size:20px;font-weight:800;line-height:1.2}
.kv__l{font-size:11px;color:var(--ink-4);margin-top:2px}

/* ==========================================================================
   孕期资料
   --------------------------------------------------------------------------
   版式照着参考站（糖妈日记 · 孕期档案）排：一张白卡，里面若干「左标题
   右控件」的行。颜色换成这套暖色 —— 需求里说的「颜色你可以再调」。
   ========================================================================== */
.pf-lead{font-size:12.5px;color:var(--ink-3);margin:0 0 11px;line-height:1.7}

.pf-card{padding:2px 15px}
.prow{
  display:flex;align-items:center;gap:12px;width:100%;
  /* 上下 12 + 内容约 20 = 44，正好压在最小热区上。
     这几行里有三行整行可点（头像、两个日期），行高不能再往下压。 */
  padding:12px 0;border-bottom:1px solid var(--line);
  background:none;border-left:0;border-right:0;border-top:0;
  text-align:left;font:inherit;color:inherit;
}
.prow:last-child{border-bottom:0}
.pk{flex:1;min-width:0;display:block}
.pk b{display:block;font-size:14px;font-weight:600;color:var(--ink)}
.pk em{display:block;font-style:normal;font-size:11.5px;color:var(--ink-4);margin-top:2px;line-height:1.5}

/* 资料卡里的输入框是「右对齐的值」，不是表单框 —— 参考站也是这个样子。
   字号必须 ≥16px：iOS Safari 对小于 16px 的输入框会在聚焦时自动放大整页，
   而且不会自己缩回去。这条跟 .fld__i 是同一个理由，测试里有一条盯着。 */
.prow input{
  flex:0 0 auto;max-width:56%;min-width:0;
  border:0;background:none;padding:6px 0;margin:0;
  font-size:16px;font-weight:600;color:var(--ink);text-align:right;font-family:inherit;
}
.prow input:focus{outline:none;color:var(--brand)}
.prow input::placeholder{font-weight:400;color:var(--dim)}
.pv-week{flex:0 0 auto;font-size:16px;font-weight:700;color:var(--brand)}
.chev{flex:0 0 auto;display:grid;place-items:center;color:var(--dim)}

/* 资料卡里的分段控件要窄一点，否则一行装不下标题 */
.seg--pf{flex:0 0 auto;padding:3px;gap:4px}
.seg--pf button{padding:7px 13px;font-size:12.5px}

/* 随孕周变的小卡 */
.note-card{
  margin-top:11px;padding:13px 14px;border-radius:14px;
  background:var(--brand-soft);border:1px solid #F7DDD5;
  font-size:12.5px;color:var(--ink-2);line-height:1.75;
}
.note-card b{color:var(--brand);font-weight:700}

/* 解释孕周怎么算的那条。琥珀色 = 「顺带说一句」，
   不是警告 —— 警告在这套配色里是 --care 那一档，不能混用。 */
.note-amber{
  display:flex;gap:9px;margin-top:11px;padding:12px 13px;border-radius:14px;
  background:var(--mind-soft);border:1px solid var(--mind-line);
}
.note-amber i{flex:0 0 auto;color:var(--mind);margin-top:1px}
.note-amber p{margin:0;font-size:12px;color:#8A6532;line-height:1.75}

.hint{font-size:11.5px;color:var(--ink-4);line-height:1.7;margin:14px 0 10px}
.hint.center{text-align:center}
.lnk{color:var(--brand);font-weight:600;text-decoration:none}

/* 次要按钮：白底描边，跟主按钮拉开层级但热区一样大 */
.btn--gh{background:#fff;color:var(--ink-2);border:1px solid var(--line);box-shadow:none}

/* ---------- 头像 ---------- */
.av{
  flex:0 0 auto;display:grid;place-items:center;overflow:hidden;
  width:34px;height:34px;border-radius:50%;
  background:var(--brand-soft);color:var(--brand);border:0;padding:0;
}
.av svg{width:17px;height:17px}
.av img{width:100%;height:100%;object-fit:cover;display:block}
.av--lg{width:44px;height:44px}
.av--lg svg{width:21px;height:21px}
.av__f{width:100%;height:100%;display:grid;place-items:center;color:#fff}
.av__f svg{width:52%;height:52%}
/* 六个内置形象。都落在这套暖色带上，深浅不同而已 ——
   不引外部图片：单域名纯静态，多一个请求就多一个能失败的东西。 */
.av__f--1{background:linear-gradient(150deg,#F7A48D,#F2856D)}
.av__f--2{background:linear-gradient(150deg,#F3B57F,#E8945E)}
.av__f--3{background:linear-gradient(150deg,#9EC3AC,#7FA88B)}
.av__f--4{background:linear-gradient(150deg,#9FC3D4,#6E9BAF)}
.av__f--5{background:linear-gradient(150deg,#C9A7CE,#A87FB0)}
.av__f--6{background:linear-gradient(150deg,#D9A99A,#B87F6C)}
.av-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}
.av--pick{width:100%;height:auto;aspect-ratio:1;border-radius:50%;
  box-shadow:0 0 0 0 var(--brand-2);transition:box-shadow .16s}
.av--pick.on{box-shadow:0 0 0 3px var(--brand-2)}

/* ==========================================================================
   数胎动
   ========================================================================== */
.kcard{text-align:center;padding:20px 16px 17px}
.kbig{font-size:52px;font-weight:800;line-height:1;color:var(--brand);
  font-variant-numeric:tabular-nums}
.kbig__u{font-size:15px;font-weight:600;color:var(--ink-4);margin-left:7px}
.kdots{display:flex;justify-content:center;gap:7px;margin:15px 0 12px}
.kdot{width:9px;height:9px;border-radius:50%;background:#EFE6E1;transition:background .18s}
.kdot.on{background:var(--brand)}
.kmins{font-size:12.5px;color:var(--ink-4);margin-bottom:15px;font-variant-numeric:tabular-nums}

/* 「动了一下」。这颗按钮她要按十次、跨最多两个小时，而且多半是侧躺着
   单手在按 —— 所以做得比任何其他按钮都大，且圆。按错一次的代价是
   一次真实胎动没记上，那正是这个方法要数的东西。 */
.kbtn{
  width:100%;max-width:230px;aspect-ratio:1;margin:0 auto;display:block;
  border:0;border-radius:50%;background:var(--grad-logo);color:#fff;
  font-size:20px;font-weight:800;letter-spacing:.06em;font-family:inherit;
  box-shadow:0 8px 26px rgba(242,133,109,.34);
  -webkit-tap-highlight-color:transparent;
  transition:transform .09s ease-out,box-shadow .09s ease-out;
}
/* 按下去要有形变。没有任何声音和震动的前提下，
   这是她唯一能确认「这一下算上了」的反馈。 */
.kbtn:active{transform:scale(.955);box-shadow:0 4px 14px rgba(242,133,109,.3)}

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