/* Li-dream — 视觉改版共享组件（2026-10-13 第一批：动力电池页、B2B 页；规格 docs/superpowers/specs/2026-10-13-visual-redesign-design.md §2 / §5）。
   只在 /power-battery/ 与 /b2b/ 加载（模板 {% block head %}），排在 site.css 之后。外观从 docs/reference/visual-redesign-20261013/
   的高保真稿移植（行号见 docs/superpowers/plans/2026-10-13-visual-redesign-batch1.md Task 3），令牌换成 site.css 的 :root：
   --c1→--night  --c2→--charcoal  --c3→--graphite  --od→--on-dark  --od2→--on-dark-2  --od3→--on-dark-3
   --ah→--amber-hi  --ad→--amber-deep  --oa→--amber-ink  --ink2→--muted  --ink3→--subtle（高保真稿的 #8a8d93 在纸色上只有 3.2:1）
   --fig→--font-figure  --body→--font  --ease→--vis-ease。
   原则：服务端输出全部可见；.rv-wait 只由 vis-reveal.js 加；减少动态时一切动画关闭（文件末尾）。
   深色区段：在区段（或其祖先）上加 .vdark，FAQ / 标签 / 小甘特 / 标注编号圆换成深底配色；其余组件自带明暗（铭牌是金属牌、徽章与灯箱固定深色、
   甘特是浅色卡片）。 */
:root {
  --vis-ease: cubic-bezier(.2, .7, .2, 1);
  --secnav-h: 52px;
}
@media (max-width: 767px) {
  :root { --secnav-h: 48px; }
}

/* ---- 显现（vis-reveal.js） */
.rv-wait { opacity: 0; transform: translateY(18px); }
.is-in { transition: opacity .9s var(--vis-ease), transform .9s var(--vis-ease); }

/* ---- 眉题、标题、副标题 */
.vk { display: inline-flex; align-items: center; gap: 10px; font: 600 11.5px/1 var(--font-figure); letter-spacing: .18em; text-transform: uppercase; color: var(--amber-deep); }
.vk::before { content: ""; width: 22px; height: 2px; background: var(--amber); flex: none; }
.vh2 { font: 600 clamp(28px, 3.6vw, 40px)/1.12 var(--font-figure); letter-spacing: .005em; margin: 14px 0 0; }
.vsub { color: var(--muted); max-width: 640px; margin: 14px 0 0; }
.vdark { --focus: var(--amber); }
.vdark .vk { color: var(--amber); }
.vdark .vsub { color: var(--on-dark-2); }

