/* ============================================================================
 * styles.css —— 抖音小程序 C 端样式
 * ----------------------------------------------------------------------------
 * 主题：东方禅意 · 抖音红 + 暖金 + 宣纸白
 *
 * 设计约束（见 shared/CONTRACT.md §10）：
 *   · 状态色语义变量 --s-* 与四端统一，**色值不改、语义不改**；
 *     浅色底上另建 --s-*-ink 文字色以达标对比度（见 §1.4，仅为可读性派生，不改义）。
 *   · 金额一律以「分」存储，展示走 YY.fmt.money()；时间走 YY.fmt.*
 *
 * 本次改造（v2 · 2026-09-14）：
 *   A. 主题层：宣纸白底 + 抖音红 + 暖金点缀（主色 = 抖音红 #FE2C55）
 *   B. 补齐 7 个「有用无样式」的类：.notice / .sb-time / .tech-media
 *      / .tm-tile / .tm-thumb / .tm-play / .tm-name
 *   C. 布局修复：步骤条溢出、手机壳刘海与浅色顶栏重叠、触控区不足 44pt、
 *      操作条渐隐层、卡片置灰泛化、二维码自适应
 *   D. 兼容：旧变量名 --d-* 全部保留为别名，views/* 内联 var(--d-*) 不受影响
 * ==========================================================================*/

/* ===========================================================================
 * 1. 设计 token
 * ========================================================================= */

/* --- 1.1 契约基础变量（四端共用，禁止改义） ---
 * 注意：--c-primary-c = 抖音红 #FE2C55，与 ③ 真工程（miniprogram/app.ttss）保持一致。
 *       全站强调色统一由 --z-primary 派生，本行即本端主色真源。 */
:root {
  --c-bg: #F5F6F8;
  --c-card: #FFFFFF;
  --c-line: #EEEEEE;
  --c-primary-b: #1F6FEB;   /* 商家端主色(蓝) */
  --c-primary-c: #FE2C55;   /* 本端主色 = 抖音红，与 ③ 真工程一致 */
  --c-primary-p: #722ED1;   /* 平台端主色(紫) */
  --c-purple: #722ED1;
  --fs-title: 20px; --fs-h2: 18px; --fs-h3: 16px; --fs-body: 14px; --fs-sm: 12px;
  --radius: 8px; --shadow: 0 2px 8px rgba(0,0,0,.06); --row-h: 48px;
  --s-pending: #FAAD14; --s-confirmed: #1F6FEB; --s-arrived: #13C2C2; --s-verified: #52C41A;
  --s-partial: #FA8C16; --s-cancel: #8C8C8C; --s-noshow: #FF4D4F; --s-resched: #722ED1; --s-expired: #595959;
}

/* --- 1.2 禅意令牌（本次改造的单一真源 --z-*） --- */
:root {
  /* 纸 —— 表面三层：宣纸底 / 次级面 / 卡片面 */
  --z-paper:     #F4F1EA;   /* 页面底：宣纸 */
  --z-paper-2:   #FBF8F2;   /* 次级面：略亮 */
  --z-card:      #FFFDF8;   /* 卡片面：暖白，非纯白 */
  --z-card-2:    #F1EDE3;   /* 卡内凹面：时段底 / 输入底 */
  --z-line:      #E6E0D3;   /* 分隔线：暖灰 */
  --z-line-2:    #D8D0BE;   /* 强分隔线 */

  /* 墨 —— 文字三级（不用纯黑） */
  --z-ink:       #1B2A26;   /* 一级：墨 */
  --z-ink-2:     #5A6B64;   /* 二级：次级文字 */
  --z-ink-3:     #929F98;   /* 三级：辅助/占位 */
  --z-ink-4:     #B7C1BB;   /* 四级：禁用 */

  /* 抖音红 —— 主色（与 ③ 真工程 #FE2C55 对齐） */
  --z-primary:    #FE2C55;
  --z-primary-2:  #FF5C7A;
  --z-primary-3:  #FF7E95;
  --z-primary-bg: #FFE9EF;   /* 主色浅底 */
  --z-primary-line:#FFC2CE;  /* 主色浅描边 */

  /* 暖金 —— 点缀（不作正文色） */
  --z-gold:      #A8791F;   /* 金 · 可读版（用于文字/图标） */
  --z-gold-2:    #C9A24B;   /* 金 · 装饰版（描边/星级） */
  --z-gold-bg:   #F7F0DE;
  --z-gold-line: #E8D9B4;

  /* 语义扩展 */
  --z-warn:      #9A6410;   /* 琥珀 · 可读版 */
  --z-warn-bg:   #FBF1DF;
  --z-warn-line: #EEDCB8;
  --z-danger:    #B3402F;   /* 朱 · 可读版 */
  --z-danger-bg: #FBEDEA;
  --z-danger-line:#F0D2CC;

  /* 状态色 · 浅底可读版（仅提升对比度，色相与 --s-* 一致，不改义） */
  --s-pending-ink:  #8A5A00;
  --s-confirmed-ink:#1A5FC9;
  --s-arrived-ink:  #0A6E6E;
  --s-verified-ink: #2A7414;
  --s-partial-ink:  #8F4A05;
  --s-cancel-ink:   #5B5B5B;
  --s-noshow-ink:   #B3402F;
  --s-resched-ink:  #6326B8;
  --s-expired-ink:  #474747;

  /* 字体 —— 标题用宋体建立东方感，界面正文用无衬线 */
  --z-serif: "Songti SC", "Noto Serif SC", "Source Han Serif SC", "SimSun", Georgia, serif;
  --z-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --z-num: "DIN Alternate", "Bebas Neue", ui-monospace, "SF Mono", Menlo, monospace;

  /* 圆角 —— 禅意偏柔和圆，不用锐角 */
  --z-radius-xl: 20px;
  --z-radius-lg: 16px;
  --z-radius-md: 12px;
  --z-radius-sm: 9px;
  --z-radius-pill: 999px;

  /* 阴影 —— 纸面感：极轻、低饱和墨色 */
  --z-shadow-1: 0 1px 2px rgba(27,42,38,.035);
  --z-shadow-2: 0 2px 6px rgba(27,42,38,.05), 0 8px 20px rgba(27,42,38,.045);
  --z-shadow-3: 0 10px 30px rgba(27,42,38,.10);
  --z-shadow-primary: 0 6px 16px rgba(254,44,85,.22);

  /* 动效 */
  --z-ease: cubic-bezier(.16,1,.3,1);

  /* 结构高度 */
  --statusbar-h: 30px;
  --topbar-h: 48px;
  --tabbar-h: 58px;
  --safe-bottom: 10px;
}

/* --- 1.3 兼容别名：旧 --d-* 全量保留（views/* 内联 var(--d-text) 等继续可用） --- */
:root {
  --d-bg: var(--z-paper);
  --d-bg-2: var(--z-paper-2);
  --d-card: var(--z-card);
  --d-card-2: var(--z-card-2);
  --d-line: var(--z-line);
  --d-text: var(--z-ink);
  --d-text-2: var(--z-ink-2);
  --d-text-3: var(--z-ink-3);
  --d-red: var(--z-primary);       /* 名字保留，语义 = 主色（现为抖音红） */
  --d-red-2: var(--z-primary-2);
  --d-cyan: var(--z-gold);         /* 名字保留，语义 = 副色（现为暖金） */
  --d-gold: var(--z-gold-2);
  --d-radius-lg: var(--z-radius-lg);
  --d-radius-md: var(--z-radius-md);
  --d-radius-sm: var(--z-radius-sm);
  --d-shadow: var(--z-shadow-3);
}

