/* =============================================================
   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;
  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; }
}