/* ==========================================================================
 * 服务预约 · 卡项 共享组件库(390px 手机单档)
 * 移动优先;页面骨架 .app > .page-scroll;底部 CTA 用 .cta-bar
 * ========================================================================== */

/* ---------- 图标 ---------- */
.ic { display: inline-block; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.ic-13 { width: 13px; height: 13px; }
.ic-15 { width: 15px; height: 15px; }
.ic-16 { width: 16px; height: 16px; }
.ic-17 { width: 17px; height: 17px; }
.ic-18 { width: 18px; height: 18px; }
.ic-19 { width: 19px; height: 19px; }
.ic-20 { width: 20px; height: 20px; }
.ic-22 { width: 22px; height: 22px; }
.ic-24 { width: 24px; height: 24px; }
.ic-26 { width: 26px; height: 26px; }
.ic-28 { width: 28px; height: 28px; }
.ic-32 { width: 32px; height: 32px; }
.ic-40 { width: 40px; height: 40px; }
.ic-48 { width: 48px; height: 48px; }
.ic-56 { width: 56px; height: 56px; }
.ic-64 { width: 64px; height: 64px; }

/* ---------- 手机骨架(390 居中,页面外画布色) ---------- */
.app { max-width: 390px; margin: 0 auto; height: 100dvh; overflow: hidden; background: var(--bg); display: flex; flex-direction: column; box-shadow: 0 0 40px rgba(41, 36, 32, 0.10); }
.page-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.page-pad { padding: 12px 16px 28px; }

/* ---------- 全局隐藏滚动条 ---------- */
* { scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { width: 0; height: 0; display: none; background: transparent; }

/* ---------- 状态栏占位(原型演示用) ---------- */
.status-bar { height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; font-size: 14px; font-weight: 600; font-family: var(--font-num); }

/* ---------- 导航头 ---------- */
.nav-head { height: 52px; flex-shrink: 0; display: flex; align-items: center; padding: 0 8px; gap: 4px; }
.nav-head-title { flex: 1; text-align: center; font-size: 17px; font-weight: 700; }
.nav-head-side { width: 44px; display: flex; align-items: center; justify-content: center; }
.nav-back { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--ink); }
.nav-back:active { background: var(--divider); }
/* 沉浸导航(压在图上,白字) */
.nav-head.is-immersive { position: absolute; top: 44px; left: 0; right: 0; z-index: 5; color: #fff; }
.nav-head.is-immersive .nav-back { background: rgba(0,0,0,0.28); color: #fff; backdrop-filter: blur(6px); }

/* ---------- 卡片(display:block 保证 <a> 卡片块级化) ---------- */
.card { display: block; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); }
.card-pad { padding: 14px; }
.card-pad-lg { padding: 18px 16px; }
.card-inner { background: var(--inset); border: 1px solid var(--line); border-radius: var(--r-inner); padding: 14px; }

/* ---------- 区块标题(衬线 + 装饰) ---------- */
.sec-head { display: flex; align-items: baseline; gap: 8px; padding: 4px 2px 12px; }
.sec-title { font-family: var(--font-serif); font-size: 19px; font-weight: 700; letter-spacing: 0.02em; }
.sec-sub { font-size: 12px; color: var(--ink-3); letter-spacing: 0.06em; }
.sec-more { margin-left: auto; font-size: 13px; color: var(--ink-3); display: inline-flex; align-items: center; gap: 2px; }

/* ---------- 按钮 ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: var(--h-btn); padding: 0 26px; border-radius: var(--r-btn); font-size: 16px; font-weight: 700; border: 1px solid transparent; white-space: nowrap; user-select: none; transition: filter .12s ease, transform .06s ease; }
.btn:active { transform: scale(0.97); filter: brightness(0.94); }
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 6px 16px rgba(154, 106, 69, 0.28); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-inline { height: var(--h-btn-inline); font-size: 15px; padding: 0 24px; }
.btn-ghost { background: var(--card); border-color: var(--line); color: var(--ink-2); font-weight: 600; }
.btn-accent-soft { background: var(--accent-bg); border-color: var(--accent-line); color: var(--accent); font-weight: 700; }
.btn-danger-ghost { background: var(--card); border-color: var(--danger-line); color: var(--danger); font-weight: 700; }
.btn-block { display: flex; width: 100%; }
.btn[disabled], .btn.is-disabled { opacity: .42; pointer-events: none; box-shadow: none; }
.btn-sm { height: 30px; padding: 0 14px; font-size: 13px; font-weight: 600; }

/* ---------- 底部 CTA 条 ---------- */
.cta-bar { flex-shrink: 0; padding: 10px 16px calc(14px + env(safe-area-inset-bottom)); background: rgba(255,255,255,0.92); backdrop-filter: blur(10px); border-top: 1px solid var(--divider); display: flex; align-items: center; gap: 12px; }
.cta-bar .grow { flex: 1; }

/* ---------- 图标按钮 ---------- */
.icon-btn { position: relative; width: var(--h-icon-btn); height: var(--h-icon-btn); border-radius: var(--r-icon-btn); background: var(--card); border: 1px solid var(--line); color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.icon-btn.is-tint { background: var(--accent-bg); border-color: var(--accent-line); color: var(--accent); }

/* ---------- 药丸筛选 ---------- */
.pill-row { display: flex; align-items: center; gap: 8px; padding: 4px 16px 12px; overflow-x: auto; flex-shrink: 0; }
.pill { height: var(--h-pill); padding: 0 15px; border-radius: var(--r-pill); background: var(--card); border: 1px solid var(--line); color: var(--ink-2); font-size: 13px; display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; cursor: pointer; user-select: none; }
.pill.is-on { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 700; }

/* ---------- 分段控件 ---------- */
.seg { width: 100%; height: 40px; background: var(--seg-track); border-radius: var(--r-seg); padding: 4px; display: flex; gap: 2px; }
.seg-item { flex: 1; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--ink-2); cursor: pointer; white-space: nowrap; user-select: none; }
.seg-item.is-on { background: var(--card); box-shadow: var(--shadow-seg); font-weight: 700; color: var(--ink); }

/* ---------- 标签(浅底小字) ---------- */
.tag { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 11px; font-weight: 600; background: var(--divider); color: var(--ink-2); }
.tag-gold { background: var(--gold-bg); color: var(--gold-deep); }
.tag-accent { background: var(--accent-bg); color: var(--accent); }
.tag-success { background: var(--success-bg); color: var(--success); }
.tag-danger { background: var(--danger-bg); color: var(--danger); }
.tag-line { background: transparent; border: 1px solid var(--line); color: var(--ink-3); }

/* ---------- 状态药丸 ---------- */
.st { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.st::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.st-pending { color: var(--st-pending); background: var(--divider); }
.st-paid { color: var(--st-paid); background: var(--st-paid-bg); }
.st-ready { color: var(--st-ready); background: var(--st-ready-bg); }
.st-doing { color: var(--st-doing); background: var(--st-doing-bg); }
.st-done { color: var(--st-done); background: var(--st-done-bg); }
.st-closed { color: var(--st-closed); background: var(--st-closed-bg); }

/* ---------- kv 行 ---------- */
.kv { display: flex; align-items: center; min-height: 34px; gap: 12px; }
.kv-k { color: var(--ink-3); font-size: 13px; flex-shrink: 0; }
.kv-v { margin-left: auto; font-size: 14px; text-align: right; }

/* ---------- 分割线 ---------- */
.divider { height: 1px; background: var(--divider); border: none; }
.divider-dash { height: 0; border-top: 1px dashed var(--line); }

/* ---------- 列表行(右箭头) ---------- */
.cell { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 0; }
.cell-ic { width: 38px; height: 38px; border-radius: 12px; background: var(--accent-bg); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cell-t { font-size: 15px; font-weight: 600; }
.cell-s { font-size: 12px; color: var(--ink-3); margin-top: 1px; }
.cell-arrow { margin-left: auto; color: var(--ink-4); }

/* ---------- 头像 ---------- */
.avatar { border-radius: 50%; object-fit: cover; background: var(--divider); flex-shrink: 0; }
.avatar-44 { width: 44px; height: 44px; }
.avatar-52 { width: 52px; height: 52px; }
.avatar-64 { width: 64px; height: 64px; }
.avatar-72 { width: 72px; height: 72px; }

/* ---------- 评分星 ---------- */
.stars { display: inline-flex; align-items: center; gap: 2px; color: var(--gold); }
.stars .ic { stroke-width: 0; fill: currentColor; }
.stars .is-off { color: var(--ink-4); }

/* ==========================================================================
 * 业务组件
 * ========================================================================== */

/* ---------- 卡券视觉(次卡/期限卡;display:block 保证 <a> 块级化) ---------- */
.ticket { display: block; position: relative; border-radius: 20px; overflow: hidden; color: #fff; box-shadow: var(--shadow-hero); }
.ticket-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* 带图卡的文字遮罩(img 是替换元素,::after 不生效,遮罩挂在 .ticket 上;z-index 须高于 img、低于内容层) */
.ticket.has-img::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(160deg, rgba(41,36,32,0.72) 0%, rgba(41,36,32,0.40) 55%, rgba(41,36,32,0.62) 100%); }
.ticket-body { position: relative; z-index: 2; padding: 18px; display: flex; flex-direction: column; min-height: 128px; }
.ticket-name { font-family: var(--font-serif); font-size: 21px; font-weight: 700; letter-spacing: 0.03em; text-shadow: 0 1px 8px rgba(0,0,0,0.3); }
.ticket-en { font-size: 10px; letter-spacing: 0.28em; opacity: 0.75; margin-top: 2px; text-transform: uppercase; }
.ticket-times { margin-top: auto; display: flex; align-items: baseline; gap: 6px; }
.ticket-times b { font-family: var(--font-num); font-size: 34px; font-weight: 700; line-height: 1; }
.ticket-times span { font-size: 12px; opacity: 0.85; }
/* 撕边穿孔(卡与底部操作区之间) */
.ticket-notch { position: relative; z-index: 2; height: 1px; margin: 0 14px; border-top: 1px dashed rgba(255,255,255,0.4); }
.ticket-notch::before, .ticket-notch::after { content: ''; position: absolute; top: -8px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); }
.ticket-notch::before { left: -22px; }
.ticket-notch::after { right: -22px; }
/* 纯色渐变票(无图时) */
.ticket-g1 { background: linear-gradient(135deg, #8C6239 0%, #B08A5E 100%); }  /* 琥珀棕 */
.ticket-g2 { background: linear-gradient(135deg, #3E3A35 0%, #6B6259 100%); }  /* 墨棕 */
.ticket-g3 { background: linear-gradient(135deg, #5E6E52 0%, #8A9A7A 100%); }  /* 鼠尾草 */
.ticket-g4 { background: linear-gradient(135deg, #7A5C6E 0%, #A98A9A 100%); }  /* 烟紫 */

/* ---------- 日期条(横向 7~14 天) ---------- */
.date-strip { display: flex; gap: 8px; overflow-x: auto; padding: 4px 16px 12px; }
.date-item { flex-shrink: 0; width: 56px; height: 72px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; user-select: none; }
.date-item .d-week { font-size: 11px; color: var(--ink-3); }
.date-item .d-day { font-family: var(--font-num); font-size: 20px; font-weight: 700; }
.date-item .d-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
.date-item .d-dot.is-none { background: transparent; }
.date-item.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.date-item.is-on .d-week { color: rgba(255,255,255,0.65); }
.date-item.is-off { opacity: 0.38; pointer-events: none; }

/* ---------- 时段网格 ---------- */
.slot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.slot { position: relative; height: 58px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; cursor: pointer; user-select: none; }
.slot .s-time { font-family: var(--font-num); font-size: 15px; font-weight: 700; }
.slot .s-left { font-size: 10px; color: var(--ink-3); }
.slot .s-left.is-few { color: var(--warn); font-weight: 700; }
.slot.is-on { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 4px 12px rgba(154, 106, 69, 0.3); }
.slot.is-on .s-left { color: rgba(255,255,255,0.8); }
.slot.is-full { background: var(--inset); color: var(--ink-4); pointer-events: none; }
.slot.is-full .s-left { color: var(--ink-4); }

/* ---------- 技师卡 ---------- */
.staff-card { display: flex; flex-direction: column; align-items: center; padding: 18px 10px 14px; gap: 8px; }
.staff-card .avatar { border: 2px solid var(--card); box-shadow: 0 2px 10px rgba(96,74,52,0.14); }
.staff-name { font-size: 15px; font-weight: 700; }
.staff-meta { font-size: 11px; color: var(--ink-3); }

/* ---------- 二维码出示区 ---------- */
.qr-stage { display: flex; flex-direction: column; align-items: center; padding: 28px 24px 24px; }
.qr-box { width: 216px; height: 216px; border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-pop); display: flex; align-items: center; justify-content: center; padding: 14px; }
.qr-num { margin-top: 18px; font-family: var(--font-num); font-size: 26px; font-weight: 700; letter-spacing: 4px; }
.qr-tip { margin-top: 6px; font-size: 12px; color: var(--ink-3); }

/* ---------- 步骤条(预约状态) ---------- */
.steps { display: flex; align-items: flex-start; }
.step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; }
.step::before { content: ''; position: absolute; top: 10px; left: -50%; width: 100%; height: 2px; background: var(--divider); }
.step:first-child::before { display: none; }
.step-dot { width: 20px; height: 20px; border-radius: 50%; background: var(--card); border: 2px solid var(--line); display: flex; align-items: center; justify-content: center; color: #fff; z-index: 1; }
.step.is-done .step-dot { background: var(--success); border-color: var(--success); }
.step.is-now .step-dot { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-bg); }
.step-t { font-size: 11px; color: var(--ink-3); }
.step.is-done .step-t, .step.is-now .step-t { color: var(--ink); font-weight: 600; }

/* ---------- 底部弹层 ---------- */
.sheet-mask { position: fixed; inset: 0; background: rgba(41, 36, 32, 0.45); z-index: 40; opacity: 0; pointer-events: none; transition: opacity .18s ease; }
.sheet { position: fixed; left: 50%; transform: translateX(-50%) translateY(100%); bottom: 0; width: 390px; max-height: 82dvh; background: var(--bg); border-radius: 22px 22px 0 0; z-index: 41; display: flex; flex-direction: column; transition: transform .22s ease; }
.sheet.is-open { transform: translateX(-50%) translateY(0); }
.sheet-mask.is-open { opacity: 1; pointer-events: auto; }
.sheet-head { padding: 18px 16px 12px; display: flex; align-items: center; }
.sheet-title { font-size: 16px; font-weight: 700; }
.sheet-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 16px 20px; }

/* ---------- Toast ---------- */
.toast { position: fixed; left: 50%; bottom: 120px; transform: translateX(-50%) translateY(8px); background: rgba(41, 36, 32, 0.88); color: #fff; font-size: 13px; padding: 10px 18px; border-radius: 999px; z-index: 60; opacity: 0; pointer-events: none; transition: all .18s ease; }
.toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- 开关 ---------- */
.switch { width: 46px; height: 28px; border-radius: 999px; background: var(--ink-4); position: relative; transition: background .15s ease; flex-shrink: 0; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.2); transition: transform .15s ease; }
.switch.is-on { background: var(--accent); }
.switch.is-on::after { transform: translateX(18px); }

/* ---------- 空状态 ---------- */
.empty { display: flex; flex-direction: column; align-items: center; padding: 56px 0; gap: 10px; color: var(--ink-3); }
.empty-ic { width: 72px; height: 72px; border-radius: 50%; background: var(--divider); color: var(--ink-3); display: flex; align-items: center; justify-content: center; }

/* ---------- 主 Tabbar(首页/预约/卡包/我的) ---------- */
.tabbar { flex-shrink: 0; height: calc(58px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: rgba(255,255,255,0.94); backdrop-filter: blur(10px); border-top: 1px solid var(--divider); display: flex; }
.tab-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--ink-3); font-size: 10px; }
.tab-item.is-on { color: var(--accent); font-weight: 700; }

/* ---------- 工具类 ---------- */
.flex { display: flex; align-items: center; }
.flex-col { display: flex; flex-direction: column; }
.grow { flex: 1; min-width: 0; }
.gap4 { gap: 4px; } .gap6 { gap: 6px; } .gap8 { gap: 8px; } .gap10 { gap: 10px; } .gap12 { gap: 12px; } .gap16 { gap: 16px; }
.mt4 { margin-top: 4px; } .mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; } .mt16 { margin-top: 16px; } .mt20 { margin-top: 20px; } .mt24 { margin-top: 24px; }
.t11 { font-size: 11px; } .t12 { font-size: 12px; } .t13 { font-size: 13px; } .t14 { font-size: 14px; } .t15 { font-size: 15px; } .t16 { font-size: 16px; } .t17 { font-size: 17px; } .t18 { font-size: 18px; } .t20 { font-size: 20px; } .t22 { font-size: 22px; }
.bold { font-weight: 700; } .medium { font-weight: 600; }
.c1 { color: var(--ink); } .c2 { color: var(--ink-2); } .c3 { color: var(--ink-3); } .c4 { color: var(--ink-4); }
.ca { color: var(--accent); } .cg { color: var(--gold-deep); } .cd { color: var(--danger); } .cs { color: var(--success); }
.ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.price { font-family: var(--font-num); font-weight: 700; color: var(--accent); }
.price b { font-size: 1.5em; font-weight: 700; }
.price-del { font-family: var(--font-num); color: var(--ink-4); text-decoration: line-through; font-size: 12px; }