/* ==========================================================================
   风格图鉴 (Style Lab) 全局样式规范
   基准尺寸：移动端 375px 优先，自适应 480px 内居中
   参考规范：主报告页 MU6C15HVA6C2S + 对照表详情页 MU6DN2WMAZAVR
   ========================================================================== */

:root {
  /* 优雅大地米白高定色系 */
  --bg-page: #F7F4EE;
  --bg-card: #FFFFFF;
  --bg-card-subtle: #FDFCFA;
  --bg-warm-tint: #F3ECE2;
  --bg-dark: #201814;
  --bg-dark-card: #2B211A;

  /* 文字颜色 */
  --text-main: #271E18;
  --text-secondary: #5F534B;
  --text-muted: #8E8278;
  --text-dim: #B3A89D;
  --text-white: #FFFFFF;

  /* 品牌调性与点缀（2026-09-18 卡卡拍板：向 V3 主产品统一——主色切陶土红 #c65d3b 家族；
     暖米底与深咖对比块保留，作钩子页的门面温度） */
  --brand-gold: #C65D3B;
  --brand-gold-dark: #B5502F;
  --brand-gold-light: #F7ECE5;
  --brand-terracotta: #C65D3B;
  --brand-success: #4D745B;
  --brand-warning: #C2783A;
  --brand-danger: #C04E40;

  /* 边框与分割线 */
  --border-subtle: rgba(200, 185, 170, 0.24);
  --border-focus: #C65D3B;
  --border-card: rgba(190, 175, 160, 0.28);

  /* 阴影 */
  --shadow-sm: 0 2px 8px rgba(39, 30, 24, 0.04);
  --shadow-card: 0 4px 20px -2px rgba(39, 30, 24, 0.06), 0 1px 4px rgba(39, 30, 24, 0.02);
  --shadow-hover: 0 8px 30px -4px rgba(39, 30, 24, 0.12);
  --shadow-glow: 0 0 0 3px rgba(198, 93, 59, 0.22);

  /* 圆角 */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 22px;
  --radius-full: 9999px;

  /* 字体家族 */
  --font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
  --font-serif: "Songti SC", "Noto Serif SC", "SimSun", serif;
  --font-num: "SF Pro Display", "DIN Alternate", -apple-system, sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--font-family);
  background-color: #EFECE6;
  color: var(--text-main);
  line-height: 1.5;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  justify-content: center;
}

/* 主容器：移动端 375px 基准，最大宽度 480px 居中 */
.lab-container {
  width: 100%;
  max-width: 480px;
  min-height: 100vh;
  background-color: var(--bg-page);
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.06);
  padding-bottom: 90px; /* 给底部操作栏留空间 */
}

/* 顶部吸顶导航条 */
.lab-header {
  position: sticky;
  top: 0;
  z-index: 120;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background: rgba(247, 244, 238, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-subtle);
}

.lab-header .header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--text-main);
  cursor: pointer;
  transition: background-color 0.2s;
}
.btn-icon:active {
  background: rgba(0, 0, 0, 0.05);
}

.header-title-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
}

.header-title-box .title-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--text-main);
}

.header-title-box .title-row .spark-icon {
  color: var(--brand-gold);
  font-size: 21px;
}

.header-title-box .sub-title {
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--text-muted);
  font-weight: 500;
  margin-top: 1px;
  text-transform: uppercase;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 页面内容区 */
.lab-content {
  padding: 14px 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 通用白底卡片 */
.lab-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-card);
  position: relative;
  overflow: hidden;
}

/* 卡片标题头部 */
.card-header-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
}

.card-title-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.card-main-title {
  font-size: 21px;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: 0.3px;
}

.card-sub-en {
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--text-dim);
  font-weight: 600;
  text-transform: uppercase;
}

.card-header-tag {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
  text-wrap: balance;
}

/* ==========================================================================
   页面专属组件：主报告页 (Hero + 配色卡 + 预算卡 + 材质卡)
   ========================================================================== */

/* Hero 封面卡片 (参考图 1 风格) */
.hero-cover-card {
  position: relative;
  width: 100%;
  height: 240px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.hero-cover-card .hero-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-cover-card .hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 15, 12, 0.72) 0%, rgba(20, 15, 12, 0.45) 50%, rgba(20, 15, 12, 0.85) 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px 18px;
  color: var(--text-white);
}

.hero-title-box h1 {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.hero-title-box .hero-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.hero-tag {
  display: inline-block;
  font-size: 13px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, 0.28);
  font-weight: 500;
  color: #F8F5EE;
}

