/* 宝宝日记 · 柔粉奶油主题（克制专业 / Apple Health 气质） */
:root{
  --bg:#FCF6F3; --card:#FFFFFF; --ink:#41383D; --muted:#A0959B; --line:#F1E8E6;
  --accent:#E07A8B; --accent-soft:#FBEAE7; --on-accent:#FFFFFF;
  --ring-track:#F3E5E3; --danger:#D55B57; --danger-soft:#FBE7E5;
  --ok:#5BA772; --ok-soft:#E5F1E8; --warn:#D9A441; --warn-soft:#FBEFD9;
  --shadow:0 8px 28px rgba(199,122,134,.13); --shadow-sm:0 2px 10px rgba(199,122,134,.08);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
  background:#ece7e3; color:var(--ink); line-height:1.7;
  display:flex; align-items:center; justify-content:center; min-height:100dvh;
}
.tnum{font-variant-numeric:tabular-nums}
.hidden{display:none !important}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}

/* 容器：移动满屏，桌面居中成手机栏 */
.app{position:relative; width:100%; max-width:430px; height:100dvh; background:var(--bg);
  overflow:hidden; display:flex; flex-direction:column}
@media (min-width:520px){
  body{padding:24px}
  .app{height:880px; max-height:92vh; border-radius:40px; box-shadow:0 24px 60px rgba(0,0,0,.18)}
}