/* ---- 页内导航条：站点页头（.hdr，sticky，z-index 50）下面滑出；锚点让开页头 + 导航条 */
.vsecnav {
  position: fixed; top: var(--hdr-h); left: 0; right: 0; z-index: 45;
  height: var(--secnav-h); transform: translateY(-110%); visibility: hidden;
  transition: transform .45s var(--vis-ease), visibility 0s linear .45s;
  --focus: var(--amber);
  background: rgba(18, 18, 18, .86); color: var(--on-dark);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.vsecnav.is-shown { transform: none; visibility: visible; transition: transform .45s var(--vis-ease); }
.vsecnav__in { display: flex; align-items: center; gap: 22px; height: 100%; }
.vsecnav__t { font: 600 14px/1 var(--font-figure); letter-spacing: .02em; white-space: nowrap; }
.vsecnav__t small { display: block; font: 600 10px/1 var(--font-figure); letter-spacing: .18em; color: var(--amber); margin-bottom: 5px; }
.vsecnav__nav { display: flex; gap: 2px; flex: 1; justify-content: center; min-width: 0; }
.vsecnav__nav a { font: 500 13px/1 var(--font); color: var(--on-dark-3); padding: 8px 11px; border-radius: var(--r-pill); transition: color .25s, background-color .25s; white-space: nowrap; }
.vsecnav__nav a:hover { color: var(--on-dark); }
.vsecnav__nav a[aria-current="location"] { color: var(--on-dark); background: rgba(255, 255, 255, .08); }
.vsecnav__spec { display: flex; align-items: center; gap: 10px; margin-left: auto; font: 600 13px/1 var(--font-figure); color: var(--on-dark-2); white-space: nowrap; }
.vsecnav__spec b { color: var(--on-dark); font-weight: 600; }
.vsecnav__spec i { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 10px var(--amber); }
.vsecnav__cta { height: 38px; padding: 0 16px; font-size: 13px; flex: none; }
.page-power-battery main [id], .page-b2b main [id] { scroll-margin-top: calc(var(--hdr-h) + var(--secnav-h) + 12px); }
.page-b2b { --secnav-h: 0px; }  /* B2B 没有页内导航条 */
/* WhatsApp 浮钮让位（vis-core.js mountFabAside）：会压到询价按钮 / 货运之路地图文字时淡出（与 site.css 页脚处的 .is-near-footer 同一做法） */
.wa-fab.is-aside { opacity: 0; visibility: hidden; transform: translateY(16px); pointer-events: none; }
@media (max-width: 1180px) {
  .vsecnav__nav { display: none; }
  .vsecnav__t { margin-right: auto; }
}
@media (max-width: 767px) {
  .vsecnav__nav, .vsecnav__t small, .vsecnav__spec span { display: none; }
  .vsecnav__in { gap: 12px; }
  .vsecnav__t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .vsecnav__cta { height: 34px; padding: 0 12px; font-size: 12.5px; white-space: normal; line-height: 1.1; }
}

/* ---- 插图标注：窄屏是图下编号列表，≥ 1024 宽叠在图上 */
.vco { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.vco__item { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 8px; font-size: 13px; line-height: 1.35; }
.vco__item i { grid-row: span 2; width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center; font: 600 10px/1 var(--font-figure); font-style: normal; color: var(--amber-hi); background: var(--ink); }
.vco__item b { font-weight: 600; overflow-wrap: anywhere; }
.vco__item span { color: var(--muted); overflow-wrap: anywhere; }
.vdark .vco__item i { color: var(--amber-ink); background: var(--amber); }
.vdark .vco__item span { color: var(--on-dark-2); }
@media (min-width: 1024px) {
  .vco { position: absolute; inset: 0; margin: 0; display: block; pointer-events: none; }
  .vco__item { position: absolute; left: var(--x); top: var(--y); max-width: var(--w, 26%); display: block; }
  .vco__item i { display: none; }
  .vco__item b, .vco__item span { display: block; }
  .vco__item--end { left: auto; right: calc(100% - var(--x)); text-align: right; }
}

/* ---- 颗粒 */
.vgrain { position: relative; isolation: isolate; }
.vgrain::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .055; mix-blend-mode: overlay; background: url("/assets/img/grain.png"); }
.vgrain > * { position: relative; z-index: 1; }

/* ---- 甘特（动力电池页「从需求到交货」）：浅色卡片。条宽来自 --w，.rv-wait 时 0（vis-reveal 换成 .is-in 后过渡） */
.vgantt { margin-top: 44px; border-radius: 24px; padding: 30px 34px 28px; overflow: hidden;
  background: linear-gradient(180deg, #fbfaf7, #f1f0eb); border: 1px solid #e3e1da; color: var(--ink);
  box-shadow: 0 40px 70px -50px rgba(0, 0, 0, .35), inset 0 1px 0 #fff; }
.vgantt__head, .vgantt__row, .vgantt__axis { display: grid; grid-template-columns: 270px minmax(0, 1fr); }
.vgantt__rows { list-style: none; margin: 0; padding: 0; }
.vgantt__zones { display: grid; grid-template-columns: var(--zcols); font: 600 10px/1.3 var(--font-figure); letter-spacing: .14em; color: var(--muted); text-transform: uppercase; }
.vgantt__zone { padding: 0 0 10px 10px; border-left: 1px solid #dddbd3; min-width: 0; }
.vgantt__zone b { display: block; color: var(--ink); font-size: 12px; letter-spacing: .06em; text-transform: none; margin-top: 3px; }
.vgantt__zone--approval { border-left: 0; text-align: center; padding-left: 0; }
.vgantt__row { align-items: stretch; border-top: 1px solid #e3e1da; transition: background-color .3s; }
.vgantt__row:hover { background: linear-gradient(90deg, rgba(242, 163, 58, .08), rgba(242, 163, 58, 0) 70%); }
.vgantt__label { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 2px 10px; padding: 14px 16px 14px 0; }
.vgantt__label i { grid-row: span 2; font: 500 20px/1 var(--font-figure); font-style: normal; color: var(--subtle); padding-top: 1px; transition: color .3s; }
.vgantt__row:hover .vgantt__label i { color: var(--amber-deep); }
.vgantt__label b { font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.vgantt__label span { font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.vgantt__track { position: relative; display: grid; grid-template-columns: var(--zcols); min-width: 0; }
.vgantt__cell { position: relative; min-width: 0; border-left: 1px solid #e3e1da;
  background-image: repeating-linear-gradient(90deg, transparent 0 calc(100% / var(--ticks) - 1px), rgba(0, 0, 0, .065) calc(100% / var(--ticks) - 1px) calc(100% / var(--ticks))); }
.vgantt__cell--approval { border-left: 0; background: none; }
.vgantt__cell--approval::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 1px dashed #cfccc3; }
/* 里程碑菱形 + 文字 */
.vgantt__ms { position: absolute; top: 50%; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; transform: rotate(45deg); background: var(--ink); border-radius: 2px; box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .5); }
.vgantt__ms--a { background: linear-gradient(135deg, #ffc66b, var(--amber)); }
.vgantt__ml { position: absolute; top: 50%; transform: translateY(-50%); font: 600 11px/1.25 var(--font-figure); letter-spacing: .04em; color: var(--muted); white-space: nowrap; }
.vgantt__ml--up { top: calc(50% - 12px); }
/* 条：背景是「最长」区间的斜纹，实心段是「最短」；运输条是一根渐隐细线 */
.vgantt__bar { position: absolute; top: 50%; height: 26px; margin-top: -13px; border-radius: 7px; width: var(--w); }
.vgantt__bar--samples { background: repeating-linear-gradient(135deg, rgba(242, 163, 58, .45) 0 5px, rgba(242, 163, 58, .18) 5px 10px); }
.vgantt__bar--series { background: repeating-linear-gradient(135deg, rgba(23, 24, 26, .32) 0 5px, rgba(23, 24, 26, .1) 5px 10px); }
.vgantt__bar--ship { height: 4px; margin-top: -2px; border-radius: 7px 0 0 7px; background: linear-gradient(90deg, rgba(23, 24, 26, .75), rgba(23, 24, 26, 0)); }
.vgantt__min { position: absolute; left: 0; top: 0; bottom: 0; width: var(--min); border-radius: 7px 0 0 7px; }
.vgantt__bar--samples .vgantt__min { background: linear-gradient(180deg, #ffc66b, var(--amber)); box-shadow: 0 8px 16px -10px rgba(242, 163, 58, .9); }
.vgantt__bar--series .vgantt__min { background: linear-gradient(180deg, #2c2d32, #17181a); box-shadow: 0 8px 16px -10px rgba(0, 0, 0, .7); }
.vgantt__blabel { position: absolute; left: 10px; top: 0; font: 600 11.5px/26px var(--font-figure); letter-spacing: .04em; white-space: nowrap; }
.vgantt__bar--samples .vgantt__blabel { color: var(--amber-ink); }
.vgantt__bar--series .vgantt__blabel { color: var(--on-dark); }
/* 入场：.rv-wait 时条宽 0、菱形缩成点、文字透明；.is-in 后逐行错开生长 */
.rv-wait .vgantt__bar { width: 0; }
.rv-wait .vgantt__ms { transform: rotate(45deg) scale(0); }
.rv-wait .vgantt__ml, .rv-wait .vgantt__blabel { opacity: 0; }
.vgantt__row:nth-child(2) { --d: .15s; }
.vgantt__row:nth-child(3) { --d: .3s; }
.vgantt__row:nth-child(4) { --d: .45s; }
.vgantt__row:nth-child(5) { --d: .6s; }
.vgantt__row:nth-child(6) { --d: .75s; }
.is-in .vgantt__bar { transition: width 1.1s var(--vis-ease) calc(var(--d, 0s) + .2s); }
.is-in .vgantt__ms { transition: transform .6s var(--vis-ease) var(--d, 0s); }
.is-in .vgantt__ml { transition: opacity .6s ease calc(var(--d, 0s) + .3s); }
.is-in .vgantt__blabel { transition: opacity .5s ease calc(var(--d, 0s) + .7s); }
/* 周刻度 */
.vgantt__axis { border-top: 1px solid #d6d4cc; }
.vgantt__ticks { display: grid; grid-template-columns: var(--zcols); }
.vgantt__ticks > div { position: relative; height: 30px; }
.vgantt__ticks span { position: absolute; top: 8px; transform: translateX(-50%); font: 600 10px/1 var(--font-figure); color: var(--muted); letter-spacing: .06em; white-space: nowrap; }
.vgantt__ticks > div:nth-child(3)::before { content: ""; position: absolute; left: 50%; top: -6px; width: 16px; height: 12px; margin-left: -8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M0 6 4 1 8 11 12 1 16 6' fill='none' stroke='%23a9a69c' stroke-width='1.2'/%3E%3C/svg%3E") center / 16px 12px no-repeat; }
/* 甘特下方的文件条（报价单、样品协议等） */
.vdocs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 22px; padding-top: 18px; border-top: 1px solid #e3e1da; font-size: 13px; color: var(--muted); }
.vdocs b { font: 600 10.5px/1 var(--font-figure); letter-spacing: .16em; color: var(--muted); text-transform: uppercase; margin-right: 8px; }
.vdocs__doc { display: inline-flex; align-items: center; gap: 8px; padding: 8px 11px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); font: 500 13px/1 var(--font); color: var(--ink); }
.vdocs__doc svg { width: 15px; height: 15px; color: var(--amber-deep); }
.vdocs__q { margin-left: auto; color: var(--muted); font-size: 12.5px; }

/* ---- 工厂铭牌（金属牌，固定配色；放在深色区段里） */
.vnp { position: relative; border-radius: 16px; padding: 26px 30px 22px; color: #1a1b1e; overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 30%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .08) 0 1px, rgba(0, 0, 0, .025) 1px 3px),
    linear-gradient(135deg, #d9dbdf, #b9bdc3 45%, #cfd2d6 70%, #a9adb3);
  box-shadow: 0 40px 60px -40px #000, inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -1px 0 rgba(0, 0, 0, .25), inset 0 0 0 1px rgba(0, 0, 0, .12); }
.vnp::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .35) 45%, transparent 60%); transform: translateX(-100%); }
.vnp.is-in::before { transform: translateX(100%); transition: transform 1.8s var(--vis-ease); }
.vnp__rv { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #9aa0a7 55%, #5d6168); box-shadow: 0 1px 1px rgba(0, 0, 0, .35); }
.vnp__rv--tl { left: 10px; top: 10px; }
.vnp__rv--tr { right: 10px; top: 10px; }
.vnp__rv--bl { left: 10px; bottom: 10px; }
.vnp__rv--br { right: 10px; bottom: 10px; }
.vnp__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 0 6px 14px; border-bottom: 2px solid #1a1b1e; }
.vnp__brand { font: 700 26px/1 var(--font-figure); letter-spacing: .14em; }
.vnp__brand small { display: block; font: 600 10px/1.3 var(--font-figure); letter-spacing: .2em; color: #33363b; margin-top: 7px; text-transform: uppercase; }
.vnp__loc { text-align: right; font: 600 10px/1.6 var(--font-figure); letter-spacing: .18em; color: #33363b; text-transform: uppercase; }
.vnp__loc b { display: block; font: 600 14px/1.2 var(--font-figure); color: #1a1b1e; letter-spacing: .06em; text-transform: none; }
.vnp__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0 6px; }
.vnp__facts > div { padding: 16px 0 14px; border-bottom: 1px solid rgba(0, 0, 0, .18); min-width: 0; }
.vnp__facts > div:nth-child(3n+2), .vnp__facts > div:nth-child(3n+3) { padding-left: 16px; border-left: 1px solid rgba(0, 0, 0, .14); }
.vnp dt { font: 600 10px/1.3 var(--font-figure); letter-spacing: .16em; color: #33363b; text-transform: uppercase; }
.vnp dd { margin: 9px 0 0; font: 500 clamp(22px, 2.3vw, 28px)/1.1 var(--font-figure); color: #141518; font-variant-numeric: tabular-nums; text-shadow: 0 1px 0 rgba(255, 255, 255, .55); overflow-wrap: break-word; }
.vnp__foot { display: flex; justify-content: flex-end; align-items: center; padding: 14px 6px 0; }
.vnp__bar { width: 96px; height: 20px; background: repeating-linear-gradient(90deg, #1a1b1e 0 1px, transparent 1px 3px, #1a1b1e 3px 5px, transparent 5px 6px, #1a1b1e 6px 7px, transparent 7px 10px, #1a1b1e 10px 13px, transparent 13px 14px); opacity: .85; }

/* ---- 认证徽章（深色卡片，放在深色区段里） */
.vbadges { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.vbadge { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px 16px 12px 12px; border-radius: 12px;
  background: linear-gradient(180deg, #1d1e22, #16171a); border: 1px solid rgba(255, 255, 255, .08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); color: var(--on-dark); }
.vbadge svg { width: 44px; height: 44px; color: var(--amber-hi); }
.vbadge b { display: block; font: 600 16px/1.1 var(--font-figure); letter-spacing: .03em; }
.vbadge span { font-size: 12.5px; color: var(--on-dark-3); }
.vdocs2 { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .08); }
.vdocs2__row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.vdocs2__row span { font: 600 12.5px/1 var(--font-figure); letter-spacing: .04em; padding: 8px 10px; border-radius: 7px; background: rgba(242, 163, 58, .1); box-shadow: inset 0 0 0 1px rgba(242, 163, 58, .35); color: #ffc66b; }
.vdocs2 p { margin: 0; font-size: 13px; color: var(--on-dark-3); line-height: 1.6; }

/* ---- 灯箱（原生 <dialog>）：dialog 不加 padding；图与说明栏的容器本身不接收指针（pointer-events: none），
   空白处的点击落到 dialog 上（e.target === dialog）即关闭 */
.vlb { padding: 0; border: 0; margin: 0; max-width: none; max-height: none; width: 100vw; height: 100vh; height: 100dvh; background: rgba(8, 8, 9, .94); color: var(--on-dark-2); --focus: var(--amber); overflow: hidden; }
.vlb::backdrop { background: transparent; }
.vlb[open] { display: block; animation: vlb-in .4s var(--vis-ease); }
@keyframes vlb-in { from { opacity: 0; } }
.vlb__fig { margin: 0; width: 100%; height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; pointer-events: none; }
.vlb__fig img { align-self: center; max-width: calc(100% - 180px); max-height: calc(100% - 70px); margin: 60px 0 10px; min-height: 0; object-fit: contain; border-radius: 10px; box-shadow: 0 40px 80px -30px #000; pointer-events: auto; }
.vlb__bar { display: flex; align-items: baseline; justify-content: center; gap: 14px; padding: 18px 32px 26px; font-size: 14px; pointer-events: auto; max-width: 100%; }
.vlb__bar b { font: 600 12px/1 var(--font-figure); letter-spacing: .16em; color: var(--amber); }
.vlb__btn { position: absolute; appearance: none; padding: 0; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: #fff; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); transition: background-color .2s; }
.vlb__btn:hover { background: rgba(255, 255, 255, .12); }
.vlb__btn svg { width: 18px; height: 18px; }
.vlb__btn--x { right: 24px; top: 20px; }
.vlb__btn--p, .vlb__btn--n { top: 50%; margin-top: -23px; }
.vlb__btn--p { left: 24px; }
.vlb__btn--n { right: 24px; }
body:has(dialog.vlb[open]) { overflow: hidden; }
@media (max-width: 720px) {
  .vlb__fig img { max-width: calc(100% - 24px); max-height: calc(100% - 140px); margin: 60px 0 10px; }
  .vlb__bar { padding: 8px 16px 86px; flex-direction: column; align-items: flex-start; gap: 6px; }
  .vlb__btn--p, .vlb__btn--n { top: auto; bottom: 20px; margin: 0; }
}

/* ---- FAQ 标签与问答（<details>）：浅色为默认，.vdark 内换成深底配色 */
.vfaq { --vf-ink: var(--ink); --vf-muted: var(--muted); --vf-num: var(--subtle); --vf-num-open: var(--amber-deep); --vf-line: #dcdad2; --vf-ring: #d0cec6;
  --vf-chip-bg: #fff; --vf-chip-line: var(--line-2); --vf-chip-on-bg: var(--ink); --vf-chip-on: var(--on-dark); --vf-chip-on-n: var(--amber);
  --vf-pm-on-bg: var(--ink); --vf-pm-on-fg: var(--amber); }
.vdark .vfaq { --vf-ink: var(--on-dark); --vf-muted: var(--on-dark-2); --vf-num: var(--on-dark-3); --vf-num-open: var(--amber); --vf-line: rgba(255, 255, 255, .14); --vf-ring: rgba(255, 255, 255, .22);
  --vf-chip-bg: rgba(255, 255, 255, .04); --vf-chip-line: rgba(255, 255, 255, .16); --vf-chip-on-bg: var(--on-dark); --vf-chip-on: var(--ink); --vf-chip-on-n: var(--amber-deep);
  --vf-pm-on-bg: var(--amber); --vf-pm-on-fg: var(--amber-ink); }
.vchips { display: flex; flex-wrap: wrap; gap: 6px; margin: 26px 0 18px; }
.vchip { appearance: none; border: 0; cursor: pointer; font: 500 13px/1 var(--font); padding: 9px 13px; border-radius: var(--r-pill); background: var(--vf-chip-bg); box-shadow: inset 0 0 0 1px var(--vf-chip-line); color: var(--vf-muted); transition: color .25s, background-color .25s; }
.vchip small { font: 600 10.5px/1 var(--font-figure); color: var(--vf-num); margin-left: 5px; }
.vchip:hover { color: var(--vf-ink); }
.vchip[aria-pressed="true"] { background: var(--vf-chip-on-bg); color: var(--vf-chip-on); box-shadow: none; }
.vchip[aria-pressed="true"] small { color: var(--vf-chip-on-n); }
.vfaq__list { border-top: 2px solid var(--vf-ink); }
.vqa { border-bottom: 1px solid var(--vf-line); }
.vqa[hidden] { display: none; }
.vqa__q { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 28px; align-items: center; gap: 10px; padding: 18px 0; cursor: pointer; list-style: none; color: var(--vf-ink); }
.vqa__q::-webkit-details-marker { display: none; }
.vqa__q i { grid-column: 1; font: 600 12px/1 var(--font-figure); letter-spacing: .1em; color: var(--vf-num); font-style: normal; }
.vqa__q b { grid-column: 2; font-size: 16px; font-weight: 600; line-height: 1.4; }
.vqa__q em { grid-column: 3; font: 600 10px/1 var(--font-figure); letter-spacing: .14em; color: var(--vf-num); font-style: normal; border: 1px solid var(--vf-line); border-radius: 4px; padding: 4px 6px 3px; white-space: nowrap; text-transform: uppercase; }
.vqa__q::after { content: ""; grid-column: 4; grid-row: 1; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--vf-ring); color: var(--vf-ink);
  background: linear-gradient(currentColor, currentColor) center / 10px 1.6px no-repeat, linear-gradient(currentColor, currentColor) center / 1.6px 10px no-repeat;
  transition: background-color .35s var(--vis-ease), background-size .35s var(--vis-ease), color .35s; }
.vqa[open] > .vqa__q::after { background-color: var(--vf-pm-on-bg); color: var(--vf-pm-on-fg); box-shadow: none; background-size: 10px 1.6px, 1.6px 0; }
.vqa[open] > .vqa__q i { color: var(--vf-num-open); }
.vqa__q:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 3px; }
.vqa[open] > .vqa__a { animation: vqa-in .45s var(--vis-ease); }
@keyframes vqa-in { from { opacity: 0; transform: translateY(-6px); } }
.vqa__a p { margin: 0; padding: 0 40px 20px 54px; color: var(--vf-muted); font-size: 14.5px; }
.vqa__figs { margin: 0 40px 22px 54px; display: flex; flex-wrap: wrap; gap: 6px; font: 600 11px/1.3 var(--font-figure); letter-spacing: .04em; }
.vqa__figs span { flex: 0 1 auto; min-width: 110px; padding: 9px 10px; border-radius: 6px; background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.vqa__figs b { display: block; font: 500 20px/1 var(--font-figure); margin-bottom: 5px; }
.vqa__figs span:first-child { background: var(--ink); color: var(--on-dark-2); }
.vqa__figs span:first-child b { color: #ffc66b; }
.vqa__a > *:not(p):not(.vqa__figs) { margin-left: 54px; margin-right: 40px; margin-bottom: 22px; }

/* ---- 起订量对数读数格：颜色跟随所在容器的文字色（深浅底都可用） */
.vlog { width: 190px; max-width: 100%; margin-top: 10px; color: inherit; }
.vlog__cells { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; }
.vlog i { height: 8px; border-radius: 2px; background: rgba(128, 128, 128, .22); background: color-mix(in srgb, currentColor 11%, transparent); }
.vlog i.on { background: linear-gradient(180deg, #ffc66b, var(--amber)); box-shadow: 0 0 10px -2px rgba(242, 163, 58, .7); }
.vlog__ticks { display: flex; justify-content: space-between; margin-top: 5px; font: 600 10px/1 var(--font-figure); letter-spacing: .08em; opacity: .7; }

/* ---- B2B 小甘特（样品 → 您确认 → 批量）：浅底为默认，.vdark 内换深底配色 */
.vlead { --vl-track: rgba(23, 24, 26, .03); --vl-tick: rgba(23, 24, 26, .07); --vl-text: var(--muted); --vl-ink: var(--ink); --vl-bar-d: linear-gradient(180deg, #2a2b30, #17181a); --vl-ms: #fff; --vl-ms-ring: var(--ink);
  display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 8px; align-items: center; margin-top: 12px; font-size: 11.5px; font-weight: 600; color: var(--vl-text); }
.vdark .vlead { --vl-track: rgba(255, 255, 255, .025); --vl-tick: rgba(255, 255, 255, .06); --vl-text: var(--on-dark-2); --vl-ink: var(--on-dark); --vl-bar-d: linear-gradient(180deg, #43454b, #2c2d31); --vl-ms: #0c0d0f; --vl-ms-ring: #fff; }
.vlead__row { display: contents; }
.vlead__n { line-height: 1.25; }
.vlead__track { position: relative; height: 22px; border-radius: 6px; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), var(--vl-tick) calc(10% - 1px) 10%), var(--vl-track); }
.vlead__bar { position: absolute; top: 3px; bottom: 3px; border-radius: 4px; width: var(--w); overflow: hidden; }
.vlead__bar--a { background: linear-gradient(180deg, #ffc66b, var(--amber)); box-shadow: 0 6px 14px -8px rgba(242, 163, 58, .9); color: var(--amber-ink); }
.vlead__bar--d { background: var(--vl-bar-d); color: #f1f0ec; }
.vlead__min { position: absolute; top: 0; bottom: 0; right: 0; left: var(--min); background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .28) 0 3px, transparent 3px 7px); }
.vlead__bar em { position: relative; z-index: 1; display: block; padding: 0 8px; font: 600 10.5px/16px var(--font-figure); font-style: normal; letter-spacing: .03em; white-space: nowrap; }
.vlead__track > em { position: absolute; top: 50%; transform: translateY(-50%); font: 600 10.5px/1 var(--font-figure); font-style: normal; color: var(--vl-ink); white-space: nowrap; }
.vlead__ms { position: absolute; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; transform: rotate(45deg); background: var(--vl-ms); box-shadow: 0 0 0 2px var(--vl-ms-ring); z-index: 1; }
.vlead__lg { grid-column: 1 / -1; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin: 2px 0 0; font: 600 10.5px/1.3 var(--font-figure); color: var(--vl-text); }
.vlead__lg span { display: flex; gap: 6px; align-items: center; }
.vlead__lg-ms { display: inline-block; width: 8px; height: 8px; transform: rotate(45deg); background: var(--vl-ms); box-shadow: 0 0 0 1.5px var(--vl-ms-ring); }
.vlead__lg-rng { display: inline-block; width: 10px; height: 6px; border-radius: 2px; background: repeating-linear-gradient(135deg, var(--amber) 0 2px, rgba(242, 163, 58, .35) 2px 4px); }
.rv-wait .vlead__bar { width: 0; }
.is-in .vlead__bar { transition: width 1s var(--vis-ease); }

/* ---- 窄屏 */
@media (max-width: 1020px) {
  .vgantt { padding: 24px 22px 22px; }
  .vnp__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vnp__facts > div:nth-child(n) { padding-left: 0; border-left: 0; }
  .vnp__facts > div:nth-child(2n) { padding-left: 16px; border-left: 1px solid rgba(0, 0, 0, .14); }
}
@media (max-width: 720px) {
  .vgantt { padding: 20px 16px; border-radius: 18px; margin-top: 28px; }
  .vgantt__head, .vgantt__row, .vgantt__axis { grid-template-columns: 1fr; }
  .vgantt__head > :first-child, .vgantt__axis > :first-child { display: none; }
  .vgantt__row { padding-bottom: 12px; }
  .vgantt__label { padding: 12px 0 6px; }
  .vgantt__track { height: 64px; }
  .vgantt__cell--approval .vgantt__ml { top: 0; transform: none; white-space: normal; width: min(12em, 40vw); line-height: 1.2; }
  .vgantt__cell--shipping .vgantt__ml { left: auto !important; right: 0; transform: none; top: calc(50% - 24px); }
  .vgantt__blabel { top: calc(100% + 3px); line-height: 1.2; color: var(--ink) !important; }
  .vgantt__bar--series .vgantt__blabel { left: auto; right: 0; }
  /* 坐标轴两端的说明（「Per project」「Stated in the quote」）放不进窄栏：移到刻度数字下面一行，首个靠轴左端、末个靠轴右端，
     各自最宽半条轴、可换行（长译文两三行），不隐藏 */
  .vgantt__ticks > div { height: 58px; }
  .vgantt__ticks > div:first-child span, .vgantt__ticks > div:last-child span { top: 26px; transform: none; white-space: normal; line-height: 1.25;
    width: max-content; max-width: calc(50vw - 44px); overflow-wrap: anywhere; hyphens: auto; }
  .vgantt__ticks > div:first-child span { left: 0 !important; text-align: left; }
  .vgantt__ticks > div:last-child span { left: auto !important; right: 0; text-align: right; }
  .vgantt__zones { font-size: 8.5px; letter-spacing: .08em; }
  .vgantt__zone { padding-left: 5px; overflow-wrap: anywhere; hyphens: auto; }
  /* 最后一栏（运输）右边只有卡片内边距（16px）：区名可以用掉其中 14px，英文「SHIPPING」不必断词（Chromium 不给首字母大写的词加连字符） */
  .vgantt__zone:last-child { margin-right: -14px; }
  .vgantt__zone b { font-size: 10px; letter-spacing: 0; }
  /* 「您测试 / 确认」一栏只有约 25px 宽：竖排（两行竖排正好 ≈ 24px），文字再长也只往下长，不越过分隔线 */
  .vgantt__zone--approval { writing-mode: vertical-rl; justify-self: center; padding: 0 0 10px; overflow-wrap: normal; line-height: 1.15; }
  .vgantt__zone--approval b { margin: 0 2px 0 0; font-size: 9.5px; }
  .vgantt__ml { font-size: 9.5px; }
  .vdocs__q { margin-left: 0; }
  .vnp { padding: 20px 16px 18px; }
  .vnp__facts > div:nth-child(n) { padding-left: 0; border-left: 0; }
  .vnp__facts > div:nth-child(2n) { padding-left: 14px; border-left: 1px solid rgba(0, 0, 0, .14); }
  .vnp__brand { font-size: 21px; }
  .vnp__top { flex-wrap: wrap; }
  .vnp__loc { text-align: left; }
  .vbadge { grid-template-columns: 38px minmax(0, 1fr); }
  .vbadge svg { width: 38px; height: 38px; }
  .vqa__q { grid-template-columns: 34px minmax(0, 1fr) 28px; }
  .vqa__q em { display: none; }
  .vqa__q::after { grid-column: 3; }
  .vqa__a p { padding-left: 44px; padding-right: 0; }
  .vqa__figs, .vqa__a > *:not(p):not(.vqa__figs) { margin-left: 44px; margin-right: 0; }
}

/* ---- 装饰循环动画（D8）：最多 3 轮 */
@keyframes vpulse { 0%, 100% { opacity: .9; transform: scale(1); } 50% { opacity: 0; transform: scale(1.7); } }
.vpulse { transform-box: fill-box; transform-origin: center; animation: vpulse 2.4s ease-in-out 3; }
@keyframes vspin { to { transform: rotate(360deg); } }
.vspin { transform-box: fill-box; transform-origin: center; animation: vspin 14s linear 3; }

@media (prefers-reduced-motion: reduce) {
  .rv-wait { opacity: 1; transform: none; }
  .rv-wait .vgantt__bar { width: var(--w); }
  .rv-wait .vlead__bar { width: var(--w); }
  .rv-wait .vgantt__ms { transform: rotate(45deg); }
  .rv-wait .vgantt__ml, .rv-wait .vgantt__blabel { opacity: 1; }
  .is-in, .vgantt__bar, .vlead__bar, .vsecnav, .vsecnav.is-shown { transition: none; }
  .is-in .vgantt__bar, .is-in .vgantt__ms, .is-in .vgantt__ml, .is-in .vgantt__blabel, .is-in .vlead__bar, .vnp.is-in::before { transition: none; }
  .vpulse, .vspin { animation: none; }
  .vlb, .vlb[open], .vqa__a, .vqa[open] > .vqa__a { transition: none; animation: none; }
}