.hero-reason-box {
  font-size: 15px;
  line-height: 1.5;
  color: rgba(248, 245, 238, 0.9);
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(6px);
  padding: 8px 12px;
  border-radius: var(--radius-md);
  border-left: 2px solid var(--brand-gold);
}

/* 631 配色口诀提示 */
.color-formula-box {
  background: var(--bg-warm-tint);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin-bottom: 14px;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.color-formula-box .icon-badge {
  background: var(--brand-gold);
  color: #fff;
  font-size: 12px;
  padding: 1px 5px;
  border-radius: 4px;
  font-weight: 600;
  flex-shrink: 0;
  margin-top: 1px;
}

/* 色彩网格：4~6色横排/两行 */
.color-swatches-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

@media (max-width: 360px) {
  .color-swatches-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.swatch-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-decoration: none;
  color: inherit;
}

.swatch-block {
  width: 100%;
  aspect-ratio: 1.3 / 1;
  border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
  margin-bottom: 6px;
  transition: transform 0.2s;
}

.swatch-item:hover .swatch-block {
  transform: translateY(-2px);
}

.swatch-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-main);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.swatch-ratio {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
  font-family: var(--font-num);
  margin-top: 2px;
}

/* 占比胶囊条 */
.swatch-bar-bg {
  width: 100%;
  height: 4px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: var(--radius-full);
  margin-top: 4px;
  overflow: hidden;
}

.swatch-bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
}

/* 预估装修预算卡片 (参考图 1 样式) */
.budget-hero-card {
  background: linear-gradient(135deg, #FBF8F3 0%, #F5EDE3 100%);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  border: 1px solid rgba(198, 175, 150, 0.35);
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
}

.budget-hero-card::after {
  content: "";
  position: absolute;
  right: -10px;
  bottom: -20px;
  width: 130px;
  height: 130px;
  background: radial-gradient(circle, rgba(198, 93, 59, 0.12) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.budget-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.budget-icon-circle {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: #C65D3B;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
}

.budget-title-text {
  display: flex;
  flex-direction: column;
}

.budget-title-text .main {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-main);
}

.budget-title-text .sub {
  font-size: 11px;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  text-transform: uppercase;
}

.budget-amount-row {
  margin: 12px 0 8px;
  display: flex;
  align-items: baseline;
}

.budget-currency {
  font-size: 25px;
  font-weight: 700;
  color: var(--text-main);
  margin-right: 2px;
}

.budget-big-number {
  font-size: 40px;
  font-weight: 800;
  color: var(--text-main);
  font-family: var(--font-num);
  letter-spacing: -1px;
  line-height: 1;
}

.budget-unit {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-main);
  margin-left: 2px;
}

.budget-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
}

.budget-desc {
  font-size: 13px;
  color: var(--text-secondary);
  flex: 1;
  padding-right: 8px;
  line-height: 1.4;
}

.btn-pill-budget {
  background: #C65D3B;
  color: #FFFFFF;
  border-radius: var(--radius-full);
  padding: 6px 14px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 3px 10px rgba(198, 93, 59, 0.3);
  transition: background 0.2s, transform 0.2s;
  white-space: nowrap;
}

.btn-pill-budget:active {
  background: #B5502F;
  transform: scale(0.97);
}

/* 材质解析缩略横排 (参考图 1 样式) */
.material-preview-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.mat-item-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

.mat-item-thumb-box {
  width: 100%;
  aspect-ratio: 1.2 / 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #EAE5DC;
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.mat-item-thumb-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.25s;
}

.mat-item-card:hover .mat-item-thumb-box img {
  transform: scale(1.05);
}

.mat-item-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
  margin-top: 6px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mat-tag-pill {
  font-size: 11px;
  color: var(--brand-gold-dark);
  background: var(--brand-gold-light);
  padding: 1px 4px;
  border-radius: 4px;
  margin-top: 2px;
  align-self: flex-start;
  font-weight: 600;
}

.mat-item-feat {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
  line-height: 1.3;
}

/* 详情页导航入口网格 (5大详情入口) */
.nav-entries-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 14px;
  border: 1px solid var(--border-card);
  box-shadow: var(--shadow-card);
}

.nav-entry-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.nav-entry-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: var(--bg-page);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: background 0.2s, transform 0.15s;
  border: 1px solid rgba(195, 180, 165, 0.2);
}

.nav-entry-item:hover, .nav-entry-item:active {
  background: #EFE9DE;
  transform: translateX(2px);
}

