/* ==========================================================================
   归家礼遇 · 收房交付服务
   guijia.css —— 站点皮肤层
   --------------------------------------------------------------------------
   只消费 design-system 的令牌，不写死颜色 / 字号 / 圆角 / 间距。
   本站气质：暖赭金 + 衬线体 + 细金线分隔，保留"礼遇"的郑重感。
   视觉主题色由 [data-brand='guijia'] 的 --accent (#7A5A24) 提供。
   圆角纪律：卡片 --r-md / 按钮 --r-sm / 药丸 --r-full，同屏不超过三档。
   ========================================================================== */

/* ---------- 旧令牌别名 ----------
   业务 JS 里仍在用这两个名字（showToast 的内联样式），
   映射到新令牌，不改业务代码。
   -------------------------------------------------------------------------- */
:root {
  --gold-light: var(--accent-line);
  --safe-bottom: var(--safe-b);
}

/* ==========================================================================
   1. 画布与页面容器
   --------------------------------------------------------------------------
   app.js 的 openPage / closePage 只认 `.active`，首页只认 `#home-page.visible`。
   这两个类名一个字都不能改，否则会出现两页同显或页面永不出现。
   ========================================================================== */
#home-page {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-out);
}
#home-page.visible { opacity: 1; transform: none; }

/* 子页是 fixed 全屏层，会盖住 offline.js 顶部那条演示数据提示，
   连带把返回键压没。上边留出提示条实测高度（--shell-notice-h 由
   demo-data.js 量出写入；后端正常时该变量为 0，不占位）。 */
.app-page {
  position: fixed;
  top: var(--shell-notice-h, 0px);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-drawer);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background: var(--bg);
  transform: translateX(100%);
  transition: transform var(--dur-3) var(--ease-out);
  overscroll-behavior: contain;
}
.app-page.active {
  transform: none;
  z-index: var(--z-drawer);
}
/* 子页与首页同宽：宽屏下仍收在中缝画布里 */
@media (min-width: 560px) {
  .app-page { left: 50%; right: auto; margin-left: calc(var(--app-max) / -2); width: 100%; max-width: var(--app-max); }
}
@media (prefers-reduced-motion: reduce) {
  #home-page { opacity: 1; transform: none; transition: none; }
  .app-page { transition: none; }
}

/* 深色子页（老带新）：仅换令牌作用域，不改任何尺度 */
.on-dark {
  color-scheme: dark;
  --bg: #2A2016;
  --bg-sunken: #1D160F;
  --surface: #33281C;
  --surface-2: #3B2E20;
  --surface-inset: #241C14;
  --line: #4A3B28;
  --line-strong: #64523A;
  --ink: #F2EFE9;
  --ink-2: #D6CBB8;
  --muted: #A99C86;
  --faint: #8A7E6A;
  --accent: #C9A44C;
  --accent-hi: #DDB85E;
  --accent-soft: #3A2E1B;
  --accent-line: #6B5A32;
  --on-accent: #2A2016;
  --line-focus: #C9A44C;
}

/* ==========================================================================
   2. 顶栏品牌
   ========================================================================== */
.brand { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.brand__mark {
  font-family: var(--font-serif);
  font-size: var(--t-h3);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-heading);
  color: var(--ink);
  line-height: 1.15;
}
.brand__sub {
  font-size: var(--t-micro);
  letter-spacing: var(--ls-caps);
  color: var(--muted);
  margin-top: 1px;
}

/* ==========================================================================
   3. 首页 · 主视觉
   ========================================================================== */
.hero {
  padding: var(--s-5) var(--gutter) var(--s-6);
  background:
    radial-gradient(ellipse 78% 62% at 50% 26%, var(--accent-soft) 0%, transparent 72%);
  border-bottom: 1px solid var(--line);
}
.hero__inner {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  max-width: 34ch;
}
.hero__key {
  width: 40px; height: 40px;
  flex: 0 0 auto;
  color: var(--accent);
}
.hero__text { min-width: 0; }
.hero__eyebrow {
  font-size: var(--t-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-caps);
  color: var(--accent);
  margin-bottom: var(--s-2);
}
.hero__title {
  font-family: var(--font-display);
  font-size: var(--t-display);
  font-weight: var(--fw-semi);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--ink);
}
.hero__sub {
  margin-top: var(--s-2);
  font-family: var(--font-serif);
  font-size: var(--t-sm);
  line-height: var(--lh-body);
  color: var(--muted);
  font-weight: var(--fw-light);
}
/* 细金线收口：本站的"礼遇"记号，全页出现两次（主视觉 + 区块标题） */
.hero::after {
  content: '';
  display: block;
  width: 40px;
  height: 2px;
  margin-top: var(--s-5);
  background: linear-gradient(90deg, var(--accent), transparent);
  opacity: .55;
}

/* ==========================================================================
   4. 首页 · 小区实景视频
   ========================================================================== */
.video-card {
  display: block;
  width: 100%;
  padding: 0;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.video-card:active { transform: scale(.99); }
.video-card:hover { box-shadow: var(--shadow-md); }

.video-thumb-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(ellipse at 50% 38%, var(--accent-soft) 0%, transparent 62%),
    linear-gradient(135deg, var(--surface-inset) 0%, var(--surface-2) 52%, var(--bg-sunken) 100%);
  overflow: hidden;
}
/* 顶边金线 */
.video-card::before {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent-line), transparent);
}
/* 视频加载失败时的说明：由 app.js 的 error 监听挂上 .is-broken 后显示，
   正常时完全不占位，避免和「点击播放」引导重叠 */
