:root {
  --pri: #2f6fed; --pri-dark: #1e4fbf; --pri-soft: #e6eeff;
  --bg: #f6f8fb; --card: #fff; --line: #e3e8f0;
  --txt: #1c2433; --mut: #7a8699;
  --ok: #1fbf75; --warn: #e8a33d; --bad: #e05252;
  --radius: 10px; --shadow: 0 1px 3px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.04);
  --header-h: 60px;

  /* 三档布局（手机 / PC半屏 / PC全屏）共用的尺寸令牌。
     用变量而不是到处写魔法数字，改一处即可整体调档。 */
  --maxw: 1280px;      /* 内容最大宽度：全屏时放宽到 1440 */
  --pad-x: 20px;       /* 容器左右内边距 */
  --gap: 16px;         /* 栅格间距 */
  --card-pad: 18px;    /* 卡片内边距 */
  --viewer-h: 460px;   /* 3D 预览高度 */
  --touch: 44px;       /* 触控最小尺寸（iOS HIG） */

  /* iOS 安全区（刘海/圆角/Home 指示条）。非 iOS 环境下 env() 取不到值，回退 0。 */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
html {
  /* iOS 横屏时浏览器会自行放大文字，关掉以免字号跳变 */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  background: var(--bg); color: var(--txt); font-size: 14px;
  /* 100vh 在 iOS Safari 里包含地址栏高度，会导致底部被裁；dvh 取「动态可视高度」。
     老浏览器不认 dvh 时前面的 100vh 兜底。 */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex; flex-direction: column;
  /* 底部安全区：避免内容被 Home 指示条盖住 */
  padding-bottom: var(--safe-b);
  /* 注意：这里**不要**用 overflow-x:hidden 糊住横向溢出——
     它只是把问题藏起来，还会让溢出检测失效。真正的解是给可收缩容器
     min-width:0（见 .grid > *）与 max-width:100%（见 #trend canvas）。 */
}
a { color: var(--pri); text-decoration: none; }
#app { flex: 1; }

/* ============ 顶栏 ============ */
.topbar { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40; box-shadow: var(--shadow); }
.topbar-inner { max-width: var(--maxw); margin: 0 auto; display: flex; align-items: center; gap: 12px; height: var(--header-h);
  padding-left: calc(var(--pad-x) + var(--safe-l)); padding-right: calc(var(--pad-x) + var(--safe-r)); }