/* ===========================================================================
 * 2. 基础重置
 * ========================================================================= */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  height: 100%;
  background: #E9E5DC;
  color: var(--z-ink);
  font-family: var(--z-sans);
  font-size: var(--fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
.hidden { display: none !important; }

/* emoji 图标统一降饱和，让它融入禅意配色（纯呈现层，不改内容）
 * 注意：不要用 font-variant-emoji:text —— 那会把 emoji 强制成单色线稿，
 * 与同页彩色 emoji 混排会显得像是渲染坏了。此处只做降饱和。 */
.screen .thumb, .screen .store-cover, .screen .svc-cover, .screen .tech-avatar,
.screen .tech-hero, .screen .cp-badge, .screen .em-ico, .screen .pr-ico, .screen .sh-ico,
.screen .cp-ico, .screen .ti-ico { filter: saturate(.78); }

/* ===========================================================================
 * 3. 手机壳舞台
 * ========================================================================= */
.stage {
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0;
  background:
    radial-gradient(900px 460px at 22% -6%, rgba(254,44,85,.09), transparent 62%),
    radial-gradient(760px 420px at 82% 104%, rgba(201,162,75,.10), transparent 60%),
    #E9E5DC;
}
.phone {
  position: relative;
  width: 375px;
  height: 812px;
  background: var(--z-paper);
  border-radius: 40px;
  box-shadow:
    0 26px 64px rgba(27,42,38,.24),
    0 0 0 11px #22302C,
    0 0 0 12px #35443F;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* 刘海：高度对齐状态栏，避免与浅色顶栏错位打架 */
.phone::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 112px; height: var(--statusbar-h);
  background: #1A2623;
  border-radius: 0 0 15px 15px;
  z-index: 60;
}

/* ===========================================================================
 * 4. 状态栏
 * ========================================================================= */
.statusbar {
  height: var(--statusbar-h);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  font-size: 12px;
  font-weight: 600;
  color: var(--z-ink);
  background: var(--z-paper);
  letter-spacing: .3px;
  z-index: 50;
  position: relative;
}
/* 补齐：.sb-time 原本无样式 → 等宽数字防止分钟跳动时抖动 */
.statusbar .sb-time { font-variant-numeric: tabular-nums; font-family: var(--z-num); font-weight: 600; }
.statusbar .sb-right { display: flex; align-items: center; gap: 4px; font-size: 10px; color: var(--z-ink-2); }
.statusbar .sb-batt {
  width: 22px; height: 11px; border: 1.4px solid var(--z-ink-2);
  border-radius: 3px; position: relative; padding: 1px;
}
.statusbar .sb-batt i { display: block; height: 100%; width: 78%; background: var(--z-primary); border-radius: 1px; }
.statusbar .sb-batt::after {
  content: ""; position: absolute; right: -3px; top: 3px; width: 2px; height: 5px;
  background: var(--z-ink-2); border-radius: 0 1px 1px 0;
}

/* ===========================================================================
 * 5. 顶栏
 * ========================================================================= */
.topbar {
  flex: 0 0 auto;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  background: var(--z-paper);
  border-bottom: 1px solid var(--z-line);
  position: relative;
  z-index: 40;
}
/* 顶部一道暖金细线 —— 禅意的「装裱线」 */
.topbar::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--z-gold-2) 22%, var(--z-gold-2) 78%, transparent);
  opacity: .5;
}
.topbar .tb-back {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--z-ink); font-size: 18px;
  background: var(--z-card-2);
  border: 1px solid var(--z-line);
  transition: background .15s, transform .12s; flex: 0 0 auto;
}
.topbar .tb-back:active { background: var(--z-primary-bg); transform: scale(.94); }
.topbar .tb-title {
  font-family: var(--z-serif);
  font-size: 17px; font-weight: 700; color: var(--z-ink);
  letter-spacing: 1px;
  flex: 1 1 auto; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar .tb-title.left { text-align: left; }
.topbar .tb-right { flex: 0 0 auto; min-width: 30px; display: flex; justify-content: flex-end; }
.topbar .tb-badge {
  font-size: 10px; color: var(--z-primary);
  border: 1px solid var(--z-primary-line); background: var(--z-primary-bg);
  border-radius: var(--z-radius-pill); padding: 2px 8px; font-weight: 700; letter-spacing: .5px;
}
.topbar .tb-src {
  display: flex; align-items: center; gap: 7px; justify-content: center; flex: 1;
}
.topbar .tb-src .dy-logo {
  width: 22px; height: 22px; border-radius: 7px;
  background: linear-gradient(140deg, #25D9D0, #1B2A26 58%, #1B2A26);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: #fff; font-weight: 800;
  box-shadow: 0 2px 6px rgba(27,42,38,.18);
}

/* ===========================================================================
 * 6. 屏幕内容区
 * ========================================================================= */
.screen {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 14px 14px calc(18px + env(safe-area-inset-bottom, 0px));
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  background: var(--z-paper);
}
.screen::-webkit-scrollbar { width: 0; height: 0; }
.screen.has-tabbar { padding-bottom: 16px; }

/* 页面淡入 + 上移，营造步骤切换手感 */
@keyframes pageIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
/* 页面同时作为 flex 列容器：内容不足一屏时，底部操作条被 margin-top:auto 推到屏幕底部，
 * 避免「门店·项目」这类短页面出现操作条悬在页面中部、下方大片空白的观感。 */
.page {
  animation: pageIn .24s var(--z-ease);
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.page > .actionbar { margin-top: auto; }
.page-narrow-gap > * + * { margin-top: 13px; }

/* 通用段落标题 —— 竖线改为暖金细线 + 宋体标题 */
.sec-title { display: flex; align-items: center; gap: 9px; margin: 18px 2px 10px; }
.sec-title .st-bar {
  width: 3px; height: 15px; border-radius: 2px;
  background: linear-gradient(180deg, var(--z-gold-2), var(--z-primary));
}
.sec-title .st-txt {
  font-family: var(--z-serif);
  font-size: 15.5px; font-weight: 700; color: var(--z-ink); letter-spacing: .8px;
}
.sec-title .st-sub { font-size: var(--fs-sm); color: var(--z-ink-3); margin-left: auto; }

/* 空态 */
.empty { text-align: center; color: var(--z-ink-3); padding: 52px 20px; }
.empty .em-ico { font-size: 42px; margin-bottom: 12px; opacity: .55; }
.empty .em-txt { font-size: var(--fs-body); color: var(--z-ink-2); }

/* ===========================================================================
 * 7. 卡片
 * ========================================================================= */
.card {
  background: var(--z-card);
  border-radius: var(--z-radius-lg);
  padding: 15px;
  border: 1px solid var(--z-line);
  box-shadow: var(--z-shadow-1);
}
.card + .card { margin-top: 13px; }
.card-press { transition: transform .12s, box-shadow .18s var(--z-ease), background .15s; }
.card-press:active { transform: scale(.985); background: var(--z-paper-2); box-shadow: var(--z-shadow-2); }
/* 补齐：卡片置灰的通用形态（门店兜底列表等用到 .card.disabled） */
.card.disabled, .disabled { opacity: .5; }
.card.disabled { pointer-events: none; box-shadow: none; }
.card-row { display: flex; align-items: center; gap: 12px; }
.row-main { flex: 1 1 auto; min-width: 0; }
.row-side { flex: 0 0 auto; text-align: right; }

/* 通栏分组 —— 行高对齐契约 --row-h(48px) 保证触控区 */
.group {
  background: var(--z-card); border-radius: var(--z-radius-lg); overflow: hidden;
  border: 1px solid var(--z-line);
}
.group + .group { margin-top: 13px; }
.group .g-item {
  display: flex; align-items: center; gap: 10px;
  min-height: var(--row-h);
  padding: 12px 14px;
  border-bottom: 1px solid var(--z-line);
  transition: background .15s;
}
.group .g-item:last-child { border-bottom: none; }
.group .g-item.pressable:active { background: var(--z-card-2); }
.group .g-label { color: var(--z-ink-2); font-size: var(--fs-body); flex: 0 0 auto; }
/* 值支持块级子元素（confirm 页门店行内含 <div> 地址） */
.group .g-value {
  margin-left: auto; color: var(--z-ink); text-align: right;
  min-width: 0; font-weight: 500;
}
.group .g-value > div { font-weight: 400; }
.group .g-arrow { color: var(--z-ink-3); font-size: 15px; margin-left: 4px; }

/* 价格 */
.price { color: var(--z-primary); font-weight: 800; font-family: var(--z-num); }
.price .cur { font-size: 12px; margin-right: 1px; }
.price .num { font-size: 19px; }
.price-lg .num { font-size: 25px; }
.price-old { color: var(--z-ink-3); text-decoration: line-through; font-size: var(--fs-sm); margin-left: 6px; font-family: var(--z-num); }

/* 头像 / 封面占位 */
.thumb {
  width: 56px; height: 56px; border-radius: var(--z-radius-md); flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; background: linear-gradient(140deg, var(--z-primary-bg), var(--z-card-2));
  border: 1px solid var(--z-line);
  position: relative; overflow: hidden;
}
.thumb.lg { width: 100%; height: 122px; font-size: 46px; border-radius: var(--z-radius-lg); }
.thumb.round { border-radius: 50%; }
.thumb .cover-mask {
  position: absolute; inset: auto 0 0 0; height: 46%;
  background: linear-gradient(180deg, transparent, rgba(27,42,38,.42));
}
.thumb .play-badge {
  position: absolute; left: 8px; bottom: 8px;
  background: rgba(27,42,38,.62); color: #fff; font-size: 10px;
  padding: 2px 8px; border-radius: var(--z-radius-pill); backdrop-filter: blur(3px);
}

/* ===========================================================================
 * 8. 状态胶囊（CONTRACT §6 中文名 + 语义色）
 * ========================================================================= */
.tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; line-height: 1;
  padding: 5px 9px; border-radius: var(--z-radius-sm); white-space: nowrap;
  border: 1px solid transparent;
}
.tag .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
/* 浅底主题：文字用 -ink 派生色达 AA，底色用低饱和浅色，色相与 --s-* 一致 */
.tag-pending   { color: var(--s-pending-ink);   background: #FDF4E3; border-color: #F2E0BC; }
.tag-confirmed { color: var(--s-confirmed-ink); background: #EAF1FD; border-color: #CFE0F8; }
.tag-arrived   { color: var(--s-arrived-ink);   background: #E4F5F5; border-color: #C2E6E6; }
.tag-verified  { color: var(--s-verified-ink);  background: #EAF6E4; border-color: #CDE8BF; }
.tag-partial   { color: var(--s-partial-ink);   background: #FDF0E2; border-color: #F2D9BA; }
.tag-cancel    { color: var(--s-cancel-ink);    background: #F1F0EE; border-color: #DEDCD8; }
.tag-noshow    { color: var(--s-noshow-ink);    background: var(--z-danger-bg); border-color: var(--z-danger-line); }
.tag-resched   { color: var(--s-resched-ink);   background: #F1EAFB; border-color: #DCCBF6; }
.tag-expired   { color: var(--s-expired-ink);   background: #EFEEEC; border-color: #DCDAD6; }

/* 通用小胶囊 */
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-sm); padding: 5px 11px; border-radius: var(--z-radius-pill);
  background: var(--z-card-2); color: var(--z-ink-2);
  border: 1px solid var(--z-line);
  transition: background .15s, border-color .15s, color .15s;
}
.chip.on { background: var(--z-primary-bg); color: var(--z-primary); border-color: var(--z-primary-line); font-weight: 600; }
.chip.cyan { background: var(--z-gold-bg); color: var(--z-gold); border-color: var(--z-gold-line); }

/* ===========================================================================
 * 9. 按钮
 * ========================================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 46px; border-radius: var(--z-radius-md);
  font-size: 15px; font-weight: 700; padding: 0 18px; letter-spacing: .3px;
  transition: transform .12s var(--z-ease), opacity .15s, background .15s, box-shadow .18s;
}
.btn:active { transform: scale(.975); }
.btn-primary {
  background: linear-gradient(180deg, var(--z-primary-2), var(--z-primary));
  color: #fff; box-shadow: var(--z-shadow-primary);
}
.btn-primary:active { background: var(--z-primary); box-shadow: 0 3px 10px rgba(254,44,85,.24); }
.btn-ghost { background: transparent; color: var(--z-ink); border: 1px solid var(--z-line-2); }
.btn-soft { background: var(--z-card-2); color: var(--z-ink); border: 1px solid var(--z-line); }
.btn-cyan { background: var(--z-gold-bg); color: var(--z-gold); border: 1px solid var(--z-gold-line); }
.btn-danger { background: var(--z-danger-bg); color: var(--z-danger); border: 1px solid var(--z-danger-line); }
.btn-block { display: flex; width: 100%; }
.btn-sm { height: 36px; font-size: 13px; padding: 0 13px; border-radius: var(--z-radius-sm); }
.btn[disabled] { opacity: .45; pointer-events: none; box-shadow: none; }
.btn-row { display: flex; gap: 10px; }
.btn-row .btn { flex: 1; }

/* 底部固定操作条 —— 浅底渐隐 + 顶部分隔线
 * padding-top 20px 为「正文与分隔线之间」预留视觉呼吸区；
 * 分隔线放在 top:9px，使其在长页面（auto margin 归零）下也不会贴着正文。 */
.actionbar {
  position: sticky; bottom: 0;
  display: flex; gap: 10px; align-items: center;
  padding: 20px 2px calc(11px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(244,241,234,0) 0%, var(--z-paper) 34%, var(--z-paper) 100%);
}
.actionbar::before {
  content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--z-line-2) 30%, var(--z-line-2) 70%, transparent);
  opacity: .9;
}
.actionbar .ab-info { flex: 1 1 auto; min-width: 0; position: relative; z-index: 1; }
.actionbar .ab-info .bold { font-size: 14px; }
.actionbar .btn { flex: 0 0 auto; min-width: 148px; position: relative; z-index: 1; }

/* ===========================================================================
 * 10. 入口页（券卡）
 * ========================================================================= */
.entry-hero {
  position: relative; border-radius: var(--z-radius-xl); overflow: hidden;
  padding: 18px 16px 20px;
  background: linear-gradient(178deg, var(--z-card) 0%, var(--z-primary-bg) 100%);
  border: 1px solid var(--z-primary-line);
  box-shadow: var(--z-shadow-1);
}
/* 装裱金线 */
.entry-hero::before {
  content: ""; position: absolute; left: 16px; right: 16px; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--z-gold-2), transparent);
}
.entry-hero::after {
  content: ""; position: absolute; right: -46px; top: -46px; width: 158px; height: 158px;
  border-radius: 50%; border: 22px solid rgba(254,44,85,.06);
}
.entry-src { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--z-ink-2); margin-bottom: 14px; position: relative; z-index: 1; }
.entry-src .dy-logo {
  width: 22px; height: 22px; border-radius: 7px; font-weight: 800; font-size: 12px; color: #fff;
  background: linear-gradient(140deg, #25D9D0, #1B2A26 58%, #1B2A26);
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
  box-shadow: 0 2px 6px rgba(27,42,38,.18);
}
.coupon-card {
  border-radius: var(--z-radius-md);
  background: linear-gradient(150deg, var(--z-primary) 0%, #C4113A 62%, #9E0D2E 100%);
  color: #fff; padding: 16px 17px; position: relative;
  display: flex; align-items: center; gap: 14px; overflow: hidden;
  box-shadow: 0 10px 24px rgba(254,44,85,.26);
}
/* 券卡上的金色纹样 */
.coupon-card::before {
  content: ""; position: absolute; right: -34px; bottom: -42px; width: 132px; height: 132px;
  border-radius: 50%; border: 18px solid rgba(201,162,75,.16);
}
.coupon-card::after {
  content: ""; position: absolute; left: 16px; top: 12px; bottom: 12px; width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.16), transparent);
}
.coupon-card .cc-left { flex: 1 1 auto; min-width: 0; position: relative; z-index: 1; padding-left: 10px; }
.coupon-card .cc-name { font-family: var(--z-serif); font-size: 17px; font-weight: 700; letter-spacing: .6px; margin-bottom: 6px; }
.coupon-card .cc-code { font-size: var(--fs-sm); opacity: .78; letter-spacing: 1.2px; font-family: var(--z-num); }
.coupon-card .cc-valid { font-size: 11px; opacity: .72; margin-top: 4px; }
.coupon-card .cc-value {
  flex: 0 0 auto; text-align: center; border-left: 1px dashed rgba(201,162,75,.55);
  padding-left: 15px; position: relative; z-index: 1;
}
.coupon-card .cc-value .cv-num { font-family: var(--z-num); font-size: 28px; font-weight: 800; line-height: 1; color: #F2E2BB; }
.coupon-card .cc-value .cv-cur { font-size: 12px; opacity: .85; margin-top: 2px; }

/* ===========================================================================
 * 11. 门店 / 服务 / 房间 / 技师 卡片
 * ========================================================================= */
.store-card { display: flex; gap: 12px; }
.store-cover {
  width: 84px; height: 84px; border-radius: var(--z-radius-md); flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; font-size: 32px;
  background: linear-gradient(140deg, var(--z-primary-bg), var(--z-card-2));
  border: 1px solid var(--z-line);
  position: relative; overflow: hidden;
}
.store-cover .cover-mask { position: absolute; inset: auto 0 0 0; height: 50%; background: linear-gradient(180deg, transparent, rgba(27,42,38,.34)); }
.store-info { flex: 1 1 auto; min-width: 0; }
.store-name { font-size: 15px; font-weight: 700; color: var(--z-ink); display: flex; align-items: center; gap: 6px; }
.store-name .badge {
  font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 6px;
  background: var(--z-gold-bg); color: var(--z-gold); border: 1px solid var(--z-gold-line);
}
.store-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 6px; font-size: var(--fs-sm); color: var(--z-ink-2); }
.store-meta .m-strong { color: var(--z-ink); font-weight: 600; }
.store-meta .open { color: var(--z-primary-2); }
.store-meta .closed { color: var(--z-ink-3); }
.store-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* 搜索框 */
.searchbar {
  display: flex; align-items: center; gap: 8px;
  background: var(--z-card); border-radius: var(--z-radius-pill); padding: 10px 15px;
  border: 1px solid var(--z-line);
}
.searchbar .sb-ico { color: var(--z-ink-3); font-size: 15px; }
.searchbar input { flex: 1; background: transparent; border: none; outline: none; color: var(--z-ink); font-size: var(--fs-body); }
.searchbar input::placeholder { color: var(--z-ink-3); }

/* 排序 / 筛选条 */
.filterbar { display: flex; gap: 8px; margin-top: 12px; overflow-x: auto; padding-bottom: 2px; }
.filterbar::-webkit-scrollbar { display: none; }
.filterbar .fb-item {
  flex: 0 0 auto; font-size: var(--fs-sm); padding: 7px 14px; border-radius: var(--z-radius-pill);
  background: var(--z-card); color: var(--z-ink-2); border: 1px solid var(--z-line);
  transition: background .15s, color .15s, border-color .15s;
}
.filterbar .fb-item.on {
  background: var(--z-primary); color: #fff; border-color: var(--z-primary);
  font-weight: 600; box-shadow: 0 4px 12px rgba(254,44,85,.2);
}

/* 服务卡 */
.svc-card { display: flex; gap: 12px; align-items: flex-start; }
.svc-cover {
  width: 72px; height: 72px; border-radius: var(--z-radius-md); flex: 0 0 auto; font-size: 28px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg, var(--z-primary-bg), var(--z-card-2));
  border: 1px solid var(--z-line);
}
.svc-body { flex: 1 1 auto; min-width: 0; }
.svc-name { font-size: 15px; font-weight: 700; }
.svc-meta { font-size: var(--fs-sm); color: var(--z-ink-2); margin-top: 4px; display: flex; gap: 10px; flex-wrap: wrap; }
.svc-price-line { display: flex; align-items: baseline; margin-top: 8px; gap: 8px; }
.svc-cover-flag {
  font-size: 10px; padding: 2px 6px; border-radius: 6px; margin-left: 6px;
  background: var(--z-gold-bg); color: var(--z-gold); border: 1px solid var(--z-gold-line);
}

/* 房间卡（网格） */
.room-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.room-card {
  border-radius: var(--z-radius-md); padding: 13px 12px 12px; background: var(--z-card);
  border: 1px solid var(--z-line); position: relative;
  min-height: 130px;
  display: flex; flex-direction: column;
  transition: transform .12s var(--z-ease), border-color .15s, background .15s, box-shadow .18s;
}
.room-card:active { transform: scale(.98); }
.room-card.on {
  border-color: var(--z-primary); background: var(--z-paper-2);
  box-shadow: 0 0 0 1.5px var(--z-primary) inset, var(--z-shadow-2);
}
.room-card .rc-name {
  font-size: 14.5px; font-weight: 700; display: flex; align-items: center; gap: 6px;
  padding-right: 22px; line-height: 1.35;
}
.room-card .rc-type { font-size: 11px; color: var(--z-ink-3); margin-top: 4px; }
.room-card .rc-left { font-size: var(--fs-sm); margin-top: auto; padding-top: 8px; color: var(--z-ink-2); }
.room-card .rc-left b { color: var(--z-primary); font-family: var(--z-num); font-weight: 700; }
.room-card .rc-left.low b, .room-card .rc-left .low { color: var(--z-warn); }
.room-card .rc-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.room-card .rc-tags .chip { font-size: 10px; padding: 3px 8px; }
.room-card.disabled { opacity: .48; }
.room-card.disabled:active { transform: none; }
.room-card .rc-check {
  position: absolute; right: 11px; top: 11px; width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid var(--z-line-2); background: var(--z-card); transition: all .15s;
}
.room-card.on .rc-check { border-color: var(--z-primary); background: var(--z-primary); }
.room-card.on .rc-check::after {
  content: "✓"; color: #fff; font-size: 12px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; height: 100%;
}

/* 技师卡 —— 三栏改为「头像 / 主体 / 右侧信息块」，右侧定宽避免挤压 */
.tech-list { display: flex; gap: 10px; flex-direction: column; }
.tech-card {
  display: flex; gap: 12px; align-items: center;
  background: var(--z-card); border-radius: var(--z-radius-md); padding: 13px 12px;
  border: 1px solid var(--z-line);
  transition: transform .12s var(--z-ease), border-color .15s, background .15s, box-shadow .18s;
  position: relative; overflow: hidden;
}
.tech-card:active { transform: scale(.99); }
.tech-card.on {
  border-color: var(--z-primary); background: var(--z-paper-2);
  box-shadow: 0 0 0 1.5px var(--z-primary) inset, var(--z-shadow-2);
}
.tech-avatar {
  width: 58px; height: 58px; border-radius: var(--z-radius-md); flex: 0 0 auto; font-size: 28px;
  display: flex; align-items: center; justify-content: center; position: relative;
  background: linear-gradient(145deg, var(--z-primary-bg), var(--z-card-2));
  border: 1px solid var(--z-line);
}
.tech-avatar .online-dot {
  position: absolute; right: -2px; bottom: -2px; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--z-card); background: var(--s-verified);
}
.tech-avatar .online-dot.busy { background: var(--s-pending); }
.tech-avatar .online-dot.leave { background: var(--s-cancel); }
.tech-body { flex: 1 1 auto; min-width: 0; }
.tech-name { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.tech-lv { font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .3px; }
.tech-lv.junior { background: #EFEEEC; color: #5B5B5B; border: 1px solid #DCDAD6; }
.tech-lv.mid { background: #EAF1FD; color: var(--s-confirmed-ink); border: 1px solid #CFE0F8; }
.tech-lv.senior { background: var(--z-gold-bg); color: var(--z-gold); border: 1px solid var(--z-gold-line); }
.tech-lv.master { background: #F1EAFB; color: var(--s-resched-ink); border: 1px solid #DCCBF6; }
.tech-meta { font-size: var(--fs-sm); color: var(--z-ink-2); margin-top: 5px; display: flex; gap: 10px; flex-wrap: wrap; }
.tech-meta .star { color: var(--z-gold-2); }
.tech-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.tech-tags .chip { font-size: 10px; padding: 3px 8px; }
.tech-right { flex: 0 0 auto; width: 62px; text-align: right; }
.tech-right .tr-rate { color: var(--z-gold); font-weight: 700; font-size: 12.5px; white-space: nowrap; }
.tech-right .tr-good { font-size: 11px; color: var(--z-ink-3); margin-top: 3px; }
.tech-right .chip { font-size: 10px; padding: 3px 7px; }

/* ===========================================================================
 * 12. 步骤条 —— 布局修复：原实现 4 步 + 连接线必然溢出 375pt（需横向滚动）
 *     改为 4 等分网格 + 绝对定位连接线，标签居中在节点下方，零溢出
 * ========================================================================= */
.stepper {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  gap: 0;
  padding: 12px 2px 16px;
  overflow: visible;
}
.stepper::-webkit-scrollbar { display: none; }
.step {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  flex: 0 0 auto;
}
.step .sp-node {
  width: 22px; height: 22px; border-radius: 50%; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  background: var(--z-card-2); color: var(--z-ink-3); border: 1px solid var(--z-line);
  transition: all .25s var(--z-ease); position: relative; z-index: 2;
  font-family: var(--z-num);
}
.step .sp-label {
  font-size: 10.5px; color: var(--z-ink-3); margin-left: 0;
  white-space: nowrap; transition: color .25s; letter-spacing: .2px; text-align: center;
}
/* 连接线：从本节点右侧连到下一节点左侧 */
.step .sp-line {
  position: absolute; top: 10.5px; left: calc(50% + 16px);
  width: calc(100% - 32px); height: 1px; margin: 0;
  background: var(--z-line-2); transition: background .25s; z-index: 1;
}
.step.done .sp-node { background: var(--z-primary); color: #fff; border-color: var(--z-primary); }
.step.done .sp-label { color: var(--z-ink-2); }
.step.done .sp-line { background: var(--z-primary-line); }
.step.active .sp-node {
  background: var(--z-card); color: var(--z-primary); border: 1.5px solid var(--z-primary);
  box-shadow: 0 0 0 4px var(--z-primary-bg);
}
.step.active .sp-label { color: var(--z-primary); font-weight: 700; }

/* ===========================================================================
 * 13. 时段网格
 * ========================================================================= */
.date-strip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.date-strip::-webkit-scrollbar { display: none; }
.date-chip {
  flex: 0 0 auto; width: 58px; padding: 9px 0; border-radius: var(--z-radius-md); text-align: center;
  background: var(--z-card); border: 1px solid var(--z-line);
  transition: all .16s var(--z-ease);
}
.date-chip .dc-week { font-size: 11px; color: var(--z-ink-3); }
.date-chip .dc-day { font-size: 16px; font-weight: 700; margin-top: 3px; font-family: var(--z-num); }
.date-chip.on {
  background: linear-gradient(180deg, var(--z-primary-2), var(--z-primary));
  border-color: var(--z-primary); box-shadow: 0 5px 14px rgba(254,44,85,.24);
}
.date-chip.on .dc-week, .date-chip.on .dc-day { color: #fff; }
.date-chip.today .dc-week { color: var(--z-primary); font-weight: 700; }
.date-chip.on.today .dc-week { color: rgba(255,255,255,.88); }

.slot-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 11px; color: var(--z-ink-2); margin: 4px 2px 10px; }
.slot-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.legend-ok { background: var(--z-card-2); border: 1px solid var(--z-line-2); }
.legend-on { background: var(--z-primary); }
.legend-busy { background: #DCD9D1; }
.legend-off { background: transparent; border: 1px dashed var(--z-line-2); }

/* 时段：4 列 + 44pt 触控高度（原 40px 不达最小点按区） */
.slot-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.slot {
  height: 44px; border-radius: var(--z-radius-sm); font-size: 13px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  background: var(--z-card); color: var(--z-ink); border: 1px solid var(--z-line);
  font-family: var(--z-num); letter-spacing: .2px;
  transition: transform .1s, background .15s, border-color .15s, box-shadow .18s;
}
.slot:active { transform: scale(.95); }
.slot.busy {
  background: var(--z-card-2); color: var(--z-ink-4);
  text-decoration: line-through; border-color: transparent;
}
.slot.closed {
  background: transparent; color: var(--z-ink-4);
  border-style: dashed; border-color: var(--z-line-2);
}
.slot.selected {
  background: linear-gradient(180deg, var(--z-primary-2), var(--z-primary));
  color: #fff; border-color: var(--z-primary);
  box-shadow: 0 4px 14px rgba(254,44,85,.3);
}
.slot.inrange { background: var(--z-primary-bg); color: var(--z-primary); border-color: var(--z-primary-line); }
.slot.mine { background: #EAF1FD; color: var(--s-confirmed-ink); border-color: #CFE0F8; }
.slot-occupied-note { text-align: center; font-size: 11px; color: var(--z-ink-3); margin-top: 11px; }

/* ===========================================================================
 * 14. 时间轴（预约状态跟踪）
 * ========================================================================= */
.timeline { padding: 4px 2px; }
.tl-item { display: flex; gap: 12px; position: relative; padding-bottom: 18px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item .tl-dot {
  width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; margin-top: 3px;
  background: var(--z-card); border: 2px solid var(--z-line-2); z-index: 2;
}
.tl-item .tl-line { position: absolute; left: 5px; top: 15px; bottom: 0; width: 2px; background: var(--z-line); }
.tl-item:last-child .tl-line { display: none; }
.tl-item.done .tl-dot { background: var(--z-primary); border-color: var(--z-primary); }
.tl-item.done .tl-line { background: var(--z-primary-line); }
.tl-item.active .tl-dot { background: var(--z-gold-2); border-color: var(--z-gold-2); box-shadow: 0 0 0 4px var(--z-gold-bg); }
.tl-item .tl-body { flex: 1; }
.tl-item .tl-title { font-size: var(--fs-body); font-weight: 600; color: var(--z-ink); }
.tl-item.todo .tl-title { color: var(--z-ink-3); }
.tl-item .tl-time { font-size: 11px; color: var(--z-ink-3); margin-top: 2px; font-family: var(--z-num); }

/* ===========================================================================
 * 15. 表单 / 提示条 / 合规
 * ========================================================================= */
.field-label { font-size: var(--fs-sm); color: var(--z-ink-2); margin: 0 2px 8px; }
.ta-wrap { background: var(--z-card); border-radius: var(--z-radius-md); padding: 13px; border: 1px solid var(--z-line); }
.ta-wrap textarea {
  width: 100%; min-height: 68px; background: transparent; border: none; outline: none; resize: none;
  color: var(--z-ink); font-size: var(--fs-body); line-height: 1.6;
}
.ta-wrap textarea::placeholder { color: var(--z-ink-3); }
.quick-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ta-count { text-align: right; font-size: 11px; color: var(--z-ink-3); margin-top: 6px; font-family: var(--z-num); }

/* 手机号授权条 */
.phone-row {
  display: flex; align-items: center; gap: 12px; padding: 14px;
  background: var(--z-card); border-radius: var(--z-radius-md); border: 1px solid var(--z-line);
}
.phone-row .pr-ico { font-size: 20px; }
.phone-row .pr-body { flex: 1; }
.phone-row .pr-label { font-size: var(--fs-body); font-weight: 600; }
.phone-row .pr-hint { font-size: 11px; color: var(--z-ink-3); margin-top: 2px; }
.phone-row .pr-value { font-size: 15px; font-weight: 700; color: var(--z-primary); letter-spacing: .5px; font-family: var(--z-num); }

/* 补齐：.notice —— views/store.js 与 views/time.js 在用，原样式表完全没有定义，
 *       导致「未匹配门店 / 门店不可约 / 到店时间提示」三条横幅塌成裸文本。
 *       现按 info（默认 / .info）与 warn（默认共用同一套，靠 .cp-ico 图标区分）两态补全。 */
.notice {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: var(--fs-sm); line-height: 1.6;
  background: var(--z-warn-bg); border: 1px solid var(--z-warn-line);
  color: var(--z-warn);
  border-radius: var(--z-radius-md); padding: 11px 13px;
}
.notice .cp-ico { flex: 0 0 auto; font-size: 13px; line-height: 1.45; }
.notice.info {
  background: var(--z-primary-bg); border-color: var(--z-primary-line); color: var(--z-primary);
}
.notice + .card, .card + .notice { margin-top: 13px; }
.notice.mb12 { margin-bottom: 13px; }

/* 合规提示 */
.compliance {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: 11px; color: var(--z-ink-2); line-height: 1.65;
  background: var(--z-card-2);
  border: 1px solid var(--z-line);
  border-radius: var(--z-radius-md); padding: 11px 13px;
}
.compliance .cp-ico { color: var(--z-primary); flex: 0 0 auto; font-size: 12px; line-height: 1.5; }

/* ===========================================================================
 * 16. 成功页
 * ========================================================================= */
.success-hero { text-align: center; padding: 22px 0 8px; }
.success-hero .sh-ico {
  width: 68px; height: 68px; border-radius: 50%; margin: 0 auto 14px; font-size: 30px;
  display: flex; align-items: center; justify-content: center;
  background: var(--z-card); border: 1.5px solid var(--z-primary-line);
  box-shadow: 0 0 0 7px var(--z-primary-bg), 0 6px 18px rgba(254,44,85,.14);
  animation: pop .45s var(--z-ease);
}
@keyframes pop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.06); } 100% { transform: scale(1); opacity: 1; } }
.success-hero .sh-title { font-family: var(--z-serif); font-size: 21px; font-weight: 700; letter-spacing: 2px; }
.success-hero .sh-sub { font-size: var(--fs-sm); color: var(--z-ink-2); margin-top: 6px; font-family: var(--z-num); }

.countdown-card {
  border-radius: var(--z-radius-lg); padding: 16px; text-align: center;
  background: linear-gradient(170deg, var(--z-gold-bg), var(--z-card));
  border: 1px solid var(--z-gold-line);
}
.countdown-card.done { background: linear-gradient(170deg, var(--z-primary-bg), var(--z-card)); border-color: var(--z-primary-line); }
.countdown-card .cd-label { font-size: var(--fs-sm); color: var(--z-ink-2); }
.countdown-card .cd-clock {
  font-family: var(--z-num); font-size: 34px; font-weight: 800; letter-spacing: 3px;
  color: var(--z-gold); margin: 6px 0; font-variant-numeric: tabular-nums;
}
.countdown-card.done .cd-clock { color: var(--z-primary); font-size: 26px; letter-spacing: 4px; }

.qr-box {
  width: min(172px, 62vw); height: min(172px, 62vw);
  margin: 14px auto; border-radius: var(--z-radius-md);
  background: #fff; display: flex; align-items: center; justify-content: center; padding: 11px;
  border: 1px solid var(--z-line);
  box-shadow: 0 4px 16px rgba(27,42,38,.07);
}
.qr-grid { display: grid; grid-template-columns: repeat(11, 1fr); grid-template-rows: repeat(11, 1fr); width: 100%; height: 100%; gap: 1px; }
.qr-grid i { background: transparent; }
.qr-grid i.on { background: var(--z-ink); }

.sms-bubble {
  background: var(--z-card); border-radius: var(--z-radius-md); padding: 13px; position: relative;
  border: 1px solid var(--z-line);
}
.sms-bubble .sb-head { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--z-ink-2); margin-bottom: 7px; }
.sms-bubble .sb-head .sb-badge {
  font-size: 10px; padding: 2px 7px; border-radius: 6px;
  background: var(--z-primary-bg); color: var(--z-primary); border: 1px solid var(--z-primary-line);
}
.sms-bubble .sb-text { font-size: var(--fs-body); line-height: 1.7; color: var(--z-ink); }
.sms-bubble.slide-in { animation: smsIn .42s var(--z-ease); }
@keyframes smsIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ===========================================================================
 * 17. 我的 / 卡券
 * ========================================================================= */
.profile-head { display: flex; align-items: center; gap: 14px; padding: 8px 4px 18px; }
.profile-head .ph-avatar {
  width: 64px; height: 64px; border-radius: 50%; font-size: 32px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, var(--z-primary-bg), var(--z-card));
  border: 1.5px solid var(--z-primary-line);
  box-shadow: 0 6px 18px rgba(254,44,85,.16);
}
.profile-head .ph-name { font-family: var(--z-serif); font-size: 19px; font-weight: 700; letter-spacing: .8px; }
.profile-head .ph-sub { font-size: var(--fs-sm); color: var(--z-ink-2); margin-top: 5px; }

.stat-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.stat-box {
  background: var(--z-card); border-radius: var(--z-radius-md); padding: 13px 8px; text-align: center;
  border: 1px solid var(--z-line);
}
.stat-box .sb-num { font-family: var(--z-num); font-size: 21px; font-weight: 800; color: var(--z-primary); }
.stat-box .sb-num.gold { color: var(--z-gold); }
.stat-box .sb-num.cyan { color: var(--z-primary-3); }
.stat-box .sb-cap { font-size: 11px; color: var(--z-ink-3); margin-top: 4px; }

.credit-bar { height: 8px; border-radius: 6px; background: var(--z-card-2); overflow: hidden; margin-top: 8px; }
.credit-bar i { display: block; height: 100%; border-radius: 6px; transition: width .45s var(--z-ease); }

.cp-card {
  border-radius: var(--z-radius-md); padding: 14px; display: flex; gap: 12px; align-items: center;
  border: 1px solid var(--z-line); background: var(--z-card); position: relative; overflow: hidden;
  box-shadow: var(--z-shadow-1);
}
.cp-card + .cp-card { margin-top: 10px; }
.cp-card.reserved { border-color: var(--z-primary-line); background: var(--z-paper-2); }
.cp-card.verified { opacity: .62; }
.cp-card.expired { opacity: .58; }
.cp-badge {
  width: 48px; height: 48px; border-radius: var(--z-radius-md); flex: 0 0 auto; font-size: 19px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, var(--z-primary-2), var(--z-primary)); color: #fff;
  box-shadow: 0 4px 12px rgba(254,44,85,.22);
}
.cp-badge.mt { background: linear-gradient(150deg, var(--z-gold-2), var(--z-gold)); box-shadow: 0 4px 12px rgba(168,121,31,.22); }
.cp-badge.pt { background: linear-gradient(150deg, #8C5FD4, var(--c-primary-p)); box-shadow: 0 4px 12px rgba(114,46,209,.22); }
.cp-body { flex: 1 1 auto; min-width: 0; }
.cp-name { font-size: var(--fs-body); font-weight: 700; }
.cp-code { font-size: 11px; color: var(--z-ink-3); letter-spacing: 1.2px; margin-top: 4px; font-family: var(--z-num); }
.cp-valid { font-size: 11px; color: var(--z-ink-3); margin-top: 4px; }

.expire-alert {
  display: flex; gap: 9px; align-items: center; font-size: var(--fs-sm);
  background: var(--z-warn-bg); border: 1px solid var(--z-warn-line);
  color: var(--z-warn); border-radius: var(--z-radius-md); padding: 11px 13px; margin-bottom: 12px;
  line-height: 1.55;
}

/* 星级评价 */
.star-row { display: flex; gap: 12px; justify-content: center; padding: 10px 0; }
.star-row .star { font-size: 33px; color: var(--z-line-2); transition: transform .12s var(--z-ease), color .15s; }
.star-row .star.on { color: var(--z-gold-2); }
.star-row .star:active { transform: scale(1.15); }

/* 图片上传 mock 网格 */
.img-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.img-grid .img-cell {
  aspect-ratio: 1; border-radius: var(--z-radius-sm); display: flex; align-items: center; justify-content: center;
  font-size: 21px; background: var(--z-card-2); border: 1px solid var(--z-line); position: relative;
}
.img-grid .img-cell.add { border-style: dashed; border-color: var(--z-line-2); color: var(--z-ink-3); }

/* ===========================================================================
 * 18. 底部 TabBar
 * ========================================================================= */
.tabbar {
  flex: 0 0 auto;
  height: calc(var(--tabbar-h) + var(--safe-bottom));
  display: flex; align-items: flex-start; padding-top: 7px;
  background: var(--z-paper-2); border-top: 1px solid var(--z-line);
  z-index: 45;
  position: relative;
}
.tabbar::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--z-gold-2) 24%, var(--z-gold-2) 76%, transparent);
  opacity: .38;
}
.tabbar.hidden { display: none; }
.tab-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: var(--z-ink-4); font-size: 10px; transition: color .18s;
}
.tab-item .ti-ico { font-size: 18px; line-height: 1; }
.tab-item.on { color: var(--z-primary); font-weight: 600; }
.tab-item.on .ti-ico { transform: translateY(-1px); }
.tab-item.on::after {
  content: ""; width: 16px; height: 2px; border-radius: 2px; background: var(--z-primary);
  margin-top: 1px;
}

/* ===========================================================================
 * 19. 浮层：Toast / Dialog / BottomSheet / Tooltip
 * ========================================================================= */
.overlays { position: absolute; inset: 0; pointer-events: none; z-index: 100; }
.overlays > * { pointer-events: auto; }

/* Toast */
.toast-host {
  position: absolute; left: 0; right: 0; top: 96px; display: flex; flex-direction: column;
  align-items: center; gap: 8px; pointer-events: none; z-index: 120;
}
.toast {
  max-width: 84%; padding: 10px 17px; border-radius: var(--z-radius-pill); font-size: 13px;
  background: rgba(27,42,38,.94); color: #fff;
  box-shadow: 0 10px 26px rgba(27,42,38,.28); backdrop-filter: blur(8px);
  animation: toastIn .24s var(--z-ease);
}
.toast.ok { background: rgba(254,44,85,.95); }
.toast.err { background: rgba(179,64,47,.95); }
.toast.info { background: rgba(27,42,38,.94); }
.toast.out { animation: toastOut .22s ease forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(-10px); } }