.video-thumb-inner.is-media-broken .video-hint { display: none; }
.video-thumb-inner.is-media-broken .play-btn,
.video-thumb-inner.is-media-broken .video-duration-badge { display: none; }
.video-thumb-inner.is-media-broken::after {
  content: '实景视频暂缺';
  position: absolute;
  inset: auto 0 var(--s-5) 0;
  text-align: center;
  font-size: var(--t-micro);
  letter-spacing: var(--ls-caps);
  color: var(--faint);
}
.video-thumb-inner > .video-player,
.video-thumb-inner > video {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%; height: 100%;
  object-fit: contain;
  background: #000;
}
.video-player-close {
  position: absolute;
  top: var(--s-3); left: var(--s-3);
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min); height: var(--tap-min);
  border-radius: var(--r-full);
  background: color-mix(in srgb, #000 55%, transparent);
  color: #fff;
  font-size: var(--t-h3);
  line-height: 1;
}
.video-player-close:hover { background: color-mix(in srgb, #000 78%, transparent); }

.video-corner {
  position: absolute;
  width: 18px; height: 18px;
  z-index: 2;
  opacity: .5;
}
.video-corner::before, .video-corner::after {
  content: '';
  position: absolute;
  background: var(--accent);
}
.video-corner::before { width: 100%; height: 1.5px; }
.video-corner::after { width: 1.5px; height: 100%; }
.video-corner.tl { top: var(--s-3); left: var(--s-3); }
.video-corner.tl::before { top: 0; left: 0; }
.video-corner.tl::after { top: 0; left: 0; }
.video-corner.tr { top: var(--s-3); right: var(--s-3); }
.video-corner.tr::before { top: 0; right: 0; }
.video-corner.tr::after { top: 0; right: 0; }
.video-corner.bl { bottom: var(--s-3); left: var(--s-3); }
.video-corner.bl::before { bottom: 0; left: 0; }
.video-corner.bl::after { bottom: 0; left: 0; }
.video-corner.br { bottom: var(--s-3); right: var(--s-3); }
.video-corner.br::before { bottom: 0; right: 0; }
.video-corner.br::after { bottom: 0; right: 0; }

.play-btn {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px; height: 64px;
  border-radius: var(--r-full);
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent) 14%, transparent),
              0 0 0 22px color-mix(in srgb, var(--accent) 6%, transparent),
              var(--shadow-lg);
  transition: transform var(--dur-2) var(--ease-out);
}
.play-btn svg { margin-left: 3px; }
.video-card:active .play-btn { transform: scale(.95); }

.video-duration-badge {
  position: absolute;
  top: var(--s-3); right: var(--s-3);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-1) var(--s-3);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, #000 58%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #fff;
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-num);
}
.video-duration-badge svg { width: 12px; height: 12px; }

.video-hint {
  position: absolute;
  left: var(--s-4); right: var(--s-4); bottom: var(--s-4);
  z-index: 1;
  text-align: center;
  font-size: var(--t-xs);
  letter-spacing: .18em;
  color: var(--faint);
}

.video-info {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4);
  border-top: 1px solid var(--line);
}
.video-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  flex: 0 0 auto;
  border-radius: var(--r-full);
  background: var(--accent-soft);
  color: var(--accent);
}
.video-avatar svg { width: 21px; height: 21px; }
.video-meta { flex: 1; min-width: 0; display: block; }
.video-meta__title {
  display: block;
  font-size: var(--t-h3);
  font-weight: var(--fw-semi);
  color: var(--ink);
  line-height: var(--lh-tight);
}
.video-meta__desc {
  display: block;
  margin-top: 2px;
  font-size: var(--t-xs);
  color: var(--muted);
  line-height: var(--lh-tight);
}
.video-tag {
  flex: 0 0 auto;
  padding: 3px var(--s-3);
  border-radius: var(--r-full);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--t-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-caps);
}

/* ==========================================================================
   5. 首页 · 快捷入口（房屋档案 / 物业缴费）
   ========================================================================== */
.quick-entries { display: flex; flex-direction: column; gap: var(--s-3); }

.quick-entry {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  min-height: var(--tap-min);
  padding: var(--s-3) var(--s-4);
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--dur-2) var(--ease-out),
              transform var(--dur-1) var(--ease-out);
}
.quick-entry:hover { border-color: var(--line-strong); }
.quick-entry:active { transform: scale(.99); }
.quick-entry--accent { border-color: var(--accent-line); }

.quick-entry__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  flex: 0 0 auto;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--accent);
}
.quick-entry__icon svg { width: 18px; height: 18px; }
.quick-entry__body { flex: 1; min-width: 0; display: block; }
.quick-entry__title {
  display: block;
  font-size: var(--t-body);
  font-weight: var(--fw-semi);
  color: var(--ink);
  line-height: var(--lh-tight);
}
.quick-entry__desc {
  display: block;
  margin-top: 2px;
  font-size: var(--t-xs);
  color: var(--muted);
  line-height: var(--lh-tight);
}
.quick-entry__chev { flex: 0 0 auto; color: var(--faint); display: flex; }
.quick-entry__chev svg { width: 16px; height: 16px; }

.pay-spinner {
  display: none;
  width: 16px; height: 16px;
  flex: 0 0 auto;
  border: 2px solid var(--accent-line);
  border-top-color: var(--accent);
  border-radius: var(--r-full);
  animation: spin .8s linear infinite;
}

/* ==========================================================================
   6. 首页 · 业主服务九宫格
   ========================================================================== */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
  margin-top: var(--s-5);
}

.feature-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-2);
  min-height: 104px;
  padding: var(--s-4);
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color var(--dur-2) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out),
              transform var(--dur-1) var(--ease-out);
}
.feature-card:hover { border-color: var(--accent-line); box-shadow: var(--shadow-sm); }
.feature-card:active { transform: scale(.985); }

.feature-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--accent);
}
.feature-card__icon svg { width: 19px; height: 19px; }
.feature-card__name {
  font-size: var(--t-h3);
  font-weight: var(--fw-semi);
  color: var(--ink);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-heading);
}
.feature-card__desc {
  font-size: var(--t-xs);
  color: var(--muted);
  line-height: var(--lh-tight);
  margin-top: auto;
}

/* 老带新：唯一一张深卡，作为九宫格的视觉落点 */
.feature-card--dark {
  /* 深底作用域令牌 —— 这里写的不是"散落的颜色"，是"这块地方改用夜间档"。
     归家是浅色站，但九宫格里需要一张深卡做视觉落点，
     底部奖励提示条同理。两处共用同一组值，故在此定义一次。
     （值 = 本站 [data-theme] 夜间档的同名令牌） */
  color-scheme: dark;
  --dark-surface: #2A2016;
  --ink:          #F2EFE9;
  --muted:        #A99C86;
  --accent:       #C9A44C;
  --accent-soft:  #3A2E1B;

  background: var(--dark-surface);
  border-color: transparent;
}
.feature-card--dark .feature-card__name { color: var(--ink); }
.feature-card--dark .feature-card__desc { color: var(--muted); }
.feature-card--dark .feature-card__icon { color: var(--accent); background: var(--accent-soft); }
.feature-card--dark:hover { border-color: var(--accent); }
.feature-card--dark:focus-visible { outline-color: var(--accent); }