.icon{width:20px;height:20px;display:block;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.icon.sm{width:17px;height:17px}
.icon.lg{width:24px;height:24px}

/* 视图 */
.view{flex:1; min-height:0; display:flex; flex-direction:column}
.scroll{flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch}
.scroll::-webkit-scrollbar{display:none}
.pad{padding:4px 18px 22px}

/* 顶栏 */
.appbar{display:flex; align-items:center; justify-content:space-between;
  padding:calc(env(safe-area-inset-top) + 20px) 22px 8px}
.appbar .title{font-size:22px; font-weight:700; letter-spacing:.3px}
.appbar .sub{font-size:13px; color:var(--muted); font-weight:500}
.appbar .right{width:38px;height:38px;border-radius:50%;background:var(--card);box-shadow:var(--shadow-sm);
  display:flex;align-items:center;justify-content:center;color:var(--accent)}

/* 卡片 */
.card{background:var(--card); border-radius:24px; box-shadow:var(--shadow); padding:20px; margin-bottom:14px}
.card-h{display:flex; align-items:center; gap:9px; margin-bottom:14px}
.card-h .ci{width:30px;height:30px;border-radius:9px;background:var(--accent-soft);color:var(--accent);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.card-h h3{margin:0; font-size:16px; font-weight:650}
.card-h .meta{margin-left:auto; font-size:13px; color:var(--muted)}

/* 孕程 hero */
.hero{padding:24px 20px 20px}
.ring-wrap{display:flex; justify-content:center}
.ring{position:relative; width:188px; height:188px}
.ring svg{transform:rotate(-90deg)}
.ring .ctr{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center}
.ring .wk{font-size:44px; font-weight:750; line-height:1; letter-spacing:-.5px}
.ring .wk small{font-size:19px; font-weight:600; color:var(--muted); margin:0 2px}
.ring .cap{margin-top:7px; font-size:13px; color:var(--accent); font-weight:600;
  background:var(--accent-soft); padding:3px 12px; border-radius:99px}
.stats{display:grid; grid-template-columns:repeat(3,1fr); margin-top:18px; padding-top:16px; border-top:1px solid var(--line)}
.stat{text-align:center; position:relative}
.stat + .stat::before{content:""; position:absolute; left:0; top:4px; bottom:4px; width:1px; background:var(--line)}
.stat .v{font-size:18px; font-weight:700}
.stat .v.accent{color:var(--accent)}
.stat .l{font-size:12px; color:var(--muted); margin-top:2px}

/* 下一步产检 */
.next{display:flex; align-items:center; gap:12px}
.next .t{font-size:15.5px; font-weight:600; flex:1}
.next .chip{background:var(--accent-soft); color:var(--accent); font-weight:650; font-size:13px;
  padding:6px 12px; border-radius:99px; white-space:nowrap; text-align:center; line-height:1.35}
.next .chip small{display:block; font-size:11px; font-weight:600; opacity:.85}
.next-note{font-size:12.5px; color:var(--muted); margin-top:10px}

/* 待办 */
.todo{list-style:none; margin:0; padding:0}
.todo li{display:flex; align-items:flex-start; gap:12px; padding:11px 0; border-bottom:1px solid var(--line); font-size:15px}
.todo li:last-child{border-bottom:none; padding-bottom:0}
.todo .box{flex:0 0 auto; width:20px; height:20px; border-radius:7px; border:2px solid var(--line); margin-top:2px}
.todo .box.hi{border-color:var(--accent); background:var(--accent-soft)}
.todo .box.hi::after{content:""; display:block; width:8px;height:8px;border-radius:3px;background:var(--accent);margin:4px}
.todo .tag{font-size:11px; font-weight:700; color:var(--accent); margin-left:6px}

/* 快捷入口 */
.quick{display:grid; grid-template-columns:repeat(3,1fr); gap:11px}
.qbtn{background:var(--card); border-radius:20px; box-shadow:var(--shadow-sm); padding:15px 8px;
  display:flex; flex-direction:column; align-items:center; gap:8px; font-size:13px; font-weight:600; transition:transform .12s ease}
.qbtn:active{transform:scale(.95)}
.qbtn .qi{width:42px;height:42px;border-radius:13px;display:flex;align-items:center;justify-content:center;color:var(--accent);background:var(--accent-soft)}
.qbtn.danger .qi{color:var(--danger); background:var(--danger-soft)}
.footnote{text-align:center; color:var(--muted); font-size:12px; margin-top:16px; line-height:1.6}

/* 底部导航 */
.tabbar{flex:0 0 auto; display:flex; border-top:1px solid var(--line);
  background:var(--card); padding-bottom:env(safe-area-inset-bottom)}
.tab{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  color:var(--muted); font-size:11.5px; font-weight:600; padding:10px 0 12px}
.tab.on{color:var(--accent)}

/* 口令页 */
.gate{position:absolute; inset:0; z-index:30; background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; padding:32px}
.gate .logo{width:78px;height:78px;border-radius:24px;background:var(--accent-soft);color:var(--accent);
  display:flex;align-items:center;justify-content:center;margin-bottom:14px;box-shadow:var(--shadow)}
.gate h1{margin:.1em 0; font-size:25px; font-weight:750}
.gate p{margin:0 0 16px; color:var(--muted); font-size:14px}
.dots{display:flex; gap:13px; margin-bottom:4px; min-height:16px}
.dots i{width:14px;height:14px;border-radius:50%; border:2px solid var(--line); transition:.15s}
.dots i.f{background:var(--accent); border-color:var(--accent)}
.gate-err{color:var(--danger); font-size:13px; min-height:20px; margin:6px 0}
.keypad{display:grid; grid-template-columns:repeat(3,68px); gap:13px; margin-top:6px}
.key{height:68px; border-radius:50%; background:var(--card); box-shadow:var(--shadow-sm); font-size:25px; font-weight:600;
  display:flex; align-items:center; justify-content:center; transition:transform .1s; color:var(--ink)}
.key:active{transform:scale(.92); background:var(--accent-soft)}
.key.fn{font-size:18px; color:var(--accent)}
.key.ok{background:var(--accent); color:var(--on-accent); box-shadow:var(--shadow)}
.gate .demo{margin-top:18px; font-size:12.5px; color:var(--muted)}

/* 聊天 */
.chat-head{padding:calc(env(safe-area-inset-top) + 20px) 22px 12px; border-bottom:1px solid var(--line)}
.chat-head .title{font-size:20px; font-weight:700}
.chat-head .sub{font-size:12.5px; color:var(--muted); display:flex; align-items:center; gap:6px}
.dot-live{width:7px;height:7px;border-radius:50%;background:var(--ok);display:inline-block}
.chat-log{flex:1; min-height:0; overflow-y:auto; padding:14px 16px 8px; display:flex; flex-direction:column; gap:12px}
.chat-log::-webkit-scrollbar{display:none}
.bubble{max-width:84%; padding:12px 15px; font-size:15px; border-radius:20px; white-space:pre-wrap; word-break:break-word}
.bubble.bot{align-self:flex-start; background:var(--card); box-shadow:var(--shadow-sm); border-bottom-left-radius:7px}
.bubble.me{align-self:flex-end; background:var(--accent); color:var(--on-accent); border-bottom-right-radius:7px}
.bubble.typing{color:var(--muted)}
.lbl{display:inline-block; font-size:12.5px; font-weight:700; padding:2px 9px; border-radius:7px; margin-right:5px}
.lbl.y{background:var(--ok-soft); color:var(--ok)}
.lbl.m{background:var(--warn-soft); color:var(--warn)}
.lbl.n{background:var(--danger-soft); color:var(--danger)}
.chips{display:flex; gap:8px; padding:8px 16px 6px; overflow-x:auto}
.chips::-webkit-scrollbar{display:none}
.chip2{flex:0 0 auto; background:var(--card); box-shadow:var(--shadow-sm); border:1px solid var(--line);
  color:var(--ink); font-size:13px; padding:8px 14px; border-radius:99px; font-weight:500; white-space:nowrap}
.composer{display:flex; gap:9px; padding:8px 16px calc(12px + env(safe-area-inset-bottom)); align-items:center;
  border-top:1px solid var(--line); background:var(--bg)}
.composer input{flex:1; padding:12px 16px; border:1.5px solid var(--line); border-radius:99px; font-size:16px;
  background:var(--card); outline:none; color:var(--ink)}
.composer input:focus{border-color:var(--accent)}
.composer .send{width:44px;height:44px;border-radius:50%;background:var(--accent);color:var(--on-accent);
  flex:0 0 auto; display:flex; align-items:center; justify-content:center}
.composer .send:disabled{opacity:.5}

/* 危险信号弹层 */
.sheet{position:absolute; inset:0; z-index:40; background:rgba(20,16,18,.42); display:flex; align-items:flex-end}
.sheet-card{background:var(--card); width:100%; border-radius:28px 28px 0 0;
  padding:24px 22px calc(24px + env(safe-area-inset-bottom)); max-height:84%; overflow-y:auto}
.sheet-card .sh{display:flex; align-items:center; gap:10px; margin-bottom:14px}
.sheet-card .sh .ci{width:34px;height:34px;border-radius:10px;background:var(--danger-soft);color:var(--danger);display:flex;align-items:center;justify-content:center}
.sheet-card h2{margin:0; font-size:18px; color:var(--danger)}
.sheet-card ul{margin:0 0 14px; padding:0; list-style:none}
.sheet-card li{display:flex; gap:10px; padding:8px 0; font-size:14.5px; border-bottom:1px solid var(--line)}
.sheet-card li::before{content:""; flex:0 0 auto; width:7px;height:7px;border-radius:50%;background:var(--danger);margin-top:9px}
.sheet-card .muted{color:var(--muted); font-size:13px; margin:0 0 16px}
.sheet-card .close{width:100%; padding:14px; border-radius:16px; background:var(--accent); color:var(--on-accent); font-weight:650; font-size:16px}

/* ===== 卡片类型 ===== */
/* tone 色 */
.t-ok{color:var(--ok)} .t-warn{color:var(--warn)} .t-danger{color:var(--danger)} .t-muted{color:var(--muted)} .t-accent{color:var(--accent)}
.ci.t-ok{background:var(--ok-soft);color:var(--ok)} .ci.t-warn{background:var(--warn-soft);color:var(--warn)}
.ci.t-danger{background:var(--danger-soft);color:var(--danger)} .ci.t-info,.ci.t-accent{background:var(--accent-soft);color:var(--accent)}

/* 本周宝宝 */
.dev{font-size:15px}
.dev b{color:var(--accent)}
.dev-tip{font-size:13px; color:var(--muted); margin-top:8px; padding-top:10px; border-top:1px solid var(--line); line-height:1.6}

/* 档案速览 kv */
.kv{display:grid; grid-template-columns:1fr 1fr; gap:10px 16px}
.kvi{display:flex; justify-content:space-between; align-items:baseline; gap:8px; border-bottom:1px solid var(--line); padding-bottom:8px}
.kk{font-size:13px; color:var(--muted)}
.kvv{font-size:14.5px; font-weight:600; text-align:right}

/* 指标 metrics */
.metrics{display:grid; grid-template-columns:repeat(3,1fr)}
.metrics .metric{text-align:center; position:relative}
.metrics .metric + .metric::before{content:""; position:absolute; left:0; top:4px; bottom:4px; width:1px; background:var(--line)}
.mv{font-size:19px; font-weight:700}
.mv small{font-size:12px; font-weight:600; color:var(--muted); margin-left:2px}
.ml{font-size:12px; color:var(--muted); margin-top:2px}

/* 进度 progress */
.prog-top{display:flex; justify-content:space-between; font-size:14px; margin-bottom:9px}
.prog-val{font-weight:700; color:var(--accent)}
.pbar{height:9px; border-radius:99px; background:var(--ring-track); overflow:hidden}
.pbar > i{display:block; height:100%; border-radius:99px; background:var(--accent)}
.pbar > i.t-warn{background:var(--warn)} .pbar > i.t-danger{background:var(--danger)} .pbar > i.t-ok{background:var(--ok)}

/* 提醒 note */
.note.tone-warn{background:var(--warn-soft)} .note.tone-danger{background:var(--danger-soft)}
.note.tone-ok{background:var(--ok-soft)} .note.tone-info{background:var(--accent-soft)}
.note-body{font-size:14.5px; line-height:1.7}
.inline-link, .card-action{margin-top:12px; color:var(--accent); font-weight:650; font-size:14px; padding:0; text-align:left; display:block}
.card-action{width:100%; padding:11px; margin-top:14px; border-radius:14px; background:var(--accent-soft); text-align:center}

/* 列表 list */
.blist{list-style:none; margin:0; padding:0}
.blist li{position:relative; padding:6px 0 6px 18px; font-size:15px}
.blist li::before{content:""; position:absolute; left:2px; top:13px; width:6px; height:6px; border-radius:50%; background:var(--accent)}

/* 时间线 timeline */
.tl{display:flex; flex-direction:column; gap:12px}
.tli{display:flex; gap:14px; align-items:baseline; position:relative; padding-left:16px}
.tli::before{content:""; position:absolute; left:2px; top:7px; width:8px; height:8px; border-radius:50%; background:var(--accent)}
.tld{font-size:13px; color:var(--muted); font-weight:600; flex:0 0 auto; width:42px}
.tlt{font-size:15px}

/* 打卡 checkin */
.checkin{display:flex; align-items:center; gap:13px; width:100%; text-align:left}
.checkin .ci{width:42px;height:42px;border-radius:13px;flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.checkin .ci svg{width:22px;height:22px}
.ckn{flex:1; display:flex; flex-direction:column}
.ckn b{font-size:15.5px}
.ckn small{font-size:13px; color:var(--muted)}
.ck-arrow{color:var(--muted); font-size:22px; font-weight:300}