/* =============================================================
   NORDVEIL · 产品数字展厅
   -------------------------------------------------------------
   设计取向：博物馆展陈系统，不是营销页。
   · 底层：一张全屏 WebGL 画布（每个产品渲染进它自己的格子视口）
   · 上层：宫格的发丝边界、侧边列表、底部磨砂资料卡，全部由 DOM 绘制
   · 主题：深色展柜（默认）/ 浅色影棚，只换 token 与 3D 环境贴图
   · 排版：全部使用 CSS 逻辑属性，<html dir> 驱动 RTL 镜像
   ============================================================= */

:root {
  --topbar-h: 72px;
  --rail-w: 296px;

  --bg: #0b0e13;
  --bg-2: #101319;
  --bg-3: #070910;

  --ink: #e8ecf4;
  --ink-2: #98a2b2;
  --ink-3: #6a7382;
  --ink-4: #49515f;

  --line: rgba(255, 255, 255, 0.085);
  --line-strong: rgba(255, 255, 255, 0.14);
  --grid-line: rgba(255, 255, 255, 0.055);
  --grid-line-hover: rgba(122, 160, 255, 0.42);

  --accent: #6f95ff;
  --accent-soft: rgba(111, 149, 255, 0.14);
  --accent-ink: #c8d6ff;

  --glass: rgba(15, 19, 27, 0.82);
  --glass-solid: #12161e;
  --glass-rail: rgba(12, 15, 21, 0.72);
  --sunken: rgba(255, 255, 255, 0.045);
  --cell-scrim: rgba(7, 9, 14, 0.66);
  --cell-glow: rgba(110, 150, 255, 0.16);

  --sh-2: 0 10px 30px rgba(0, 0, 0, 0.38);
  --sh-3: 0 28px 70px rgba(0, 0, 0, 0.55), 0 2px 0 rgba(255, 255, 255, 0.05) inset;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", "Noto Sans SC",
    "PingFang SC", "Microsoft YaHei", "Noto Naskh Arabic", Roboto, Arial, sans-serif;
  --mono: "SFMono-Regular", "JetBrains Mono", Consolas, "Courier New", monospace;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

html[data-theme="light"] {
  --bg: #eef0f4;
  --bg-2: #f8f9fb;
  --bg-3: #e6e9ee;

  --ink: #14161a;
  --ink-2: #5b6472;
  --ink-3: #8b93a1;
  --ink-4: #aab1bd;

  --line: rgba(20, 22, 26, 0.10);
  --line-strong: rgba(20, 22, 26, 0.16);
  --grid-line: rgba(20, 22, 26, 0.075);
  --grid-line-hover: rgba(47, 111, 237, 0.45);

  --accent: #2f6fed;
  --accent-soft: rgba(47, 111, 237, 0.12);
  --accent-ink: #1c4fb8;

  --glass: rgba(255, 255, 255, 0.86);
  --glass-solid: #ffffff;
  --glass-rail: rgba(252, 253, 255, 0.80);
  --sunken: rgba(20, 22, 26, 0.035);
  --cell-scrim: rgba(248, 249, 251, 0.72);
  --cell-glow: rgba(47, 111, 237, 0.10);

  --sh-2: 0 10px 28px rgba(20, 24, 34, 0.10);
  --sh-3: 0 30px 70px rgba(20, 24, 34, 0.18), 0 1px 0 rgba(255, 255, 255, 0.9) inset;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }

body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  background-image:
    radial-gradient(1200px 720px at 50% -12%, var(--bg-2), transparent 70%),
    radial-gradient(1000px 620px at 50% 118%, var(--bg-3), transparent 72%);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
html[data-theme="light"] body {
  background-image:
    radial-gradient(1100px 680px at 50% -10%, #ffffff, transparent 70%),
    radial-gradient(900px 560px at 50% 120%, #e3e7ee, transparent 70%);
}

button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.sr-only {
  position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ================= 全屏画布 ================= */
.gl {
  position: fixed;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  display: block;
  z-index: 0;
  touch-action: none;
}

/* ================= 骨架 ================= */
/* 关键：整层骨架对指针“透明”，只有真正可交互的部件重新开启事件，
   否则 .app 会盖住 canvas，详情页的拖动旋转 / 滚轮缩放根本收不到手势。 */
.app {
  position: relative;
  z-index: 1;
  block-size: 100%;
  display: grid;
  /* 必须显式给列下限：隐式 auto 列会被内容的 min-content 撑破，
     详情页标题（nowrap）会把顶栏顶到视口外，语言切换被挤出画面。 */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: var(--topbar-h) minmax(0, 1fr);
  pointer-events: none;
}

/* ================= 顶栏 ================= */
.topbar {
  position: relative;
  z-index: 6;
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 22px;
  padding-inline: 26px;
  border-block-end: 1px solid var(--line);
  background: var(--glass-rail);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
}
.topbar__lead { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.topbar__mid { flex: 1 1 auto; min-inline-size: 0; }
.topbar__end { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.topbar__rule { inline-size: 1px; block-size: 20px; background: var(--line); }

.brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: inherit;
  transition: opacity 0.3s var(--ease);
}
.brand__mark {
  inline-size: 28px; block-size: 28px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 9px;
  background: linear-gradient(150deg, var(--accent), #2d3f7a);
  color: #fff;
  box-shadow: 0 4px 14px rgba(80, 120, 255, 0.28);
}
.brand__mark svg { inline-size: 15px; block-size: 15px; }
.brand__text { display: flex; flex-direction: column; line-height: 1.3; }
.brand__name { font-size: 12.5px; font-weight: 650; letter-spacing: 0.26em; }
.brand__sub { font-size: 10px; color: var(--ink-3); letter-spacing: 0.1em; }

/* 返回按钮：只在单品放大时占据左上角 */
.back {
  display: none;
  align-items: center; gap: 7px;
  padding: 8px 14px 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--sunken);
  font-size: 12.5px; color: var(--ink-2);
  white-space: nowrap;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease), transform 0.2s var(--ease);
}
.back svg { inline-size: 15px; block-size: 15px; }
.back:hover { color: var(--ink); border-color: var(--line-strong); background: var(--accent-soft); transform: translateX(-2px); }
html[dir="rtl"] .back:hover { transform: translateX(2px); }
html[dir="rtl"] .back svg { transform: scaleX(-1); }
html[data-mode="detail"] .back { display: inline-flex; }
html[data-mode="detail"] .brand { display: none; }

.hall__title {
  margin: 0; font-size: 15px; font-weight: 600; letter-spacing: 0.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hall__sub {
  margin: 2px 0 0; font-size: 11px; color: var(--ink-3); letter-spacing: 0.06em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.seg {
  display: flex; gap: 2px; padding: 3px;
  border-radius: 10px; border: 1px solid var(--line); background: var(--sunken);
}
.seg__btn {
  padding: 5px 12px; border-radius: 7px;
  font-size: 11.5px; color: var(--ink-3); letter-spacing: 0.04em;
  transition: color 0.18s var(--ease), background 0.18s var(--ease);
}
.seg__btn:hover { color: var(--ink); }
.seg__btn[aria-pressed="true"] { color: var(--ink); background: var(--glass-solid); box-shadow: var(--sh-2); }

.lang { display: flex; align-items: center; gap: 8px; }
.lang__label { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-4); }
.lang__list { display: flex; gap: 1px; }
.lang__btn {
  padding: 5px 9px; border-radius: 7px;
  font-size: 11.5px; color: var(--ink-3); white-space: nowrap;
  transition: color 0.18s var(--ease), background 0.18s var(--ease);
}
.lang__btn:hover { color: var(--ink); background: var(--sunken); }
.lang__btn[aria-pressed="true"] { color: var(--ink); background: var(--sunken); font-weight: 600; }

/* ================= 视图区 ================= */
.view { position: relative; min-block-size: 0; }

/* ================= 宫格总览 ================= */
.grid {
  position: absolute; inset: 0;
  pointer-events: auto;          /* 宫格本身要能接滚轮（窄屏下列表要滚动） */
  overflow-y: auto; overflow-x: hidden;
  opacity: 1;
  transition: opacity 0.42s var(--ease);
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
html[data-mode="detail"] .grid { opacity: 0; pointer-events: none; }
/* 隐形宫格必须彻底退出命中测试：.cell 显式开了 auto，会绕过父层的 none，
   不关掉的话详情页拖动会被看不见的卡片吃掉。 */
html[data-mode="detail"] .cell,
html[data-mode="detail"] .cell * { pointer-events: none !important; }

.grid__inner {
  min-block-size: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

/* ---- 单个格子：模型由 WebGL 画在它的矩形里，这里只画"边界与文字" ---- */
.cell {
  position: relative;
  display: block;
  text-align: start;
  padding: 0;
  background: transparent;
  pointer-events: auto;
  box-shadow: inset 0 0 0 1px var(--grid-line);
  transition: box-shadow 0.32s var(--ease), transform 0.32s var(--ease);
  isolation: isolate;
}
.cell:hover, .cell:focus-visible { box-shadow: inset 0 0 0 1px var(--grid-line-hover); }
.cell:focus-visible { outline: none; }
.cell[data-loading="true"] { cursor: progress; }

.cell__glow {
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(58% 58% at 50% 42%, var(--cell-glow), transparent 72%);
  opacity: 0;
  transition: opacity 0.36s var(--ease);
  pointer-events: none;
}
.cell:hover .cell__glow { opacity: 1; }

.cell__head {
  position: absolute; inset-block-start: 0; inset-inline: 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 16px 18px 0;
  pointer-events: none;
}
.cell__tools { display: flex; align-items: center; gap: 10px; }
.cell__idx {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  color: var(--ink-4);
  transition: color 0.28s var(--ease);
}
.cell:hover .cell__idx { color: var(--accent); }
.cell__family {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3); white-space: nowrap;
}
.cell__family::before {
  content: ''; inline-size: 5px; block-size: 5px; border-radius: 50%;
  background: var(--dot, var(--accent));
  box-shadow: 0 0 9px 0 var(--dot, var(--accent));
}

.cell__load {
  position: absolute; inset-block-start: 50%; inset-inline: 0;
  text-align: center;
  font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-4);
  pointer-events: none;
  animation: pulse 1.4s ease-in-out infinite;
}
.cell[data-loading="false"] .cell__load { display: none; }
.cell[data-loading="true"] .cell__foot { opacity: 0.4; }
@keyframes pulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.9; } }

.cell__foot {
  position: absolute; inset-block-end: 0; inset-inline: 0;
  padding: 70px 20px 18px;
  background: linear-gradient(to top, var(--cell-scrim), transparent);
  pointer-events: none;
}
.cell__name {
  display: block;
  margin: 0; font-size: 17px; font-weight: 620; letter-spacing: -0.005em;
  line-height: 1.32;
  text-shadow: 0 1px 12px var(--cell-scrim);
  transition: color 0.28s var(--ease);
}
.cell__sub {
  display: block;
  margin: 5px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cell__cta {
  position: absolute; inset-block-end: 18px; inset-inline-end: 20px;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--accent-ink); letter-spacing: 0.04em;
  opacity: 0; transform: translateY(5px);
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease);
}
.cell__cta svg { inline-size: 13px; block-size: 13px; }
html[dir="rtl"] .cell__cta svg { transform: scaleX(-1); }
.cell:hover .cell__cta, .cell:focus-visible .cell__cta { opacity: 1; transform: none; }

/* ---- 格子里的关键参数速览（像产品图册，扫一眼就知道规格） ---- */
.cell__specs {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 5px 20px;
  margin-block-start: 11px;
  padding-block-start: 10px;
  border-block-start: 1px solid var(--line);
}
.cell__spec { display: flex; align-items: baseline; gap: 6px; min-inline-size: 0; max-inline-size: 100%; }
.cell__spec i {
  font-style: normal; font-size: 10px; letter-spacing: 0.08em;
  color: var(--ink-4); white-space: nowrap;
}
.cell__spec b {
  font-weight: 550; font-size: 11.5px; color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---- 格子右上角：加入选型单 ---- */
.cell__pick {
  pointer-events: auto;
  inline-size: 28px; block-size: 28px;
  display: grid; place-items: center;
  border-radius: 9px;
  border: 1px solid transparent;
  color: var(--ink-2);
  background: rgba(255, 255, 255, 0.05);
  opacity: 0; transform: translateY(-3px);
  transition: opacity 0.24s var(--ease), transform 0.24s var(--ease),
    color 0.18s var(--ease), background 0.18s var(--ease), border-color 0.18s var(--ease);
}
html[data-theme="light"] .cell__pick { background: rgba(20, 22, 26, 0.045); }
.cell__pick svg { inline-size: 14px; block-size: 14px; }
.cell:hover .cell__pick, .cell:focus-within .cell__pick, .cell__pick[aria-pressed="true"] {
  opacity: 1; transform: none;
}
.cell__pick:hover { color: var(--ink); border-color: var(--line-strong); }
.cell__pick[aria-pressed="true"] {
  color: #fff; background: var(--accent); border-color: transparent;
  box-shadow: 0 4px 14px rgba(70, 110, 230, 0.35);
}
@media (hover: none) { .cell__pick { opacity: 1; transform: none; } }

/* 宫格提示（首次引导，交互后淡出） */
.gridhint {
  position: fixed;
  inset-block-start: calc(var(--topbar-h) + 14px);
  inset-inline: 0;
  margin: 0 auto;
  inline-size: fit-content;
  font-size: 11px; letter-spacing: 0.1em; color: var(--ink-4);
  pointer-events: none;
  transition: opacity 0.4s var(--ease);
  z-index: 3;
}
html[data-mode="detail"] .gridhint { opacity: 0; }
body[data-seen="1"] .gridhint { opacity: 0; }

/* ================= 单品放大 ================= */
.detail {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  opacity: 0;
  pointer-events: none;          /* 详情层的空白处必须让手势落到 canvas 上 */
  transition: opacity 0.36s var(--ease);
}
html[data-mode="detail"] .detail { opacity: 1; }

/* ---- (a) 侧边列表 ---- */
.rail {
  position: relative;
  pointer-events: auto;
  display: flex; flex-direction: column;
  min-block-size: 0;
  border-inline-end: 1px solid var(--line);
  background: var(--glass-rail);
  backdrop-filter: blur(22px) saturate(1.35);
  -webkit-backdrop-filter: blur(22px) saturate(1.35);
  transform: translateX(-101%);
  transition: transform 0.52s var(--ease-out);
}
html[dir="rtl"] .rail { transform: translateX(101%); border-inline-end: none; border-inline-start: 1px solid var(--line); }
html[data-mode="detail"] .rail { transform: none; }

.rail__head { padding: 26px 24px 16px; }
.rail__title {
  margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
}
.rail__hint {
  margin: 7px 0 0; font-size: 10.5px; color: var(--ink-4);
  display: flex; align-items: center; gap: 7px; letter-spacing: 0.04em;
}
.rail__hint .dot { inline-size: 3px; block-size: 3px; border-radius: 50%; background: var(--ink-4); }

.rail__list {
  list-style: none; margin: 0; padding: 0 14px 18px;
  overflow-y: auto; min-block-size: 0; flex: 1 1 auto;
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.rail__item { margin-block-end: 3px; }
.rail__btn {
  position: relative;
  inline-size: 100%;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 10px;
  padding: 11px 14px 12px;
  border-radius: 10px;
  text-align: start;
  color: var(--ink-2);
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.rail__btn::before {
  content: ''; position: absolute;
  inset-block: 10px; inset-inline-start: 0;
  inline-size: 2px; border-radius: 2px;
  background: transparent;
  transition: background 0.2s var(--ease);
}
.rail__btn:hover { background: var(--sunken); color: var(--ink); }
.rail__btn[aria-current="true"] { background: var(--accent-soft); color: var(--ink); }
.rail__btn[aria-current="true"]::before { background: var(--accent); }
.rail__idx { font-family: var(--mono); font-size: 10px; color: var(--ink-4); padding-block-start: 3px; }
.rail__btn[aria-current="true"] .rail__idx { color: var(--accent); }
.rail__box { display: block; min-inline-size: 0; }
.rail__name { display: block; font-size: 13px; font-weight: 550; line-height: 1.35; }
.rail__sub {
  display: block;
  margin-block-start: 3px;
  font-size: 10.5px; color: var(--ink-3); line-height: 1.45;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 侧栏底部：商务联系 */
.rail__foot {
  padding: 14px 24px 18px;
  border-block-start: 1px solid var(--line);
}
.rail__contact {
  margin: 0; font-size: 9.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-4);
}
.rail__mail {
  display: inline-block; margin-block-start: 6px;
  font-size: 11.5px; color: var(--accent-ink); text-decoration: none;
  word-break: break-all;
}
.rail__mail:hover { text-decoration: underline; }

/* ---- 舞台：本身不吃指针事件，手势直达 canvas ---- */
.stage { position: relative; min-inline-size: 0; pointer-events: none; }
.stage__meta {
  position: absolute;
  inset-block-start: 32px; inset-inline-start: 40px;
  pointer-events: none;
  max-inline-size: 46%;
}
.stage__code {
  margin: 0 0 8px; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.2em; color: var(--ink-4);
}
.stage__name {
  margin: 0; font-size: 26px; font-weight: 620; letter-spacing: -0.015em; line-height: 1.2;
}
.stage__sub { margin: 8px 0 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.6; }

/* 详情页顶部的关键参数条：像一张产品规格表头 */
.stage__specs {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: 12px 0;
  margin: 20px 0 0; padding: 0;
}
.stage__specs .sp { display: flex; flex-direction: column; gap: 4px; min-inline-size: 0; }
.stage__specs dt, .stage__specs dd { margin: 0; }
.stage__specs .sp + .sp {
  padding-inline-start: 22px;
  margin-inline-start: 22px;
  border-inline-start: 1px solid var(--line);
}
.stage__specs .k {
  font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-4); white-space: nowrap;
}
.stage__specs .v {
  font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums; line-height: 1.25;
}

/* 拖动/缩放的可见提示：进入详情时出现，首次拖动后自动淡出 */
.stage__hint {
  position: absolute;
  inset-block-start: 30px; inset-inline: 0;
  margin-inline: auto;
  inline-size: fit-content;
  display: inline-flex; align-items: center; gap: 8px;
  margin-block: 0;
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--glass);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: var(--sh-2);
  font-size: 11.5px; color: var(--ink-2); letter-spacing: 0.03em;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 0.45s var(--ease);
}
.stage__hint svg { inline-size: 15px; block-size: 15px; color: var(--accent); flex: 0 0 auto; }
body[data-dragged="1"] .stage__hint { opacity: 0; }

.dock {
  position: absolute;
  inset-block-start: 26px; inset-inline-end: 32px;
  pointer-events: auto;
  display: flex; align-items: center; gap: 2px;
  padding: 5px;
  border-radius: 13px;
  background: var(--glass);
  border: 1px solid var(--line);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: var(--sh-2);
}
.dock__btn {
  inline-size: 38px; block-size: 38px;
  display: grid; place-items: center;
  border-radius: 9px; color: var(--ink-2);
  transition: background 0.16s var(--ease), color 0.16s var(--ease);
}
.dock__btn:hover { background: var(--sunken); color: var(--ink); }
.dock__btn[aria-pressed="true"] { color: var(--accent); background: var(--accent-soft); }
.dock__btn svg { inline-size: 18px; block-size: 18px; }
.dock__rule { inline-size: 1px; block-size: 18px; background: var(--line); margin-inline: 4px; }

/* ================= (c) 底部悬浮资料卡 ================= */
.cardwrap {
  position: fixed;
  inset-block-end: 20px;
  inset-inline-start: var(--rail-w);
  inset-inline-end: 0;
  padding-inline: 26px;
  display: grid; place-items: end center;
  pointer-events: none;
  z-index: 14;
}
html[data-mode="grid"] .cardwrap { inset-inline-start: 0; }

.card {
  pointer-events: auto;
  inline-size: min(960px, 100%);
  position: relative;
  border-radius: 18px;
  border: 1px solid var(--line-strong);
  /* 磨砂：底色偏实（不透底），再叠一层模糊，保证文字对比度 */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0) 42%),
    var(--glass);
  backdrop-filter: blur(28px) saturate(1.5);
  -webkit-backdrop-filter: blur(28px) saturate(1.5);
  box-shadow: var(--sh-3);
  overflow: hidden;
  opacity: 0;
  transform: translateY(calc(100% + 44px));
  transition: transform 0.56s var(--ease-out), opacity 0.4s var(--ease);
}
html[data-mode="detail"] .card { opacity: 1; transform: none; }
.card[data-folded="true"] .card__body { block-size: 0; padding-block: 0; opacity: 0; }
.card[data-folded="true"] .card__fold svg { transform: rotate(180deg); }
html[data-mode="grid"] .card { pointer-events: none; }

.card__head {
  display: flex; align-items: center; gap: 18px;
  padding: 13px 14px 13px 20px;
  border-block-end: 1px solid var(--line);
}
.card__id { display: flex; align-items: baseline; gap: 10px; flex: 0 0 auto; }
.card__code { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; color: var(--accent); }
.card__tag { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-4); }