/* ==========================================================================
   7. 子页 · 通用头与内容
   ========================================================================== */
.sub-header {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: calc(var(--header-h) + var(--safe-t));
  padding: calc(var(--safe-t) + var(--s-3)) var(--gutter) var(--s-3);
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: saturate(1.5) blur(14px);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
  border-bottom: 1px solid var(--line);
}
.back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min); height: var(--tap-min);
  flex: 0 0 auto;
  margin-left: calc(var(--s-2) * -1);
  border-radius: var(--r-full);
  background: var(--surface-inset);
  color: var(--ink);
  transition: background var(--dur-1) var(--ease-out);
}
.back-btn:hover { background: var(--accent-soft); color: var(--accent); }
.back-btn svg { width: 18px; height: 18px; }
.sub-header__title {
  font-family: var(--font-serif);
  font-size: var(--t-h3);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-heading);
  color: var(--ink);
  white-space: nowrap;
}
.sub-header__label {
  margin-left: auto;
  font-size: var(--t-micro);
  letter-spacing: var(--ls-caps);
  color: var(--faint);
  white-space: nowrap;
}
.sub-header--dark { border-bottom-color: var(--line); }
.sub-header--dark .sub-header__label { color: var(--muted); }
.back-btn--dark { background: color-mix(in srgb, var(--ink) 10%, transparent); color: var(--accent); }
.back-btn--dark:hover { background: color-mix(in srgb, var(--ink) 16%, transparent); }

.sub-content {
  padding: var(--s-6) var(--gutter) calc(var(--safe-b) + var(--s-9));
  max-width: var(--app-max);
  margin-inline: auto;
}
.sub-content--dark { background: var(--bg); }

.section-label {
  font-size: var(--t-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-caps);
  color: var(--accent);
  margin-bottom: var(--s-3);
}
.section-label--gap { margin-top: var(--s-7); }
.section-title {
  font-family: var(--font-display);
  font-size: var(--t-h1);
  font-weight: var(--fw-semi);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-display);
  color: var(--ink);
}
.section-divider {
  display: block;
  width: 40px;
  height: 2px;
  margin: var(--s-4) 0 var(--s-6);
  background: linear-gradient(90deg, var(--accent), transparent);
  opacity: .55;
}
.section-divider--short { margin: var(--s-3) 0 var(--s-5); }
.footnote {
  margin-top: var(--s-4);
  font-size: var(--t-xs);
  line-height: var(--lh-body);
  color: var(--faint);
  text-align: center;
}

/* ==========================================================================
   8. 子页 · 质保报修
   ========================================================================== */
.warranty-card {
  position: relative;
  padding: var(--s-6);
  background: var(--surface);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.warranty-card__head {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--line);
}
.warranty-seal {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  flex: 0 0 auto;
  border-radius: var(--r-full);
  background: var(--accent-soft);
  color: var(--accent);
}
.warranty-card__title {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--t-h3);
  font-weight: var(--fw-semi);
  color: var(--ink);
  line-height: var(--lh-tight);
}
.warranty-card__no {
  display: block;
  margin-top: var(--s-1);
  font-size: var(--t-xs);
  font-family: var(--font-mono);
  color: var(--faint);
  letter-spacing: var(--ls-num);
}

.warranty-items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
  margin: var(--s-5) 0;
}
.warranty-item {
  padding: var(--s-4);
  background: var(--surface-inset);
  border-radius: var(--r-md);
}
.warranty-item__icon { display: block; color: var(--accent); }
.warranty-item__icon svg { width: 26px; height: 26px; }
.warranty-item__label {
  display: block;
  margin-top: var(--s-3);
  font-size: var(--t-xs);
  color: var(--muted);
}
.warranty-item__value {
  display: block;
  margin-top: 2px;
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: var(--fw-semi);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-num);
}

/* ==========================================================================
   9. 子页 · 生活指南
   ========================================================================== */
.media--tap {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  cursor: pointer;
}
.media-caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--s-2) var(--s-3) var(--s-3);
  background: linear-gradient(to top, color-mix(in srgb, #000 55%, transparent), transparent);
  color: #fff;
  font-size: var(--t-micro);
  letter-spacing: var(--ls-caps);
  text-align: center;
}
.life-figure { margin-bottom: var(--s-5); }
.archive-floorplan { margin-top: var(--s-4); }

.life-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-3);
}
.life-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color var(--dur-2) var(--ease-out),
              transform var(--dur-1) var(--ease-out);
}
.life-item:hover { border-color: var(--accent-line); }
.life-item:active { transform: translateY(-2px); }
.life-item__icon { display: flex; color: var(--accent); }
.life-item__icon svg { width: 26px; height: 26px; }
.life-item__name {
  font-size: var(--t-sm);
  font-weight: var(--fw-semi);
  color: var(--ink);
  line-height: var(--lh-tight);
}
.life-item__count {
  font-size: var(--t-micro);
  color: var(--muted);
  text-align: center;
  line-height: var(--lh-tight);
}

/* ==========================================================================
   10. 子页 · 社区活动
   ========================================================================== */
.activity-list { display: flex; flex-direction: column; gap: var(--s-3); }

.activity-item {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  width: 100%;
  padding: var(--s-4);
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color var(--dur-2) var(--ease-out),
              transform var(--dur-1) var(--ease-out);
}
.activity-item:hover { border-color: var(--accent-line); }
.activity-item:active { transform: scale(.99); }
.activity-item--static { cursor: default; }
.activity-item--static:hover { border-color: var(--line); }
.activity-item--static:active { transform: none; }

