/* ===== v2：选车 → 方案 → 发给老C ===== */
/* 灰字整体调亮：说明文字要看得清，不能发暗 */
:root { --color-text-secondary: rgba(255, 255, 255, 0.8); --color-text-tertiary: rgba(255, 255, 255, 0.58); }
body { background: var(--color-bg); color: var(--color-text); font-family: var(--font-sans); -webkit-tap-highlight-color: transparent; }
.app { max-width: var(--max-width); margin: 0 auto; min-height: 100dvh; padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; }
[hidden] { display: none !important; }
section[id], main[id] { scroll-margin-top: 104px; }

/* ---------- 顶栏 + 快捷导航 ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  padding-top: env(safe-area-inset-top);
  background: rgba(10, 10, 10, 0.9);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--color-border);
}
.tb-row { display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 16px; }
.tb-avatar { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--color-accent); object-fit: cover; }
.tb-name { flex: 1; font-weight: var(--weight-bold); font-size: 1rem; }
.tb-name span { color: var(--color-accent); }
.tb-pill {
  padding: 7px 13px; border-radius: var(--radius-full);
  border: 1px solid rgba(48, 209, 88, 0.55); background: var(--color-accent-dim);
  color: var(--color-accent); font-size: 0.875rem; font-weight: var(--weight-bold); white-space: nowrap;
}
.tb-pill:active { background: rgba(48, 209, 88, 0.25); }
.chips { display: flex; gap: 6px; padding: 0 16px 10px; overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chips a {
  flex-shrink: 0; padding: 5px 13px; border-radius: var(--radius-full);
  background: var(--color-bg-card); border: 1px solid var(--color-border);
  font-size: var(--text-caption); color: var(--color-text-secondary); text-decoration: none;
}
.chips a.on { color: var(--color-accent); border-color: rgba(48, 209, 88, 0.45); background: var(--color-accent-dim); }

/* ---------- 通用版块 ---------- */
.block { padding: 28px 16px; }
.block + .block { border-top: 1px solid var(--color-border); }
.eyebrow { font-size: var(--text-caption); font-weight: var(--weight-bold); letter-spacing: 0.12em; color: var(--color-accent); }
.title { margin-top: 6px; font-size: 1.4rem; font-weight: var(--weight-black); line-height: 1.3; }
.sub-title { margin: 26px 0 12px; font-size: 1rem; font-weight: var(--weight-bold); }
.lead { margin-top: 8px; font-size: var(--text-small); color: var(--color-text-secondary); line-height: 1.7; }
.line { margin-top: 14px; font-size: var(--text-small); color: var(--color-text-secondary); line-height: 1.7; }
.line b { color: var(--color-text); }
.note { margin-top: 10px; font-size: var(--text-caption); color: var(--color-text-secondary); line-height: 1.7; }
.note.key { font-size: var(--text-small); font-weight: var(--weight-bold); color: var(--color-accent); }
.note.center { text-align: center; }
.chev { flex-shrink: 0; color: var(--color-text-tertiary); font-size: 1.1rem; font-style: normal; }
.btn, .btn-ghost { height: 44px; border-radius: var(--radius-full); font-size: var(--text-small); font-weight: var(--weight-bold); }
.btn { background: var(--color-accent); color: #06210e; }
.btn-ghost { border: 1px solid rgba(255, 255, 255, 0.18); color: var(--color-text); }
.btn:active, .btn-ghost:active { transform: scale(0.98); }

/* ---------- 第 1 步：选车 ---------- */
.q { font-size: 1.75rem; font-weight: var(--weight-black); letter-spacing: -0.01em; }
.q-sub { margin-top: 6px; font-size: var(--text-small); color: var(--color-text-secondary); }
.search {
  display: flex; align-items: center; gap: 10px;
  margin-top: 18px; height: 50px; padding: 0 14px;
  border-radius: var(--radius-md); background: var(--color-bg-elevated); border: 1px solid var(--color-border);
  transition: border-color var(--duration-fast);
}
.search:focus-within { border-color: var(--color-accent); }
.search svg { flex-shrink: 0; color: var(--color-text-tertiary); }
.search input { flex: 1; min-width: 0; height: 100%; background: none; border: 0; outline: 0; color: var(--color-text); font-size: 1rem; }
.search input::placeholder { color: var(--color-text-tertiary); }
.brands { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 16px; }
.brand {
  height: 46px; border-radius: var(--radius-md); background: var(--color-bg-elevated); border: 1px solid var(--color-border);
  font-weight: var(--weight-bold); font-size: 0.95rem;
  transition: border-color var(--duration-fast), color var(--duration-fast), background var(--duration-fast);
}
.brand[aria-selected="true"] { border-color: var(--color-accent); color: var(--color-accent); background: var(--color-accent-dim); }
.models { margin-top: 10px; }
.model-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 14px 4px; text-align: left; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.model-row:active { background: rgba(255, 255, 255, 0.04); }
.mr-text { flex: 1; min-width: 0; font-size: 1rem; line-height: 1.45; }
.mr-brand { display: block; font-size: var(--text-caption); color: var(--color-text-tertiary); margin-bottom: 2px; }
.mr-count { flex-shrink: 0; font-size: var(--text-caption); color: var(--color-accent); }
.mr-count.cut { color: var(--color-warning); }
.empty { padding: 18px 4px; font-size: var(--text-small); color: var(--color-text-secondary); line-height: 1.7; }
.empty b { color: var(--color-accent); }
.link-row { display: block; width: 100%; padding: 16px 0 0; font-size: var(--text-small); color: var(--color-text-secondary); text-align: center; }
.link-row b { color: var(--color-accent); }
.more-link { display: block; width: 100%; margin-top: 12px; padding: 13px 0; border-radius: var(--radius-md); border: 1px solid var(--color-border); font-size: var(--text-small); font-weight: var(--weight-bold); color: var(--color-accent); }

/* ---------- 信任：3年 / 100万 / 7城 ---------- */
.trust { text-align: center; }
.stats { display: flex; justify-content: center; gap: 48px; }
.stats b { display: block; font-size: 1.9rem; font-weight: var(--weight-black); color: var(--color-accent); line-height: 1.1; }
.stats span { font-size: var(--text-caption); color: var(--color-text-tertiary); }
.service-net {
  display: flex; align-items: center; gap: 16px; max-width: 340px; margin: 20px auto 0;
  padding: 16px 18px; border-radius: var(--radius-md); text-align: left;
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--color-border);
}
.sn-num { flex-shrink: 0; line-height: 1; }
.sn-num b { font-size: 2.6rem; font-weight: var(--weight-black); color: var(--color-accent); }
.sn-num span { font-size: 1rem; font-weight: var(--weight-bold); color: var(--color-accent); margin-left: 2px; }
.sn-num em { display: block; margin-top: 4px; font-style: normal; font-size: 11px; color: var(--color-text-tertiary); letter-spacing: 0.06em; white-space: nowrap; }
.sn-div { width: 1px; align-self: stretch; background: var(--color-border); }
.sn-cities { font-size: var(--text-small); font-weight: var(--weight-medium); line-height: 1.85; }
.sn-cities em { display: block; font-style: normal; font-weight: var(--weight-regular); font-size: var(--text-caption); color: var(--color-text-tertiary); line-height: 1.5; white-space: nowrap; }