/* 遮罩 */
.mask {
  position: absolute; inset: 0; background: rgba(27,42,38,.42);
  display: flex; align-items: center; justify-content: center;
  animation: maskIn .2s ease; z-index: 110; backdrop-filter: blur(2px);
}
.mask.bottom { align-items: flex-end; }
@keyframes maskIn { from { opacity: 0; } to { opacity: 1; } }

/* Dialog */
.dialog {
  width: 286px; background: var(--z-card); border-radius: var(--z-radius-xl); overflow: hidden;
  border: 1px solid var(--z-line); animation: dlgIn .22s var(--z-ease);
  box-shadow: var(--z-shadow-3);
}
@keyframes dlgIn { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }
.dialog .dlg-title {
  font-family: var(--z-serif); font-size: var(--fs-h3); font-weight: 700; text-align: center;
  padding: 20px 18px 7px; letter-spacing: .8px;
}
.dialog .dlg-body { font-size: var(--fs-body); color: var(--z-ink-2); text-align: center; padding: 0 18px 18px; line-height: 1.65; }
.dialog .dlg-body.left { text-align: left; }
.dialog .dlg-actions { display: flex; border-top: 1px solid var(--z-line); }
.dialog .dlg-actions .btn { flex: 1; height: 48px; border-radius: 0; background: transparent; box-shadow: none; font-size: 15px; }
.dialog .dlg-actions .btn + .btn { border-left: 1px solid var(--z-line); }
.dialog .dlg-actions .btn-primary { color: var(--z-primary); background: transparent; }