.activity-date { flex: 0 0 auto; width: 40px; text-align: center; }
.activity-date__day {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: var(--fw-semi);
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.activity-date__month {
  display: block;
  margin-top: 3px;
  font-size: var(--t-micro);
  letter-spacing: var(--ls-caps);
  color: var(--faint);
}
.activity-date--icon { display: flex; align-items: center; justify-content: center; width: 40px; }
.activity-date--icon svg { width: 21px; height: 21px; color: var(--accent); }

.activity-divider { flex: 0 0 auto; width: 1px; height: 34px; background: var(--line); }
.activity-info { flex: 1; min-width: 0; display: block; }
.activity-info__title {
  display: block;
  font-size: var(--t-body);
  font-weight: var(--fw-semi);
  color: var(--ink);
  line-height: var(--lh-tight);
}
.activity-info__desc {
  display: block;
  margin-top: 3px;
  font-size: var(--t-xs);
  color: var(--muted);
  line-height: var(--lh-tight);
}
.activity-tag {
  flex: 0 0 auto;
  padding: 3px var(--s-3);
  border-radius: var(--r-full);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--t-micro);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}
.activity-tag--info { background: var(--info-soft); color: var(--info); }
.activity-tag--warn { background: var(--warn-soft); color: var(--warn); }
/* 已报名：业务 JS 会内联覆盖底色/字色，这里只保证对比度基线 */
.event-reg-tag {
  transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
/* 已报名：实心语义底。原来是 15% 透明绿 + 绿字，实测只有 3.5:1 */
.event-reg-tag--on {
  background: var(--success);
  color: var(--on-accent);
}

/* ==========================================================================
   11. 子页 · 老带新（深色）
   ========================================================================== */
.referral-reward {
  padding: var(--s-6);
  margin-bottom: var(--s-4);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-lg);
}
.referral-reward__row { display: flex; align-items: flex-end; gap: var(--s-2); }
.reward-amount {
  font-family: var(--font-display);
  font-size: var(--t-display);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: var(--ls-num);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.reward-amount span { font-size: var(--t-h3); }
.reward-amount__note {
  margin-bottom: var(--s-1);
  font-size: var(--t-xs);
  color: var(--muted);
}
.referral-reward__desc {
  margin-top: var(--s-3);
  font-size: var(--t-sm);
  line-height: var(--lh-body);
  color: var(--ink-2);
}
.reward-tiers { display: flex; gap: var(--s-3); margin-top: var(--s-5); }
.tier-badge {
  flex: 1;
  padding: var(--s-3) var(--s-2);
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.tier-badge__num {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: var(--fw-bold);
  color: var(--accent);
  letter-spacing: var(--ls-num);
  font-variant-numeric: tabular-nums;
}
.tier-badge__label {
  display: block;
  margin-top: var(--s-2);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-caps);
  color: var(--muted);
}

.referral-stats {
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.referral-stats__head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--line);
}
.referral-stats__icon { display: flex; color: var(--accent); }
.referral-stats__icon svg { width: 22px; height: 22px; }
.referral-stats__title {
  display: block;
  font-size: var(--t-sm);
  font-weight: var(--fw-semi);
  color: var(--ink);
  line-height: var(--lh-tight);
}
.referral-stats__note {
  display: block;
  margin-top: 2px;
  font-size: var(--t-micro);
  color: var(--muted);
}
.referral-stats__grid { display: flex; gap: var(--s-4); margin-top: var(--s-5); }
.referral-stat { flex: 1; text-align: center; }
.referral-stat__value {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-h1);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--accent);
  letter-spacing: var(--ls-num);
  font-variant-numeric: tabular-nums;
}
.referral-stat__label {
  margin-top: var(--s-2);
  font-size: var(--t-micro);
  color: var(--muted);
}
.referral-share { margin-top: var(--s-5); }
.nfc-hint {
  margin-top: var(--s-5);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-caps);
  /* 它落在 accent-soft 上，不是 bg —— --faint 对这个底不够 */
  color: var(--muted);
  text-align: center;
}

/* ==========================================================================
   12. 子页 · 房屋档案
   ========================================================================== */
.archive-tabs {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
  padding-bottom: var(--s-4);
}
.archive-tab {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 0 var(--s-4);
  border-radius: var(--r-full);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font-size: var(--t-sm);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  transition: background var(--dur-2) var(--ease-out),
              color var(--dur-2) var(--ease-out),
              border-color var(--dur-2) var(--ease-out);
}
.archive-tab:hover { border-color: var(--line-strong); color: var(--ink); }
.archive-tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.archive-tab-panel { display: none; }
.archive-tab-panel.active { display: block; }

.archive-card {
  padding: var(--s-4) var(--s-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.archive-card__row { padding-block: var(--s-2); }
.archive-card__k { flex: 0 0 auto; color: var(--muted); }
.archive-card__v { color: var(--ink); font-weight: var(--fw-medium); text-align: right; }

.archive-warranty-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
}
.archive-warranty-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-4);
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.aw-icon { display: flex; color: var(--accent); margin-bottom: var(--s-1); }
.aw-icon svg { width: 24px; height: 24px; }
.aw-name { font-size: var(--t-xs); color: var(--muted); }
.aw-years {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: var(--fw-semi);
  color: var(--ink);
  line-height: var(--lh-tight);
  font-variant-numeric: tabular-nums;
}
.aw-status {
  padding: 2px var(--s-3);
  border-radius: var(--r-full);
  font-size: var(--t-micro);
  font-weight: var(--fw-medium);
}
.aw-status--valid { background: var(--success-soft); color: var(--success); }

/* 空态与记录行（由 app.js 注入） */
/* 面板内的空态：共享 .empty 默认是整页级留白，嵌在档案面板里会太空 */
.empty--inline { padding: var(--s-7) var(--s-5); }
.empty--inline .empty__art { width: 48px; height: 48px; }
.empty--inline .empty__art svg { width: 22px; height: 22px; }
.archive-record {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4);
  margin-bottom: var(--s-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color var(--dur-2) var(--ease-out),
              transform var(--dur-1) var(--ease-out);
}
.archive-record:hover { border-color: var(--accent-line); }
.archive-record:active { transform: scale(.99); }
.archive-record-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  flex: 0 0 auto;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
}
.archive-record-icon svg { width: 18px; height: 18px; }
.archive-record-info { flex: 1; min-width: 0; }
.archive-record-title {
  font-size: var(--t-sm);
  font-weight: var(--fw-semi);
  color: var(--ink);
  line-height: var(--lh-tight);
}
.archive-record-meta {
  margin-top: 3px;
  font-size: var(--t-micro);
  color: var(--muted);
}
.archive-record-badge {
  flex: 0 0 auto;
  padding: 3px var(--s-3);
  border-radius: var(--r-full);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--t-micro);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}