.card__tabs { position: relative; display: flex; gap: 3px; flex: 1 1 auto; min-inline-size: 0; overflow-x: auto; scrollbar-width: none; }
.card__tabs::-webkit-scrollbar { display: none; }
.ctab {
  padding: 7px 13px; border-radius: 8px;
  font-size: 12px; color: var(--ink-3); white-space: nowrap;
  transition: color 0.18s var(--ease), background 0.18s var(--ease);
}
.ctab:hover { color: var(--ink); background: var(--sunken); }
.ctab[aria-selected="true"] { color: var(--ink); background: var(--accent-soft); font-weight: 600; }
.ctab__k {
  font-family: var(--mono); font-size: 9.5px; color: var(--ink-4); margin-inline-end: 6px;
}
.ctab[aria-selected="true"] .ctab__k { color: var(--accent); }

.card__fold {
  flex: 0 0 auto;
  inline-size: 32px; block-size: 32px;
  display: grid; place-items: center;
  border-radius: 9px; color: var(--ink-3);
  transition: background 0.16s var(--ease), color 0.16s var(--ease);
}
.card__fold:hover { background: var(--sunken); color: var(--ink); }
.card__fold svg { inline-size: 15px; block-size: 15px; transition: transform 0.3s var(--ease); }

/* 资料卡右下角：商务动作（加入选型单 / 索取报价） */
.card__acts { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

.act {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: transparent;
  font-size: 12px; color: var(--ink-2); white-space: nowrap;
  text-decoration: none;
  transition: color 0.18s var(--ease), background 0.18s var(--ease),
    border-color 0.18s var(--ease), box-shadow 0.18s var(--ease), transform 0.18s var(--ease);
}
.act svg { inline-size: 14px; block-size: 14px; flex: 0 0 auto; }
.act:hover { color: var(--ink); border-color: var(--line-strong); background: var(--sunken); }
.act--ghost { border-color: transparent; }
.act[aria-pressed="true"] {
  color: var(--accent-ink); background: var(--accent-soft); border-color: transparent;
}
.act--primary {
  color: #fff; border-color: transparent;
  background: linear-gradient(180deg, #7397ff, #3f66d8);
  box-shadow: 0 6px 18px rgba(64, 104, 216, 0.30);
}
.act--primary:hover {
  color: #fff;
  background: linear-gradient(180deg, #8aa9ff, #4a72e2);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(64, 104, 216, 0.38);
}
html[data-theme="light"] .act--primary {
  background: linear-gradient(180deg, #4a82f0, #2456c9);
}

.card__body {
  padding: 20px 22px 22px;
  min-block-size: 172px;
  max-block-size: 34vh;
  overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
  transition: block-size 0.4s var(--ease), padding 0.4s var(--ease), opacity 0.3s var(--ease);
}
.panel { animation: panelIn 0.36s var(--ease) both; }
@keyframes panelIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* 概述：左右两栏，一屏放完 */
.ov { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.25fr); gap: 12px 34px; align-items: start; }
.ov__pos { }
.ov__label {
  font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-4);
  margin: 0 0 8px;
}
.ov__sub { margin: 0 0 10px; font-size: 15px; font-weight: 600; letter-spacing: -0.005em; line-height: 1.45; }
.ov__desc { margin: 0; font-size: 13px; line-height: 1.85; color: var(--ink-2); }
.ov__pts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ov__pts li {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px;
  font-size: 13px; line-height: 1.7;
}
.ov__pts li span {
  font-family: var(--mono); font-size: 10px; color: var(--accent);
  padding-block-start: 3px;
}

/* 参数 */
.params { display: grid; grid-template-columns: minmax(0, 1fr) 178px; gap: 10px 30px; align-items: start; }
.params__grid { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 26px; }
.params__row { display: flex; gap: 12px; padding-block: 8px; border-block-end: 1px solid var(--line); }
.params__row dt { flex: 0 0 auto; min-inline-size: 74px; font-size: 12px; color: var(--ink-3); }
.params__row dd { margin: 0; font-size: 12.5px; font-weight: 500; line-height: 1.5; }
.params__meta { display: grid; gap: 9px; padding-inline-start: 16px; border-inline-start: 1px solid var(--line); }
.params__meta .m { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.params__meta .k { font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-4); }
.params__meta .v { font-size: 12.5px; font-weight: 500; }

/* 工艺 */
.craft { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); gap: 12px 30px; align-items: start; }
.craft__title { margin: 0; font-size: 15px; font-weight: 620; line-height: 1.5; }
.craft__lead { margin: 10px 0 0; font-size: 12.5px; line-height: 1.85; color: var(--ink-2); }
.craft__pts { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.craft__pts li {
  position: relative; padding-inline-start: 16px;
  font-size: 12.5px; line-height: 1.72;
}
.craft__pts li::before {
  content: ''; position: absolute; inset-inline-start: 0; inset-block-start: 8px;
  inline-size: 5px; block-size: 5px; border-radius: 50%; background: var(--accent);
  opacity: 0.75;
}

/* 服务与交付 */
.svc { display: grid; grid-template-columns: minmax(0, 1fr) 268px; gap: 14px 30px; align-items: start; }
.svc__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; }
.svc__grid li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.svc__grid .k {
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-ink);
  white-space: nowrap;
}
.svc__grid .v { font-size: 12.5px; line-height: 1.65; color: var(--ink-2); }
.svc__line {
  margin: 0; padding: 14px 16px; border-radius: 12px;
  background: var(--sunken); border: 1px solid var(--line);
  font-size: 12.5px; line-height: 1.75;
}
.svc__line b { display: block; margin-block-end: 6px; font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-4); font-weight: 500; }

