/* ===========================================================================
   CoffeeLoop · 用户端（小程序形态 H5）
   视觉语言参照高端家居小程序的画册感：
     · 纸灰白底 + 纯白卡片，不用描边，只靠明度差和一层很薄的浮影分层
     · 首屏是整幅深色封面，信息卡压住封面下沿浮起来
     · 中文走小字重，英文一律大写字距拉开（eyebrow 用法）
     · 价格、数字用近黑而不是红黄；颜色只出现在封面与一处淡蓝底卡
   这是一份从零写的样式，不再有"主题覆盖层"，改哪就是哪。
   =========================================================================== */

/* ---------------------------------- 令牌 ---------------------------------- */
:root {
  --bg: #F2F1EF;          /* 页面底色：偏中性的纸灰白 */
  --bg-outer: #E6E4E1;    /* 桌面预览时手机壳外的底色 */
  --surface: #FFFFFF;
  --wash: #F7F5F2;        /* 图位 / 次级块 */
  --wash-2: #EFEDE8;
  --tint: #EDF1F8;        /* 会员卡那种极淡的蓝灰 */
  --tint-2: #E4EAF4;

  --ink: #141414;
  --ink-2: #5F5C57;
  --ink-3: #A6A29B;
  --ink-4: #C7C3BC;

  --hair: #ECEAE5;
  --hair-2: #F4F2EE;

  --dark: #171614;
  --dark-2: #2A2825;
  --on-dark: #F6F4F0;

  --warn: #A9432C;        /* 只用于待支付 / 异常提示 */
  --warn-soft: #FBF1ED;
  --ok: #3D6B57;
  --ok-soft: #EDF3EF;

  --radius: 20px;
  --radius-sm: 14px;
  --radius-xs: 10px;

  --shadow-card: 0 1px 2px rgba(23, 22, 20, .02);
  --shadow-float: 0 1px 2px rgba(23, 22, 20, .03), 0 18px 34px -16px rgba(23, 22, 20, .18);

  /* 兼容旧引用 */
  --card: var(--surface);
  --brand: var(--ink);
  --brand-2: var(--ink);
  --brand-soft: #F1EFEB;
  --brand-ink: #FFFFFF;
  --accent: var(--ok);
  --accent-soft: var(--ok-soft);
  --line: var(--hair);
  --line-2: var(--hair-2);
  --gold: #8A7A4E;

  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
          "Microsoft YaHei", "Segoe UI", sans-serif;
  --font-en: "Helvetica Neue", "Segoe UI", Arial, sans-serif;
}

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

html, body { margin: 0; padding: 0; height: 100%; }

body {
  font-family: var(--font);
  background: var(--bg-outer);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  overflow-x: hidden;
}