.archive-record-arrow {
  flex: 0 0 auto;
  color: var(--faint);
  font-size: var(--t-body);
  line-height: 1;
}
/* 记录里的内联色值统一交给令牌，避免业务注入的十六进制破坏主题 */
.archive-record-icon[style*='rgba'] { background: var(--accent-soft); }

/* ==========================================================================
   13. 弹层 · 通用
   ========================================================================== */
.modal-overlay,
.category-detail-overlay,
.quick-form-overlay,
.gb-overlay,
.archive-detail-overlay,
.poster-preview-overlay,
.image-zoom-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-2) var(--ease-out);
}
.modal-overlay,
.archive-detail-overlay { z-index: var(--z-modal); }
.category-detail-overlay,
.quick-form-overlay,
.gb-overlay { z-index: calc(var(--z-modal) + 10); }
.poster-preview-overlay,
.image-zoom-overlay { z-index: calc(var(--z-modal) + 20); }

.modal-overlay,
.category-detail-overlay,
.quick-form-overlay,
.gb-overlay { align-items: flex-end; background: color-mix(in srgb, #000 46%, transparent); }
.archive-detail-overlay { align-items: center; justify-content: center; background: color-mix(in srgb, #000 46%, transparent); }
.poster-preview-overlay { align-items: center; justify-content: center; background: color-mix(in srgb, #000 84%, transparent); }
.image-zoom-overlay { align-items: center; justify-content: center; background: color-mix(in srgb, #000 88%, transparent); }

.modal-overlay.show,
.category-detail-overlay.show,
.quick-form-overlay.show,
.gb-overlay.show,
.archive-detail-overlay.show,
.poster-preview-overlay.show,
.image-zoom-overlay.show { opacity: 1; pointer-events: auto; }

.modal-sheet,
.category-detail-sheet,
.quick-form-sheet,
.gb-sheet {
  width: 100%;
  max-width: var(--app-max);
  margin-inline: auto;
  max-height: 86dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--s-4) var(--s-5) calc(var(--safe-b) + var(--s-6));
  background: var(--surface);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--shadow-xl);
  transform: translateY(100%);
  transition: transform var(--dur-3) var(--ease-out);
}
.modal-overlay.show .modal-sheet,
.category-detail-overlay.show .category-detail-sheet,
.quick-form-overlay.show .quick-form-sheet,
.gb-overlay.show .gb-sheet { transform: none; }

.modal-handle {
  display: block;
  width: 36px; height: 4px;
  margin: 0 auto var(--s-4);
  border-radius: var(--r-full);
  background: var(--line-strong);
}
.modal-title {
  margin-bottom: var(--s-5);
  font-family: var(--font-serif);
  font-size: var(--t-h2);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-heading);
  color: var(--ink);
}

/* 表单：业务 JS 靠 getElementById 取值，结构可换、id 不可换 */
.form-stack { display: flex; flex-direction: column; gap: var(--s-4); }
.form-stack .field + .field { margin-top: 0; }

.upload-area {
  display: block;
  padding: var(--s-4);
  text-align: center;
  background: var(--surface-inset);
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
}
.upload-area:hover { border-color: var(--accent); }
.upload-area.has-images { padding: var(--s-3); }
.upload-placeholder {
  display: block;
  font-size: var(--t-sm);
  color: var(--muted);
}
.upload-placeholder svg { margin: 0 auto var(--s-2); color: var(--accent); }
.upload-preview { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.upload-preview:not(:empty) { margin-top: var(--s-3); }
.upload-preview img {
  width: 64px; height: 64px;
  object-fit: cover;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
}

/* ==========================================================================
   14. 弹层 · 档案详情
   ========================================================================== */
.archive-detail-card {
  width: calc(100% - var(--s-9));
  max-width: 380px;
  max-height: 82dvh;
  overflow-y: auto;
  padding: var(--s-6);
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xl);
  transform: scale(.94);
  transition: transform var(--dur-3) var(--ease-spring);
}
.archive-detail-overlay.show .archive-detail-card { transform: none; }
.archive-detail-title {
  font-family: var(--font-serif);
  font-size: var(--t-h3);
  font-weight: var(--fw-bold);
  color: var(--ink);
  text-align: center;
  line-height: var(--lh-tight);
}
.archive-detail-subtitle {
  margin-top: var(--s-2);
  margin-bottom: var(--s-5);
  font-size: var(--t-xs);
  color: var(--faint);
  text-align: center;
}
.archive-detail-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-3) 0;
  font-size: var(--t-sm);
  border-top: 1px solid var(--line);
}
.archive-detail-row .dl { flex: 0 0 auto; color: var(--muted); }
.archive-detail-row .dv { color: var(--ink); font-weight: var(--fw-medium); text-align: right; }

/* ==========================================================================
   15. 弹层 · 团购
   ========================================================================== */
.gb-sheet__title {
  font-family: var(--font-serif);
  font-size: var(--t-h2);
  font-weight: var(--fw-bold);
  color: var(--ink);
  text-align: center;
}
.gb-sheet__sub {
  margin: var(--s-2) 0 var(--s-5);
  font-size: var(--t-xs);
  color: var(--muted);
  text-align: center;
}
.gb-product-card {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4);
  margin-bottom: var(--s-3);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.gb-product-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  flex: 0 0 auto;
  border-radius: var(--r-md);
  background: var(--accent-soft) !important;
  font-size: 26px;
  line-height: 1;
}
.gb-product-info { flex: 1; min-width: 0; }
.gb-product-name {
  font-size: var(--t-body);
  font-weight: var(--fw-semi);
  color: var(--ink);
  line-height: var(--lh-tight);
}
.gb-product-desc {
  margin-top: 2px;
  font-size: var(--t-xs);
  color: var(--muted);
}
.gb-price-row { display: flex; align-items: baseline; gap: var(--s-2); margin-top: var(--s-2); }
.gb-original-price {
  font-size: var(--t-xs);
  color: var(--faint);
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}
.gb-group-price {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: var(--fw-bold);
  color: var(--danger);
  letter-spacing: var(--ls-num);
  font-variant-numeric: tabular-nums;
}
.gb-group-price .unit { font-size: var(--t-sm); font-weight: var(--fw-normal); }
.gb-progress-row { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-2); }
.gb-progress-bar {
  flex: 1;
  height: 6px;
  border-radius: var(--r-full);
  background: var(--surface-inset);
  overflow: hidden;
}
.gb-progress-fill {
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: width var(--dur-3) var(--ease-out);
}
.gb-progress-text {
  flex: 0 0 auto;
  font-size: var(--t-micro);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.gb-join-btn {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 var(--s-4);
  border-radius: var(--r-sm);
  background: var(--accent);
  color: var(--on-accent);
  font-size: var(--t-sm);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  transition: background var(--dur-2) var(--ease-out);
}
.gb-join-btn:hover { background: var(--accent-hi); }
.gb-join-btn.joined { background: var(--success); color: #fff; }

/* ==========================================================================
   16. 弹层 · 周边配套详情
   ========================================================================== */
.cat-detail-title {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
  font-family: var(--font-serif);
  font-size: var(--t-h2);
  font-weight: var(--fw-semi);
  color: var(--ink);
}
.cat-detail-title__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  flex: 0 0 auto;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--accent);
}
.cat-detail-title__icon svg { width: 18px; height: 18px; }
.cat-subgroup { margin-bottom: var(--s-5); }
.cat-subgroup-label {
  margin-bottom: var(--s-2);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-caps);
  color: var(--accent);
}
.cat-subgroup-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-2);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  color: var(--ink);
}
.cat-subgroup-item .dist {
  flex: 0 0 auto;
  font-size: var(--t-xs);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ==========================================================================
   17. 弹层 · 推荐海报
   ========================================================================== */
#posterCanvas {
  max-width: min(86vw, 340px);
  max-height: 62dvh;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-xl);
}
.poster-preview-overlay .btn { margin-top: var(--s-5); width: auto; min-width: 200px; }
.poster-close-btn {
  min-height: var(--tap-min);
  margin-top: var(--s-3);
  padding: 0 var(--s-6);
  border: 1px solid color-mix(in srgb, #fff 32%, transparent);
  border-radius: var(--r-full);
  color: #fff;
  font-size: var(--t-sm);
}
.poster-close-btn:hover { background: color-mix(in srgb, #fff 12%, transparent); }

/* ==========================================================================
   18. 弹层 · 图片放大
   ========================================================================== */
#imageZoomImg {
  max-width: 94vw;
  max-height: 88dvh;
  object-fit: contain;
}
/* 大图弹层里没有 .media 宿主，素材失效时 app-shell 的兜底会落到
   .image-zoom-overlay 自身上，而通用 .img-fallback 的文案色是给浅底
   设计的 —— 压在 88% 黑底上等于全黑，弹层就剩一块黑。这里就地改写：
   占位框用浅色描边 + 浅色文案，和关闭键同一套白系语言。 */
.image-zoom-overlay.img-fallback {
  background-image: none;
  min-height: 0;
}
/* 失效的 img 仍占着 76x26 的 flex 位（app-shell 只给了 visibility:hidden），
   会把占位框挤偏，这里直接从布局里摘掉 */
.image-zoom-overlay.img-fallback > #imageZoomImg { display: none; }
.image-zoom-overlay.img-fallback::after {
  content: attr(data-fallback);
  position: static;
  inset: auto;
  padding: var(--s-5) var(--s-6);
  border: 1px solid color-mix(in srgb, #fff 22%, transparent);
  border-radius: var(--r-lg);
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-heading);
  color: color-mix(in srgb, #fff 78%, transparent);
  text-align: center;
}
.image-zoom-close {
  position: absolute;
  top: var(--s-4); right: var(--s-4);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min); height: var(--tap-min);
  border-radius: var(--r-full);
  background: color-mix(in srgb, #fff 16%, transparent);
  color: #fff;
}
.image-zoom-close svg { width: 20px; height: 20px; }
.image-zoom-close:hover { background: color-mix(in srgb, #fff 26%, transparent); }

/* ==========================================================================
   19. 首页 · 老带新奖励提示条
   ========================================================================== */
#reward-popup {
  position: fixed;
  left: 50%;
  bottom: calc(var(--safe-b) + var(--s-5));
  transform: translate(-50%, 140%);
  z-index: var(--z-toast);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: calc(100% - var(--s-8));
  max-width: calc(var(--app-max) - var(--s-8));
  padding: var(--s-4);
  /* 与 .feature-card--dark 同一组深底令牌：两处是同一个视觉语汇 */
  color-scheme: dark;
  --dark-surface: #2A2016;
  --ink:          #F2EFE9;
  --muted:        #A99C86;

  background: var(--dark-surface);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xl);
  opacity: 0;
  transition: transform var(--dur-4) var(--ease-spring), opacity var(--dur-3) var(--ease-out);
}
#reward-popup.show { transform: translate(-50%, 0); opacity: 1; }
.popup-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  flex: 0 0 auto;
  border-radius: var(--r-full);
  background: var(--accent-soft);
  color: var(--accent);
}
.popup-icon svg { width: 22px; height: 22px; }
.popup-text { flex: 1; min-width: 0; display: block; }
.popup-text__title {
  display: block;
  font-size: var(--t-sm);
  font-weight: var(--fw-semi);
  color: var(--ink);
  line-height: var(--lh-tight);
}
.popup-text__desc {
  display: block;
  margin-top: 3px;
  font-size: var(--t-xs);
  color: var(--muted);
  line-height: var(--lh-tight);
}
.popup-close {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  flex: 0 0 auto;
  border-radius: var(--r-full);
  color: var(--muted);
}
.popup-close svg { width: 15px; height: 15px; }
.popup-close:hover { background: color-mix(in srgb, #fff 10%, transparent); color: var(--ink); }
/* 热区补到 44x44：视觉仍是 32x32 的圆钮，只有命中层往外撑。
   关闭按钮点不准是移动端最气人的事之一 —— 越急越点不中。 */
.popup-close::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: max(100%, var(--tap-min, 44px));
  height: max(100%, var(--tap-min, 44px));
  transform: translate(-50%, -50%);
  border-radius: inherit;
}

/* ==========================================================================
   20. 子页 · 专属管家
   ========================================================================== */
.butler-profile {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-5);
  margin-bottom: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.butler-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  flex: 0 0 auto;
  border-radius: var(--r-full);
  background: var(--accent);
  color: var(--on-accent);
}
.butler-avatar svg { width: 28px; height: 28px; }
.butler-profile__body { min-width: 0; }
.butler-profile__name {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--t-h3);
  font-weight: var(--fw-semi);
  color: var(--ink);
  line-height: var(--lh-tight);
}
.butler-profile__desc {
  display: block;
  margin-top: var(--s-1);
  font-size: var(--t-xs);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.butler-service-list { display: flex; flex-direction: column; gap: var(--s-3); }
.butler-service-item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  padding: var(--s-4);
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color var(--dur-2) var(--ease-out),
              transform var(--dur-1) var(--ease-out);
}
.butler-service-item:hover { border-color: var(--accent-line); }
.butler-service-item:active { transform: scale(.99); }
.butler-service-item--promo { border-color: var(--accent-line); background: var(--accent-soft); }
.butler-service-icon {
  width: 36px; height: 36px;
  border-radius: var(--r-sm);
  background: var(--surface-inset);
  color: var(--accent);
}
.butler-service-icon svg { width: 18px; height: 18px; }
.butler-service-info { flex: 1; min-width: 0; display: block; }
.butler-service-info__title {
  display: block;
  font-size: var(--t-body);
  font-weight: var(--fw-semi);
  color: var(--ink);
  line-height: var(--lh-tight);
}
.butler-service-info__desc {
  display: block;
  margin-top: 2px;
  font-size: var(--t-xs);
  color: var(--muted);
  line-height: var(--lh-tight);
}
.butler-service-arrow { flex: 0 0 auto; display: flex; color: var(--faint); }
.butler-service-arrow svg { width: 16px; height: 16px; }

/* ==========================================================================
   21. 子页 · 物业缴费
   ========================================================================== */
.payment-total-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  margin-bottom: var(--s-5);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-md);
}
.payment-total-bar__label { font-size: var(--t-sm); color: var(--ink-2); }
.payment-total-bar__amount {
  font-family: var(--font-display);
  font-size: var(--t-h1);
  font-weight: var(--fw-bold);
  color: var(--accent);
  letter-spacing: var(--ls-num);
  font-variant-numeric: tabular-nums;
}