/* BottomSheet */
.sheet {
  width: 100%; max-height: 78%; background: var(--z-paper-2); border-radius: var(--z-radius-xl) var(--z-radius-xl) 0 0;
  border-top: 1px solid var(--z-line); display: flex; flex-direction: column;
  animation: sheetIn .28s var(--z-ease); box-shadow: 0 -12px 34px rgba(27,42,38,.14);
}
@keyframes sheetIn { from { transform: translateY(100%); } to { transform: translateY(0); } }
.sheet .sh-handle { width: 38px; height: 4px; border-radius: 2px; background: var(--z-line-2); margin: 11px auto 4px; }
.sheet .sh-head { display: flex; align-items: center; padding: 6px 16px 11px; }
.sheet .sh-head .sh-title { font-family: var(--z-serif); font-size: var(--fs-h3); font-weight: 700; flex: 1; letter-spacing: .8px; }
.sheet .sh-head .sh-close { color: var(--z-ink-3); font-size: 20px; }
.sheet .sh-body { overflow-y: auto; padding: 0 16px 16px; }
.sheet .sh-foot { padding: 11px 16px calc(15px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--z-line); background: var(--z-card); }

/* 技师广场资料 */
.tech-hero {
  height: 152px; border-radius: var(--z-radius-lg); position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center; font-size: 60px;
  background: linear-gradient(150deg, var(--z-primary-bg), var(--z-card-2) 60%, var(--z-gold-bg));
  border: 1px solid var(--z-line);
}
.tech-hero .th-mask { position: absolute; inset: auto 0 0 0; height: 62%; background: linear-gradient(180deg, transparent, rgba(27,42,38,.62)); }
.tech-hero .th-name {
  position: absolute; left: 14px; bottom: 12px; font-family: var(--z-serif);
  font-size: 19px; font-weight: 700; color: #fff; letter-spacing: 1px;
}
.tech-hero .th-badge {
  position: absolute; right: 12px; top: 12px; font-size: 11px; padding: 4px 10px;
  border-radius: var(--z-radius-pill);
  background: rgba(27,42,38,.55); color: #fff; backdrop-filter: blur(4px);
}
.review-item { padding: 12px 0; border-bottom: 1px solid var(--z-line); }
.review-item:last-child { border-bottom: none; }
.review-item .ri-head { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--z-ink-3); }
.review-item .ri-head span:first-child { letter-spacing: 1px; }
.review-item .ri-text { font-size: var(--fs-body); color: var(--z-ink); margin-top: 6px; line-height: 1.65; }

