/* Wolfer 3D product explorer — 沃孚尔三维产品预览 */
:root {
  color-scheme: light;
  --cad-ink: #163449;
  --cad-ink-2: #37586f;
  --cad-muted: #698294;
  --cad-faint: #8da3b2;
  --cad-blue: #1673b1;
  --cad-blue-dark: #0d5d94;
  --cad-blue-soft: #eaf4fb;
  --cad-line: #dce7ef;
  --cad-line-2: #e7eef4;
  --cad-soft: #eef5fa;
  --cad-panel: #ffffff;
  --cad-radius: 14px;
  --cad-cjk: "PingFang SC", "Microsoft YaHei"; /* CJK fallback after the Latin faces, per page language */
  background: #f4f8fb;
}
:root:lang(ja) { --cad-cjk: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo; }
:root:lang(ko) { --cad-cjk: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR"; }
/* The site navigation (site-chrome-v1: utility bar, #site-header, phone drawer, region / quote modals) shares
   this page and brings the site's Tailwind + site-polish + design-system styles. Everything of the viewer is
   kept to its own blocks below, so neither look leaks into the other. */
.cad-main, .cad-footer, .cad-dialog, .cad-toast, .cad-skip-link {
  font-family: "Montserrat", "Saira", var(--cad-cjk), sans-serif;
  color: var(--cad-ink);
  line-height: normal;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  --wf-ink: var(--cad-ink); /* site headings take var(--wf-ink) */
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
body[data-wf-page="cad-viewer"] { background: #f4f8fb; }
:where(.cad-main, .cad-footer, .cad-dialog, .cad-toast) a { color: inherit; text-decoration: none; }
:where(.cad-main, .cad-footer, .cad-dialog, .cad-toast) :is(button, input, select) { font: inherit; }
:where(.cad-main, .cad-footer, .cad-dialog, .cad-toast) :is(button, a, input, select) { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
:where(.cad-main, .cad-footer, .cad-dialog, .cad-toast) button { color: inherit; cursor: pointer; border: 0; background: none; }
:where(.cad-main, .cad-footer, .cad-dialog, .cad-toast) :is(button, fieldset) { margin: 0; }
:where(.cad-main, .cad-footer, .cad-dialog, .cad-toast) :is(button, fieldset):disabled { cursor: not-allowed; opacity: .45; }
:where(.cad-main, .cad-footer, .cad-dialog, .cad-toast) button:disabled { pointer-events: none; }
:where(.cad-main, .cad-footer, .cad-dialog, .cad-toast) :is(button, a, input, select, [tabindex]):focus-visible { outline: 3px solid #1684c9; outline-offset: 2px; }
[hidden] { display: none !important; }
:where(.cad-main, .cad-footer, .cad-dialog, .cad-toast, .cad-skip-link) svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.cad-sr-only, .cad-skip-link:not(:focus) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.cad-skip-link:focus { position: fixed; z-index: 50; top: 12px; left: 16px; padding: 12px 20px; border-radius: 8px; background: #fff; color: var(--cad-blue); box-shadow: 0 6px 25px #153a5426; }

.cad-main { width: min(1560px, calc(100% - 64px)); margin: 0 auto; }
.cad-breadcrumb { display: flex; align-items: center; gap: 9px; padding-top: 13px; font-size: 12px; line-height: 18px; color: #7e92a1; }
.cad-breadcrumb a:hover { color: var(--cad-blue); }
.cad-breadcrumb svg { width: 12px; height: 12px; stroke-width: 1.3; }
.cad-breadcrumb [aria-current] { color: #4f697c; }

/* ---------- page heading ---------- */
.cad-page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; padding: 12px 0 16px; }
.cad-eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 5px; color: var(--cad-blue); font-family: "Saira", sans-serif; font-size: 12px; font-weight: 500; line-height: 18px; letter-spacing: .11em; }
.cad-eyebrow > span { display: block; height: 1px; width: 23px; background: var(--cad-blue); }
.cad-page-heading h1 { margin: 0; font-size: clamp(28px, 2.6vw, 36px); font-weight: 650; letter-spacing: -.04em; line-height: 1.3; }
.cad-page-intro { margin: 5px 0 0; max-width: 640px; color: var(--cad-muted); font-size: 13px; line-height: 1.75; }
.cad-stats { display: flex; gap: 0; margin: 0; padding: 0; list-style: none; border: 1px solid #d6e5ef; border-radius: 10px; background: #fff; overflow: hidden; flex-shrink: 0; }
.cad-stats li { display: flex; flex-direction: column; gap: 2px; padding: 10px 18px; min-width: 112px; }
.cad-stats li + li { border-left: 1px solid var(--cad-line-2); }
.cad-stats strong { font-family: "Saira", sans-serif; font-size: 22px; font-weight: 600; line-height: 1.1; color: var(--cad-blue); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.cad-stats span { color: #6f879a; font-size: 12px; }

/* ---------- category tabs ---------- */
.cad-cats { margin: 0 0 12px; }
.cad-cats-track { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; }
.cad-cat { position: relative; display: flex; align-items: center; gap: 11px; min-height: 58px; padding: 9px 13px; border: 1px solid #dce8f0; border-radius: 10px; background: #fff; text-align: left; transition: border-color .15s, background .15s, box-shadow .15s; }
.cad-cat:hover { border-color: #a9c9de; background: #f8fbfe; }
.cad-cat[aria-selected="true"] { border-color: #6aa9d2; background: linear-gradient(180deg, #f4faff, #e9f4fc); box-shadow: inset 0 -2px 0 var(--cad-blue); }
.cad-cat-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; background: #eef5fa; color: #4f84a8; flex-shrink: 0; }
.cad-cat[aria-selected="true"] .cad-cat-icon { background: var(--cad-blue); color: #fff; }
.cad-cat-icon svg { width: 24px; height: 24px; stroke-width: 1.35; }
.cad-cat-copy { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.cad-cat-copy strong { font-size: 14px; font-weight: 600; color: var(--cad-ink-2); white-space: nowrap; }
.cad-cat-copy span { overflow: hidden; color: #8098a9; font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.cad-cat-count { position: absolute; top: 7px; right: 9px; color: #9db1bf; font-family: "Saira", sans-serif; font-size: 11px; font-variant-numeric: tabular-nums; }
@media (min-width: 1400px) { /* eight categories in one row (Chinese names are short) */
  :root:lang(zh) .cad-cat { gap: 9px; padding: 9px 10px; }
  :root:lang(zh) .cad-cat-icon { width: 32px; height: 32px; }
  :root:lang(zh) .cad-cat-icon svg { width: 22px; height: 22px; }
  :root:lang(zh) .cad-cat-copy span { font-size: 11.5px; }
}
/* other languages: category names run longer — four tiles per row, the name keeps clear of the count */
:root:not(:lang(zh)) .cad-cats-track { grid-template-columns: repeat(4, minmax(0, 1fr)); }
:root:not(:lang(zh)) .cad-cat-copy { padding-right: 34px; }
:root:not(:lang(zh)) .cad-cat-copy strong { overflow: hidden; text-overflow: ellipsis; }

/* ---------- workspace ---------- */
.cad-workspace { display: grid; grid-template-columns: 292px minmax(0, 1fr) 330px; grid-template-areas: "finder display panel"; height: clamp(580px, calc(100svh - 120px), 820px); background: #fff; border: 1px solid #d9e5ee; border-radius: var(--cad-radius); overflow: hidden; box-shadow: 0 12px 38px #244f6b0a, 0 2px 8px #244f6b05; }
.cad-finder { grid-area: finder; display: flex; flex-direction: column; min-width: 0; min-height: 0; border-right: 1px solid var(--cad-line); background: #fbfdfe; }
.cad-display { grid-area: display; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: #eaf3f9; }
.cad-panel { grid-area: panel; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; border-left: 1px solid var(--cad-line); padding: 16px 17px 18px; background: #fff; scrollbar-width: thin; scrollbar-color: #c6d8e5 transparent; }
.cad-panel > * { flex-shrink: 0; }

/* finder */
.cad-finder-head { padding: 14px 14px 10px; border-bottom: 1px solid var(--cad-line-2); }
.cad-families { display: flex; flex-wrap: wrap; gap: 6px; }
.cad-family { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 5px 10px; border: 1px solid #dfe8ef; border-radius: 999px; background: #fff; color: #5b788c; font-size: 12px; line-height: 1.35; text-align: left; transition: border-color .15s, background .15s, color .15s; }
.cad-family:hover { border-color: #a9c9de; color: var(--cad-blue); }
.cad-family[aria-pressed="true"] { border-color: var(--cad-blue); background: var(--cad-blue); color: #fff; }
.cad-family small { opacity: .72; font-family: "Saira", sans-serif; font-size: 11px; font-variant-numeric: tabular-nums; }
.cad-search { position: relative; margin: 11px 14px 0; }
.cad-search svg { position: absolute; top: 50%; left: 11px; width: 16px; height: 16px; color: #87a0b2; transform: translateY(-50%); pointer-events: none; }
.cad-search input { width: 100%; height: 38px; padding: 0 10px 0 33px; border: 1px solid #d8e4ec; border-radius: 8px; background: #fff; color: var(--cad-ink); font-size: 13px; }
.cad-search input::placeholder { color: #9fb2c0; font-size: 12px; }
.cad-search input:focus { border-color: #7fb2d4; outline: none; box-shadow: 0 0 0 3px #1673b11f; }
.cad-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin: 8px 14px 0; }
.cad-filters:empty { display: none; }
.cad-select { position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cad-select span { color: #8299aa; font-size: 11px; letter-spacing: .02em; }
.cad-select select { width: 100%; height: 34px; padding: 0 26px 0 9px; border: 1px solid #d8e4ec; border-radius: 7px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 10 5 5 5-5' fill='none' stroke='%237d97ab' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 6px center / 16px; color: var(--cad-ink-2); font-size: 12.5px; appearance: none; cursor: pointer; }
.cad-select select:focus { border-color: #7fb2d4; outline: none; }
.cad-count-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 34px; margin: 6px 14px 0; color: #7b93a5; font-size: 12px; }
.cad-count-line b { color: var(--cad-blue); font-weight: 600; }
.cad-list { flex: 1 1 auto; min-height: 120px; margin: 0 8px 10px; padding: 2px 6px 6px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #c3d6e3 transparent; }
.cad-list:focus-visible { outline-offset: -2px; }
.cad-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 8px; width: 100%; min-height: 44px; margin-top: 3px; padding: 6px 10px; border: 1px solid transparent; border-radius: 8px; text-align: left; transition: background .12s, border-color .12s; }
.cad-item:hover { background: #f1f7fb; }
.cad-item[aria-selected="true"] { border-color: #8ebcd9; background: #eaf4fb; }
.cad-item strong { overflow: hidden; color: var(--cad-ink-2); font-family: "Saira", "Montserrat", sans-serif; font-size: 13.5px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; letter-spacing: .01em; }
.cad-item span { grid-column: 1 / -1; overflow: hidden; color: #7f95a6; font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.cad-item em { grid-row: 1; grid-column: 2; color: #9bb0bf; font-style: normal; font-size: 11px; font-family: "Saira", sans-serif; }
.cad-item[aria-selected="true"] strong { color: var(--cad-blue-dark); }
.cad-list-more { width: 100%; margin-top: 8px; padding: 9px; border: 1px dashed #c9dbe7; border-radius: 8px; color: var(--cad-blue); font-size: 12px; }
.cad-list-empty { margin: 18px 6px; color: #8da3b2; font-size: 12px; line-height: 1.8; text-align: center; }

/* viewport */
.cad-viewport { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; isolation: isolate; background: radial-gradient(ellipse at 52% 40%, #fff 0%, #f6fafd 42%, #dfedf7 100%); }
.cad-viewport::before { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .55; pointer-events: none; background-image: linear-gradient(#c5d7e529 1px, transparent 1px), linear-gradient(90deg, #c5d7e529 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(to bottom, #0008, #0002 30%, #0000 65%); }
#cad-stage { position: absolute; inset: 0; outline: none; }
#cad-stage canvas { display: block; width: 100%; height: 100%; outline: none; touch-action: none; }
.cad-stage-heading { position: absolute; z-index: 2; inset: 18px 18px auto 22px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; pointer-events: none; }
.cad-stage-heading button { pointer-events: auto; }
.cad-stage-caption { display: flex; flex-direction: column; gap: 4px; max-width: min(66%, 520px); }
.cad-stage-kicker { color: #7d97a9; font-family: "Saira", sans-serif; font-size: 12px; letter-spacing: .14em; font-weight: 500; }
.cad-stage-caption h2 { margin: 0; font-family: "Saira", "Montserrat", var(--cad-cjk), sans-serif; font-size: 25px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; color: var(--cad-ink); }
.cad-stage-caption p { margin: 0; color: #6f889a; font-size: 12.5px; line-height: 1.6; }
.cad-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.cad-chips span { padding: 3px 8px; border: 1px solid #cfe0eb; border-radius: 999px; background: #ffffffc4; color: #4d7591; font-size: 11.5px; line-height: 1.4; white-space: nowrap; backdrop-filter: blur(4px); }
.cad-stage-tools { display: flex; gap: 6px; flex-shrink: 0; }
.cad-icon-button { width: 38px; height: 38px; display: grid; place-items: center; background: #ffffffd0; color: #5c7e96; border: 1px solid #cfdee9; border-radius: 8px; transition: color .15s, background .15s, border-color .15s; }
.cad-icon-button svg { width: 17px; height: 17px; }
.cad-icon-button:hover { background: #fff; border-color: #93b8d2; color: var(--cad-blue); }

.cad-toolbar { position: absolute; z-index: 3; left: 50%; bottom: 46px; display: flex; align-items: center; gap: 4px; padding: 5px; transform: translateX(-50%); border: 1px solid #d3e2ec; border-radius: 12px; background: #ffffffe6; box-shadow: 0 8px 26px #1d4b6a14; backdrop-filter: blur(8px); max-width: calc(100% - 24px); }
.cad-tool-group { display: flex; gap: 2px; }
.cad-tool-sep { width: 1px; height: 26px; margin: 0 3px; background: #dbe6ee; }
.cad-toolbar button { display: inline-flex; align-items: center; gap: 5px; height: 36px; padding: 0 9px; border-radius: 8px; color: #5f7f95; font-size: 12px; white-space: nowrap; transition: background .12s, color .12s; }
.cad-toolbar button svg { width: 17px; height: 17px; stroke-width: 1.45; }
.cad-toolbar button:hover { background: #eef5fa; color: var(--cad-blue); }
.cad-toolbar button[aria-pressed="true"] { background: #e3f0f9; color: var(--cad-blue-dark); box-shadow: inset 0 0 0 1px #a9cde5; }
.cad-icon-detail { opacity: .4; }
.cad-section-control { position: absolute; z-index: 3; right: 16px; bottom: 100px; display: flex; flex-direction: column; gap: 4px; width: 190px; padding: 9px 12px 7px; border: 1px solid #d3e2ec; border-radius: 10px; background: #ffffffe8; box-shadow: 0 8px 22px #1d4b6a12; }
.cad-section-control label { color: #5f7f95; font-size: 12px; }
.cad-section-control input, .cad-explode-field input { width: 100%; height: 26px; margin: 0; cursor: pointer; appearance: none; background: transparent; accent-color: var(--cad-blue); }
.cad-stage-footer { position: absolute; z-index: 2; inset: auto 22px 14px; display: flex; align-items: center; justify-content: space-between; gap: 18px; pointer-events: none; }
.cad-stage-help { display: flex; align-items: center; gap: 8px; margin: 0; color: #648298; font-size: 12px; }
.cad-stage-help > svg { width: 17px; height: 17px; stroke-width: 1.3; opacity: .85; }
.cad-stage-help span span { padding-inline: 6px; opacity: .7; }
.cad-help-mobile { display: none; }
.cad-stage-mark { color: #8ea9bb; font-family: "Saira", sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .1em; white-space: nowrap; }
.cad-stage-mark b { margin-left: 6px; padding-left: 8px; border-left: 1px solid #bed0de; font-weight: 400; }
.cad-display-status { flex: 0 0 auto; min-height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 20px; background: #f6fafe; border-top: 1px solid #dce8f1; color: #668396; font-size: 12px; line-height: 18px; }
.cad-status-item { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.cad-status-dot { height: 6px; width: 6px; border-radius: 50%; background: #5f9abd; flex-shrink: 0; }
.cad-display-status-note { color: #8da3b2; font-size: 12px; text-align: right; }

.cad-dim-labels { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
.cad-dim-label { position: absolute; left: 0; top: 0; padding: 2px 6px; border-radius: 5px; background: #ffffffdb; color: #0f5f97; font-family: "Saira", "Montserrat", sans-serif; font-size: 12px; font-weight: 600; white-space: nowrap; transform: translate(-50%, -50%); box-shadow: 0 0 0 1px #9cc4df; font-variant-numeric: tabular-nums; }

.cad-overlay { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 11px; padding: 32px; background: #f1f7fbe8; color: #718b9e; text-align: center; }
.cad-loading { background: #f1f7fba6; backdrop-filter: blur(2px); }
.cad-overlay strong { color: #3a617b; font-size: 16px; font-weight: 550; }
.cad-overlay > span:not(.cad-loading-ring) { font-size: 12px; }
.cad-loading-ring { width: 36px; height: 36px; border: 2px solid #c9dfed; border-top-color: #3684b7; border-radius: 50%; margin-bottom: 9px; animation: cad-spin 1.2s linear infinite; }
.cad-error > svg { width: 37px; height: 37px; margin-bottom: 8px; color: #6d94ae; stroke-width: 1.2; }
.cad-error p { max-width: 340px; margin: 0 0 6px; font-size: 13px; line-height: 1.8; }
@keyframes cad-spin { to { transform: rotate(360deg); } }

/* panel */
.cad-panel-section { margin: 0; }
.cad-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.cad-section-heading h2 { margin: 0; color: #45647a; font-size: 14px; font-weight: 600; line-height: 19px; }
.cad-section-index { font-family: "Saira", sans-serif; color: #94a8b6; font-size: 12px; letter-spacing: .09em; }
.cad-options { display: flex; flex-direction: column; gap: 8px; }
.cad-option { display: flex; flex-direction: column; gap: 4px; }
.cad-option > span { color: #6f879a; font-size: 12px; }
.cad-seg { display: flex; flex-wrap: wrap; gap: 5px; }
.cad-seg button { min-height: 32px; padding: 5px 10px; border: 1px solid #dce6ed; border-radius: 7px; background: #fbfdfe; color: #5d7c91; font-size: 12px; line-height: 1.4; }
.cad-seg button:hover { border-color: #a9c9de; color: var(--cad-blue); }
.cad-seg button[aria-pressed="true"] { border-color: #78afd2; background: #eaf4fb; color: var(--cad-blue-dark); }
.cad-specs { display: grid; grid-template-columns: auto minmax(0, 1fr); margin: 0; border: 1px solid var(--cad-line-2); border-radius: 9px; overflow: hidden; font-size: 12.5px; }
.cad-specs dt, .cad-specs dd { margin: 0; padding: 7px 10px; border-top: 1px solid var(--cad-line-2); line-height: 1.45; }
.cad-specs dt { color: #7a91a2; white-space: nowrap; background: #f8fbfd; }
.cad-specs dd { color: var(--cad-ink-2); font-family: "Montserrat", var(--cad-cjk), sans-serif; font-size: 12px; font-variant-numeric: tabular-nums; text-align: right; overflow-wrap: anywhere; }
.cad-specs dt:first-of-type, .cad-specs dd:first-of-type { border-top: 0; }
/* other languages: spec labels run longer — the label column takes at most ~55 % and wraps, the values keep room */
:root:not(:lang(zh)) .cad-specs { grid-template-columns: fit-content(55%) minmax(0, 1fr); }
:root:not(:lang(zh)) .cad-specs dt { white-space: normal; -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
:root:not(:lang(zh)) .cad-specs dd { overflow-wrap: break-word; }
.cad-explode-field { position: relative; min-width: 0; padding: 0; border: 0; }
.cad-explode-field legend { float: left; padding: 0; color: #45647a; font-size: 14px; font-weight: 600; line-height: 20px; }
.cad-explode-field output { float: right; color: #3e7da7; font-family: "Saira", sans-serif; font-size: 14px; font-weight: 500; line-height: 20px; font-variant-numeric: tabular-nums; }
.cad-explode-field input { display: block; clear: both; margin-top: 4px; }
.cad-explode-field.is-disabled { opacity: .48; }
.cad-range-labels { display: flex; justify-content: space-between; gap: 16px; color: #879dab; font-size: 12px; line-height: 17px; }
input[type="range"]::-webkit-slider-runnable-track { height: 3px; border-radius: 5px; background: #dce9f2; }
input[type="range"]::-moz-range-track { height: 3px; border-radius: 5px; background: #dce9f2; }
input[type="range"]::-webkit-slider-thumb { width: 18px; height: 18px; margin-top: -7.5px; appearance: none; border: 3px solid #fff; border-radius: 50%; background: var(--cad-blue); box-shadow: 0 0 0 1px #9cbfd7, 0 2px 4px #51789733; }
input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; border: 3px solid #fff; border-radius: 50%; background: var(--cad-blue); box-shadow: 0 0 0 1px #9cbfd7, 0 2px 4px #51789733; }
.cad-parts-section { display: flex; flex-direction: column; padding-top: 12px; border-top: 1px solid var(--cad-line-2); }
.cad-text-button { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 1px; color: #6e8a9e; font-size: 12px; }
.cad-text-button svg { height: 15px; width: 15px; stroke-width: 1.4; }
.cad-text-button:hover { color: var(--cad-blue); }
.cad-selection-line { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 5px; background: #f6f9fb; color: #6f889a; font-size: 12px; line-height: 18px; }
.cad-selection-line svg { width: 15px; height: 15px; color: #8fa7b8; stroke-width: 1.3; }
#cad-selection { min-width: 0; overflow-wrap: anywhere; }
.cad-parts { display: flex; flex-direction: column; gap: 5px; max-height: 190px; margin-top: 6px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.cad-parts:empty { display: none; }
.cad-part-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px; min-width: 0; }
.cad-parts button { min-height: 38px; padding: 7px 9px; border: 1px solid #e2eaf0; border-radius: 6px; background: #fff; color: #648196; font-size: 12px; line-height: 1.45; }
.cad-parts .cad-part { display: flex; align-items: center; gap: 8px; min-width: 0; text-align: left; }
.cad-part > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.cad-part-number { flex-shrink: 0; min-width: 19px; color: #93a9b8; font-family: "Saira", sans-serif; font-size: 12px; font-variant-numeric: tabular-nums; }
.cad-parts .cad-part-visibility { min-width: 48px; padding: 0 8px; white-space: nowrap; }
.cad-parts button:hover { border-color: #93b9d2; color: var(--cad-blue); }
.cad-parts button[aria-pressed="true"] { color: var(--cad-blue); background: #edf6fc; border-color: #83b5d5; }
.cad-parts .is-hidden { opacity: .5; }
.cad-actions { display: flex; flex-direction: column; gap: 8px; margin-top: auto; padding-top: 4px; }
.cad-actions-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cad-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 10px 15px; border: 1px solid transparent; border-radius: 8px; font-size: 13px; font-weight: 500; line-height: 1.4; white-space: nowrap; transition: background .15s, color .15s, border-color .15s; }
.cad-button svg { width: 16px; height: 16px; }
.cad-button-primary { color: #fff; background: var(--cad-blue); border-color: var(--cad-blue); }
.cad-button-primary:hover { background: var(--cad-blue-dark); border-color: var(--cad-blue-dark); }
.cad-button-secondary { color: #557489; background: #fff; border-color: #dce6ed; }
.cad-button-secondary:hover { background: #f4f9fc; color: var(--cad-blue); border-color: #bad3e4; }

/* bottom note */
.cad-bottom-note { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 26px; align-items: center; padding: 22px 3px; }
.cad-origin { display: flex; align-items: flex-start; gap: 10px; max-width: 900px; }
.cad-note-icon { margin-top: 1px; color: #7d9bb0; }
.cad-note-icon svg { width: 18px; height: 18px; stroke-width: 1.4; }
.cad-bottom-note h2 { margin: 0 0 5px; color: #5e7a8e; font-size: 13px; font-weight: 600; }
.cad-bottom-note p { margin: 0; color: #7d95a6; font-size: 12px; line-height: 1.85; }
.cad-cad-request { display: flex; align-items: center; gap: 18px; border-left: 1px solid #dce6ed; padding-left: 24px; }
.cad-noscript { padding: 16px; border: 1px solid #d1e3f0; border-radius: 8px; background: #fff; color: #5b798e; font-size: 13px; line-height: 1.8; }
.cad-noscript a { text-decoration: underline; color: var(--cad-blue); }
.cad-footer { width: min(1560px, calc(100% - 64px)); margin: 7px auto 0; padding: 17px 0 23px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #e1eaf1; color: #91a7b6; font-size: 12px; font-family: "Saira", var(--cad-cjk), sans-serif; letter-spacing: .03em; }
.cad-footer-slash { display: inline-block; padding-inline: 9px; color: #c0ced8; }
.cad-footer a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; }
.cad-footer a:hover { color: var(--cad-blue); }
.cad-footer a svg { width: 14px; height: 14px; }

/* dialog & toast */
.cad-dialog { width: min(520px, calc(100% - 32px)); padding: 0; border: 1px solid #d3e2ec; border-radius: 14px; background: #fff; color: var(--cad-ink); box-shadow: 0 30px 80px #0d2a3f40; }
.cad-dialog::backdrop { background: #0f2a3d59; backdrop-filter: blur(2px); }
.cad-dialog-inner { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px 20px; }
.cad-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cad-dialog-head h2 { margin: 0; font-size: 17px; font-weight: 600; }
.cad-dialog-lead { margin: 0; color: var(--cad-muted); font-size: 13px; line-height: 1.7; }
.cad-rfq-summary { max-height: 240px; margin: 0; padding: 12px 14px; overflow: auto; border: 1px solid var(--cad-line); border-radius: 9px; background: #f7fbfe; color: var(--cad-ink-2); font-family: "JetBrains Mono", "Saira", monospace; font-size: 12px; line-height: 1.75; white-space: pre-wrap; }
.cad-dialog-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cad-toast { position: fixed; z-index: 90; left: 50%; bottom: 30px; padding: 10px 16px; transform: translateX(-50%); border-radius: 9px; background: #163449eb; color: #fff; font-size: 13px; box-shadow: 0 10px 30px #0d2a3f40; }

/* 2D drawings (cad-drawing-view.js): mode switch, drawing stage, drawing toolbar */
.cad-mode { display: flex; gap: 2px; height: 38px; padding: 3px; border: 1px solid #cfdee9; border-radius: 9px; background: #ffffffd9; backdrop-filter: blur(4px); }
.cad-mode button { display: inline-flex; align-items: center; gap: 5px; padding: 0 10px; border-radius: 6px; color: #5c7e96; font-size: 12.5px; white-space: nowrap; transition: background .15s, color .15s; }
.cad-mode button b { font-family: "Saira", "Montserrat", sans-serif; font-weight: 600; letter-spacing: .02em; }
.cad-mode button svg { width: 16px; height: 16px; stroke-width: 1.45; }
.cad-mode button:hover { color: var(--cad-blue); background: #f0f7fc; }
.cad-mode button[aria-pressed="true"] { background: var(--cad-blue); color: #fff; box-shadow: 0 2px 6px #1673b133; }
.cad-mode button[aria-pressed="true"] .cad-icon-detail { opacity: .75; }
.cad-drawing { position: absolute; inset: 0; z-index: 1; overflow: hidden; background: #e9f0f5; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.cad-drawing.is-zoomed { touch-action: none; }
.cad-drawing:active { cursor: grabbing; }
.cad-sheet-pan { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.cad-sheet-pan svg { display: block; max-width: none; background: #fff; border-radius: 2px; box-shadow: 0 1px 2px #1d4b6a24, 0 12px 32px #1d4b6a1f; fill: #16232e; stroke: none; stroke-width: 1; stroke-linecap: butt; stroke-linejoin: miter; } /* not the viewer's icon defaults */
.cad-drawing-msg { position: absolute; left: 24px; right: 24px; top: 46%; margin: 0; color: #5f7f95; font-size: 13px; line-height: 1.7; text-align: center; }
.cad-viewport[data-mode="2d"] :is(#cad-stage, .cad-toolbar:not(.cad-toolbar-2d), #cad-section-control, #cad-dim-labels, #cad-loading, #cad-error) { display: none !important; }
.cad-viewport[data-mode="2d"] :is(.cad-stage-caption p, .cad-chips) { display: none; }
.cad-viewport[data-mode="2d"]::after { content: ""; position: absolute; z-index: 4; left: 50%; top: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px; border: 2px solid #c9dfed; border-top-color: #3684b7; border-radius: 50%; animation: cad-spin 1.2s linear infinite; pointer-events: none; opacity: 0; transition: opacity .15s; }
.cad-viewport[data-mode="2d"][data-drawing="busy"]::after { opacity: 1; }
.cad-help-2d { display: none; }
.cad-viewport[data-mode="2d"] :is(.cad-help-desktop, .cad-help-mobile) { display: none !important; }
.cad-viewport[data-mode="2d"] .cad-help-2d { display: inline; }
.cad-toolbar-2d[hidden] { display: none; }

/* fullscreen */
.cad-viewport.is-expanded { position: fixed; inset: 0; z-index: 1000; width: 100vw; height: 100dvh; min-height: 0; }
.cad-viewport:fullscreen, .cad-viewport:-webkit-full-screen { width: 100vw; height: 100dvh; min-height: 0; }

/* ---------- responsive ---------- */
@media (max-width: 1399px) {
  .cad-workspace { grid-template-columns: 268px minmax(0, 1fr) 310px; }
  .cad-cats-track { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cad-toolbar button span { display: none; }
  .cad-toolbar button { padding: 0 8px; }
}
/* the exploded-view button keeps its label wherever the toolbar has room */
@media (min-width: 560px) and (max-width: 1399px) {
  .cad-toolbar #cad-explode-btn span { display: inline; }
}
/* other languages: the toolbar labels are longer than the two-character Chinese ones — icons only (titles
   still name each tool) until the viewer is wide enough, the exploded view keeps its label */
@media (max-width: 1699px) {
  :root:not(:lang(zh)) .cad-toolbar button span { display: none; }
  :root:not(:lang(zh)) .cad-toolbar button { padding: 0 8px; }
}
@media (min-width: 560px) and (max-width: 1699px) {
  :root:not(:lang(zh)) .cad-toolbar #cad-explode-btn span { display: inline; }
}
@media (max-width: 1199px) {
  .cad-main, .cad-footer { width: calc(100% - 48px); }
  .cad-workspace { grid-template-columns: minmax(0, 1fr) 330px; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "display finder" "display panel"; height: clamp(720px, calc(100svh - 120px), 900px); }
  .cad-finder { border-right: 0; border-left: 1px solid var(--cad-line); border-bottom: 1px solid var(--cad-line); }
  .cad-stats li { min-width: 96px; padding: 9px 14px; }
  .cad-stage-mark { display: none; }
  .cad-bottom-note { grid-template-columns: 1fr; gap: 18px; }
  .cad-cad-request { border-left: 0; padding-left: 28px; justify-content: space-between; }
}
@media (max-width: 899px) {
  .cad-main, .cad-footer { width: calc(100% - 40px); }
  .cad-page-heading { flex-direction: column; align-items: stretch; gap: 14px; }
  .cad-stats li { flex: 1 1 0; min-width: 0; }
  .cad-cats-track { display: flex; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 4px; scrollbar-width: none; }
  .cad-cat { flex: 0 0 auto; min-width: 158px; scroll-snap-align: start; }
  .cad-workspace { display: flex; flex-direction: column; height: auto; }
  .cad-display { order: 1; }
  .cad-finder { order: 2; border-left: 0; border-top: 1px solid var(--cad-line); max-height: 460px; }
  .cad-panel { order: 3; overflow: visible; border-left: 0; border-top: 1px solid var(--cad-line); padding: 20px; }
  .cad-viewport { flex: 0 0 auto; height: 470px; }
  .cad-actions { margin-top: 4px; }
}
@media (max-width: 599px) {
  .cad-main, .cad-footer { width: calc(100% - 32px); }
  .cad-page-heading h1 { font-size: clamp(26px, 7vw, 32px); }
  .cad-page-intro { font-size: 12.5px; }
  .cad-stats strong { font-size: 18px; }
  .cad-stats li { padding: 8px 10px; }
  .cad-stats span { font-size: 11px; }
  .cad-cat { min-width: 140px; min-height: 52px; padding: 7px 10px; }
  .cad-cat-icon { width: 32px; height: 32px; }
  .cad-workspace { border-radius: 11px; }
  .cad-viewport { height: 420px; }
  .cad-stage-heading { inset: 12px 12px auto 14px; }
  .cad-stage-caption { max-width: calc(100% - 92px); }
  .cad-stage-caption h2 { font-size: 20px; }
  .cad-stage-caption p { display: none; }
  .cad-chips span:nth-child(n + 4) { display: none; }
  .cad-stage-tools { flex-wrap: wrap; justify-content: flex-end; width: 80px; }
  .cad-stage-tools:has(.cad-mode) { width: 110px; }
  .cad-stage-caption:has(~ .cad-stage-tools .cad-mode) { max-width: calc(100% - 124px); }
  .cad-mode { flex: 1 0 100%; height: 36px; }
  .cad-mode button { flex: 1 1 0; justify-content: center; padding: 0 6px; }
  .cad-mode-word { display: none; }
  .cad-icon-button { width: 36px; height: 36px; }
  .cad-toolbar { bottom: 40px; gap: 2px; padding: 4px; overflow-x: auto; scrollbar-width: none; justify-content: flex-start; }
  .cad-toolbar button { height: 38px; padding: 0 8px; }
  .cad-tool-sep { margin: 0 1px; }
  .cad-section-control { right: 10px; left: 10px; bottom: 90px; width: auto; }
  .cad-stage-footer { inset: auto 14px 12px; }
  .cad-help-desktop { display: none; }
  .cad-help-mobile { display: inline; }
  .cad-stage-mark { display: none; }
  .cad-display-status { padding: 8px 14px; }
  .cad-display-status-note { display: none; }
  .cad-finder-head { padding: 12px; }
  .cad-search, .cad-filters, .cad-count-line { margin-inline: 12px; }
  .cad-panel { padding: 18px 16px 20px; }
  .cad-bottom-note { padding: 20px 0 8px; }
  .cad-cad-request { flex-direction: column; align-items: stretch; padding: 17px 0 0; gap: 12px; border-top: 1px solid #e0e9f0; }
  .cad-footer { margin-top: 19px; padding-block: 13px 19px; }
  .cad-dialog-actions { grid-template-columns: 1fr; }
}
/* ---------- embedded in other pages: ?embed=1 (product pages) · ?embed=hero (homepage stage) ---------- */
.cad-open-full { display: none; align-items: center; gap: 6px; min-height: 32px; padding: 0 11px; border: 1px solid #cfdee9; border-radius: 999px; background: #ffffffd9; color: var(--cad-blue); font-size: 12px; font-weight: 500; white-space: nowrap; pointer-events: auto; transition: background .15s, border-color .15s; }
.cad-open-full svg { width: 14px; height: 14px; stroke-width: 1.6; }
.cad-open-full:hover { background: #fff; border-color: #93b8d2; }
html.cad-embed, html.cad-embed body { height: 100%; overflow: hidden; }
html.cad-embed { background: #eaf3f9; }
html.cad-embed body > :not(main):not(.cad-toast) { display: none !important; }
html.cad-embed .cad-main { width: 100%; height: 100%; margin: 0; }
html.cad-embed .cad-main > :not(.cad-workspace) { display: none !important; }
html.cad-embed .cad-workspace { display: block; height: 100%; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
html.cad-embed .cad-finder, html.cad-embed .cad-panel, html.cad-embed .cad-display-status { display: none !important; }
html.cad-embed .cad-display { height: 100%; }
html.cad-embed .cad-viewport { height: 100% !important; flex: 1 1 auto; }
html.cad-embed #cad-stage canvas { touch-action: pan-y; }
html.cad-embed--panel .cad-stage-mark { display: none; }
html.cad-embed--panel .cad-viewport:fullscreen .cad-open-full, html.cad-embed--panel .cad-viewport.is-expanded .cad-open-full { display: inline-flex; }
html.cad-embed--panel .cad-toast { bottom: 64px; }
html.cad-embed--hero, html.cad-embed--hero body, html.cad-embed--hero .cad-display, html.cad-embed--hero .cad-viewport { background: transparent !important; }
html.cad-embed--hero .cad-viewport::before { display: none; }
html.cad-embed--hero .cad-viewport > :not(#cad-stage):not(#cad-loading):not(#cad-error) { display: none !important; }
html.cad-embed--hero .cad-mode { display: none !important; }
html.cad-embed--hero .cad-loading { background: transparent; backdrop-filter: none; }
html.cad-embed--hero .cad-loading > :not(.cad-loading-ring) { display: none; }
html.cad-embed--hero .cad-error { background: #ffffffb8; }
html.cad-embed--hero .cad-toast { display: none !important; }
html.cad-embed--hero #cad-stage canvas { cursor: grab; }
html.cad-embed--hero #cad-stage canvas:active { cursor: grabbing; }
@media (max-width: 599px) {
  html.cad-embed--panel .cad-stage-footer { justify-content: flex-end; }
}
@media (max-width: 380px) {
  html.cad-embed--panel .cad-open-full { padding: 0 9px; font-size: 0; gap: 0; }
  html.cad-embed--panel .cad-open-full svg { width: 16px; height: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
  .cad-loading-ring { animation: none; }
}
@media print {
  [data-wf-role="utility"], #site-header, #mobile-menu, .cad-cats, .cad-finder, .cad-toolbar, .cad-actions, .cad-footer, .wf-wa-float, .wf-dock, .cad-open-full { display: none !important; }
}

/* ---------- next to the site navigation (site-chrome-v1) ----------
   The site styles headings, paragraphs and form fields through body[data-wf-theme="precision"] …; the viewer's
   own fields and headings win here by matching one step more specifically (body …), loaded after the site CSS. */
body .cad-search input { border: 1px solid #d8e4ec; background: #fff; box-shadow: none; transition: none; }
body .cad-search input:focus { border-color: #7fb2d4; background: #fff; box-shadow: 0 0 0 3px #1673b11f; }
body .cad-select select { border: 1px solid #d8e4ec; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 10 5 5 5-5' fill='none' stroke='%237d97ab' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 6px center / 16px; box-shadow: none; transition: none; }
body .cad-select select:focus { border-color: #7fb2d4; box-shadow: none; }
body :is(.cad-section-control, .cad-explode-field) input { border: 0; background: transparent; box-shadow: none; }
body :is(.cad-main, .cad-footer, .cad-dialog) :is(h1, h2, h3) { color: inherit; }
body .cad-stage-caption h2 { color: var(--cad-ink); }
body .cad-section-heading h2 { color: #45647a; }
body .cad-bottom-note h2 { color: #5e7a8e; }
body :is(.cad-main, .cad-footer, .cad-dialog) :is(h1, h2, h3, p) { text-wrap: wrap; }
/* the site paints every <footer> dark (with !important): this one is the viewer's light page foot */
body[data-wf-page="cad-viewer"] footer.cad-footer { background: none !important; border-top: 1px solid #e1eaf1; }
body .cad-footer a:hover { color: var(--cad-blue); }
@media (max-width: 599px) {
  /* the design system sizes every page title on phones (≤ 479px) */
  body[data-wf-page="cad-viewer"] .cad-page-heading h1 { font-size: clamp(26px, 7vw, 32px); }
}