/* ==========================================================================
   云试衣仓 · ATELIER FIT
   atelier.css —— 站点皮肤层
   --------------------------------------------------------------------------
   只消费 design-system 的令牌。app.js 生成的全部类名在此重新定义，
   不改动任何业务逻辑与 DOM 钩子。
   圆角纪律：本站刻意走小圆角（--r-xs / --r-sm），保持编辑型杂志感。
   ========================================================================== */

/* ---------- 布局 ---------- */
.pages {
  position: relative;      /* .page 是 absolute，此处必须是定位上下文 */
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.page {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-3) var(--ease-out);
}
.page.active,
.page.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 1;
}
.page:not(.active) {
  z-index: 0;
}
.page-scroll {
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.page-scroll::-webkit-scrollbar { display: none; }
.page-scroll { scrollbar-width: none; }

/* 顶栏品牌（首页用，非 .topbar__title） */
.topbar__brand { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.brand-mark {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: var(--fw-semi);
  letter-spacing: .1em;
  color: var(--ink);
  line-height: 1.1;
}
.brand-sub {
  font-size: var(--t-micro);
  letter-spacing: var(--ls-caps);
  color: var(--muted);
  margin-top: 1px;
}

/* ==========================================================================
   首页
   ========================================================================== */
#homeContent { padding-bottom: var(--s-6); }

/* --- 身材档案大卡：本站的视觉主角 --- */
.body-archive-card {
  margin: var(--s-4) var(--gutter) 0;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--dur-2) var(--ease-out),
              transform var(--dur-1) var(--ease-out);
}
.body-archive-card:active { transform: scale(.99); }
.body-archive-card:hover { border-color: var(--accent-line); }

.ba-main { display: grid; grid-template-columns: 1.02fr .98fr; min-height: 230px; }
.ba-visual {
  position: relative;
  min-height: 230px;
  background: linear-gradient(100deg, var(--surface-2), var(--surface));
  border-right: 1px solid var(--line);
  overflow: hidden;
}
.ba-figure {
  position: absolute;
  right: 4px; bottom: 0;
  width: 72%; height: 100%;
  object-fit: contain;
  object-position: center bottom;
}
/* 尺寸标注线：杂志排版的核心细节 */
.ba-measures { position: absolute; left: 12px; top: 24px; bottom: 26px; width: 44%; pointer-events: none; }
.ba-measure {
  position: absolute;
  left: 0;
  min-width: 74px;
  font-size: var(--t-micro);
  color: var(--ink);
  line-height: 1.25;
}
.ba-measure::after {
  content: '';
  position: absolute;
  left: 32px; top: 12px;
  width: 40px;
  border-top: 1px dashed var(--line-strong);
}
.ba-measure b { display: block; font-size: var(--t-micro); font-weight: var(--fw-semi); color: var(--ink-2); }
.ba-measure span {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-xs);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.ba-shoulder { top: 3%; }
.ba-bust     { top: 22%; }
.ba-waist    { top: 42%; }
.ba-hip      { top: 58%; }
.ba-leg      { top: 82%; }
.ba-leg::before {
  content: '';
  position: absolute;
  left: 72px; top: -46px;
  height: 68px;
  border-left: 1px dashed var(--line-strong);
}

.ba-info {
  padding: var(--s-5) var(--s-4);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.ba-kicker { font-size: var(--t-xs); font-weight: var(--fw-semi); letter-spacing: .1em; color: var(--faint); }
.ba-kicker:empty { display: none; }
.ba-score {
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: var(--fw-semi);
  line-height: .96;
  letter-spacing: -0.03em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  margin: var(--s-2) 0 var(--s-1);
}
.ba-stars { color: var(--accent); font-size: 15px; letter-spacing: 3px; margin-bottom: var(--s-3); }
.ba-grade {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-style: normal;
  color: var(--accent);
  letter-spacing: var(--ls-heading);
}
.ba-divider { height: 1px; background: var(--line); margin: var(--s-3) 0; }
.ba-metric { display: flex; flex-direction: column; gap: 3px; }
.ba-m-label { font-size: var(--t-xs); color: var(--muted); font-weight: var(--fw-semi); letter-spacing: .06em; }
.ba-m-val { font-family: var(--font-display); font-size: 20px; font-weight: var(--fw-semi); color: var(--ink); line-height: 1.2; }
.ba-dna-kicker { margin-top: var(--s-4); font-size: var(--t-micro); color: var(--faint); letter-spacing: var(--ls-caps); font-weight: var(--fw-semi); }
.ba-dna-title { margin-top: 3px; font-size: var(--t-sm); line-height: 1.4; color: var(--accent); font-weight: var(--fw-semi); }

.ba-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--line);
  background: var(--surface-2);
}
.ba-bottom span {
  min-width: 0;
  font-size: var(--t-xs);
  font-weight: var(--fw-medium);
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ba-bottom button {
  flex: 0 0 auto;
  font-size: var(--t-xs);
  font-weight: var(--fw-semi);
  color: var(--accent);
  white-space: nowrap;
}

/* --- 顶部欢迎卡 --- */
.home-brand-bar { padding: var(--s-5) var(--gutter) 0; }
.home-brand {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-heading);
  color: var(--ink);
}