/* ===========================================================================
 * 19b. 补齐：技师照片 / 视频资料画廊
 *      components/tech-card.js#mediaGalleryHtml 产出 .tech-media > .tm-tile
 *      > (.tm-thumb > .tm-play) + .tm-name —— 原样式表 5 个类全部未定义，
 *      「技师照片视频介绍」这一核心卖点此前完全无样式。
 * ========================================================================= */
.tech-media {
  display: grid;
  grid-template-columns: repeat(auto-fill, 96px);
  gap: 9px;
  justify-content: start;
}
.tm-tile { display: flex; flex-direction: column; gap: 6px; }
.tm-thumb {
  position: relative; width: 100%; aspect-ratio: 1 / 1;
  border-radius: var(--z-radius-sm); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: 32px;
  background: linear-gradient(150deg, var(--z-primary-bg), var(--z-card-2));
  border: 1px solid var(--z-line);
}
.tm-thumb::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 38%;
  background: linear-gradient(180deg, transparent, rgba(27,42,38,.26));
}
/* 视频瓦片：暖金描边 + 右上角时长角标，与照片区分 */
.tm-tile:has(.tm-play) .tm-thumb { border-color: var(--z-gold-line); background: linear-gradient(150deg, var(--z-gold-bg), var(--z-card-2)); }
.tm-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  z-index: 2; width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,253,248,.92); color: var(--z-primary);
  font-size: 11px; padding-left: 2px;
  box-shadow: 0 3px 12px rgba(27,42,38,.24);
}
.tm-name {
  font-size: 10.5px; color: var(--z-ink-2); text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: .2px;
}