.nav-entry-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-entry-icon {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-gold);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.nav-entry-info {
  display: flex;
  flex-direction: column;
}

.nav-entry-title {
  font-size: 16.5px;
  font-weight: 700;
  color: var(--text-main);
}

.nav-entry-sub {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 1px;
}

.nav-entry-arrow {
  color: var(--text-dim);
}

/* 软装要点卡片 */
.soft-furnishing-box {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--text-secondary);
  background: #FAF7F2;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(200, 185, 170, 0.25);
}

/* ==========================================================================
   页面专属组件：空间颜色与材质对照表页 (参考图 2 核心联动交互)
   ========================================================================== */

/* 原图与标记点舞台 */
.spot-stage-container {
  position: relative;
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  background: #201814;
  border: 1px solid var(--border-card);
}

.spot-stage-img {
  width: 100%;
  display: block;
  object-fit: cover;
}

/* 1~8 数字标注圆点 (参考图 2 精确复刻) */
.spot-pin {
  position: absolute;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-full);
  background: #FFFFFF;
  color: #271E18;
  font-weight: 800;
  font-size: 16px;
  font-family: var(--font-num);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
  border: 2px solid rgba(255, 255, 255, 0.85);
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 10;
}

.spot-pin::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: var(--radius-full);
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  animation: spotPulse 2s infinite ease-out;
  pointer-events: none;
}

@keyframes spotPulse {
  0% {
    transform: scale(0.9);
    opacity: 0.9;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

/* 激活高亮状态的标记点 */
.spot-pin.active {
  background: #271E18;
  color: #FFFFFF;
  border-color: #E5BDA9;
  transform: translate(-50%, -50%) scale(1.25);
  box-shadow: 0 4px 14px rgba(198, 93, 59, 0.6), 0 0 0 4px rgba(229, 189, 169, 0.4);
  z-index: 20;
}

.spot-pin.active::after {
  border-color: #E5BDA9;
}

/* 8 张部位对照卡列表 */
.contrast-cards-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.contrast-card {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-shadow: var(--shadow-card);
  border: 1.5px solid var(--border-subtle);
  transition: all 0.25s ease;
  cursor: pointer;
}

.contrast-card:hover {
  border-color: rgba(198, 93, 59, 0.4);
}

/* 激活高亮状态的对照卡 */
.contrast-card.active {
  border-color: var(--brand-gold);
  background: #FFFDF9;
  box-shadow: var(--shadow-hover), var(--shadow-glow);
  transform: translateY(-2px);
}

/* 卡片左侧：纹理小图 */
.contrast-card-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.contrast-mat-thumb {
  width: 58px;
  height: 58px;
  border-radius: var(--radius-sm);
  background: #ECE5DA;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

/* 中间文字信息 */
.contrast-card-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

.contrast-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.num-badge {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-full);
  background: #271E18;
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--font-num);
}

.contrast-pos-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.contrast-color-name {
  font-size: 15px;
  color: var(--text-secondary);
}

.contrast-match-detail {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.35;
  word-break: break-all;
}

.contrast-match-detail .highlight {
  color: var(--brand-gold-dark);
  font-weight: 600;
}

/* 卡片右侧：纯色预览色块 + Hex */
.contrast-card-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  min-width: 58px;
}

.contrast-hex-block {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.contrast-hex-text {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  font-family: var(--font-num);
}

/* 展开更多试色或平替说明 */
.contrast-extra-box {
  margin-top: 6px;
  padding: 8px 10px;
  background: var(--bg-warm-tint);
  border-radius: var(--radius-sm);
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-secondary);
  border-left: 2px solid var(--brand-gold);
}

/* ==========================================================================
   页面专属组件：预算详情页、材质详情页、施工交底页
   ========================================================================== */

/* 烧钱 vs 省钱警示栏 */
.budget-split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.budget-alert-card {
  padding: 12px;
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.budget-alert-card.burn {
  background: #FDF3ED;
  border: 1px solid rgba(192, 78, 64, 0.2);
}

.budget-alert-card.burn .alert-title {
  color: var(--brand-danger);
  font-weight: 700;
  font-size: 15.5px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.budget-alert-card.save {
  background: #EEF6F1;
  border: 1px solid rgba(77, 116, 91, 0.25);
}

.budget-alert-card.save .alert-title {
  color: var(--brand-success);
  font-weight: 700;
  font-size: 15.5px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.budget-alert-card .alert-content {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text-secondary);
}

/* 分项预算表格/条目 */
.breakdown-item {
  display: flex;
  flex-direction: column;
  padding: 10px 0;
  border-bottom: 1px dashed var(--border-subtle);
}

.breakdown-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.breakdown-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.breakdown-cat {
  font-size: 16.5px;
  font-weight: 700;
  color: var(--text-main);
  flex: 1;
  min-width: 0;
  padding-right: 10px;
}

.breakdown-val {
  font-size: 17px;
  font-weight: 700;
  font-family: var(--font-num);
  color: var(--brand-gold-dark);
  white-space: nowrap;
  flex-shrink: 0;
}

.breakdown-note {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 3px;
  line-height: 1.4;
}

/* 平替对照对比表 */
.alt-compare-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
  font-size: 15px;
}

.alt-compare-table th {
  background: var(--bg-warm-tint);
  padding: 8px 10px;
  text-align: left;
  font-weight: 600;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-subtle);
}

