/* ============================================================
   孕期体重管理 · 样式
   基调：温和、克制、不制造焦虑
   超出推荐区间用暖黄而非红色；不出现「超标 / 危险 / 你胖了」
   ============================================================ */

:root{
  --bg:#FAF7F4;
  --card:#FFFFFF;
  --brand:#F2856D;
  --brand-2:#F7A48D;
  --brand-soft:#FDEDE9;
  --ok:#7FA88B;
  --ok-soft:#EDF4EF;
  --ok-line:#DCEAE1;
  --warn:#E0A339;
  --warn-soft:#FCF3E2;
  /* 文字灰阶。ink-3 用在 11–12px 的副标题和单位上，是全站数量最多的小字，
     原来 #A69C96 对白卡只有 2.69:1，远低于 WCAG AA 的 4.5:1 ——
     在手机上、在光线不好的时候，那就是「看不清」。
     现在 ink-3 4.8:1、ink-2 7.6:1，都过线。 */
  --ink:#2E2A28;    /* 14.2:1 */
  --ink-2:#5B524D;  /*  7.6:1 */
  --ink-3:#7B716B;  /*  4.8:1 */
  --line:#EFE9E4;
  --radius:16px;
  --shadow:0 2px 12px rgba(120,95,80,.06);
  /* TabBar 悬浮：自身高度 + 离底间距 + 安全区 */
  --tabbar-h:58px;
  --tabgap:12px;
  --tabh:calc(var(--tabbar-h) + var(--tabgap) + env(safe-area-inset-bottom));
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue","Microsoft YaHei",sans-serif;
  font-size:15px;line-height:1.5;
  overscroll-behavior-y:none;
  -webkit-font-smoothing:antialiased;
}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
input,select{font:inherit;color:inherit}
a{color:inherit}
ul{list-style:none}

/* 桌面端把内容收进手机宽度居中显示 */
/* 外壳固定为一屏，滚动发生在 .view-body 内部，
   这样悬浮 TabBar / FAB 才会一直停在屏幕上而不是跟着内容跑掉 */
#app{
  max-width:430px;margin:0 auto;height:100vh;height:100dvh;
  background:var(--bg);position:relative;overflow:hidden;
  box-shadow:0 0 60px rgba(90,70,60,.10);
}
@media (min-width:520px){ body{background:#E9E4DE;padding:0} }

/* ---------------- 视图切换 ---------------- */
.view{display:none;flex-direction:column;height:100%}
.view.active{display:flex}
.view-body{
  flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:0 18px calc(var(--tabh) + 20px);
}
.view.no-tab .view-body{padding-bottom:calc(env(safe-area-inset-bottom) + 24px)}
/* 首页底部还压着悬浮的「记体重」按钮，得给它让出位置 */
#v-home .view-body{padding-bottom:calc(var(--tabh) + 76px)}

/* ---------------- 顶栏 ---------------- */
.navbar{
  flex:0 0 auto;height:50px;display:flex;align-items:center;justify-content:center;
  position:relative;font-size:17px;font-weight:600;
  padding-top:env(safe-area-inset-top);box-sizing:content-box;
  background:var(--bg);z-index:10;
}
.navbar .nav-l,.navbar .nav-r{
  position:absolute;top:calc(env(safe-area-inset-top));height:50px;
  display:flex;align-items:center;font-size:14px;font-weight:500;color:var(--brand);
  padding:0 18px;
}
.navbar .nav-l{left:0}
.navbar .nav-r{right:0}
.icon-back{width:11px;height:11px;border-left:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg);display:block}
.icon-close{font-size:24px;font-weight:300;color:var(--ink-2);line-height:1}

/* ---------------- 通用 ---------------- */
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px}
.sec-t{font-size:13px;color:var(--ink-3);font-weight:600;margin:16px 2px 9px;display:flex;justify-content:space-between;align-items:center}
.sec-t button{color:var(--ink-3);font-weight:400;font-size:13px}
.tag{display:inline-flex;align-items:center;font-size:12px;padding:3px 9px;border-radius:20px;font-weight:600}
.tag.ok{background:var(--ok-soft);color:var(--ok)}
.tag.warn{background:var(--warn-soft);color:var(--warn)}
.muted{color:var(--ink-3)}

