/* ═══════════════════════════════════════════════
   小能上门 · UI 3.0 设计系统（照搬 Figma《上门体育》）
   绿色清新系：青绿主色 + 浅黄标签 + 红心点赞 + 白卡大圆角 + 极浅阴影
   色值来源：Figma 稿截图实测（docs/refs/figma-shangmen/DESIGN-v2-draft.md）
   兼容策略：保留 UI 2.0 全部类名，同名换值 → 五端立即换肤
   ═══════════════════════════════════════════════ */
:root{
  /* 品牌 · 青绿 */
  --brand:#8AE4CC; --brand-2:#94F6B8; --brand-3:#4FD0AE;
  --brand-deep:#1D2C3F; --brand-soft:#E8F8F4; --brand-line:#C9F0DE;
  /* 兼容旧名（五端在用 --navy*）→ 指向品牌深绿 */
  --navy:#1D2C3F; --navy2:#24374E; --navy3:#131F2D;
  /* 行动橙（设计稿：标签/价格用浅黄底橙字）*/
  --orange-a:#FFB65C; --orange-b:#FF8F2E; --orange-text:#FF7C22;
  --orange-bg:#FFF1E3; --orange-line:#FFD9B8; --orange-deep:#D4600A;
  --gold:#FFC24D; --gold2:#F0A020;
  /* 互动红（点赞）*/
  --like:#FF4D4F; --like-soft:#FFEDED;
  /* 语义 */
  --ok:#12996F; --ok2:#1D2C3F; --ok-bg:#E8FAF5;
  --danger:#E5484D; --danger-bg:#FDECEC;
  --info:#2F6FED; --info-bg:#EBF2FF; --info-line:#D8E4FF;
  /* 中性（设计稿：#141414 主文字 / #7C7C7C 次 / #D4D4DC 线）*/
  --bg:#F4F8FC; --bg2:#EFF4F7; --bg3:#F4F8FC;
  --card:#fff; --line:#EDEFF2; --line-s:#D4D6DC;
  --txt1:#141414; --txt2:#4A5056; --txt3:#7C7C7C; --txt4:#A8ADB3;
  /* 圆角（卡片大圆角，按钮胶囊）*/
  --r6:6px; --r10:10px; --r12:12px; --r14:14px; --r16:16px; --r18:18px; --r-pill:999px;
  /* 阴影（极浅，靠白卡与浅底分层）*/
  --sh1:0 1px 2px rgba(16,24,40,.04), 0 2px 8px rgba(16,24,40,.04);
  --sh2:0 6px 18px rgba(16,24,40,.08);
  --sh3:0 12px 32px rgba(16,24,40,.14);
  --sh-brand:0 6px 16px rgba(63,201,165,.28);
  /* 动效 */
  --dur:180ms; --ease:cubic-bezier(.2,0,0,1);
  /* 字体（中文一律系统栈，零体积）*/
  --fs:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Segoe UI",sans-serif;
  /* 字号层级 */
  --fs-h1:18px; --fs-h2:17px; --fs-h3:15.5px; --fs-body:14px; --fs-sub:13px; --fs-cap:11.5px;

  /* 兼容缺失 token（历史遗留引用：--orange/--orange2/--sub/--txt/--green）*/
  --orange:#FF8F2E; --orange2:#FF8F2E; --sub:#7C7C7C; --txt:#141414; --green:#8AE4CC;
}
html{font-size:14px}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{background:var(--bg);font-family:var(--fs);color:var(--txt1);line-height:1.6;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
button{font-family:inherit;cursor:pointer;border:none;background:none;transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease)}
button:active{transform:scale(.96)}
input,select,textarea{font-family:inherit;outline:none}
.num, .tabular{font-variant-numeric:tabular-nums}
.hidden{display:none!important}
::placeholder{color:var(--txt4)}