.payment-section-title {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: var(--s-6) 0 var(--s-3);
  font-size: var(--t-sm);
  font-weight: var(--fw-semi);
  color: var(--ink);
}
.payment-section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

.payment-bill-card {
  padding: var(--s-4) var(--s-5);
  margin-bottom: var(--s-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong);
  border-radius: var(--r-md);
  transition: border-color var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out);
}
.payment-bill-card.urgent { border-left-color: var(--warn); }
.payment-bill-card.paid { border-left-color: var(--success); opacity: .72; }
.payment-bill-card.paid .payment-bill-amount { color: var(--success); }
.payment-bill-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-2);
}
.payment-bill-name {
  font-size: var(--t-sm);
  font-weight: var(--fw-semi);
  color: var(--ink);
}
.payment-bill-amount {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: var(--fw-bold);
  color: var(--warn);
  font-variant-numeric: tabular-nums;
}
.payment-bill-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: var(--s-1);
  font-size: var(--t-xs);
  color: var(--muted);
}
.payment-bill-tag {
  flex: 0 0 auto;
  padding: 2px var(--s-3);
  border-radius: var(--r-full);
  font-size: var(--t-micro);
  font-weight: var(--fw-medium);
}
.payment-bill-tag.pending { background: var(--warn-soft); color: var(--warn); }
.payment-bill-tag.paid { background: var(--success-soft); color: var(--success); }