/* ================= 待确认清单 / 店主报价确认 ================= */
.cartbtn {
  display: inline-flex; align-items: center; gap: 7px;
  min-block-size: 40px; padding: 7px 13px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--sunken);
  font-size: 12.5px; color: var(--ink-2); white-space: nowrap;
  touch-action: manipulation;
  transition: color 0.18s var(--ease), background 0.18s var(--ease), border-color 0.18s var(--ease);
}
.cartbtn svg { inline-size: 15px; block-size: 15px; }
.cartbtn:hover { color: var(--ink); border-color: var(--line-strong); }
.cartbtn[aria-expanded="true"] { color: var(--ink); background: var(--accent-soft); border-color: transparent; }
.cartbtn__badge {
  min-inline-size: 20px; block-size: 20px; padding-inline: 6px;
  display: inline-grid; place-items: center;
  border-radius: 999px;
  background: var(--accent); color: #fff;
  font-size: 11px; font-weight: 650;
  font-variant-numeric: tabular-nums;
  transition: background 0.2s var(--ease), opacity 0.2s var(--ease);
}
.cartbtn__badge[data-zero="true"] { background: var(--ink-4); opacity: 0.5; }

/* 通用按钮：Pad 上最小 44px 高，手指点得中 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-block-size: 44px; padding: 0 16px;
  border-radius: 11px;
  border: 1px solid var(--line);
  background: transparent;
  font-size: 13px; color: var(--ink-2); white-space: nowrap;
  text-decoration: none;
  touch-action: manipulation;
  transition: color 0.18s var(--ease), background 0.18s var(--ease),
    border-color 0.18s var(--ease), box-shadow 0.18s var(--ease), transform 0.18s var(--ease);
}
.btn:hover { color: var(--ink); border-color: var(--line-strong); background: var(--sunken); }
.btn--ghost { border-color: transparent; }
.btn--primary {
  color: #fff; border-color: transparent;
  background: linear-gradient(180deg, #7397ff, #3f66d8);
  box-shadow: 0 6px 18px rgba(64, 104, 216, 0.30);
}
.btn--primary:hover {
  color: #fff; transform: translateY(-1px);
  background: linear-gradient(180deg, #8aa9ff, #4a72e2);
  box-shadow: 0 8px 22px rgba(64, 104, 216, 0.38);
}
html[data-theme="light"] .btn--primary { background: linear-gradient(180deg, #4a82f0, #2456c9); }
.btn[data-armed="1"] {
  color: #ffb4a5; border-color: rgba(255, 120, 100, 0.45); background: rgba(255, 90, 70, 0.12);
}
.btn[disabled] { opacity: 0.4; pointer-events: none; }

.iconbtn {
  flex: 0 0 auto;
  inline-size: 40px; block-size: 40px;
  display: grid; place-items: center;
  border-radius: 11px; color: var(--ink-3);
  touch-action: manipulation;
  transition: background 0.16s var(--ease), color 0.16s var(--ease);
}
.iconbtn:hover { background: var(--sunken); color: var(--ink); }
.iconbtn svg { inline-size: 16px; block-size: 16px; }

.chip {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 10px; font-weight: 650; letter-spacing: 0.06em;
  background: var(--accent-soft); color: var(--accent-ink);
  text-transform: none;
}
.chip[data-state="confirmed"] { background: rgba(74, 140, 96, 0.22); color: #86d49c; }
html[data-theme="light"] .chip[data-state="confirmed"] { background: rgba(46, 125, 78, 0.14); color: #1f7a4a; }

.act__n { font-variant-numeric: tabular-nums; font-weight: 650; }

.cartwrap { position: fixed; inset: 0; z-index: 30; pointer-events: none; }

.cart {
  position: absolute;
  inset-block: var(--topbar-h) 0;
  inset-inline-end: 0;
  inline-size: min(444px, 94vw);
  display: flex; flex-direction: column;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0) 30%),
    var(--glass);
  backdrop-filter: blur(26px) saturate(1.45);
  -webkit-backdrop-filter: blur(26px) saturate(1.45);
  border-inline-start: 1px solid var(--line-strong);
  box-shadow: -28px 0 70px rgba(0, 0, 0, 0.42);
  pointer-events: auto;
  transform: translateX(101%);
  transition: transform 0.48s var(--ease-out), inline-size 0.4s var(--ease);
}
/* 店主报价模式需要更宽的表单面板 */
html[data-role="owner"] .cart { inline-size: min(640px, 96vw); }
html[dir="rtl"] .cart {
  transform: translateX(-101%);
  border-inline-start: none;
  border-inline-end: 1px solid var(--line-strong);
  box-shadow: 28px 0 70px rgba(0, 0, 0, 0.42);
}
.cartwrap[data-open="true"] .cart { transform: none; }
.cartwrap[data-open="false"] .cart { pointer-events: none; }

