/* ==========================================================
   components.css — 通用组件：弹层 / 空状态 / 侧栏 / tabbar / 过场
   ========================================================== */
/* ============ 弹层 ============ */
.mask{position:absolute;inset:0;background:rgba(40,28,30,.42);z-index:40;
  opacity:0;visibility:hidden;transition:.24s;backdrop-filter:blur(2px);}
.mask.on{opacity:1;visibility:visible;}
.sheet{position:absolute;left:0;right:0;bottom:0;background:#fff;z-index:41;
  border-radius:24px 24px 0 0;padding:16px 18px 26px;transform:translateY(105%);
  transition:transform .3s cubic-bezier(.22,.9,.3,1);max-height:74%;overflow-y:auto;}
.sheet.on{transform:none;}
/* 档案表单拆成「妈妈段+宝宝段」后内容变长（720px），弹层最高只有 74%，
   保存按钮在任何机型上都被挤到折叠线以下，用户每次都得先滚一屏才能提交。
   把主操作钉在弹层底部：内容在它下面滚，按钮始终在手边。
   负边距抵消 .sheet 的左右/下内边距，让按钮条铺满贴底；上沿加白色渐变，
   避免滚动中的文字和按钮糊在一起。 */
.sheet .shfoot{position:sticky;bottom:-26px;z-index:1;margin:18px -18px -26px;
  padding:14px 18px calc(26px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(to bottom,rgba(255,255,255,0) 0,#fff 14px,#fff 100%);}
.sheet .sht{text-align:center;font-size:15px;font-weight:700;padding-bottom:14px;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.gi{height:42px;border-radius:12px;background:#F7F1ED;display:flex;align-items:center;
  justify-content:center;font-size:13px;font-weight:600;cursor:pointer;color:#6A5A57;}
.gi.on{background:linear-gradient(135deg,var(--pink2),var(--pink));color:#fff;}
.opt{display:flex;align-items:center;gap:11px;padding:14px 4px;cursor:pointer;}
.opt+.opt{border-top:1px solid var(--line);}
.opt .ot{flex:1;}
.opt .o1{font-size:13.5px;font-weight:700;}
.opt .o2{font-size:11.5px;color:var(--mute);margin-top:3px;line-height:1.5;}
.rd{width:19px;height:19px;border-radius:50%;border:1.6px solid #DCCFC9;flex:none;}
.rd.on{border-color:var(--pink);background:var(--pink);box-shadow:inset 0 0 0 3.4px #fff;}
/* 靠底部而不是居中：居中会压住确认弹窗和妈妈盒子弹层的标题 */
.toast{position:absolute;left:50%;bottom:104px;transform:translateX(-50%);z-index:60;
  background:rgba(40,30,32,.9);color:#fff;font-size:13px;padding:11px 18px;border-radius:12px;
  opacity:0;visibility:hidden;transition:.2s;white-space:nowrap;max-width:82%;text-align:center;}
.toast.on{opacity:1;visibility:visible;}

/* ============ 空状态 ============ */
.empty{text-align:center;padding:42px 24px 30px;}
.empty .eic{font-size:46px;}
.empty .e1{font-size:16px;font-weight:700;margin-top:14px;}
.empty .e2{font-size:12px;color:var(--mute);margin-top:8px;line-height:1.7;}

/* ============ 桌面侧栏 ============ */
.sidebar{width:186px;margin-left:26px;flex:none;}
.sidebar h3{font-size:13px;font-weight:700;color:#7A6660;margin-bottom:4px;}
.sidebar p{font-size:11px;color:#A69691;line-height:1.6;margin-bottom:12px;}
.jump{display:block;width:100%;text-align:left;background:#fff;border:1px solid #EFE4DF;
  border-radius:11px;padding:9px 12px;font-size:12px;font-weight:600;color:#6A5A57;
  margin-bottom:7px;cursor:pointer;font-family:inherit;transition:.15s;}
.jump:hover{border-color:var(--pink);color:var(--pink);}
.jump.on{background:linear-gradient(135deg,var(--pink2),var(--pink));color:#fff;border-color:transparent;}

/* ============ 妈妈盒子 tab ============ */
.tab.box{position:relative;justify-content:flex-start;padding-top:26px;}
.tab.box .bx{position:absolute;top:-19px;width:46px;height:46px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;font-size:22px;
  background:linear-gradient(140deg,#FFC48A 0%,#F5789B 60%,#E86A9C 100%);
  box-shadow:0 9px 18px -6px rgba(240,120,150,.62),0 2px 5px rgba(240,120,150,.28);
  border:3px solid #fff;transition:transform .14s;}
.tab.box:active .bx{transform:scale(.93);}
.tab.box span{margin-top:2px;}
.tab.box .dotx{position:absolute;top:-23px;right:calc(50% - 31px);min-width:16px;height:16px;
  border-radius:8px;background:#FF4D6D;border:1.6px solid #fff;color:#fff;font-size:10px;
  font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 3px;}

/* ============ 通用二次确认弹窗 ============ */
/* 不用原生 confirm()：iOS 微信里样式不可控，且会顶掉页面焦点 */
.cfm{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.9);width:270px;
  background:#fff;border-radius:18px;z-index:52;opacity:0;visibility:hidden;overflow:hidden;
  transition:.2s cubic-bezier(.22,.9,.3,1);box-shadow:0 20px 48px -16px rgba(50,30,35,.4);}
.cfm.on{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1);}
.cfm .cft{padding:22px 20px 0;text-align:center;font-size:16px;font-weight:700;color:#2E2724;}
.cfm .cfd{padding:9px 20px 20px;text-align:center;font-size:12.5px;line-height:1.65;color:#9A908C;}
.cfm .cfb{display:flex;border-top:1px solid var(--line);}
.cfm .cfb>div{flex:1;height:48px;display:flex;align-items:center;justify-content:center;
  font-size:15px;cursor:pointer;}
.cfm .cfc{color:#8A7C77;font-weight:600;border-right:1px solid var(--line);}
.cfm .cfc:active{background:#FAF6F4;}
.cfm .cfo{color:#E0607F;font-weight:700;}
.cfm .cfo:active{background:#FDF3F5;}

/* ============ 妈妈盒子 · 引导弹层 ============ */
.wxm{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.92);width:296px;
  background:#FFFDFB;border-radius:22px;z-index:50;opacity:0;visibility:hidden;
  padding:26px 22px 20px;
  transition:.24s cubic-bezier(.22,.9,.3,1);box-shadow:0 22px 54px -18px rgba(50,30,35,.42);}
.wxm.on{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1);}
/* 右上角关闭 */
.wxm .wxx{position:absolute;right:16px;top:15px;width:26px;height:26px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:#3C3330;}
.wxm .wxx:active{opacity:.5;}
/* 品牌图标 */
.wxm .wxic{width:60px;height:60px;border-radius:17px;margin:2px auto 0;
  background:#FDECB4;display:flex;align-items:center;justify-content:center;}
.wxm .wxt{text-align:center;margin-top:15px;font-size:19px;font-weight:800;
  color:#2E2724;letter-spacing:-.3px;}
.wxm .wxd{text-align:center;margin-top:10px;font-size:12.5px;line-height:1.75;color:#9A908C;}
/* 权益列表 */
.wxm .wxf{margin-top:16px;background:#FDF6E6;border-radius:14px;padding:13px 15px;}
.wxm .wxf .fi{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:700;color:#3A322F;}
.wxm .wxf .fi+.fi{margin-top:11px;}
/* 将同步过去的数据 */
.wxm .wxs{margin-top:11px;font-size:11.5px;line-height:1.7;color:#A8998F;text-align:center;}
.wxm .wxs b{color:#7A6A64;font-weight:700;}
/* 主按钮 */
.wxm .wxgo{margin-top:15px;height:48px;border-radius:24px;background:#E2604F;color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;
  cursor:pointer;transition:transform .12s;}
.wxm .wxgo:active{transform:scale(.975);}
.wxm .wxnote{margin-top:11px;text-align:center;font-size:11px;color:#BDB2AC;}

/* ============ 小程序启动过场 ============ */
.launch{position:absolute;inset:0;background:#fff;z-index:55;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:15px;opacity:0;visibility:hidden;transition:.2s;}
.launch.on{opacity:1;visibility:visible;}
.launch .li{width:76px;height:76px;border-radius:22px;display:flex;align-items:center;
  justify-content:center;font-size:38px;background:linear-gradient(140deg,#FFC48A,#F5789B);
  box-shadow:0 14px 30px -12px rgba(240,120,150,.6);}
.launch .ln{font-size:15px;font-weight:700;color:#33272A;}
.spin{width:22px;height:22px;border-radius:50%;border:2.4px solid #F0E4DE;
  border-top-color:var(--pink);animation:sp .7s linear infinite;}
@keyframes sp{to{transform:rotate(360deg)}}