.payment-history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-2);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.payment-history-info { flex: 1; min-width: 0; }
.payment-history-name {
  display: block;
  font-size: var(--t-sm);
  font-weight: var(--fw-medium);
  color: var(--ink);
  line-height: var(--lh-tight);
}
.payment-history-date {
  display: block;
  margin-top: 2px;
  font-size: var(--t-micro);
  color: var(--muted);
}
.payment-history-amount {
  flex: 0 0 auto;
  font-size: var(--t-sm);
  font-weight: var(--fw-semi);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.payment-submit-btn { margin-top: var(--s-6); }

/* ==========================================================================
   22. 入户门开场动效
   --------------------------------------------------------------------------
   纯装饰，业务 JS 只切换 .open / .fade-out / .gone / .fade 四个类名。
   ========================================================================== */
#door-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-loading);
  display: flex;
  pointer-events: none;
}
.door-panel {
  position: relative;
  width: 50%;
  height: 100%;
  /* 门板恒定压暗（--door-bg 由主题给，明度固定）——
     "夜里到家 → 门开 → 灯亮"的反差必须保住，浅色主题下也一样 */
  background: var(--door-bg);
  overflow: hidden;
  transition: transform 1.2s cubic-bezier(.76, 0, .24, 1);
}
.door-panel.left { transform-origin: left center; }
.door-panel.right { transform-origin: right center; }
.door-panel::before {
  content: '';
  position: absolute;
  inset: var(--s-3);
  border: 1.5px solid color-mix(in srgb, var(--accent) 42%, transparent);
  border-radius: var(--r-2xs);
}
.door-panel::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 8px; height: 8px;
  margin-top: -4px;
  border-radius: var(--r-full);
  background: var(--accent);
  box-shadow: 0 0 18px var(--accent-hi);
}
.door-panel.left::after { left: calc(100% - 18px); }
.door-panel.right::after { left: 18px; }
.door-grain {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(92deg, transparent 0 3px,
    color-mix(in srgb, #fff 3%, transparent) 3px 4px);
}
#door-overlay.open .door-panel.left { transform: perspective(800px) rotateY(-85deg); }
#door-overlay.open .door-panel.right { transform: perspective(800px) rotateY(85deg); }
#door-overlay.fade-out { opacity: 0; transition: opacity .5s var(--ease-out); }
#door-overlay.gone { display: none; }

.door-center-text {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: calc(var(--z-loading) + 1);
  text-align: center;
  pointer-events: none;
  transition: opacity var(--dur-4) var(--ease-out);
}
.door-center-text.fade { opacity: 0; }
.door-center-text__title {
  font-family: var(--font-display);
  font-size: var(--t-display);
  font-style: italic;
  letter-spacing: .08em;
  color: var(--door-ink);
}
.door-center-text__sub {
  margin-top: var(--s-2);
  font-size: var(--t-sm);
  letter-spacing: .4em;
  /* 门上字用 --door-ink：它是针对深色门板调的，不是针对页面底色 */
  color: var(--door-ink);
}

/* ==========================================================================
   23. 站内 Toast（业务 JS showToast 生成 .toast-msg）
   --------------------------------------------------------------------------
   沿用 app-shell.js 的 toast 视觉：深底药丸 + 暖金字。
   类名与内联样式由业务固定，这里只管尺寸与安全区，不改行为。
   ========================================================================== */
.toast-msg {
  font-family: var(--font-serif) !important;
  max-width: calc(100vw - var(--s-8));
  white-space: normal !important;
  text-align: center;
  line-height: var(--lh-tight);
}
@media (prefers-reduced-motion: reduce) {
  #door-overlay, .door-panel, .door-center-text { transition: none; }
}


/* ==========================================================================
   重构层 —— 按 xiao9qianduan 规范收口（精确命中版）
   --------------------------------------------------------------------------
   为什么写在各站自己的 CSS 里、不动共享层：
     共享层 7 站同步，改它会连带改到音纪（不在本次范围内）。
     各站 CSS 在 components.css 之后加载，覆盖一定生效。

   ⚠ 上一版我用了 `[class*='-card']` `[class*='__item']` `[class*='stat']`
     这类通配选择器，闯了三个祸，记录在此以免重蹈：
       1. `.glass` 命中了珠语首屏的 `<div class="glass hero-tag">`，
          把半透明标签刷成实色白块 —— 首屏大图上糊了一块白。
       2. `[class*='__item']` 命中润凯的 `.tab-item` / `.slider-item`，
          给它们强制加过渡，搅乱了它自己的跑马灯时序。
       3. `p, .desc, [class*='-desc'] { font-size: max(16px,1em) }` 一次性放大了
          大量本该更小的文字，各处换行崩坏。
     结论：**这个项目的类名体系没有统一命名法，通配选择器必然误伤。**
     改样式只能逐个类名精确写，改一条验一条。

   本文件只做三件低风险、可验证的事，都用精确类名。
   ========================================================================== */

:root {
  /* expo-out：前快后慢的减速。规范里所有 reveal / hover 都用它。 */
  --rf-ease: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- 1. 缓动统一到 expo-out --------------------------------------
   只挑语义明确的"交互反馈"类名，不碰动画容器和列表项。 */
.btn,
.cta,
.chip,
.tab-btn,
.el-tab,
.sz-btn,
.ws-item,
.ws-rope,
.rope-swatch,
.ci,
.bc,
.stone-cat-ci,
.stone-cat-item {
  transition-timing-function: var(--rf-ease) !important;
}

/* ---------- 2. 数字等宽 -------------------------------------------------
   金额/颗数/百分比一变就左右跳，显业余。只命中数值语义的类。 */
.bp,
.bp *,
.bsz,
#sub,
#cnt,
.hero-stat-num,
.hero-stat-label,
.ring__num,
.progress__val,
.price,
.price *,
.amount,
.pay-num,
.order-num,
.stat-num,
.score,
.score-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* ---------- 3. 键盘焦点可见 ---------------------------------------------
   规范：focus 环必须即时出现，不做出现动画。 */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- 4. 【已移除】毛玻璃收口 ----------
   这里原先有一组规则，把 .glass-card / .feature-card / .poster-card 等 10 个类名
   强制刷成实色 + 细边框，依据是规范里"只有导航栏可以用毛玻璃"。

   删掉的原因 —— 实机量完之后，它在**这一站里一个正确目标都没有**：
     · 全站真正带 backdrop-filter 的元素共 13~19 个，逐个看过，全是
       顶栏 / 底栏 / 模态遮罩 / 悬浮在照片上的标签 —— 正是规范允许的那类"表层"。
     · 唯一被它刷实的 5 个 .glass-card 全是压在图上的叠层
       （.gallery-item-bottom、.cs-image-overlay），背后是照片，模糊是必要的。
     · 9033 的 .feature-card--dark（九宫格唯一的深色落点）被刷成白底白字。
     · !important 不看特异性，会连变体自己的 background/border/box-shadow
       一起压掉 —— 用一个没上过实机的猜想覆盖了 8 个类名的真实样式。

   教训：**"某个属性在 CSS 里出现 N 次"不等于"N 处滥用"**。
   前者是数声明，后者得数**真的渲染出来的元素**，还得看它背后是什么。
   -------------------------------------------------------------------------- */

/* ---------- 5. 【已移除】触控目标下限 ----------
   这里原先强制 .btn / .chip / .sz-btn 等类 min-height:44px，依据是规范里
   "可点击区域 ≥ 44px"。

   删掉的原因 —— 实测它同时抬高和压低，而且压过的是作者**显式写死**的值：
     · 珠语 .sz-btn 34 -> 44：尺码条是 44 宽 x 34 高的竖排，撑高后整条
       从 186px 变 236px，把珠子网格往下推。
     · 珠语 .chip 32 -> 44：色系药丸行 40 -> 69px。
     · 礼续 .chip--sm 26 -> 44：那是**非交互**的 <span> 标签，撑高纯属破坏。
     · 归家 .btn--lg 52 -> 44、礼续 .gen-btn 54 -> 44：主 CTA 被**压扁**。
   而在多数站点它根本是空操作 —— 共享层
       .btn { min-height: var(--tap-min) }      // tokens.css: --tap-min: 44px
   和各站的 .el-tab { min-height: var(--tap-min) } 早已满足 44px。

   根因：带 !important 的 min-height 会**双向**覆盖，不管作者写的值
   是比 44 大还是比 44 小。而这里每个小于 44 的元素都是有意为之
   （尺码条 44x34、药丸 32 高），不是没设计过。
   真要兜底，该用 `min-height: max(44px, <作者值>)` 这类"只抬高不压低"的写法 ——
   但 CSS 取不到"元素自己的原值"，所以宁可交给作者。
   -------------------------------------------------------------------------- */