.brand { display: flex; align-items: center; gap: 8px; font-size: 16px; white-space: nowrap; }
/* 品牌名未解析前先隐藏，避免显示兜底名造成闪烁；解析后淡入 */
#brandName { transition: opacity .15s ease; }
#brandName.brand-pending { opacity: 0; }
.brand-logo { font-size: 20px; }
.topnav { display: flex; gap: 4px; flex: 1; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.topnav::-webkit-scrollbar { display: none; }
.topnav a { padding: 8px 14px; border-radius: 8px; color: var(--txt); white-space: nowrap; transition: background .15s, color .15s; min-height: 38px; display: inline-flex; align-items: center; }
.topnav a:hover { background: #eef3fb; }
.topnav a.active { background: var(--pri); color: #fff; }
.userbox { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.user-name { font-size: 13px; color: var(--mut); white-space: nowrap; }
.nav-toggle { display: none; background: none; border: 1px solid var(--line); border-radius: 8px; font-size: 20px; width: 44px; height: 44px; cursor: pointer; color: var(--txt); }

/* ============ 页脚 ============ */
/* 图表/画布类元素一律不许超出父容器（否则会反向撑破 grid 列） */
#trend, #trend > div, #trend canvas { max-width: 100% !important; }

.foot { background: #141a26; color: #aab3c5; margin-top: 32px;
  padding: 28px calc(var(--pad-x) + var(--safe-r)) calc(28px + var(--safe-b)) calc(var(--pad-x) + var(--safe-l)); }
.foot-inner { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; align-items: start; }
.foot-title { font-size: 15px; font-weight: 600; color: #fff; margin-bottom: 6px; }
.foot-desc { font-size: 13px; line-height: 1.7; max-width: 420px; }
.foot-links { display: flex; flex-direction: column; gap: 8px; }
.foot-links a { color: #cdd5e1; font-size: 13px; }
.foot-links a:hover { color: #fff; }
.foot-meta { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: #7d8798; }
.foot-support { margin-top: 12px; }
.foot-sup-title { font-size: 13px; color: #cdd5e1; margin-bottom: 4px; }
.foot-sup-line { font-size: 12px; color: #7d8798; line-height: 1.8; }

/* ============ 布局 ============ */
.container { max-width: var(--maxw); margin: 20px auto; width: 100%;
  padding-left: calc(var(--pad-x) + var(--safe-l)); padding-right: calc(var(--pad-x) + var(--safe-r)); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--card-pad); margin-bottom: var(--gap); box-shadow: var(--shadow); }
.grid { display: grid; gap: var(--gap); }
/* 关键：grid 子项默认 min-width:auto，只要里面有个「不肯变窄」的东西
   （ECharts 画布、长表格、nowrap 文本）就会把整列撑破视口。
   显式 min-width:0 才允许收缩——这是移动端横向溢出的头号原因。 */
.grid > *, .sidebar > * { min-width: 0; }
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.grow { flex: 1; }
.btn { display: inline-block; padding: 9px 18px; border: 0; border-radius: 8px; background: var(--pri); color: #fff; cursor: pointer; font-size: 14px; transition: background .15s; }
.btn:hover { background: var(--pri-dark); }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn-outline { background: transparent; color: var(--pri); border: 1px solid var(--pri); }
.btn-danger { background: var(--bad); }
.btn-ok { background: var(--ok); }
.btn-warn { background: var(--warn); color: #fff; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
input, select, textarea { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; width: 100%; background: #fff; }
label { font-size: 13px; color: var(--mut); display: block; margin: 8px 0 4px; }
h1 { font-size: 22px; margin: 0 0 6px; }
h2 { font-size: 17px; margin: 0 0 10px; }
h3 { font-size: 15px; margin: 6px 0; }
.mut { color: var(--mut); font-size: 13px; }
.small { font-size: 12px; }
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th, .table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.table th { color: var(--mut); font-weight: 500; background: #fafbfd; white-space: nowrap; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 12px; background: #eef1f6; color: var(--mut); }
.badge.ok { background: #e2f7ec; color: #138a55; }
.badge.warn { background: #fdf1dd; color: #b47a10; }
.badge.bad { background: #fdeaea; color: #c03d3d; }
.badge.pri { background: #e6eeff; color: var(--pri); }
.quote-line { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: 13px; }
.quote-total { display: flex; justify-content: space-between; padding-top: 10px; font-size: 18px; font-weight: 700; }

/* 尚未开始预估时的占位：一个数字都不显示，避免快速估算被当成最终报价 */
.quote-empty { text-align: center; padding: 26px 16px 22px; }
.quote-empty-icon { font-size: 30px; line-height: 1; margin-bottom: 10px; opacity: .85; }
.quote-empty-title { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.quote-empty p { margin: 0 auto; max-width: 340px; font-size: 13px; line-height: 1.7; }
.progress { height: 8px; background: #eef1f6; border-radius: 6px; overflow: hidden; }
.progress > div { height: 100%; background: var(--pri); border-radius: 6px; transition: width .5s; }
.dropzone { border: 2px dashed #b9c6dd; border-radius: 12px; padding: 40px 20px; text-align: center; color: var(--mut); cursor: pointer; transition: all .2s; }
.dropzone.drag { border-color: var(--pri); background: #f0f5ff; }
.toast { position: fixed; top: 74px; right: 24px; background: #1c2433; color: #fff; padding: 10px 18px; border-radius: 8px; opacity: 0; transition: opacity .3s; z-index: 99; max-width: 360px; }
.toast.show { opacity: 1; }
.toast.err { background: var(--bad); }
.toast.ok { background: var(--ok); }
.sidebar { display: grid; grid-template-columns: 200px 1fr; gap: 18px; align-items: start; }
.sidebar nav { position: sticky; top: calc(var(--header-h) + 12px); }
.sidebar nav a { display: block; padding: 10px 14px; border-radius: 8px; color: var(--txt); margin-bottom: 4px; min-height: 42px; display: flex; align-items: center; }
.sidebar nav a:hover { background: #eef3fb; }
.sidebar nav a.active { background: var(--pri); color: #fff; }
.canvas-wrap { width: 100%; height: var(--viewer-h); border: 1px solid var(--line); border-radius: 10px; position: relative; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, #ffffff 0%, #eef3f9 60%, #e4ebf4 100%); }
.canvas-wrap canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.canvas-wrap canvas.dragging { cursor: grabbing; }
canvas + .hint { position: absolute; left: 10px; bottom: 8px; font-size: 12px; color: var(--mut); }
/* 预览器悬浮控件：工具栏 / 尺寸读数 / 操作提示 */
.viewer-bar { position: absolute; top: 10px; right: 10px; display: flex; gap: 6px; z-index: 2; }
.viewer-btn { height: 30px; min-width: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px;
  background: rgba(255,255,255,.86); backdrop-filter: blur(6px); color: #33475b; font-size: 13px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; transition: background .15s, border-color .15s, color .15s; }
.viewer-btn:hover { background: #fff; border-color: var(--pri); color: var(--pri); }
.viewer-btn.on { background: var(--pri); border-color: var(--pri); color: #fff; }
.viewer-info { position: absolute; right: 12px; bottom: 10px; font-size: 12px; color: #4a5b6d; z-index: 2;
  background: rgba(255,255,255,.82); padding: 3px 9px; border-radius: 7px; backdrop-filter: blur(6px); }
.viewer-hint { position: absolute; left: 12px; bottom: 10px; font-size: 12px; color: #6b7c8f; z-index: 2;
  background: rgba(255,255,255,.82); padding: 3px 9px; border-radius: 7px; backdrop-filter: blur(6px); }
.viewer-legend { display: flex; gap: 14px; margin-top: 6px; }
.viewer-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }
.viewer-legend .lg-over { background: #e05555; }
.viewer-legend .lg-thin { background: #e8a33d; }
.tab { display: flex; gap: 6px; border-bottom: 1px solid var(--line); margin-bottom: 14px; overflow-x: auto; }
.tab a { padding: 9px 14px; color: var(--mut); border-bottom: 2px solid transparent; white-space: nowrap; }
.tab a.active { color: var(--pri); border-bottom-color: var(--pri); font-weight: 600; }
.metric { text-align: center; padding: 14px 8px; }
.metric .num { font-size: 26px; font-weight: 700; color: var(--pri); }
.metric .lbl { color: var(--mut); font-size: 12px; margin-top: 4px; }
.steps { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--mut); margin-bottom: 12px; flex-wrap: wrap; }
.steps b { color: var(--pri); }
.kv { display: flex; justify-content: space-between; font-size: 13px; padding: 4px 0; }
.auth-wrap { max-width: 420px; margin: 40px auto; }
.captcha-row { display: flex; gap: 10px; align-items: center; }
.captcha-row svg { border: 1px solid var(--line); border-radius: 8px; cursor: pointer; height: 40px; width: 120px; }

/* ============================================================
   响应式：三档观感目标
     ① PC 全屏  ≥1401px   —— 更宽画布、更松间距
     ② PC 半屏  821~1400px —— 两列并排（1920 的半屏 960px 属于这一档）
     ③ 手机     ≤640px    —— 移动导航、44px 触控、16px 输入防自动放大
   （641~820px 为平板竖屏的过渡档：单列 + 桌面导航）
   ============================================================ */

/* ---------- ① PC 全屏 ---------- */
@media (min-width: 1401px) {
  :root { --maxw: 1440px; --gap: 20px; --card-pad: 20px; --viewer-h: 520px; }
}

/* ---------- ② PC 半屏 ---------- */
/* 四列/三列在半屏下会挤成一团，降为两列；grid-2 保持并排 */
@media (max-width: 1400px) {
  /**
   * 宽表横向滚动必须**同时覆盖 PC 半屏**（821~1400），不能只在 ≤820 手机档生效。
   * 原先该规则只在手机档，实测 960px 视口下订单表撑破页面
   * （scrollWidth 超出 innerWidth，表格没有可滚动容器）。
   * 这里把同一规则提到半屏档；手机档仍保留下方那份（含更紧凑的内边距）。
   */
  .table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
    white-space: nowrap; overscroll-behavior-x: contain; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- 平板竖屏过渡档 ---------- */
@media (max-width: 820px) {
  :root { --pad-x: 14px; --gap: 12px; --card-pad: 14px; --viewer-h: 360px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .sidebar { grid-template-columns: 1fr; }
  .sidebar nav { position: static; display: flex; flex-wrap: wrap; gap: 6px; }
  .sidebar nav a { margin-bottom: 0; }
  .foot-inner { grid-template-columns: 1fr; gap: 20px; }
  /* 宽表横向滚动：加惯性滚动与「滚到头不带动整页」的边界控制 */
  .table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
    white-space: nowrap; overscroll-behavior-x: contain; }
  .table th, .table td { padding: 8px; }
}

/* ---------- ③ 手机（iPhone 竖屏 390~430，含 SE 375） ---------- */
@media (max-width: 640px) {
  :root { --header-h: 54px; --pad-x: 12px; --gap: 10px; --card-pad: 13px; --viewer-h: 300px; }

  /* 正文略放大，接近 iOS 正文 17pt 的观感 */
  body { font-size: 15px; line-height: 1.6; }
  h1 { font-size: 20px; }
  h2 { font-size: 16px; }
  h3 { font-size: 15px; }

  /* 关键：iOS Safari 在输入框字号 <16px 时会「聚焦自动放大」整页，
     用户得手动缩回去，手感极差。这里强制 16px 从根上消除该行为。 */
  input, select, textarea { font-size: 16px; min-height: var(--touch); }
  .btn { min-height: var(--touch); padding: 10px 16px; }
  /* iOS HIG：可点区域最小 44×44pt。小按钮同样按 44 高，只收窄左右内边距 */
  .btn-sm { min-height: var(--touch); padding: 8px 12px; font-size: 14px; }
  /* 表格内的操作按钮组例外：一格里挤多个按钮时 44 高会把行撑得很高，
     这里保底 38px 并靠加大间距保证不误触 */
  .act-cell .btn-sm, .act-group .btn-sm { min-height: 38px; padding: 6px 10px; }
  /* 长按/点击高亮在 iOS 上是灰色块，去掉更干净 */
  .btn, .topnav a, .sidebar nav a, .viewer-btn, .tab a { -webkit-tap-highlight-color: transparent; }

  /* 移动导航：抽屉式，占满宽度、考虑安全区与滚动 */
  .topbar-inner { padding-left: calc(12px + var(--safe-l)); padding-right: calc(12px + var(--safe-r)); }
  .nav-toggle { display: block; }
  .brand { font-size: 15px; }
  .user-name { display: none; }
  .topnav {
    position: fixed; top: var(--header-h); left: 0; right: 0;
    background: #fff; border-bottom: 1px solid var(--line);
    flex-direction: column; align-items: stretch; padding: 8px 12px calc(8px + var(--safe-b));
    display: none; max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
    box-shadow: 0 8px 22px rgba(16,24,40,.14);
  }
  .topnav.open { display: flex; }
  .topnav a { padding: 12px 14px; min-height: var(--touch); font-size: 16px; }

  /* 栅格与卡片 */
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  /* 指标/机台卡在手机上一列一个太浪费：数字本身很短，两列更好读也更省滚动 */
  .grid-4 { grid-template-columns: repeat(2, 1fr); }

  /* 侧边菜单在手机上原来是「换行铺满」——13 项要占掉整整一屏，
     用户得先滚过菜单才看得到内容。改成**横向滚动的一行**并吸顶。 */
  .sidebar nav {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    gap: 8px; padding: 4px 0 8px; scrollbar-width: none;
    position: sticky; top: var(--header-h); z-index: 5;
    background: var(--bg); margin: 0 calc(-1 * var(--pad-x)); padding-left: var(--pad-x); padding-right: var(--pad-x);
  }
  .sidebar nav::-webkit-scrollbar { display: none; }
  .sidebar nav a { flex: 0 0 auto; white-space: nowrap; margin-bottom: 0; padding: 10px 14px; }
  .card { border-radius: 12px; }
  .row { gap: 8px; }
  /* 表单行在手机上改成整行堆叠，避免控件被压成一条 */
  .row > input:not([style*="width"]), .row > select:not([style*="width"]) { flex: 1 1 100%; }

  /* 3D 预览：控件缩小并上移，别挡住模型；提示语在窄屏下省掉 */
  .viewer-bar { top: 8px; right: 8px; gap: 4px; }
  .viewer-btn { height: 34px; min-width: 38px; padding: 0 9px; font-size: 12px; }
  .viewer-info { right: 8px; bottom: 8px; font-size: 11px; }
  .viewer-hint { display: none; }
  .canvas-wrap { border-radius: 12px; }
  .viewer-legend { gap: 10px; font-size: 12px; }

  /* 指标卡：两列排布，避免一屏一个数字 */
  .grid-4 .metric, .metric { padding: 10px 6px; }
  .metric .num { font-size: 22px; }

  /* 底部按钮组：主操作按钮更容易点 */
  .form-actions, .act-group { flex-wrap: wrap; gap: 8px; }

  /* 提示条：手机上居中显示并留出左右安全区 */
  .toast { left: calc(12px + var(--safe-l)); right: calc(12px + var(--safe-r)); top: auto; bottom: calc(16px + var(--safe-b));
    max-width: none; text-align: center; }

  /* 宽表在手机上是横向滚动，滑到右边就看不到「这是哪一单」了。
     把首列（订单号/名称等标识列）吸附在左侧，滑动时始终可见。
     背景必须不透明，否则下层单元格会透出来。 */
  .table th:first-child, .table td:first-child {
    position: sticky; left: 0; z-index: 2;
    background: var(--card);
    box-shadow: 1px 0 0 var(--line);
  }
  .table th:first-child { background: #fafbfd; z-index: 3; }

  /* 报价明细：金额与名称靠两端，长名称允许换行 */
  .quote-line { gap: 10px; }
  .quote-line > span { min-width: 0; word-break: break-word; }
  .quote-total { font-size: 17px; }

  .foot { padding-top: 22px; }
  .dropzone { padding: 28px 14px; }
  .tab a { padding: 10px 12px; font-size: 14px; }
  .steps { font-size: 11px; }
}

/* 极窄屏（iPhone SE 第一代 320px）：进一步压缩 */
@media (max-width: 360px) {
  :root { --pad-x: 10px; }
  .brand span:not(.brand-logo) { display: none; }
  .metric .num { font-size: 20px; }
}

/* ---------- 全局图片灯箱 + 图片卡片（任务十） ---------- */
.img-card { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--card); }
.img-card img { display: block; width: 100%; height: 120px; object-fit: cover; cursor: zoom-in; }
.img-card .cap { padding: 6px 10px; font-size: 12px; color: var(--mut); }
.lightbox { position: fixed; inset: 0; z-index: 999; background: rgba(0,0,0,.85); display: flex; align-items: center; justify-content: center; padding: 20px; animation: lbIn .18s ease; }
.lightbox img { max-width: 92vw; max-height: 88vh; border-radius: 8px; box-shadow: 0 8px 40px rgba(0,0,0,.5); transform-origin: center; transition: transform .08s ease; cursor: zoom-out; }
@keyframes lbIn { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 768px) { .lightbox img { max-width: 96vw; max-height: 92vh; } }

/* 说明：曾用 .table-fixed（table-layout:fixed + colgroup）稳定列宽，
   但它会把「模型」列的下载按钮裁切并压到相邻列上，观感更差，已回退为浏览器自动布局；
   列宽问题改用「收敛文案长度」解决（见 admin.js 的短标签与 fStatusLblShort）。 */

/* 问题4：勾选框统一样式——此前各处内联 16~18px，视觉过大且不齐 */
.sw { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; user-select: none; line-height: 1.5; }
.sw input[type="checkbox"] { width: 14px; height: 14px; margin: 0; flex: 0 0 auto; accent-color: var(--pri, #2b6cff); cursor: pointer; }
.sw .sw-txt { white-space: nowrap; }
label > input[type="checkbox"], p > input[type="checkbox"] { width: 14px; height: 14px; margin: 0 4px 0 0; vertical-align: -2px; accent-color: var(--pri, #2b6cff); }

/* 问题4：通知模板卡片——键名与正文分层，避免整屏长文本框堆叠 */
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.tpl-card { border: 1px solid var(--line, #e6e8ee); border-radius: 10px; padding: 12px 14px; background: #fff; }
.tpl-card h4 { margin: 0 0 2px; font-size: 14px; }
.tpl-card .tpl-key { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: var(--mut, #77808f); }
.tpl-card textarea { width: 100%; min-height: 76px; margin-top: 8px; font-size: 13px; line-height: 1.6; }
.tpl-card .tpl-meta { margin-top: 6px; font-size: 12px; color: var(--mut, #77808f); }
.tpl-card .tpl-meta code { background: #f2f4f8; border-radius: 4px; padding: 1px 5px; margin-right: 4px; }

/* 问题4：通知模板卡片内部排版 */
.tpl-card .tpl-lbl { display: block; margin-top: 8px; font-size: 12px; color: var(--mut, #77808f); }
.tpl-card input[data-tpl], .tpl-card textarea[data-tpl] { width: 100%; }
.tpl-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.tpl-foot .tpl-meta { margin-top: 0; }
.seg { flex-wrap: wrap; }

/* 问题3：订单详情质检照片块——独占一行、左对齐（原先嵌在 .kv 里被挤到右侧） */
.qc-photos-block { display: block; width: 100%; padding: 4px 0; font-size: 13px; }
.qc-photo-row { justify-content: flex-start; align-items: flex-start; text-align: left; width: 100%; }

/* 订单表操作列——横向换行排列，按钮内文字不折行 */
.act-cell { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-start; }
.act-cell .btn { white-space: nowrap; }
/* 模型列的下载按钮不折行、不被压到相邻列 */
.table td .btn { white-space: nowrap; }

/* 通用提示条（切片排队提示等） */
.notice { padding: 8px 11px; border-radius: 8px; font-size: 13px; line-height: 1.55; }
.notice b { font-weight: 600; }
.notice-warn { background: #fff8e6; border: 1px solid #f0d9a0; color: #7a5a00; }
.notice-info { background: #eef4ff; border: 1px solid #c9dcff; color: #24457a; }
.notice-ok { background: #eefaf1; border: 1px solid #bfe6cb; color: #1f6b3a; }