/* ---------- 电芯品级 + 保护板 ---------- */
.grades { display: grid; gap: 10px; margin-top: 16px; }
.grade-card { display: flex; gap: 14px; padding: 14px; border-radius: var(--radius-md); background: var(--color-bg-elevated); border: 1px solid var(--color-border); }
.gc-badge { width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center; border-radius: var(--radius-sm); font-size: 1.15rem; font-weight: var(--weight-black); }
.gc-badge.a, .grade.a { background: var(--color-accent-dim); color: var(--color-accent); }
.gc-badge.b, .grade.b { background: rgba(10, 132, 255, 0.16); color: var(--color-blue); }
.gc-badge.mod, .grade.mod { background: rgba(255, 214, 10, 0.16); color: var(--color-warning); }
.gc-name { font-weight: var(--weight-bold); margin-bottom: 3px; }
.grade-card p { font-size: var(--text-small); color: var(--color-text-secondary); line-height: 1.6; }
.spec-table { width: 100%; border-collapse: collapse; font-size: var(--text-small); }
.spec-table th { padding: 8px 4px; text-align: left; font-size: var(--text-caption); font-weight: var(--weight-medium); color: var(--color-text-tertiary); border-bottom: 1px solid var(--color-border); }
.spec-table td { padding: 11px 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.spec-table td:first-child { font-weight: var(--weight-bold); }

/* ---------- 横滑卡片：使用场景 / 售后案例 / 实拍 ---------- */
.hscroll { display: flex; gap: 10px; margin: 16px -16px 0; padding: 0 16px 4px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; scrollbar-width: none; }
.hscroll::-webkit-scrollbar { display: none; }
.hscroll > * { scroll-snap-align: start; flex-shrink: 0; }
.scene, .case { width: 228px; padding: 16px; border-radius: var(--radius-md); background: var(--color-bg-elevated); border: 1px solid var(--color-border); }
.sc-icon { font-size: 1.6rem; }
.sc-name { margin-top: 8px; font-weight: var(--weight-bold); }
.sc-pain { margin-top: 4px; font-size: var(--text-caption); color: var(--color-text-tertiary); }
.sc-sol { margin-top: 10px; font-size: var(--text-small); font-weight: var(--weight-bold); color: var(--color-accent); }
.sc-quote { margin-top: 10px; font-size: var(--text-caption); color: var(--color-text-secondary); line-height: 1.6; }
.case-tag { padding: 2px 8px; border-radius: var(--radius-full); background: var(--color-accent-dim); color: var(--color-accent); font-size: 0.68rem; font-weight: var(--weight-bold); }
.case-title { margin-top: 10px; font-weight: var(--weight-bold); }
.case p { margin-top: 6px; font-size: var(--text-caption); color: var(--color-text-secondary); line-height: 1.65; }
.case-quote { margin-top: 10px; font-size: var(--text-caption); color: var(--color-accent); line-height: 1.5; }
.photos img { width: 150px; height: 200px; border-radius: var(--radius-md); object-fit: cover; background: #1c1c1c; }

/* ---------- 流程 + 价格包含 ---------- */
.flow { margin-top: 16px; counter-reset: f; }
.flow li { position: relative; padding: 0 0 16px 40px; }
.flow li::before {
  counter-increment: f; content: counter(f);
  position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; background: var(--color-accent-dim); color: var(--color-accent);
  font-size: 0.8rem; font-weight: var(--weight-black);
}
.flow li:not(:last-child)::after { content: ''; position: absolute; left: 12.5px; top: 30px; bottom: 2px; width: 1px; background: var(--color-border); }
.flow b { display: block; font-size: var(--text-body); line-height: 26px; }
.flow span { display: block; font-size: var(--text-small); color: var(--color-text-secondary); line-height: 1.6; }
.flow.small b { font-size: var(--text-small); }
.inc-title { margin-bottom: 8px; font-size: var(--text-small); font-weight: var(--weight-bold); color: var(--color-accent); }

/* ---------- 质保时间线 ---------- */
.timeline { margin-top: 16px; }
.tl { display: flex; gap: 14px; padding-bottom: 18px; }
.dot { width: 30px; height: 30px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; font-style: normal; font-size: 0.8rem; font-weight: var(--weight-black); border: 2px solid; }
.dot.g { color: var(--color-accent); border-color: var(--color-accent); }
.dot.b { color: var(--color-blue); border-color: var(--color-blue); }
.dot.y { color: var(--color-warning); border-color: var(--color-warning); }
.tl-when { font-size: var(--text-caption); color: var(--color-accent); font-weight: var(--weight-bold); }
.tl-what { margin-top: 2px; font-weight: var(--weight-bold); }
.tl p { margin-top: 4px; font-size: var(--text-small); color: var(--color-text-secondary); line-height: 1.65; }

/* ---------- 实拍分组 + 客户原话 ---------- */
.seg { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; margin-top: 16px; border-radius: var(--radius-full); background: var(--color-bg-elevated); border: 1px solid var(--color-border); }
.seg.three { grid-template-columns: repeat(3, 1fr); }
.seg button { height: 38px; border-radius: var(--radius-full); font-size: var(--text-small); font-weight: var(--weight-bold); color: var(--color-text-secondary); }
.seg button[aria-selected="true"] { background: #fff; color: #0a0a0a; }
.seg span { opacity: 0.6; margin-left: 2px; }
.bubbles { display: flex; flex-direction: column; gap: 8px; }
.bb { max-width: 78%; padding: 9px 13px; border-radius: 16px; font-size: var(--text-small); line-height: 1.5; }
.bb.c { align-self: flex-start; background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-bottom-left-radius: 4px; }
.bb.r { align-self: flex-end; background: var(--color-accent); color: #06210e; border-bottom-right-radius: 4px; }

/* ---------- 常见问题 ---------- */
.faq { margin-top: 12px; }
.faq details { border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 0; font-size: var(--text-body); font-weight: var(--weight-medium); cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; flex-shrink: 0; font-size: 1.2rem; color: var(--color-text-tertiary); transition: transform var(--duration-fast); }
.faq details[open] summary::after { transform: rotate(45deg); color: var(--color-accent); }
.faq details p { padding: 0 0 16px; font-size: var(--text-small); color: var(--color-text-secondary); line-height: 1.75; }

/* ---------- 联系老C + 页脚 ---------- */
.contact { text-align: center; }
.ct-avatar { display: block; width: 72px; height: 72px; margin: 0 auto; border-radius: 50%; border: 2px solid var(--color-accent); object-fit: cover; }
.ct-name { margin-top: 10px; font-size: 1.3rem; font-weight: var(--weight-black); }
.ct-label { margin-top: 6px; font-size: var(--text-small); color: var(--color-text-secondary); }
.copybox {
  display: flex; align-items: center; gap: 10px; margin-top: 8px;
  padding: 6px 6px 6px 14px; border-radius: var(--radius-md); text-align: left;
  background: var(--color-bg); border: 1px dashed rgba(48, 209, 88, 0.45);
}
.copybox code { flex: 1; min-width: 0; font-family: inherit; font-size: 0.95rem; font-weight: var(--weight-bold); color: var(--color-text); word-break: break-all; line-height: 1.5; }
.copybox .btn { height: 36px; padding: 0 16px; flex-shrink: 0; }
.copybox.big { max-width: 340px; margin: 16px auto 0; }
.copybox.big code { font-size: 1.25rem; color: var(--color-accent); }
.copybox.big .btn { height: 42px; }
.footer { padding: 24px 16px 8px; font-size: var(--text-caption); color: var(--color-text-tertiary); text-align: center; border-top: 1px solid var(--color-border); line-height: 1.8; }
.beian a { color: var(--color-text-tertiary); text-decoration: none; }

/* ---------- 第 2 步：方案 ---------- */
.plan { padding-top: 20px; }
.back { font-size: var(--text-small); color: var(--color-accent); padding: 4px 0; }
.car-name { margin-top: 6px; font-size: 1.5rem; font-weight: var(--weight-black); line-height: 1.3; }
.car-meta { margin-top: 6px; font-size: var(--text-small); color: var(--color-warning); font-weight: var(--weight-bold); line-height: 1.6; }
.h2 { margin: 26px 0 12px; font-size: 1.05rem; font-weight: var(--weight-bold); }
.rec {
  padding: 16px; margin-bottom: 12px; border-radius: var(--radius-lg);
  background: linear-gradient(160deg, rgba(48, 209, 88, 0.12), rgba(48, 209, 88, 0.03) 60%);
  border: 1px solid rgba(48, 209, 88, 0.4);
}
.rec-top { display: flex; align-items: center; justify-content: space-between; }
.rec-tag { padding: 2px 8px; border-radius: var(--radius-full); background: var(--color-accent); color: #06210e; font-size: 0.72rem; font-weight: var(--weight-bold); }
.fit { font-size: var(--text-caption); font-weight: var(--weight-bold); }
.fit.direct { color: var(--color-accent); }
.fit.cut { color: var(--color-warning); }
.rec-main { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 12px; }
.rec-name { font-size: 1.3rem; font-weight: var(--weight-black); line-height: 1.2; }
.rec-spec, .row-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--color-text-secondary); }
.rec-spec { margin-top: 6px; font-size: var(--text-small); }
.rec-price { flex-shrink: 0; font-size: 1.6rem; font-weight: var(--weight-black); color: var(--color-accent); line-height: 1; }
.rec-price small { font-size: 0.9rem; margin-right: 1px; }
.rec-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; margin-top: 16px; }
.grade { padding: 1px 7px; border-radius: var(--radius-full); font-size: 0.68rem; font-weight: var(--weight-bold); white-space: nowrap; }
.rows { margin-top: 4px; }
.row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 13px 2px; text-align: left; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.row:active { background: rgba(255, 255, 255, 0.04); }
.row-main { flex: 1; min-width: 0; }
.row-name { font-size: var(--text-body); font-weight: var(--weight-medium); white-space: nowrap; }
.row-name i { font-style: normal; margin-left: 4px; }
.row-sub { margin-top: 3px; font-size: var(--text-caption); white-space: nowrap; flex-wrap: nowrap; }
.row-price { flex-shrink: 0; font-size: var(--text-body); font-weight: var(--weight-bold); }
.row.is-rec .row-price { color: var(--color-accent); }
.mini-trust {
  display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; margin-top: 24px; padding: 16px 0 0;
  border-top: 1px solid var(--color-border); text-align: center; font-size: var(--text-caption); color: var(--color-text-secondary);
}
.mini-trust b { display: block; font-size: 1.2rem; font-weight: var(--weight-black); color: var(--color-accent); }
.mini-trust button { grid-column: 1 / -1; margin-top: 12px; font-size: var(--text-small); color: var(--color-text-secondary); }

/* ---------- 底部常驻条 ---------- */
.bottombar {
  position: fixed; left: 50%; bottom: 0; z-index: 30;
  width: 100%; max-width: var(--max-width); transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(18, 18, 18, 0.94); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-top: 1px solid var(--color-border);
}
.bottombar p { flex: 1; font-size: var(--text-small); color: var(--color-text-secondary); line-height: 1.4; }
.bottombar p { color: var(--color-text); }
.bottombar p b.bb-wx { color: var(--color-accent); }
.bottombar .btn { padding: 0 20px; flex-shrink: 0; }

/* ---------- 底部弹层 ---------- */
.scrim { position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, 0.6); opacity: 0; transition: opacity var(--duration-normal) var(--ease-out-quart); }
.scrim.show { opacity: 1; }
.sheet {
  position: fixed; left: 50%; bottom: 0; z-index: 50;
  width: 100%; max-width: var(--max-width); max-height: 86dvh; overflow-y: auto; overscroll-behavior: contain;
  transform: translate(-50%, 100%); padding: 8px 20px calc(24px + env(safe-area-inset-bottom));
  border-radius: 20px 20px 0 0; background: #161616; border-top: 1px solid rgba(255, 255, 255, 0.1);
  transition: transform var(--duration-normal) var(--ease-out-expo);
}
.sheet.show { transform: translate(-50%, 0); }
.grip { width: 36px; height: 4px; margin: 4px auto 14px; border-radius: 2px; background: rgba(255, 255, 255, 0.2); }
.sh-close { position: absolute; top: 12px; right: 14px; width: 36px; height: 36px; border-radius: 50%; color: var(--color-text-tertiary); font-size: 1.2rem; }
.sh-title { padding-right: 36px; font-size: 1.2rem; font-weight: var(--weight-black); margin-bottom: 4px; }
.sh-sub { font-size: var(--text-small); color: var(--color-text-secondary); line-height: 1.6; }
.pick { margin-top: 16px; padding: 14px; border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--color-border); }
.pick-car { font-size: var(--text-caption); color: var(--color-text-tertiary); }
.pick-cell { margin-top: 4px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 1.1rem; font-weight: var(--weight-bold); }
.pick-cell em { font-style: normal; color: var(--color-accent); }
.pick-spec { margin-top: 4px; font-size: var(--text-caption); color: var(--color-text-secondary); }
.steps { margin-top: 18px; counter-reset: s; }
.stp { position: relative; padding-left: 34px; margin-bottom: 16px; }
.stp::before {
  counter-increment: s; content: counter(s); position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; background: var(--color-accent); color: #06210e; font-size: 0.8rem; font-weight: var(--weight-black);
}
.stp-label { font-size: var(--text-small); font-weight: var(--weight-bold); line-height: 24px; }
.stp-hint { font-size: var(--text-caption); color: var(--color-text-tertiary); margin-top: 6px; line-height: 1.5; }
.sh-foot { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--color-border); font-size: var(--text-caption); color: var(--color-text-tertiary); text-align: center; line-height: 1.7; }
.qa { padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); scroll-margin-top: 20px; }
.qa.hl { background: linear-gradient(90deg, rgba(48, 209, 88, 0.08), transparent); margin: 0 -20px; padding: 14px 20px; }
.qa h3 { font-size: var(--text-body); font-weight: var(--weight-bold); margin-bottom: 6px; }
.qa p, .qa li { font-size: var(--text-small); color: var(--color-text-secondary); line-height: 1.75; }
.qa p b { color: var(--color-text); }
.qa ul { margin-top: 2px; }
.range-num { margin: 18px 0 4px; text-align: center; font-size: 3rem; font-weight: var(--weight-black); color: var(--color-accent); line-height: 1; }
.range-num small { font-size: 1rem; color: var(--color-text-secondary); margin-left: 4px; }
.range-label { display: flex; justify-content: space-between; margin-top: 18px; font-size: var(--text-small); color: var(--color-text-secondary); }
.range-label b { color: var(--color-text); }
input[type="range"] { width: 100%; margin-top: 10px; accent-color: var(--color-accent); }
.warn { margin-top: 16px; padding: 10px 12px; border-radius: var(--radius-sm); background: rgba(255, 214, 10, 0.08); border: 1px solid rgba(255, 214, 10, 0.22); font-size: var(--text-caption); color: var(--color-warning); line-height: 1.6; }
.ptable { width: 100%; margin-top: 12px; border-collapse: collapse; font-size: var(--text-small); }
.ptable td { padding: 10px 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.ptable td:first-child { white-space: nowrap; color: var(--color-text-secondary); }
.ptable td:nth-child(3) { white-space: nowrap; color: var(--color-text-secondary); }
.ptable td:last-child { text-align: right; font-weight: var(--weight-bold); white-space: nowrap; }
.toast {
  position: fixed; left: 50%; bottom: calc(110px + env(safe-area-inset-bottom)); z-index: 60; transform: translateX(-50%);
  padding: 10px 18px; border-radius: var(--radius-full); background: var(--color-accent); color: #06210e;
  font-size: var(--text-small); font-weight: var(--weight-bold); white-space: nowrap;
}

/* ---------- 价格说明（首页「怎么买」与方案页共用） ---------- */
.px { margin-top: 18px; padding: 16px; border-radius: var(--radius-lg); background: var(--color-bg-elevated); border: 1px solid rgba(255, 255, 255, 0.12); }
.px-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.px-title { font-size: 1.1rem; font-weight: var(--weight-black); }
.px-tag { padding: 3px 10px; border-radius: var(--radius-full); background: rgba(255, 214, 10, 0.16); color: var(--color-warning); font-size: var(--text-caption); font-weight: var(--weight-bold); }
.px-way { margin-top: 12px; padding: 13px 14px; border-radius: var(--radius-md); }
.px-way.off { background: rgba(48, 209, 88, 0.1); border: 1px solid rgba(48, 209, 88, 0.4); }
.px-way.on { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.12); }
.px-way-top { display: flex; align-items: baseline; gap: 8px; }
.px-way-top b { font-size: 1.05rem; font-weight: var(--weight-black); }
.px-way.off .px-way-top b { color: var(--color-accent); }
.px-way-top span { font-size: var(--text-small); color: var(--color-text); }
.px-way p { margin-top: 6px; font-size: var(--text-small); color: var(--color-text); line-height: 1.7; }
.px-way strong { color: var(--color-accent); }
.px-way strong.up { color: var(--color-warning); font-size: 1rem; }
.px-promo { padding-top: 8px; border-top: 1px dashed rgba(255, 255, 255, 0.14); }
.gifts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.gifts span { padding: 6px 12px; border-radius: var(--radius-full); background: var(--color-accent); color: #06210e; font-size: var(--text-small); font-weight: var(--weight-bold); }
.px-sec { margin-top: 16px; }
.px-sec-title { margin-bottom: 6px; font-size: var(--text-small); font-weight: var(--weight-black); color: var(--color-text); }
.px-list li { position: relative; padding: 4px 0 4px 20px; font-size: var(--text-small); color: var(--color-text); line-height: 1.6; }
.px-list li::before { content: '·'; position: absolute; left: 6px; color: var(--color-text-secondary); font-weight: var(--weight-black); }
.px-list.ok li::before { content: '✓'; left: 0; color: var(--color-accent); }
.px-list li.key { color: var(--color-accent); font-weight: var(--weight-bold); }
.px-more { font-size: var(--text-small); color: var(--color-text); line-height: 1.75; }
.px-pay { margin-top: 14px; font-size: var(--text-small); font-weight: var(--weight-bold); color: var(--color-warning); }
.plan .px { margin-top: 0; }

.rec-price .rp-label { display: block; margin-bottom: 4px; font-size: var(--text-caption); font-weight: var(--weight-bold); color: var(--color-text); text-align: right; }
.nw { white-space: nowrap; }
/* 方案页已有大标题，价格说明卡片里的标题不再重复 */
.plan .px-title { display: none; }
.plan .px-head { justify-content: flex-start; }
/* 加微信弹层里的续航估算 */
.range-box { margin-top: 12px; padding: 14px; border-radius: var(--radius-md); background: rgba(48, 209, 88, 0.06); border: 1px solid rgba(48, 209, 88, 0.25); }
.rb-title { font-size: var(--text-small); font-weight: var(--weight-bold); color: var(--color-text); }
.rb-title span { margin-left: 6px; font-weight: var(--weight-regular); color: var(--color-text-secondary); }
.range-box .range-num { margin-top: 10px; font-size: 2.4rem; }
.range-box .range-label { margin-top: 10px; }
.range-box .warn { margin-top: 12px; }
/* 安装点备注：紧跟城市卡片，和卡片同宽 */
.sn-note { max-width: 340px; margin: 12px auto 0; text-align: left; font-size: var(--text-caption); color: var(--color-text-secondary); line-height: 1.7; }
.sn-note b { display: block; margin-bottom: 2px; color: var(--color-warning); font-weight: var(--weight-bold); }
.sn-note p { position: relative; padding-left: 12px; }
.sn-note p::before { content: '·'; position: absolute; left: 2px; font-weight: var(--weight-black); }

/* ---------- 限时大促卡片（顶栏下方，首页和方案页都显示） ---------- */
.promo {
  margin: 14px 16px 0; padding: 14px 16px; border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(255, 214, 10, 0.18), rgba(255, 149, 0, 0.1));
  border: 1px solid rgba(255, 214, 10, 0.45);
}
.promo-tag {
  display: inline-block; padding: 3px 10px; border-radius: var(--radius-full);
  background: var(--color-warning); color: #2a2000; font-size: var(--text-caption); font-weight: var(--weight-black);
}
.promo-text { margin-top: 10px; font-size: 1rem; font-weight: var(--weight-bold); color: var(--color-text); line-height: 1.6; }
.promo-wx { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; font-size: var(--text-small); color: var(--color-text); }
.promo-wx b { color: var(--color-warning); font-size: 1rem; }
.promo-wx .btn { height: 36px; padding: 0 18px; background: var(--color-warning); color: #2a2000; }