/* design-systems/hud/tokens.css
     * Structured token bindings for HUD.
     * HUD interface language with dark transparent panels, cyan telemetry, and compact status readouts.
     */

    :root {
      --bg: #090b12;
      --surface: #121722;
      --surface-warm: #1b2233;
      --fg: #f8fafc;
      --fg-2: #cbd5e1;
      --muted: #94a3b8;
      --meta: #60a5fa;
      --border: #2a3447;
      --border-soft: #1d2636;
      --accent: #00ff41;
      --accent-on: #06101d;
      --accent-hover: color-mix(in oklab, #00ff41, black 8%);
      --accent-active: color-mix(in oklab, #00ff41, black 14%);
      --green: #00ff41;
      --line: var(--border);
      --success: #00ff41;
      --warn: #fbbf24;
      --danger: #fb7185;
      --font-display: "IBM Plex Mono", ui-monospace, monospace;
      --font-body: "IBM Plex Mono", ui-monospace, monospace;
      --font-mono: "IBM Plex Mono", ui-monospace, monospace;
      --text-xs: 11px;
      --text-sm: 12px;
      --text-base: 14px;
      --text-lg: 16px;
      --text-xl: 20px;
      --text-2xl: 28px;
      --text-3xl: 40px;
      --text-4xl: 56px;
      --leading-body: 1.45;
      --leading-tight: 1.06;
      --tracking-display: -0.025em;
      --space-1: 4px;
      --space-2: 8px;
      --space-3: 12px;
      --space-4: 16px;
      --space-5: 20px;
      --space-6: 24px;
      --space-8: 32px;
      --space-12: 48px;
      --section-y-desktop: 80px;
      --section-y-tablet: 60px;
      --section-y-phone: 42px;
      --radius-sm: 10px;
      --radius-md: 16px;
      --radius-lg: 24px;
      --radius-pill: 9999px;
      --elev-flat: none;
      --elev-ring: 0 0 0 1px var(--border);
      --elev-raised: 0 24px 72px rgba(0, 0, 0, 0.42);
      --focus-ring: 0 0 0 4px rgba(0, 255, 65, 0.28);
      --motion-fast: 100ms;
      --motion-base: 180ms;
      --ease-standard: cubic-bezier(0.2, 0, 0, 1);
      --container-max: 1280px;
      --container-gutter-desktop: 36px;
      --container-gutter-tablet: 24px;
      --container-gutter-phone: 16px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body { margin: 0; min-width: 320px; background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-body); overflow-x: hidden; }
    body::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; background-image: linear-gradient(to right, color-mix(in oklab, var(--border), transparent 48%) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in oklab, var(--border), transparent 48%) 1px, transparent 1px); background-size: 48px 48px; opacity: 0.36; }
    a { color: inherit; text-decoration: none; }
    button, input, select, textarea { font: inherit; }
    button { cursor: pointer; }
    img { display: block; max-width: 100%; }
    .container { width: min(100% - var(--container-gutter-desktop) * 2, var(--container-max)); margin: 0 auto; }
    .topbar { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid var(--border); background: color-mix(in oklab, var(--bg), transparent 8%); backdrop-filter: blur(16px); }
    .nav { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); }
    .brand { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
    .brand-logo { height: 36px; width: auto; object-fit: contain; }
    .brand-mark { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--accent); border-radius: 8px; background: var(--surface); color: var(--accent); font-weight: 800; font-size: 13px; }
    .brand strong, .brand span { display: block; }
    .brand strong { font-size: 15px; line-height: 1.1; letter-spacing: 0; }
    .brand span { margin-top: 2px; color: var(--muted); font-size: 12px; }
    .nav-links, .nav-actions, .hero-actions, .catalog-status, .compare-bar, .footer-row, .pager, .inline-actions { display: flex; align-items: center; gap: var(--space-3); }
    .nav-links { gap: var(--space-5); color: var(--fg-2); font-size: var(--text-xs); text-transform: uppercase; }
    .nav-links a { padding-block: var(--space-2); border-bottom: 1px solid transparent; }
    .nav-links a:hover, .nav-links a:focus-visible { border-color: var(--accent); outline: none; }
    .btn, .lang-trigger, .lang-option { min-height: 42px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0 var(--space-4); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); background: var(--surface); color: var(--fg); transition: transform var(--motion-base) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), background var(--motion-fast) var(--ease-standard); }
    .btn:hover, .btn:focus-visible, .lang-trigger:hover, .lang-trigger:focus-visible, .lang-option:hover, .lang-option:focus-visible { border-color: var(--accent); outline: none; transform: translateY(-1px); }
    .btn-primary, .lang-option.active { border-color: var(--accent); background: var(--accent); color: var(--accent-on); font-weight: 700; }
    .btn-primary:hover, .btn-primary:focus-visible { background: var(--accent-hover); }
    .btn-danger { border-color: var(--danger); color: var(--danger); }
    .btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
    .language-menu { position: relative; }
    .lang-trigger { min-height: 34px; padding-inline: var(--space-3); font-size: var(--text-xs); text-transform: uppercase; }
    .lang-trigger::after { content: "▾"; color: var(--meta); font-size: var(--text-xs); }
    .lang-popover { position: absolute; top: calc(100% + var(--space-2)); right: 0; min-width: 156px; display: none; gap: var(--space-2); padding: var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--elev-raised); z-index: 80; }
    .language-menu.open .lang-popover { display: grid; animation: menu-in var(--motion-base) var(--ease-standard) both; }
    .lang-option { width: 100%; min-height: 36px; justify-content: flex-start; padding-inline: var(--space-3); font-size: var(--text-xs); text-transform: uppercase; }
    section { padding-block: var(--section-y-desktop); }
    h1, h2, h3, p { margin: 0; }
    h1, h2, h3 { font-family: var(--font-display); line-height: var(--leading-tight); letter-spacing: 0; text-wrap: balance; }
    h1 { max-width: 980px; margin-top: var(--space-4); font-size: clamp(38px, 5.2vw, var(--text-4xl)); }
    h2 { font-size: clamp(28px, 3.6vw, var(--text-3xl)); }
    h3 { font-size: var(--text-xl); }
    p { text-wrap: pretty; }
    .lead, .section-head p, .product-copy, .index-list p, .form-note { color: var(--fg-2); text-transform: none; font-size: 16px; }
    .lead { max-width: 780px; margin-top: var(--space-5); font-size: var(--text-lg); }
    .eyebrow, .kicker, .field-label, .metric-label { color: var(--meta); font-size: 11px; font-weight: 700; text-transform: uppercase; }
    .eyebrow { width: fit-content; border: 1px solid var(--border); border-radius: var(--radius-pill); padding: var(--space-2) var(--space-3); background: var(--surface); }
    .catalog-library { padding-top: 0; }
    .catalog-filters { border: 1px solid var(--border); border-top: 0; background: color-mix(in oklab, var(--surface), transparent 4%); }
    .catalog-filters .category-tabs { padding: var(--space-3) var(--space-4); }
    .catalog-filters .resolution-tabs { border-bottom: 0; background: var(--bg); }
    .catalog-heading { min-height: 132px; display: flex; align-items: end; justify-content: space-between; gap: var(--space-5); padding-block: var(--space-8) var(--space-5); }
    .catalog-heading h1 { margin: 0; }
    .catalog-heading span { color: var(--muted); font-size: var(--text-sm); }
    .hero-actions { margin-top: var(--space-6); flex-wrap: wrap; }
    .hero-metrics { margin-top: var(--space-8); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
    .metric, .panel, .product-card, .index-card { border: 1px solid var(--border); background: var(--surface); }
    .metric { min-height: 104px; padding: var(--space-4); clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%); }
    .metric-value { display: block; margin-top: var(--space-4); color: var(--success); font-size: var(--text-2xl); font-weight: 700; line-height: 1; }
    .catalog-panel { border: 1px solid var(--border); background: var(--surface); }
    .catalog-toolbar { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); border-bottom: 1px solid var(--border); flex-wrap: wrap; }
    .field { display: grid; gap: var(--space-2); }
    input, select, textarea { width: 100%; min-height: 44px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--fg); padding: 0 var(--space-3); outline: none; text-transform: uppercase; }
    textarea { min-height: 96px; padding-block: var(--space-3); resize: vertical; text-transform: none; }
    input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: var(--focus-ring); }
    .category-tabs { display: flex; gap: var(--space-2); padding: var(--space-4); border-bottom: 1px solid var(--border); overflow-x: auto; }
    .tab { min-height: 38px; border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 0 var(--space-4); background: var(--bg); color: var(--fg-2); white-space: nowrap; transition: border-color var(--motion-fast) var(--ease-standard), background var(--motion-fast) var(--ease-standard); }
    .tab.active { border-color: var(--accent); background: color-mix(in oklab, var(--accent), transparent 84%); color: var(--accent); font-weight: 700; }
    .catalog-status { justify-content: space-between; flex-wrap: wrap; padding: var(--space-4); border-bottom: 1px solid var(--border); color: var(--muted); font-size: var(--text-sm); }
    .compare-bar { flex-wrap: wrap; }
    .chip, .status-chip { min-height: 28px; display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 0 var(--space-3); color: var(--fg-2); font-size: var(--text-xs); text-transform: uppercase; white-space: nowrap; }
    .status-chip.ready { border-color: color-mix(in oklab, var(--success), transparent 30%); color: var(--success); }
    .status-chip.warn { border-color: color-mix(in oklab, var(--warn), transparent 30%); color: var(--warn); }
    .product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: transparent; }
    .product-card { min-width: 0; min-height: 360px; border: 0; animation: hud-rise 360ms var(--ease-standard) both; }
    .product-card-button { width: 100%; height: 100%; min-height: 360px; display: grid; grid-template-rows: 1fr auto; padding: 0; border: 0; background: var(--surface); color: var(--fg); text-align: left; }
    .product-card-button:focus-visible { position: relative; z-index: 1; outline: 2px solid var(--accent); outline-offset: -2px; }
    .product-media { position: relative; min-height: 280px; display: grid; place-items: center; overflow: hidden; background: var(--surface-warm); }
    .product-media img, .product-media img.core-product-image { width: 100%; height: 100%; object-fit: contain; opacity: 1; filter: none; background: var(--surface-warm); transition: transform var(--motion-base) var(--ease-standard); }
    .product-card-button:hover .product-media img { transform: scale(1.025); }
    .product-media::after { content: none; }
    .product-summary { min-width: 0; display: grid; gap: var(--space-2); padding: var(--space-4) var(--space-5) var(--space-5); border-top: 1px solid var(--border); }
    .product-summary span { color: var(--muted); font-size: var(--text-xs); text-transform: uppercase; }
    .product-summary h2 { font-size: var(--text-xl); overflow-wrap: anywhere; }
    .product-body { padding: var(--space-4); display: grid; gap: var(--space-3); }
    .product-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
    .product-name span { display: block; margin-bottom: var(--space-1); color: var(--muted); font-size: var(--text-xs); text-transform: uppercase; }
    .spec-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
    .spec { border: 1px solid var(--border-soft); padding: var(--space-2); background: var(--bg); }
    .spec b { display: block; color: var(--success); font-size: var(--text-lg); line-height: 1; }
    .spec span { display: block; margin-top: var(--space-1); color: var(--muted); font-size: var(--text-xs); text-transform: uppercase; }
    .product-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); padding: var(--space-4); border-top: 1px solid var(--border); }
    .toggle.active { border-color: var(--success); color: var(--success); }
    .pager { justify-content: flex-end; flex-wrap: wrap; padding: var(--space-4); border-top: 1px solid var(--border); }
    .compare-table-wrap, .request-panel, .index-panel { margin-top: var(--space-5); border: 1px solid var(--border); background: var(--surface); overflow-x: auto; }
    .panel-head { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4); border-bottom: 1px solid var(--border); }
    .panel-body { padding: var(--space-5); }
    table { width: 100%; min-width: 960px; border-collapse: collapse; }
    th, td { border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); padding: var(--space-3); text-align: left; vertical-align: top; }
    th { color: var(--meta); font-size: var(--text-xs); text-transform: uppercase; }
    td { color: var(--fg-2); }
    .request-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(320px, .5fr); gap: var(--space-5); align-items: start; }
    .request-summary { display: grid; gap: var(--space-3); }
    .request-summary .chip { width: fit-content; }
    form { display: grid; gap: var(--space-3); }
    .form-message { min-height: 24px; color: var(--warn); font-size: var(--text-sm); text-transform: none; }
    .index-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--border); }
    .index-card { min-height: 156px; padding: var(--space-4); display: grid; align-content: space-between; gap: var(--space-4); border: 0; }
    .modal { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: var(--space-5); background: color-mix(in oklab, var(--bg), transparent 10%); }
    .modal.open { display: flex; }
    .modal-card { width: min(1040px, 100%); max-height: min(840px, calc(100svh - var(--space-8))); border: 1px solid color-mix(in oklab, var(--accent), transparent 40%); background: var(--surface); overflow: auto; border-radius: 8px; animation: modal-in 180ms var(--ease-standard) both; }
    .modal-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4); border-bottom: 1px solid var(--border); background: color-mix(in oklab, var(--bg), transparent 8%); }
    .modal-body { display: grid; grid-template-columns: minmax(0, .86fr) minmax(360px, .62fr); gap: var(--space-5); padding: var(--space-5); }
    .detail-media-stack, .detail-gallery { min-width: 0; display: grid; align-content: start; gap: var(--space-3); }
    .detail-image { position: relative; min-height: 430px; background: var(--bg); overflow: hidden; }
    .detail-image img { width: 100%; height: 100%; object-fit: cover; opacity: .72; filter: saturate(.72) contrast(1.12); }
    .detail-image img.core-product-image { object-fit: contain; opacity: 1; filter: none; background: var(--surface-warm); }
    .detail-gallery-main { width: 100%; min-height: 0; aspect-ratio: 4 / 3; }
    .detail-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
    .detail-thumb { width: 100%; aspect-ratio: 1; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0; overflow: hidden; background: var(--surface-warm); }
    .detail-thumb:hover, .detail-thumb:focus-visible, .detail-thumb.active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); outline: none; }
    .detail-thumb img { width: 100%; height: 100%; object-fit: contain; background: var(--surface-warm); }
    .detail-specs { display: grid; gap: 1px; margin-top: var(--space-4); background: var(--border); }
    .detail-row { display: grid; grid-template-columns: 142px 1fr; gap: var(--space-3); padding: var(--space-3); background: var(--surface); }
    .detail-row span:first-child { color: var(--muted); font-size: var(--text-xs); text-transform: uppercase; }
    .footer { border-top: 1px solid var(--border); padding-block: var(--space-6); color: var(--muted); font-size: var(--text-xs); }
    .footer-row { justify-content: space-between; flex-wrap: wrap; text-transform: uppercase; }
    @keyframes hud-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } }
    @keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
    @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; scroll-behavior: auto !important; transition-duration: 1ms !important; } }
    @media (max-width: 1040px) { .product-grid, .index-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .modal-body, .request-grid { grid-template-columns: 1fr; } }
    @media (max-width: 820px) { .container { width: min(100% - var(--container-gutter-tablet) * 2, var(--container-max)); } .nav-links { display: none; } .nav-actions .btn-primary { display: none; } section { padding-block: var(--section-y-tablet); } .catalog-library { padding-top: 0; } .hero-metrics, .product-grid, .index-list { grid-template-columns: 1fr; } .catalog-heading { min-height: 112px; align-items: start; flex-direction: column; justify-content: end; gap: var(--space-2); } }
    @media (max-width: 520px) { .container { width: min(100% - var(--container-gutter-phone) * 2, var(--container-max)); } section { padding-block: var(--section-y-phone); } .brand span, .nav-actions .btn:not(.lang-trigger) { display: none; } .hero-actions, .product-actions, .inline-actions { display: grid; grid-template-columns: 1fr; } .detail-row { grid-template-columns: 1fr; } .modal { padding: var(--space-2); } .modal-body { padding: var(--space-3); } .detail-thumbs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
    /* 详情弹窗内的 3D 模型预览 */
    .detail-3d { width: 100%; height: 320px; border-radius: var(--radius-sm); overflow: hidden; position: relative; background: radial-gradient(ellipse at center, #1a1a2e 0%, #0a0a0a 100%); }
    .detail-3d model-viewer { width: 100%; height: 100%; --poster-color: transparent; }    /* 跳转链接：键盘导航可达，默认隐藏 */
    .skip-link { position: absolute; left: -9999px; z-index: 9999; }
    .skip-link:focus {
      position: fixed; top: 0; left: 0; padding: var(--space-3) var(--space-4);
      background: var(--accent); color: var(--bg); font-weight: 500;
      text-decoration: none; box-shadow: 0 4px 12px rgba(0,0,0,.3);
    }