/* ── 顶栏（照搬：浅色顶栏 + 深色文字）── */
.sm-brand{position:sticky;top:0;z-index:70;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--txt1);border-bottom:1px solid var(--line)}
.sm-brand-in{max-width:480px;margin:0 auto;display:flex;align-items:center;gap:8px;padding:11px 14px}
.sm-logo{font-size:18px;font-weight:700;letter-spacing:.2px;white-space:nowrap;color:var(--txt1)}
.sm-logo b{color:var(--brand-deep)}
.sm-tag{font-size:10.5px;background:var(--brand-soft);border:1px solid var(--brand-line);border-radius:var(--r-pill);padding:1px 7px;color:var(--brand-deep);font-weight:700;letter-spacing:.5px;white-space:nowrap}
.sm-brand-sub{font-size:11.5px;color:var(--txt3);margin-top:1px;letter-spacing:.3px}
.sm-flex1{flex:1}

/* ── 卡片（白卡 + 大圆角 + 极浅阴影）── */
.sm-card{background:var(--card);border-radius:var(--r16);padding:14px;box-shadow:var(--sh1)}
.sm-card.fl{box-shadow:var(--sh2)}
.sm-card:active{transform:scale(.99)}

/* ── 按钮（主按钮=品牌青绿胶囊）── */
.sm-btn{display:flex;align-items:center;justify-content:center;gap:6px;border-radius:var(--r-pill);font-weight:700;padding:12px 18px;font-size:14px;min-height:46px}
.sm-btn:disabled{opacity:.45;box-shadow:none}
.sm-btn-orange{background:linear-gradient(105deg,var(--brand),var(--brand-2));color:#fff;box-shadow:var(--sh-brand)}
.sm-btn-orange:active{transform:scale(.96);box-shadow:0 3px 10px rgba(63,201,165,.3)}
.sm-btn-dark{background:var(--brand-deep);color:#fff}
.sm-btn-dark:active{transform:scale(.96)}
.sm-btn-ghost{background:#fff;border:1.5px solid var(--line-s);color:var(--txt2)}
.sm-btn-ghost:active{transform:scale(.96)}
.sm-btn-brand{background:linear-gradient(105deg,var(--brand),var(--brand-2));color:#fff;box-shadow:var(--sh-brand)}
.sm-btn-sm{min-height:36px;padding:8px 14px;font-size:13px}

/* ── 胶囊/筛选 chip ── */
.sm-chip{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line);background:#fff;border-radius:var(--r-pill);padding:7px 13px;font-size:13px;font-weight:500;color:var(--txt2);white-space:nowrap;min-height:34px}
.sm-chip.on{background:var(--brand-deep);border-color:var(--brand-deep);color:#fff;font-weight:700}
.sm-chip-org{background:var(--orange-bg);border-color:var(--orange-line);color:var(--orange-text);font-weight:700}
.sm-chip:active{transform:scale(.95)}

/* ── 状态徽章（设计稿：浅底 + 同色系文字）── */
.badge{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:700;padding:2px 10px;border-radius:var(--r-pill);white-space:nowrap;line-height:1.7}
.b-ok{background:var(--brand-soft);color:var(--brand-deep)}
.b-org{background:var(--orange-bg);color:var(--orange-text)}
.b-danger{background:var(--danger-bg);color:var(--danger)}
.b-info{background:var(--info-bg);color:var(--info)}
.b-grey{background:var(--bg2);color:var(--txt2)}

/* ── 标签（照搬设计稿的浅黄/浅绿小标签）── */
.tag{display:inline-flex;align-items:center;gap:3px;font-size:11.5px;font-weight:500;padding:3px 8px;border-radius:var(--r6);white-space:nowrap;line-height:1.5}
.tag-y{background:var(--orange-bg);color:var(--orange-text)}
.tag-g{background:var(--brand-soft);color:var(--brand-deep)}
.tag-line{border:1px solid var(--line-s);color:var(--txt2);background:#fff}

/* ── 底部导航（选中=品牌绿 + 绿色指示条）── */
.sm-nav{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:480px;background:rgba(255,255,255,.97);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line);display:flex;z-index:60;padding:5px 6px calc(6px + env(safe-area-inset-bottom))}
.sm-nav button{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11.5px;color:var(--txt4);padding:4px 0;position:relative;font-weight:500}
.sm-nav button.on{color:var(--brand-deep);font-weight:700}
.sm-nav button.on::before{content:'';position:absolute;top:-5px;width:20px;height:3px;border-radius:var(--r-pill);background:linear-gradient(90deg,var(--brand),var(--brand-2))}
.sm-nav .ic{font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center}
.sm-nav svg.ni{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sm-nav button.on svg.ni{fill:currentColor}

/* ── 容器/标题/文字 ── */
.sm-main{max-width:480px;margin:0 auto;padding:12px 12px 96px}
.sm-title{font-size:var(--fs-h2);font-weight:700;margin:16px 0 10px;display:flex;align-items:center;gap:6px}
.sm-muted{color:var(--txt3);font-size:var(--fs-sub)}
.sm-pill-org{display:inline-block;font-size:10.5px;font-weight:700;background:var(--orange-bg);color:var(--orange-text);border-radius:var(--r6);padding:2px 8px}
.sm-price{color:var(--orange-text);font-weight:700;font-variant-numeric:tabular-nums}
.sm-price::before{content:'¥';font-size:.78em;margin-right:1px}
.fee-line{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--txt2);padding:4px 0;gap:8px}
.fee-line b{color:var(--txt1)}
.fee-line.total{border-top:1px dashed var(--line);margin-top:6px;padding-top:9px}
.fee-line.total b{color:var(--orange-text);font-size:18px;font-variant-numeric:tabular-nums}

/* ── 骨架屏（shimmer）── */
.skel{position:relative;overflow:hidden;background:var(--bg2);border-radius:8px}
.skel::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);animation:skm 1.15s linear infinite;transform:translateX(-100%)}
@keyframes skm{100%{transform:translateX(100%)}}

/* ── 弹层/遮罩（淡入 + 上滑 220ms）── */
.sm-mask{position:fixed;inset:0;background:rgba(16,24,40,.45);z-index:90;display:flex;align-items:flex-end;justify-content:center;animation:fadein var(--dur) var(--ease)}
.sm-sheet{background:#fff;width:100%;max-width:480px;border-radius:var(--r18) var(--r18) 0 0;padding:16px 16px calc(16px + env(safe-area-inset-bottom));max-height:74vh;overflow-y:auto;animation:slideup 220ms var(--ease);box-shadow:var(--sh3)}
.sm-sheet h3{font-size:var(--fs-h3);font-weight:700;margin-bottom:12px;display:flex;align-items:center;justify-content:space-between}
.sm-sheet .x{font-size:18px;color:var(--txt3);padding:2px 8px;min-width:40px;min-height:40px;display:flex;align-items:center;justify-content:center}
.sm-row-opt{display:flex;align-items:center;gap:10px;padding:13px 8px;border-bottom:1px solid var(--bg3);font-size:14px;min-height:48px}
.sm-row-opt:last-child{border-bottom:none}
.sm-row-opt .ok{color:var(--brand-3);font-weight:700;margin-left:auto}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes slideup{from{transform:translateY(40px);opacity:.6}to{transform:translateY(0);opacity:1}}

/* ── 弹层退场（与入场成对）：JS 关闭时给遮罩加 .out，动画结束后再 remove ──
   入场 .sm-pop/.sm-panel 复用于 JS 动态创建的底部表单（smForm/smPick）与 b.html 弹层 */
@keyframes fadeout{from{opacity:1}to{opacity:0}}
@keyframes slidedown{from{transform:translateY(0);opacity:1}to{transform:translateY(56px);opacity:0}}
.sm-pop{animation:fadein 200ms var(--ease)}
.sm-pop.out{animation:fadeout 160ms var(--ease) forwards}
.sm-panel{animation:slideup 220ms var(--ease)}
.sm-pop.out .sm-panel{animation:slidedown 160ms var(--ease) forwards}
@media (prefers-reduced-motion: reduce){
  .sm-pop,.sm-pop.out,.sm-panel,.sm-pop.out .sm-panel{animation-duration:.01ms!important}
}

/* ── 页面级过渡（showPg）── */
.pg-anim{animation:pgIn 200ms var(--ease)}
@keyframes pgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ── 输入 ── */
.sm-input{width:100%;height:46px;border:1.5px solid var(--line-s);border-radius:var(--r12);padding:0 14px;font-size:14px;background:#fff;color:var(--txt1);transition:border-color 150ms var(--ease),box-shadow 150ms var(--ease)}
.sm-input:focus{border-color:var(--brand-3);box-shadow:0 0 0 3px rgba(95,211,178,.18)}
textarea.sm-input{height:auto;padding:11px 14px;line-height:1.6}

/* ── 空态 ── */
.sm-empty{padding:44px 10px;text-align:center;color:var(--txt3);font-size:13px}
.sm-empty .big{font-size:46px;margin-bottom:8px}
.sm-empty b{display:block;font-size:15px;color:var(--txt1);margin:2px 0 4px;font-weight:700}

/* ── 城市切换 ── */
.sm-citybar{display:flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);border-radius:var(--r-pill);padding:7px 13px;font-size:13px;font-weight:500}
.sm-citybar b{color:var(--brand-deep)}

/* ══ v3 新增组件（照搬 Figma 稿）══════════════════════════ */
/* 分段控件 */
.seg{display:flex;gap:6px;background:var(--bg2);border-radius:var(--r-pill);padding:3px}
.seg button{flex:1;border-radius:var(--r-pill);padding:7px 10px;font-size:13px;font-weight:500;color:var(--txt2);min-height:32px}
.seg button.on{background:#fff;color:var(--brand-deep);font-weight:700;box-shadow:var(--sh1)}

/* 头像 */
.avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;background:var(--bg2);flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:var(--brand-deep);overflow:hidden}
.avatar.lg{width:52px;height:52px}
.avatar.sm{width:28px;height:28px;font-size:12px}

/* 列表行（我的/消息/设置）*/
.lrow{display:flex;align-items:center;gap:10px;padding:13px 2px;min-height:52px;border-bottom:1px solid var(--bg3)}
.lrow:last-child{border-bottom:none}
.lrow .k{flex:1;font-size:14px}
.lrow .v{color:var(--txt3);font-size:13px}
.lrow .arrow{color:var(--txt4);font-size:15px}

/* 内容卡（视频/图文）*/
.vcard{background:#fff;border-radius:var(--r16);overflow:hidden;box-shadow:var(--sh1);margin-bottom:12px}
.cover{width:100%;aspect-ratio:16/9;background:linear-gradient(135deg,#2A3F3A,#16302B);position:relative;overflow:hidden}
.cover img{width:100%;height:100%;object-fit:cover;display:block}
.cover .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.92);font-size:34px}
.cover .dur{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.5);color:#fff;font-size:11.5px;border-radius:var(--r6);padding:1px 6px}
.vcard .body{padding:11px 13px 13px}
.vcard .ttl{font-size:var(--fs-h3);font-weight:800;line-height:1.45;margin-bottom:6px}
.acard{background:#fff;border-radius:var(--r16);overflow:hidden;box-shadow:var(--sh1);margin-bottom:12px;display:flex;gap:0}
.acard .thumb{width:112px;flex:0 0 112px;background:linear-gradient(135deg,#E8F8F4,#CFEFE6);display:flex;align-items:center;justify-content:center;font-size:26px}
.acard .body{flex:1;padding:11px 13px;display:flex;flex-direction:column;gap:5px;min-width:0}
.acard .ttl{font-size:14px;font-weight:800;line-height:1.45}

/* 互动条（点赞/评论/收藏/分享）*/
.inter{display:flex;align-items:center;gap:16px;color:var(--txt3);font-size:12px}
.inter .it{display:inline-flex;align-items:center;gap:4px}
.inter .it.liked{color:var(--like)}
.inter.vside{flex-direction:column;gap:18px;align-items:center}
.inter.vside .it{flex-direction:column;gap:3px;font-size:11.5px}
.inter .ic{font-size:18px;line-height:1}

/* 评论 */
.cmt{display:flex;gap:9px;padding:11px 0;border-bottom:1px solid var(--bg3)}
.cmt:last-child{border-bottom:none}
.cmt .who{font-size:12px;color:var(--txt3);margin-bottom:2px}
.cmt .txt{font-size:14px;color:var(--txt1);line-height:1.55;word-break:break-word}
.cmt .foot{font-size:12px;color:var(--txt4);margin-top:5px;display:flex;gap:14px}
.cmt .foot .liked{color:var(--like)}
.cmtbar{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--line);padding:8px 12px calc(8px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:8px;z-index:65;max-width:480px;margin:0 auto}
.cmtbar input{flex:1;height:38px;border-radius:var(--r-pill);background:var(--bg2);border:none;padding:0 14px;font-size:14px}
.cmtbar .send{color:var(--brand-deep);font-weight:700;font-size:14px;padding:8px 6px}
.cmtbar .send.off{color:var(--txt4);font-weight:500}

/* 倒计时 */
.countdown{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--orange-text)}
.countdown i{font-style:normal;background:var(--orange-text);color:#fff;border-radius:4px;padding:1px 5px;font-variant-numeric:tabular-nums;font-weight:700}

/* 表单分组（预约信息填写）*/
.fgroup{background:#fff;border-radius:var(--r16);padding:4px 14px;margin-bottom:12px;box-shadow:var(--sh1)}
.fgroup>.ftitle{font-size:13px;color:var(--txt3);padding:12px 0 4px;font-weight:500}
.frow{display:flex;align-items:center;gap:10px;min-height:50px;border-bottom:1px solid var(--bg3)}
.frow:last-child{border-bottom:none}
.frow .lb{width:76px;flex:0 0 76px;font-size:14px;color:var(--txt1)}
.frow .lb i{color:var(--like);font-style:normal;margin-right:2px}
.frow input,.frow select{flex:1;height:44px;border:none;background:none;font-size:14px;color:var(--txt1)}
.frow input::placeholder{color:var(--txt4)}
.frow .unit{color:var(--txt3);font-size:13px}
.frow .arrow{color:var(--txt4)}

/* 成功页 */
.done{text-align:center;padding:38px 20px 22px}
.done .tick{width:70px;height:70px;border-radius:50%;background:var(--brand-soft);color:var(--brand-3);font-size:34px;display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.done .t{font-size:var(--fs-h1);font-weight:700;margin-bottom:6px}
.done .s{color:var(--txt3);font-size:13px}

/* 协议正文 */
.doc{background:#fff;border-radius:var(--r16);padding:16px;box-shadow:var(--sh1);font-size:14px;line-height:1.8;color:var(--txt2)}
.doc h4{font-size:15px;color:var(--txt1);margin:14px 0 6px;font-weight:700}
.doc h4:first-child{margin-top:0}

/* ── 电脑后台宽屏 ── */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ══ v4 桌面/宽屏适配：手机壳居中（修复宽屏失真）══ */
@media (min-width:768px){
  html{background:#E7ECF1}
  body{max-width:480px;margin:0 auto;background:#fff;min-height:100vh;
       box-shadow:0 0 0 1px rgba(16,24,40,.06),0 10px 44px rgba(16,24,40,.12)}
  .sm-brand-in,.sm-main{max-width:480px;margin-left:auto;margin-right:auto}
  .cmtbar{left:50%;right:auto;transform:translateX(-50%);width:100%;max-width:480px}
}
/* ═══ 共享组件（五端统一，2026-09-13）：线性图标 / 区块标题 / 浅绿胶囊 ═══ */
.ic-s{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;vertical-align:-2px}
.ic-s.big{width:40px;height:40px;stroke-width:1.5;color:#C3CBD3}
.sec-hd{display:flex;align-items:center;gap:7px;margin:16px 0 9px;padding:0 2px}
.sec-hd .sec-bar{width:3px;height:15px;border-radius:2px;background:linear-gradient(180deg,#94F6B8,#8AE4CC);flex:0 0 auto}
.sec-hd b{font-size:15.5px;font-weight:800;color:var(--txt1);letter-spacing:.2px;display:flex;align-items:center;gap:5px}
.sec-hd .sec-sub{font-size:11.5px;color:#9AA3AD;font-weight:400}
.sec-hd .ic-s{width:15px;height:15px;color:#187A5F}
.chip2{display:inline-flex;align-items:center;font-size:10.5px;font-weight:600;color:#187A5F;background:var(--brand-soft);border:1px solid var(--brand-line);border-radius:6px;padding:3px 8px}