/* Li-dream — 动力电池页 /power-battery/（2026-10-13 视觉改版第一批，规格 docs/superpowers/specs/2026-10-13-visual-redesign-design.md §4.1）。
   只在 /power-battery/ 加载（power_battery.html {% block head %}），排在 site.css、vis.css 之后。外观从高保真稿
   docs/reference/visual-redesign-20261013/hifi-power-battery.html 移植，令牌换成 site.css 的 :root（对照表见 vis.css 文件头）：
   Task 7：页头（第 86–110 行 .hero → .pbh*）、规格调节器（第 113–154 行 .cfg* .seg* .cap*；.ctl__k → .cfg__k、.cfg__top .lbl → .cfg__lbl、
   .cfg__view svg → .cfg__svg；不要 .cfg__led）、响应式（第 500–634 行，断点换成站点的 1200 / 768）。
   Task 8：能力区（第 158–226 行 .capsec .split .notebar .scrolly .stick .stage .st__* .pv .infocard .steps .step* → .pbc*；
   不要 .st__hud）、应用图纸（第 227–291 行 .apps .tabs .bp* .spec .range .rcells .apps__note → .pba*；.bpsvg 规则原样，
   只把 .flow / .glow 的 infinite 改成 3 轮并 forwards 停在末帧，.fadein 的 opacity: 0 改成 animation-fill-mode: backwards 的起始帧）；
   能力区的粘性舞台只在 ≥ 1024 宽且 JS 接管（.is-live）时出现，其余宽度与无 JS 是分层卡片。高保真稿 --pl → #dcdad3，--ahh → #ffc66b。
   Task 9：流程（第 292–294 行 .proc .gstage → .pbp .pbp__stage，甘特本体在 vis.css）、工厂（第 345–362 行 .fac .gal* .facrow .certs →
   .pbf .pbf__gal .pbf__fig .pbf__idx .pbf__caption .pbf__row .pbf__certs；不要 .zoom）、FAQ + 询价（第 411–413、449–490 行
   .lead .fpanel* .fspec* .sc* .fapps* .field → .pbl .pbl__in .pbl .qf* .pbl__spec* .pbl__chip(.is-a) .pbl__empty .pbl__apps）。
   服务端输出全部可见：无 JS 时静帧 + 静帧下的标注列表，控件 [data-js-only] 由 hidden 属性隐藏。 */

/* ================================================================== 页头 */
.pbh {
  color: var(--on-dark); overflow: hidden;
  background:
    radial-gradient(900px 520px at 78% 8%, rgba(242, 163, 58, .13), transparent 62%),
    radial-gradient(800px 600px at 0% 110%, rgba(80, 100, 130, .16), transparent 60%),
    linear-gradient(180deg, #141416, #0f1012);
}
.pbh__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7.2fr); gap: 56px; padding-top: 52px; padding-bottom: 84px; align-items: start; }
.pbh .crumbs { margin: 6px 0 34px; padding: 0; font-size: 12.5px; }
.pbh__title { font: 600 clamp(40px, 4.2vw, 60px)/1.04 var(--font-figure); letter-spacing: -.005em; margin: 20px 0 22px; overflow-wrap: break-word; hyphens: auto; }
.pbh__lead { font-size: 16.5px; color: var(--on-dark-2); max-width: 30em; margin: 0 0 30px; }
.pbh__plate { margin: 0 0 32px; border-top: 2px solid var(--on-dark); display: grid; grid-template-columns: 1fr 1fr 1.25fr; }
.pbh__plate > div { padding: 14px 14px 0 0; min-width: 0; }
.pbh__plate > div + div { padding-left: 16px; border-left: 1px solid rgba(255, 255, 255, .08); }
.pbh__plate dt { font: 600 10.5px/1.3 var(--font-figure); letter-spacing: .16em; color: var(--on-dark-3); text-transform: uppercase; }
.pbh__plate dd { margin: 9px 0 0; font: 500 26px/1 var(--font-figure); color: var(--on-dark); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pbh__plate dd small { font-size: 13px; color: var(--on-dark-3); margin-left: 3px; }
.pbh__chem dd { white-space: normal; }
.pbh__chem dd span { display: block; font: 500 12px/1.4 var(--font); color: var(--on-dark-3); margin-top: 6px; }
.pbh__ctas { display: flex; gap: 12px; flex-wrap: wrap; margin: 0; }
.pbh__b2b { display: flex; gap: 10px; align-items: center; margin: 30px 0 0; color: var(--on-dark-3); font-size: 13px; }
.pbh__b2b i { flex: none; font: 600 10px/1 var(--font-figure); letter-spacing: .16em; color: var(--amber); border: 1px solid rgba(242, 163, 58, .45); padding: 5px 7px 4px; border-radius: 5px; font-style: normal; }

/* 页头与调节器里的按钮：高保真稿的琥珀渐变 + 内高光 + 投影，幽灵按钮是细描边 */
.pbh .btn { border-radius: var(--r-md); white-space: normal; text-align: center; line-height: 1.15;
  transition: transform .25s var(--vis-ease), box-shadow .25s var(--vis-ease), background-color .25s; }
.pbh .btn--lg { height: auto; min-height: 52px; padding: 8px 24px; }
.pbh .btn--amber { border: 0; background: linear-gradient(180deg, #ffc66b, var(--amber)); color: var(--amber-ink);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .45) inset, 0 12px 26px -12px rgba(242, 163, 58, .75); }
.pbh .btn--amber:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255, 255, 255, .45) inset, 0 18px 30px -12px rgba(242, 163, 58, .85); }
.pbh .btn--amber::after { content: ""; flex: none; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h9m-4-4 4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h9m-4-4 4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat; }
.pbh .btn--ghost-light { border: 0; background: transparent; color: var(--on-dark); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); }
.pbh .btn--ghost-light:hover { background: transparent; box-shadow: inset 0 0 0 1px rgba(242, 163, 58, .6); }

/* ================================================================== 规格调节器 */
.cfg { min-width: 0; border-radius: 22px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .08);
  background:
    radial-gradient(700px 360px at 60% 0%, rgba(242, 163, 58, .10), transparent 65%),
    linear-gradient(180deg, #1a1b1f, #121316);
  box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .05); }
.cfg__top { display: flex; justify-content: space-between; align-items: center; padding: 18px 24px 0; }
.cfg__lbl { margin: 0; font: 600 11px/1 var(--font-figure); letter-spacing: .18em; color: var(--amber); text-transform: uppercase; }
.cfg__view { position: relative; aspect-ratio: 680 / 400; margin-top: -6px; container-type: inline-size; }
.cfg__still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cfg__view.is-live .cfg__still { display: none; }
.cfg__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cfg__hud { position: absolute; left: 24px; top: 18px; z-index: 1; margin: 0; max-width: calc(100% - 48px); font: 600 10.5px/1.5 var(--font-figure); letter-spacing: .16em; color: var(--on-dark-3); pointer-events: none; }
.cfg__hud b { display: block; font: 500 40px/1 var(--font-figure); letter-spacing: .01em; color: var(--on-dark); margin-top: 6px; font-variant-numeric: tabular-nums; }
.cfg__hud b span { color: var(--amber); }
.cfg__hud em { display: block; max-width: min(15em, 21cqw);  /* 21cqw：1280 宽时不压到等轴图盖板左角 */
  font: 500 12px/1.4 var(--font); letter-spacing: 0; color: var(--on-dark-3); font-style: normal; margin-top: 4px; }