/* Tooltip（时段不可用原因） */
.tip {
  position: absolute; z-index: 130; max-width: 196px;
  background: rgba(27,42,38,.96); color: #fff; font-size: 12px;
  padding: 8px 12px; border-radius: var(--z-radius-sm);
  box-shadow: 0 10px 26px rgba(27,42,38,.3); animation: toastIn .2s var(--z-ease);
  line-height: 1.5;
}
.tip::after {
  content: ""; position: absolute; left: 50%; bottom: -4.5px; transform: translateX(-50%) rotate(45deg);
  width: 9px; height: 9px; background: rgba(27,42,38,.96);
}

/* 重置按钮 */
.reset-btn {
  width: 100%; color: var(--z-danger); background: var(--z-danger-bg);
  border: 1px solid var(--z-danger-line); border-radius: var(--z-radius-md); height: 46px;
  font-size: var(--fs-body); font-weight: 600;
}

/* ===========================================================================
 * 20. 小工具
 * ========================================================================= */
.mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; } .mt16 { margin-top: 16px; }
.mb12 { margin-bottom: 12px; } .mb16 { margin-bottom: 16px; }
.tc { text-align: center; } .tr { text-align: right; }
.flex { display: flex; } .aic { align-items: center; } .jcb { justify-content: space-between; }
.gap8 { gap: 8px; } .gap12 { gap: 12px; }
.fs-sm { font-size: var(--fs-sm); } .fill { flex: 1; min-width: 0; }
.muted { color: var(--z-ink-2); } .muted3 { color: var(--z-ink-3); }
.bold { font-weight: 700; }
.divider { height: 1px; background: var(--z-line); margin: 13px 0; }
.nowrap { white-space: nowrap; }