.alt-compare-table td {
  padding: 10px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-main);
  vertical-align: top;
}

/* 翻车预警卡片 (Pitfalls) */
.pitfall-item {
  background: #FFF9F6;
  border: 1px solid rgba(192, 78, 64, 0.2);
  border-left: 4px solid var(--brand-danger);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 10px;
  display: flex;
  gap: 8px;
}

.pitfall-icon {
  color: var(--brand-danger);
  font-weight: 800;
  font-size: 16px;
  flex-shrink: 0;
  line-height: 1.35;
}

.pitfall-text {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-main);
}

/* 施工交底文章排版 */
.spec-article {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-secondary);
}

.spec-article h4 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-main);
  margin: 14px 0 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.spec-article p {
  margin-bottom: 10px;
}

/* 墙地顶三联卡片 (Surfaces) */
.surface-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.surface-box {
  background: var(--bg-page);
  border-radius: var(--radius-md);
  padding: 10px;
  border: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.surface-header {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 4px;
}

.surface-mat {
  font-size: 13px;
  color: var(--brand-gold-dark);
  font-weight: 600;
}

.surface-detail {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.35;
}

/* ==========================================================================
   入口选图页 (Gallery) 样式
   ========================================================================== */

.gallery-tabs-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 0 10px;
  scrollbar-width: none;
}
.gallery-tabs-scroll::-webkit-scrollbar {
  display: none;
}

.gallery-tab-btn {
  padding: 6px 14px;
  border-radius: var(--radius-full);
  background: #FFFFFF;
  border: 1px solid var(--border-subtle);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s;
}

.gallery-tab-btn.active {
  background: var(--bg-dark);
  color: #FFFFFF;
  border-color: var(--bg-dark);
}

.gallery-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.gallery-card {
  background: #FFFFFF;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-card);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.gallery-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.gallery-img-box {
  width: 100%;
  aspect-ratio: 1 / 1.1;
  background: #ECE5DA;
  position: relative;
  overflow: hidden;
}

.gallery-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gallery-tag-float {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(32, 24, 20, 0.75);
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  backdrop-filter: blur(4px);
}

.gallery-info-box {
  padding: 10px;
}