/* ---- 店主密码闸 ---- */
.gate {
  flex: 1 1 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 30px 26px; text-align: center;
}
.gate__ico { inline-size: 34px; block-size: 34px; color: var(--accent); }
.gate__title { margin: 6px 0 0; font-size: 15px; font-weight: 620; }
.gate__hint { margin: 0; font-size: 11.5px; line-height: 1.7; color: var(--ink-3); max-inline-size: 320px; }
.gate__in {
  inline-size: 184px; block-size: 54px; margin-block-start: 6px;
  text-align: center; letter-spacing: 0.55em; font-size: 23px;
  border-radius: 13px; border: 1px solid var(--line-strong);
  background: var(--sunken); color: var(--ink);
}
.gate__in:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.gate__err { margin: 0; min-block-size: 16px; font-size: 11.5px; color: #ff8b7a; }
.gate__acts { display: flex; gap: 10px; }

.cart__head {
  flex: 0 0 auto;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 20px 18px 15px;
  border-block-end: 1px solid var(--line);
}
.cart__headText { min-inline-size: 0; }
.cart__title {
  margin: 0; display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-size: 13px; font-weight: 650;
  letter-spacing: 0.16em; text-transform: uppercase;
}
.cart__hint { margin: 8px 0 0; font-size: 11.5px; color: var(--ink-3); line-height: 1.65; }

/* ---- 客户端：只挑商品 ---- */
.cart__pane { flex: 1 1 auto; display: flex; flex-direction: column; min-block-size: 0; }
.cart__body { flex: 1 1 auto; min-block-size: 0; overflow-y: auto; padding: 14px; scrollbar-width: thin; }
.cart__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ci {
  display: grid; grid-template-columns: minmax(0, 1fr) 42px; gap: 8px; align-items: center;
  padding: 12px 8px 12px 15px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--sunken);
}
.ci__code { margin: 0 0 4px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; color: var(--accent); }
.ci__name { margin: 0; font-size: 13.5px; font-weight: 550; }
.ci__spec {
  margin: 5px 0 0; font-size: 11px; color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ci__rm {
  inline-size: 42px; block-size: 42px;
  display: grid; place-items: center;
  border-radius: 10px; color: var(--ink-4);
  touch-action: manipulation;
  transition: background 0.16s var(--ease), color 0.16s var(--ease);
}
.ci__rm:hover { background: var(--line); color: var(--ink); }
.ci__rm svg { inline-size: 14px; block-size: 14px; }
.cart__empty { margin: 22px 10px; font-size: 12px; line-height: 1.8; color: var(--ink-4); }

.cart__foot { flex: 0 0 auto; padding: 14px 16px 16px; border-block-start: 1px solid var(--line); }
.cart__note { margin: 0 0 12px; font-size: 11.5px; line-height: 1.7; color: var(--ink-4); }
.cart__acts { display: flex; flex-wrap: wrap; gap: 8px; }
.cart__acts .btn--primary { flex: 1 1 190px; }
.cart__status { margin: 10px 0 0; min-block-size: 16px; font-size: 11.5px; color: var(--accent-ink); }

/* ---- 店主端：报价单 ---- */
.quote { flex: 1 1 auto; display: flex; flex-direction: column; min-block-size: 0; }
.quote__scroll { flex: 1 1 auto; min-block-size: 0; overflow-y: auto; padding: 4px 0 14px; scrollbar-width: thin; }
.qsec { padding: 14px 18px 6px; }
.qsec + .qsec { margin-block-start: 10px; padding-block-start: 16px; border-block-start: 1px solid var(--line); }
.qsec__title {
  margin: 0 0 13px; font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-4);
}

.qgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fld { display: flex; flex-direction: column; gap: 6px; min-inline-size: 0; }
.fld--wide { grid-column: 1 / -1; }
.fld--min { min-inline-size: 104px; }
.fld__k { font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-4); }
.fld__in {
  inline-size: 100%; min-block-size: 46px;
  padding: 11px 13px;
  border-radius: 11px;
  border: 1px solid var(--line);
  background: var(--sunken);
  color: var(--ink);
  font: inherit; font-size: 14px;
  -webkit-appearance: none; appearance: none;
}
.fld__in:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.fld__in--area { min-block-size: 68px; line-height: 1.6; resize: vertical; }

.qitems { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.qi { padding: 12px 12px 13px; border-radius: 12px; border: 1px solid var(--line); background: var(--sunken); }
.qi__top { display: grid; grid-template-columns: auto minmax(0, 1fr) 36px; gap: 9px; align-items: center; }
.qi__code { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; color: var(--accent); }
.qi__name { font-size: 12.5px; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qi__rm {
  inline-size: 36px; block-size: 36px;
  display: grid; place-items: center;
  border-radius: 9px; color: var(--ink-4);
  touch-action: manipulation;
}
.qi__rm:hover { background: var(--line); color: var(--ink); }
.qi__rm svg { inline-size: 13px; block-size: 13px; }
.qi__row {
  display: grid; grid-template-columns: auto minmax(96px, 1fr) auto;
  gap: 10px; align-items: center; margin-block-start: 11px;
}
.stepper {
  display: inline-flex; align-items: center;
  border-radius: 11px; border: 1px solid var(--line);
  background: var(--glass-solid); overflow: hidden;
}
.stepper__btn {
  inline-size: 44px; block-size: 46px;
  display: grid; place-items: center;
  font-size: 19px; color: var(--ink-2); line-height: 1;
  touch-action: manipulation;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.stepper__btn:hover { background: var(--sunken); color: var(--ink); }
.stepper__in {
  inline-size: 58px; block-size: 46px; text-align: center;
  border: none; border-inline: 1px solid var(--line);
  background: transparent; color: var(--ink);
  font: inherit; font-size: 15px; font-variant-numeric: tabular-nums;
}
.stepper__in:focus { outline: none; background: var(--accent-soft); }
.qi__price { display: inline-flex; align-items: center; gap: 8px; min-inline-size: 0; }
.qi__price .fld__in { min-block-size: 46px; text-align: end; font-variant-numeric: tabular-nums; }
.qi__cur { font-family: var(--mono); font-size: 11px; color: var(--ink-4); }
.qi__sub {
  min-inline-size: 78px; text-align: end;
  font-size: 13.5px; font-weight: 620; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.qempty { margin: 4px 2px 10px; font-size: 12px; line-height: 1.8; color: var(--ink-4); }

.qsum { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 12px; align-items: end; }
.qtotal { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; margin-inline-start: auto; }
.qtotal__k { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-4); }
.qtotal__v { font-size: 25px; font-weight: 650; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.qtotal__p { font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.qarch__sum { margin: 0 0 10px; font-size: 11.5px; color: var(--ink-4); }
.qarch { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.ai {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px; align-items: center;
  padding: 10px 8px 10px 13px;
  border-radius: 11px; border: 1px solid var(--line);
}
.ai__no { margin: 0 0 3px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; color: var(--accent); }
.ai__name { margin: 0; font-size: 12.5px; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai__meta { margin: 4px 0 0; font-size: 10.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ai__btn { min-block-size: 44px; padding-inline: 13px; font-size: 12.5px; }

.quote__foot {
  flex: 0 0 auto;
  padding: 12px 16px 16px;
  border-block-start: 1px solid var(--line);
}
.quote__err { margin: 0 0 10px; min-block-size: 16px; font-size: 11.5px; color: #ff8b7a; }
.quote__err[data-kind="ok"] { color: #86d49c; }
.quote__acts { display: flex; flex-wrap: wrap; gap: 8px; }
.quote__acts .btn--primary { flex: 1 1 180px; }

/* ================= 错误提示（排障用，正常不出现） ================= */
.errbar {
  position: fixed; inset-block-start: 0; inset-inline: 0;
  z-index: 40;
  padding: 8px 14px;
  background: #b4271f; color: #fff;
  font-family: var(--mono); font-size: 11.5px; line-height: 1.5;
  max-block-size: 40vh; overflow: auto;
  white-space: pre-wrap;
}

.selftest {
  position: fixed; inset-block: 0; inset-inline-end: 0;
  inline-size: 560px; margin: 0; padding: 12px;
  z-index: 60; overflow: auto;
  background: #05070c; color: #9fe8a8;
  font-family: var(--mono); font-size: 10px; line-height: 1.35;
  white-space: pre-wrap; border-inline-start: 1px solid #1d2a1d;
}

/* ================= 响应式 ================= */
@media (max-width: 1440px) {
  :root { --rail-w: 272px; }
  .stage__meta { inset-inline-start: 32px; }
  .stage__name { font-size: 23px; }
}
@media (max-width: 1180px) {
  .grid__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(252px, 44vh)); }
  .hall__sub { display: none; }
  .cartbtn > span:not(.cartbtn__badge) { display: none; }
  .card__acts .act > span { display: none; }
  .card__acts .act { padding: 9px 11px; }
  .ov { grid-template-columns: minmax(0, 1fr); }
  .params { grid-template-columns: minmax(0, 1fr); }
  .params__meta { padding-inline-start: 0; border-inline-start: none; padding-block-start: 12px; border-block-start: 1px solid var(--line); grid-auto-flow: column; }
  .svc { grid-template-columns: minmax(0, 1fr); }
  .card__body { max-block-size: 40vh; }
}
@media (max-width: 900px) {
  :root { --topbar-h: 64px; --rail-w: 232px; }
  .lang__label { display: none; }
  .cell__name { font-size: 15px; }
  .craft { grid-template-columns: minmax(0, 1fr); }
  .svc__grid { grid-template-columns: minmax(0, 1fr); }
  .card__tag { display: none; }
  .stage__specs .sp + .sp { padding-inline-start: 15px; margin-inline-start: 15px; }
  .stage__specs .v { font-size: 13.5px; }
  .cart { inline-size: min(400px, 96vw); }
  html[data-role="owner"] .cart { inline-size: min(560px, 96vw); }
}
@media (max-width: 760px) {
  :root { --rail-w: 0px; }
  .grid__inner { grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(6, minmax(260px, 56vh)); }
  .detail { grid-template-columns: minmax(0, 1fr); grid-template-rows: 96px minmax(0, 1fr); }
  .rail { border-inline-end: none; border-block-end: 1px solid var(--line); }
  .rail__head { padding: 12px 16px 8px; }
  .rail__hint { display: none; }
  .rail__list { display: flex; gap: 6px; padding: 0 12px 10px; overflow-x: auto; overflow-y: hidden; }
  .rail__item { margin: 0; flex: 0 0 auto; }
  .rail__btn { grid-template-columns: 1fr; padding: 8px 12px; }
  .rail__idx { display: none; }
  .rail__sub { display: none; }
  .cardwrap { inset-inline-start: 0; padding-inline: 12px; inset-block-end: 12px; }
  .stage__meta { inset-inline-start: 20px; inset-block-start: 20px; max-inline-size: 60%; }
  .stage__name { font-size: 19px; }
  .stage__hint { display: none; }
  .dock { inset-inline-end: 16px; inset-block-start: 16px; }
  .params__grid { grid-template-columns: minmax(0, 1fr); }
  .card__body { max-block-size: 46vh; min-block-size: 148px; }
  .cart,
  html[data-role="owner"] .cart { inline-size: 100vw; }
  .cart__head { padding: 15px 16px 12px; }
  .cart__foot { padding: 12px 14px 16px; }
  .qsec { padding: 13px 14px 6px; }
  .qgrid { grid-template-columns: minmax(0, 1fr); }
  .qsum { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .qtotal { grid-column: 1 / -1; align-items: flex-start; }
  .qi__row { grid-template-columns: auto minmax(0, 1fr); row-gap: 8px; }
  .qi__sub { grid-column: 1 / -1; text-align: start; }
  .ai { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  .stage__hint { inset-block-start: 16px; font-size: 10.5px; padding: 7px 12px; }
  .cell__specs .cell__spec:nth-child(n + 3) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* 自检用：临时彻底取消过渡，直接读"最终状态"
   （后台节流环境下浏览器不出帧，过渡不会推进；只把时长设成 0 也仍需一帧才落地，
     所以这里必须用 transition:none 把过渡整个取消掉） */
html[data-noanim="1"] *,
html[data-noanim="1"] *::before,
html[data-noanim="1"] *::after {
  transition: none !important;
  animation: none !important;
}

/* ================= Pad / 触控优化 ================= */
html { -webkit-tap-highlight-color: transparent; }
body { overscroll-behavior: none; touch-action: manipulation; }

/* 触控元素不做文本选择，输入区例外 */
.topbar, .rail, .cart, .card__head, .cell, .seg, .lang,
button, .btn, .act, .ctab, .rail__btn, .cartbtn, .dock__btn { user-select: none; -webkit-user-select: none; }
input, textarea { user-select: text; -webkit-user-select: text; }

/* Pad 竖屏 / 小尺寸外接屏：面板占满，避免半遮挡 */
@media (max-width: 900px) and (orientation: portrait) {
  html[data-role="owner"] .cart { inline-size: 100vw; }
}
@media (max-height: 620px) {
  .cart__foot .cart__note, .quote__foot .quote__err { display: none; }
  .gate { padding: 18px 20px; }
}

/* =============================================================
   移动端自适应 · RFC-0001（2026-10-05）
   -------------------------------------------------------------
   原则：**只新增窄屏规则，不改桌面（≥1180px）的任何既有规则**。
   手机上的三个核心问题：
     ① 顶栏元素挤不下 → 内容被裁（语言切换消失）
     ② 资料卡浮在 3D 舞台上 → 遮住约 40% 画面
     ③ 详情页侧栏压成 96px → 产品切换列表被裁
   ============================================================= */

/* ---- ① 首次引导提示：≤1180px 移到底部，避免压住卡片上的品类标签 ---- */
@media (max-width: 1180px) {
  .gridhint {
    inset-block-start: auto;
    inset-block-end: 24px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--glass);
    border: 1px solid var(--line);
    backdrop-filter: blur(14px) saturate(1.3);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
  }
}

/* ---- ② 手机（≤760px）---- */
@media (max-width: 760px) {
  :root { --topbar-h: 56px; }

  /* ---------- 顶栏：logo + 标题 + 图标化控件，全部塞进 390px ---------- */
  .topbar { gap: 6px; padding-inline: 10px; }
  .topbar__lead { gap: 6px; }
  .topbar__end { gap: 6px; }
  .brand__text { display: none; }
  .topbar__rule { display: none; }
  .hall__title { font-size: 13.5px; }

  /* 返回按钮只留箭头（详情页顶栏最紧） */
  .back { padding: 8px 11px; }
  .back > span { display: none; }

  /* 触控：顶栏控件高度 ≥44px，宽度靠内边距压缩 */
  .cartbtn, .seg__btn, .lang__btn, .brand, .back { min-block-size: 44px; }
  .cartbtn, .seg__btn, .lang__btn { display: grid; place-items: center; }

  /* 主题：收成两个图标（☾ / ☀），不再显示文字 */
  .seg { padding: 2px; }
  .seg__btn { font-size: 0; padding: 0 6px; }
  .seg__btn::after { font-size: 13px; line-height: 1; }
  .seg__btn[data-theme-val="dark"]::after { content: "\263E"; }
  .seg__btn[data-theme-val="light"]::after { content: "\2600"; }

  /* 语言：短标签 中 / EN / ع / DE（data-short 由 ui.js 写入） */
  .lang { gap: 4px; }
  .lang__btn { font-size: 0; padding: 0 6px; }
  .lang__btn::after { content: attr(data-short); font-size: 11.5px; }

  /* ---------- 宫格：一屏一张（沉浸式） ---------- */
  .grid__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(6, minmax(320px, 58vh));
  }
  .gridhint { inset-block-end: 18px; font-size: 10px; }

  /* ---------- 详情页：侧栏收成一条横向产品切换带 ---------- */
  .detail { grid-template-columns: minmax(0, 1fr); grid-template-rows: 56px minmax(0, 1fr); }
  .rail { flex-direction: row; align-items: center; gap: 8px; border-block-end: 1px solid var(--line); }
  .rail__head { display: none; }
  .rail__list {
    flex: 1 1 auto; min-inline-size: 0;
    display: flex; gap: 6px; align-items: center;
    padding: 8px 10px; overflow-x: auto; overflow-y: hidden;
  }
  .rail__item { margin: 0; flex: 0 0 auto; }
  .rail__btn { grid-template-columns: minmax(0, 1fr); padding: 9px 12px; min-block-size: 40px; }
  .rail__idx, .rail__sub { display: none; }
  .rail__name { font-size: 12px; white-space: nowrap; }
  .rail__foot { flex: 0 0 auto; padding: 0 12px 0 0; border-block-start: none; }
  .rail__contact { display: none; }
  .rail__mail { margin: 0; font-size: 11px; white-space: nowrap; }

  /* 舞台：给底部把手留安全距离 */
  .stage__meta { inset-inline-start: 16px; inset-block-start: 12px; max-inline-size: 74%; }
  .stage__name { font-size: 18px; }
  .stage__sub { max-block-size: 3.4em; overflow: hidden; }
  .stage__specs { margin-block-start: 10px; }
  .dock { inset-inline-end: 12px; inset-block-start: 12px; }
  .stage__hint { inset-block-start: auto; inset-block-end: 74px; }

  /* ---------- 资料卡：底部把手（默认折叠）+ 上滑抽屉 ---------- */
  .cardwrap { inset-block-end: 8px; padding-inline: 8px; }
  .card { inline-size: 100%; border-radius: 16px; }
  .card__head { padding: 8px 10px; gap: 8px; min-block-size: 56px; }
  .card__code { font-size: 10.5px; }
  .card__tag { display: none; }
  .card__tabs { gap: 2px; }
  .ctab { padding: 10px 11px; }
  .card__acts .act { padding: 11px; min-block-size: 44px; }
  .card__acts .act > span { display: none; }
  .card__fold { inline-size: 44px; block-size: 44px; }
  .card__body { max-block-size: 44vh; min-block-size: 0; padding: 16px 16px 18px; }
}

/* ---- ③ 矮屏（横屏手机）：抽屉打开时也留出画面 ---- */
@media (max-width: 1180px) and (max-height: 620px) {
  .card__body { max-block-size: 38vh; }
}

/* ---- ④ 修复：靠 hidden 属性控制显隐的元素被作者样式"抢"了 display ----
   `.gate{display:flex}` 与 `.quote{display:flex}` 的优先级高于浏览器默认的
   `[hidden]{display:none}`（作者样式恒胜 UA 样式），于是 JS 里
   `N.gate.hidden = true` 形同虚设：
   密码闸(311px) + 客户清单(77px) + 报价表单(326px) 三个**互斥**视图同时渲染、
   互相挤压——这是"抽屉里内容挤成一团、按钮压住表单"的根本原因（桌面同样存在）。
   属性选择器 + 类选择器优先级更高，放哪都生效。 */
.gate[hidden], .quote[hidden] { display: none; }

/* 视图互斥：密码闸是"步骤"，它出现时客户清单让位；进入店主模式后清单同样让位
   （报价单自带商品明细，不需要重复的清单和"交给店主确认"按钮）。 */
.gate:not([hidden]) ~ .cart__pane { display: none; }
html[data-role="owner"] .cart__pane { display: none; }

/* =============================================================
   ⑤ 手机上「待确认 / 报价」抽屉：为竖屏重新排版
   -------------------------------------------------------------
   不是把桌面版横向压窄，而是按手机重新分三区：
     · 头部（固定）：标题 + 关闭，一行说完
     · 主体（滚动）：清单 / 报价单，竖向有节奏
     · 动作栏（固定）：主操作整行，次操作两列 —— 不再挤成一条
   同时把所有触控目标提到 ≥44px。
   ============================================================= */
@media (max-width: 760px) {
  /* ---------- 头部 ---------- */
  .cart__head { padding: 13px 14px 12px; gap: 10px; align-items: flex-start; }
  .cart__title { font-size: 13.5px; letter-spacing: 0.08em; gap: 8px; }
  .cart__hint { margin-block-start: 5px; font-size: 11px; line-height: 1.5; }
  /* 关闭键：手机上也要够 44px 好点 */
  .cart__head .iconbtn { inline-size: 44px; block-size: 44px; flex: 0 0 auto; }

  /* ---------- 密码闸：只剩它一个视图，居中放大 ---------- */
  .gate { gap: 12px; padding: 26px 22px; }
  .gate__ico { inline-size: 40px; block-size: 40px; }
  .gate__title { font-size: 17px; margin-block-start: 4px; }
  .gate__hint { font-size: 12px; max-inline-size: none; }
  .gate__in { inline-size: min(268px, 76vw); block-size: 60px; font-size: 26px; }
  .gate__acts { gap: 12px; inline-size: min(268px, 76vw); }
  .gate__acts .btn { flex: 1 1 0; min-block-size: 48px; }

  /* ---------- 客户视角：清单 ---------- */
  .cart__body { padding: 12px; }
  .cart__list { gap: 10px; }
  .ci { grid-template-columns: minmax(0, 1fr) 44px; padding: 13px 8px 13px 14px; }
  .ci__name { font-size: 14px; }
  .ci__spec { white-space: normal; line-height: 1.5; }   /* 手机上允许换行，不再硬截断 */
  .ci__rm { inline-size: 44px; block-size: 44px; }
  .cart__empty { margin: 20px 8px; font-size: 12.5px; }
  .cart__foot { padding: 12px 14px 14px; }
  .cart__note { margin-block-end: 10px; font-size: 11px; }
  .cart__acts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .cart__acts .btn { inline-size: 100%; min-block-size: 48px; }

  /* ---------- 店主视角：报价单 ---------- */
  .qsec { padding: 16px 14px 4px; }
  .qsec + .qsec { margin-block-start: 4px; padding-block-start: 16px; }
  .qsec__title { font-size: 11px; margin-block-end: 12px; }
  .qgrid { gap: 12px; }
  /* ≥16px 可避免 iOS 聚焦时自动放大页面 */
  .fld__in { min-block-size: 48px; font-size: 16px; }
  .fld__k { font-size: 11px; }
  .fld__in--area { min-block-size: 84px; }
  .qsum { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .qtotal { grid-column: 1 / -1; align-items: flex-start; margin-block-start: 6px; }
  .qtotal__v { font-size: 30px; }

  .qitems { gap: 12px; }
  .qi { padding: 13px 12px 14px; }
  /* .qi__top 的 DOM 是 3 个子元素（编号 / 名称 / 删除），列数必须保持 3 列，
     只把删除键放大到 44px —— 写成 2 列会让名称被压成按钮宽度、只显示"WILL…" */
  .qi__top { grid-template-columns: auto minmax(0, 1fr) 44px; }
  .qi__name { font-size: 13.5px; white-space: normal; }
  .qi__rm { inline-size: 44px; block-size: 44px; }
  .qi__row { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-block-start: 12px; }
  .stepper { inline-size: 100%; }
  .stepper__btn { flex: 1 1 auto; inline-size: auto; }
  .qi__price { justify-content: space-between; gap: 10px; }
  .qi__price .fld__in { text-align: start; }
  .qi__sub { min-inline-size: 0; text-align: start; }

  .ai { grid-template-columns: minmax(0, 1fr) auto; row-gap: 10px; padding: 12px 10px 12px 13px; }
  .ai__btn { min-block-size: 44px; }

  /* ---------- 动作栏：主操作整行 + 次操作两列 ---------- */
  .quote__foot { padding: 12px 14px 14px; }
  .quote__acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .quote__acts .btn {
    min-block-size: 48px; min-inline-size: 0; padding-inline: 10px;
    font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .quote__acts .btn--primary { grid-column: 1 / -1; font-size: 14px; }
  /* 与头部关闭按钮功能重复，手机上收起，把高度留给表单 */
  #qExit { display: none; }
  .quote__err { margin-block-end: 8px; }
}