.profile-card-home {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  margin: var(--s-4) var(--gutter) 0;
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
}
.profile-card-avatar {
  width: 54px; height: 54px;
  flex: 0 0 auto;
  border-radius: var(--r-full);
  overflow: hidden;
  background: var(--surface-inset);
  border: 1px solid var(--line);
}
.profile-card-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-card-info { flex: 1; min-width: 0; }
.profile-card-name-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); }
.profile-card-name { font-size: var(--t-h3); font-weight: var(--fw-semi); color: var(--ink); line-height: 1.3; }
.profile-card-tag {
  display: inline-block;
  padding: 2px var(--s-2);
  border-radius: var(--r-2xs);
  font-size: var(--t-micro);
  font-weight: var(--fw-medium);
  color: var(--accent);
  background: var(--accent-soft);
}
.profile-card-desc { margin-top: var(--s-2); font-size: var(--t-sm); color: var(--muted); line-height: 1.6; }
.profile-card-stats { display: flex; align-items: center; margin-top: var(--s-3); }
.pc-stat { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.pc-stat-num {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: var(--fw-semi);
  color: var(--accent);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.pc-stat-label { font-size: var(--t-micro); color: var(--muted); letter-spacing: .04em; }
.pc-stat-divider { width: 1px; height: 22px; background: var(--line); flex: 0 0 auto; }

/* --- 区块标题（app.js 生成） --- */
.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-6) var(--gutter) var(--s-3);
}
.section-title {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-heading);
  color: var(--ink);
  line-height: var(--lh-heading);
}
.section-more { position: relative; font-size: var(--t-xs); color: var(--accent); font-weight: var(--fw-medium); white-space: nowrap; }
/* 热区补到 44x44 —— 实测有效热区只有 54x20。
   ⚠ 这里必须**多给 2px 余量**：元素自身高度是小数（19.8px），
     热区以 top:50% + translate(-50%) 定位，边界就落在半像素上；
     门禁按 1px 步长从中心上下走，正好卡在 44 的边界上量到 43。
     多 2px 让边界离开取整线，实测稳定在 44 以上。 */
.section-more::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: max(100%, calc(var(--tap-min, 44px) + 2px));
  height: max(100%, calc(var(--tap-min, 44px) + 2px));
  transform: translate(-50%, -50%);
  border-radius: inherit;
}
.section-more:hover { color: var(--accent-hi); }

/* --- 快捷入口 --- */
.nav-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
  padding: 0 var(--gutter);
}
.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-5) var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--dur-2) var(--ease-out),
              background var(--dur-2) var(--ease-out),
              transform var(--dur-1) var(--ease-out);
}
.nav-item:hover { border-color: var(--accent-line); background: var(--accent-soft); }
.nav-item:active { transform: scale(.98); }
.nav-icon { color: var(--accent); display: flex; }
.nav-icon svg { width: 24px; height: 24px; }
.nav-label { font-size: var(--t-sm); font-weight: var(--fw-medium); color: var(--ink-2); }