.gallery-item-title {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.gallery-item-space {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: 3px;
}

/* ==========================================================================
   底部吸底操作栏 (升单按钮 + 保存高清卡片按钮)
   ========================================================================== */

.lab-bottom-bar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  z-index: 110;
  padding: 10px 16px;
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  background: rgba(247, 244, 238, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 升单按钮条 */
.btn-upsell-banner {
  background: linear-gradient(90deg, #3A2A20 0%, #5E4333 100%);
  color: #FFFFFF;
  border-radius: var(--radius-md);
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(58, 42, 32, 0.2);
  transition: opacity 0.2s;
}

.btn-upsell-banner:active {
  opacity: 0.9;
}

.btn-upsell-banner .arrow-tag {
  background: rgba(255, 255, 255, 0.2);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 13px;
}

/* 保存高清卡片主按钮 (参考图 2 底部原款) */
.btn-action-primary {
  width: 100%;
  height: 48px;
  background: #2C211A;
  color: #FFFFFF;
  border: none;
  border-radius: var(--radius-xl);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(44, 33, 26, 0.3);
  transition: background 0.2s, transform 0.15s;
}

.btn-action-primary:active {
  background: #1A130F;
  transform: scale(0.98);
}

/* ==========================================================================
   通用海报保存弹窗 (Poster Modal)
   ========================================================================== */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(6px);
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-backdrop.show {
  display: flex;
}

.poster-box {
  width: 100%;
  max-width: 360px;
  max-height: 85vh;
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  overflow-y: auto;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  animation: modalPop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalPop {
  0% { transform: scale(0.9); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.poster-header {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-subtle);
}

.poster-header h3 {
  font-size: 17px;
  font-weight: 700;
}

.poster-close-btn {
  background: none;
  border: none;
  font-size: 25px;
  cursor: pointer;
  color: var(--text-muted);
}

.poster-card-body {
  padding: 16px;
  background: #FAF8F5;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.poster-preview-img {
  width: 100%;
  border-radius: var(--radius-md);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.poster-footer-bar {
  padding: 12px 16px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.poster-hint-text {
  font-size: 13px;
  text-align: center;
  color: var(--text-muted);
}

.btn-poster-download {
  width: 100%;
  height: 42px;
  background: var(--brand-gold);
  color: #fff;
  border: none;
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
}


/* ==========================================================================
   可读性版字号（地板 14px / 正文 16~17px）配套布局适配 · 2026-09-19
   1) 大标题防孤字
   2) 平替对照表窄屏卡片化（3 列放不下 16px 字）
   ========================================================================== */
.hero-title-box h1,
.lab-card > .card-header-row .card-main-title {
  text-wrap: balance;
}

/* 高性价比平替对照表：窄屏由 3 列表格改为卡片堆叠
   （原 28%/38%/34% 三列，在 390px 宽下每列仅约 100px，装不下 16px 字号的价格文本） */
@media (max-width: 640px) {
  .alt-compare-table thead {
    display: none;
  }
  .alt-compare-table,
  .alt-compare-table tbody,
  .alt-compare-table tr,
  .alt-compare-table td {
    display: block;
    width: 100%;
  }
  .alt-compare-table tr {
    border: 1px solid var(--border-card);
    border-radius: 12px;
    background: var(--bg-card);
    margin-bottom: 12px;
    overflow: hidden;
  }
  .alt-compare-table tr:last-child {
    margin-bottom: 0;
  }
  .alt-compare-table td {
    border-bottom: 1px dashed var(--border-subtle);
    padding: 10px 14px;
  }
  .alt-compare-table tr td:last-child {
    border-bottom: none;
  }
  .alt-compare-table td::before {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dim);
    letter-spacing: 0.3px;
    margin-bottom: 3px;
  }
  .alt-compare-table td:nth-child(1)::before {
    content: "原案配置";
  }
  .alt-compare-table td:nth-child(2)::before {
    content: "高性价比平替";
  }
  .alt-compare-table td:nth-child(3)::before {
    content: "省钱效果";
  }
}

/* 卡片标题行：标题组不许被压缩（否则「配色方案」被挤成「配色方/案」），
   让右侧说明文字占剩余宽度、右对齐换行 */
.card-title-group {
  flex-shrink: 0;
}

.card-header-tag {
  flex: 1;
  min-width: 0;
  text-align: right;
}

/* 底部升级条：右侧「立即咨询」胶囊不被压缩折行，文案区自动让位并两行均衡 */
.btn-upsell-banner {
  gap: 10px;
}

.btn-upsell-banner > span:first-child {
  flex: 1;
  text-wrap: balance;
}

.btn-upsell-banner .arrow-tag {
  flex-shrink: 0;
  white-space: nowrap;
}

/* ==========================================================================
   首页 hero 卡片精简（2026-09-19 卡卡逐条反馈）
   背景：一屏里「卡卡家园·风格图鉴」出现两遍（① 浏览器标题栏 + ② 页面顶栏），
        hero 里又写了一遍「卡卡家园 · 风格深度拆解」；右上的「8次权益」是写死
        文案（永远显示 8），与顶栏真实余额「剩余 N 次」并列会被误读成余额；
        主标题因此被右上角徽章挤断成两行；四个标签 3+1 参差。
   处理：① 页面标题改为「卡卡家园 · 风格图鉴」承担品牌；② 顶栏精简为「风格图鉴」；
        删掉 hero 内重复品牌行与假徽章；主标题占满整行；四标签改 2×2 网格；
        底部补一行真实身份（脱敏开通码）。
   ========================================================================== */

/* 主标题：占满整行（原来右上有徽章时被挤成两行） */
.hero-headline {
  margin: 0;
  font-size: 23px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--text-main);
  text-wrap: balance;
}

/* 四个价值点：2×2 网格对齐 */
.hero-tag-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}

.hero-tag-item {
  font-size: 13px;
  background: #FFF;
  padding: 7px 10px;
  border-radius: 8px;
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  text-align: center;
  white-space: nowrap;
}

/* 真实身份行（替代原「8次权益」写死徽章） */
.hero-account {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--border-subtle);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}