/*
 * 应用领域页 · L2 参考方案板页（application_preview/board.html）。
 * 设计来源：Claude Design refboard-kit/L2-RefBoard.dc.html —— 视口 ≥1248px（内容宽 1200）逐值照搬设计稿内联样式；
 * <1200 的响应式按 CONTRACT §6 补。所有选择器限定在 .vhap 下，类名前缀 vhap-。
 * 只用 px（站点 @media(max-width:1200px){html{font-size:13px}}，禁止 rem/em 依赖根字号）。
 */

/* ------------------------------------------------------------------ 站点泄漏抵消 / 基础 token */
#page.dbox:has(.vhap) { overflow: clip; }                 /* .dbox{overflow:hidden} 会让 sticky 抽屉失效 */
@keyframes rbflow { to { stroke-dashoffset: -4.4px; } }  /* board-kit 光效流动 */

.vhap {
    display: block;
    background: #FFFFFF;
    color: #1A1A1A;
    font-family: "PingFang SC", "Microsoft YaHei", -apple-system, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    text-align: left;
    -webkit-font-smoothing: antialiased;
}
html[lang^="en"] .vhap { font-family: "Poppins", sans-serif; }
/* 设计稿默认 content-box（onekey 把全部元素改成了 border-box）；按钮保持浏览器默认 border-box */
.vhap *, .vhap *::before, .vhap *::after { box-sizing: content-box; }
.vhap button, .vhap select { box-sizing: border-box; }
.vhap [hidden] { display: none !important; }
:where(.vhap) a { color: #C30D23; text-decoration: none; }
:where(.vhap) a:hover { color: #8A0A18; }
:where(.vhap) button, :where(.vhap) input, :where(.vhap) textarea { font-size: inherit; }
:where(.vhap) button { margin: 0; }
/* 设计稿写 monospace 的地方恢复等宽（压过中文站 cn-typography 的 (0,2,2)!important）。
   末尾 generic monospace 之前先给中文无衬线：lang="zh" 页面里 generic monospace 的汉字会落到 NSimSun（宋体），
   与设计稿（等宽西文 + 黑体汉字）不符；实测 Consolas + Noto Sans SC 与设计稿同宽同高。 */
:root body .vhap .vhap-mono,
:root body .vhap .vhap-mono *,
:root body .vhap svg text[font-family="monospace"],
:root body .vhap svg tspan[font-family="monospace"] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", monospace !important;
}

.vhap-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.vhap section[id] { scroll-margin-top: 130px; }

/* ------------------------------------------------------------------ 布局校验条 */
.vhap-check { background: #FFF6EA; border-bottom: 1px solid #C30D23; }
.vhap-check-in { padding-top: 12px; padding-bottom: 12px; font-size: 12px; line-height: 1.7; color: #8A0A18; }
.vhap-check-in span { display: block; }

/* ------------------------------------------------------------------ 通用：眉标 / 标题 */
.vhap-eyebrow { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.vhap-eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: #C30D23; }
.vhap-eyebrow-t { font-size: 12px; font-weight: 700; letter-spacing: 3px; color: #C30D23; }
.vhap-eyebrow--dark .vhap-eyebrow-dot { background: #E0213A; }
.vhap-eyebrow--dark .vhap-eyebrow-t { color: #FFF6EA; }
.vhap-h2 { margin: 0 0 16px; font-size: 40px; font-weight: 800; line-height: 1.2; color: #1A1A1A; }
.vhap-h2--res { margin-bottom: 48px; }
.vhap-accent { color: #C30D23; }
.vhap-sec { padding: 64px 0; background: #FFFFFF; }
.vhap-sec--grey { background: #F4F4F4; }
.vhap-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 24px; }
.vhap-lead { margin: 0; font-size: 16px; line-height: 1.75; color: #565B63; }
.vhap-lead--ink { color: #1A1A1A; max-width: 792px; }
.vhap-btn {
    border: none; cursor: pointer; font-family: inherit; background: #C30D23; color: #FFFFFF;
    font-size: 14px; font-weight: 700; padding: 12px 24px; border-radius: 10px;
}
.vhap-btn:hover { background: #8A0A18; }
.vhap-btn[disabled] { cursor: default; opacity: .7; }

/* ------------------------------------------------------------------ 1 方案头 */
.vhap-hero { background: linear-gradient(115deg, #141416 0%, #1A1A1A 62%, #26161a 100%); }
.vhap-hero-in { padding-top: 48px; padding-bottom: 64px; }
.vhap-crumbs { display: flex; gap: 8px; font-size: 14px; color: rgba(255,255,255,.65); margin-bottom: 32px; }
.vhap .vhap-crumbs a, .vhap .vhap-crumbs a:hover { color: rgba(255,255,255,.65); }
.vhap-crumbs .is-last { color: #FFFFFF; }
.vhap-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 384px; gap: 48px; align-items: end; }
.vhap-h1 { margin: 0 0 16px; font-size: 48px; line-height: 1.2; font-weight: 800; color: #FFFFFF; }
.vhap-h1 .vhap-accent { color: #E0213A; }
.vhap-hero-p { margin: 0 0 24px; font-size: 16px; line-height: 1.75; max-width: 792px; color: rgba(255,255,255,.85); }
.vhap-tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.vhap-ver { font-size: 12px; font-weight: 700; letter-spacing: 1px; color: #FFFFFF; background: #C30D23; border-radius: 6px; padding: 4px 8px; }
.vhap-tag { font-size: 12px; padding: 4px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.22); color: rgba(255,255,255,.85); }
.vhap-stats {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.14); border-radius: 10px; overflow: hidden;
}
.vhap-stat { background: #1A1A1A; padding: 16px 24px; }
.vhap-stat-n { font-size: 40px; font-weight: 800; line-height: 48px; color: #FFFFFF; }
.vhap-stat-n.is-red { color: #E0213A; }
.vhap-stat-l { font-size: 12px; color: rgba(255,255,255,.6); }

/* ------------------------------------------------------------------ 2 双视图 */
.vhap-toggle { display: flex; background: #FFFFFF; border: 1px solid #E4E4E4; border-radius: 10px; padding: 4px; flex: none; }
.vhap-toggle-btn {
    border: none; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 700;
    padding: 12px 16px; border-radius: 8px; background: transparent; color: #1A1A1A;
}
.vhap-toggle-btn.is-on { background: #1A1A1A; color: #FFFFFF; }
.vhap-stage { display: flex; gap: 24px; align-items: flex-start; }
.vhap-card {
    flex: 1; min-width: 0; background: #FFFFFF; border: 1px solid #E4E4E4; border-radius: 10px;
    padding: 24px; box-sizing: border-box;
}
.vhap-fig {
    position: relative; width: 100%; border-radius: 8px; overflow: hidden;
    background: radial-gradient(ellipse at 30% 20%, #17704A 0%, #0F5A39 55%, #0B4A2E 100%);
    box-shadow: inset 0 0 0 3px #0A3F27, inset 0 0 0 5px rgba(214,174,69,.35);
}
.vhap-fig::before {
    content: ""; position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,255,255,.035) 1px, transparent 1.2px); background-size: 5px 5px;
}
.vhap-fig-layer { position: absolute; inset: 0; }
.vhap-zb {
    position: absolute; transform: translate(-50%, -50%); font-size: 11px; font-weight: 800; line-height: 16px;
    min-width: 16px; text-align: center; color: rgba(255,255,255,.9); background: #0F5A39;
    border: 1px solid rgba(255,255,255,.35); border-radius: 4px; pointer-events: none;
}
.vhap-box {
    position: absolute; padding: 0; border: none; outline-offset: 3px; border-radius: 4px;
    cursor: pointer; transition: all .15s;
}
.vhap-lb {
    position: absolute; transform: translateY(-100%); margin-top: -5px; display: inline-flex; align-items: center;
    gap: 4px; font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: .5px; padding: 3px 5px;
    border-radius: 4px; white-space: nowrap; pointer-events: none;
}
.vhap-lb-dot { width: 6px; height: 6px; border-radius: 50%; }
.vhap-stamp {
    position: absolute; right: 32px; top: 6px; font-size: 11px; font-weight: 700; letter-spacing: 2px;
    line-height: 1; color: rgba(255,255,255,.55);
}
.vhap-zones { display: grid; grid-template-columns: repeat(var(--vhap-cols, 5), minmax(0, 1fr)); gap: 0 16px; margin-top: 16px; }
.vhap-zone { display: flex; flex-direction: column; border-top: 2px solid #1A1A1A; padding-top: 8px; }
.vhap-zone-t { font-size: 11px; font-weight: 700; letter-spacing: 1px; color: #1A1A1A; line-height: 16px; margin-bottom: 4px; }
.vhap-zi {
    display: flex; align-items: center; gap: 8px; height: 24px; padding: 0; border: none;
    border-bottom: 1px solid #F4F4F4; background: none; cursor: pointer; font-family: inherit;
    text-align: left; min-width: 0;
}
.vhap-zi-n { flex: none; font-size: 11px; font-weight: 800; color: #A8A8A8; width: 16px; }
.vhap-zi-n.is-v { color: #C30D23; }
.vhap-zi-t {
    flex: 1; min-width: 0; font-size: 12px; line-height: 16px; color: #1A1A1A; font-weight: 400;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vhap-zi.is-on .vhap-zi-t { color: #C30D23; font-weight: 700; }
.vhap-legend {
    display: flex; justify-content: space-between; gap: 32px; margin-top: 16px; padding-top: 16px;
    border-top: 1px solid #E4E4E4; font-size: 12px; line-height: 20px; color: #565B63;
}
.vhap-legend-r { display: flex; gap: 24px; }
/* 设计稿图例「沃虎可供（{{ n }}）」里数字是独立 span，在 inline-flex 里单独成项 → 括号与数字间各有 8px gap；模板同样把数字包 span 以逐像素还原 */
.vhap-lg { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.vhap-lg-line { width: 16px; height: 2px; background: #C30D23; }
.vhap-lg-line.is-other { background: #B0B6BF; }
.vhap-lg-tag { font-size: 11px; font-weight: 800; color: #C30D23; }
.vhap-lg-tag.is-other { color: #8C8C8C; }
.vhap-sch { display: flex; flex-direction: column; }
.vhap-sch-legend { display: flex; gap: 24px; flex-wrap: wrap; align-items: center; padding-bottom: 16px; font-size: 12px; color: #565B63; }
.vhap-sl { display: flex; align-items: center; gap: 8px; }
.vhap-sl-t { white-space: nowrap; }
.vhap-sch-box {
    min-width: 0; overflow-x: auto; overflow-y: hidden; background-color: #FFFFFF;
    border: 1px solid #E4E4E4; border-radius: 10px; padding: 12px;
}
/* 抵消 onekey 全局 ::-webkit-scrollbar{width/height:5px}：元素设了标准 scrollbar-color 后 Chrome 不再套 ::-webkit-scrollbar，
   滚动条回到平台原生尺寸（Windows 经典 15px / macOS 覆盖式 0），抽屉内容宽、原理图框高才与设计稿一致 */
.vhap-drawer, .vhap-sch-box { scrollbar-color: #C1C1C1 #F1F1F1; }

/* ------------------------------------------------------------------ 3 右侧抽屉（内容由 board-app.js 渲染，内联样式照搬设计稿） */
.vhap-drawer-slot:not([hidden]) { display: contents; }
.vhap-drawer {
    width: 400px; flex: none; background: #FFFFFF; border: 1px solid #E4E4E4; border-radius: 10px; padding: 24px;
    display: flex; flex-direction: column; gap: 16px; box-sizing: border-box;
    max-height: min(880px, calc(100vh - 162px)); overflow: auto; position: sticky; top: 146px;
}
.vhap-drawer table { border-collapse: collapse; }
/* 抽屉 × 在设计稿里没写字体 = 浏览器按钮默认字体（Windows / macOS Chrome 计算值 Arial），与 L1 弹卡 × 同一做法：
   压过中文站 cn-typography（0,2,2）与英文站 button 规则（1,1,2）的 !important。抽屉里只有 × 一个 button[aria-label] */
#main-content.vhap.vhap-board .vhap-drawer button[aria-label] { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important; }

/* ------------------------------------------------------------------ 5 物料表 */
.vhap-table-wrap { border: 1px solid #E4E4E4; border-radius: 10px; overflow: hidden; }
.vhap-bom { width: 100%; border-collapse: collapse; font-size: 14px; }
.vhap-bom th { text-align: left; padding: 12px 16px; background: #F4F4F4; font-weight: 700; color: #1A1A1A; }
.vhap-bom th.is-nw { white-space: nowrap; }
.vhap-bom tbody tr { cursor: pointer; background: #FFFFFF; }
.vhap-bom tbody tr:hover, .vhap-bom tbody tr.is-sel { background: #FFF6EA; }
.vhap-bom td { padding: 12px 16px; border-top: 1px solid #E4E4E4; vertical-align: middle; }
.vhap-bom-num { font-weight: 800; color: #A8A8A8; }
.vhap-bom-num.is-v { color: #C30D23; }
.vhap-bom-zone { white-space: nowrap; color: #565B63; }
.vhap-bom-name { font-weight: 600; }
.vhap-bom-refs { font-size: 12px; color: #565B63; }
.vhap-bom-cat { color: #565B63; font-size: 14px; }
.vhap-bom-model { font-weight: 700; font-size: 12px; }
.vhap .vhap-bom-link, .vhap .vhap-bom-link:hover { color: inherit; }
.vhap .vhap-bom-link:hover { text-decoration: underline; }
.vhap-bom-st { white-space: nowrap; }
.vhap-pill { font-size: 11px; font-weight: 700; padding: 4px 8px; border-radius: 6px; background: #F4F4F4; color: #565B63; }
.vhap-pill.is-v { background: #C30D23; color: #FFFFFF; }

/* ------------------------------------------------------------------ 6 资料区 */
.vhap-res { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.vhap-res-card {
    background: #FFFFFF; border: 1px solid #E4E4E4; border-radius: 10px; padding: 24px;
    display: flex; flex-direction: column; gap: 12px;
}
.vhap-res-card.is-soon { opacity: .6; }
.vhap-res-no { font-size: 12px; font-weight: 700; color: #C30D23; }
.vhap-res-t { margin: 0; font-size: 16px; font-weight: 800; line-height: 1.3; color: #1A1A1A; }
.vhap-res-d { margin: 0; font-size: 14px; line-height: 1.7; flex: 1; }
.vhap-res-a {
    align-self: flex-start; border: none; background: none; padding: 0; cursor: pointer; font-family: inherit;
    font-size: 14px; font-weight: 700; color: #C30D23;
}
.vhap-res-link { font-size: 14px; font-weight: 700; }
.vhap-soon { align-self: flex-start; font-size: 12px; padding: 4px 12px; border-radius: 6px; background: #F4F4F4; color: #8C8C8C; }
.vhap-ds { margin-top: 24px; background: #FFFFFF; border: 1px solid #E4E4E4; border-radius: 10px; padding: 24px; }
.vhap-ds-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.vhap-ds-title { font-size: 16px; font-weight: 800; }
.vhap-ds-fold {
    border: none; background: #F4F4F4; border-radius: 10px; padding: 8px 12px; cursor: pointer;
    font-family: inherit; font-size: 14px; color: #000000;
}
.vhap-ds-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 24px; }
.vhap .vhap-ds-item {
    display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid #F4F4F4;
    font-size: 14px; color: #1A1A1A;
}
.vhap .vhap-ds-item:hover { color: #C30D23; }
.vhap-ds-m { font-weight: 700; }
.vhap-ds-cat { color: #8C8C8C; margin-left: 8px; font-size: 12px; }
.vhap-ds-pdf { font-weight: 700; color: #C30D23; white-space: nowrap; }

/* ------------------------------------------------------------------ 7 索取资料表单 */
.vhap-req-grid { display: grid; grid-template-columns: 384px 1fr; gap: 48px; align-items: start; }
.vhap-req-p { margin: 0; font-size: 16px; line-height: 1.75; }
.vhap-form-box { border: 1px solid #E4E4E4; border-radius: 10px; padding: 32px; }
.vhap-ok { text-align: center; padding: 24px 0; }
.vhap-ok-icon {
    width: 56px; height: 56px; border-radius: 50%; background: #C30D23; color: #FFFFFF; display: inline-flex;
    align-items: center; justify-content: center; font-size: 24px; margin-bottom: 16px;
}
.vhap-ok-t { font-size: 20px; font-weight: 800; margin-bottom: 8px; }
.vhap-ok-d { font-size: 14px; color: #565B63; line-height: 1.7; }
.vhap-ok-again {
    margin-top: 24px; border: 1px solid #E4E4E4; background: #FFFFFF; border-radius: 10px; padding: 12px 16px;
    cursor: pointer; font-family: inherit; font-size: 14px; color: #000000;
}
.vhap-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.vhap-field { display: flex; flex-direction: column; gap: 8px; font-size: 14px; font-weight: 600; color: #1A1A1A; }
.vhap-field--full { grid-column: 1 / -1; }
.vhap-star { color: #C30D23; }
.vhap-input {
    height: 44px; border: 1px solid #E4E4E4; border-radius: 10px; padding: 0 16px; font-size: 14px;
    font-family: inherit; font-weight: 400; color: #000000; background: #FFFFFF; margin: 0; outline-offset: 0;
    line-height: normal; box-shadow: none;
}
.vhap-textarea { height: auto; min-height: 96px; padding: 12px 16px; resize: vertical; }
.vhap-input.is-err { border-color: #C30D23; }
.vhap-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.vhap-form-box { position: relative; }
.vhap-form-err {
    margin-top: 16px; padding: 12px 16px; border-radius: 10px; background: #FFF6EA; border: 1px solid #C30D23;
    color: #8A0A18; font-size: 14px;
}
.vhap-form-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 24px; }
.vhap-consent { font-size: 12px; color: #8C8C8C; }

/* ------------------------------------------------------------------ 8 相关内容 */
.vhap-rel { padding: 64px 0 96px; background: #FFFFFF; border-top: 1px solid #E4E4E4; }
.vhap-rel-grid { display: grid; grid-template-columns: 384px 1fr 1fr; gap: 24px; }
.vhap-rel-h { font-size: 12px; font-weight: 700; color: #565B63; margin-bottom: 12px; }
.vhap-rel-back { font-size: 16px; font-weight: 700; }
.vhap-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.vhap .vhap-chip {
    font-size: 14px; padding: 8px 12px; border: 1px solid #E4E4E4; border-radius: 10px; color: #1A1A1A; white-space: nowrap;
}
.vhap .vhap-chip:hover { border-color: #C30D23; color: #C30D23; }
.vhap-others { display: flex; flex-direction: column; gap: 8px; }
.vhap .vhap-other {
    font-size: 14px; display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px;
    border: 1px solid #E4E4E4; border-radius: 10px; color: #1A1A1A;
}
.vhap .vhap-other:hover { border-color: #C30D23; color: #C30D23; }
.vhap-other-a { font-size: 11px; color: #C30D23; }
.vhap .vhap-other.is-soon, .vhap .vhap-other.is-soon:hover { color: #A8A8A8; border: 1px dashed #E4E4E4; }
.vhap-other.is-soon .vhap-other-a { color: inherit; }

/* ------------------------------------------------------------------ 响应式（CONTRACT §6） */
@media (max-width: 1199px) {
    .vhap-drawer { width: 360px; }
}
/* 992–1199 打开抽屉后板图卡片只剩 ~540–720px：图例右侧两项 nowrap（英文约 446px）会把左侧说明挤成 70–200px 宽的
   细长条（英文 14 行）。放不下时让右侧两项换到下一行，说明至少保留 260px；≤991 图例改为纵向堆叠，不适用这条 */
@media (min-width: 992px) and (max-width: 1199px) {
    .vhap-legend { flex-wrap: wrap; row-gap: 8px; }
    .vhap-legend > span:first-child { flex: 1 1 260px; }
}
@media (max-width: 991px) {
    .vhap section[id] { scroll-margin-top: 80px; }
    .vhap-h1 { font-size: 32px; }
    .vhap-h2 { font-size: 28px; }
    .vhap-crumbs { flex-wrap: wrap; row-gap: 4px; }
    .vhap-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; }
    .vhap-head { flex-wrap: wrap; align-items: flex-start; }
    .vhap-stage { flex-direction: column; align-items: stretch; }
    .vhap-drawer { width: auto; max-height: none; overflow: visible; position: static; }
    .vhap-fig-scroll { overflow-x: auto; overflow-y: hidden; }
    .vhap-fig { min-width: 640px; }
    .vhap-zones { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
    .vhap-legend { flex-direction: column; gap: 8px; }
    .vhap-legend-r { flex-wrap: wrap; row-gap: 4px; }
    .vhap-table-wrap { overflow-x: auto; }
    .vhap-bom { min-width: 880px; }
    .vhap-res { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vhap-ds-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vhap-req-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .vhap-rel-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 600px) {
    .vhap-wrap { padding: 0 16px; }
    .vhap-card { padding: 16px; }
    .vhap-drawer { padding: 16px; }
    .vhap-zones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vhap-stat { padding: 16px; }
    .vhap-res { grid-template-columns: minmax(0, 1fr); }
    .vhap-ds-grid { grid-template-columns: minmax(0, 1fr); }
    .vhap-head > .vhap-btn, .vhap-head > .vhap-toggle { width: 100%; }
    .vhap-head > .vhap-toggle { box-sizing: border-box; }   /* 切换条是 div（content-box）：100% + 4px 内边距 + 1px 边框会超出内容区 10px */
    .vhap-toggle-btn { flex: 1; }
    .vhap-form-box { padding: 20px 16px; }
    .vhap-fields { grid-template-columns: minmax(0, 1fr); }
    .vhap-form-foot { flex-direction: column; align-items: stretch; }
    .vhap-form-foot .vhap-btn, .vhap-ok-again { width: 100%; }
    .vhap .vhap-chip { white-space: normal; }
}