.cfg__ctl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; padding: 6px 24px 20px; align-items: end; }
.cfg__ctl[hidden] { display: none; }
.cfg__k { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 10px; font: 600 10.5px/1.2 var(--font-figure); letter-spacing: .16em; color: var(--on-dark-3); text-transform: uppercase; }
.cfg__k b { color: var(--on-dark); letter-spacing: .02em; font-size: 12px; text-transform: none; white-space: nowrap; }
.seg { display: inline-flex; position: relative; gap: 3px; padding: 4px; border-radius: 12px; background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .08); }
.seg button { all: unset; cursor: pointer; position: relative; z-index: 1; padding: 11px 18px; border-radius: 9px; font: 600 15px/1 var(--font-figure); letter-spacing: .02em; color: var(--on-dark-3); transition: color .3s; }
.seg button small { font-size: 11px; margin-left: 2px; }
.seg button:hover { color: var(--on-dark); }
.seg button[aria-pressed="true"] { color: var(--amber-ink); }
.seg button:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.seg__pill { position: absolute; top: 4px; bottom: 4px; left: 4px; width: 0; border-radius: 9px; background: linear-gradient(180deg, #ffc66b, var(--amber));
  box-shadow: 0 8px 20px -8px rgba(242, 163, 58, .8), inset 0 1px 0 rgba(255, 255, 255, .5); transition: left .45s var(--vis-ease), width .45s var(--vis-ease); }
.cap { position: relative; padding-top: 2px; }
.cap__cells { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; height: 38px; }
.cap__cells i { position: relative; border-radius: 4px; background: rgba(255, 255, 255, .055); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04); transition: background-color .35s, box-shadow .35s; }
.cap__cells i.l { background: linear-gradient(180deg, #ffc66b, var(--amber) 60%, #d98a22); box-shadow: 0 0 14px -3px rgba(242, 163, 58, .7), inset 0 1px 0 rgba(255, 255, 255, .45); }
.cap__cells i.cur::after { content: ""; position: absolute; left: 50%; top: -9px; width: 0; height: 0; border: 5px solid transparent; border-top-color: #ffc66b; transform: translateX(-50%); }
.cap input { position: absolute; inset: -6px 0; z-index: 1; width: 100%; height: calc(100% + 12px); margin: 0; opacity: 0; cursor: ew-resize; }
.cap input:focus-visible ~ .cap__cells { outline: 2px solid var(--amber); outline-offset: 4px; border-radius: 6px; }
.cap__scale { display: flex; justify-content: space-between; margin: 8px 0 0; font: 600 10px/1 var(--font-figure); color: var(--on-dark-3); letter-spacing: .08em; }

.cfg__plate { margin: 0 24px; border-top: 2px solid var(--on-dark); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cfg__plate > div { padding: 13px 0 14px 16px; border-left: 1px solid rgba(255, 255, 255, .08); min-width: 0; }
.cfg__plate > div:first-child { border-left: 0; padding-left: 0; }
.cfg__plate dt { font: 600 10px/1.3 var(--font-figure); letter-spacing: .16em; color: var(--on-dark-3); text-transform: uppercase; }
.cfg__plate dd { margin: 8px 0 0; font: 500 24px/1 var(--font-figure); color: var(--on-dark); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cfg__plate dd small { font-size: 12px; color: var(--on-dark-3); margin-left: 3px; }
.cfg__plate .hl dd { color: #ffc66b; }
/* site.css 里同名的 .cfg（产品页配置器：上下留白、html:not(.has-js) 时整块隐藏）与 .hl（亮点卡：白底、描边、flex）在这里一律覆盖，
   否则无 JS 时调节器整块不见（违背 D15），能量格变成白卡片 */
.pbh .pbh__in > .cfg { display: block; padding: 0; }
.cfg__plate > .hl { display: block; gap: 0; border: 0; border-left: 1px solid rgba(255, 255, 255, .08); border-radius: 0; background: none; }
.cfg__foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 2px; padding: 16px 24px 22px; border-top: 1px solid rgba(255, 255, 255, .08); background: rgba(0, 0, 0, .18); }
.cfg__note { margin: 0; max-width: 34em; font-size: 12px; line-height: 1.5; color: var(--on-dark-3); }
.cfg__foot .btn { flex: none; max-width: 100%; }

/* 等轴图里新增的电芯落下（pb-pack-iso.js 只给新键加 pk-cell--in） */
.pk-cell--in { animation: pk-in .45s var(--vis-ease) both; }
@keyframes pk-in { from { opacity: 0; transform: translateY(-6px); } }

/* 标注图例（partials/vis/callouts.html）：JS 接管后 ≥ 1024 宽叠在等轴图上，窄屏隐藏（同样的信息在能力区），引线一并隐藏 */
.vco--cfg { display: none; }
/* 无 JS（未 .is-live）：静帧下面列出三条标注，不叠在图上（标注坐标是等轴 SVG 的，不对应静帧）；JS 接管后窄屏隐藏、≥ 1024 宽叠在等轴图上 */
.cfg__view:not(.is-live) { aspect-ratio: auto; }
.cfg__view:not(.is-live) .cfg__still { position: static; height: auto; }
.cfg__view:not(.is-live) .vco--cfg { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px 20px; position: static; margin: 0; padding: 4px 24px 20px; }
.cfg__view:not(.is-live) .vco--cfg .vco__item { display: grid; position: static; max-width: none; transform: none; text-align: left; }
.cfg__view:not(.is-live) .vco--cfg .vco__item i { display: grid; }
@media (min-width: 1024px) { .cfg__view.is-live .vco--cfg { display: block; } }
.vco--cfg .vco__item { color: var(--on-dark); max-width: 22%; }
.vco--cfg .vco__item span { color: var(--on-dark-3); }
.cfg__view.is-live .vco--cfg .vco__item b { font: 600 12.5px/1.3 var(--font-figure); letter-spacing: .01em; }
.cfg__view.is-live .vco--cfg .vco__item span { font-size: 11px; line-height: 1.35; margin-top: 2px; }
/* 叠图时文字不贴卡片边：左对齐的最宽到卡片右边留 6px，右对齐的最宽到锚点左边留 14px（长译文换行）。
   锚点在图下半的（vco__item--up，y > 50%）向上生长：盒子底边落在锚点下约一行处，最后一行贴着引线终点，长译文不越过图底压到控件行 */
.cfg__view.is-live .vco--cfg .vco__item--start { max-width: calc(100% - var(--x) - 6px); }
.cfg__view.is-live .vco--cfg .vco__item--end { max-width: calc(var(--x) - 14px); }
.cfg__view.is-live .vco--cfg .vco__item--up { transform: translateY(calc(-100% + 1.35em)); }
.pk-lead { display: none; }
@media (min-width: 1024px) { .pk-lead { display: inline; } }
/* 脚本开着（scripting: enabled）时，pb-page.js 接管前就按「接管后」的版式排好静帧，避免首屏从列表跳成等轴图（CLS）；
   真正无脚本的浏览器仍走上面的列表版式 */
@media (scripting: enabled) {
  .cfg__view:not(.is-live) { aspect-ratio: 680 / 400; }
  .cfg__view:not(.is-live) .cfg__still { position: absolute; height: 100%; object-fit: contain; }
  .cfg__view:not(.is-live) .vco--cfg { display: none; }
}

/* ================================================================== 能力区（滚动叙事） */
.pbc { padding: 110px 0 40px; background: linear-gradient(180deg, #f7f6f3, var(--paper)); }
.pbc__head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: end; }
.pbc__lead { font-size: 17px; line-height: 1.7; margin: 0; color: var(--ink); }
.pbc__notebar { margin: 22px 0 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; padding-top: 16px; border-top: 2px solid var(--ink); }
.pbc__notebar dt { font: 600 10.5px/1.3 var(--font-figure); letter-spacing: .16em; color: var(--subtle); text-transform: uppercase; margin-bottom: 9px; }
.pbc__notebar dd { margin: 0; }
.pbc__vchips { display: flex; gap: 6px; }
.pbc__vchips span { font: 600 17px/1 var(--font-figure); padding: 9px 11px; border-radius: 7px; background: var(--ink); color: var(--on-dark); white-space: nowrap; }
.pbc__vchips span small { font-size: 11px; color: var(--on-dark-3); margin-left: 2px; }
.pbc__tchips { display: flex; flex-wrap: wrap; gap: 6px; }
.pbc__tchips span { font: 500 13px/1.15 var(--font); padding: 9px 11px; border-radius: 7px; background: #fff; box-shadow: inset 0 0 0 1px #dcdad3; color: var(--ink); }
.pbc__scrolly { margin-top: 70px; }

/* 舞台（JS 接管且 ≥ 1024 宽时才显示，见下面的结构性规则） */
.pbc__stage { position: relative; height: 100%; border-radius: 24px; overflow: hidden; color: var(--on-dark);
  background:
    radial-gradient(900px 500px at 65% -10%, rgba(242, 163, 58, .12), transparent 60%),
    radial-gradient(700px 600px at 0% 120%, rgba(90, 110, 140, .20), transparent 60%),
    linear-gradient(180deg, #17181c, #0e0f12);
  border: 1px solid rgba(0, 0, 0, .4); box-shadow: 0 60px 90px -50px rgba(0, 0, 0, .55), 0 1px 0 rgba(255, 255, 255, .05) inset; }
.pbc__stage::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 150px; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(14, 15, 18, .82), rgba(14, 15, 18, 0)); }
.pbc__stills, .pbc__host { z-index: 0; }
.pbc__stills { position: absolute; inset: 0; transition: opacity .5s var(--vis-ease); }
/* 静帧与三维同一台相机（垂直视场固定）：按舞台高度铺满（cover），再平移 pb-pack3d.js setViewOffset 的 3% / 5%，与三维首帧对齐 */
.pbc__stills img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: translate(-3%, -5%); }
.pbc__step, .pbc__tag, .pbc__rail, .pbc__pv { position: absolute; z-index: 2; margin: 0; }
.pbc__step { right: 28px; top: 22px; text-align: right; pointer-events: none; }
.pbc__step em { font: 600 10.5px/1 var(--font-figure); letter-spacing: .16em; color: var(--amber); font-style: normal; text-transform: uppercase; }
.pbc__step b { display: block; margin-top: 6px; font: 500 54px/1 var(--font-figure); color: var(--on-dark); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.pbc__step b small { color: var(--on-dark-3); font-size: 20px; margin-left: 4px; letter-spacing: 0; }
.pbc__tag { left: 28px; bottom: 62px; max-width: calc(58% - 40px); font: 500 13px/1.4 var(--font); color: var(--on-dark-2); pointer-events: none; display: flex; align-items: center; gap: 8px; }
.pbc__tag::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 2px; background: var(--amber); box-shadow: 0 0 10px var(--amber); }
.pbc__rail { left: 28px; bottom: 26px; display: flex; gap: 6px; align-items: flex-end; }
.pbc__rail button { all: unset; cursor: pointer; width: 46px; font: 600 10px/1 var(--font-figure); letter-spacing: .1em; color: var(--on-dark-3); transition: color .3s; }
.pbc__rail button::before { content: ""; display: block; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .12); margin-bottom: 8px; transition: background .4s; }
.pbc__rail button[aria-current] { color: var(--on-dark); }
.pbc__rail button[aria-current]::before { background: linear-gradient(90deg, #ffc66b, var(--amber)); box-shadow: 0 0 12px rgba(242, 163, 58, .6); }
.pbc__rail button.is-done::before { background: rgba(242, 163, 58, .45); }
.pbc__pv { right: 22px; bottom: 22px; width: min(42%, 320px); aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .15); box-shadow: 0 30px 50px -24px #000; background: #0e0f12; }
.pbc__pvi { position: absolute; inset: 0; transform: scale(1.04); transition: opacity .7s var(--vis-ease), transform 1.2s var(--vis-ease); }
.pbc__pvi.on { transform: none; }
.pbc__pvi figure { margin: 0; height: 100%; }
.pbc__pvi img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) contrast(1.06) brightness(.95); }
.pbc__pvi figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 12px 10px; font: 500 11.5px/1.4 var(--font); color: var(--on-dark); background: linear-gradient(transparent, rgba(0, 0, 0, .82)); }
.pbc__pvi figcaption b { display: block; font: 600 9.5px/1 var(--font-figure); letter-spacing: .18em; color: var(--amber); margin-bottom: 5px; }
.pbc__flow { height: 100%; padding: 16px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-rows: 1fr auto; gap: 10px; align-items: center;
  background: linear-gradient(160deg, #1f2025, #131417); }
.pbc__flow > div { display: flex; flex-direction: column; gap: 5px; }
.pbc__flow span { font: 500 11.5px/1.25 var(--font); padding: 7px 8px; border-radius: 6px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); color: var(--on-dark-2); overflow-wrap: anywhere; }
.pbc__flow .o span { background: rgba(242, 163, 58, .12); box-shadow: inset 0 0 0 1px rgba(242, 163, 58, .35); color: #ffc66b; }
.pbc__flow > i { position: relative; width: 22px; height: 2px; background: linear-gradient(90deg, rgba(242, 163, 58, .2), var(--amber)); }
.pbc__flow > i::after { content: ""; position: absolute; right: -1px; top: -4px; border: 5px solid transparent; border-left-color: var(--amber); border-right: 0; }
.pbc__flow p { grid-column: 1 / -1; margin: 0; font-size: 11.5px; line-height: 1.4; color: var(--on-dark-3); }

/* 步骤：默认（无 JS、< 1024 宽）是分层卡片——上面「静帧 + 实拍 / 流程卡」两格，下面是文字 */
.pbc__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 22px; }
.pbc__s { border-radius: 18px; background: #fff; overflow: hidden; box-shadow: 0 0 0 1px #e3e1da, 0 30px 50px -40px rgba(0, 0, 0, .4); }
.pbc__media { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); aspect-ratio: 16 / 8.4; background: #121316; }
.pbc__still { width: 100%; height: 100%; object-fit: cover;
  background: radial-gradient(400px 200px at 60% 0%, rgba(242, 163, 58, .14), transparent 60%), linear-gradient(180deg, #1a1b1f, #0f1013); }
.pbc__ph { position: relative; margin: 0; min-width: 0; border-left: 1px solid rgba(255, 255, 255, .08); }
.pbc__ph img { width: 100%; height: 100%; object-fit: cover; }
.pbc__ph figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 8px 6px; font: 500 10.5px/1.3 var(--font); color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, .8)); }
/* 流程卡：输入（图纸 / 样品 …）是一行可换行的小签，产出（琥珀）与说明各占整行 */
.pbc__ph--flow { list-style: none; padding: 10px; display: flex; flex-wrap: wrap; align-content: center; gap: 4px; color: var(--on-dark-2); font-size: 11px; line-height: 1.2; }
.pbc__ph--flow li { flex: 0 1 auto; padding: 5px 7px; border-radius: 5px; background: rgba(255, 255, 255, .05); overflow-wrap: anywhere; }
.pbc__ph--flow li.o { flex-basis: 100%; background: rgba(242, 163, 58, .12); color: #ffc66b; }
.pbc__ph--flow .pbc__flownote { flex-basis: 100%; padding: 2px 0 0; background: none; color: var(--on-dark-3); }
.pbc__body { padding: 20px 20px 22px; }
.pbc__n { display: flex; align-items: center; gap: 14px; margin: 0; font: 600 13px/1 var(--font-figure); letter-spacing: .14em; color: var(--subtle); }
.pbc__n::after { content: ""; flex: 1; height: 1px; background: #dcdad3; }
.pbc__s.is-active .pbc__n { color: var(--amber-deep); }
.pbc__s.is-active .pbc__n::after { background: linear-gradient(90deg, var(--amber), #dcdad3 60%); }
.pbc__s h3 { font: 600 22px/1.2 var(--font-figure); margin: 12px 0 8px; }
.pbc__body > p:not([class]) { margin: 0; color: var(--muted); font-size: 15.5px; max-width: 28em; }
.pbc__parts { margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pbc__parts span { font: 500 12.5px/1.15 var(--font); padding: 8px 10px; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px #dcdad3; }
.pbc__parts span:first-child { background: var(--ink); color: var(--on-dark); box-shadow: none; }

/* 结构性规则（任务书 Step 7 照写） */
.pbc__stills img, .pbc__pvi { opacity: 0; transition: opacity .5s var(--vis-ease); }
.pbc__stills img.on, .pbc__pvi.on { opacity: 1; }
.pbc__host { position: absolute; inset: 0; }
.pbc__host canvas { width: 100%; height: 100%; display: block; }
.pbc__stage.is-3d .pbc__stills { opacity: 0; }
.pbc__s.is-active { opacity: 1; }
.pbc__stick { display: none; }
/* 粘性舞台只在脚本接管（mountCapabilities 给 [data-scrolly] 加 .is-live）且 ≥ 1024 宽时出现；无 JS 时桌面与手机一样是分层卡片，
   每步的静帧 + 实拍 / 流程卡都可见。接管后 .pbc__media 只做视觉隐藏（读屏仍能读到实拍说明与流程卡——舞台是 aria-hidden），从不 display: none。 */
@media (min-width: 1024px) {
  .pbc__scrolly.is-live { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4.6fr); gap: 56px; }
  .pbc__scrolly.is-live .pbc__stick { display: block; position: sticky; top: calc(var(--hdr-h) + var(--secnav-h) + 12px); height: calc(100vh - var(--hdr-h) - var(--secnav-h) - 36px); max-height: 740px; min-height: 520px; }
  .pbc__scrolly.is-live .pbc__media { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .pbc__scrolly.is-live .pbc__s { position: relative; min-height: 72vh; display: flex; align-items: center; }
  /* 接管后的步骤是舞台旁的纯文字（高保真稿 .step）：去掉卡片外观 */
  .pbc__scrolly.is-live .pbc__steps { display: block; }
  .pbc__scrolly.is-live .pbc__s { border-radius: 0; background: none; box-shadow: none; overflow: visible; }
  .pbc__scrolly.is-live .pbc__s:first-child { min-height: 60vh; align-items: flex-start; padding-top: 12vh; }
  /* 最后一步居中时舞台仍整块在页头 + 导航条下面（粘性区到底前不被顶上去）：半高 ≥ 舞台底边 − 50vh = 50vh − 24px */
  .pbc__scrolly.is-live .pbc__s:last-child { min-height: calc(100vh - 40px); }
  /* 非当前步骤调淡文字颜色而不是整块 opacity（.35 时只剩 2.2:1）：淡色仍 ≥ 4.5:1（--muted 5.7、--subtle 4.55 on paper、
     白字在 --muted 底上 6.2）；当前步骤另有形状提示——编号前的琥珀圆点与加粗的分隔线，不只靠颜色区分 */
  .pbc__scrolly.is-live .pbc__s h3, .pbc__scrolly.is-live .pbc__body > p:not([class]), .pbc__scrolly.is-live .pbc__parts span { transition: color .4s var(--vis-ease), background-color .4s var(--vis-ease); }
  .pbc__scrolly.is-live .pbc__s:not(.is-active) h3 { color: var(--muted); }
  .pbc__scrolly.is-live .pbc__s:not(.is-active) .pbc__body > p:not([class]) { color: var(--subtle); }
  .pbc__scrolly.is-live .pbc__s:not(.is-active) .pbc__parts span { color: var(--muted); }
  .pbc__scrolly.is-live .pbc__s:not(.is-active) .pbc__parts span:first-child { background: var(--muted); color: #fff; }
  .pbc__scrolly.is-live .pbc__s.is-active .pbc__n::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); flex: none; margin-right: -4px; }
  .pbc__scrolly.is-live .pbc__s.is-active .pbc__n::after { height: 2px; }
  .pbc__scrolly.is-live .pbc__body { padding: 40px 0; }
  .pbc__scrolly.is-live .pbc__s h3 { font-size: 30px; margin: 18px 0 12px; }
}

/* ================================================================== 应用图纸 */
.pba { padding: 110px 0; color: var(--on-dark);
  background: radial-gradient(1000px 500px at 80% 0%, rgba(242, 163, 58, .08), transparent 60%), linear-gradient(180deg, #131314, #101012); }
.pba__head { display: flex; justify-content: space-between; align-items: end; gap: 40px; }
.pba__head .vsub { max-width: 420px; margin: 0; }
.pba__stage { margin-top: 44px; border-radius: 24px; border: 1px solid rgba(255, 255, 255, .08); overflow: hidden;
  background: radial-gradient(1100px 460px at 40% -10%, rgba(120, 140, 170, .10), transparent 60%), linear-gradient(180deg, #17181b, #111215);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 50px 80px -50px #000; }
.bp-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.pba__tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid rgba(255, 255, 255, .08); }
.pba__tab { display: block; padding: 20px 24px 18px; position: relative; color: inherit; text-decoration: none; border-left: 1px solid rgba(255, 255, 255, .08); transition: background-color .3s; }
.pba__tab:first-child { border-left: 0; }
.pba__tab:hover { background: rgba(255, 255, 255, .02); }
.pba__tab i { display: block; font: 600 11px/1 var(--font-figure); letter-spacing: .16em; color: var(--on-dark-3); font-style: normal; margin-bottom: 9px; transition: color .3s; }
.pba__tab b { font: 600 17px/1.2 var(--font-figure); color: var(--on-dark-2); transition: color .3s; }
.pba__tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, #ffc66b, var(--amber)); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--vis-ease); }
.pba__tab[aria-selected="true"] { background: linear-gradient(180deg, rgba(242, 163, 58, .07), rgba(242, 163, 58, 0)); }
.pba__tab[aria-selected="true"] i { color: var(--amber); }
.pba__tab[aria-selected="true"] b { color: var(--on-dark); }
.pba__tab[aria-selected="true"]::after { transform: scaleX(1); }
.pba__tab:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; }
.pba__panel { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); min-height: 520px; }
.pba__panel + .pba__panel { border-top: 1px solid rgba(255, 255, 255, .08); }
.pba__draw { margin: 20px 10px 10px 18px; min-width: 0; align-self: start; }  /* 不随右栏拉高：叠图的百分比坐标相对它 */
.pba__draw .bpsvg { width: 100%; height: auto; display: block; }
.pba__meta { padding: 34px 34px 30px; display: flex; flex-direction: column; border-left: 1px solid rgba(255, 255, 255, .08); min-width: 0; }
.pba__meta h3 { font: 600 28px/1.2 var(--font-figure); margin: 0 0 12px; }
.pba__meta > p { color: var(--on-dark-2); margin: 0 0 22px; font-size: 14.5px; }
.pba__spec { margin: 0; border-top: 2px solid var(--on-dark); }
.pba__spec div { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 12px; padding: 11px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.pba__spec dt { font: 600 10.5px/1.5 var(--font-figure); letter-spacing: .14em; color: var(--on-dark-3); text-transform: uppercase; padding-top: 2px; overflow-wrap: anywhere; }
.pba__spec dd { margin: 0; font-size: 14px; color: var(--on-dark); }
.pba__range { margin-top: auto; padding-top: 22px; }
.pba__rk { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0; font: 600 10.5px/1.2 var(--font-figure); letter-spacing: .14em; color: var(--on-dark-3); text-transform: uppercase; }
.pba__rk b { font: 500 19px/1 var(--font-figure); color: var(--on-dark); letter-spacing: 0; text-transform: none; white-space: nowrap; }
.pba__cells { display: grid; gap: 3px; margin: 9px 0 14px; }
.pba__cells--8 { grid-template-columns: repeat(8, 1fr); }
.pba__cells--12 { grid-template-columns: repeat(12, 1fr); }
.pba__cells i { height: 12px; border-radius: 2px; background: rgba(255, 255, 255, .06); }
.pba__cells i.l { background: linear-gradient(180deg, #ffc66b, var(--amber)); box-shadow: 0 0 12px -3px rgba(242, 163, 58, .6); }
.pba__note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; padding: 16px 24px; border-top: 1px solid rgba(255, 255, 255, .08); background: rgba(0, 0, 0, .2); font-size: 13.5px; color: var(--on-dark-2); }
.pba__tag { font: 600 10px/1 var(--font-figure); letter-spacing: .16em; color: var(--on-dark-2); border: 1px solid rgba(255, 255, 255, .15); border-radius: 5px; padding: 5px 7px 4px; }
.pba__note .link-arrow { margin-left: auto; font-size: 13.5px; font-weight: 500; color: #ffc66b; min-height: 44px; }
/* 图下叠加：详图 B / 曲线说明 / OEM 项目表与「示意 · 非比例」；窄屏在图下排列，≥ 1024 宽按百分比叠在图上（结构性规则任务书 Step 7 照写） */
.pba__x b, .pba__x span { display: block; }
.pba__x b { font: 600 1.06em/1.3 var(--font-figure); color: var(--on-dark); }
.pba__x span { color: var(--on-dark-3); }
.pba__table { border: 1px solid rgba(255, 255, 255, .16); background: rgba(13, 14, 16, .75); }
.pba__table-h { margin: 0; padding: 7px 10px; font: 600 1.04em/1.3 var(--font-figure); letter-spacing: .04em; color: #ffc66b; background: rgba(242, 163, 58, .12); border-bottom: 1px solid rgba(255, 255, 255, .1); }
.pba__table dl { margin: 0; }
.pba__table dl div { display: grid; grid-template-columns: minmax(0, 5.6em) minmax(0, 1fr); border-top: 1px solid rgba(255, 255, 255, .1); }
.pba__table dl div:first-child { border-top: 0; }
.pba__table dt, .pba__table dd { margin: 0; padding: 5px 9px; line-height: 1.25; }
.pba__table dt { font: 600 .82em/1.45 var(--font-figure); letter-spacing: .12em; text-transform: uppercase; color: #8d9096; border-right: 1px solid rgba(255, 255, 255, .1); overflow-wrap: anywhere; }
.pba__table dd { color: #d9dbdf; font-size: .95em; }
.pba__ill { margin: 12px 0 0; font: 600 10.5px/1.3 var(--font-figure); letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-3); }
.pba__draw { position: relative; container-type: inline-size; }
.vco--bp .vco__item { font-size: clamp(10.5px, 1.75cqw, 13px); }
.pba__x, .pba__table { margin: 10px 0 0; font-size: 13px; }
@media (min-width: 1024px) {
  .pba__x, .pba__table { position: absolute; left: var(--x); top: var(--y); margin: 0; font-size: clamp(10.5px, 1.6cqw, 12.5px); }
  .pba__x--end { transform: translateX(-100%); text-align: right; }
  .pba__x--mid { transform: translateX(-50%); text-align: center; }
  .pba__table { width: var(--w); }
  /* 叠图版式里 .pba__draw 就是插图框（标注与叠加的百分比坐标都相对它），「示意 · 非比例」挂在框下 */
  .pba__draw { margin-bottom: 34px; }
  .pba__ill { position: absolute; left: 0; top: 100%; margin-top: 10px; }
  .vco--bp .vco__item b { font: 600 1em/1.3 var(--font-figure); letter-spacing: .01em; }
  /* 叠在线稿上的字加一圈底色光晕（工程图标注的惯例），长译文压到线条时仍清楚 */
  .vco--bp .vco__item, .pba__x { text-shadow: 0 1px 2px rgba(14, 15, 18, .95), 0 0 6px rgba(14, 15, 18, .9); }
  .vco--bp .vco__item span { font-size: .85em; line-height: 1.35; margin-top: 2px; color: #9a9ca1; }
  .vco--bp .vco__item--start { max-width: min(30%, calc(100% - var(--x) - 8px)); }
  .vco--bp .vco__item--end { max-width: min(30%, calc(var(--x) - 8px)); }
  .vco--bp .vco__item--up { transform: translateY(-100%); }  /* 向上长的条目 y 是块底（build_site.PB_BP_CALLOUTS 的 grow） */
  .pba__x { width: max-content; max-width: 30%; }
  .pba__x--mid { max-width: 36%; font-size: clamp(10px, 1.4cqw, 11px); }  /* 曲线框内宽 264 / 720 */
  /* 详图 B 与标注①同在图顶：标注①（y ≥ 41）收窄到 x 338–462；详图标题在 y 20–36 一行排开，副标题收窄到 x 470–582 往下换行 */
  #app-e-mobility .vco__item:first-child { max-width: 17%; }
  #app-e-mobility .pba__x--end { max-width: none; }
  #app-e-mobility .pba__x--end b { max-width: 34cqw; margin-left: auto; }
  #app-e-mobility .pba__x--end span { max-width: 15.5cqw; margin-left: auto; }
  /* 其余几处相邻标注的最宽（viewBox 坐标换算成 %）：英文与长译文各自往下换行，不压到旁边的标注与编号圆 */
  #app-home-rv-storage .vco__item:nth-child(1) { max-width: 22%; }  /* 编号圆左边 x 198 往左 158，不压图框左缘的行号 A */
  #app-home-rv-storage .vco__item:nth-child(2) { max-width: 25.5%; }  /* x 398 → 581，让开③（582） */
  #app-solar-lifepo4 .vco__item:nth-child(2) { max-width: 19%; }    /* x 378 → 515 */
  #app-solar-lifepo4 .vco__item:nth-child(3) { max-width: 21.5%; }  /* 右端 688，左到 533 */
}
.pba__stage.is-tabs .pba__panel[hidden] { display: none; }
.pba__stage.is-tabs .pba__panel + .pba__panel { border-top: 0; }

/* 工程图线稿（高保真稿 .bpsvg 规则原样；GC / D8：装饰循环最多 3 轮，减少动态时关闭） */
.bpsvg .ln { fill: none; stroke: #d9dbdf; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.bpsvg .ln2 { fill: none; stroke: #7d8087; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.bpsvg .ln3 { fill: none; stroke: rgba(217, 219, 223, .32); stroke-width: .8; }
.bpsvg .dash { fill: none; stroke: #7d8087; stroke-width: 1; stroke-dasharray: 4 4; }
.bpsvg .body { fill: #1b1c20; }
.bpsvg .body2 { fill: #22242a; }
.bpsvg .dim { stroke: #8d9096; stroke-width: .9; fill: none; }
.bpsvg .dimt { font: 600 11px var(--font-figure); fill: #b9bbc0; letter-spacing: .06em; }
.bpsvg .lead { fill: none; stroke: #f2a33a; stroke-width: .9; }
.bpsvg .ball { fill: #121316; stroke: #f2a33a; stroke-width: 1; }
.bpsvg .baln { font: 600 10px var(--font-figure); fill: #ffc66b; }
.bpsvg .tb { font: 600 9px var(--font-figure); fill: #6f7279; letter-spacing: .14em; }
.bpsvg .tbv { font: 600 10.5px var(--font-figure); fill: #c9cbcf; letter-spacing: .04em; }
.bpsvg .flow { fill: none; stroke: #f2a33a; stroke-width: 1.4; stroke-dasharray: 5 6; animation: bp-flow 1.1s linear 3 forwards; }
@keyframes bp-flow { to { stroke-dashoffset: -22; } }
/* 有限轮数一律 forwards：停在末帧，不跳回元素基准样式（光晕基准 opacity 1 比峰值 .8 还亮） */
.bpsvg .glow { animation: bp-breathe 2.8s ease-in-out 3 forwards; }
@keyframes bp-breathe { 0%, 100% { opacity: .25; } 50% { opacity: .8; } }
.bpsvg .fadein { animation: bp-fin .8s var(--vis-ease) backwards; }
@keyframes bp-fin { from { opacity: 0; } }

/* ================================================================== 流程（周刻度甘特） */
.pbp { padding: 110px 0; background: var(--paper); }
.pbp__head { display: flex; justify-content: space-between; align-items: end; gap: 40px; }
.pbp__head .vsub { max-width: 470px; margin: 0; }
/* 高保真稿 .gstage：甘特与「每批随货」文件条在同一张浅色卡片里，vgantt 自身的卡片外观去掉 */
.pbp__stage { margin-top: 44px; border-radius: 24px; padding: 30px 34px 28px; overflow: hidden;
  background: linear-gradient(180deg, #fbfaf7, #f1f0eb); border: 1px solid #e3e1da;
  box-shadow: 0 40px 70px -50px rgba(0, 0, 0, .35), inset 0 1px 0 #fff; }
/* 裁切交给卡片（含内边距），窄屏时最后一栏的「SHIPPING」等区名能伸进卡片内边距，与 vgantt 自带卡片时一致 */
.pbp__stage .vgantt { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; }

/* ================================================================== 走进工厂（深色区段） */
.pbf { padding: 110px 0; color: var(--on-dark); background: linear-gradient(180deg, #121213, #0d0d0f); }
.pbf__head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: end; }
.pbf__head .vsub { margin: 0; max-width: none; font-size: 15.5px; }
/* 图组：两张横图 + 一张竖图；条目是指向大图的 <a>（vis-lightbox.js 接管成灯箱） */
.pbf__gal { display: grid; grid-template-columns: 1.45fr 1.12fr .78fr; gap: 14px; margin-top: 48px; height: 500px; }
.pbf__fig { display: block; position: relative; min-width: 0; border-radius: 18px; overflow: hidden; cursor: zoom-in;
  background: #000; border: 1px solid rgba(255, 255, 255, .08); color: #fff; text-decoration: none; }
.pbf__fig img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.02);
  filter: saturate(.82) contrast(1.06) brightness(.86); transition: transform 2.4s var(--vis-ease), filter .8s; }
.pbf__fig--tall img { object-position: 50% 30%; }
.pbf__fig:hover img, .pbf__fig:focus-visible img { transform: scale(1.07); filter: saturate(.95) contrast(1.06) brightness(.98); }
.pbf__fig::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, .35), transparent 28%, transparent 55%, rgba(0, 0, 0, .82)); }
.pbf__fig::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 120px rgba(0, 0, 0, .55); }
.pbf__fig:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.pbf__idx { position: absolute; left: 18px; top: 16px; z-index: 2; font: 600 11px/1 var(--font-figure); letter-spacing: .18em; color: rgba(255, 255, 255, .75); }
.pbf__caption { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 2; font: 500 13.5px/1.45 var(--font); color: #fff;
  transform: translateY(4px); transition: transform .6s var(--vis-ease); }
.pbf__fig:hover .pbf__caption, .pbf__fig:focus-visible .pbf__caption { transform: none; }
.pbf__row { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 28px; margin-top: 28px; align-items: start; }
/* 铭牌：「approx. 30,000 m²」是一整句事实（factory.json），宽屏三栏时中栏放宽免得单位落单；换行时两行均衡（不留孤零零的 m²） */
.pbf .vnp dd { text-wrap: balance; }
@media (min-width: 1200px) { .pbf .vnp__facts { grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr) minmax(0, .85fr); } }
.pbf__certs h3 { font: 600 10.5px/1.3 var(--font-figure); letter-spacing: .18em; color: var(--on-dark-3); text-transform: uppercase; margin: 6px 0 14px; }

/* ================================================================== FAQ + 询价 */
.pbl { padding: 110px 0 120px; background: linear-gradient(180deg, var(--paper), #efeee9); }
.pbl__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); gap: 56px; align-items: start; }
.pbl__faq { position: sticky; top: calc(var(--hdr-h) + var(--secnav-h) + 16px); }
/* 表单面板：深色表头（琥珀底线）+ 白色正文；lead_form.html 的子元素统一左右留白 */
.pbl .qf { position: relative; padding: 0 0 30px; border-radius: 22px; background: #fff; overflow: hidden; --focus: var(--amber);
  box-shadow: 0 50px 80px -50px rgba(0, 0, 0, .35), 0 0 0 1px #e2e0d9; scroll-margin-top: calc(var(--hdr-h) + var(--secnav-h) + 12px); }
.pbl .qf > * { margin-left: 32px; margin-right: 32px; }
.pbl .qf > .qf__head { margin: 0; padding: 30px 32px 24px; position: relative; color: var(--on-dark); background: linear-gradient(180deg, #17181a, #1f2024); }
.pbl .qf__head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, var(--amber), rgba(242, 163, 58, 0)); }
.pbl .qf__title { font: 600 28px/1.15 var(--font-figure); margin: 0 0 10px; color: var(--on-dark); }
.pbl .qf__intro { margin: 0; font-size: 14px; color: var(--on-dark-2); }
.pbl .qf__req { margin: 12px 0 0; font-size: 12px; color: var(--on-dark-3); }
/* 「来自配置器的规格」 */
.pbl__spec { padding: 20px 0 18px; border-bottom: 1px solid #ebe9e3; }
.pbl__spec-k { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 12px;
  font: 600 10.5px/1.3 var(--font-figure); letter-spacing: .16em; color: var(--subtle); text-transform: uppercase; }
.pbl__spec-k a { flex: none; font: 500 12.5px/1 var(--font); letter-spacing: 0; text-transform: none; color: var(--amber-deep); text-decoration: none; }
.pbl__spec-k a::before { content: "↑ "; content: "↑ " / ""; }
.pbl__spec-k a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pbl__chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 36px; }
.pbl__chip { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; max-width: 100%; padding: 5px 5px 5px 12px; border-radius: 8px;
  background: var(--ink); color: var(--on-dark); font: 600 13.5px/1 var(--font-figure); letter-spacing: .02em; white-space: nowrap;
  animation: pbl-pop .45s var(--vis-ease) both; }
/* 数值不换行；长译文标签（ru「Последовательно × параллельно …」）在标签里换行，不撑出横向滚动 */
.pbl__chip small { min-width: 0; white-space: normal; font: 600 9.5px/1.2 var(--font-figure); letter-spacing: .14em; color: var(--on-dark-3); text-transform: uppercase; }
.pbl__chip.is-a { background: linear-gradient(180deg, #ffc66b, var(--amber)); color: var(--amber-ink); }
.pbl__chip.is-a small { color: #6b4410; }
.pbl__chip button { appearance: none; border: 0; padding: 0; margin: 0; cursor: pointer; width: 24px; height: 24px; border-radius: 5px;
  display: grid; place-items: center; color: inherit; background: none; opacity: .6; transition: opacity .2s, background-color .2s; }
.pbl__chip button:hover, .pbl__chip button:focus-visible { opacity: 1; background: rgba(255, 255, 255, .12); }
.pbl__chip.is-a button:hover, .pbl__chip.is-a button:focus-visible { background: rgba(0, 0, 0, .08); }
.pbl__chip button svg { width: 10px; height: 10px; }
@keyframes pbl-pop { from { opacity: 0; transform: translateY(4px) scale(.96); } to { opacity: 1; transform: none; } }
.pbl__empty { display: flex; align-items: center; font-size: 13px; line-height: 1.5; color: var(--subtle); }
.pbl__apps { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.pbl__apps button { appearance: none; border: 0; background: transparent; cursor: pointer; font: 500 13px/1.15 var(--font); padding: 9px 12px; border-radius: 8px;
  box-shadow: inset 0 0 0 1px #dcdad2; color: var(--muted); transition: color .2s, box-shadow .2s, background-color .2s; }
.pbl__apps button:hover { color: var(--ink); }
.pbl__apps button[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--amber); color: var(--ink); background: rgba(242, 163, 58, .08); }
.pbl__apps button[aria-pressed="true"]::before { content: "✓ "; content: "✓ " / ""; color: var(--amber-deep); font-weight: 700; }
/* 字段：浅暖底、琥珀聚焦环；自动带入的「产品或规格」是琥珀底色（pb-page.js .is-auto） */
.pbl .field-grid--2 { gap: 14px 16px; margin-top: 22px; }
.pbl .field__label { font: 600 12px/1.25 var(--font); color: var(--muted); }
.pbl .field__label i { color: var(--amber-deep); }
.pbl .field input, .pbl .field textarea { font: 15px/1.4 var(--font); color: var(--ink); border-radius: 9px; border: 1px solid #d9d7cf; background: #fbfbf9;
  transition: border-color .2s, box-shadow .2s, background-color .2s; }
.pbl .field input { padding: 0 13px; }
.pbl .field textarea { padding: 12px 13px; }
.pbl .field input:focus, .pbl .field textarea:focus { outline: 0; border-color: var(--amber); background: #fff; box-shadow: 0 0 0 4px rgba(242, 163, 58, .16); }
.pbl .field input.is-auto { background: linear-gradient(90deg, rgba(242, 163, 58, .10), #fff 60%); border-color: rgba(242, 163, 58, .6); }
.pbl .field [aria-invalid="true"] { border-color: var(--red); }
.pbl .qf__actions { margin-top: 22px; gap: 12px 18px; }
.pbl .qf__actions .btn--dark { border-radius: var(--r-md); color: var(--on-dark); background: linear-gradient(180deg, #2a2b30, #17181a);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 14px 26px -14px rgba(0, 0, 0, .6);
  transition: transform .25s var(--vis-ease), box-shadow .25s var(--vis-ease); }
.pbl .qf__actions .btn--dark:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 18px 30px -14px rgba(0, 0, 0, .7); }
.pbl .qf__actions .btn--dark::after { content: ""; flex: none; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h9m-4-4 4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h9m-4-4 4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat; }
.pbl .qf__privacy { font-size: 12.5px; color: var(--subtle); }

/* ================================================================== 响应式 */
@media (max-width: 1199px) {
  .pbh__in { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
/* 图纸面板 < 1280 宽改单栏：图纸占满宽度，叠图标注不至于比 1440 宽时更挤 */
@media (max-width: 1279px) {
  .pba__panel { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .pba__meta { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .08); }
}
@media (max-width: 1023px) {
  .pbc__head { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .pbc__scrolly { margin-top: 40px; }
  .pbp__stage { padding: 24px 22px 22px; }
  .pbf__head { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .pbf__gal { grid-template-columns: 1fr 1fr; height: auto; }
  .pbf__fig { aspect-ratio: 4 / 3; }
  .pbf__fig:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
  .pbf__fig:last-child { aspect-ratio: auto; }
  .pbf__row { grid-template-columns: minmax(0, 1fr); }
  .pbl__in { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .pbl__faq { position: static; }
}
@media (max-width: 767px) {
  .pbh__in { padding-top: 22px; padding-bottom: 56px; }
  .pbh .crumbs { margin-bottom: 20px; }
  .pbh__title { font-size: 40px; }
  .pbh__lead { font-size: 15.5px; }
  .pbh__plate { grid-template-columns: 1fr 1fr; }
  .pbh__plate > .pbh__chem { grid-column: 1 / -1; border-left: 0; padding-left: 0; border-top: 1px solid rgba(255, 255, 255, .08); margin-top: 14px; }
  .pbh__plate dd { font-size: 23px; }
  .pbh__ctas .btn { flex: 1 1 100%; }
  .cfg { border-radius: 18px; margin: 0 -4px; }
  .cfg__top { padding: 14px 16px 0; }
  .cfg__hud { left: 16px; top: 12px; max-width: calc(100% - 32px); }
  .cfg__hud b { font-size: 30px; }
  .cfg__hud em { display: none; }
  .cfg__view.is-live { aspect-ratio: 680 / 440; }
  .cfg__view:not(.is-live) .vco--cfg { padding: 4px 16px 16px; }
  .cfg__ctl { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 4px 16px 16px; }
  .seg { display: grid; grid-template-columns: repeat(3, 1fr); }
  .seg button { text-align: center; }
  .cfg__plate { margin: 0 16px; grid-template-columns: 1fr 1fr; }
  .cfg__plate > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .cfg__plate > div:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .08); }
  .cfg__plate dd { font-size: 21px; }
  .cfg__foot { flex-direction: column; align-items: stretch; padding: 14px 16px 18px; }
  .cfg__foot .btn { justify-content: center; white-space: normal; text-align: center; height: auto; min-height: 44px; padding-block: 8px; }
  .pbc, .pba { padding: 72px 0; }
  .pbc__notebar { grid-template-columns: minmax(0, 1fr); }
  .pbc__vchips { flex-wrap: wrap; }
  .pba__head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .pba__stage { margin-top: 28px; border-radius: 18px; }
  .pba__tabs { grid-template-columns: 1fr 1fr; }
  .pba__tab { padding: 14px 14px 12px; border-top: 1px solid rgba(255, 255, 255, .08); }
  .pba__tab:nth-child(-n+2) { border-top: 0; }
  .pba__tab:nth-child(3) { border-left: 0; }
  .pba__tab b { font-size: 14.5px; }
  .pba__draw { margin: 8px 12px 12px; }
  .pba__meta { padding: 22px 18px; }
  .pba__meta h3 { font-size: 23px; }
  .pba__note { padding: 14px 18px; }
  .pba__note .link-arrow { margin-left: 0; }
  .pbp, .pbf, .pbl { padding: 72px 0; }
  .pbp__head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .pbp__stage { padding: 20px 16px; border-radius: 18px; margin-top: 28px; }
  .pbf__gal { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 32px; }
  .pbf__fig:first-child { aspect-ratio: 4 / 3; }
  .pbf__fig:last-child { aspect-ratio: 3 / 4; }
  .pbl .qf { border-radius: 18px; margin: 0 -4px; padding-bottom: 24px; }
  .pbl .qf > * { margin-left: 18px; margin-right: 18px; }
  .pbl .qf > .qf__head { padding: 24px 18px 20px; }
  .pbl .qf__title { font-size: 24px; }
  .pbl__chip { gap: 6px; padding-left: 10px; }
  .pbl__chip small { letter-spacing: .06em; }
}
@media (max-width: 767px) and (scripting: enabled) {
  .cfg__view:not(.is-live) { aspect-ratio: 680 / 440; }
}

@media (prefers-reduced-motion: reduce) {
  .pk-cell--in { animation: none; }
  .seg__pill, .seg button, .cap__cells i, .pbh .btn { transition: none; }
  .pbc__stills img, .pbc__pvi, .pbc__s, .pbc__s h3, .pbc__body > p, .pbc__parts span { transition: none; }
  .pbc__stills, .pbc__rail button, .pbc__rail button::before, .pba__tab, .pba__tab i, .pba__tab b, .pba__tab::after { transition: none; }
  .pbc__pvi { transform: none; }
  .bpsvg .glow { animation: none; opacity: .5; }  /* 光晕静止在呼吸区间中段（controller 裁决），不是 1 */
  .bpsvg .fadein { animation: none; opacity: 1; }
  .bpsvg .flow { animation: none; }
  .pbf__fig img, .pbf__caption, .pbl__apps button, .pbl__chip button, .pbl .field input, .pbl .field textarea, .pbl .qf__actions .btn--dark { transition: none; }
  .pbf__fig:hover img, .pbf__fig:focus-visible img { transform: scale(1.02); }
  .pbl__chip { animation: none; }
}