/* ========== SPA 用户端样式 ========== */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
:root {
  --pri: #3d7a6a; --pri-d: #2e5f52; --gold: #c9a063; --gold-d: #a8834a;
  --bg: #f6f3ee; --card: #ffffff; --txt: #2b2b2b; --sub: #8a8f8d;
  --line: #efeae2; --red: #e05a4e; --orange: #e8943a;
}
html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--bg); color: var(--txt); font-size: 14px;
}
#app { max-width: 540px; margin: 0 auto; min-height: 100vh; background: var(--bg); position: relative; }
a { color: inherit; text-decoration: none; }
img { display: block; }
input, textarea, select, button { font-family: inherit; font-size: 14px; outline: none; }
button { border: none; cursor: pointer; background: none; }

/* 通用 */
.page { padding-bottom: 76px; }
.page-plain { padding-bottom: 20px; }
.pad { padding: 0 14px; }
.card { background: var(--card); border-radius: 14px; overflow: hidden; }
.muted { color: var(--sub); }
.tag { display: inline-block; background: #f0ede6; color: #7d7466; font-size: 11px; padding: 2px 8px; border-radius: 8px; margin-right: 5px; }
.tag.pri { background: #e7f1ee; color: var(--pri); }
.btn { display: inline-flex; align-items: center; justify-content: center; background: var(--pri); color: #fff; border-radius: 22px; padding: 10px 22px; font-size: 15px; font-weight: 600; }
.btn.gold { background: linear-gradient(135deg, var(--gold), var(--gold-d)); }
.btn.plain { background: #fff; color: var(--pri); border: 1px solid var(--pri); }
.btn.block { width: 100%; }
.btn.sm { padding: 6px 14px; font-size: 13px; border-radius: 16px; }
.btn:disabled { opacity: .5; }
.price { color: var(--red); font-weight: 700; }
.price small { font-size: 11px; }
.oprice { color: var(--sub); text-decoration: line-through; font-size: 12px; margin-left: 6px; }
.empty { text-align: center; color: var(--sub); padding: 60px 20px; font-size: 13px; }
.empty .ic { font-size: 40px; margin-bottom: 10px; opacity: .5; }

/* 顶部栏 */
.navbar { position: sticky; top: 0; z-index: 50; background: var(--bg); display: flex; align-items: center; height: 48px; padding: 0 14px; }
.navbar .back { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; font-size: 20px; margin-right: 6px; color: var(--txt); }
.navbar .title { font-size: 16px; font-weight: 600; flex: 1; text-align: center; margin-right: 36px; }
.navbar.solid { background: var(--card); box-shadow: 0 1px 0 var(--line); }

/* 底部导航 */
.tabbar { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 540px; background: #fff; border-top: 1px solid var(--line); display: flex; z-index: 100; padding-bottom: env(safe-area-inset-bottom); }
.tabbar .tab { flex: 1; text-align: center; padding: 7px 0 5px; color: var(--sub); font-size: 11px; position: relative; }
.tabbar .tab svg { width: 24px; height: 24px; margin: 0 auto 2px; display: block; }
.tabbar .tab.on { color: var(--pri); }
.tabbar .tab .badge { position: absolute; top: 2px; left: 50%; margin-left: 4px; min-width: 16px; height: 16px; background: var(--red); color: #fff; border-radius: 8px; font-size: 10px; line-height: 16px; padding: 0 4px; }

/* 首页 */
.home-head { background: linear-gradient(160deg, var(--pri) 0%, var(--pri-d) 100%); padding: 18px 16px 46px; color: #fff; border-radius: 0 0 26px 26px; }
.home-head .brand { font-size: 22px; font-weight: 700; letter-spacing: 1px; display: flex; align-items: center; gap: 8px; }
.home-head .slogan { font-size: 12px; opacity: .8; margin-top: 4px; }
.search-wrap { margin: -26px 16px 0; background: #fff; border-radius: 22px; display: flex; align-items: center; padding: 0 16px; height: 44px; box-shadow: 0 4px 14px rgba(60,90,80,.08); position: relative; z-index: 2; }
.search-wrap svg { width: 18px; height: 18px; flex: none; opacity: .5; }
.search-wrap input { border: none; flex: 1; margin-left: 8px; font-size: 14px; background: transparent; }
.store-list { padding: 14px; display: flex; flex-direction: column; gap: 14px; }
.store-card { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 2px 8px rgba(60,80,70,.05); }
.store-card .cover { width: 100%; aspect-ratio: 16/9.5; object-fit: cover; background: #e8e4dc; }
.store-card .body { padding: 12px 14px 14px; }
.store-card .name { font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.store-card .name .rating { font-size: 12px; color: var(--gold-d); font-weight: 600; }
.store-card .meta { color: var(--sub); font-size: 12px; margin-top: 6px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.store-card .foot { display: flex; align-items: flex-end; justify-content: space-between; margin-top: 10px; }
.store-card .foot .p { font-size: 12px; color: var(--sub); }
.store-card .foot .p b { font-size: 18px; color: var(--red); }

/* 门店详情 */
.banner { position: relative; }
.banner .track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.banner .track::-webkit-scrollbar { display: none; }
.banner .track img { flex: 0 0 100%; width: 100%; aspect-ratio: 16/10; object-fit: cover; scroll-snap-align: start; background: #e8e4dc; }
.banner .dots { position: absolute; bottom: 10px; left: 0; right: 0; display: flex; justify-content: center; gap: 5px; }
.banner .dots i { width: 6px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.55); }
.banner .dots i.on { width: 16px; background: #fff; }
.shop-head { background: #fff; padding: 16px; margin-top: -14px; position: relative; border-radius: 14px 14px 0 0; }
.shop-head .nm { font-size: 19px; font-weight: 700; }
.shop-head .rate { color: var(--gold-d); font-size: 13px; margin-left: 8px; font-weight: 600; }
.shop-head .tags { margin-top: 8px; }
.shop-info { background: #fff; padding: 4px 16px 14px; }
.shop-info .row { display: flex; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.shop-info .row:last-child { border-bottom: none; }
.shop-info .row .k { width: 56px; color: var(--sub); flex: none; }
.shop-info .row .v { flex: 1; }
.shop-info .row .act { color: var(--pri); flex: none; margin-left: 8px; }
.shop-tabs { display: flex; background: #fff; margin-top: 10px; border-radius: 14px 14px 0 0; padding: 0 8px; position: sticky; top: 0; z-index: 30; }
.shop-tabs .t { flex: 1; text-align: center; padding: 13px 0 11px; font-size: 15px; color: var(--sub); position: relative; }
.shop-tabs .t.on { color: var(--txt); font-weight: 700; }
.shop-tabs .t.on::after { content: ''; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); width: 22px; height: 3px; border-radius: 2px; background: var(--pri); }
.shop-panel { background: #fff; padding: 12px 14px 20px; min-height: 40vh; }

/* 套餐 */
.pkg { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.pkg:last-child { border-bottom: none; }
.pkg .img { width: 96px; height: 96px; border-radius: 10px; object-fit: cover; flex: none; background: #e8e4dc; }
.pkg .info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pkg .t { font-size: 15px; font-weight: 600; }
.pkg .items { color: var(--sub); font-size: 12px; margin-top: 5px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pkg .foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; }
.pkg .sales { font-size: 11px; color: var(--sub); }
.pkg .buy { background: linear-gradient(135deg, var(--gold), var(--gold-d)); color: #fff; font-size: 12px; padding: 5px 14px; border-radius: 14px; font-weight: 600; }

/* 技师 */
.tech-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tech { background: #faf8f4; border-radius: 12px; overflow: hidden; text-align: center; padding-bottom: 12px; }
.tech .av { width: 100%; aspect-ratio: 1/1.05; object-fit: cover; background: #e8e4dc; }
.tech .nm { font-size: 15px; font-weight: 700; margin-top: 9px; }
.tech .ti { font-size: 11px; color: var(--gold-d); margin-top: 3px; }
.tech .yr { font-size: 11px; color: var(--sub); margin-top: 3px; }
.tech .tg { margin-top: 6px; padding: 0 8px; }

/* 底部咨询条 */
.consult-bar { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 540px; background: #fff; border-top: 1px solid var(--line); display: flex; gap: 10px; padding: 9px 14px calc(9px + env(safe-area-inset-bottom)); z-index: 100; }
.consult-bar .cbtn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; height: 42px; border-radius: 21px; font-size: 15px; font-weight: 600; }
.consult-bar .tel { background: #eef4f2; color: var(--pri); }
.consult-bar .im { background: linear-gradient(135deg, var(--pri), var(--pri-d)); color: #fff; }
.consult-bar svg { width: 18px; height: 18px; }

/* 套餐详情 */
.pkg-hero { width: 100%; aspect-ratio: 16/10; object-fit: cover; background: #e8e4dc; }
.pkg-main { background: #fff; padding: 16px; }
.pkg-main .t { font-size: 18px; font-weight: 700; line-height: 1.4; }
.pkg-main .pr { margin-top: 10px; display: flex; align-items: baseline; }
.pkg-main .pr .now { font-size: 26px; color: var(--red); font-weight: 800; }
.pkg-list { background: #fff; margin-top: 10px; padding: 14px 16px; }
.pkg-list h4, .sec-h { font-size: 15px; font-weight: 700; margin-bottom: 10px; }
.pkg-list .li { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: 13px; }
.pkg-list .li:last-child { border-bottom: none; }
.buy-bar { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 540px; background: #fff; border-top: 1px solid var(--line); padding: 9px 14px calc(9px + env(safe-area-inset-bottom)); z-index: 100; }
.buy-bar .btn { width: 100%; height: 44px; font-size: 16px; }

/* 订单 */
.ord-tabs { display: flex; background: #fff; padding: 4px 8px; position: sticky; top: 0; z-index: 30; }
.ord-tabs .t { flex: 1; text-align: center; padding: 10px 0; font-size: 14px; color: var(--sub); border-radius: 8px; }
.ord-tabs .t.on { color: var(--pri); font-weight: 700; background: #eef4f2; }
.ord-card { background: #fff; border-radius: 14px; margin: 12px 14px 0; padding: 14px; }
.ord-card .head { display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.ord-card .st { font-weight: 600; }
.ord-card .st.unpaid { color: var(--orange); } .ord-card .st.paid { color: var(--pri); }
.ord-card .st.used { color: var(--sub); } .ord-card .st.cancel, .ord-card .st.refund { color: var(--sub); }
.ord-card .bd { display: flex; gap: 10px; margin-top: 11px; }
.ord-card .bd img { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; background: #e8e4dc; }
.ord-card .bd .t { font-size: 14px; font-weight: 600; }
.ord-card .bd .no { font-size: 11px; color: var(--sub); margin-top: 5px; }
.ord-card .ft { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 12px; }
.code-box { margin-top: 12px; background: #faf6ee; border: 1px dashed var(--gold); border-radius: 10px; padding: 12px; text-align: center; }
.code-box .lab { font-size: 12px; color: var(--gold-d); }
.code-box .code { font-size: 28px; font-weight: 800; letter-spacing: 6px; color: var(--gold-d); margin-top: 4px; }

/* 聊天 */
.chat-wrap { display: flex; flex-direction: column; height: 100vh; }
.chat-msgs { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 12px; background: var(--bg); }
.bub-row { display: flex; gap: 9px; align-items: flex-start; }
.bub-row.me { flex-direction: row-reverse; }
.bub-row .av { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: #ddd; flex: none; }
.bubble { max-width: 72%; padding: 10px 13px; border-radius: 14px; font-size: 14px; line-height: 1.55; word-break: break-all; white-space: pre-wrap; }
.bub-row:not(.me) .bubble { background: #fff; border-top-left-radius: 4px; }
.bub-row.me .bubble { background: var(--pri); color: #fff; border-top-right-radius: 4px; }
.bub-time { text-align: center; font-size: 11px; color: var(--sub); margin: 2px 0; }
.chat-input { display: flex; gap: 9px; padding: 9px 12px calc(9px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--line); }
.chat-input input { flex: 1; border: none; background: #f2f0eb; border-radius: 19px; padding: 0 15px; height: 38px; }
.chat-input .send { width: 64px; height: 38px; border-radius: 19px; background: var(--pri); color: #fff; font-weight: 600; }

/* 消息列表 */
.conv-item { display: flex; gap: 12px; padding: 14px; background: #fff; border-bottom: 1px solid var(--line); align-items: center; }
.conv-item img { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; background: #e8e4dc; }
.conv-item .mid { flex: 1; min-width: 0; }
.conv-item .nm { font-size: 15px; font-weight: 600; }
.conv-item .lm { font-size: 12px; color: var(--sub); margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-item .rt { text-align: right; flex: none; }
.conv-item .tm { font-size: 11px; color: var(--sub); }
.conv-item .un { min-width: 18px; height: 18px; background: var(--red); color: #fff; border-radius: 9px; font-size: 11px; line-height: 18px; text-align: center; margin-top: 6px; margin-left: auto; padding: 0 5px; }

/* 我的 */
.mine-head { background: linear-gradient(150deg, var(--pri), var(--pri-d)); padding: 30px 20px 54px; color: #fff; border-radius: 0 0 28px 28px; display: flex; align-items: center; gap: 15px; }
.mine-head .av { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: rgba(255,255,255,.25); border: 2px solid rgba(255,255,255,.5); }
.mine-head .nm { font-size: 19px; font-weight: 700; }
.mine-head .ph { font-size: 12px; opacity: .85; margin-top: 5px; }
.mine-body { margin: -30px 16px 0; position: relative; z-index: 2; }
.mine-menu { background: #fff; border-radius: 14px; overflow: hidden; }
.mine-menu .mi { display: flex; align-items: center; padding: 15px 16px; border-bottom: 1px solid var(--line); font-size: 15px; gap: 11px; }
.mine-menu .mi:last-child { border-bottom: none; }
.mine-menu .mi svg { width: 20px; height: 20px; color: var(--pri); flex: none; }
.mine-menu .mi .arr { margin-left: auto; color: #c5c2bb; }
.mine-menu .mi.danger { color: var(--red); }

/* 登录 */
.login-box { padding: 60px 26px 0; }
.login-box .logo { text-align: center; font-size: 26px; font-weight: 800; color: var(--pri); letter-spacing: 2px; }
.login-box .sub { text-align: center; color: var(--sub); font-size: 12px; margin: 8px 0 34px; }
.field { background: #fff; border-radius: 12px; padding: 0 16px; margin-bottom: 14px; display: flex; align-items: center; }
.field input { border: none; flex: 1; height: 48px; background: transparent; }
.field .lab { color: var(--sub); width: 64px; flex: none; font-size: 14px; }
.login-box .btn { height: 48px; margin-top: 8px; font-size: 16px; }
.switch-mode { text-align: center; margin-top: 18px; color: var(--sub); font-size: 13px; }
.switch-mode b { color: var(--pri); }

/* 弹层 */
.toast { position: fixed; top: 45%; left: 50%; transform: translate(-50%,-50%); background: rgba(30,30,30,.82); color: #fff; padding: 11px 20px; border-radius: 10px; font-size: 14px; z-index: 999; max-width: 80vw; text-align: center; }
.mask { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 200; display: flex; align-items: center; justify-content: center; }
.modal { background: #fff; border-radius: 16px; width: 82vw; max-width: 340px; padding: 24px 20px; text-align: center; }
.modal h3 { font-size: 17px; margin-bottom: 10px; }
.modal p { color: var(--sub); font-size: 13px; line-height: 1.6; margin-bottom: 18px; }
.modal .mrow { display: flex; gap: 10px; }
.modal .mrow .btn { flex: 1; padding: 10px 0; }
.pay-anim { width: 54px; height: 54px; margin: 6px auto 16px; border-radius: 50%; border: 4px solid #eee; border-top-color: var(--pri); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.paysucc .big { width: 70px; height: 70px; border-radius: 50%; background: var(--pri); color: #fff; font-size: 38px; line-height: 70px; margin: 0 auto 14px; text-align: center; }

/* 地图与导航 */
.mini-map { height: 170px; border-radius: 12px; overflow: hidden; background: #eee; position: relative; z-index: 1; }
.leaflet-container { font-family: inherit; }
.leaflet-pane, .leaflet-top, .leaflet-bottom { z-index: 1 !important; }
.consult-bar .nav { background: #fdf8ef; color: var(--gold-d); border: 1px solid var(--gold); }
.nav-sheet { background: #fff; border-radius: 16px; width: 100%; max-width: 340px; overflow: hidden; }
.nav-sheet .ns-t { padding: 14px; text-align: center; font-size: 13px; color: var(--sub); border-bottom: 1px solid var(--line); }
.nav-sheet .ns-i { display: block; padding: 14px; text-align: center; font-size: 15px; font-weight: 600; border-bottom: 1px solid var(--line); color: var(--txt); }
.nav-sheet .ns-i:last-child { border-bottom: none; }
.nav-sheet .ns-i.cancel { color: var(--sub); font-weight: 400; }
.mask.sheet { align-items: flex-end; padding: 0 0 20px; }

/* 行内输入可收缩、行内按钮紧凑，防止验证码按钮溢出屏幕 */
.field input, .frow input { min-width: 0; }
.field .btn, .frow .btn { white-space: nowrap; padding: 6px 12px; font-size: 12px; flex: none; }