/* 顾客手机端。配色沿用占位页的青绿 + 香槟金,与员工端区分开。 */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
:root{
  --green:#2c8a7d; --gold:#c9a86a;
  --ink:#2a2f2e; --dim:#8a938f; --line:#e7ebe9;
  --bg:#f4f6f5; --card:#fff;
}
html,body{height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
#app{max-width:520px;margin:0 auto;min-height:100%}

/* ---------- 登录 ---------- */
.auth-wrap{
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:linear-gradient(160deg,#eaf3f0,#f4f2ee);
}
.auth{
  background:#fff;border-radius:22px;box-shadow:0 10px 40px rgba(44,138,125,.14);
  padding:38px 26px;width:100%;max-width:400px;text-align:center;
}
.logo{
  width:64px;height:64px;border-radius:20px;margin:0 auto 18px;
  background:linear-gradient(135deg,var(--green),var(--gold));color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:700;
}
.auth h1{font-size:20px;font-weight:700;margin-bottom:6px}
.auth .sub{color:var(--dim);font-size:14px;margin-bottom:24px}
.tabs{display:flex;gap:6px;background:#f1f4f3;padding:4px;border-radius:12px;margin-bottom:20px}
.tab{
  flex:1;padding:9px 0;border:0;background:transparent;border-radius:9px;
  font-size:14px;font-family:inherit;color:var(--dim);cursor:pointer;
}
.tab.on{background:#fff;color:var(--green);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.pwline{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--dim)}
.pwline span{flex:1;line-height:1.5}
.tip a{color:var(--green);text-decoration:none}

.field{text-align:left;margin-bottom:14px}
.field label{display:block;font-size:13px;color:var(--dim);margin-bottom:6px}
input{
  width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:12px;
  font-size:16px;font-family:inherit;background:#fbfcfc;color:var(--ink);
}
input:focus{outline:none;border-color:var(--green);background:#fff}
.code-row{display:flex;gap:10px}
.code-row input{flex:1;letter-spacing:4px}
.btn{
  width:100%;padding:14px;border:0;border-radius:12px;background:var(--green);color:#fff;
  font-size:16px;font-weight:600;font-family:inherit;cursor:pointer;
}
.btn:active{opacity:.85}
.btn[disabled]{background:#c3cdc9;cursor:default}
.btn.mini{
  width:auto;padding:0 16px;font-size:14px;white-space:nowrap;background:#fff;
  color:var(--green);border:1px solid var(--green);
}
.btn.mini[disabled]{color:#b3b8b5;border-color:var(--line);background:#fff}
.msg{margin-top:14px;font-size:14px;min-height:20px}
.msg.err{color:#c0553f}
.msg.ok{color:var(--green)}
.tip{margin-top:20px;font-size:12px;color:#b3b8b5;line-height:1.7}

/* ---------- 主体 ---------- */
.top{
  background:linear-gradient(135deg,var(--green),#3a9d8e);color:#fff;
  padding:calc(env(safe-area-inset-top) + 22px) 20px 24px;
  /* 垫一层不透明底色。首页头图是用内联 background-image 把渐变顶掉的,
     而 background 简写早把背景色重置成了 transparent ——
     顶栏以前会滚走,看不出来;现在它一直在屏幕上,照片没加载出来的那一瞬,
     正文就会从顶栏底下透出来。 */
  background-color:var(--green);
}
.top.slim{padding-bottom:18px}
.top .hi{font-size:22px;font-weight:700}
.top .meta{font-size:13px;opacity:.85;margin-top:2px}
/* 底部导航要留出来,否则最后一张卡被挡住。
   高度用实测的 --ym-tab(见 app.js 的 syncChrome),不再写死 ——
   底栏里「我的」是一颗凸起的大圆钮,真实高度比看上去的一条要高不少。 */
.wrap{padding:4px 14px calc(var(--ym-tab) + 22px)}

/* ---------- 底部导航 ---------- */
.tabbar{
  /* z-index 40:压在详情弹窗(30)**之上**。
     「我的」那颗圆钮是往上凸出底栏 20px 的,底栏若排在弹窗下面,
     凸出来的那一截会被遮罩压暗,点它也只会关掉弹窗而不是切页。
     底栏是全局导航,任何时候都该看得见、点得着。 */
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:flex;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
  max-width:520px;margin:0 auto;
}
.tb{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:8px 0 7px;text-decoration:none;color:#a8b0ad;font-size:11px;
}
.tb .ic{font-size:20px;line-height:1.1;filter:grayscale(1) opacity(.55)}
.tb.on{color:var(--green);font-weight:600}
.tb.on .ic{filter:none}

/* ---------- 首页「下次到店」 ---------- */
.hero{
  background:linear-gradient(135deg,#fff,#f6faf8);border:1px solid #dfeae6;
  border-radius:16px;padding:18px;margin-bottom:12px;text-align:center;
  box-shadow:0 1px 3px rgba(44,138,125,.06);
}
.hero .hl{font-size:13px;color:var(--dim)}
.hero .hd{font-size:28px;font-weight:700;color:var(--green);margin:4px 0 2px}
.hero .hs{font-size:14px;color:var(--gold);font-weight:600}
.hero.late .hd{color:#c0553f}
.hero.late .hs{color:#c0553f}

h2 .more{
  margin-left:auto;font-size:12px;color:var(--green);
  text-decoration:none;font-weight:400;
}

/* ---------- 我的 ---------- */
.mehead{display:flex;align-items:center;gap:14px}
.meav{
  width:52px;height:52px;border-radius:16px;flex:none;
  background:linear-gradient(135deg,var(--green),var(--gold));color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;
}
.men{font-size:17px;font-weight:600}
.mep{font-size:13px;color:var(--dim);margin-top:2px}
.btn.ghost{background:#fff;color:#c0553f;border:1px solid var(--line)}
.card{
  background:var(--card);border-radius:16px;padding:16px;margin-bottom:12px;
  box-shadow:0 1px 3px rgba(44,138,125,.06);
}
h2{font-size:15px;font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:6px}
h2 .n{font-size:12px;color:var(--dim);font-weight:400}
.empty{color:#b3b8b5;font-size:14px;text-align:center;padding:18px 0}

/* 疗程 */
.course{border:1px solid var(--line);border-radius:13px;padding:13px;margin-bottom:10px}
.course:last-child{margin-bottom:0}
.course .r1{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.course .nm{font-weight:600;font-size:15px}
.course .pg{font-size:13px;color:var(--green);font-weight:600;white-space:nowrap}
.bar{height:6px;background:#eef2f0;border-radius:3px;margin:9px 0 7px;overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--green),var(--gold));border-radius:3px}
.course .nx{font-size:13px;color:var(--dim)}
.course.done{opacity:.6}
.done-tag{
  font-size:11px;background:#eef2f0;color:var(--dim);padding:2px 8px;border-radius:9px;
}

/* 服务记录 */
.svc{padding:12px 0;border-bottom:1px solid var(--line)}
.svc:last-child{border-bottom:0;padding-bottom:0}
.svc:first-child{padding-top:0}
.svc .r1{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.svc .pj{font-weight:600;font-size:15px}
.svc .dt{font-size:13px;color:var(--dim);white-space:nowrap}
.svc .kv{font-size:13px;color:#5c6764;margin-top:5px}
.svc .kv b{color:var(--dim);font-weight:400;margin-right:5px}

/* 照片 */
.pairs{display:flex;flex-direction:column;gap:14px}
.pair .ph{font-size:13px;color:var(--dim);margin-bottom:7px}
.shots{display:grid;grid-template-columns:1fr 1fr;gap:8px}
/* pad 拍出来一般是横幅,对比照按 4:3 显示,点开看完整原图 */
.shot{position:relative;border-radius:11px;overflow:hidden;background:#eef2f0;aspect-ratio:4/3}
.shot img{width:100%;height:100%;object-fit:cover;display:block}
.shot .tag{
  position:absolute;left:7px;top:7px;font-size:11px;padding:2px 8px;border-radius:9px;
  background:rgba(0,0,0,.5);color:#fff;backdrop-filter:blur(2px);
}
.shot.after .tag{background:rgba(201,168,106,.9)}

/* 回访 */
.fu{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.fu:last-child{border-bottom:0}
.fu .d{color:var(--dim);font-size:13px;white-space:nowrap;padding-top:1px}
.fu .b{flex:1}
.fu .st{font-size:11px;padding:1px 8px;border-radius:9px;background:#eef2f0;color:var(--dim)}
.fu .st.p{background:rgba(201,168,106,.16);color:#9a7c3e}
.fu .rs{color:#5c6764;font-size:13px;margin-top:3px}

.foot{text-align:center;color:#b3b8b5;font-size:12px;padding:16px 0 0;line-height:1.8}

/* 看大图 */
.viewer{
  position:fixed;inset:0;background:rgba(0,0,0,.92);display:flex;
  align-items:center;justify-content:center;z-index:50;padding:16px;
  /* 看大图时同理:整屏都是遮罩,拖动不该把底下的列表带跑 */
  touch-action:none;overscroll-behavior:none;
}
.viewer img{max-width:100%;max-height:100%;object-fit:contain}

/* ==================== 对外门户 ==================== */
.top.hero{
  padding:calc(env(safe-area-inset-top) + 34px) 20px 6px;
  background:linear-gradient(135deg,var(--green) 0%,#3a9d8e 55%,var(--gold) 160%);
  text-align:center;
}
.top.hero .brand{font-size:26px;font-weight:700;letter-spacing:1px}
.top.hero .slogan{font-size:14px;opacity:.9;margin-top:6px}
.top.hero .org{font-size:12px;opacity:.75;margin-top:6px}
.top.slim{display:flex;align-items:center;gap:6px}
.top .back{color:#fff;font-size:26px;line-height:1;text-decoration:none;padding:0 4px 3px 0}
.wrap.nobar{padding-bottom:40px}

/* 首页「下次到店」 */
.visit{
  display:block;text-decoration:none;color:inherit;
  background:#fff;border-radius:16px;padding:16px 18px;margin-bottom:12px;
  box-shadow:0 1px 3px rgba(44,138,125,.08);border-left:4px solid var(--green);
}
.visit .vl{font-size:13px;color:var(--dim)}
.visit .vd{font-size:24px;font-weight:700;color:var(--green);margin:3px 0 1px}
.visit .vs{font-size:13px;color:var(--gold);font-weight:600}
.visit.late{border-left-color:#c0553f}
.visit.late .vd,.visit.late .vs{color:#c0553f}

/* 项目卡:两列 */
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ccard{
  display:block;text-decoration:none;color:inherit;
  border:1px solid var(--line);border-radius:13px;overflow:hidden;background:#fff;
}
.ccard img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.ccard .noimg{
  width:100%;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;
  font-size:30px;background:#eef4f2;
}
.ccard .cc-b{padding:9px 10px}
.ccard .cc-t{font-size:14px;font-weight:600;line-height:1.4}
.ccard .cc-s{
  font-size:12px;color:var(--dim);margin-top:2px;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* 专家:首页横滑 */
/* 首页专家:一行三位的网格,竖向人像矩形(3:4)。
   原来是圆形头像 + 横向滑动 —— 圆形会把方形/横向照片裁掉大半,
   横滑又让第三位之后的人看不见。改成固定 3:4 后与详情页比例一致。
   object-position 略偏上:人像照里脸通常在上半部,居中裁会切到额头。 */
.erow{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ecard{text-align:center;text-decoration:none;color:inherit;min-width:0}
.ecard img,.ecard .noimg{
  width:100%;aspect-ratio:3/4;border-radius:10px;object-fit:cover;
  object-position:center 22%;display:block;background:#eef4f2;
}
.ecard .noimg{display:flex;align-items:center;justify-content:center;font-size:32px}
.ecard .ec-n,.ecard .ec-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ---------- 详情页统一版式 ----------
   全平台的详情页(专家 / 项目 / 商品)用同一套:**小图在左,文字在右**。
   原先图片居中占满一行,一张图就吃掉小半屏,名字和要点全被顶到下面去,
   顾客得先往下翻一段才知道自己点进来的是什么。
   缩到 108px 宽之后,右边空出来的那块正好放标题、一句话说明和一条要点,
   一眼就看全 —— 图还在,但不再是主角。 */
.dhead{display:flex;gap:13px;align-items:flex-start}
.dh-img{
  width:108px;flex:none;aspect-ratio:3/4;object-fit:cover;object-position:center 22%;
  border-radius:12px;display:block;background:#eef4f2;
}
/* 项目配图多是横构图(设备、环境),换 4:3 并放宽一点;人像和商品仍是 3:4 */
.dh-img.wide{aspect-ratio:4/3;width:126px;object-position:center}
.dh-img.noimg{
  display:flex;align-items:center;justify-content:center;font-size:34px;color:#b9c4c0;
}
.dh-b{flex:1;min-width:0}
.dh-n{font-size:18px;font-weight:700;line-height:1.35}
.dh-t{font-size:12px;color:var(--gold);font-weight:400;margin-left:6px;white-space:nowrap}
.dh-s{font-size:13px;color:var(--dim);margin-top:5px;line-height:1.6}
/* 图片右侧的要点:一行小灰标签,底下一行正文。放最要紧的那一条 ——
   专家放擅长、项目放单次价、商品放库存。 */
.dh-k{margin-top:9px;font-size:13px;line-height:1.6;color:#4a5350}
.dh-k b{display:block;font-size:11px;color:var(--dim);font-weight:400;margin-bottom:1px}
.dh-k .pz{font-size:18px;font-weight:700;color:var(--gold);line-height:1.25}

.ecard .ec-n{font-size:13px;font-weight:600;margin-top:7px}
.ecard .ec-t{font-size:11px;color:var(--dim);margin-top:1px}

/* 专家:列表页整行 */
.erow-item{
  display:flex;align-items:center;gap:13px;padding:12px 0;
  border-bottom:1px solid var(--line);text-decoration:none;color:inherit;
}
.erow-item:last-child{border-bottom:0}
.erow-item img,.erow-item .noimg{
  width:56px;height:56px;border-radius:14px;object-fit:cover;flex:none;background:#eef4f2;
}
.erow-item .noimg{display:flex;align-items:center;justify-content:center;font-size:24px}
.ei-b{flex:1;min-width:0}
.ei-n{font-size:15px;font-weight:600}
.ei-t{font-size:12px;color:var(--gold);font-weight:400;margin-left:4px}
.ei-s{font-size:13px;color:var(--dim);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 详情页 */
.dt-n{font-size:19px;font-weight:700}
.dt-tag{font-size:12px;color:var(--gold);font-weight:400;margin-left:6px}
.dt-s{font-size:14px;color:var(--dim);margin-top:4px}
.rich p{font-size:14px;line-height:1.9;color:#4a5350;margin-bottom:8px}
.rich p:last-child{margin-bottom:0}
.kv{font-size:14px;margin-top:8px;color:#4a5350}
.kv b{color:var(--dim);font-weight:400;margin-right:8px;font-size:13px}
.kv a{color:var(--green);text-decoration:none}

/* 我的:入口行 */
.list-item{
  display:flex;align-items:center;gap:12px;padding:13px 0;
  border-bottom:1px solid var(--line);text-decoration:none;color:inherit;
}
.list-item.last,.list-item:last-child{border-bottom:0}
.li-ic{font-size:22px;width:30px;text-align:center;flex:none}
.li-b{flex:1;min-width:0}
.li-b .t{font-size:15px;font-weight:600}
.li-b .s{font-size:13px;color:var(--dim);margin-top:1px}
.li-arrow{color:#c8cfcc;font-size:20px;flex:none}

/* 未登录时首页的登录引导 */
.login-cta{text-align:center;line-height:1.8}
.login-cta .btn{margin-top:14px;display:block;text-decoration:none;text-align:center}
.card .btn{display:block;text-decoration:none;text-align:center}
.auth-back{
  position:absolute;left:18px;top:18px;font-size:14px;
  color:var(--dim);text-decoration:none;
}
.auth{position:relative}


.top.hero.tapable{cursor:pointer}
.top.hero .brand .bi{font-size:14px;opacity:.8;margin-left:6px;vertical-align:middle}


/* ---------- 顶栏右上角的登录入口 ----------
   只往已确认正常的顶栏上叠一个绝对定位的角标,不改动 .top / .top.hero 原有规则。 */
/* ---------- 顶栏固定 ----------
   所有页面的顶栏都钉在最上面:返回箭头、页面标题、右上角的「登录 / 我的」,
   翻到哪儿都在,不用为了退回去先滚到顶。
   用 sticky 不用 fixed,两个原因:
   1. sticky 还留在文档流里,下面的内容不需要额外垫 padding-top ——
      顶栏高度本来就不是一个数(首页那张头图比详情页的窄条高一倍),垫多少都有一边不对;
   2. 详情页是装在弹窗(.dlg-body)里的,它自己会滚。sticky 认最近的滚动容器,
      在弹窗里就吸在弹窗内容的顶上;换成 fixed 会直接飞到整个屏幕的顶端,盖住外面那一层。
   z-index 15:压得住页面内容,又在底部导航(20)、弹窗(30)、看大图(50)之下。
   首页那张头图也一样整块钉住,不收缩、不替换。 */
.top{
  position:sticky;
  top:0;
  z-index:15;
  /* 顶栏一律直角。CSS 里本来就没有圆角规则落在它上面,这里显式钉死,
     防止以后新增的通用规则(或浏览器默认样式)意外把它圆角化。 */
  border-radius:0;
}
.top-login,.top-me{
  position:absolute;right:14px;top:calc(env(safe-area-inset-top) + 14px);
  font-size:13px;line-height:1.4;text-decoration:none;color:#fff;z-index:1;
  background:rgba(255,255,255,.22);padding:6px 13px;border-radius:15px;
  max-width:42%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.top-me{background:rgba(255,255,255,.16)}

/* 项目卡上的价格 */
.ccard .cc-p{font-size:13px;color:var(--gold);font-weight:600;margin-top:4px}
.kv b.pz{color:var(--gold);font-weight:600;margin:0}

/* 价目表 */
.prow{display:flex;align-items:flex-start;gap:12px;padding:12px 0;
  border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.prow:last-child{border-bottom:0}
.pn{flex:1;font-size:15px;font-weight:600;min-width:0}
.pn .ps{display:block;font-size:12px;color:var(--dim);font-weight:400;margin-top:2px}
.pv{text-align:right;flex:none}
.pv .p1{font-size:15px;font-weight:700;color:var(--gold)}
.pv .p2{font-size:12px;color:var(--dim);margin-top:2px}

/* 预约日历 */
.bmonth{display:flex;align-items:center;justify-content:space-between;font-weight:600;margin-bottom:10px}
.bweek{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;font-size:11px;
  color:var(--dim);text-align:center;margin-bottom:4px}
.bgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.bc{border:1px solid var(--line);border-radius:9px;padding:5px 2px 4px;text-align:center;
  cursor:pointer;background:#fff}
.bc.blank{border:0;background:transparent}
.bc.dis{opacity:.32;background:#f4f6f5;cursor:default}
.bc.sel{background:var(--green);border-color:var(--green);color:#fff}
.bc-d{font-size:14px;font-weight:600;line-height:1.3}
.bc-t{font-size:10px;color:var(--green);line-height:1.4;min-height:14px}
.bc.sel .bc-t{color:#fff}
.bhint{font-size:12px;color:var(--dim);margin-top:10px;text-align:center}
.btn[disabled]{background:#c3cdc9}

/* ---------- 头图原色 + 文字投影 ----------
   原先给头图压了一层深色蒙版保证白字可读,代价是整张照片发灰。
   改成不压蒙版、只给文字加投影:照片保持原色,字仍然清楚。 */
.top.hero .brand,
.top.hero .slogan,
.top.hero .org{
  text-shadow:0 1px 3px rgba(0,0,0,.5), 0 0 10px rgba(0,0,0,.35);
}
/* 右上角登录按钮改成半透明深色:浅色照片上白色半透明会糊成一片 */
.top-login,.top-me{background:rgba(0,0,0,.3);text-shadow:0 1px 2px rgba(0,0,0,.4)}
.top .back{text-shadow:0 1px 3px rgba(0,0,0,.5)}

/* ================= 预约:打磨 =================
   之前 .chip / .chips 根本没有样式规则 —— 选专家、选上午/下午的那几个
   <span> 在手机上就是一串挤在一起的普通文字,既看不出可以点,也看不出
   选中了哪个。这是预约页最要命的一处。 */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:38px;padding:0 16px;border-radius:19px;
  border:1px solid var(--line);background:#fbfcfc;color:var(--ink);
  font-size:14px;line-height:1.2;cursor:pointer;user-select:none;
  transition:background .12s,border-color .12s,color .12s;
}
.chip:active{transform:scale(.97)}
.chip.on{
  background:var(--green);border-color:var(--green);color:#fff;font-weight:600;
  box-shadow:0 2px 8px rgba(44,138,125,.28);
}
.chip.wide{flex:1;min-width:0}
.chip .ct{font-size:11px;opacity:.7;margin-left:6px;font-weight:400}
.chip.on .ct{opacity:.9}

/* 分步小标题:让顾客一眼知道还剩几步 */
h2 .step{
  width:20px;height:20px;border-radius:50%;flex:none;
  background:var(--green);color:#fff;font-size:12px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;
}
h2 .step.wait{background:#d3dbd8}
h2 .pickv{margin-left:auto;font-size:13px;color:var(--dim);font-weight:400}

/* 项目选择器 */
.pick{border-top:1px solid var(--line);margin-top:12px;padding-top:6px}
.pickrow{
  display:flex;align-items:center;gap:10px;padding:11px 2px;
  border-bottom:1px solid var(--line);cursor:pointer;font-size:14px;
}
.pickrow:last-child{border-bottom:0}
.pickrow .pt{flex:1;min-width:0}
.pickrow .pt b{display:block;font-weight:600}
.pickrow .pt span{display:block;font-size:12px;color:var(--dim);margin-top:1px}
.pickrow .pk{color:var(--green);font-weight:700;font-size:16px;flex:none}
.pickrow.on{color:var(--green)}
.sel-line{font-size:15px;font-weight:600}
.sel-line .sub{display:block;font-size:12px;color:var(--dim);font-weight:400;margin-top:2px}
.linkline{display:flex;align-items:center;gap:8px;cursor:pointer}
.linkline .arw{margin-left:auto;color:var(--dim);flex:none}

/* 日历:加上"今天"与周末的区分,再补上加载/空月份的状态 */
.bc.today{border-color:var(--gold)}
.bc.today .bc-d{color:var(--gold)}
.bc.sel .bc-d,.bc.sel.today .bc-d{color:#fff}
.bc.wknd .bc-d{color:#c0553f}
.bc.dis.wknd .bc-d,.bc.sel.wknd .bc-d{color:inherit}
.bc.sel{box-shadow:0 2px 8px rgba(44,138,125,.3)}
.bskel{
  height:212px;border-radius:10px;
  background:linear-gradient(100deg,#f2f5f4 30%,#e9eeec 50%,#f2f5f4 70%);
  background-size:220% 100%;animation:sk 1.1s linear infinite;
}
@keyframes sk{from{background-position:120% 0}to{background-position:-20% 0}}
.bempty{
  text-align:center;color:var(--dim);font-size:13px;line-height:1.9;
  padding:26px 10px;background:#f8faf9;border-radius:12px;
}
.bempty b{display:block;color:var(--ink);font-size:15px;margin-bottom:4px}
.bnotice{
  background:rgba(201,168,106,.13);color:#8a6d2f;border-radius:10px;
  padding:9px 12px;font-size:13px;line-height:1.6;margin-bottom:12px;
}
.slotwrap{border-top:1px solid var(--line);margin-top:14px;padding-top:14px}
.slotwrap .sh{font-size:14px;font-weight:600;margin-bottom:10px}
.slotwrap .sh em{font-style:normal;color:var(--green)}
.bmonth .btn.mini[disabled]{opacity:.35}

/* 底部常驻操作条:选了什么、还差什么、去哪点,始终在眼前,
   不必为了看一眼按钮把整页滚到底。 */
.wrap.bk{padding-bottom:calc(env(safe-area-inset-bottom) + 146px)}
.bbar{
  position:fixed;left:0;right:0;bottom:0;z-index:25;max-width:520px;margin:0 auto;
  background:rgba(255,255,255,.97);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
  padding:10px 14px calc(env(safe-area-inset-bottom) + 58px);
  display:flex;align-items:center;gap:12px;
}
.bbar .bs{flex:1;min-width:0;font-size:13px;line-height:1.45}
.bbar .bs b{display:block;font-size:15px;font-weight:700;color:var(--green)}
.bbar .bs span{color:var(--dim)}
.bbar .btn{width:auto;flex:none;padding:13px 26px;font-size:15px}
.bbar .msg{position:absolute;left:14px;right:14px;top:-26px;margin:0;
  font-size:13px;min-height:0;text-align:center;
  background:#fff;border-radius:8px;padding:3px 0;box-shadow:0 1px 6px rgba(0,0,0,.1)}
.bbar .msg:empty{display:none}

/* 提交成功 */
.okhead{text-align:center;padding:8px 0 4px}
.okhead .ico{
  width:62px;height:62px;border-radius:50%;margin:0 auto 12px;
  background:var(--green);color:#fff;font-size:32px;
  display:flex;align-items:center;justify-content:center;
  animation:pop .32s cubic-bezier(.2,1.4,.5,1);
}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
.okhead .t{font-size:19px;font-weight:700}
.okhead .s{font-size:13px;color:var(--dim);margin-top:5px;line-height:1.7}
.okwhen{
  text-align:center;background:linear-gradient(135deg,#f2faf8,#f9f7f2);
  border:1px solid #dfeae6;border-radius:14px;padding:16px;margin:14px 0 4px;
}
.okwhen .d{font-size:26px;font-weight:700;color:var(--green)}
.okwhen .s{font-size:14px;color:var(--gold);font-weight:600;margin-top:3px}
.okwhen .h{font-size:12px;color:var(--dim);margin-top:5px}

/* 我的预约 */
.acard{
  border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:10px;
  border-left:3px solid var(--green);
}
.acard:last-child{margin-bottom:0}
.acard.past{border-left-color:#d8dedc;opacity:.62}
.acard .a1{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.acard .ad{font-size:17px;font-weight:700}
.acard .aw{font-size:13px;color:var(--gold);font-weight:600;margin-left:auto}
.acard .a2{font-size:14px;color:#5c6764;margin-top:5px}
.acard .a3{font-size:12px;color:var(--dim);margin-top:5px;line-height:1.7}
.acard .st{font-size:11px;padding:2px 9px;border-radius:9px;background:#eef2f0;color:var(--dim)}
.acard .st.p{background:rgba(201,168,106,.18);color:#9a7c3e}
.acard .st.k{background:rgba(44,138,125,.14);color:var(--green)}
.acard .arow{display:flex;gap:8px;margin-top:11px}
.acard .arow .btn.mini{padding:8px 14px}
.appt-link{
  display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;
  background:linear-gradient(135deg,#fff,#f6faf8);border:1px solid #dfeae6;
  border-left:3px solid var(--gold);
  border-radius:16px;padding:14px 16px;margin-bottom:12px;
  box-shadow:0 1px 3px rgba(44,138,125,.06);
}
.appt-link .al{flex:1;min-width:0}
.appt-link .a-l{font-size:12px;color:var(--dim)}
.appt-link .a-d{font-size:19px;font-weight:700;color:var(--green);margin:2px 0 1px}
.appt-link .a-s{font-size:13px;color:#5c6764}
.appt-link .a-g{font-size:13px;color:var(--gold);font-weight:600;flex:none;text-align:right}
/* 「致电顾问」是个 <a>,不给 flex 就没有高度,和旁边的按钮对不齐 */
a.btn.mini{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}

/* ---------- 详情弹窗 ----------
   上不盖顶栏、下不盖底部导航。看一个项目不该把整个门户推走 ——
   退出来还要重新加载、滚动位置也丢了。 */
/* 这两个数都由 app.js 的 syncChrome() 当场量出来写进来。
   下面这组只是首帧还没量到时的兜底 —— **别在这里写"正确值"**:
   顶栏首页和详情页不一样高,底栏的高度取决于「我的」那颗凸起圆钮和
   iPhone 底部的 home 条,写死哪个数都有一边不对。
   (--ym-tab 之前就是写死的 56px,而底栏实际约 74px,
    于是遮罩每次都往下多压将近 20px,压在底栏上。) */
:root{--ym-top:84px;--ym-tab:74px}
.dlg-mask{
  /* 从顶栏下面开始、到底栏上面结束:两条栏都露在遮罩外面,没有被压暗。
     原先是 top:0 盖满整屏再用 padding 把面板压下去 —— 面板是没压着顶栏,
     但顶栏罩在暗色遮罩底下,看着就是被盖住了。 */
  position:fixed;left:0;right:0;
  /* --ym-tab 量的是底栏的 offsetHeight,里面已经含了 iPhone 底部 home 条那段
     padding,所以这里**不能**再加一次 env(safe-area-inset-bottom) —— 加了就是重复。 */
  top:var(--ym-top);bottom:var(--ym-tab);
  z-index:30;background:rgba(20,34,31,.44);
  display:flex;align-items:stretch;justify-content:center;
  padding:10px;
  /* 暗区上不产生任何滚动手势 —— 在这儿拖动本来就什么都不该发生,
     不加的话手指一划就把背后那一页拖走了 */
  touch-action:none;overscroll-behavior:none;
  max-width:520px;margin:0 auto;
  animation:ymDlgIn .16s ease-out;
}
@keyframes ymDlgIn{from{opacity:0}to{opacity:1}}
.dlg{
  background:var(--bg);width:100%;height:100%;border-radius:16px;overflow:hidden;
  display:flex;flex-direction:column;box-shadow:0 14px 44px rgba(0,0,0,.3);
  animation:ymDlgUp .2s cubic-bezier(.2,.9,.3,1);
}
@keyframes ymDlgUp{from{transform:translateY(16px);opacity:.4}to{transform:none;opacity:1}}
/* overscroll-behavior:contain 是关键的一条:弹窗内容滚到头之后,手指继续拖,
   浏览器默认会把这一段"接力"给背后的页面(scroll chaining),于是详情页没动、
   背景却在动。contain 就是不许这个接力越过弹窗边界。
   overflow-y 用 scroll 而不是 auto:内容短到不需要滚动时,auto 会让它根本不算
   一个滚动容器,contain 也就无从生效 —— 而"内容短"恰恰是最容易把背景拖走的情况。 */
.dlg-body{
  flex:1;min-height:0;overflow-y:scroll;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  scrollbar-width:none;
}
.dlg-body::-webkit-scrollbar{width:0;height:0}

/* ---------- 弹窗底部的动作区 ----------
   按钮直接坐在弹窗底边上,**不再套一张白卡** —— 白卡是多出来的一层框,
   按钮下面还压着一截白边,看着啰嗦。
   .dlg-body 是 flex:1、这里是 flex:none:所以不管这一页内容多少,
   中间那块始终撑满整个弹窗,按钮永远停在同一个位置,
   不会因为内容少就浮在半空、每页还停在不同高度。 */
.dlg-foot{flex:none;padding:2px 14px 14px;background:var(--bg)}
.dlg-foot:empty{display:none}
.dlg-foot .btn + .btn{margin-top:10px}
/* .btn.ghost 默认是暗红的(给"取消预约"用),动作区里的次要按钮不是危险操作 */
.dlg-foot .btn.ghost{color:var(--green)}
.dlg-foot .msg{margin:0 0 10px;min-height:0;text-align:center;font-size:13px}
.dlg-foot .msg:empty{display:none}
/* 详情自带的顶栏在弹窗里就是弹窗的标题栏,安全区留白交给弹窗自己 */
.dlg-body .top.slim{padding-top:16px;padding-bottom:14px;border-radius:0}
.dlg-body .wrap{padding-bottom:16px}

/* ---------- 会员与积分 ---------- */
.memcard{
  display:block;text-decoration:none;color:inherit;
  background:linear-gradient(135deg,#2c8a7d,#3a9d8e);color:#fff;
  border-radius:16px;padding:16px 18px;margin-bottom:12px;
  box-shadow:0 4px 16px rgba(44,138,125,.25);
}
.mm-h{font-size:13px;letter-spacing:.5px;opacity:.85;display:flex;gap:8px}
.mm-h span{margin-left:auto;background:rgba(255,255,255,.2);padding:1px 9px;border-radius:9px}
.mm-p{font-size:34px;font-weight:700;line-height:1.15;margin-top:6px}
.mm-p i{font-style:normal;font-size:13px;font-weight:400;opacity:.8;margin-left:6px}
.mm-s{font-size:12px;opacity:.85;margin-top:2px;display:flex}
.mm-s span{margin-left:auto}
.ptop{text-align:center;background:linear-gradient(135deg,#f2faf8,#f9f7f2);border:1px solid #dfeae6}
.pt-n{font-size:13px;color:var(--dim);letter-spacing:.5px}
.pt-n span{margin-left:8px;color:var(--gold);font-weight:600}
.pt-p{font-size:44px;font-weight:700;color:var(--green);line-height:1.15;margin-top:4px}
.pt-p i{font-style:normal;font-size:15px;font-weight:400;color:var(--dim);margin-left:6px}
.pt-e{font-size:13px;color:var(--dim)}
.plog{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.plog:last-of-type{border-bottom:0}
.pl-d{font-size:17px;font-weight:700;min-width:62px;text-align:right;flex:none}
.pl-d.up{color:var(--green)}
.pl-d.down{color:#c0553f}
.pl-b{flex:1;min-width:0}
.pl-t{font-size:14px;font-weight:600}
.pl-s{font-size:13px;color:#5c6764;margin-top:2px}
.pl-m{font-size:11px;color:var(--dim);margin-top:3px}

/* ---------- 积分商城 ---------- */
.shopbal{
  display:block;text-decoration:none;color:#fff;
  background:linear-gradient(135deg,var(--green),#3a9d8e);
  border-radius:16px;padding:14px 18px;margin-bottom:12px;font-size:14px;
  box-shadow:0 4px 16px rgba(44,138,125,.22);
}
.shopbal b{font-size:26px;font-weight:700;margin-left:6px}
.shopbal span{display:block;font-size:12px;opacity:.85;margin-top:2px}
.shopbal.plain{background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:none}
.shopbal.plain span{color:var(--dim);opacity:1}
.ccard .cc-x{font-size:11px;color:#c0553f;margin-top:3px}

/* ---------- 底栏正中间的「我的」 ----------
   做成凸起的圆钮:老顾客每次打开最先点的就是这里(疗程、积分、兑换单),
   排在角落里每次都要找。圆钮向上凸出栏外,所以 .tabbar 不能裁剪溢出。 */
.tabbar{overflow:visible}
.tb.big{font-size:12px;font-weight:600;color:var(--green)}
.tb.big .ic{
  width:52px;height:52px;border-radius:50%;margin-top:-20px;margin-bottom:1px;
  background:linear-gradient(135deg,var(--green),var(--gold));color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:25px;
  box-shadow:0 5px 16px rgba(44,138,125,.4);
  filter:none;   /* 覆盖 .tb .ic 的灰度,这颗永远是彩色的 */
  border:3px solid #fff;box-sizing:content-box;
}
.tb.big.on .ic{box-shadow:0 5px 20px rgba(44,138,125,.55)}
.tb.big:active .ic{transform:scale(.94)}

/* ---------- 商城:商品卡与专家卡同一尺寸,一行三个 ----------
   两者都是"一眼扫过去挑一个",排版一致顾客不用重新适应。
   类名从 .prow 改成 .shoprow:.prow 是价目表那一行在用的,
   商城网格白白继承了它的 padding 和下边框 —— 同名不同物,迟早出事。 */
.shoprow{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pcard{position:relative;text-align:center;text-decoration:none;color:inherit;min-width:0;display:block}
.pcard img,.pcard .noimg{
  width:100%;aspect-ratio:3/4;border-radius:10px;object-fit:cover;
  object-position:center;display:block;background:#eef4f2;
}
.pcard .noimg{display:flex;align-items:center;justify-content:center;font-size:32px}
/* 首页那一行商城下面的小字 */
.shoptip{font-size:12px;color:var(--dim);text-align:center;margin-top:10px;line-height:1.7}
.shoptip b{color:var(--gold);font-size:13px}
.pcard .pc-n{
  font-size:13px;font-weight:600;margin-top:7px;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.pcard .pc-p{font-size:13px;color:var(--gold);font-weight:700;margin-top:2px}
.pcard .pc-x{
  position:absolute;left:6px;top:6px;font-size:10px;padding:1px 7px;border-radius:9px;
  background:rgba(0,0,0,.6);color:#fff;
}
.pcard .pc-x.few{background:rgba(201,168,106,.92)}
.pcard.out img{filter:grayscale(1) opacity(.6)}
/* 专家页的卡上多一行擅长,首页那一栏不显示(位置窄,名字和职称够用) */
.ecard .ec-s{
  font-size:11px;color:var(--dim);line-height:1.45;margin-top:3px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  white-space:normal;
}

/* ---------- 商品详情 ----------
   三个数并排:要多少 / 我有多少 / 差多少,一眼看完就能决定。 */
.pd-nums{display:flex;text-align:center;padding:14px 10px}
.pd-c{flex:1;min-width:0;border-right:1px solid var(--line)}
.pd-c:last-child{border-right:0}
.pd-c b{display:block;font-size:24px;font-weight:700;color:var(--green);line-height:1.2}
.pd-c span{display:block;font-size:11px;color:var(--dim);margin-top:3px}
.pd-c.bad b{color:#c0553f}
.pd-c.good b{color:var(--gold)}

/* ---------- 整页式结尾页(预约成功、兑换记录空态)的动作区 ----------
   弹窗式详情页的按钮走 .dlg-foot(钉在弹窗底边);这里是整页,按钮跟在正文后面。
   两边都**不套白卡** —— 白卡是多出来的一层框,按钮下面还压着一截白边。
   也**不做吸底**:吸底那条会一直压在正文上,而且和底部导航叠成两层。 */
.dact{margin-top:2px}
.dact-tip,.pd-tip{
  font-size:12px;color:var(--dim);text-align:center;margin-top:10px;line-height:1.8;
}
.dact .msg{margin:0 0 10px;min-height:0;text-align:center;font-size:13px}
.dact .msg:empty{display:none}
/* 同一张动作卡里的次要按钮。
   .btn.ghost 默认是暗红的 —— 它平时用在"取消预约"这类地方。
   动作卡里的次要按钮是"再去看看别的",不是危险操作,所以在这个范围内改回主色,
   免得每处都挂一个 style="color:..." 的内联样式。 */
.dact .btn + .btn{margin-top:10px}
.dact .btn.ghost{color:var(--green)}

/* ---------- 我的资料 ---------- */
.mehead-link{display:block;text-decoration:none;color:inherit}
.mehead .li-arrow{margin-left:auto;color:var(--dim)}
.meav-img{width:52px;height:52px;border-radius:16px;object-fit:cover;flex:none;background:#eef4f2}
.pf-av{
  width:88px;height:88px;border-radius:50%;object-fit:cover;margin:0 auto;display:block;
  background:#eef4f2;border:3px solid #fff;box-shadow:0 3px 12px rgba(44,138,125,.2);
}
.pf-av.ph{
  display:flex;align-items:center;justify-content:center;font-size:34px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,var(--green),var(--gold));
}
.pf-avt{font-size:12px;color:var(--green);margin-top:8px}
/* 底栏中间那颗圆钮换成头像 */
.tb.big .ic.av{padding:0;overflow:hidden;background:#eef4f2}
.tb.big .ic.av img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- 下单面板 ---------- */
.buy{border:1px solid var(--line);border-radius:12px;padding:12px;background:#fff;margin-bottom:10px}
.buy-r{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:14px}
.buy-r > span{color:var(--dim);font-size:13px;min-width:56px}
.buy-r .chips{flex:1;justify-content:flex-end}
.qty{margin-left:auto;display:flex;align-items:center;gap:14px}
.qty b{font-size:17px;min-width:24px;text-align:center}
.qb{
  width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:#fff;
  font-size:18px;line-height:1;color:var(--ink);cursor:pointer;font-family:inherit;
}
.qb[disabled]{opacity:.35;cursor:default}
.buy-addr{
  background:#f6faf8;border-radius:10px;padding:10px 12px;font-size:13px;line-height:1.6;
  margin-bottom:10px;position:relative;
}
.buy-addr a{position:absolute;right:10px;top:10px;color:var(--green);font-size:12px;text-decoration:none}
.buy-addr.none{display:block;color:#c0553f;text-decoration:none;background:rgba(192,85,63,.07)}
.buy-addr.plain{color:var(--dim)}
.buy input{font-size:14px;padding:10px 12px}
.buy-sum{display:flex;align-items:baseline;font-size:14px;margin-top:10px}
.buy-sum b{font-size:22px;color:var(--gold);font-weight:700;margin:0 3px}
.buy-sum span{margin-left:auto;font-size:12px;color:var(--dim)}