/* ==========================================================
   base.css — 设计变量 / reset / 布局骨架 / 首页头部
   ========================================================== */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
:root{
  --pink:#F5789B; --pink2:#FF9E96; --ink:#33272A; --sub:#A08D89; --mute:#B5A5A0;
  --bg:#FCF8F5; --line:#F3EAE6; --green:#12A67F; --greenbg:#E9F8F2;
  --amber:#E9963C; --amberbg:#FDF0DE; --amberink:#D2822A;
}
html,body{height:100%;}
body{
  /* 末尾必须挂 emoji 兜底字体：否则在 emoji 不在 CJK 字体里的设备上（部分安卓/桌面浏览器），
     🎁 这类字符会直接渲染成豆腐块 □。功能性图标已改成 SVG，但品牌/插画 emoji 还需要这层保险。 */
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB",
    "Microsoft YaHei","Noto Sans CJK SC","Source Han Sans SC",sans-serif,
    "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji";
  background:
    radial-gradient(900px 620px at 12% -8%, #FDE4DA 0%, rgba(253,228,218,0) 62%),
    radial-gradient(760px 560px at 92% 8%, #E6E2F2 0%, rgba(230,226,242,0) 60%),
    #F4EFEC;
  color:var(--ink);display:flex;align-items:center;justify-content:center;
  min-height:100%;padding:26px 12px;
}
/* ---------- phone frame ---------- */
.phone{
  width:375px;height:812px;background:var(--bg);border-radius:46px;position:relative;
  overflow:hidden;box-shadow:0 40px 80px -28px rgba(120,80,75,.42),0 0 0 1px rgba(120,80,75,.06);
  flex:none;
}
.status{height:44px;display:flex;align-items:center;justify-content:space-between;
  padding:0 22px 0 26px;flex:none;}
.status .time{font-size:15px;font-weight:600;letter-spacing:.2px;}
.sysicons{display:flex;align-items:center;gap:6px;}
.caps{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.62);
  border-radius:14px;padding:3px 9px;border:.5px solid rgba(58,46,46,.10);}
.dots{display:flex;gap:3px;}
.dots i{width:3.5px;height:3.5px;border-radius:50%;background:#4A3C3C;display:block;}
.divider{width:.5px;height:15px;background:rgba(58,46,46,.14);}

/* ---------- screens ---------- */
.screens{position:absolute;inset:44px 0 0;overflow:hidden;}
.screen{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;background:var(--bg);
  opacity:0;visibility:hidden;transform:translateX(16px);
  transition:opacity .22s ease,transform .26s cubic-bezier(.22,.9,.3,1),visibility .26s;}
.screen.on{opacity:1;visibility:visible;transform:none;z-index:2;}
.screen.tabpage{padding-bottom:82px;}
.screen::-webkit-scrollbar{width:0;}

.nav{height:44px;display:flex;align-items:center;padding:0 18px;position:relative;flex:none;}
.nav .bk{width:26px;height:26px;display:flex;align-items:center;cursor:pointer;}
.nav .ttl{position:absolute;left:0;right:0;text-align:center;font-size:16px;
  font-weight:700;pointer-events:none;}
.pg{padding:4px 18px 22px;}

/* ---------- common ---------- */
.card{background:#fff;border-radius:20px;
  box-shadow:0 6px 18px -8px rgba(120,80,75,.16),0 1px 3px rgba(120,80,75,.05);}
.bigbtn{height:50px;border-radius:16px;display:flex;align-items:center;justify-content:center;
  gap:7px;font-size:15px;font-weight:700;color:#fff;letter-spacing:.5px;cursor:pointer;
  background:linear-gradient(135deg,var(--pink2) 0%,var(--pink) 100%);
  box-shadow:0 10px 20px -8px rgba(245,120,155,.6);transition:transform .12s;}
.bigbtn:active{transform:scale(.975);}
.bigbtn.off{background:#E6DAD5;box-shadow:none;color:#B5A5A0;}
.dis{margin-top:12px;text-align:center;font-size:10.5px;color:#B3A29D;line-height:1.65;padding:0 12px;}

/* ---------- home header ---------- */
.hd{display:flex;align-items:center;justify-content:space-between;padding:4px 4px 13px;}
.hd .wk{font-size:22px;font-weight:700;letter-spacing:-.2px;line-height:1.2;}
.hd .wk em{font-style:normal;color:#F2718D;}
.hd .sub{font-size:13px;color:var(--sub);margin-top:5px;}
.ring{position:relative;width:46px;height:46px;flex:none;cursor:pointer;}
.ring .pc{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:#F2718D;}

/* ---------- hero ---------- */
/* 渐变的浅色端在左上，恰好是「最近一次估重」那行文字的位置，白字压上去对比度只有 1.4~1.6，发虚。
   直接把渐变整体压暗会变土色（#FFC0A4 → #CC9A83），所以改成叠一层同色系「压暗罩」：
   左上最重、向右下渐隐 —— 既保住原来的粉橘配色，又把文字区垫实。 */
.hero{position:relative;border-radius:26px;padding:17px 20px 16px;overflow:hidden;
  background:linear-gradient(138deg,rgba(150,60,85,.22) 0%,rgba(150,60,85,.11) 55%,rgba(150,60,85,.05) 100%),
             linear-gradient(138deg,#FFC0A4 0%,#FF9DA8 48%,#F58AB4 100%);
  box-shadow:0 16px 32px -10px rgba(242,113,141,.45),0 3px 10px rgba(242,113,141,.18);}
.hero.amber{background:linear-gradient(138deg,rgba(140,70,30,.24) 0%,rgba(140,70,30,.12) 55%,rgba(140,70,30,.05) 100%),
             linear-gradient(138deg,#FFD79E 0%,#F7B36B 52%,#EE9B62 100%);
  box-shadow:0 16px 32px -10px rgba(233,150,60,.42),0 3px 10px rgba(233,150,60,.16);}
.hero.violet{background:linear-gradient(138deg,rgba(70,50,130,.20) 0%,rgba(70,50,130,.10) 55%,rgba(70,50,130,.04) 100%),
             linear-gradient(138deg,#CDBDF2 0%,#AFA0E8 52%,#9187DA 100%);
  box-shadow:0 16px 32px -10px rgba(140,120,215,.42),0 3px 10px rgba(140,120,215,.16);}
.hero .blob{position:absolute;border-radius:50%;background:rgba(255,255,255,.13);}
.blob.b1{width:150px;height:150px;right:-46px;top:-58px;}
.blob.b2{width:78px;height:78px;right:34px;bottom:-34px;background:rgba(255,255,255,.10);}
/* 卡片是粉橙渐变底，半透明白字在浅色一侧对比度不够。
   统一改成接近纯白 + 一点点暗投影压边，比单纯调不透明度更清楚。 */
.hero-top{display:flex;align-items:center;justify-content:space-between;position:relative;gap:8px;}
.hero-label{font-size:13px;font-weight:600;color:#fff;text-shadow:0 1px 3px rgba(150,60,85,.28);}
.acc{display:flex;align-items:center;gap:4px;background:rgba(255,255,255,.30);
  border-radius:11px;padding:4px 10px;font-size:11.5px;font-weight:600;color:#fff;white-space:nowrap;}
.stars{letter-spacing:.5px;font-size:10px;}
.wrow{display:flex;align-items:flex-end;gap:5px;margin-top:12px;position:relative;}
.wnum{font-size:53px;font-weight:700;color:#fff;line-height:.94;letter-spacing:-2.2px;
  text-shadow:0 2px 12px rgba(190,70,100,.18);}
.wunit{font-size:20px;font-weight:700;color:#fff;padding-bottom:7px;}
.about{font-size:13.5px;font-weight:600;color:rgba(255,255,255,.95);padding-bottom:9px;
  text-shadow:0 1px 3px rgba(150,60,85,.25);}
.wrange{font-size:12.5px;font-weight:500;color:#fff;margin-top:7px;position:relative;
  text-shadow:0 1px 3px rgba(150,60,85,.28);}

/* percentile bar */
.pct{margin-top:14px;background:rgba(255,255,255,.17);border-radius:17px;
  padding:12px 14px 11px;position:relative;}
.pct-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:30px;gap:8px;}
.pct-hd .t{font-size:12.5px;font-weight:600;color:#fff;text-shadow:0 1px 3px rgba(150,60,85,.26);}
.badge{display:flex;align-items:center;gap:4px;background:#fff;border-radius:10px;
  padding:4px 10px 4px 8px;font-size:11.5px;font-weight:700;color:var(--green);white-space:nowrap;}
.badge .d{width:5px;height:5px;border-radius:50%;background:#22C39A;}
.badge.a{color:var(--amberink);} .badge.a .d{background:#EFA13F;}
.badge.v{color:#7A6BC9;} .badge.v .d{background:#9187DA;}
.barwrap{position:relative;height:8px;}
.bar{height:8px;border-radius:5px;background:linear-gradient(90deg,
  rgba(255,255,255,.30) 0%,rgba(255,255,255,.30) 10%,rgba(255,255,255,.62) 25%,
  rgba(255,255,255,.85) 50%,rgba(255,255,255,.62) 75%,rgba(255,255,255,.30) 90%,
  rgba(255,255,255,.30) 100%);}
.mk{position:absolute;top:-4px;width:16px;height:16px;border-radius:50%;background:#fff;
  border:4px solid var(--pink);box-shadow:0 2px 6px rgba(150,50,80,.30);
  transform:translateX(-50%);transition:left .45s cubic-bezier(.3,1.2,.4,1);}
.hero.amber .mk{border-color:var(--amber);} .hero.violet .mk{border-color:#9187DA;}
.bub{position:absolute;transform:translateX(-50%);bottom:16px;background:#fff;border-radius:9px;
  padding:3.5px 9px;white-space:nowrap;font-size:11px;font-weight:700;color:#EF6489;
  box-shadow:0 3px 8px rgba(150,50,80,.18);transition:left .45s cubic-bezier(.3,1.2,.4,1);}
.hero.amber .bub{color:var(--amberink);} .hero.violet .bub{color:#7A6BC9;}
.bub:after{content:"";position:absolute;left:50%;bottom:-3px;width:7px;height:7px;
  background:#fff;transform:translateX(-50%) rotate(45deg);border-radius:1px;}
.scale{display:flex;justify-content:space-between;margin-top:8px;font-size:10.5px;font-weight:500;
  color:rgba(255,255,255,.9);text-shadow:0 1px 2px rgba(150,60,85,.22);}
/* P50 白话解释：用户普遍不知道「百分位」是什么意思。
   这里是长句正文，字号和对比度都要够，不放图标。 */
.p50tip{margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.26);
  font-size:12px;line-height:1.7;color:rgba(255,255,255,.94);
  text-shadow:0 1px 3px rgba(150,60,85,.24);}
.p50tip b{color:#fff;font-weight:700;}

/* ---------- params ---------- */
.params{display:flex;gap:8px;margin-top:11px;}
.pm{flex:1;min-width:0;background:#fff;border-radius:15px;padding:10px 3px 9px;text-align:center;
  box-shadow:0 4px 12px -7px rgba(120,80,75,.18),0 1px 2px rgba(120,80,75,.04);}
/* 「BPD 双顶径」四张卡并排，字放大后要防止换行把卡片撑高 */
.pm .k{font-size:11px;color:#8A7C77;font-weight:700;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;}
.pm .v{font-size:17px;font-weight:700;margin-top:5px;letter-spacing:-.3px;}
.pm .v i{font-style:normal;font-size:10.5px;color:var(--mute);font-weight:400;margin-left:1px;}
.pm.na .v{color:#D9CBC6;}

/* ---------- trend ---------- */
.trend{margin-top:10px;padding:13px 18px 12px;display:flex;align-items:center;
  justify-content:space-between;gap:10px;}
.trend .lab{font-size:12.5px;font-weight:600;color:var(--sub);}
.trend .val{display:flex;align-items:baseline;gap:5px;margin-top:7px;}
.trend .val b{font-size:26px;font-weight:700;letter-spacing:-.6px;}
.up{display:inline-flex;align-items:center;gap:2px;background:var(--greenbg);color:var(--green);
  font-size:11.5px;font-weight:700;border-radius:8px;padding:3px 8px 3px 6px;}
.trend .note{font-size:11.5px;color:var(--mute);margin-top:7px;}

/* ---------- actions ---------- */
/* 原 .tip（「为什么每次估重差别这么大」）已被首页妈妈盒子入口替换，
   解释内容仍可从「我的 → 估重是怎么算出来的」进入 */
.acts{display:flex;gap:10px;margin-top:11px;}
.btn{height:50px;border-radius:17px;display:flex;align-items:center;justify-content:center;
  gap:8px;font-size:14.5px;font-weight:700;cursor:pointer;transition:transform .12s;}
.btn:active{transform:scale(.975);}
.btn.p{flex:1.45;color:#fff;background:linear-gradient(135deg,var(--pink2) 0%,var(--pink) 100%);
  box-shadow:0 10px 20px -8px rgba(245,120,155,.62);}
.btn.s{flex:1;color:#6A5A57;background:#fff;border:1.2px solid #F0E4DE;
  box-shadow:0 4px 12px -6px rgba(120,80,75,.14);}

/* ---------- tabbar ---------- */
.tabbar{position:absolute;left:0;right:0;bottom:0;height:74px;z-index:20;
  background:rgba(255,255,255,.94);border-top:.5px solid rgba(58,46,46,.07);
  display:flex;padding:9px 0 0;backdrop-filter:blur(14px);}
.tabbar.hide{display:none;}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;}
.tab span{font-size:11px;color:#BCACA7;white-space:nowrap;}
.tab.on span{color:#F2718D;font-weight:700;}
.homebar{position:absolute;left:50%;transform:translateX(-50%);bottom:8px;width:134px;
  height:5px;border-radius:3px;background:rgba(50,40,40,.22);z-index:30;pointer-events:none;}