/* -------------------------------- 手机壳 -------------------------------- */
.phone {
  position: relative;
  width: min(430px, 100%);
  height: min(880px, calc(100vh - 48px));
  background: var(--bg);
  border-radius: 40px;
  box-shadow: 0 24px 60px -24px rgba(23, 22, 20, .30), 0 0 0 1px rgba(23, 22, 20, .05);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

@media (max-width: 560px) {
  body { padding: 0; align-items: stretch; background: var(--bg); }
  .phone {
    width: 100%; height: 100vh; height: 100dvh;
    border-radius: 0; box-shadow: none;
  }
}

/* --------------------------------- 顶栏 --------------------------------- */
.appbar {
  flex: 0 0 auto;
  height: 52px;
  padding: 0 18px;
  display: flex; align-items: center; gap: 10px;
  background: var(--bg);
  position: relative; z-index: 30;
}
.appbar .bar-title {
  font-size: 15px; font-weight: 500; letter-spacing: .01em; color: var(--ink);
}
.appbar .spacer { flex: 1; }
.appbar .back {
  width: 30px; height: 30px; border-radius: 50%; border: 0;
  background: rgba(20, 20, 20, .05); color: var(--ink);
  display: grid; place-items: center; cursor: pointer;
  font-size: 17px; line-height: 1; padding: 0 1px 2px 0;
  font-family: var(--font);
}
.appbar .back:active { background: rgba(20, 20, 20, .10); }
.appbar .capsule {
  display: flex; align-items: center; gap: 0;
  border: 1px solid rgba(20, 20, 20, .10); border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  height: 28px; overflow: hidden;
}
.appbar .capsule span {
  padding: 0 11px; font-size: 11px; color: #55524D; line-height: 28px;
}
.appbar .capsule span + span { border-left: 1px solid rgba(20, 20, 20, .08); }

/* 首页：顶栏浮在封面上，字变白 */
body.home .appbar {
  position: absolute; top: 0; left: 0; right: 0;
  background: transparent;
  color: #fff;
}
body.home .appbar .bar-title {
  color: rgba(255, 255, 255, .92);
  font-size: 11px; font-weight: 500;
  letter-spacing: .30em; text-transform: uppercase;
  font-family: var(--font-en);
}
body.home .appbar .capsule {
  border-color: rgba(255, 255, 255, .34);
  background: rgba(255, 255, 255, .12);
  backdrop-filter: blur(6px);
}
body.home .appbar .capsule span { color: rgba(255, 255, 255, .92); }
body.home .appbar .capsule span + span { border-left-color: rgba(255, 255, 255, .22); }

/* 滚动区 */
.view {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  padding: 14px 16px 30px;
  scroll-behavior: smooth;
  scrollbar-width: thin; scrollbar-color: #D9D6D1 transparent;
}
.view::-webkit-scrollbar { width: 4px; height: 0; }
.view::-webkit-scrollbar-thumb { background: #D9D6D1; border-radius: 3px; }
body.home .view { padding-top: 0; }

/* -------------------------------- 底部导航 -------------------------------- */
.tabbar {
  flex: 0 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(1.2) blur(12px);
  border-top: 1px solid var(--hair);
  padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px));
}
.tabbar button {
  border: 0; background: none; font: inherit; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 4px 0;
  color: #B0ACA5; font-size: 10px; font-weight: 500; letter-spacing: .04em;
  transition: color .16s ease;
}
.tabbar button svg { width: 21px; height: 21px; stroke-width: 1.5; }
.tabbar button.on { color: var(--ink); }
.tabbar button.on svg { stroke-width: 1.9; }
.tabbar[hidden] { display: none; }

/* ================================= 首页封面 ================================= */
.cover {
  position: relative;
  margin: 0 -16px;
  height: 302px;
  background: var(--dark);
  overflow: hidden;
  display: flex; flex-direction: column;
  isolation: isolate;
}
/* 右上角暖光 + 底部压暗，替代真实照片的光线 */
.cover::before {
  content: ""; position: absolute; inset: -20% -30% 20% 20%;
  background:
    radial-gradient(60% 55% at 72% 22%, rgba(196, 158, 104, .42) 0%, rgba(196, 158, 104, 0) 62%),
    radial-gradient(50% 40% at 20% 0%, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, 0) 70%);
  z-index: 0;
}
.cover::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(12, 11, 10, .55) 0%, rgba(12, 11, 10, 0) 26%),
    linear-gradient(0deg, rgba(12, 11, 10, .78) 0%, rgba(12, 11, 10, .10) 46%, rgba(12, 11, 10, 0) 70%);
  z-index: 1;
}
.cover .cover-art {
  position: absolute; right: -78px; top: 46px;
  width: 296px; height: 296px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .10);
  color: rgba(255, 255, 255, .15);
  z-index: 1;
}
.cover .cover-art::before {
  content: ""; position: absolute; inset: 40px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .075);
}
.cover .cover-art::after {
  content: ""; position: absolute; inset: 86px; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, rgba(214, 176, 122, .26) 0%, rgba(214, 176, 122, .02) 72%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.cover .cover-art svg { display: none; }
.cover .cover-word {
  position: relative; z-index: 2;
  margin: auto 0 0;
  padding: 0 24px;
}
.cover .cover-eyebrow {
  font-family: var(--font-en);
  font-size: 9px; letter-spacing: .34em; text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}
.cover .cover-en {
  font-family: var(--font-en);
  font-size: 31px; line-height: 1.16; font-weight: 300;
  letter-spacing: .12em; color: #fff;
  margin: 12px 0 0;
}
.cover .cover-cn {
  margin: 12px 0 0;
  font-size: 12px; font-weight: 400; letter-spacing: .18em;
  color: rgba(255, 255, 255, .66);
}
.cover .cover-foot {
  position: relative; z-index: 2;
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: 18px 24px 76px;
  font-family: var(--font-en);
  font-size: 8.5px; letter-spacing: .26em; text-transform: uppercase;
  color: rgba(255, 255, 255, .46);
}

/* ------------------------- 浮起的信息卡（首页核心） ------------------------- */
.panel {
  position: relative; z-index: 5;
  margin: -60px 0 0;
  background: var(--surface);
  border-radius: 24px;
  box-shadow: var(--shadow-float);
  overflow: hidden;
}
.panel-top {
  padding: 20px 20px 18px;
  background: linear-gradient(178deg, #EDF2FA 0%, #F7F9FC 34%, #FFFFFF 78%);
}
.panel-eyebrow {
  font-family: var(--font-en);
  font-size: 8.5px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--ink-3);
}
.panel-title {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 9px;
}
.panel-title h1 {
  margin: 0; font-size: 17px; font-weight: 500; letter-spacing: .01em; line-height: 1.3;
}
.panel-title h1 b { font-weight: 600; }
.panel-unit {
  font-size: 11px; font-weight: 400; color: var(--ink-3);
  margin-left: 2px; letter-spacing: .02em;
}
.panel-sub {
  margin-top: 8px;
  font-size: 11px; color: var(--ink-3); letter-spacing: .02em; line-height: 1.6;
}
.panel-sub .lk { color: var(--ink-2); border-bottom: 1px solid var(--ink-4); padding-bottom: 1px; }
.panel-round {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
  border: 0; cursor: pointer;
  background: var(--tint-2); color: #3E5474;
  display: grid; place-items: center;
}
.panel-round svg { width: 17px; height: 17px; stroke-width: 1.6; }
.panel-stats {
  display: grid; grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--hair);
}
.panel-stats > div { padding: 16px 20px 18px; position: relative; }
.panel-stats > div + div::before {
  content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 1px; background: var(--hair);
}
.panel-stats .k {
  font-family: var(--font-en);
  font-size: 23px; font-weight: 500; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums; color: var(--ink); line-height: 1.1;
}
.panel-stats .k small { font-size: 12px; font-weight: 400; color: var(--ink-3); margin-left: 2px; }
.panel-stats .v {
  margin-top: 6px;
  font-size: 10px; color: var(--ink-3); letter-spacing: .16em;
}