/* ---------------- 扁平图标 ---------------- */
/* 统一的圆角色块 + 线性描边图标，替代原来的 emoji */
.ic{
  flex:0 0 34px;width:34px;height:34px;border-radius:11px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--brand-soft);color:var(--brand);
}
.ic svg{width:19px;height:19px;display:block}
.ic.c{background:#FDEDE9;color:#E1755B}   /* 珊瑚 */
.ic.g{background:#EAF3ED;color:#6F9C7E}   /* 柔和绿 */
.ic.b{background:#E9F0F6;color:#6D8CA8}   /* 雾蓝 */
.ic.w{background:#FBF1DF;color:#C99334}   /* 暖黄 */
.ic.p{background:#F0EDF7;color:#8A7FAE}   /* 淡紫 */

.btn{
  display:flex;align-items:center;justify-content:center;gap:6px;width:100%;
  height:50px;border-radius:25px;background:var(--brand);color:#fff;
  font-size:16px;font-weight:600;box-shadow:0 6px 16px rgba(242,133,109,.32);
  transition:transform .12s, opacity .12s;
}
.btn:active{transform:scale(.98)}
.btn[disabled]{opacity:.4;box-shadow:none}
.btn.ghost{background:#fff;color:var(--ink-2);box-shadow:none;border:1px solid var(--line);font-weight:500}
.btn.danger-ghost{background:#fff;color:#C0705C;box-shadow:none;border:1px solid #F2DED8;font-weight:500}
.footer-btn{
  flex:0 0 auto;padding:12px 18px calc(env(safe-area-inset-bottom) + 18px);
  background:linear-gradient(transparent,var(--bg) 26%);
}

/* ---------------- 欢迎页 ---------------- */
.welcome{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:5vh}
.welcome .ill{
  width:150px;height:150px;border-radius:50%;
  background:linear-gradient(150deg,#FFEDE6,#FDF6F2);
  display:flex;align-items:center;justify-content:center;font-size:64px;
  margin-bottom:24px;position:relative;flex:0 0 auto;
}
.welcome .ill::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:1px dashed #F6D3C6}
.welcome h2{font-size:23px;font-weight:700;letter-spacing:-.4px;line-height:1.45}
.welcome p{font-size:13.5px;color:var(--ink-2);line-height:1.8;margin-top:12px;padding:0 8px}
.pts{margin-top:24px;width:100%}
.pt{display:flex;gap:12px;align-items:center;background:#fff;border-radius:14px;padding:13px 15px;margin-bottom:10px;box-shadow:var(--shadow);text-align:left}
.pt .ic{flex:0 0 36px;width:36px;height:36px;border-radius:11px}
.pt b{font-size:13.5px;display:block}
.pt span{font-size:12px;color:var(--ink-3);display:block;margin-top:2px}
.disclaim{font-size:11.5px;color:var(--ink-3);text-align:center;line-height:1.65;padding:14px 24px 0}

/* ---------------- 建档 ---------------- */
.step{display:flex;gap:6px;margin:6px 2px 18px}
.step i{height:3px;border-radius:2px;background:var(--line);flex:1;transition:background .25s}
.step i.on{background:var(--brand)}
.q-title{font-size:21px;font-weight:700;letter-spacing:-.4px;line-height:1.4}
.q-sub{font-size:13px;color:var(--ink-3);margin-top:8px;line-height:1.6}
.field{margin-top:17px}
.field label{font-size:13px;color:var(--ink-2);font-weight:600;display:block;margin-bottom:7px}
.field label .req{color:var(--brand)}
.input{
  background:#fff;border:1px solid var(--line);border-radius:14px;height:52px;
  display:flex;align-items:center;padding:0 16px;gap:6px;
  transition:border-color .15s, box-shadow .15s;
}
.input:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.input input{flex:1;min-width:0;border:0;outline:0;background:none;font-size:20px;font-weight:600}
.input input::placeholder{color:#A79D97;font-weight:500}
.input .unit{font-size:14px;color:var(--ink-3);font-weight:500;flex:0 0 auto}
.input.date input{font-size:17px}
.hint{font-size:12.5px;color:var(--ink-3);margin-top:8px;line-height:1.6;display:flex;gap:6px}
.hint b{color:var(--brand);font-weight:600}
.hint.err{color:#C0705C}
.seg{display:flex;gap:10px}
.seg button{
  flex:1;height:52px;border-radius:14px;background:#fff;border:1px solid var(--line);
  font-size:15px;color:var(--ink-3);transition:all .15s;
}
.seg button.on{border-color:var(--brand);background:var(--brand-soft);color:var(--brand);font-weight:600}

.bmi-out{margin-top:18px;background:var(--ok-soft);border-radius:14px;padding:13px 16px;border:1px solid var(--ok-line)}
.bmi-out.warn{background:var(--warn-soft);border-color:#F3E6D6}
.bmi-out .r1{display:flex;justify-content:space-between;align-items:center}
.bmi-out .r1 span{font-size:13px;color:#4F6B58}
.bmi-out .r1 b{font-size:20px;color:var(--ok)}
.bmi-out.warn .r1 span{color:#8A6420}
.bmi-out.warn .r1 b{color:var(--warn)}
.bmi-out .r2{font-size:13px;color:#4F6B58;line-height:1.7;margin-top:8px;padding-top:10px;border-top:1px dashed #C9DCD0}
.bmi-out .r2 b{color:var(--ok)}
.bmi-out.warn .r2{color:#8A6420;border-top-color:#E8D5B4}
.bmi-out.warn .r2 b{color:var(--warn)}

/* ---------------- 首页 ---------------- */
.hero{padding:2px 4px 11px;position:relative}
.hero .hi{font-size:13px;color:var(--ink-2)}
.hero .wk{font-size:26px;font-weight:700;letter-spacing:-.5px;margin-top:3px}
.hero .wk small{font-size:13px;font-weight:500;color:var(--ink-3);margin-left:8px}
.hero .avatar{
  position:absolute;right:2px;top:2px;width:38px;height:38px;border-radius:50%;
  background:linear-gradient(135deg,#FBD9CF,#F6B9A6);
  display:flex;align-items:center;justify-content:center;font-size:15px;
}
/* ---------------- 今日体重卡片 ----------------
   配色故事：左上暖珊瑚 → 右下柔和绿，两个主色在同一张卡里过渡 */
.status-card{
  position:relative;overflow:hidden;padding:18px 16px 15px;border-radius:22px;
  background:
    linear-gradient(150deg,#FFEBE3 0%,#FFF5F0 32%,#FDFDFB 64%,#F1F7F3 100%);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 8px 24px rgba(198,134,110,.13), 0 1px 0 rgba(255,255,255,.9) inset;
}
/* 右上角珊瑚柔光 */
.status-card::before{
  content:"";position:absolute;top:-64px;right:-50px;width:172px;height:172px;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,rgba(242,133,109,.22),rgba(242,133,109,0) 70%);
  pointer-events:none;
}
/* 左下角柔绿柔光，和右上呼应 */
.status-card::after{
  content:"";position:absolute;z-index:0;bottom:-70px;left:-54px;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,rgba(122,160,134,.16),rgba(122,160,134,0) 70%);
  pointer-events:none;
}
.status-card.tone-warn{
  background:linear-gradient(150deg,#FDF0DC 0%,#FEF8EE 32%,#FDFDFB 64%,#F2F6F3 100%);
  box-shadow:0 8px 24px rgba(186,148,78,.14), 0 1px 0 rgba(255,255,255,.9) inset;
}
.status-card.tone-warn::before{background:radial-gradient(circle at 50% 50%,rgba(224,163,57,.20),rgba(224,163,57,0) 70%)}

.status-top{position:relative;z-index:1;display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.wcol{min-width:0}
/* 「今日体重」：比正文更亮眼一点，用主色 + 小圆点做标识 */
.status-top .now{
  font-size:13px;font-weight:700;letter-spacing:.2px;color:var(--brand);
  display:inline-flex;align-items:center;gap:6px;
}
.status-top .now::before{
  content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 6px;
  box-shadow:0 0 0 3px rgba(242,133,109,.16);
}
.status-card.tone-warn .status-top .now{color:var(--warn)}
.status-card.tone-warn .status-top .now::before{box-shadow:0 0 0 3px rgba(224,163,57,.16)}
.status-top .kg{
  font-size:42px;font-weight:700;letter-spacing:-2px;line-height:1;margin-top:5px;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(140deg,#3A312D,#6B5A52);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.status-top .kg span{
  font-size:14px;font-weight:600;color:var(--ink-3);margin-left:4px;letter-spacing:0;
  -webkit-text-fill-color:var(--ink-3);
}

.chips{display:flex;flex-direction:column;gap:6px;flex:0 0 auto;padding-top:2px}
.chip{
  min-width:82px;background:rgba(255,255,255,.78);border:1px solid #F2E9E4;
  border-radius:12px;padding:6px 10px;text-align:right;
  backdrop-filter:blur(4px);
}
.chip span{display:block;font-size:11px;color:var(--ink-3);line-height:1.2}
.chip b{
  display:block;font-size:15px;font-weight:700;color:var(--ink);margin-top:2px;
  letter-spacing:-.3px;font-variant-numeric:tabular-nums;line-height:1.15;
}
.chip b i{font-size:10.5px;font-style:normal;font-weight:600;color:var(--ink-3);margin-left:1.5px;letter-spacing:0}
.chip.g{background:rgba(237,244,239,.92);border-color:var(--ok-line)}
.chip.g b{color:var(--ok)}
.chip.w{background:rgba(252,243,226,.92);border-color:#F1E2C7}
.chip.w b{color:var(--warn)}

.gauge{position:relative;z-index:1;margin-top:16px}
.gauge .lbl{display:flex;justify-content:space-between;align-items:center;font-size:11.5px;color:var(--ink-3);margin-top:9px}
.gauge .lbl .rng{
  font-weight:600;color:var(--ink-2);font-variant-numeric:tabular-nums;
  background:#F6F1ED;border-radius:20px;padding:2px 8px;
}
.track{height:9px;border-radius:6px;background:#F3EEEA;position:relative;box-shadow:inset 0 1px 2px rgba(140,115,100,.07)}
.track .safe{
  position:absolute;top:0;bottom:0;border-radius:6px;
  background:linear-gradient(90deg,#DCEAE1,#EDF4EF 50%,#DCEAE1);
  border:1px solid var(--ok-line);
}
.track .dot{
  position:absolute;top:50%;transform:translate(-50%,-50%);
  width:17px;height:17px;border-radius:50%;
  background:linear-gradient(150deg,#93BBA0,var(--ok));
  border:3px solid #fff;box-shadow:0 2px 7px rgba(90,120,100,.34);
  transition:left .45s cubic-bezier(.4,1.2,.5,1);z-index:2;
}
.track .dot.warn{background:linear-gradient(150deg,#EDBB63,var(--warn));box-shadow:0 2px 7px rgba(170,125,40,.34)}

.verdict{
  position:relative;z-index:1;margin-top:13px;border-radius:14px;padding:11px 13px;
  font-size:13px;line-height:1.65;display:flex;gap:9px;
}
.verdict.ok{background:linear-gradient(120deg,rgba(226,240,231,.92),rgba(244,250,246,.92));color:#4F6B58}
.verdict.warn{background:linear-gradient(120deg,rgba(251,240,220,.94),rgba(254,249,239,.94));color:#8A6420}
.verdict .ic{
  flex:0 0 17px;height:17px;border-radius:50%;color:#fff;font-size:12px;font-weight:700;
  display:flex;align-items:center;justify-content:center;margin-top:1px;
}
.verdict.ok .ic{background:var(--ok)}
.verdict.warn .ic{background:var(--warn)}
.verdict b{font-weight:600}
/* 异常信号并进结论块后，用一条细分隔线跟主结论分层，不再是卡片外单独的黄条 */
.verdict .extra{margin-top:9px;padding-top:9px;border-top:1px solid rgba(120,90,40,.14)}
.verdict.ok .extra{border-top-color:rgba(60,100,70,.14)}

/* ---------------- 增重曲线卡片 ----------------
   跟今日体重卡片配色互为镜像：左上柔和绿 → 右下暖珊瑚 */
.chart-card{
  /* 整张卡的色相由这三个变量决定，见下方「三张数据卡各给一个主色」 */
  --accent:#6F9C7E;
  --accent-rgb:111,156,126;
  --wash:#EBF4EE;
  position:relative;overflow:hidden;
  margin-top:12px;padding:16px 14px 12px;border-radius:22px;
  background:
    linear-gradient(150deg,var(--wash) 0%,#F8FBF9 34%,#FDFDFB 66%,#FFF2EC 100%);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 8px 24px rgba(var(--accent-rgb),.13), 0 1px 0 rgba(255,255,255,.9) inset;
}
/* 左上主色光晕 */
.chart-card::before{
  content:"";position:absolute;z-index:0;top:-64px;left:-50px;width:172px;height:172px;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,rgba(var(--accent-rgb),.20),rgba(var(--accent-rgb),0) 70%);
  pointer-events:none;
}
/* 右下珊瑚光晕 */
.chart-card::after{
  content:"";position:absolute;z-index:0;bottom:-72px;right:-52px;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,rgba(242,133,109,.15),rgba(242,133,109,0) 70%);
  pointer-events:none;
}
.chart-head{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.chart-head b{font-size:15px;letter-spacing:-.2px}
.chart-head .ttl{min-width:0}
.chart-head .ttl b{display:flex;align-items:center;gap:7px}
.chart-head .sub{display:block;font-size:12px;color:var(--ink-3);margin-top:3px;font-variant-numeric:tabular-nums}

/* ---- 三张数据卡各给一个主色 ----
   首页从上到下是「今日体重 / 增重曲线 / 每日体重曲线」，
   原来后两张都是白卡白标题，滑到中间很难立刻分清在看哪一张。
   今日体重本来就是暖珊瑚底，这里把两张曲线卡分成绿和雾蓝：
   标题前一根色条 + 卡片角落的柔光换成同色，只做辨识，不喧宾夺主。 */
.gain-card {--accent:#6F9C7E;--accent-rgb:111,156,126;--wash:#EBF4EE}  /* 柔和绿 */
.daily-card{--accent:#5E82A0;--accent-rgb:94,130,160;--wash:#E7EFF7}  /* 雾蓝 */
.chart-card .chart-head .ttl b::before{
  content:"";flex:0 0 3px;width:3px;height:14px;border-radius:2px;background:var(--accent);
}
.chart-card svg{position:relative;z-index:1;display:block;width:100%;margin-top:6px}
.legend{
  position:relative;z-index:1;
  display:flex;gap:14px;font-size:11.5px;color:var(--ink-2);flex-wrap:wrap;
  margin-top:8px;padding:8px 2px 0;border-top:1px dashed rgba(150,130,118,.22);
}
.legend span{display:inline-flex;align-items:center}
.legend i{display:inline-block;width:13px;height:8px;border-radius:2px;margin-right:5px;flex:0 0 13px}
.legend i.band{background:#E4EFE8;border:1px solid var(--ok-line)}
.legend i.real{height:3px;border-radius:2px;background:linear-gradient(90deg,#F9A98F,#EE6E52)}
.legend i.pred{height:3px;border-radius:2px;background:repeating-linear-gradient(90deg,#E9B8A8 0 4px,transparent 4px 7px)}
.legend i.base{height:3px;border-radius:2px;background:repeating-linear-gradient(90deg,#A9C9B6 0 4px,transparent 4px 7px)}

/* 每日体重曲线卡片：配色跟增重曲线一致 */
.daily-card{margin-top:14px}

/* 每日曲线可以横向拖：画布宽度按天数算，一天 9px。
   纵轴刻度单独占左边一列（不在滚动区里），滑到哪都知道现在是多少 kg。 */
.dchart{position:relative;z-index:1;margin-top:6px}
.dchart-row{display:flex;align-items:flex-start}
.dchart-scroll{
  flex:1;min-width:0;
  overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;overscroll-behavior-x:contain;
}
.dchart-scroll::-webkit-scrollbar{display:none}
.chart-card .dchart svg{margin-top:0}
/* 溢出时按属性宽度画；不够一屏就退回自适应铺满，免得右边空一条 */
.dchart.is-scroll .dchart-scroll svg{width:auto;max-width:none}
.dchart:not(.is-scroll) .dchart-scroll svg{width:100%;height:auto}
.dchart .daxis{flex:0 0 34px;width:34px}
.dchart-hint{
  display:block;text-align:right;font-size:10.5px;color:var(--ink-3);
  margin-top:1px;padding-right:2px;opacity:.8;
}

/* 首页「每日体重曲线」下面的两个入口，左右各一半。
   横条改成半宽后放不下副标题那句「按周查看每天的变化」了，
   只留「共 N 条」—— 一行字塞满整个按钮比留白更难读。 */
.home-acts{display:flex;gap:10px;margin-top:12px}
.home-acts .act{
  flex:1;min-width:0;display:flex;align-items:center;gap:9px;text-align:left;
  padding:11px 11px;border-radius:16px;
  background:#fff;box-shadow:var(--shadow);transition:transform .12s;
}
.home-acts .act:active{transform:scale(.97)}
.home-acts .act .ic{flex:0 0 32px;width:32px;height:32px;border-radius:10px}
.home-acts .act > div{flex:1;min-width:0}
.home-acts .act b{
  display:block;font-size:13px;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.home-acts .act span{
  display:block;font-size:11px;color:var(--ink-3);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* 可点进「全部记录」的每日曲线卡：标题右边给一个箭头，
   否则一张长得像图表的卡没人知道它能点。 */
.daily-card.tappable{cursor:pointer}
.daily-card.tappable:active{transform:scale(.995)}
.daily-card.tappable .chart-head{align-items:center}
/* chart-head 是 space-between，三个孩子会把中间那个 tag 顶到正中去。
   让标题吃掉多余空间，tag 和箭头才会并排贴在右边。 */
.daily-card.tappable .chart-head .ttl{flex:1}
.daily-card.tappable .chart-head .arrow{
  width:7px;height:7px;flex:0 0 auto;
  border-right:1.6px solid #A79D97;border-top:1.6px solid #A79D97;transform:rotate(45deg);
}

.advice{display:flex;gap:10px}
.advice .it{flex:1;min-width:0;background:#fff;border-radius:14px;padding:11px 12px;box-shadow:var(--shadow);display:flex;gap:9px;align-items:center}
.advice .it .ic{flex:0 0 32px;width:32px;height:32px;border-radius:10px}
.advice .it .ic svg{width:18px;height:18px}
.advice .it .tx{min-width:0}
.advice .it .tx b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.advice .it .tx span{display:block;font-size:11.5px;color:var(--ink-3);line-height:1.4;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 首页底部「一起记录的妈妈们」——
   刻意不做成白卡片：淡淡的暖色底 + 细边，跟上面用户自己的数据卡分层，
   一眼看得出这是氛围模块，不是又一条要处理的信息。 */
.social{
  margin-top:20px;padding:19px 18px 20px;border-radius:18px;text-align:center;
  background:linear-gradient(180deg,#FFF4EF 0%,#FFFCFA 72%);
  border:1px solid #F7E7E0;
}
.social .avs{display:flex;justify-content:center;margin-bottom:12px}
.social .avs i{
  width:32px;height:32px;flex:0 0 32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:15px;font-style:normal;line-height:1;
  border:2px solid #fff;margin-left:-9px;
  box-shadow:0 1px 3px rgba(170,120,100,.16);
}
.social .avs i:first-child{margin-left:0}
/* 每个头像换一种柔和底色，堆叠起来才有「不同的人」的感觉 */
.social .avs i:nth-child(1){background:linear-gradient(135deg,#FBD9CF,#F6B9A6)}
.social .avs i:nth-child(2){background:linear-gradient(135deg,#FCE9C8,#F7D394)}
.social .avs i:nth-child(3){background:linear-gradient(135deg,#DEEDDF,#B7D8C2)}
.social .avs i:nth-child(4){background:linear-gradient(135deg,#DEE5F3,#BAC9E8)}
.social .avs i:nth-child(5){background:linear-gradient(135deg,#F1E3F3,#D8C0E5)}
.social .avs i:nth-child(6){background:linear-gradient(135deg,#FBE1DB,#F4B8B1)}
.social .avs .more{background:var(--brand);color:#fff}
.social .avs .more svg{width:15px;height:15px;display:block}
.social b{display:block;font-size:13.5px;line-height:1.65;color:var(--ink);font-weight:600}
.social b em{font-style:normal;color:var(--brand);font-weight:700}
.social > span{display:block;font-size:12.5px;color:var(--ink-3);margin-top:6px;line-height:1.6}

.alert{border-radius:12px;padding:10px 12px;font-size:13px;line-height:1.65;display:flex;gap:9px;align-items:center;margin-top:10px;background:var(--warn-soft);color:#8A6420}
.alert .ic{flex:0 0 28px;width:28px;height:28px;border-radius:9px;background:rgba(255,255,255,.72);color:var(--warn)}
.alert .ic svg{width:16px;height:16px}

/* 空状态 */
.empty{text-align:center;padding:36px 20px}
.empty .ic{width:60px;height:60px;border-radius:20px;margin:0 auto;flex:none}
.empty .ic svg{width:30px;height:30px}
.empty b{display:block;font-size:15px;margin-top:14px}
.empty span{display:block;font-size:13px;color:var(--ink-3);margin-top:7px;line-height:1.7}

/* ---------------- 悬浮记录按钮 ---------------- */
.fab{
  position:absolute;right:18px;bottom:calc(var(--tabh) + 12px);
  height:48px;padding:0 20px;border-radius:24px;background:var(--brand);color:#fff;
  display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:14px;font-weight:600;box-shadow:0 8px 22px rgba(242,133,109,.48);
  z-index:20;transition:transform .12s;
}
.fab:active{transform:scale(.95)}
.fab svg{width:18px;height:18px}

/* ---------------- TabBar：悬浮岛，不贴底 ---------------- */
.tabbar{
  position:absolute;z-index:30;
  left:14px;right:14px;
  bottom:calc(env(safe-area-inset-bottom) + var(--tabgap));
  height:var(--tabbar-h);border-radius:20px;
  display:flex;align-items:center;
  padding:0 4px;
  background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  backdrop-filter:saturate(180%) blur(18px);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 10px 28px rgba(120,90,75,.16), 0 2px 6px rgba(120,90,75,.06);
}
/* 让内容在悬浮条周围淡出，而不是从缝隙里硬生生露出来 */
.tabbar::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  left:-14px;right:-14px;top:-22px;
  bottom:calc(-6px - var(--tabgap) - env(safe-area-inset-bottom));
  background:linear-gradient(transparent,var(--bg) 40%);
}
.tabbar .tab{
  position:relative;flex:1;height:46px;border-radius:16px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  font-size:11.5px;color:var(--ink-3);transition:color .2s;
}
.tabbar .tab.on{color:var(--brand);font-weight:600}
/* 选中态的浅色底片 */
.tabbar .tab::before{
  content:"";position:absolute;inset:0;border-radius:16px;
  background:var(--brand-soft);opacity:0;transform:scale(.86);
  transition:opacity .2s, transform .2s;
}
.tabbar .tab.on::before{opacity:1;transform:scale(1)}
.tabbar .tab svg,.tabbar .tab span{position:relative}
.tabbar .tab svg{width:22px;height:22px}
.tabbar .tab:active{transform:scale(.96)}

/* ---------------- 记录体重 ---------------- */
.rec-wrap{text-align:center;padding-top:8px}
.rec-date{font-size:13px;color:var(--ink-3)}
.rec-date button{color:var(--brand);font-size:13px;margin-left:6px}
.rec-num{font-size:60px;font-weight:700;letter-spacing:-3px;margin-top:6px;line-height:1;font-variant-numeric:tabular-nums}
.rec-num span{font-size:20px;font-weight:600;color:var(--ink-3);letter-spacing:0;margin-left:4px}
/* 改旧记录时的提示条：先把原值念回去，用户才敢放心改 */
.rec-editing{
  margin-top:12px;display:inline-block;padding:5px 13px;border-radius:20px;
  font-size:13px;background:var(--brand-soft);color:#C0705C;
}
.rec-editing b{font-weight:700}

/* 记录明细里的「改 / 删」 */
.li-act{font-size:13px;padding:4px 9px;margin-left:6px;border-radius:9px;background:#F3EFEB;color:var(--ink-2);flex:0 0 auto}
.li-act.del{background:#FBEDE9;color:#C0705C}

.rec-diff{font-size:13px;margin-top:10px;display:inline-block;padding:5px 12px;border-radius:20px;background:var(--ok-soft);color:var(--ok)}
.rec-diff.warn{background:var(--warn-soft);color:var(--warn)}
.rec-diff.none{background:#F3EEEA;color:var(--ink-3)}

/* 刻度尺：横向 scroll-snap，拖动即选值 */
.ruler{position:relative;margin-top:18px;height:76px;overflow:hidden}
.ruler-scroll{
  position:absolute;inset:0;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.ruler-scroll::-webkit-scrollbar{display:none}
.ruler-track{position:relative;height:76px}
.ruler-track .tk{position:absolute;bottom:26px;width:1.5px;background:#D9D1CB;border-radius:1px}
.ruler-track .tk.major{background:#9A8F88}
.ruler-track .num{position:absolute;bottom:2px;font-size:12px;color:var(--ink-3);transform:translateX(-50%);white-space:nowrap}
.ruler-snap{position:absolute;top:0;width:1px;height:1px;scroll-snap-align:center}
.ruler-cursor{
  position:absolute;left:50%;bottom:22px;transform:translateX(-50%);
  width:2.5px;height:46px;background:var(--brand);border-radius:2px;pointer-events:none;z-index:3;
}
.ruler-cursor::before{content:"";position:absolute;top:-7px;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--brand)}
.ruler-mask{position:absolute;top:0;bottom:0;width:64px;z-index:2;pointer-events:none}
.ruler-mask.l{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.ruler-mask.r{right:0;background:linear-gradient(-90deg,var(--bg),transparent)}

.step-row{display:flex;gap:10px;align-items:center;justify-content:center;margin-top:14px}
.step-row button{
  width:44px;height:44px;border-radius:50%;background:#fff;box-shadow:var(--shadow);
  font-size:20px;color:var(--ink-2);display:flex;align-items:center;justify-content:center;
}
.step-row button:active{background:var(--brand-soft)}
.step-row .manual{
  width:auto;flex:none;white-space:nowrap;
  height:44px;padding:0 18px;border-radius:22px;background:#fff;box-shadow:var(--shadow);
  font-size:13px;color:var(--ink-2);
}

.tips-card{margin-top:16px;background:#fff;border-radius:14px;padding:14px 16px;box-shadow:var(--shadow);text-align:left}
.tips-card > b{font-size:13px;display:flex;align-items:center;gap:6px}
.tips-card ul{margin-top:10px}
.tips-card li{font-size:13px;color:var(--ink-2);line-height:1.55;padding-left:16px;position:relative;margin-bottom:6px}
.tips-card li::before{content:"";position:absolute;left:2px;top:6px;width:5px;height:5px;border-radius:50%;background:#E5DDD7}
.tips-card svg{display:block;width:100%;margin-top:10px}
.tips-card > b .tip-i{width:17px;height:17px;flex:0 0 17px;margin-top:0;color:var(--brand)}

.extra-row{display:flex;gap:10px;margin-top:16px}
.extra-row .e{
  flex:1;background:#fff;border:1px dashed #E3DBD5;border-radius:12px;height:52px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  font-size:12px;color:var(--ink-3);
}
.extra-row .e b{font-size:14px;color:var(--ink-2);font-weight:500}
.extra-row .e.filled{border-style:solid;border-color:var(--brand-soft);background:var(--brand-soft)}
.extra-row .e.filled b{color:var(--brand);font-weight:600}

/* ---------------- 妈妈盒子 ---------------- */
.box-top{background:linear-gradient(150deg,var(--brand-2) 0%,var(--brand) 100%);border-radius:18px;padding:16px 18px;color:#fff;box-shadow:0 8px 20px rgba(242,133,109,.28)}
.box-top .t1{font-size:13px;opacity:.92}
.box-top .t2{font-size:19px;font-weight:700;margin-top:4px;letter-spacing:-.3px}
.box-top .stats{display:flex;margin-top:14px;padding-top:13px;border-top:1px solid rgba(255,255,255,.28)}
.box-top .stats div{flex:1}
.box-top .stats b{font-size:17px;font-weight:700;display:block}
.box-top .stats b i{font-size:11px;font-style:normal;font-weight:500}
.box-top .stats span{font-size:11.5px;opacity:.85;display:block;margin-top:2px}

.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;background:#fff;border-radius:16px;padding:16px 8px;box-shadow:var(--shadow)}
.gi{display:flex;flex-direction:column;align-items:center;gap:7px;font-size:12px;color:var(--ink-2);position:relative}
.gi .ic{flex:none;width:42px;height:42px;border-radius:14px}
.gi .ic svg{width:21px;height:21px}
.gi:active .ic{transform:scale(.94)}
.gi .dot{
  position:absolute;top:-2px;right:12px;min-width:15px;height:15px;border-radius:8px;
  background:var(--brand);color:#fff;font-size:10px;display:flex;align-items:center;justify-content:center;
  padding:0 4px;font-weight:600;border:1.5px solid #fff;
}

.kb-hero{background:linear-gradient(150deg,#FFF1EC,#FDF7F3);border-radius:18px;padding:18px;border:1px solid #FBE6DE}
.kb-hero h3{font-size:16.5px}
.kb-hero p{font-size:13px;color:var(--ink-2);line-height:1.7;margin-top:6px}
.compose{margin-top:14px}
.cmp{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.cmp .nm{font-size:13px;width:56px;color:var(--ink-2);flex:0 0 56px}
.cmp .bar{flex:1;height:22px;background:#F3EEEA;border-radius:6px;overflow:hidden}
.cmp .bar i{display:block;height:100%;border-radius:6px;transition:width .5s ease}
.cmp .vl{font-size:12.5px;color:var(--ink-3);width:46px;text-align:right;font-variant-numeric:tabular-nums;flex:0 0 46px}

.art{display:flex;gap:12px;background:#fff;border-radius:14px;padding:12px;box-shadow:var(--shadow);margin-top:10px;align-items:center;text-align:left;width:100%}
.art .th{width:60px;height:60px;border-radius:11px;flex:0 0 60px;display:flex;align-items:center;justify-content:center;font-size:25px}
.art b{font-size:13.5px;line-height:1.45;display:block}
.art span{font-size:12px;color:var(--ink-3);margin-top:6px;display:block}

/* ---------------- 记录列表 ---------------- */
.month-sum{display:flex;background:#fff;border-radius:14px;box-shadow:var(--shadow);padding:14px 0;margin-top:4px}
.month-sum .m{flex:1;text-align:center;border-right:1px solid var(--line)}
.month-sum .m:last-child{border:0}
.month-sum .m b{font-size:19px;display:block}
.month-sum .m b i{font-size:12px;font-style:normal;color:var(--ink-3);font-weight:500}
.month-sum .m span{font-size:12px;color:var(--ink-3);display:block;margin-top:3px}

.rec-item{display:flex;align-items:center;background:#fff;border-radius:14px;padding:13px 15px;margin-top:9px;box-shadow:var(--shadow);gap:13px;width:100%;text-align:left}
.rec-item .wkbox{width:42px;height:42px;border-radius:11px;background:var(--brand-soft);display:flex;flex-direction:column;align-items:center;justify-content:center;flex:0 0 42px}
.rec-item .wkbox b{font-size:15px;color:var(--brand);line-height:1}
.rec-item .wkbox span{font-size:10px;color:#D99881;margin-top:2px}
.rec-item .mid{flex:1;min-width:0}
.rec-item .mid b{font-size:15.5px}
.rec-item .mid b i{font-size:12px;font-style:normal;color:var(--ink-3);font-weight:500;margin-left:2px}
.rec-item .mid span{display:block;font-size:12px;color:var(--ink-3);margin-top:3px}
.rec-item .right{text-align:right;flex:0 0 auto}
.rec-item .right .v{font-size:13px;font-weight:600}
.rec-item .right .v.warn{color:var(--warn)}
.rec-item .right .v.ok{color:var(--ok)}
.rec-item .right .tag{margin-top:5px}
/* 最早那一周没有上一周可比，不给「快 / 慢」结论，用中性灰表示 */
.rec-item .right .v.none{color:var(--ink-3)}
.tag.none{background:#F3EFEB;color:var(--ink-3);font-weight:500}

/* ---------------- 我的 ---------------- */
.me-head{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  background:#fff;border-radius:16px;padding:16px;box-shadow:var(--shadow);margin-top:4px;
  transition:transform .12s;
}
.me-head:active{transform:scale(.985)}
.me-head .av{width:54px;height:54px;border-radius:50%;background:linear-gradient(135deg,#FBD9CF,#F6B9A6);display:flex;align-items:center;justify-content:center;font-size:23px;flex:0 0 54px}
.me-head .me-tx{flex:1;min-width:0}
.me-head b{font-size:17px;display:flex;align-items:center;gap:6px}
.me-head span{font-size:13px;color:var(--ink-3);display:block;margin-top:4px;line-height:1.6}
/* 昵称后的小铅笔，暗示「可以改」 */
.me-head .pen{width:13px;height:13px;flex:0 0 13px;color:var(--brand);opacity:.8;display:block}
.me-head .arrow{width:7px;height:7px;border-right:1.6px solid #A79D97;border-top:1.6px solid #A79D97;transform:rotate(45deg);flex:0 0 auto}

/* 「我的」底部：去妈妈盒子建档。
   用品牌色实底跟上面的白色列表拉开，是这一页唯一的主动作；
   但排在最后 —— 它是延伸，不该抢用户自己档案的位置。 */
.me-cta{
  display:flex;align-items:center;gap:13px;width:100%;text-align:left;margin-top:22px;
  padding:16px;border-radius:16px;color:#fff;
  background:linear-gradient(135deg,var(--brand) 0%,var(--brand-2) 100%);
  box-shadow:0 6px 18px rgba(242,133,109,.28);transition:transform .12s;
}
.me-cta:active{transform:scale(.985)}
/* 沿用弹窗里那枚奶油色盒子标，用户一眼认得出是同一个东西；
   BOX_MARK 里的爱心写死了 #fff，放在半透明白底上会糊成一团，必须给它一块暖色底。 */
.me-cta .ic{
  width:40px;height:40px;flex:0 0 40px;border-radius:13px;
  background:linear-gradient(140deg,#FDE9C2,#FBD98F);color:#E08A2E;
  display:flex;align-items:center;justify-content:center;
}
.me-cta .ic svg{width:21px;height:21px;display:block}
.me-cta .tx{flex:1;min-width:0}
.me-cta .tx b{display:block;font-size:14.5px;font-weight:600;line-height:1.45}
.me-cta .tx span{display:block;font-size:12.5px;margin-top:5px;line-height:1.6;color:rgba(255,255,255,.86)}
.me-cta .arrow{width:7px;height:7px;border-right:1.8px solid rgba(255,255,255,.85);border-top:1.8px solid rgba(255,255,255,.85);transform:rotate(45deg);flex:0 0 auto}

/* 弹层里的危险操作：能找到，但不跟主按钮抢眼 */
.sheet-danger{
  display:block;width:100%;margin-top:12px;padding:11px;
  font-size:13px;color:var(--ink-3);background:none;text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:#DCD3CD;
}

/* 头像选择器（建档 & 编辑资料共用） */
.av-pick{display:flex;flex-wrap:wrap;gap:8px}
.av-o{
  width:44px;height:44px;border-radius:14px;font-size:21px;line-height:1;
  background:#fff;border:1.5px solid var(--line);
  display:flex;align-items:center;justify-content:center;transition:all .15s;
  overflow:hidden;flex:0 0 44px;
}
.av-o.on{border-color:var(--brand);background:var(--brand-soft);transform:scale(1.04)}
.av-o:active{transform:scale(.94)}
/* 「上传」格子：虚线框，跟 emoji 格子区分开 */
.av-o.up{
  flex-direction:column;gap:1px;border-style:dashed;border-color:#DCD3CC;color:var(--ink-3);
  background:#FCFAF8;
}
.av-o.up svg{width:17px;height:17px;display:block}
.av-o.up i{font-style:normal;font-size:9.5px;line-height:1}
.av-o.photo{padding:0;border-color:var(--brand)}
.av-o.photo img{width:100%;height:100%;object-fit:cover;display:block}
/* 上传的照片头像：撑满圆形/圆角容器 */
.av-img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}
.me-head .av{overflow:hidden}
.hero .avatar{overflow:hidden;padding:0}
.list{background:#fff;border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.li{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line);width:100%;text-align:left;font-size:14px}
.li:last-child{border-bottom:0}
.li .ic{flex:0 0 30px;width:30px;height:30px;border-radius:10px}
.li .ic svg{width:17px;height:17px}
.li .lbl{flex:1;min-width:0}
.li .val{font-size:13px;color:var(--ink-3);flex:0 0 auto}
.li .arrow{width:7px;height:7px;border-right:1.6px solid #A79D97;border-top:1.6px solid #A79D97;transform:rotate(45deg);flex:0 0 auto;margin-left:2px}

/* ---------------- 弹层 ---------------- */
.sheet-mask{
  position:fixed;inset:0;background:rgba(40,30,26,.42);z-index:100;
  display:flex;align-items:flex-end;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .22s;
}
.sheet-mask.on{opacity:1;pointer-events:auto}
.sheet{
  width:100%;max-width:430px;background:var(--bg);border-radius:20px 20px 0 0;
  padding:20px 18px calc(env(safe-area-inset-bottom) + 18px);
  transform:translateY(100%);transition:transform .26s cubic-bezier(.3,.9,.3,1);
  max-height:86vh;overflow-y:auto;
}
.sheet-mask.on .sheet{transform:translateY(0)}
.sheet h3{font-size:17px;text-align:center;margin-bottom:4px}
.sheet .sub{font-size:13px;color:var(--ink-3);text-align:center;line-height:1.65;margin-bottom:16px}
.sheet .btns{display:flex;gap:10px;margin-top:18px}
.sheet .btns .btn{flex:1}

/* ---------------- 分享卡弹层 ---------------- */
/* 三选一的分段控件。用滑块而不是三个独立按钮：
   这三种卡是互斥的一个选择，不是三个动作。 */
.sh-seg{
  display:flex;gap:4px;background:#F3EEEA;border-radius:12px;padding:4px;margin-bottom:14px;
}
.sh-seg button{
  flex:1;padding:8px 0;border-radius:9px;font-size:13px;color:var(--ink-2);
  transition:background .16s,color .16s;
}
.sh-seg button.on{background:#fff;color:var(--ink);font-weight:600;box-shadow:0 1px 4px rgba(80,55,45,.1)}

/* 预览区给个浅底，让白色卡片的边界能看出来 */
.sh-preview{
  background:#F6F1ED;border-radius:16px;padding:14px;
  display:flex;justify-content:center;min-height:120px;
}
.sh-preview img{
  width:100%;max-width:300px;height:auto;display:block;border-radius:12px;
  box-shadow:0 6px 20px rgba(70,48,38,.14);
}
.sh-tip{
  text-align:center;font-size:11.5px;color:var(--ink-3);margin-top:10px;line-height:1.6;
}

/* ---------------- 居中弹窗（妈妈盒子引导） ---------------- */
.modal-mask{
  position:fixed;inset:0;background:rgba(40,30,26,.46);z-index:150;
  display:flex;align-items:center;justify-content:center;padding:24px;
  opacity:0;pointer-events:none;transition:opacity .22s;
}
.modal-mask.on{opacity:1;pointer-events:auto}
.modal{
  position:relative;width:100%;max-width:330px;background:#fff;border-radius:22px;
  padding:26px 22px 18px;text-align:center;
  box-shadow:0 22px 60px rgba(60,40,32,.26);
  transform:translateY(14px) scale(.96);transition:transform .26s cubic-bezier(.3,.9,.3,1);
  max-height:82vh;overflow-y:auto;
}
.modal-mask.on .modal{transform:translateY(0) scale(1)}

.modal-x{
  position:absolute;top:12px;right:12px;width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:#B6ADA7;
}
.modal-x svg{width:15px;height:15px;display:block}
.modal-x:active{background:#F3EEEA}

/* 主视觉：暖黄圆角砖 + 橙色公文包 */
.bx-mark{
  width:58px;height:58px;border-radius:19px;margin:0 auto 14px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,#FDE9C2,#FBD98F);color:#E08A2E;
  box-shadow:0 6px 16px rgba(224,163,57,.28);
}
.bx-mark svg{width:31px;height:31px;display:block}
.bx-mark.ok{background:linear-gradient(140deg,#DCEFE2,#B9DFC7);color:#4E8A67;box-shadow:0 6px 16px rgba(110,156,126,.28)}
.bx-mark svg.spin{animation:bxspin 1.1s linear infinite}
@keyframes bxspin{to{transform:rotate(360deg)}}

.bx-title{font-size:17px;line-height:1.45;margin-bottom:8px}
.bx-desc{font-size:13px;color:var(--ink-3);line-height:1.75;margin-bottom:16px}

/* 米色权益盒 */
.bx-perks{
  background:#FEF8EC;border:1px solid #F6E7CB;border-radius:14px;
  padding:13px 14px;text-align:left;display:grid;gap:11px;margin-bottom:18px;
}
.bx-p{display:flex;align-items:flex-start;gap:9px}
.bx-ck{
  flex:0 0 17px;width:17px;height:17px;border-radius:50%;margin-top:1px;
  background:#DFF0E4;color:#5B9070;display:flex;align-items:center;justify-content:center;
}
.bx-ck svg{width:10px;height:10px;display:block}
.bx-p b{display:block;font-size:13px;font-weight:600}
.bx-p span{display:block;font-size:12px;color:var(--ink-3);line-height:1.5;margin-top:2px}

.bx-go{width:100%}
.bx-note{font-size:12px;color:var(--ink-3);line-height:1.6;margin-top:10px}
.bx-note.dim{color:#C0B7B1;font-size:11.5px;margin-top:8px}

/* 同步进度条 */
.bx-bar{position:relative;height:5px;border-radius:3px;background:#F1EBE6;overflow:hidden;margin:6px 0 2px}
.bx-bar i{
  position:absolute;left:0;top:0;height:100%;width:38%;border-radius:3px;
  background:linear-gradient(90deg,#F2856D,#F6B49F);
  animation:bxbar 1.2s ease-in-out infinite;
}
@keyframes bxbar{0%{transform:translateX(-110%)}100%{transform:translateX(300%)}}

/* 同步结果明细 */
.bx-rec{
  background:#FAF7F4;border-radius:14px;padding:12px 14px;text-align:left;
  display:grid;gap:9px;margin-bottom:18px;
}
.bx-rec > div{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13px}
.bx-rec span{color:var(--ink-3)}
.bx-rec b{font-weight:600;letter-spacing:.2px}

/* 妈妈盒子页顶部的连接状态条 */
.bx-linked{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  margin-top:12px;padding:13px 14px;border-radius:16px;
  background:linear-gradient(120deg,#FEF6E7,#FFFDF9);
  border:1px solid #F5E6C9;box-shadow:0 4px 14px rgba(196,158,86,.10);
  transition:transform .12s;
}
.bx-linked:active{transform:scale(.99)}
.bx-linked .ic{flex:0 0 34px;width:34px;height:34px;border-radius:11px}
.bx-linked > div{flex:1;min-width:0}
.bx-linked b{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bx-linked span{display:block;font-size:12px;color:var(--ink-3);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bx-linked .arrow{width:7px;height:7px;border-right:1.6px solid #D8C4A0;border-top:1.6px solid #D8C4A0;transform:rotate(45deg);flex:0 0 auto}
.bx-linked.off{background:linear-gradient(120deg,#FDEDE9,#FFFBFA);border-color:#F7DDD5;box-shadow:0 4px 14px rgba(198,134,110,.10)}
.bx-linked.off .arrow{border-color:#E3B7AB}

.toast{
  position:fixed;left:50%;bottom:110px;transform:translate(-50%,10px);
  background:rgba(46,42,40,.92);color:#fff;font-size:13.5px;
  padding:11px 20px;border-radius:22px;z-index:200;
  opacity:0;pointer-events:none;transition:all .24s;max-width:80%;text-align:center;line-height:1.5;
}
.toast.on{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}