/* 数字统一等宽，避免价格/时间对齐抖动 */
.price .num, .stat-box .sb-num, .cd-clock, .slot, .slot-occupied-note,
.date-chip .dc-day, .ta-count, .cp-code, .cc-code, .cv-num, .pc-num { font-variant-numeric: tabular-nums; }

/* ===========================================================================
 * 21. 无障碍与降级
 * ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
/* 系统深色偏好下：本端为固定浅色品牌主题，不做自动反转，仅避免浏览器强制反色 */
@media (prefers-color-scheme: dark) { html, body { color-scheme: light; } }

/* ===========================================================================
 * 22. 单屏预约「时段滑杆版」（Rev8 · 与 ③ miniprogram/pages/booking 同步）
 * ---------------------------------------------------------------------------
 * · 强调色 = 抖音红 #FE2C55（与本端主色 --c-primary-c 同值，--bk-accent 为其别名；
 *   全站已无第二强调色）。
 * · 房间一律免费（房间不参与计价）：全屏无「加价 / 服务费」字样。
 * · 构件命名 .bk-* 与真工程 app.ttss「单屏预约（时段滑杆版 · Rev8）」一一对应，
 *   单位由 rpx 换算为 px（1rpx = 0.5px @375pt）。
 * ========================================================================= */
:root {
  --bk-accent:    #FE2C55;   /* 抖音红 · = 全站主色 --c-primary-c（别名，消除屏内双强调色） */
  --bk-accent-2:  #FF5C7A;   /* 强调色渐变亮端（= --z-primary-2） */
  --bk-accent-bg: #FFE9EF;   /* 强调色浅底 */
  --bk-accent-bg2:#FFE0E6;   /* 强调色浅底（日期选中） */
  --bk-ok:        #52C41A;   /* 可约 / 免费 */
  --bk-warn:      #FA8C16;   /* 占用提示 */
}