/* --------------------------- 活动栏（运营可改） --------------------------- */
.promo {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 10px;
  margin-top: 12px; padding: 11px 14px 11px 16px;
  background: var(--surface);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  cursor: pointer;
}
.promo::before {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, #C0A079, #8C7452);
  opacity: .5;
}
.promo-tag {
  flex: 0 0 auto;
  font-size: 9px; letter-spacing: .12em;
  color: var(--ink-2); background: var(--wash);
  padding: 3px 7px; border-radius: 5px;
}
.promo-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.promo-title {
  font-size: 12px; color: var(--ink); letter-spacing: .01em; line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.promo-sub {
  font-size: 9.5px; color: var(--ink-3); letter-spacing: .04em; line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.promo-go {
  flex: 0 0 auto; display: flex; align-items: center; gap: 1px;
  font-size: 9.5px; color: var(--ink-3); letter-spacing: .06em;
}
.promo-go svg { width: 12px; height: 12px; stroke-width: 1.6; }

/* --------------------------------- 搜索条 --------------------------------- */
.searchbar {
  display: flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 18px;
  margin-top: 14px;
  background: var(--surface);
  border-radius: 999px;
  box-shadow: var(--shadow-card);
  color: var(--ink-3); font-size: 12px; letter-spacing: .02em;
  cursor: pointer;
}
.searchbar svg { width: 15px; height: 15px; stroke: var(--ink-3); stroke-width: 1.5; flex: 0 0 auto; }

/* ------------------------- 四宫格（2×2 画册式磁贴） ------------------------- */
.grid-nav {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}
.grid-nav .gn {
  display: block; text-align: left;
  background: var(--surface);
  border: 0; border-radius: 18px;
  padding: 0; overflow: hidden;
  box-shadow: var(--shadow-card);
  cursor: pointer; font: inherit; color: var(--ink);
}
.grid-nav .gn .gn-pic {
  height: 88px;
  background: radial-gradient(120% 100% at 50% 0%, #FCFAF7 0%, #EFEAE2 100%);
  display: grid; place-items: center;
  color: #8F8A81;
}
.grid-nav .gn .gn-pic svg { width: 34px; height: 34px; stroke-width: 1.1; }
.grid-nav .gn:nth-child(2) .gn-pic { background: radial-gradient(120% 100% at 50% 0%, #FAFAF8 0%, #ECEEEC 100%); }
.grid-nav .gn:nth-child(3) .gn-pic { background: radial-gradient(120% 100% at 50% 0%, #FBF9F6 0%, #EDE9E1 100%); }
.grid-nav .gn:nth-child(4) .gn-pic { background: radial-gradient(120% 100% at 50% 0%, #F9FAFB 0%, #E9EBEF 100%); }
.grid-nav .gn .gn-body { padding: 11px 14px 13px; }
.grid-nav .gn .gn-cn { font-size: 12.5px; font-weight: 500; letter-spacing: .02em; line-height: 1.3; }
.grid-nav .gn .gn-en {
  margin-top: 4px;
  font-family: var(--font-en);
  font-size: 7.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3);
}
.grid-nav .gn:active .gn-pic { background: var(--wash-2); }

/* --------------------------- 深色推广条（回收报价） --------------------------- */
.rec-banner {
  position: relative; overflow: hidden;
  display: flex; align-items: flex-end; gap: 12px;
  min-height: 132px;
  margin-top: 14px;
  padding: 20px;
  border-radius: 20px;
  background: linear-gradient(150deg, #232120 0%, #171614 62%, #1F1D1A 100%);
  color: var(--on-dark);
  cursor: pointer;
  isolation: isolate;
}
.rec-banner::before {
  content: ""; position: absolute; right: -30px; top: -40px; width: 190px; height: 190px;
  background: radial-gradient(circle at 50% 50%, rgba(196, 158, 104, .38), rgba(196, 158, 104, 0) 66%);
  z-index: 0;
}
.rec-banner .rb-art {
  position: absolute; right: 14px; bottom: -12px;
  width: 108px; height: 108px; color: rgba(255, 255, 255, .12); z-index: 0;
}
.rec-banner .rb-art svg { width: 100%; height: 100%; stroke-width: .9; }
.rec-banner > div { position: relative; z-index: 1; }
.rec-banner .rb-k {
  font-size: 10px; letter-spacing: .18em; color: rgba(246, 244, 240, .58);
  text-transform: uppercase; font-family: var(--font-en);
}
.rec-banner .rb-v {
  margin-top: 8px;
  font-family: var(--font-en);
  font-size: 27px; font-weight: 400; letter-spacing: -.01em;
  color: #fff; font-variant-numeric: tabular-nums; line-height: 1.1;
}
.rec-banner .rb-note {
  margin-top: 7px; font-size: 10.5px; color: rgba(246, 244, 240, .52); letter-spacing: .02em;
}
.rec-banner .rb-btn {
  position: relative; z-index: 1;
  margin-left: auto; align-self: flex-end; flex: 0 0 auto;
  border: 0; border-radius: 999px; cursor: pointer;
  background: #F6F4F0; color: #1A1917;
  padding: 10px 18px; font: inherit; font-size: 11.5px; font-weight: 500;
  letter-spacing: .06em;
}
.rec-banner .rb-btn:active { background: #E9E5DE; }

/* --------------------------- 数据条（我的 / 首页复用） --------------------------- */
.metrics {
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--surface);
  border-radius: 18px;
  margin-top: 12px; overflow: hidden;
  box-shadow: var(--shadow-card);
}
.metrics > div { padding: 15px 6px; text-align: center; position: relative; }
.metrics > div + div::before {
  content: ""; position: absolute; left: 0; top: 26%; bottom: 26%; width: 1px; background: var(--hair);
}
.metrics .k {
  font-family: var(--font-en);
  font-size: 18px; font-weight: 500; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums; color: var(--ink); line-height: 1.1;
}
.metrics .k.txt { font-size: 13px; font-weight: 500; letter-spacing: .02em; font-family: var(--font); }
.metrics .v { font-size: 9.5px; color: var(--ink-3); margin-top: 6px; letter-spacing: .12em; }
.metrics .l { color: var(--ink-3); }

/* --------------------------------- 分区 --------------------------------- */
.section { margin-top: 26px; }
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 12px; padding: 0 2px;
}
.section-head h2 {
  margin: 0; font-size: 15px; font-weight: 500; letter-spacing: .02em; color: var(--ink);
}
.section-head .more {
  border: 0; background: none; cursor: pointer; font-family: inherit;
  font-size: 10.5px; color: var(--ink-3); letter-spacing: .04em;
}

/* -------------------------------- 品牌墙 -------------------------------- */
/* 4 列，一格只放「英文 logo + 中文小字」。
   logo 不做图片，用字距和字重撑住版面——图片会引入加载态和尺寸抖动，
   而这里是首页最上面的一块，抖动一次整屏都跟着跳。 */
.brand-wall {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
}
.brand {
  appearance: none; border: 0; cursor: pointer; font-family: inherit;
  height: 76px; padding: 0 6px; background: var(--surface);
  border-radius: 14px; box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  transition: transform .16s ease;
}
.brand:active { transform: scale(.97); }
.brand-logo {
  font-family: var(--font-en); font-size: 11.5px; font-weight: 500;
  letter-spacing: .02em; color: var(--ink); line-height: 1.1;
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand-logo.sm { font-size: 9.5px; letter-spacing: 0; }

/* 上传的 Logo 图：格子只有 71×76，所以高度卡在 26px、宽 84%，
   剩下的空间留给中文名。object-fit 保证长条形 logo 不被拉变形。 */
.brand-img {
  display: block; max-width: 84%; max-height: 26px; object-fit: contain;
  overflow: hidden;
}
.brand-cn {
  font-size: 9px; color: var(--ink-3); letter-spacing: .08em; line-height: 1;
}

/* --------------------------------- 卡片 --------------------------------- */
.card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.card-pad { padding: 18px; }

/* --------------------------------- 商品卡 --------------------------------- */
.goods {
  background: var(--surface);
  border-radius: 16px;
  overflow: hidden; cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: transform .16s ease;
}
.goods:active { transform: scale(.985); }
.goods .pic {
  position: relative; height: 132px;
  background: radial-gradient(130% 110% at 50% 0%, #FCFAF7 0%, #EFEAE2 100%);
  display: grid; place-items: center;
}
.goods .pic::after {
  content: ""; position: absolute; left: 50%; bottom: 13%;
  width: 46%; height: 7px; transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(60, 52, 40, .085) 0%, rgba(60, 52, 40, 0) 74%);
  filter: blur(6px);
}
.goods .pic svg {
  width: 58px; height: 58px; stroke: #B5AFA5; stroke-width: 1.05;
  position: relative; z-index: 1;
}
.goods .cond-tag {
  position: absolute; left: 10px; top: 10px;
  background: rgba(255, 255, 255, .88);
  color: #4A4741;
  font-size: 8.5px; line-height: 1; letter-spacing: .10em;
  padding: 6px 8px; border-radius: 999px; font-weight: 500;
  backdrop-filter: blur(4px);
}
.goods .info { padding: 12px 13px 14px; }
.goods .ttl {
  font-size: 12.5px; line-height: 1.5; height: 37.5px; overflow: hidden; color: var(--ink);
  font-weight: 400; letter-spacing: .01em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.goods .sub { font-size: 9.5px; color: var(--ink-3); margin-top: 5px; letter-spacing: .06em; }
.goods .prow {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 6px; margin-top: 9px;
}
.goods .prow .price { font-size: 14px; }

/* 图位（详情 / 列表通用）：暖白渐层 + 极淡品牌字 */
.ph, .ph-lg {
  position: relative;
  background: linear-gradient(178deg, #FAF8F5 0%, #EFEBE4 100%);
  display: grid; place-items: center;
  overflow: hidden;
}
.ph svg, .ph-lg svg { stroke: #BFB9AF; stroke-width: 1.1; }
.ph::after, .ph-lg::after {
  content: ""; position: absolute; left: 50%; bottom: 11%;
  width: 58%; height: 10px; transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(60, 52, 40, .13) 0%, rgba(60, 52, 40, 0) 72%);
  filter: blur(4px);
}
.ph > *, .ph-lg > * { position: relative; z-index: 1; }
.ph-word {
  position: absolute; left: 0; right: 0; bottom: 22px;
  text-align: center;
  font-family: var(--font-en);
  font-size: 8px; letter-spacing: .34em; text-indent: .34em;
  text-transform: uppercase;
  color: rgba(60, 52, 40, .26);
  z-index: 1;
}
/* 图位左上角的目录式小标签（品牌 / 图注） */
.ph-tag {
  position: absolute; left: 14px; top: 14px; z-index: 1;
  font-family: var(--font-en);
  font-size: 8px; letter-spacing: .20em; text-transform: uppercase;
  color: rgba(60, 52, 40, .45);
  border: 1px solid rgba(60, 52, 40, .13);
  background: rgba(255, 255, 255, .55);
  border-radius: 999px; padding: 5px 10px;
}

/* --------------------------------- 按钮 --------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--hair); background: var(--surface); color: var(--ink);
  border-radius: 14px; padding: 11px 16px;
  font: inherit; font-size: 13.5px; font-weight: 500; letter-spacing: .02em;
  cursor: pointer; transition: transform .1s ease, background .16s ease;
}
.btn:active { transform: scale(.985); background: #FBFAF8; }
.btn-primary {
  background: var(--ink); border-color: var(--ink); color: #fff;
  font-weight: 500;
}
.btn-primary:active { background: #000; }
.btn-primary:disabled {
  background: #E8E5E0; border-color: #E8E5E0; color: #A8A39C;
  cursor: not-allowed; transform: none;
}
.btn-block { display: flex; width: 100%; }
.btn-sm { padding: 8px 13px; font-size: 12px; border-radius: 999px; }
.btn-ghost { background: transparent; }
.btn-danger { color: var(--warn); border-color: #EFDFD9; background: #fff; }

/* --------------------------------- 标签 --------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 9px; border-radius: 999px;
  font-size: 9.5px; font-weight: 500; letter-spacing: .04em;
  background: #F2F0EC; color: var(--ink-2);
}
.badge.green { background: var(--ok-soft); color: var(--ok); }
.badge.red { background: var(--warn-soft); color: var(--warn); }
.badge.gold { background: #F7F2E4; color: var(--gold); }
.badge.gray { background: #F2F0EC; color: var(--ink-2); }

/* --------------------------------- 价格 --------------------------------- */
.price {
  color: var(--ink); font-weight: 500;
  letter-spacing: -.01em; font-variant-numeric: tabular-nums;
}
.price .unit, .price .cur { font-weight: 400; }
.price.red { color: var(--ink); }
.money-red, .red { color: var(--ink); }

/* --------------------------------- 表单 --------------------------------- */
.field { margin-bottom: 16px; }
.field label {
  display: block; font-size: 10px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 8px;
}
.field input, .field textarea, .field select {
  width: 100%;
  border: 1px solid var(--hair);
  background: var(--surface);
  border-radius: 14px;
  padding: 13px 14px;
  font: inherit; font-size: 13.5px; color: var(--ink);
  outline: none;
  transition: border-color .16s ease, background .16s ease;
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-4); }
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--ink); background: #fff;
}
.field textarea { resize: vertical; min-height: 82px; }
.hint { font-size: 10.5px; color: var(--ink-3); margin-top: 6px; line-height: 1.6; }

/* --------------------------------- 品牌筛选条 --------------------------------- */
.brand-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px; margin-bottom: 10px;
  background: var(--surface); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
}
.brand-bar .bb-eyebrow {
  font-family: var(--font-en); font-size: 8px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-4);
}
.brand-bar .bb-name { font-size: 13px; font-weight: 500; color: var(--ink); }
.brand-bar .bb-x {
  margin-left: auto; border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: 10.5px; color: var(--ink-3); letter-spacing: .04em;
}

/* --------------------------------- 胶囊筛选 --------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  border: 1px solid var(--hair); background: var(--surface);
  border-radius: 999px; padding: 9px 15px;
  font: inherit; font-size: 11.5px; letter-spacing: .03em; color: var(--ink-2);
  cursor: pointer; transition: all .16s ease;
}
.chip.on {
  background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 500;
}
.chip:active { transform: scale(.97); }

/* --------------------------------- 列表行 --------------------------------- */
.item {
  display: flex; gap: 13px; padding: 15px 16px; align-items: center;
  background: var(--surface);
  border-bottom: 1px solid var(--hair-2);
  cursor: pointer;
}
.item:last-child { border-bottom: 0; }
.item:active { background: #FBFAF8; }
.item .thumb {
  width: 58px; height: 58px; border-radius: 14px; flex: 0 0 auto;
  background: var(--wash);
  display: grid; place-items: center;
  overflow: hidden;
}
.item .thumb svg { width: 26px; height: 26px; stroke: #B9B4AB; stroke-width: 1.2; }
.item .body { flex: 1; min-width: 0; }
.item .title {
  font-size: 13px; font-weight: 500; line-height: 1.45; margin-bottom: 4px;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.item .meta { font-size: 10.5px; color: var(--ink-3); letter-spacing: .04em; }
.item .line-1 { color: var(--ink); }
.item .line-2 { color: var(--ink-3); }

/* --------------------------------- 步骤 --------------------------------- */
.steps { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; }
.steps .dot {
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-en); font-size: 10px; font-weight: 500;
  background: transparent; color: var(--ink-4);
  border: 1px solid var(--hair);
  flex: 0 0 auto;
}
.steps .dot.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.steps .dot.done { background: #EFECE6; border-color: transparent; color: var(--ink-2); }
.steps .bar { flex: 1; height: 1px; background: var(--hair); border-radius: 0; }
.steps .bar.on { background: var(--ink); }

/* -------------------------------- 估价结果 -------------------------------- */
.quote-box {
  background: var(--surface);
  border-radius: 24px;
  padding: 28px 20px 24px;
  text-align: center;
  box-shadow: var(--shadow-card);
}
.quote-box .label {
  font-family: var(--font-en);
  font-size: 9px; letter-spacing: .26em; text-transform: uppercase; color: var(--ink-3);
}
.quote-box .amount {
  font-family: var(--font-en);
  font-size: 44px; font-weight: 400; color: var(--ink);
  line-height: 1.1; letter-spacing: -.03em; margin: 10px 0 6px;
}
.quote-box .range { font-size: 11.5px; color: var(--ink-2); letter-spacing: .04em; }
.quote-box .maxline { margin-top: 12px; font-size: 10.5px; color: var(--ink-3); }

.breakdown { margin-top: 18px; }
.bd-row { padding: 14px 0; border-bottom: 1px solid var(--hair-2); }
.bd-row:last-child { border-bottom: 0; }
.bd-top { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; }
.bd-label { font-weight: 400; color: var(--ink-2); }
.bd-val { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 500; }
.bd-note { font-size: 10.5px; color: var(--ink-3); margin-top: 5px; line-height: 1.6; }

/* -------------------------------- 时间线 -------------------------------- */
.timeline { position: relative; padding-left: 20px; }
.timeline::before {
  content: ""; position: absolute; left: 3px; top: 8px; bottom: 8px; width: 1px;
  background: var(--hair);
}
.tl-item { position: relative; padding-bottom: 18px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ""; position: absolute; left: -20px; top: 5px;
  width: 7px; height: 7px; border-radius: 50%;
  background: #fff; border: 1px solid var(--ink-4);
}
.tl-item.active::before { background: var(--ink); border-color: var(--ink); }
.tl-title { font-size: 12.5px; font-weight: 500; }
.tl-time { font-size: 10px; color: var(--ink-3); margin-top: 3px; letter-spacing: .06em; }
.tl-note { font-size: 11px; color: var(--ink-2); margin-top: 5px; line-height: 1.6; }

/* ------------------------------ 底部操作条 ------------------------------ */
.action-bar {
  flex: 0 0 auto;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--hair);
  display: flex; gap: 12px; align-items: center;
  z-index: 5;
}
.action-bar[hidden] { display: none; }

/* --------------------------------- 空态 --------------------------------- */
.empty { text-align: center; padding: 64px 20px; color: var(--ink-3); }
.empty svg { width: 46px; height: 46px; stroke: var(--ink-4); stroke-width: 1.1; margin-bottom: 14px; }
.empty p { margin: 0 0 16px; font-size: 12px; letter-spacing: .04em; }

/* --------------------------------- toast --------------------------------- */
#toast {
  position: fixed; left: 50%; bottom: 100px; transform: translate(-50%, 10px);
  background: rgba(20, 20, 20, .92); color: #fff;
  font-size: 12px; letter-spacing: .02em;
  padding: 11px 18px; border-radius: 999px;
  opacity: 0; pointer-events: none;
  transition: all .22s ease; z-index: 999;
  max-width: 80vw; text-align: center; line-height: 1.5;
  backdrop-filter: blur(6px);
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* --------------------------------- 弹层 --------------------------------- */
.mask {
  position: fixed; inset: 0; background: rgba(18, 17, 15, .42);
  display: flex; align-items: flex-end; justify-content: center; z-index: 500;
  animation: fade .18s ease;
}
.sheet {
  width: min(430px, 100%);
  background: var(--surface);
  border-radius: 26px 26px 0 0;
  padding: 22px 20px calc(22px + env(safe-area-inset-bottom, 0px));
  animation: slideUp .26s cubic-bezier(.2, .8, .3, 1);
  max-height: 86vh; overflow-y: auto;
  scrollbar-width: thin;
}
.sheet h3 { margin: 0 0 6px; font-size: 16px; font-weight: 500; letter-spacing: .01em; }
@keyframes fade { from { opacity: 0 } }
@keyframes slideUp { from { transform: translateY(26px); opacity: .5 } }

/* --------------------------------- 骨架 --------------------------------- */
.skel {
  background: linear-gradient(90deg, #F1EEE9 25%, #F8F6F2 37%, #F1EEE9 63%);
  background-size: 400% 100%; animation: shimmer 1.4s infinite;
  border-radius: 10px;
}
@keyframes shimmer { 0% { background-position: 100% 50% } 100% { background-position: 0 50% } }

/* --------------------------------- 数据条 --------------------------------- */
.stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--surface); border-radius: 18px; overflow: hidden;
  box-shadow: var(--shadow-card);
}
.stats > div { padding: 15px 8px; text-align: center; }
.stats .k {
  font-family: var(--font-en);
  font-size: 17px; font-weight: 500; color: var(--ink);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.stats .k.txt { font-size: 13px; }
.stats .v { font-size: 9.5px; color: var(--ink-3); margin-top: 5px; letter-spacing: .12em; }

/* -------------------------------- 单选行 -------------------------------- */
.opt-row {
  display: flex; gap: 12px; align-items: center;
  padding: 13px 16px;
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: 16px; margin-bottom: 8px; cursor: pointer;
  transition: border-color .16s ease, background .16s ease;
}
.opt-row.on { border-color: var(--ink); background: #FCFBF9; }
.opt-row .radio {
  width: 17px; height: 17px; border-radius: 50%;
  border: 1px solid var(--ink-4); flex: 0 0 auto;
  display: grid; place-items: center;
  transition: border-color .16s ease;
}
.opt-row.on .radio { border-color: var(--ink); }
.opt-row.on .radio::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
.opt-row .txt { flex: 1; }
.opt-row .t1 { font-size: 13px; font-weight: 500; letter-spacing: .01em; }
.opt-row .t2 { font-size: 10.5px; color: var(--ink-3); margin-top: 3px; line-height: 1.55; }

/* -------------------------------- 复选块 -------------------------------- */
.opt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.opt-cell {
  border: 1px solid var(--hair); border-radius: 14px;
  padding: 12px 13px; background: var(--surface);
  cursor: pointer; transition: all .16s ease;
  font-size: 12px;
}
.opt-cell.on { border-color: var(--ink); background: #FCFBF9; }
.opt-cell .n { font-weight: 500; }
.opt-cell .d { font-size: 10px; color: var(--ink-3); margin-top: 3px; }

/* -------------------------------- 工具类 -------------------------------- */
.row { display: flex; align-items: center; gap: 12px; }
.between { justify-content: space-between; }
.gap8 { gap: 8px; }
.mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; } .mt16 { margin-top: 16px; } .mt20 { margin-top: 20px; }
.muted { color: var(--ink-2); }
.faint { color: var(--ink-3); }
.small { font-size: 11.5px; }
.tiny { font-size: 10.5px; }
.num { font-variant-numeric: tabular-nums; }
.center { text-align: center; }

/* 旧版 hero（其他页面若引用，保持可用的深色块） */
.hero {
  background: var(--dark); border-radius: var(--radius); padding: 22px; color: var(--on-dark);
}
.hero h1 { margin: 0 0 8px; font-size: 19px; font-weight: 400; letter-spacing: .04em; }
.hero p { margin: 0; font-size: 11.5px; color: rgba(246, 244, 240, .62); line-height: 1.7; }
.hero .hero-actions { display: flex; gap: 10px; margin-top: 18px; }
.hero .hero-btn {
  flex: 1; border: 0; border-radius: 999px; padding: 11px 10px; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 500;
  background: var(--on-dark); color: #1A1917;
}
.hero .hero-btn.ghost { background: transparent; color: var(--on-dark); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .30); }

/* ---------------------------- 首页横向商品列表 ---------------------------- */
.hscroll {
  display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px;
  scrollbar-width: none;
}
.hscroll::-webkit-scrollbar { display: none; }

/* -------------------------------- 动效偏好 -------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}