/* --- 精品推荐网格 --- */
.product-grid-home {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4);
  padding: 0 var(--gutter) var(--s-5);
}
.product-card {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--dur-2) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out),
              transform var(--dur-1) var(--ease-out);
}
.product-card:hover { border-color: var(--accent-line); box-shadow: var(--shadow-sm); }
.product-card:active { transform: scale(.985); }
.product-img {
  position: relative;
  aspect-ratio: 3 / 4;
  background: var(--surface-inset);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-img img { width: 100%; height: 100%; object-fit: cover; }
/* 无图时的占位：不显示裂图 */
.product-img.is-placeholder::after {
  content: 'AT';
  font-family: var(--font-display);
  font-size: var(--t-h1);
  font-weight: var(--fw-semi);
  letter-spacing: .1em;
  color: var(--line-strong);
}
.product-img img[data-img-failed] { visibility: hidden; }
.product-info { padding: var(--s-3) var(--s-4) var(--s-4); }
.product-code {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  color: var(--faint);
  letter-spacing: .04em;
}
.product-name {
  margin-top: 3px;
  font-size: var(--t-sm);
  font-weight: var(--fw-medium);
  color: var(--ink);
  line-height: 1.4;
}
.product-price {
  margin-top: var(--s-2);
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: var(--fw-semi);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   试衣间
   ========================================================================== */

/* --- 双栏舞台 --- */
.trial-stage { padding: var(--s-5) var(--gutter) 0; }
.stage { border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; background: var(--surface-inset); }
.stage-grid { display: grid; grid-template-columns: 1fr 1px 1fr; }
.pane { position: relative; background: var(--surface-inset); aspect-ratio: 436 / 1047; overflow: hidden; }
.pane-label {
  position: absolute;
  top: var(--s-3); left: var(--s-3);
  z-index: 3;
  font-size: var(--t-micro);
  letter-spacing: var(--ls-caps);
  /* 角标浮在**任意照片**上，底色不能跟着主题走：
     这一站主题是画廊白，84% 白底压到深色试穿照上只剩 1.5:1。
     固定在深底 + 白字 —— 和照片内容无关，任何图上都成立。 */
  color: #fff;
  background: rgb(0 0 0 / .55);
  padding: 3px var(--s-2);
  border-radius: var(--r-2xs);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.pane img { width: 100%; height: 100%; object-fit: cover; }
.divider { background: var(--line); }

.result-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity var(--dur-3) var(--ease-out); }
.result-img.is-active { opacity: 1; }

/* 空态文案要压在图形层之上读得清：
   给文字自己一块半透明底 + 背景模糊，而不是把整幅剪影调暗
   （调暗会让"技术图"这个主体消失，反而更像加载失败）。 */
.empty-state {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  padding: var(--s-5);
  text-align: center;
  color: var(--ink-2);
  font-size: var(--t-xs);
  line-height: 1.5;
  transition: opacity var(--dur-2) var(--ease-out);
}
/* 文案块不再单独加底：
   这一栏只有 198px 宽，padding 6px 12px 会把可用宽度再压掉 24px，
   中文于是逐字换行（"从下方挑/选一件服/装"）。
   改用共享层的 .empty 组件 —— 圆形图标底已经足够说明"这是占位不是错误"，
   文字直接落在剪影上反而更干净。 */
.empty-state .empty__art { position: relative; }
.empty-state .empty__title,
.empty-state .empty__desc {
  position: relative;
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* 角标注：说明"这是示意剪影"。
   刻意贴着底部放，不走居中 —— 剪影才是这一栏的主体，
   一句免责声明压在正中间会把主体读成"出错提示"。 */
.pane-note {
  position: absolute;
  left: var(--s-3);
  bottom: var(--s-3);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px var(--s-2);
  border-radius: var(--r-2xs);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-caps);
  color: var(--muted);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(4px);
}
.pane-note::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: var(--r-full);
  background: var(--accent);
  opacity: .8;
}
.empty-state.is-hidden { opacity: 0; pointer-events: none; }
.empty-glyph {
  width: 36px; height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-full);
  color: var(--faint);
}
.empty-glyph svg { width: 16px; height: 16px; }
.empty-state__text { max-width: 12ch; }

/* --- 性别切换：外观交给共享 .seg / .seg__item（带滑动滑块）--- */
.ts-switch { justify-content: center; margin: var(--s-5) auto var(--s-2); }
/* 分段控件在触屏上要够大，但这里两个选项挨着，36px 高就够，不必到 tap-min */
.seg__item.ts-switch-btn { min-height: 36px; padding: 0 var(--s-6); }
/* --- 当前选中信息 --- */
.tag-row { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--gutter) 0; }
.tag-dot {
  width: 8px; height: 8px;
  border-radius: var(--r-full);
  background: var(--line-strong);
  flex: 0 0 auto;
  transition: background var(--dur-2) var(--ease-out);
}
.tag-text { display: flex; align-items: baseline; gap: var(--s-2); font-size: var(--t-xs); flex-wrap: wrap; }
.tag-text .no {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  color: var(--faint);
  letter-spacing: .04em;
}
.tag-text .name { color: var(--ink); font-weight: var(--fw-medium); }
.tag-text .fabric { color: var(--muted); font-size: var(--t-micro); }

/* --- 服装架 --- */
.rack-heading { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-5) var(--gutter) var(--s-3); }
.rack-heading span:first-child {
  font-size: var(--t-micro);
  letter-spacing: var(--ls-caps);
  color: var(--faint);
  white-space: nowrap;
}
.rack-heading .line { flex: 1; height: 1px; background: var(--line); }