/* —— 顶部门店 + 项目（只读头） —— */
.bk-head { background: var(--z-card); border-radius: var(--z-radius-lg); padding: 12px; border: 1px solid var(--z-line); }
.bk-store { display: flex; align-items: center; gap: 8px; }
.bk-store-ico { font-size: 22px; flex: 0 0 auto; }
.bk-store-nm { font-size: 15.5px; font-weight: 700; color: var(--z-ink); }
.bk-store-ad { margin-top: 3px; font-size: var(--fs-sm); color: var(--z-ink-3); }
.bk-svc { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--z-line); }
.bk-svc-cover {
  width: 48px; height: 48px; border-radius: 8px; flex: 0 0 auto;
  background: var(--bk-accent-bg); display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.bk-svc-price { font-size: 15.5px; font-weight: 700; color: var(--bk-accent); font-family: var(--z-num); white-space: nowrap; }

/* —— 分区标题（小号数字 + 标题 + 右侧计数，无框线） —— */
.bk-blk { margin-top: 18px; }
.bk-blk-first { margin-top: 6px; }
.bk-blk-hd { display: flex; align-items: baseline; gap: 7px; margin: 0 2px 9px; }
.bk-no { font-size: 11px; font-weight: 700; color: var(--bk-accent); letter-spacing: .5px; font-family: var(--z-num); }
.bk-tx { font-size: 15px; font-weight: 700; color: var(--z-ink); letter-spacing: .4px; }
.bk-rt { margin-left: auto; font-size: var(--fs-sm); color: var(--z-ink-3); }

/* —— ① 日期条 —— */
.bk-days { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.bk-days::-webkit-scrollbar { display: none; }
.bk-day {
  flex: 0 0 auto; width: 48px; padding: 7px 0 9px; margin: 0;
  border-radius: var(--z-radius-md); text-align: center; position: relative;
  background: var(--z-card); border: 1px solid var(--z-line);
  transition: background .15s, border-color .15s;
}
.bk-day-w { display: block; font-size: 11px; color: var(--z-ink-3); }
.bk-day-n { display: block; margin-top: 2px; font-size: 15px; font-weight: 700; color: var(--z-ink-2); font-family: var(--z-num); }
.bk-day.today .bk-day-w { color: var(--bk-accent); font-weight: 700; }
.bk-day.on { background: var(--bk-accent-bg2); border-color: var(--bk-accent-bg2); }
.bk-day.on .bk-day-w, .bk-day.on .bk-day-n { color: var(--bk-accent); }
.bk-day.on::after {
  content: ""; position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%);
  width: 16px; height: 2px; border-radius: 1px; background: var(--bk-accent);
}

/* —— ② 时段滑杆卡 —— */
.bk-slotcard { background: var(--z-card); border-radius: var(--z-radius-lg); padding: 14px 14px 10px; border: 1px solid var(--z-line); box-shadow: var(--z-shadow-1); }
.bk-slot-read { display: flex; align-items: flex-end; }
.bk-slot-big { font-size: 38px; font-weight: 800; line-height: 1; letter-spacing: -1px; color: var(--z-ink); font-family: var(--z-num); font-variant-numeric: tabular-nums; }
.bk-slot-meta { margin-left: auto; text-align: right; padding-bottom: 3px; }
.bk-slot-n { display: block; font-size: 15px; font-weight: 700; color: var(--bk-ok); }
.bk-slot-n.no { color: var(--z-ink-4); }
.bk-slot-k { display: block; margin-top: 2px; font-size: 11px; color: var(--z-ink-3); }
.bk-slider-wrap { position: relative; margin: 14px 0 2px; }
.bk-range-bg, .bk-range-fill { position: absolute; left: 14px; top: 14px; height: 6px; border-radius: 3px; pointer-events: none; }
.bk-range-bg { right: 14px; background: #EDEDED; }
.bk-range-fill { background: linear-gradient(90deg, rgba(254,44,85,.28), var(--bk-accent)); z-index: 1; }
.bk-range { position: relative; z-index: 2; display: block; width: 100%; height: 34px; margin: 0; background: transparent; outline: none; -webkit-appearance: none; appearance: none; }
.bk-range::-webkit-slider-runnable-track { height: 6px; background: transparent; border: none; }
.bk-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 28px; height: 28px; margin-top: -11px; border-radius: 50%;
  background: #fff; border: 2px solid var(--bk-accent);
  box-shadow: 0 2px 8px rgba(254,44,85,.35); cursor: pointer;
}
.bk-range::-moz-range-track { height: 6px; background: transparent; border: none; }
.bk-range::-moz-range-thumb {
  width: 26px; height: 26px; border-radius: 50%;
  background: #fff; border: 2px solid var(--bk-accent);
  box-shadow: 0 2px 8px rgba(254,44,85,.35); cursor: pointer;
}
.bk-dots { display: flex; gap: 1px; margin: 2px 14px 0; height: 5px; }
.bk-dot { flex: 1; height: 5px; border-radius: 1.5px; background: #F4F1EC; }
.bk-dot.l1 { background: #FFE0E6; }
.bk-dot.l2 { background: #FFB8C6; }
.bk-dot.l3 { background: #FF8AA0; }
.bk-dot.l4 { background: var(--bk-accent); }
.bk-scale { display: flex; justify-content: space-between; margin: 5px 14px 0; }
.bk-scale-t { font-size: 10px; color: var(--z-ink-4); font-family: var(--z-num); }

/* —— ③ 技师横滑卡 —— */
.bk-blk-tech { scroll-margin-top: 12px; }
.bk-tech-scroll { display: flex; gap: 12px; overflow-x: auto; padding: 2px 2px 6px; }
.bk-tech-scroll::-webkit-scrollbar { display: none; }
.bk-tcard {
  flex: 0 0 auto; width: 178px; box-sizing: border-box;
  padding: 14px 12px 11px; text-align: center;
  background: var(--z-card); border: 1px solid var(--z-line); border-radius: var(--z-radius-md);
  box-shadow: var(--z-shadow-1); cursor: pointer;
  transition: border-color .15s, background .15s, opacity .15s;
}
.bk-tcard.on { border-color: var(--bk-accent); background: #FFFAFB; }
.bk-tcard.dim { opacity: .45; }
.bk-avatar {
  width: 66px; height: 66px; border-radius: 50%; margin: 0 auto 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 700; position: relative; cursor: pointer;
}
.bk-avatar.a0 { background: #F2F3F5; color: #595959; }
.bk-avatar.a1 { background: #FFE9EF; color: #C61F45; }
.bk-avatar.a2 { background: #E7F0FF; color: #2E5AA8; }
.bk-avatar.a3 { background: #E9F7EF; color: #2E7D5B; }
.bk-avatar.a4 { background: #F3E9FB; color: #7A4FA8; }
.bk-avatar-tx { line-height: 1; }
.bk-avatar-dot {
  position: absolute; right: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--z-card); background: var(--bk-ok);
}
.bk-avatar-dot.busy { background: var(--s-pending); }
.bk-avatar-dot.off { background: var(--z-ink-4); }
.bk-tcard.on .bk-avatar-dot { border-color: #FFFAFB; }
.bk-avatar-zoom {
  position: absolute; right: 0; bottom: 0; width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; padding-bottom: 2px;
  background: rgba(0,0,0,.62); color: #fff; font-size: 14px; line-height: 1;
  border: 2px solid var(--z-card);
}
.bk-tcard-nm { font-size: 15px; font-weight: 700; color: var(--z-ink); }
.bk-tcard-lv { margin-top: 3px; font-size: 11px; color: var(--z-ink-3); }
.bk-tcard-sc { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 8px; }
.bk-tcard-star { font-size: 11px; color: var(--bk-accent); }
.bk-tcard-rating { font-size: 15px; font-weight: 700; font-family: var(--z-num); }
.bk-tcard-st {
  margin-top: 10px; padding: 7px 0; border-radius: 6px;
  font-size: 12px; font-weight: 700; background: var(--z-card-2); color: var(--z-ink-2);
}
.bk-tcard-st.ok { background: #ECF9E6; color: var(--bk-ok); }
.bk-tcard-st.no { background: var(--z-card-2); color: var(--z-ink-4); }
.bk-tcard.on .bk-tcard-st { background: var(--bk-accent); color: #fff; }
.bk-tdots { display: flex; justify-content: center; gap: 5px; margin-top: 4px; }
.bk-tdot { width: 5px; height: 5px; border-radius: 50%; background: #E5E5E5; transition: width .15s, background .15s; }
.bk-tdot.on { width: 16px; border-radius: 3px; background: var(--bk-accent); }

/* —— 房间折叠一行（房间免费） —— */
.bk-roomrow {
  display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box;
  padding: 11px 12px; background: var(--z-card); border: 1px solid var(--z-line);
  border-radius: var(--z-radius-md); text-align: left; line-height: normal;
}
.bk-roomrow:active { background: var(--z-paper-2); }
.bk-roomrow-ic {
  width: 36px; height: 36px; border-radius: 6px; flex: 0 0 auto;
  background: var(--z-card-2); display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.bk-roomrow-b { flex: 1 1 auto; min-width: 0; }
.bk-roomrow-nm { font-size: var(--fs-body); font-weight: 700; color: var(--z-ink); }
.bk-roomrow-sp { margin-top: 3px; font-size: 11px; color: var(--z-ink-3); }
.bk-roomrow-dg { font-size: 13px; font-weight: 700; color: var(--bk-ok); }
.bk-roomrow-ar { font-size: 14px; color: var(--z-ink-4); }

/* —— 底部固定 CTA —— */
.bk-cta-wrap {
  position: sticky; bottom: 0; z-index: 20; margin: 0 -14px;
  padding: 10px 14px calc(11px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(244,241,234,0) 0%, var(--z-paper) 30%, var(--z-paper) 100%);
}
.page > .bk-cta-wrap { margin-top: auto; }
.bk-cta {
  width: 100%; height: 48px; border-radius: var(--z-radius-md);
  display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0;
  font-size: 15px; font-weight: 700; line-height: 1; letter-spacing: .3px;
  background: linear-gradient(180deg, var(--bk-accent-2), var(--bk-accent)); color: #fff;
  box-shadow: 0 6px 16px rgba(254,44,85,.28);
  transition: transform .12s var(--z-ease), box-shadow .15s;
}
.bk-cta:active { transform: scale(.98); }
.bk-cta.idle { background: var(--z-card-2); color: var(--z-ink-3); box-shadow: none; }
.bk-cta-k { font-size: var(--fs-sm); font-weight: 600; opacity: .9; }
.bk-cta-sep { width: 1px; height: 14px; background: rgba(255,255,255,.45); }

/* —— 确认 Sheet：票据卡 —— */
.bk-slip { background: var(--z-card); border-radius: var(--z-radius-md); overflow: hidden; border: 1px solid var(--z-line); box-shadow: var(--z-shadow-1); }
.bk-slip-h { padding: 14px 14px 12px; border-bottom: 1px solid var(--z-line); }
.bk-slip-l { display: block; font-size: 10px; letter-spacing: 1px; color: var(--z-ink-3); }
.bk-slip-n { margin-top: 5px; font-size: 17px; font-weight: 700; color: var(--z-ink); }
.bk-slip-a { margin-top: 4px; font-size: 11px; color: var(--z-ink-3); }
.bk-slip-b { padding: 2px 14px 4px; }
.bk-slip-r { display: flex; align-items: center; padding: 11px 0; border-bottom: 1px dashed var(--z-line); }
.bk-slip-r:last-child { border-bottom: none; }
.bk-slip-k { width: 48px; flex: 0 0 auto; font-size: 12px; color: var(--z-ink-3); }
.bk-slip-v { margin-left: auto; text-align: right; font-size: 14px; font-weight: 700; color: var(--z-ink); }
.bk-slip-sub { display: block; margin-top: 2px; font-size: 11px; color: var(--z-ink-3); font-weight: 400; }
.bk-slip-f { display: flex; align-items: flex-end; padding: 12px 14px 14px; background: var(--z-card-2); }
.bk-slip-due { flex: 1 1 auto; min-width: 0; }
.bk-slip-due-k { display: block; font-size: 10px; color: var(--z-ink-3); }
.bk-slip-due-v { display: block; margin-top: 3px; font-size: 23px; font-weight: 800; color: var(--bk-accent); font-family: var(--z-num); }
.bk-slip-code { margin-left: auto; text-align: right; }
.bk-slip-code-k { display: block; font-size: 10px; color: var(--z-ink-3); }
.bk-slip-code-v { display: block; margin-top: 3px; font-size: 12px; font-weight: 700; font-family: var(--z-num); letter-spacing: .5px; }

/* —— 确认 Sheet：分区 / 费用 / 留言 / 手机号 —— */
.bk-blk2 { margin-top: 18px; }
.bk-fee { background: var(--z-card); border-radius: var(--z-radius-md); padding: 2px 14px; border: 1px solid var(--z-line); }
.bk-fee-r { display: flex; justify-content: space-between; padding: 11px 0; font-size: 13px; color: var(--z-ink-2); border-bottom: 1px solid var(--z-line); }
.bk-fee-r:last-child { border-bottom: none; }
.bk-fee-v { font-weight: 700; color: var(--z-ink); font-family: var(--z-num); }
.bk-fee-r.dis .bk-fee-v { color: var(--bk-ok); }
.bk-fee-r.sum > span:first-child { font-weight: 700; color: var(--z-ink); }
.bk-fee-r.sum .bk-fee-v { font-size: 17px; color: var(--bk-accent); }
.bk-ta { background: var(--z-card); border-radius: var(--z-radius-md); padding: 11px; border: 1px solid var(--z-line); }
.bk-ta-input { width: 100%; min-height: 60px; font-size: var(--fs-body); line-height: 1.6; background: transparent; border: none; outline: none; resize: none; color: var(--z-ink); }
.bk-ta-input::placeholder { color: var(--z-ink-3); }
.bk-qt { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.bk-qt-i { padding: 5px 10px; border-radius: 14px; background: var(--z-card-2); color: var(--z-ink-2); font-size: 11px; cursor: pointer; transition: background .15s, color .15s; }
.bk-qt-i.on { background: var(--bk-accent-bg2); color: var(--bk-accent); font-weight: 700; }
.bk-prow { display: flex; align-items: center; gap: 10px; padding: 12px; background: var(--z-card); border-radius: var(--z-radius-md); border: 1px solid var(--z-line); cursor: pointer; }
.bk-prow-ic { font-size: 20px; flex: 0 0 auto; }
.bk-prow-l { font-size: 13px; font-weight: 700; color: var(--z-ink); }
.bk-prow-h { margin-top: 3px; font-size: 11px; color: var(--z-ink-3); }
.bk-prow-v { font-size: 13px; font-weight: 700; color: var(--z-ink); font-family: var(--z-num); }
.bk-pad-sheet { height: 12px; }

/* —— 房间 Sheet：行 —— */
.bk-rrow {
  display: flex; align-items: center; gap: 10px; padding: 12px;
  background: var(--z-card); border: 1px solid transparent; border-radius: var(--z-radius-md); cursor: pointer;
}
.bk-rrow + .bk-rrow { margin-top: 8px; }
.bk-rrow.on { border-color: var(--bk-accent); background: #FFFAFB; }
.bk-rrow.dis { opacity: .45; cursor: default; }
.bk-rrow-ic {
  width: 40px; height: 40px; border-radius: 6px; flex: 0 0 auto;
  background: var(--z-card-2); display: flex; align-items: center; justify-content: center; font-size: 19px;
}
.bk-rrow.on .bk-rrow-ic { background: #fff; }
.bk-rrow-b { flex: 1 1 auto; min-width: 0; }
.bk-rrow-nm { font-size: 14px; font-weight: 700; color: var(--z-ink); }
.bk-rrow-sp { margin-top: 3px; font-size: 11px; color: var(--z-ink-3); }
.bk-rrow-st { margin-top: 3px; font-size: 11px; font-weight: 700; color: var(--bk-ok); }
.bk-rrow-st.bad { color: var(--bk-warn); }
.bk-rrow-free { font-size: 13px; font-weight: 700; color: var(--bk-ok); }
.bk-rad { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--z-line-2); flex: 0 0 auto; }
.bk-rrow.on .bk-rad { border-color: var(--bk-accent); background: var(--bk-accent); display: flex; align-items: center; justify-content: center; }
.bk-rrow.on .bk-rad::after { content: "✓"; color: #fff; font-size: 11px; font-weight: 700; line-height: 1; }