.rack-tabs { display: flex; gap: var(--s-2); padding: 0 var(--gutter) var(--s-4); overflow-x: auto; scrollbar-width: none; }
.rack-tabs::-webkit-scrollbar { display: none; }
.rack-tab {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 0 var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: var(--surface);
  color: var(--muted);
  font-size: var(--t-xs);
  font-weight: var(--fw-medium);
  transition: all var(--dur-2) var(--ease-out);
}
.rack-tab:hover { border-color: var(--line-strong); color: var(--ink-2); }
.rack-tab.is-active,
.rack-tab.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

.rack {
  display: flex;
  gap: var(--s-3);
  padding: 0 var(--gutter) var(--s-4);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.rack::-webkit-scrollbar { display: none; }

.garment {
  flex: 0 0 auto;
  width: 112px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  scroll-snap-align: start;
}
/* 挂钩：服装架的具象隐喻，保留并规范化 */
.hook {
  width: 14px; height: 6px;
  border: 1px solid var(--line-strong);
  border-bottom: none;
  border-radius: 14px 14px 0 0;
}
.swatch {
  width: 100%;
  position: relative;
  border: 1px solid var(--line);
  border-radius: 0 0 var(--r-xs) var(--r-xs);
  background: var(--surface-inset);
  overflow: hidden;
  margin-bottom: var(--s-2);
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
}
.swatch img { width: 100%; height: 100%; object-fit: cover; transition: opacity var(--dur-2) var(--ease-out); }
.swatch img[data-img-failed],
.product-img img[data-img-failed] { visibility: hidden; }
/* 商品图区要撑满卡片，剪影才有地方画 */
.product-img { position: relative; overflow: hidden; }
.product-img .glyph { position: absolute; inset: 0; }
/* 缺图时不再盖斜纹 —— 图形层已经画了这件衣服的技术图，
   再盖一层条纹等于把内容涂掉。这里只保留一个语义标记，不参与视觉。 */
.swatch.is-broken::after { content: none; }
.garment:hover .swatch img { opacity: .88; }
.garment.is-selected .swatch { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.garment-meta { display: flex; flex-direction: column; align-items: center; gap: 2px; position: relative; }
.garment-code {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  color: var(--faint);
  letter-spacing: .04em;
}
.garment-name {
  font-size: var(--t-xs);
  color: var(--ink);
  font-weight: var(--fw-medium);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.garment-colordot { width: 6px; height: 6px; border-radius: var(--r-full); margin-top: 2px; border: 1px solid var(--line-strong); }
.garment-tag {
  position: absolute;
  top: -2px; right: -6px;
  font-size: 9px;
  padding: 1px 5px;
  border-radius: var(--r-2xs);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: var(--fw-semi);
}

.footnote { padding: var(--s-4) var(--gutter) var(--s-6); font-size: var(--t-micro); color: var(--faint); text-align: center; line-height: 1.5; }

/* ==========================================================================
   身材档案页（app.js 渲染）
   ========================================================================== */
#page-body { padding-bottom: var(--s-6); }

.profile-container { padding: var(--s-4) var(--gutter) 0; }
.profile-edit-nav { display: flex; align-items: center; justify-content: space-between; padding: var(--s-4) var(--gutter) 0; }
.pn-back, .pn-edit {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 34px; padding: 0 var(--s-3);
  border-radius: var(--r-xs);
  font-size: var(--t-sm);
  color: var(--accent);
  font-weight: var(--fw-medium);
}
.pn-back:hover, .pn-edit:hover { background: var(--accent-soft); }
.pn-title { font-size: var(--t-h3); font-weight: var(--fw-semi); color: var(--ink); }

.card {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  padding: var(--s-5);
  margin: 0 var(--gutter) var(--s-4);
}
.card-title { font-size: var(--t-h3); font-weight: var(--fw-semi); color: var(--ink); margin-bottom: var(--s-4); }
.sub-title { font-size: var(--t-sm); font-weight: var(--fw-semi); color: var(--ink-2); margin-bottom: var(--s-3); }

/* 身材数据网格 */
.measurements-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.measurements-title { grid-column: 1 / -1; font-size: var(--t-sm); font-weight: var(--fw-semi); color: var(--ink); }
.measurement-item {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  background: var(--surface-2);
}
.m-label { font-size: var(--t-micro); color: var(--muted); }
.m-value {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: var(--fw-semi);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.measure-strip { display: flex; gap: var(--s-2); overflow-x: auto; padding-bottom: var(--s-2); scrollbar-width: none; }
.measure-strip::-webkit-scrollbar { display: none; }
.measure-strip-item {
  flex: 0 0 auto;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  background: var(--surface-2);
  text-align: center;
}
.measure-strip-title { font-size: var(--t-micro); color: var(--muted); }

/* 身材数据统计块 */
.body-stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
.body-stat {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-1);
  padding: var(--s-4) var(--s-2);
  border-radius: var(--r-xs);
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.body-stat-icon { color: var(--accent); display: flex; }
.body-stat-icon svg { width: 18px; height: 18px; }
.body-stat-value {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: var(--fw-semi);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.body-stat-label { font-size: var(--t-micro); color: var(--muted); text-align: center; }

/* 雷达图 / 趋势图 */
.radar-wrap { display: flex; align-items: center; justify-content: center; padding: var(--s-4) 0; }
.radar-chart { max-width: 240px; width: 100%; }
.radar-legend { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; margin-top: var(--s-3); }
.legend-dot { width: 8px; height: 8px; border-radius: var(--r-full); background: var(--accent); display: inline-block; margin-right: var(--s-1); }
.legend-dash { width: 12px; height: 2px; background: var(--line-strong); display: inline-block; margin-right: var(--s-1); vertical-align: middle; }

.trend-stats-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-2); margin-bottom: var(--s-4); }
.trend-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.trend-label { font-size: var(--t-micro); color: var(--muted); }
.trend-value {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: var(--fw-semi);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.trend-chart { width: 100%; }
.trend-footer { margin-top: var(--s-3); font-size: var(--t-micro); color: var(--faint); text-align: center; }

/* 比例环 */
.ratio-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.ratio-item {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-2);
  padding: var(--s-4) var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  background: var(--surface-2);
}
.ratio-ring { position: relative; display: flex; align-items: center; justify-content: center; }
.ratio-value {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: var(--fw-semi);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.ratio-name { font-size: var(--t-xs); color: var(--muted); }
.ratio-tag {
  font-size: var(--t-micro);
  padding: 1px var(--s-2);
  border-radius: var(--r-2xs);
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: var(--fw-medium);
}

/* 兼容度 */
.compat-list { display: flex; flex-direction: column; gap: var(--s-3); }
.compat-thumb { width: 44px; height: 56px; border-radius: var(--r-xs); object-fit: cover; background: var(--surface-inset); flex: 0 0 auto; }
.compat-name { flex: 1; min-width: 0; font-size: var(--t-sm); color: var(--ink); }
.compat-score {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: var(--fw-semi);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.compat-bar { flex: 1; height: 4px; border-radius: var(--r-full); background: var(--surface-inset); overflow: hidden; }
.compat-bar > * { height: 100%; background: var(--accent); border-radius: inherit; }

/* DNA 卡 */
.dna-card { border: 1px solid var(--accent-line); border-radius: var(--r-sm); background: var(--accent-soft); padding: var(--s-5); }
.dna-top { display: flex; align-items: flex-start; gap: var(--s-4); }
.dna-mark {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--r-xs);
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: var(--fw-semi);
}
.dna-main { flex: 1; min-width: 0; }
.dna-label { font-size: var(--t-micro); letter-spacing: var(--ls-caps); color: var(--accent); font-weight: var(--fw-semi); }
.dna-title { margin-top: 3px; font-size: var(--t-h3); font-weight: var(--fw-semi); color: var(--ink); line-height: 1.35; }
.dna-desc { margin-top: var(--s-2); font-size: var(--t-sm); color: var(--ink-2); line-height: var(--lh-body); }
.dna-score {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: var(--fw-semi);
  color: var(--accent);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.dna-shape { font-size: var(--t-xs); color: var(--muted); }
.dna-tags { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.dna-tag {
  font-size: var(--t-micro);
  padding: 3px var(--s-2);
  border-radius: var(--r-2xs);
  background: var(--surface);
  color: var(--accent);
  font-weight: var(--fw-medium);
  border: 1px solid var(--accent-line);
}

/* 档案表单 */
.pf-card { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); padding: var(--s-5); margin: 0 var(--gutter) var(--s-4); }
.pf-actions { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-5); }
.pf-avatar-copy { position: relative; flex: 0 0 auto; }
.pf-avatar-copy img { width: 64px; height: 64px; border-radius: var(--r-full); object-fit: cover; background: var(--surface-inset); border: 1px solid var(--line); }
.pf-avatar-edit {
  position: absolute; right: -2px; bottom: -2px;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-full);
  background: var(--accent);
  color: var(--on-accent);
  border: 2px solid var(--surface);
}
.pf-avatar-edit svg { width: 13px; height: 13px; }
.pf-upload-btn {
  min-height: 34px; padding: 0 var(--s-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xs);
  background: var(--surface);
  font-size: var(--t-sm);
  color: var(--ink-2);
  font-weight: var(--fw-medium);
}
.pf-upload-btn:hover { border-color: var(--accent); color: var(--accent); }

.pf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.pf-field { display: flex; flex-direction: column; gap: var(--s-2); }
.pf-label { font-size: var(--t-sm); font-weight: var(--fw-medium); color: var(--ink-2); }
.pf-value {
  min-height: var(--tap-min);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: var(--t-body);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  width: 100%;
}
.pf-value:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.pf-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); margin-bottom: var(--s-4); }
.pf-score {
  display: flex; align-items: baseline; gap: var(--s-2);
  padding: var(--s-4);
  border-radius: var(--r-xs);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
}
.pf-score-num {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: var(--fw-semi);
  color: var(--accent);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.pf-score-label { font-size: var(--t-xs); color: var(--accent); }
.pf-segment { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.pf-tag {
  min-height: 32px;
  padding: 0 var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: var(--surface);
  color: var(--muted);
  font-size: var(--t-sm);
  font-weight: var(--fw-medium);
  transition: all var(--dur-2) var(--ease-out);
}
.pf-tag:hover { border-color: var(--line-strong); }
.pf-tag.active,
.pf-tag.is-active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.pf-style { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pf-tags { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pf-rec-item {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-sm);
  color: var(--ink-2);
}
.pf-rec-item:last-child { border-bottom: none; }
.pf-diag-title { font-size: var(--t-sm); font-weight: var(--fw-semi); color: var(--ink); }
.pf-diag-text { font-size: var(--t-sm); color: var(--muted); line-height: var(--lh-body); }
.pf-diagnosis { padding: var(--s-4); border-radius: var(--r-xs); background: var(--surface-2); border: 1px solid var(--line); }

.pf-btn {
  min-height: var(--tap-min);
  padding: 0 var(--s-5);
  border-radius: var(--r-sm);
  background: var(--accent);
  color: var(--on-accent);
  font-size: var(--t-body);
  font-weight: var(--fw-medium);
  border: 1px solid transparent;
  transition: background var(--dur-2) var(--ease-out);
}
.pf-btn:hover { background: var(--accent-hi); }
.pf-btn.secondary { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
.pf-btn.secondary:hover { background: var(--surface-2); }
.btn-primary {
  min-height: var(--tap-min);
  padding: 0 var(--s-5);
  border-radius: var(--r-sm);
  background: var(--accent);
  color: var(--on-accent);
  font-size: var(--t-body);
  font-weight: var(--fw-medium);
}
.btn-primary:hover { background: var(--accent-hi); }

/* 空态与加载 */
.empty-profile-card, .empty-tip, .profile-pending {
  padding: var(--s-6) var(--gutter);
  text-align: center;
  font-size: var(--t-sm);
  color: var(--muted);
  line-height: var(--lh-body);
}
.tryon-loading-spinner {
  width: 28px; height: 28px;
  margin: 0 auto var(--s-4);
  border: 2.5px solid var(--line);
  border-top-color: var(--accent);
  border-radius: var(--r-full);
  animation: spin .7s linear infinite;
}
.tryon-loading-title { font-size: var(--t-body); font-weight: var(--fw-semi); color: var(--ink); text-align: center; }
.tryon-loading-desc { margin-top: var(--s-1); font-size: var(--t-xs); color: var(--muted); text-align: center; }
.tryon-empty-card { padding: var(--s-8) var(--s-5); text-align: center; }

/* --- 服装架骨架卡：占位期间不可交互 -------------------------------- */
.garment--ghost {
  pointer-events: none;
  /* 卡片本身不加 hover/按压反馈 —— 骨架不是可点的东西，
     给了反馈反而让人以为能点。 */
}
.garment--ghost .hook { opacity: .55; }
/* 骨架与真实缩略图同比例（3:4），图到了不会跳高度 */
.garment--ghost .swatch { width: 100%; }

/* --- 上身效果加载骨架：与 .pane 同宽，占住竖版版位 ---------------- */
.tryon-loading-skeleton {
  width: 100%;
  aspect-ratio: 436 / 1047;
  border-radius: var(--r-md);
}
.tryon-loading-line { width: 70%; margin-top: var(--s-3); }
.tryon-loading-title {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-3);
  font-size: var(--t-xs);
  color: var(--ink-2);
  text-align: center;
}
/* .tryon-empty-mark / __title / __desc 已废弃：
   空态改用共享 .empty（.empty__art / __title / __desc），
   这里不再留一份长得不一样的平行实现。 */
.tryon-empty-title { font-size: var(--t-h3); font-weight: var(--fw-semi); color: var(--ink); }

.service-error-card {
  margin: var(--s-4) var(--gutter);
  padding: var(--s-5);
  border: 1px solid var(--warn-soft);
  border-left: 3px solid var(--warn);
  border-radius: var(--r-xs);
  background: var(--warn-soft);
  font-size: var(--t-sm);
  color: var(--warn);
  line-height: var(--lh-body);
}

/* 适配模板 */
.fit-template-card {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  background: var(--surface);
  margin-bottom: var(--s-3);
}
.fit-template-img { width: 40px; height: 40px; border-radius: var(--r-xs); object-fit: cover; background: var(--surface-inset); flex: 0 0 auto; }
.fit-template-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.fit-template-name { flex: 1; min-width: 0; font-size: var(--t-sm); color: var(--ink); }
.fit-template-score {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: var(--fw-semi);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* 色彩推荐 */
.color-row { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.size-row { display: flex; gap: var(--s-2); align-items: center; }
.size-item {
  min-width: 40px; min-height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  background: var(--surface);
  font-size: var(--t-sm);
  color: var(--ink-2);
}
.data-box { padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-xs); background: var(--surface-2); }
.data-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.dl { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) 0; }
.dl + .dl { border-top: 1px solid var(--line); }
.dv { font-size: var(--t-sm); font-weight: var(--fw-medium); color: var(--ink); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.large { font-size: var(--t-h3); }

/* 状态条 */
.status-bar {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-xs);
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: var(--t-xs);
  color: var(--muted);
}
.sb-icons { display: flex; gap: var(--s-2); color: var(--accent); }
.sb-time { margin-left: auto; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   穿搭顾问页
   ========================================================================== */
.advisor-content { padding: var(--s-4) var(--gutter) var(--s-6); }
.advisor-card-main {
  display: flex;
  gap: var(--s-4);
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  margin-bottom: var(--s-4);
}
.advisor-avatar-large {
  width: 60px; height: 60px;
  flex: 0 0 auto;
  border-radius: var(--r-full);
  background: var(--surface-inset);
  border: 1px solid var(--line);
}

/* 头像外环：共享 .avatar-ring 提供品牌色描边，
   这里只声明这一站的尺寸上下文。 */
.advisor-avatar-ring { flex: 0 0 auto; }
.advisor-info-main { flex: 1; min-width: 0; }
.advisor-name-large { font-size: var(--t-h3); font-weight: var(--fw-semi); color: var(--ink); }
.advisor-title { margin-top: 2px; font-size: var(--t-xs); color: var(--muted); }
.advisor-tags { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.advisor-tag-item {
  font-size: var(--t-micro);
  padding: 2px var(--s-2);
  border-radius: var(--r-2xs);
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: var(--fw-medium);
}
.advisor-bio { margin-top: var(--s-3); font-size: var(--t-sm); color: var(--ink-2); line-height: var(--lh-body); }

.service-section, .recommend-section { margin-bottom: var(--s-5); }
.service-section .section-header,
.recommend-section .section-header { padding-inline: 0; padding-top: var(--s-4); }
.service-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.service-item {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-2);
  padding: var(--s-5) var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.service-item:hover { border-color: var(--accent-line); }
.service-item:active { transform: scale(.98); }
.service-icon {
  /* 原先只有 font-size，靠后端图标的固有尺寸撑开。
     图标改成本地生成后没有固有尺寸了，必须给盒子明确宽高。 */
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  font-size: 22px;
  line-height: 1;
}
.service-icon img { width: 26px; height: 26px; object-fit: contain; }
.service-name { font-size: var(--t-sm); font-weight: var(--fw-medium); color: var(--ink); }
.service-price {
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: var(--fw-semi);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.service-desc { font-size: var(--t-micro); color: var(--muted); text-align: center; line-height: 1.4; }

.recommend-list { display: flex; flex-direction: column; gap: var(--s-3); }
.recommend-item {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
}
.recommend-icon {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--r-xs);
  background: var(--accent-soft);
  color: var(--accent);
}
.recommend-icon svg { width: 20px; height: 20px; }
.recommend-info { flex: 1; min-width: 0; }
.recommend-name { font-size: var(--t-sm); font-weight: var(--fw-semi); color: var(--ink); }
.recommend-desc { margin-top: 2px; font-size: var(--t-xs); color: var(--muted); line-height: 1.5; }
.recommend-btn {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 var(--s-4);
  border-radius: var(--r-xs);
  background: var(--accent);
  color: var(--on-accent);
  font-size: var(--t-xs);
  font-weight: var(--fw-medium);
}
.recommend-btn:hover { background: var(--accent-hi); }

.advisor-cta { margin-top: var(--s-5); }
.advisor-cta-btn {
  width: 100%;
  min-height: 48px;
  border-radius: var(--r-sm);
  background: var(--accent);
  color: var(--on-accent);
  font-size: var(--t-body);
  font-weight: var(--fw-medium);
}
.advisor-cta-btn:hover { background: var(--accent-hi); }

.advisor-empty-card { padding: var(--s-7) var(--s-5); text-align: center; font-size: var(--t-sm); color: var(--muted); line-height: var(--lh-body); }

/* 预约弹层 */
.advisor-booking-card, .theme-dialog-card {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: var(--s-6);
  box-shadow: var(--shadow-xl);
  max-width: 340px;
  width: calc(100vw - 48px);
}
.advisor-booking-head, .theme-dialog-mark { font-size: var(--t-h3); font-weight: var(--fw-semi); color: var(--ink); margin-bottom: var(--s-4); }
.advisor-booking-close { position: absolute; top: var(--s-4); right: var(--s-4); width: 32px; height: 32px; color: var(--muted); }
.advisor-booking-submit {
  width: 100%;
  min-height: var(--tap-min);
  margin-top: var(--s-4);
  border-radius: var(--r-sm);
  background: var(--accent);
  color: var(--on-accent);
  font-size: var(--t-body);
  font-weight: var(--fw-medium);
}
.theme-dialog-actions { display: flex; gap: var(--s-3); margin-top: var(--s-5); }
.theme-dialog-btn {
  flex: 1;
  min-height: var(--tap-min);
  border-radius: var(--r-sm);
  font-size: var(--t-body);
  font-weight: var(--fw-medium);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
}
.theme-dialog-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* 通用小件 */
.ring { transform: rotate(-90deg); }
.dot { width: 8px; height: 8px; border-radius: var(--r-full); background: var(--line-strong); flex: 0 0 auto; }
.hidden { display: none !important; }
.ic, .rlabel, .rtag, .rval, .leg-dot, .leg-dash { display: inline-flex; align-items: center; }
.arrow { color: var(--faint); display: inline-flex; }
.arrow svg { width: 14px; height: 14px; }

/* 遮罩层（app.js 动态创建） */
.advisorBookingOverlay, .themeDialogOverlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(14, 12, 10, .48);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  padding: var(--s-5);
}

@media (prefers-reduced-motion: reduce) {
  .page { transition: none; }
  .tryon-loading-spinner { animation-duration: 2s; }
}

/* ==========================================================================
   图表（趋势图 / 雷达图）
   ==========================================================================
   原先网格线、折线、轴标签都写死旧浅色主题的米色（#E1DACC / #8B5E3C），
   在深色底上等于看不见 —— 图表是空的。改成走主题变量：
   品牌色一换，7 站的图表跟着换，不会再出现"某站忘了改"。 */
.chart-grid {
  stroke: var(--line-strong);
  stroke-opacity: .75;
}
.chart-ref {
  stroke: var(--muted);
  stroke-opacity: .7;
}
.chart-line {
  fill: none;
  stroke: var(--accent);
  stroke-opacity: .95;
}
.chart-line-alt {
  fill: none;
  stroke: var(--accent-hi);
  stroke-opacity: .62;
}
.chart-axis {
  fill: var(--muted);
  font-size: 10px;
}
.chart-area {
  fill: var(--accent);
  fill-opacity: .22;
  stroke: var(--accent);
}

/* --------------------------------------------------------------------------
   身材档案表单输入框
   --------------------------------------------------------------------------
   这些 <input> 之前没有任何 class，也没有任何 CSS —— 靠浏览器默认样式渲染。
   浅色主题下碰巧能用（白底黑字），切到深色后 color-scheme:dark 让 Chrome
   给了 #121212 背景 + 灰色边框，和站内其它输入框（.pf-value 那套）完全不是
   一个东西。补上，跟 .pf-value 对齐。 */
.pf-field input:not([type="hidden"]),
.pf-field textarea {
  min-height: var(--tap-min);
  width: 100%;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: var(--t-body);
  font-family: inherit;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  transition: border-color var(--dur-2) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out);
}
.pf-field input::placeholder,
.pf-field textarea::placeholder { color: var(--faint); }
.pf-field input:focus,
.pf-field textarea:focus {
  outline: none;
  border-color: var(--line-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
/* 数字输入去掉原生上下箭头 —— 手机上手势冲突，且和 8px 圆角打架 */
.pf-field input[type="number"]::-webkit-outer-spin-button,
.pf-field input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pf-field input[type="number"] { -moz-appearance: textfield; }


/* ==========================================================================
   重构层 —— 按 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 取不到"元素自己的原值"，所以宁可交给作者。
   -------------------------------------------------------------------------- */