/* ==========================================================================
   智境凡创 · 设计系统 (Design Tokens & Base Components)
   配色参考：绿米 Aqara 的科技蓝紫 + 路创 Lutron 的深空墨黑与克制留白
   ========================================================================== */

:root {
  /* 小标签统一排版 */
  --label-font: var(--font);
  --label-size: 12.5px;
  --label-weight: 600;

  /* 深色（Aqara 式纯黑层次：只用黑与近黑，不用蓝调） */
  --ink-950: #000000;
  --ink-900: #0A0A0A;
  --ink-850: #141414;
  --ink-800: #1C1C1E;
  --ink-750: #232326;
  --ink-700: #2C2C2E;
  --ink-600: #3A3A3C;

  /* 浅色中性（白 + 浅灰区块） */
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #F5F5F7;
  --surface-3: #EDEDF0;
  --line: #E5E5E5;
  --line-2: #F0F0F0;
  --line-dark: rgba(255, 255, 255, 0.12);
  --line-dark-2: rgba(255, 255, 255, 0.06);

  /* 文本（黑 / 中灰 / 浅灰三档） */
  --text-1: #0A0A0A;
  --text-2: #3F3F45;
  --text-3: #5C5C64;
  --text-hi: #FFFFFF;
  --text-mid: #B9B9BF;
  --text-low: #4F4F57;

  /* 品牌与语义色：单一鲜绿强调 + 中性语义色 */
  --brand: #00B578;
  --brand-600: #009E68;
  --brand-700: #00875A;
  --brand-050: #E9F8F2;
  --brand-100: #D2F1E5;
  --cyan: #0A84FF;
  --gold: #C89B3C;
  --green: #00A06A;
  --green-bg: #E9F8F2;
  --red: #E5484D;
  --red-bg: #FDEDED;
  --amber: #D97706;
  --amber-bg: #FFF7E6;
  --grad-brand: linear-gradient(135deg, #00C98A 0%, #00B578 100%);
  --grad-ink: linear-gradient(160deg, #000000 0%, #1C1C1E 60%, #0A0A0A 100%);
  --grad-gold: linear-gradient(135deg, #E0C078, #B98F2E);

  /* ---------------------------------------------------------------- 顶部深色暖调渐变
     v1.27.0：原来只写在 site.css 的 :root 里，**后台与订货系统没引 site.css，取不到**。
     用户要求「把后台顶部的底色调整和首页顶部底色一致」——
     要真一致，就得让三处（首页页头 / 后台顶栏 / 订货系统顶栏）用**同一个变量**，
     而不是在 admin.css 里再抄一份渐变（抄一份，以后调色就会漂移）。
     故上移到 base.css（三端都引用的公共层），site.css 里那份重复定义已删除。 */
  --top-grad:
    radial-gradient(120% 180% at 100% 130%, rgba(226, 165, 104, .55) 0%, rgba(226, 165, 104, 0) 58%),
    radial-gradient(90% 150% at 88% 120%, rgba(140, 92, 62, .55) 0%, rgba(140, 92, 62, 0) 62%),
    linear-gradient(118deg, #100A0D 0%, #1E1216 26%, #3A2124 52%, #5C3626 74%, #7E4F33 100%);
  --top-text: rgba(255, 255, 255, .92);
  --top-text-2: rgba(255, 255, 255, .66);
  --top-line: rgba(255, 255, 255, .12);
  --top-accent: #FFD9AE;
  --top-amber: linear-gradient(135deg, #F6C089, #E39A5A);
  --top-amber-2: linear-gradient(135deg, #F6C089, #E3C25C);

  /* ---------------------------------------------------------- 配色主题令牌
     v1.40.0：后台「网站背景图 → 配色主题」卡片可自定义的「底色」指令集。
     这一组**不是**新的视觉层，而是把原来写死在各处的底色抽成变量：

       · 这里写的是**内置默认值**（= 升级前的原始外观）；
       · 保存过自定义配色后，core.js 会往 <head> 注入 <style id="theme-vars">
         覆盖同一批变量（按 body.site / body.console 分作用域）；
       · 从没保存过 → 没人覆盖 → 页面与升级前逐像素一致。

     ⚠️ 用法固定为 `var(--theme-xxx, 兜底)`：万一某个变量的值本身不可用
     （例如被写成非法的颜色），浏览器会退回兜底值，而不是让该属性失效。
     `--theme-site-top` / `--theme-site-page` 的默认是渐变，用 var() 嵌套引用；
     用户一旦在后台选了自己的颜色，注入的就是纯色 rgba，渐变整体被替换 ——
     这正是「自定义页面底色」要的效果。 */
  --theme-site-top: var(--top-grad);              /* 前端：页头 / 首屏 */
  --grad-site-page: linear-gradient(180deg,       /* 前端页面底色的原始渐变（v1.10.1 黑→金） */
      #07070A 0%,
      #120E09 14%,
      #2A2113 30%,
      #5C4720 48%,
      #8E7028 64%,
      #B8902F 78%,
      #D4AF37 91%,
      #E3C25C 100%);
  /* v1.46.7：前端页面底色由「黑→金渐变」（露出来就是米黄/金色）改为深灰 #3E3E45、不透明度 80%；
     渐变定义 --grad-site-page 保留（site.css 的 var() 兜底仍引用），后台「配色主题」自定义仍可整体替换 */
  /* v1.65.415：页面底色 = #07070A（不透明近黑）—— 与 site.css body.site 实际渲染一致。
     改前这里是 rgba(62,62,69,.8)，但那条规则里紧跟的
     `background-color:#07070A!important` 把它整体闷死了，从未生效过；
     令牌默认值必须等于真实渲染，否则后台一保存就把外观换掉。 */
  --theme-site-page: #07070A;                    /* 前端：页面整体底色 */
  /* v1.65.415：区块底色 = 「暖黑底 #170E0B + 首屏同款 --top-grad 渐变」复合值
     （site.css 末尾 v1.65.111 块的真实渲染）。改前这里是 rgba(255,255,255,.52)，
     与真实规则不符——后台改任何令牌再保存，区块就被换成这层从未生效的白纱。
     ⚠️ background 简写多图层时，background-color 只能放最后一个图层段：
     `#170E0B var(--top-grad)` 颜色落在渐变段前，整条声明无效（实测透明）；
     必须写成 `var(--top-grad) #170E0B`（渐变在前、颜色置后）。 */
  --theme-site-section: var(--top-grad) #170E0B; /* 前端：区块底色 */
  --theme-site-section-alt: linear-gradient(rgba(0, 0, 0, .18), rgba(0, 0, 0, .18)), var(--top-grad) #120B09; /* 前端：交替区块底色 */
  --theme-site-card: #FFFFFF;                     /* 前端：卡片底色 */
  --theme-site-footer: rgba(6, 6, 9, .94);        /* 前端：页脚底色 */
  --theme-site-text: #0A0A0A;                     /* 前端：正文文字色 */
  --theme-site-brand: #00B578;                    /* 前端：品牌强调色 */
  --theme-admin-page: #3E3E45;                    /* 后端：工作台底色 */
  /* v1.48.7：顶栏底色默认改为「跟随工作台底色」（用户要求：把顶栏底色调整成和下面一样）。
     原默认 var(--top-grad)（与官网首页同源的暖调渐变）—— 现在没自定义时顶栏 = 页面深灰；
     后台「配色主题 → 顶栏底色」仍可单独自定义（注入 --theme-admin-top 即覆盖）。 */
  --theme-admin-top: var(--theme-admin-page, #3E3E45);   /* 后端：顶栏底色 */
  --theme-admin-side: #3E3E45;                    /* 后端：侧边栏底色 */
  --theme-admin-surface: #F3F4F6;                 /* 后端：卡片底色 */
  --theme-admin-brand: #00B578;                   /* 后端：强调色 */

  /* 尺寸：1200 居中栅格 + 大留白 */
  --container: 1200px;
  --container-wide: 1320px;
  --container-narrow: 900px;
  --header-h: 68px;
  /* v1.65.203：外框直角锁定（终版，承接 v1.65.192 / v1.65.198 两次只做了一半的改动）。
     v1.65.192 只改了提示气泡、v1.65.198 只归零了中/大圆角变量，两次都留下尾巴：
       · --radius-xs（小按钮/图标）与 --radius-pill（胶囊标签/主按钮）仍是圆的；
       · 大量**写死 px** 的圆角根本不吃变量（约 200 处，如卡片内胆、缩略图、
         输入框、admin 面板…），所以用户仍不断在各种截图里指出「还有圆角外框」。
     本轮按用户原话把口径统一成一句话：
       除「功能圆形」外，全站一切外框一律直角。
     实现分两步：
       ① 变量归零（这里）—— 所有走 var(--radius*) 的组件一次性拉直；
       ② 写死的 px / 999px 就地扫成 0（base/site/admin/login/portal 五个样式表 +
         JS 内联样式），共 205 处。
     ⚠️ 唯一豁免（不是「外框」，削角会坏功能/观感）：
        · 开关轨道与圆钮（.switch，admin 里为 .pf-wrap .switch）
        · 进度条（.progress / .progress > i）
        · 滚动条滑块（::-webkit-scrollbar-thumb）
        · 所有 border-radius: 50% 的圆形（头像、单选圆点、时间线节点、支付图标…）
        · .eyebrow::before / .step::before 两条 2~3px 装饰细线 */
  --radius-xs: 0;
  --radius-sm: 0;
  --radius: 0;
  --radius-lg: 0;
  --radius-xl: 0;
  --radius-pill: 0;

  /* 阴影：极轻，靠留白与描边分层 */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.05);
  --shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 28px 60px -26px rgba(0, 0, 0, 0.22);
  --shadow-brand: 0 14px 34px -16px rgba(0, 181, 120, 0.5);

  /* 字体：v1.65.24 应用户要求默认适配微软雅黑（Windows 上全局优先生效），
     macOS 等无雅黑环境回退苹方 / 冬青黑体，再退系统无衬线 */
  --font: "Microsoft YaHei", "微软雅黑", "PingFang SC", "Hiragino Sans GB", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-num: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* 字号阶梯（Aqara 式大标题 + 克制的正文） */
  --fs-h1: 56px;
  --fs-h2: 40px;
  --fs-h3: 28px;
  --fs-h4: 21px;
  --fs-body: 16px;
  --fs-sm: 14px;
  --fs-xs: 12.5px;
  --lh-tight: 1.1;
  --lh-heading: 1.2;
  --lh-body: 1.7;
}


/* ------------------------------------------------------------------ Reset */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* v1.15.1【仅移动端】禁止整页横向溢出
   —— 现象：微信里打开产品中心等页面，整页内容被压到左侧约一半宽度，
      右侧露出一片黑边，横向标签（产品分类）被硬切断，页头汉堡按钮被顶出屏幕。
   —— 根因：任何一个子元素（页头按钮组、宽表格、nowrap 文本）超出视口宽度，
      浏览器会把文档整体撑宽到内容宽度再排版，于是视口内只显示左侧一段、右侧是空白。
   —— 修法：移动端锁死横向溢出（PC 端不改，保持原有行为）。
      注意 overflow-x:hidden 会让 position:sticky 失效，
      所以只在 <html> 上加、<body> 保持 visible，页头 sticky 仍可用。 */
@media (max-width: 760px) {
  /* v1.64.2：锁死整页横向溢出。
     `overflow-x: hidden` 会创建滚动容器、连带让 position: fixed 失效
     （订货单悬浮条钉不住底部），故在后面追加 `overflow-x: clip`：
     clip 不创建滚动容器，裁掉横向溢出且**不破坏 fixed 定位**。
     写两条是为了兼容不支持 clip 的旧浏览器（届时 hidden 生效，退回原行为）。 */
  html { overflow-x: hidden; }
  html { overflow-x: clip; width: 100%; }
  /* 明确的滚动容器仍允许内部横向滑动（如产品分类条、宽表格） */
  .fs-strip, .table-scroll, .table-wrap, .chips-scroll { overflow-x: auto; }
}

/* v1.64.2：视口渐变底色从 body 移到 html
   原因：`background: linear-gradient(...) fixed` 中的 **fixed 关键字**
   会使 body 成为 fixed 定位元素的**包含块**，导致挂在 body 内的
   `position: fixed` 元素（如订货单悬浮条）**退化**、不再钉在视口底部 ——
   表现为「怎么改 position 都不生效」。
   渐变移到 html 后，body 不再含 fixed 背景，固定定位恢复正常。
   视觉完全一致（html/body 均铺满视口，背景色继承）。 */
html {
  background: linear-gradient(180deg,
      #07070A 0%,
      #120E09 14%,
      #2A2113 30%,
      #5C4720 48%,
      #8E7028 64%,
      #B8902F 78%,
      #D4AF37 91%,
      #E3C25C 100%) fixed no-repeat;
  background-color: #07070A;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-1);
  background: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5 {
  margin: 0 0 .6em;
  font-weight: 700;
  /* v1.65.415：标题色走「配色主题 → 正文文字色」令牌（未自定义时 = --ink-950，
     外观不变；后台/官网三端通用，令牌只在 body.site 注入，后台不受影响） */
  color: var(--theme-site-text, var(--ink-950));
  letter-spacing: -0.02em;
  line-height: var(--lh-heading);
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h1 { font-size: clamp(30px, 4.4vw, 54px); font-weight: 700; letter-spacing: -0.03em; }
h2 { font-size: clamp(24px, 2.7vw, 36px); }
h3 { font-size: clamp(18px, 1.7vw, 22px); }
h4 { font-size: 17px; }
p { margin: 0 0 1em; }
a { color: inherit; text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--brand); }
img, svg, video { max-width: 100%; display: block; }
ul, ol { margin: 0 0 1em; padding-left: 1.25em; }
li { margin-bottom: .35em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
table { border-collapse: collapse; width: 100%; }
hr { border: none; border-top: 1px solid var(--line); margin: 28px 0; }
::selection { background: var(--brand); color: #fff; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 0;
}

/* 滚动条 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #C6CFDE; border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #A9B4C6; background-clip: content-box; }

/* --------------------------------------------------------------- 布局工具 */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.container-narrow { width: 100%; max-width: var(--container-narrow); margin: 0 auto; padding: 0 24px; }
.section { padding: 84px 0; }
.section-sm { padding: 56px 0; }
.section-lg { padding: 110px 0; }
.section-dark { background: var(--ink-900); color: var(--text-hi); }
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 { color: #fff; }
.section-dark p { color: var(--text-mid); }
.section-soft { background: var(--bg); }
.section-line { border-top: 1px solid var(--line); }

.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.flex { display: flex; }
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.gap-4 { gap: 4px; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; }
.gap-16 { gap: 16px; } .gap-20 { gap: 20px; } .gap-24 { gap: 24px; } .gap-32 { gap: 32px; }
.mt-0 { margin-top: 0; } .mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; } .mt-48 { margin-top: 48px; }
.mb-0 { margin-bottom: 0; } .mb-8 { margin-bottom: 8px; } .mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; } .mb-32 { margin-bottom: 32px; } .mb-48 { margin-bottom: 48px; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-2 { color: var(--text-2); }
.text-3 { color: var(--text-3); }
.text-brand { color: var(--brand); }
.text-green { color: var(--green); }
.text-red { color: var(--red); }
.text-amber { color: var(--amber); }
.text-sm { font-size: 13px; }
.text-xs { font-size: 12px; }
.text-lg { font-size: 17px; }
.fw-500 { font-weight: 500; } .fw-600 { font-weight: 600; } .fw-700 { font-weight: 700; }
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-num); letter-spacing: -0.02em; }
.hide { display: none !important; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.divider { height: 1px; background: var(--line); margin: 20px 0; }

/* --------------------------------------------------------------- 章节标题 */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--brand); margin-bottom: 14px;
}
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--grad-brand); border-radius: 2px; }
.section-dark .eyebrow { color: var(--cyan); }
.section-head { max-width: 720px; margin-bottom: 44px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head p { font-size: 16px; color: var(--text-2); margin: 12px 0 0; }
.section-dark .section-head p { color: var(--text-mid); }

/* ------------------------------------------------------------------ 按钮 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0 22px; height: 46px; border-radius: var(--radius-pill);
  font-size: 14.5px; font-weight: 600; white-space: nowrap;
  border: 1px solid transparent; background: var(--surface-2); color: var(--text-1);
  transition: all .22s var(--ease); user-select: none;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled, .btn.is-disabled { opacity: .5; pointer-events: none; }
.btn-primary { background: var(--brand); color: #fff; box-shadow: var(--shadow-brand); }
.btn-primary:hover { background: var(--brand-600); color: #fff; }
.btn-grad { background: var(--grad-brand); color: #fff; box-shadow: var(--shadow-brand); }
.btn-grad:hover { color: #fff; filter: brightness(1.06); }
.btn-dark { background: var(--ink-900); color: #fff; }
.btn-dark:hover { background: var(--ink-750); color: #fff; }
.btn-ghost { background: transparent; border-color: var(--line); }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-050); }
.btn-light { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .22); backdrop-filter: blur(8px); }
.btn-light:hover { background: rgba(255, 255, 255, .2); color: #fff; }
.btn-white { background: #fff; color: var(--ink-900); }
.btn-white:hover { color: var(--brand); }
.btn-sm { height: 36px; padding: 0 15px; font-size: 13px; }
.btn-xs { height: 30px; padding: 0 12px; font-size: 12.5px; border-radius: var(--radius-xs); gap: 4px; }
.btn-lg { height: 54px; padding: 0 30px; font-size: 16px; }
.btn-block { width: 100%; }
.btn-danger { background: var(--red-bg); color: var(--red); }
.btn-danger:hover { background: var(--red); color: #fff; }
/* 浅紫色（品牌淡底）按钮：用于「保存订单」等次级主操作 */
.btn-soft { background: var(--brand-050); color: var(--brand); border-color: var(--brand-100); }
.btn-soft:hover { background: var(--brand-100); color: var(--brand-600); border-color: var(--brand-100); }
/* 危险动作（删除等）：幽灵按钮 + 红色文字 */
.btn-ghost.is-danger { color: var(--red); border-color: var(--line); }
.btn-ghost.is-danger:hover { color: #fff; background: var(--red); border-color: var(--red); }
.btn-icon { width: 38px; height: 38px; padding: 0; border-radius: var(--radius-sm); background: transparent; }
.btn-icon:hover { background: var(--surface-2); }
.btn-text { background: none; color: var(--brand); padding: 0 4px; height: auto; }
.btn-text:hover { text-decoration: underline; }
.btn-group { display: inline-flex; gap: 8px; flex-wrap: wrap; }

.arrow-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--brand); }
.arrow-link::after { content: "→"; transition: transform .25s var(--ease); }
.arrow-link:hover::after { transform: translateX(4px); }

/* ------------------------------------------------------------------ 卡片 */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-xs);
  transition: box-shadow .28s var(--ease), transform .28s var(--ease), border-color .28s var(--ease);
}
.card-pad { padding: 24px; }
.card-hover:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--brand-100); }
.card-dark { background: var(--ink-850); border-color: var(--line-dark); color: var(--text-hi); }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 22px; border-bottom: 1px solid var(--line-2);
}
.panel-head h3, .panel-head h4 { margin: 0; }
.panel-body { padding: 22px; }

/* ------------------------------------------------------------------ 徽标 */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--radius-pill);
  font-family: var(--label-font); font-size: var(--label-size); font-weight: var(--label-weight); line-height: 1.6;
  background: var(--surface-2); color: var(--text-2); white-space: nowrap;
}
.badge-brand { background: var(--brand-050); color: var(--brand-700); }
.badge-dark { background: var(--ink-800); color: var(--text-hi); }
.badge-green { background: var(--green-bg); color: var(--green); }
.badge-red { background: var(--red-bg); color: var(--red); }
.badge-amber { background: var(--amber-bg); color: var(--amber); }
.badge-blue { background: #E8F3FF; color: #1B6FD1; }
.badge-gray { background: var(--surface-3); color: var(--text-2); }
.badge-gold { background: linear-gradient(135deg, #FBF1DA, #F3E0B4); color: #8A6516; }
.badge-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.tag {
  display: inline-block; padding: 4px 10px; border-radius: var(--radius-xs);
  background: var(--surface-2); color: var(--text-2); font-size: 12.5px;
}
.tag-outline { background: transparent; border: 1px solid var(--line); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 16px; border-radius: var(--radius-pill);
  background: var(--surface); border: 1px solid var(--line);
  font-size: 13.5px; color: var(--text-2); cursor: pointer;
  transition: all .2s var(--ease); white-space: nowrap;
}
.chip:hover { border-color: var(--brand); color: var(--brand); }
.chip.is-active { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }

/* ------------------------------------------------------------------ 表单 */
.field { margin-bottom: 18px; }
.field > label, .label {
  display: block; margin-bottom: 7px;
  font-size: 13.5px; font-weight: 600; color: var(--text-2);
}
.label .req { color: var(--red); margin-left: 3px; }
.hint { font-size: 12.5px; color: var(--text-3); margin-top: 6px; line-height: 1.6; }

.input, .select, .textarea {
  width: 100%; padding: 0 14px; height: 44px;
  background: var(--surface); color: var(--text-1);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
  font-size: 14.5px;
}
.textarea { height: auto; min-height: 110px; padding: 12px 14px; line-height: 1.7; resize: vertical; }
/* 单行高度文本域：订单备注等只需一行，聚焦占位提示，需要时可向上拖高 */
.textarea.textarea-single {
  height: 42px; min-height: 42px; padding: 9px 14px; line-height: 22px;
  resize: vertical; overflow-y: auto;
}
.input:hover, .select:hover, .textarea:hover { border-color: #CBD5E4; }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(75, 91, 247, .14);
}
.input::placeholder, .textarea::placeholder { color: #A6B0C2; }
.input:disabled, .select:disabled { background: var(--surface-2); color: var(--text-3); cursor: not-allowed; }
/* v1.65.53：只读（值由系统自动获取，不允许人工改写）—— 可选中复制、但不可编辑 */
.input.is-readonly { background: var(--surface-2); color: var(--text-2); cursor: default; }
.input.is-readonly:focus { border-color: var(--line-2); box-shadow: none; }
.select {
  appearance: none; padding-right: 38px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%238792A6' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.input-group { display: flex; gap: 10px; }
.input-group .input { flex: 1; }
.input-icon { position: relative; }
.input-icon .input { padding-left: 40px; }
.input-icon svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-3); }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.form-grid .col-span-2 { grid-column: span 2; }
.form-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 18px; }

.checkbox, .radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; color: var(--text-2); }
.checkbox input, .radio input { width: 16px; height: 16px; accent-color: var(--brand); cursor: pointer; }

.switch { position: relative; display: inline-block; width: 42px; height: 24px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span {
  position: absolute; inset: 0; background: #CBD5E4; border-radius: 999px;
  transition: background .22s var(--ease); cursor: pointer;
}
.switch span::before {
  content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; transition: transform .22s var(--ease);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}
.switch input:checked + span { background: var(--brand); }
.switch input:checked + span::before { transform: translateX(18px); }
/* v1.65.49：禁用态（如「开票申请」在税前报价下被锁定）—— 灰化 + 不可点 */
.switch input:disabled + span { opacity: .45; cursor: not-allowed; }

/* ------------------------------------------------------------------ 表格 */
.table-wrap { overflow-x: auto; }
.table { width: 100%; font-size: 14px; }
.table th {
  text-align: left; padding: 12px 14px; font-size: 12.5px; font-weight: 600;
  font-family: var(--font); color: var(--text-2);
  /* 中文无大小写概念：表头不做 uppercase、不加字距，与表体保持同一套字体观感 */
  text-transform: none; letter-spacing: 0;
  border-bottom: 1px solid var(--line); background: var(--surface-2); white-space: nowrap;
}
.table td { padding: 14px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.table tbody tr { transition: background .16s var(--ease); }
.table tbody tr:hover { background: #FAFBFE; }
.table tbody tr:last-child td { border-bottom: none; }
.table-row-click { cursor: pointer; }
/* v1.21.0：操作列由「右对齐」改为「左对齐」。
   原因（用户实测反馈）：每行按钮个数不同（有的 3 个、有的 8 个），右对齐时
   短行的按钮整体往右缩，左边缘参差不齐，一屏看下去像锯齿，很难快速定位到某一行。
   左对齐后所有行的第一个按钮都在同一条竖线上，视觉上是一条直线。
   ⚠️ 卡片式明细（.items-card）内部另有规则重新设为 flex-end，不受影响。 */
.table-actions { display: flex; gap: 6px; justify-content: flex-start; }

/* v1.21.0：操作按钮由「小直角框」改为「全圆角（胶囊）」。
   原来的 8px 圆角在 25~32px 高的按钮上只切掉一个小角，看过去仍然是方块；
   改成胶囊后与同一行里的状态徽标（.badge 也是胶囊）形状统一，整行更干净。
   ⚠️ 必须带 `.table-actions` 前缀：无前缀的 `.btn { border-radius: var(--radius-xs) }`
   与 `.tone-btn` 的 `--radius-xs` 都是 (0,1,0)，只写 `.tone-btn` 会被后面的规则按顺序盖掉。 */
.table-actions .btn,
.table-actions .tone-btn,
.table-actions .glyph-btn,
.cart-table .cl-ops .btn,
.cart-table .cl-ops .tone-btn,
.cart-table .cl-ops .glyph-btn { border-radius: var(--radius-pill); }
.table-num { text-align: right; font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.table th.table-num { text-align: right; }
.table-sm td { padding: 10px 12px; }

/* ------------------------------------------------------------- 分页 / 空态 */
.pagination { display: flex; align-items: center; gap: 6px; justify-content: center; margin-top: 36px; flex-wrap: wrap; }
.pagination button, .pagination a {
  min-width: 38px; height: 38px; padding: 0 12px; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; color: var(--text-2); border: 1px solid var(--line); background: #fff;
  transition: all .2s var(--ease);
}
.pagination button:hover:not(:disabled), .pagination a:hover { border-color: var(--brand); color: var(--brand); }
.pagination .is-active { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }
.pagination button:disabled { opacity: .4; cursor: not-allowed; }
.pagination .page-info { color: var(--text-3); font-size: 13.5px; margin: 0 8px; }

.empty { text-align: center; padding: 72px 24px; color: var(--text-3); }
.empty svg { margin: 0 auto 18px; opacity: .5; }
.empty h4 { color: var(--text-2); margin-bottom: 6px; }

.skeleton {
  background: linear-gradient(90deg, #EEF2F8 25%, #F7F9FC 37%, #EEF2F8 63%);
  background-size: 400% 100%; animation: shimmer 1.3s ease-in-out infinite;
  border-radius: var(--radius-sm);
}
@keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* -------------------------------------------------------------- 模态/抽屉 */
.overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(8, 12, 20, .5); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  animation: fadeIn .2s var(--ease);
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(16px) scale(.99); } to { opacity: 1; transform: none; } }
@keyframes slideLeft { from { transform: translateX(40px); } to { transform: none; } }
.modal {
  background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  width: 100%; max-width: 560px; max-height: 88vh; display: flex; flex-direction: column;
  animation: slideUp .26s var(--ease-out);
}
/* v1.65.400：白底弹窗/抽屉内的默认文字色强制深色 —— 控制台深色主题下，
   v1.23.0 的「页面表格白字」规则（admin.css: body.console:not(...) .table td）
   同样命中白底弹窗内的表格 → 白底白字看不见（客户详情的「最近订单 / 最近收款」即此）。
   这里用 body.console 前缀 + 同款 :not 结构取得更高特异性改回深字。 */
.modal, .drawer { color: var(--ink-800, #1C1C1E); }
body.console:not(:has(.settings-page)) .modal .table th,
body.console:not(:has(.settings-page)) .modal .table td,
body.console:not(:has(.settings-page)) .drawer .table th,
body.console:not(:has(.settings-page)) .drawer .table td {
  color: var(--ink-800, #1C1C1E);
  border-bottom-color: var(--line-2);
}
body.console:not(:has(.settings-page)) .modal .table th,
body.console:not(:has(.settings-page)) .drawer .table th { background: transparent; }
.modal .text-3, .drawer .text-3,
.modal .text-sm.text-3, .drawer .text-sm.text-3 { color: var(--text-3); }
.modal-lg { max-width: 880px; }
.modal-xl { max-width: 1080px; }
.modal-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 22px 26px; border-bottom: 1px solid var(--line-2);
}
.modal-head h3 { margin: 0; font-size: 19px; }
.modal-head p { margin: 4px 0 0; font-size: 13.5px; color: var(--text-3); }
.modal-body { padding: 24px 26px; overflow-y: auto; flex: 1; }
.modal-foot {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  padding: 16px 26px; border-top: 1px solid var(--line-2); background: #FCFDFF;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.modal-close {
  width: 34px; height: 34px; border-radius: var(--radius-xs); flex: none;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-3); font-size: 20px; line-height: 1;
}
.modal-close:hover { background: var(--surface-2); color: var(--text-1); }

.drawer-wrap { position: fixed; inset: 0; z-index: 1000; display: flex; justify-content: flex-end; background: rgba(8, 12, 20, .45); animation: fadeIn .18s var(--ease); }
.drawer {
  width: 100%; max-width: 620px; background: #fff; height: 100%;
  display: flex; flex-direction: column; box-shadow: var(--shadow-lg);
  animation: slideLeft .28s var(--ease-out);
}
.drawer-lg { max-width: 880px; }

/* ---------------------------------------------------------------- Toast */
.toast-wrap {
  position: fixed; top: 22px; left: 50%; transform: translateX(-50%);
  z-index: 2000; display: flex; flex-direction: column; gap: 10px; align-items: center;
  pointer-events: none;
}
.toast {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 20px; border-radius: 0;
  background: var(--ink-900); color: #fff; font-size: 12.5px; font-weight: 500;
  box-shadow: var(--shadow-lg); animation: slideUp .24s var(--ease-out);
  pointer-events: auto; max-width: 92vw;
  /* v1.65.192：文本收敛在两行内（此前「智能开关 双键（零火线）（星空灰）× 3」
     这类长文案会撑到 4~5 行，气泡变成竖长条）。用 line-clamp 截断；
     图标按 flex-start 顶对齐，避免两行时飘到垂直中点。 */
  line-height: 1.5;
}
.toast > span:last-child {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
/* v1.65.192：外框改直角（原 border-radius: var(--radius-pill) 是胶囊/圆角）。
   用户原话：「用直角外框，不要用圆形外框」。 */
.toast-success { background: #0F7A4F; }
.toast-error { background: #B4272B; }
.toast-warn { background: #9A6000; }
.toast-info { background: var(--ink-800); }

/* --------------------------------------------------------------- 下拉菜单 */
/* v1.65.3：底色由白改为浅黑 70% 半透明（与顶栏二级菜单 .tn-menu、官网 .nav-sub 统一）。
   文字同步提亮 —— 底色变深后原来的 --text-2 深灰会变成「深底深字」。 */
.dropdown { position: relative; }
.dropdown-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 200;
  min-width: 190px; padding: 6px;
  background: rgba(11, 11, 14, .70);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--radius-sm);
  box-shadow: 0 22px 44px -24px rgba(0, 0, 0, .62);
  animation: slideUp .18s var(--ease-out);
}
.dropdown-menu a, .dropdown-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 12px; border-radius: var(--radius-xs);
  font-size: 14px; color: rgba(255, 255, 255, .84); text-align: left;
}
.dropdown-menu a:hover, .dropdown-menu button:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.dropdown-menu .danger { color: #FF7A7A; }
.dropdown-menu .dropdown-divider { height: 1px; background: rgba(255, 255, 255, .16); margin: 6px 4px; }

/* ------------------------------------------------------------- 折叠面板 */
.accordion { border-top: 1px solid var(--line); }
.accordion-item { border-bottom: 1px solid var(--line); }
.accordion-head {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 4px; text-align: left; font-size: 16.5px; font-weight: 600; color: var(--text-1);
  transition: color .2s var(--ease);
}
.accordion-head:hover { color: var(--brand); }
.accordion-head .chev { flex: none; transition: transform .3s var(--ease); color: var(--text-3); }
.accordion-item.is-open .accordion-head { color: var(--brand); }
.accordion-item.is-open .accordion-head .chev { transform: rotate(180deg); }
.accordion-body { max-height: 0; overflow: hidden; transition: max-height .34s var(--ease); }
.accordion-inner { padding: 0 4px 26px; color: var(--text-2); font-size: 14.5px; line-height: 1.85; }
.accordion-inner p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------- 面包屑 */
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-3); flex-wrap: wrap; }
.breadcrumb a:hover { color: var(--brand); }
.breadcrumb .sep { opacity: .5; }
.breadcrumb .current { color: var(--text-2); }

/* --------------------------------------------------------------- 进度条 */
.progress { height: 6px; background: var(--surface-3); border-radius: 999px; overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--grad-brand); border-radius: 999px; transition: width .5s var(--ease); }

/* ---------------------------------------------------------------- 步骤条 */
.steps { display: flex; gap: 8px; }
.step { flex: 1; text-align: center; position: relative; font-size: 13px; color: var(--text-3); }
.step::before {
  content: ""; display: block; height: 3px; border-radius: 3px;
  background: var(--surface-3); margin-bottom: 10px;
}
.step.is-done::before, .step.is-active::before { background: var(--grad-brand); }
.step.is-active { color: var(--brand); font-weight: 600; }

/* ------------------------------------------------------------------ 其他 */
.avatar {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--grad-brand); color: #fff; font-weight: 600; font-size: 14px;
}
.avatar-lg { width: 52px; height: 52px; font-size: 19px; }
.avatar-soft { background: var(--brand-050); color: var(--brand-700); }

.kbd {
  display: inline-block; padding: 2px 7px; border-radius: 0;
  background: var(--surface-2); border: 1px solid var(--line);
  font-family: var(--font-num); font-size: 12px; color: var(--text-2);
}

.timeline { position: relative; padding-left: 26px; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.timeline-item { position: relative; padding-bottom: 22px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  content: ""; position: absolute; left: -24px; top: 6px; width: 12px; height: 12px;
  border-radius: 50%; background: #fff; border: 2px solid var(--brand);
}
.timeline-item.is-muted::before { border-color: var(--line); }
.timeline-time { font-size: 12.5px; color: var(--text-3); }

.stat { padding: 20px 22px; }
.stat-label { font-size: 13px; color: var(--text-3); margin-bottom: 6px; }
.stat-value { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; font-family: var(--font-num); }
.stat-value.sm { font-size: 22px; }
.stat-foot { font-size: 12.5px; color: var(--text-3); margin-top: 6px; }

.notice {
  display: flex; gap: 10px; padding: 14px 16px; border-radius: var(--radius-sm);
  font-size: 13.5px; line-height: 1.7; background: var(--brand-050); color: #2B36A8;
}
.notice-warn { background: var(--amber-bg); color: #8A5700; }
.notice-red { background: var(--red-bg); color: #9C2326; }
.notice-green { background: var(--green-bg); color: #0A6B43; }
/* v1.46.2：svg 全局是 display:block，若图标被包进内层 span（而非 .notice 直接子元素）
   会独占一行、文字被挤到第二行；这里统一改回行内，保证「图标 + 文字」同行起排。
   （作为 .notice 直接子元素的 svg 是 flex 项，display 变更不影响其布局。） */
.notice svg { display: inline-block; vertical-align: -3px; }

.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.scroll-x::-webkit-scrollbar { height: 6px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------ 出现动画 */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  /* v1.65.180：手机端底部公告的跑马灯改用静止显示（对晕动症用户友好）
     v1.65.185：轨道内含两份内容，静止时须停在 0 位让第一份可见；
     同时隐藏第二份，避免静态下重复出现两遍相同文字。 */
  .hn-track { animation: none; transform: none; }
  .hn-track .hn-mq-seg[aria-hidden="true"] { display: none; }
}

/* -------------------------------------------------------------- 响应式 */
@media (max-width: 1080px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section { padding: 64px 0; }
  .section-lg { padding: 80px 0; }
}
@media (max-width: 720px) {
  body { font-size: 14.5px; }
  .container, .container-narrow { padding: 0 18px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .form-grid, .form-grid-3 { grid-template-columns: 1fr; }
  .form-grid .col-span-2 { grid-column: span 1; }
  .section { padding: 48px 0; }
  .section-lg { padding: 60px 0; }
  .modal { max-width: 100%; border-radius: var(--radius); }
  .drawer { max-width: 100%; }
  .panel-head { padding: 14px 16px; }
  .panel-body { padding: 16px; }
  .table th, .table td { padding: 11px 10px; }
  .stat-value { font-size: 23px; }
}

/* ============================== 组件：商品卡片 / 订货明细（订货系统共用） */
/* ---------------------------------------------------- 订货目录：商品卡片
   参考电商列表：图 + 型号 + 名称 + 拿货价 + 规格数 + 加购按钮，
   卡片等高、图片等比居中，保证整屏排列规整协调 */
.pcat-toolbar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 12px 18px; border-bottom: 1px solid var(--line-2);
}
.pcat-sort { display: flex; align-items: center; gap: 2px; border: 1px solid var(--line); border-radius: 0; overflow: hidden; }
.pc-sort {
  min-width: 84px; height: 34px; padding: 0 14px; font-size: 13.5px; color: var(--text-2);
  display: inline-flex; align-items: center; justify-content: center; gap: 3px;
  border-right: 1px solid var(--line); transition: all .18s var(--ease);
}
.pc-sort:last-child { border-right: none; }
.pc-sort:hover { color: var(--brand); background: var(--brand-050); }
.pc-sort.is-active { background: var(--brand); color: #fff; font-weight: 600; }
.pc-sort .pc-arrow { font-size: 11px; opacity: .85; }
.pcat-check { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--text-2); cursor: pointer; }
.pcat-check input { width: 15px; height: 15px; accent-color: var(--brand); }
.pcat-count { margin-left: auto; font-size: 13.5px; color: var(--text-3); }

.catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: 16px; align-items: stretch; }

.catalog-card {
  background: #fff; border: 1px solid var(--line); border-radius: 0;
  overflow: hidden; display: flex; flex-direction: column; transition: all .24s var(--ease);
}
.catalog-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px -18px rgba(12, 19, 31, .3); border-color: var(--brand-100); }
.catalog-card .cc-media {
  position: relative; display: block; aspect-ratio: 1/1;
  background: #F7F8FB; overflow: hidden;
}
.catalog-card .cc-media img { width: 100%; height: 100%; object-fit: contain; transition: transform .4s var(--ease); }
.catalog-card:hover .cc-media img { transform: scale(1.04); }
.catalog-card .cc-flags { position: absolute; left: 10px; top: 10px; display: flex; gap: 5px; }
.catalog-card .cc-flag {
  height: 20px; padding: 0 8px; border-radius: 0; font-size: 11.5px; font-weight: 600;
  display: inline-flex; align-items: center; color: #fff;
}
.catalog-card .cc-flag.is-new { background: var(--brand); }
.catalog-card .cc-flag.is-hot { background: var(--red); }
.catalog-card .cc-flag.is-rec { background: #C79A3E; }
.catalog-card .cc-state {
  position: absolute; right: 10px; bottom: 10px; height: 20px; padding: 0 8px;
  border-radius: 0; font-size: 11.5px; display: inline-flex; align-items: center;
  background: rgba(255, 255, 255, .92); color: var(--text-2); border: 1px solid var(--line);
}
.catalog-card .cc-state.in_stock { color: var(--green); border-color: #CBEBDC; background: #F2FBF7; }
.catalog-card .cc-state.low { color: #A9741A; border-color: #F3E0B4; background: #FEF9EE; }
.catalog-card .cc-body { padding: 12px 14px 14px; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.catalog-card .cc-model { font-size: 12px; color: var(--text-3); }
.catalog-card .cc-model b { color: var(--text-2); font-weight: 500; }
.catalog-card .cc-name {
  font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--text-1);
  min-height: 42px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.catalog-card .cc-name:hover { color: var(--brand); }
.catalog-card .cc-foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.catalog-card .cc-price-box { min-width: 0; }
.catalog-card .cc-price { display: flex; align-items: baseline; color: var(--red); font-family: var(--font-num); }
.catalog-card .cc-price .cur { font-size: 13px; font-weight: 600; margin-right: 1px; }
.catalog-card .cc-price .now { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; }
.catalog-card .cc-price .from { font-size: 12px; font-weight: 600; margin-left: 2px; }
.catalog-card .cc-price .unit { font-size: 12px; color: var(--text-3); margin-left: 3px; font-family: var(--font); }
.catalog-card .cc-spec { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.catalog-card .cc-cart {
  flex: none; width: 40px; height: 40px; border-radius: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--brand); background: var(--brand-050); transition: all .2s var(--ease);
}
.catalog-card .cc-cart:hover { background: var(--brand); color: #fff; transform: scale(1.06); }
/* v1.64.3：加购成功后的按钮即时反馈（绿底勾，1.2 秒自动复原）
   —— 让用户不必依赖底部悬浮条就能确认「加进去了」 */
.catalog-card .cc-cart.is-added {
  background: var(--green, #1F9E6E); color: #fff; transform: none;
}
/* v1.64.3：已选商品的可见标记
   1) 卡片左上角「已选 N 件」角标 —— 用户在商品区就知道自己选了什么，
      不必滚到页面下方看明细才发现漏了/多了
   2) 卡片描边 + 加购按钮常亮 —— 已选状态一眼可辨 */
.catalog-card .cc-picked {
  position: absolute; left: 0; top: 0; z-index: 3;
  padding: 3px 9px 3px 8px; border-radius: 0;
  background: var(--green, #1F9E6E); color: #fff;
  font-size: 11.5px; font-weight: 700; line-height: 1.5;
  letter-spacing: .02em; pointer-events: none;
}
.catalog-card.is-picked { border-color: var(--green, #1F9E6E); box-shadow: 0 0 0 1px rgba(31, 158, 110, .35); }
.catalog-card .cc-cart.is-picked { background: var(--green, #1F9E6E); color: #fff; }
.catalog-card .cc-cart.is-picked:hover { background: var(--green, #1F9E6E); transform: none; }

/* v1.64.0 精简商品卡（客户端订货目录 / 代客下单）
   白色区只保留 4 项：名称 / 建议零售价 / 价格 / [选择规格|加入订单]
   原 v1.46.2 还占一行型号规格 + 一行现货角标，导致卡片过高 —— 现整体压缩约一半高度。 */
.catalog-card.is-compact .cc-media { height: 104px; }
.catalog-card.is-compact .cc-body { padding: 10px 12px 12px; gap: 5px; }
.catalog-card.is-compact .cc-name { min-height: 0; -webkit-line-clamp: 1; font-size: 13.5px; line-height: 1.4; }
/* 紧凑卡的系列标签压扁成一行小字，省掉一整行 */
.catalog-card.is-compact .cc-series {
  align-self: flex-start; height: 17px; padding: 0 6px; border-radius: 0; font-size: 11px;
}
/* 两行价格：建议零售（次要、划线感）+ 价格（主、红） */
.catalog-card .cc-prices { display: flex; flex-direction: column; gap: 1px; margin-top: 1px; }
.catalog-card .cc-prices > div { display: flex; align-items: baseline; gap: 5px; }
.catalog-card .cc-prices .k { font-size: 11.5px; color: var(--text-3); flex: none; }
.catalog-card .cc-retail .v { font-size: 12.5px; color: var(--text-2); font-family: var(--font-num); font-weight: 500; }
.catalog-card .cc-your .v { font-size: 16px; color: var(--red); font-family: var(--font-num); font-weight: 700; letter-spacing: -0.01em; }
.catalog-card .cc-your .v em { font-style: normal; font-size: 11px; font-weight: 500; margin-left: 2px; }
/* 行内文字版的建议零售价（完整卡用） */
.catalog-card .cc-retail-line { font-size: 11.5px; color: var(--text-3); }
.catalog-card .cc-retail-line b { color: var(--text-2); font-weight: 600; font-family: var(--font-num); }
/* 完整卡的「价格」前缀 */
.catalog-card .cc-price .k { font-size: 11.5px; color: var(--text-3); font-family: var(--font); margin-right: 3px; }
/* v1.64.0：加购按钮沿用原圆形小按钮 .cc-cart（复用既有 bindCardCart 事件绑定），
   价格与按钮同行布局（左价格右按钮），省掉一行高度 */
.catalog-card .cc-buyrow { display: flex; align-items: flex-end; gap: 10px; }
.catalog-card.is-compact .cc-prices { flex: 1; min-width: 0; }
.catalog-card.is-compact .cc-cart { flex: none; margin-top: 6px; width: 36px; height: 36px; border-radius: 0; }
.catalog-card.is-compact .cc-your .unit { font-size: 11px; color: var(--text-3); margin-left: 2px; font-family: var(--font); }
/* 多规格提示：建议零售价后面的小字 */
.catalog-card .sku-tip { font-size: 11px; color: var(--text-3); }
/* v1.46.2 精简商品卡（旧结构保留兼容，已不被 simple 卡使用） */
.catalog-card .cc-series {
  align-self: flex-start; height: 20px; padding: 0 8px; border-radius: 0;
  font-size: 12px; font-weight: 500; display: inline-flex; align-items: center;
  color: var(--brand); background: var(--brand-050);
}
.catalog-card .cc-specline {
  font-size: 12px; color: var(--text-3); overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
}
.catalog-card .cc-simple-foot { margin-top: auto; display: flex; justify-content: flex-end; }
.catalog-card .cc-badge {
  height: 20px; padding: 0 8px; border-radius: 0; font-size: 12px;
  display: inline-flex; align-items: center; border: 1px solid var(--line);
  background: #fff; color: var(--text-2);
}
.catalog-card .cc-badge.in_stock { color: var(--green); border-color: #CBEBDC; background: #F2FBF7; }
.catalog-card .cc-badge.low { color: #A9741A; border-color: #F3E0B4; background: #FEF9EE; }

/* v1.46.2 订货目录搜索行：搜索栏左对齐、「导出目录」右对齐（描述行已删除） */
.pcat-searchrow { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.pcat-searchrow .input { flex: 1 1 auto; max-width: 480px; }
.pcat-searchrow .btn { margin-left: auto; flex: none; }
/* v1.65.23：分类收进下拉，与搜索栏并排一行（右对齐、固定宽度）。
   原来 10 个分类 chips 要占两行，把首屏商品挤下去。 */
.pcat-searchrow .pcat-cats-select {
  flex: 0 0 220px; width: 220px; max-width: 100%;
  height: 38px; font-size: 13.5px; cursor: pointer;
}
@media (max-width: 860px) {
  /* v1.65.280：手机端搜索 + 分类**合并为一行**（用户要求）——
     搜索框占剩余宽度、分类下拉固定 116px 靠右；不再各占一行。 */
  .pcat-searchrow { flex-wrap: nowrap; }
  .pcat-searchrow .input { max-width: none; flex: 1 1 auto; min-width: 0; }
  .pcat-searchrow .pcat-cats-select { flex: 0 0 116px; width: 116px; }
}



/* ============================== 组件：订货明细表 / 物流费用行 / 结算条（后台与门户共用） */
/* ------------------------------------------- 订货单：紧凑明细表（行高 30px） */
.cart-table .table td { height: 30px; padding: 0 12px; }
.cart-table .table th { height: 32px; padding: 0 12px; }
.cart-table .table tbody tr { height: 30px; }
.cart-table .cl-name { display: flex; align-items: center; gap: 9px; min-width: 0; }
/* v1.64.0：订货明细商品可点击跳官网详情页（下划线 + 悬停变色提示可点） */
.cart-table .cl-name-link { color: inherit; text-decoration: none; cursor: pointer; }
.cart-table .cl-name-link .cl-text b {
  text-decoration: underline; text-underline-offset: 2px;
  text-decoration-thickness: 1px; text-decoration-color: rgba(127, 119, 221, .45);
  transition: color .15s, text-decoration-color .15s;
}
.cart-table .cl-name-link:hover .cl-text b { color: var(--brand-600, var(--brand)); text-decoration-color: currentColor; }
.cart-table .cl-thumb {
  width: 22px; height: 22px; border-radius: 0; flex: none;
  object-fit: contain; background: #F3F5F9; padding: 1px;
}
.cart-table .cl-text { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.cart-table .cl-text b { font-size: 13px; font-weight: 600; white-space: nowrap; }
.cart-table .cl-text em { font-style: normal; font-size: 11.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cart-table .cl-qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 0; overflow: hidden; height: 24px; }
.cart-table .cl-qty button {
  width: 24px; height: 24px; color: var(--text-2); font-size: 14px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; transition: all .16s var(--ease);
}
.cart-table .cl-qty button:hover { background: var(--brand-050); color: var(--brand); }
.cart-table .cl-qty-input {
  width: 42px; height: 24px; border: none; border-left: 1px solid var(--line); border-right: 1px solid var(--line);
  text-align: center; font-size: 13px; font-family: var(--font-num); background: #fff;
}
.cart-table .cl-qty-input:focus { outline: none; background: #FBFCFE; }
.cart-table .btn-icon { width: 26px; height: 26px; }

/* 金额与提交：整页最底部 */
.checkout-bar {
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 22px;
}
.checkout-bar .cob-summary { display: grid; gap: 8px; min-width: 240px; }
.checkout-bar .cob-row { display: flex; align-items: center; gap: 22px; font-size: 13.5px; color: var(--text-2); }
.checkout-bar .cob-row b { color: var(--text-1); font-weight: 600; }
.checkout-bar .cob-freight { color: var(--text-3); font-weight: 500; }
.checkout-bar .cob-total {
  margin-left: auto; display: flex; align-items: baseline; gap: 12px;
  padding-left: 28px; border-left: 1px dashed var(--line);
}
.checkout-bar .cob-total span { font-size: 13.5px; color: var(--text-3); }
.checkout-bar .cob-total b { font-size: 27px; font-weight: 700; color: var(--red); font-family: var(--font-num); letter-spacing: -0.02em; }
.checkout-bar .btn { min-width: 180px; }

@media (max-width: 860px) {
  .checkout-bar { gap: 14px; padding: 16px; }
  .checkout-bar .cob-total { margin-left: 0; padding-left: 0; border-left: none; width: 100%; }
  .checkout-bar .btn { width: 100%; }
  .cart-table .table { min-width: 560px; }
}

/* 订货单：行内「改规格 / 换商品 / 删除」 */
/* v1.21.0：购物车行的操作按钮同步改为左对齐（与全站操作列一致，表头也是左对齐） */
.cart-table .cl-ops { display: inline-flex; align-items: center; gap: 6px; justify-content: flex-start; }
.cart-table .cl-ops .btn-xs { height: 24px; padding: 0 8px; font-size: 12px; }
.cart-table .cl-ops .btn-icon { width: 24px; height: 24px; }

/* 订货单：明细下方的价格合计 */
.cart-subtotal {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 14px 18px; border-top: 1px solid var(--line-2); background: #FBFCFE;
}
.cart-subtotal .cs-count { font-size: 13.5px; color: var(--text-2); }
/* v1.65.292：cs-info / cs-pay 包裹层在桌面端透明化，单行排布与旧版一致 */
.cart-subtotal .cs-info, .cart-subtotal .cs-pay { display: contents; }
.cart-subtotal .cs-freight { font-size: 12.5px; color: var(--text-3); }
/* v1.65.14：「运费不打折」小标签 —— 把「物流费用不参与折扣」这条规则显式标出来，
   避免业务人员 / 客户误以为运费也按折扣减免。 */
.cart-subtotal .cs-fr-tag {
  display: inline-block; margin: 0 5px; padding: 1px 6px; border-radius: 0;
  font-size: 11px; font-style: normal; line-height: 1.5;
  color: var(--text-2); background: var(--surface-3); white-space: nowrap;
}
.cart-subtotal .cs-total { margin-left: auto; font-size: 13.5px; color: var(--text-2); display: inline-flex; align-items: baseline; gap: 8px; }
.cart-subtotal .cs-total b { font-size: 22px; font-weight: 700; color: var(--red); font-family: var(--font-num); letter-spacing: -0.02em; }
/* v1.64.0：报价区统一标注「税前报价」（订货单预计金额、订货单浮层） */
.tax-note { font-style: normal; font-size: 12px; color: var(--text-3); white-space: nowrap; }
.cp-total .tax-note { margin-left: 2px; }

/* 「修改规格」弹窗里的 SKU 选择行 */
.sku-pick-list { display: grid; gap: 8px; }
.sku-pick-row {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 12px 16px; border: 1px solid var(--line); border-radius: 0;
  background: #fff; transition: all .18s var(--ease);
}
.sku-pick-row:hover { border-color: var(--brand-100); background: #FBFCFE; }
.sku-pick-row.is-active { border-color: var(--brand); background: var(--brand-050); }
.sku-pick-row .spr-radio {
  width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--line-2);
  flex: none; position: relative; transition: all .18s var(--ease);
}
.sku-pick-row.is-active .spr-radio { border-color: var(--brand); }
.sku-pick-row.is-active .spr-radio::after {
  content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--brand);
}
.sku-pick-row .spr-main { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 10px; }
.sku-pick-row .spr-main b { font-size: 14px; font-weight: 600; }
.sku-pick-row .spr-main em { font-style: normal; font-size: 12px; color: var(--text-3); }
.sku-pick-row .spr-stock { font-size: 12.5px; color: var(--text-3); flex: none; }
.sku-pick-row .spr-price { font-size: 16px; font-weight: 700; color: var(--red); font-family: var(--font-num); flex: none; }
.sku-pick-row .spr-price small { font-size: 12px; font-weight: 500; color: var(--text-3); font-family: var(--font); }

/* 弹窗中的商品缩略图 */
.pk-thumb { width: 34px; height: 34px; border-radius: 0; object-fit: contain; background: #F3F5F9; flex: none; }

/* 底部结算条：提示 + 金额 + 提交 */
.checkout-bar .cob-hint { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-3); }
.checkout-bar .cob-hint svg { color: var(--green); }

/* ------------------------------------------- 订货单：备注列 + 物流费用行 */
.cart-table .cl-remark {
  width: 100%; height: 24px; padding: 0 8px; font-size: 12.5px;
  border-radius: 0; border-color: transparent; background: transparent;
}
.cart-table .cl-remark:hover { border-color: var(--line); background: #fff; }
.cart-table .cl-remark:focus { border-color: var(--brand); background: #fff; }

/* 物流费用：四项选择压缩成同一行 */
/* v1.65.287：三个 .cf-row 行容器在桌面端「透明化」（display:contents），
   子元素直接参与 .cart-freight 的单行 flex，布局与旧版完全一致；
   手机端（portal.css ≤760px）再把 .cf-row 展开为纵向三行。 */
.cart-freight {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 6px 12px; min-height: 44px; border-top: 1px solid var(--line); background: #FBFCFE;
}
.cart-freight .cf-row { display: contents; }
.cart-freight .cf-label { flex: none; font-size: 13px; font-weight: 600; color: var(--text-1); }
.cart-freight .cf-tag { flex: none; font-size: 12.5px; color: var(--text-3); }
/* 关键：全局 .input/.select 是 width:100%，这里必须收回自适应宽度，否则会被撑成一列 */
.cart-freight .select,
.cart-freight .input {
  width: auto; flex: none; height: 30px; font-size: 12.5px; padding: 0 10px; border-radius: 0;
}
.cart-freight select.select { min-width: 96px; }
.cart-freight .cf-company { width: 176px; }
.cart-freight .cf-amount {
  display: inline-flex; align-items: baseline; gap: 6px; flex: none;
  font-size: 12.5px; color: var(--text-3);
}
.cart-freight .cf-amount b { font-size: 16px; font-weight: 700; color: var(--red); font-family: var(--font-num); }
.cart-freight .cf-note {
  margin-left: auto; display: inline-flex; align-items: center; gap: 4px; flex: none;
  font-size: 12px; color: var(--text-3); cursor: help;
}
.cart-freight .cf-note:hover { color: var(--amber); }
.select-sm { height: 30px; font-size: 12.5px; padding: 0 10px; }

/* ------------------------------------------------------ 收货地址卡片 */

/* ============================== 组件：SKU 规格选择器（官网 / 订货系统共用） */
.pt-from { font-size: 14px; font-weight: 600; }
.sku-selector { display: grid; gap: 12px; margin-bottom: 16px; }
.sk-row { display: flex; gap: 14px; align-items: flex-start; }
.sk-label { width: 72px; flex: none; font-size: 13.5px; color: var(--text-3); line-height: 38px; }
.sk-options { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; min-width: 0; }
.sk-opt {
  min-height: 38px; padding: 0 16px; border-radius: 0; border: 1px solid transparent;
  background: var(--surface-2); color: var(--text-1); font-size: 14px;
  display: inline-flex; align-items: center; gap: 8px;
  transition: all .18s var(--ease); cursor: pointer;
}
.sk-opt:hover:not(:disabled) { border-color: var(--red); color: var(--red); }
.sk-opt.is-active {
  border-color: var(--red); color: var(--red); background: #FFF3F3; font-weight: 600;
  box-shadow: 0 0 0 1px var(--red) inset;
}
.sk-opt.is-disabled, .sk-opt:disabled {
  color: #BFC7D4; background: var(--surface-2); cursor: not-allowed;
  text-decoration: line-through;
}
.sk-dot { width: 16px; height: 16px; border-radius: 0; display: inline-block; flex: none; }
.sku-summary { border-top: 1px dashed var(--line); padding-top: 14px; display: grid; gap: 12px; }
.sku-picked { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; }
.sku-picked .skp-label { color: var(--text-3); font-size: 13px; }
.sku-picked .skp-value { font-weight: 600; color: var(--text-1); }
.sku-picked .skp-code { color: var(--text-3); font-size: 12.5px; }
.sku-none { display: flex; align-items: center; gap: 8px; color: var(--amber); font-size: 13.5px; }
.sku-price-line { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.skp-price { display: flex; align-items: baseline; gap: 8px; }
.skp-amount { font-size: 26px; font-weight: 700; color: var(--red); font-family: var(--font-num); letter-spacing: -0.02em; }
.skp-unit { font-size: 13px; color: var(--text-3); }
.skp-stock { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); }
.sku-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sku-actions .skp-label { color: var(--text-3); font-size: 13px; }
.skp-qty { width: 92px; height: 46px; text-align: center; }

@media (max-width: 560px) {
  .sk-label { width: 56px; font-size: 12.5px; }
  .sk-opt { min-height: 34px; padding: 0 12px; font-size: 13px; }
  .skp-amount { font-size: 22px; }
}

@media print {
  .no-print { display: none !important; }
}

/* 压缩后的收货信息表单（与订货明细高度协调） */
.form-compact .field { gap: 4px; }
.form-compact .label { font-size: 12.5px; }
.form-compact .input, .form-compact .select, .form-compact .textarea { height: 34px; font-size: 13.5px; }
.form-compact .textarea { height: auto; padding: 8px 12px; }
.form-compact .form-row-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.form-compact .field + .field { margin-top: 10px; }
.form-compact .form-row-3 .field + .field, .form-compact .form-row-2 .field + .field, .form-compact .form-row-3 + .field, .form-compact .form-row-2 + .field { margin-top: 0; }
.form-compact .form-row-3, .form-compact .form-row-2 { margin-bottom: 10px; }

/* 暂存订单标记 */
.hold-badge { display: inline-flex; align-items: center; gap: 4px; }
.hold-tip { font-size: 12px; color: var(--amber); }
@media (max-width: 860px) {
  .form-compact .form-row-3 { grid-template-columns: 1fr; }
}

/* 订货单悬浮条：悬停自动展开已订明细 */
.cart-pop {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 8px);
  background: #fff; border: 1px solid var(--line); border-radius: 0;
  box-shadow: 0 18px 40px -24px rgba(6, 9, 15, .45);
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .18s var(--ease), transform .18s var(--ease);
  overflow: hidden; max-height: 52vh; display: flex; flex-direction: column;
}
.cart-pop .cp-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 16px; border-bottom: 1px solid var(--line-2); background: #FBFCFE;
}
.cart-pop .cp-head b { font-size: 13.5px; }
.cart-pop .cp-hint { font-size: 12px; color: var(--text-3); }
.cart-pop .cp-list { overflow-y: auto; padding: 6px 0; }
.cart-pop .cp-row {
  display: flex; align-items: center; gap: 10px; padding: 7px 16px;
  font-size: 13px; transition: background .16s var(--ease);
}
.cart-pop .cp-row:hover { background: var(--brand-050); }
.cart-pop .cp-thumb { width: 26px; height: 26px; border-radius: 0; object-fit: contain; background: #F3F5F9; flex: none; }
.cart-pop .cp-info { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.cart-pop .cp-info b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42%; }
.cart-pop .cp-info em { font-style: normal; font-size: 11.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cart-pop .cp-qty { flex: none; color: var(--text-2); font-family: var(--font-num); }
.cart-pop .cp-amount { flex: none; width: 92px; text-align: right; font-family: var(--font-num); font-weight: 600; }
.cart-pop .cp-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px; border-top: 1px solid var(--line-2); background: #FBFCFE;
  font-size: 12.5px; color: var(--text-3);
}
.cart-pop .cp-total b { font-size: 17px; color: var(--red); font-family: var(--font-num); margin-left: 4px; }
@media (hover: none) {
}

/* 合计条内的操作区（保存订单 / 提交订单） */
.cart-subtotal .cs-actions { display: flex; align-items: center; gap: 10px; flex: none; margin-left: 22px; }
.cart-subtotal .cs-actions .btn { height: 36px; padding: 0 20px; font-size: 14px; }
.cart-subtotal .cs-discount { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-3); flex: none; }
.cart-subtotal .cs-discount .input { width: 110px; height: 30px; font-size: 13px; text-align: right; }
@media (max-width: 860px) {
  .cart-subtotal .cs-actions { margin-left: 0; width: 100%; justify-content: flex-end; }
}

/* 可点击的统计卡片（如「待付金额」→ 待付订单列表） */
.stat-card.is-clickable { transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease); }
.stat-card.is-clickable:hover { transform: translateY(-2px); border-color: var(--brand-100); box-shadow: var(--shadow-sm, 0 10px 24px -18px rgba(12,19,31,.35)); }
.stat-card.is-clickable:hover .sc-label { color: var(--brand); }
.stat-card.is-clickable:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(75,91,247,.18); }

/* 订单列表的待付筛选提示条 */
.orders-pay-tip { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; }
.orders-pay-tip .btn { flex: none; }

/* 单行高度文本域（放在最后，确保覆盖 .form-compact .textarea 的高度设定） */
.textarea.textarea-single,
.form-compact .textarea.textarea-single,
.form-compact .input.textarea-single {
  height: 42px; min-height: 42px; padding: 9px 14px; line-height: 22px; resize: vertical;
}

/* ---------------------------------------------------- 权限矩阵（岗位配置） */
.perm-matrix { display: grid; gap: 14px; }
.perm-group { border: 1px solid var(--line); border-radius: 0; overflow: hidden; background: #fff; }
.perm-group .perm-head {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: #FBFCFE; border-bottom: 1px solid var(--line-2);
}
.perm-group .perm-title { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; }
.perm-group .perm-title svg { color: var(--brand); }
.perm-group .perm-all {
  margin-left: auto; background: none; border: 0; cursor: pointer;
  font-size: 12.5px; color: var(--brand); padding: 0;
}
.perm-group .perm-all:hover { text-decoration: underline; }
.perm-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; padding: 8px; }
.perm-item {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 0;
  font-size: 13px; color: var(--text-2); cursor: pointer;
}
.perm-item:hover { background: var(--brand-050); }
.perm-item input { flex: none; }
.perm-item em { margin-left: auto; font-style: normal; font-size: 11px; color: var(--text-3); }
.perm-item.is-locked { opacity: .6; cursor: not-allowed; }
@media (max-width: 860px) { .perm-items { grid-template-columns: 1fr; } }

/* 排序权重调整器 */
.sort-box { display: inline-flex; align-items: center; gap: 4px; }
.sort-box .sort-val { min-width: 32px; text-align: center; font-size: 13px; }
.sort-box .btn-icon { width: 26px; height: 26px; }

/* ============================================================ 图标方框（v1.3）
   统一规则：凡「图标 + 圆角方框」的组件，图标按方框的 60% 渲染，
   避免出现「方框很大、里面图标很小」的比例失调。 */
.icon-box {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  border-radius: 0; background: var(--brand-050); color: var(--brand);
}
.icon-box > svg { width: 60%; height: 60%; }
.icon-box.sz-40 { width: 40px; height: 40px; }
.icon-box.sz-38 { width: 38px; height: 38px; }
.icon-box.sz-36 { width: 36px; height: 36px; }
.icon-box.sz-34 { width: 34px; height: 34px; }
.icon-box.sz-30 { width: 30px; height: 30px; border-radius: 0; }
.icon-box.is-warn { background: #FFF5E9; color: #C08A2E; }
.icon-box.is-plain { background: var(--surface-2); color: var(--text-2); }

/* 既有容器一并对齐比例（图标约占方框 60%） */
.icon-picker button { width: 40px; height: 40px; border-radius: 0; }
.icon-picker button > svg,
.stat-card .sc-icon > svg,
.msg-card .msg-icon > svg { width: 60%; height: 60%; }

/* ---------------------------------------------- 按钮内图标统一尺寸（v1.3）
   注意：不要用百分比——按钮带内边距时百分比按「内容盒」计算，
   30px 方框、左右各 12px 内边距时 46% 只剩 7px，肉眼几乎看不见。
   这里按按钮尺寸档位给固定像素值，保证全站图标清晰可见。 */
.btn > svg { width: 18px; height: 18px; }
.btn-xs > svg { width: 17px; height: 17px; }
.btn-sm > svg { width: 18px; height: 18px; }
.btn-lg > svg { width: 20px; height: 20px; }
.btn-icon, .btn-icon.btn-xs, .btn-icon.btn-sm { padding: 0; }
.btn-icon > svg { width: 20px; height: 20px; }
.btn-icon.btn-xs > svg { width: 17px; height: 17px; }
.table-actions { gap: 8px; }
.table-actions .btn-icon, .table-actions .btn-icon.btn-xs { width: 32px; height: 32px; }
.table-actions .btn > svg, .table-actions .btn-icon > svg { width: 17px; height: 17px; }
/* 表格操作按钮的图标提高对比度，避免「看不见」 */
.table-actions .btn-icon { color: var(--text-2); }
.table-actions .btn-icon:hover { color: var(--brand); background: var(--brand-050); }
.table-actions .btn-icon[title*="删除"]:hover { color: #fff; background: var(--red); }
/* 紧凑容器内的图标按钮按容器等比缩小，避免图标顶满方框 */
.cart-table .btn-icon > svg,
.cart-table .cl-ops .btn-icon > svg,
.sort-box .btn-icon > svg { width: 15px; height: 15px; }

/* ---------------------------------------------- 功能首字按钮（v1.3）
   列表操作区不再用图标：按钮上显示「功能名称的第一个字」，完整名称在 title 悬停可见。
   相比图标，汉字在紧凑按钮里辨识度更高，也不会受尺寸/内边距影响。
   并按功能语义给底色（查/编/删/价/新/下/权…），一眼区分不同操作。 */
.glyph-btn {
  min-width: 32px; height: 30px; padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600; line-height: 1; letter-spacing: 0;
  font-family: var(--font);
  /* 默认配色（tone-default）：中性灰 */
  --gt-bg: #F3F5F9; --gt-fg: #4A5260; --gt-bd: #E3E8F0; --gt-hover: #5A6270;
  background: var(--gt-bg); color: var(--gt-fg); border-color: var(--gt-bd);
}
.glyph-btn:hover { background: var(--gt-hover); border-color: var(--gt-hover); color: #fff; }

/* 语义配色：底色浅、字色深；悬停填充为实色。
   每个色相都拉开距离（相隔 ≥12°），保证同一排按钮颜色互不混淆：
   查看=蓝 · 编辑=青绿 · 新增=绿 · 复制=紫 · 权限=靛 · 下载=天蓝 · 更换=青
   改价=橙 · 密码=藕荷 · 排序=灰 · 减少=玫红 · 删除=红 · 主操作=品牌色 */
.tone-view     { --gt-bg: #EEF2FF; --gt-fg: #4353E8; --gt-bd: #DDE4FF; --gt-hover: #4353E8; } /* 232° 蓝 */
.tone-edit     { --gt-bg: #DBFFFB; --gt-fg: #0F8A7E; --gt-bd: #C2F5EF; --gt-hover: #0F8A7E; } /* 174° 青绿 */
.tone-add      { --gt-bg: #DBFFEA; --gt-fg: #12904F; --gt-bd: #C3F5DC; --gt-hover: #12904F; } /* 145° 绿 */
.tone-price    { --gt-bg: #FFF3E0; --gt-fg: #B87A17; --gt-bd: #FBE4C2; --gt-hover: #B87A17; } /*  36° 橙 */
.tone-copy     { --gt-bg: #F5EBFF; --gt-fg: #6A46D6; --gt-bd: #EAD9FF; --gt-hover: #6A46D6; } /* 272° 紫 */
.tone-perm     { --gt-bg: #F0ECFF; --gt-fg: #5A48DE; --gt-bd: #E1DAFF; --gt-hover: #5A48DE; } /* 252° 靛 */
.tone-download { --gt-bg: #E6F3FF; --gt-fg: #1B72CE; --gt-bd: #CFE7FF; --gt-hover: #1B72CE; } /* 208° 天蓝 */
.tone-swap     { --gt-bg: #E0F9FF; --gt-fg: #17798F; --gt-bd: #C6F0FA; --gt-hover: #17798F; } /* 192° 青 */
.tone-lock     { --gt-bg: #F5F0F5; --gt-fg: #6B5B7B; --gt-bd: #EAE2EA; --gt-hover: #6B5B7B; } /* 300° 藕荷 */
.tone-sort     { --gt-bg: #F3F4F6; --gt-fg: #5A6270; --gt-bd: #E5E7EB; --gt-hover: #5A6270; } /* 220° 灰 */
.tone-danger,
.is-danger               { --gt-bg: #FDECEC; --gt-fg: #D2353B; --gt-bd: #F9D8D9; --gt-hover: #D2353B; } /*   0° 红 */

/* 危险操作再加一层保险：显式红色描边，避免被其它规则覆盖 */
.is-danger { color: #D2353B; }
/* 主操作（下单 / 提交）保持品牌实色，不套用浅底 */
.tone-primary,
.btn-primary.tone-btn,
.btn-primary.glyph-btn   { --gt-bg: var(--brand); --gt-fg: #fff; --gt-bd: var(--brand); --gt-hover: var(--brand-600); }
.table-actions .glyph-btn { min-width: 32px; height: 32px; }
.sort-box .glyph-btn { min-width: 30px; height: 26px; padding: 0 6px; font-size: 13px; }

/* 排序权重「−／+」按钮：符号按钮，字号略大、居中更醒目 */
.tone-minus { --gt-bg: #FFEBF5; --gt-fg: #C44A87; --gt-bd: #FFD6EA; --gt-hover: #C44A87; } /* 330° 玫红 */
.tone-plus  { --gt-bg: #D6FFD6; --gt-fg: #2E8B2E; --gt-bd: #BEF5BE; --gt-hover: #2E8B2E; } /* 120° 黄绿 */
.glyph-btn.sort-btn { min-width: 30px; padding: 0; font-size: 17px; font-weight: 700; }

/* 商品表单内联「新建品牌」（v1.3）：品牌下拉下方一行按钮 + 说明 */
.brand-add-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.brand-add-row .brand-add-btn { min-width: 34px; height: 30px; }
.brand-hint { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-3); line-height: 1.6; }
.brand-hint svg { flex: none; color: var(--text-4, #A9B2C0); }

/* v1.13.22：原「独立外框页签」.seg-tabs / .seg-tab（商品设置页用）已随该页删除，样式一并移除 */

/* ------------------------------------------- 后台列表紧凑化（v1.3，全局）
   列表只呈现主要信息：行内一律不显示副信息（.cell-sub），
   行高、表头、缩略图、行间距同步压缩，单行高度从约 96px 降到约 48px。
   只在后台生效（body.console），经销商端订货单/商品列表保持原样。 */
body.console .table { font-size: 13.5px; }
body.console .table th { padding: 9px 12px; font-size: 12.5px; }
body.console .table td { padding: 9px 12px; }
body.console .table td .cell-sub { display: none; }
body.console .table td .cell-main { font-size: 13.5px; line-height: 1.35; }
body.console .table .thumb { width: 40px; height: 36px; border-radius: 0; }
body.console .table .row-flex { gap: 10px; }
body.console .table .badge { padding: 2px 9px; font-size: 12px; }
body.console .table-actions .glyph-btn { min-width: 30px; height: 30px; }
/* 主要信息旁的行内补充（如商品编码），与主信息同一行、颜色更淡 */
body.console .table .cell-meta { margin-left: 8px; font-size: 12px; color: var(--text-3); font-weight: 400; }
/* 列表里的「关键行内信息」：不换行、与主信息同一行显示（如拿货价、欠款、工单号） */
body.console .table .cell-line { display: inline; margin-left: 8px; font-size: 12.5px; color: var(--text-3); font-weight: 400; }
body.console .table .cell-line.amount-red { color: var(--red); }
body.console .table .cell-line.text-green { color: var(--green); }

/* ------------------------------------------- 后台列表对齐与字重（v1.3）
   只有表头居中加粗；表体内容一律靠左、常规字重，突出信息本身而不是字重。 */
body.console .table th,
body.console .table th.table-num { text-align: center; font-weight: 700; }
body.console .table td,
body.console .table td.table-num { text-align: left; font-weight: 400; }
body.console .table td .row-flex { justify-content: flex-start; }
body.console .table td .cell-main,
body.console .table td .amount,
body.console .table td .cell-meta,
body.console .table td .cell-line { font-weight: 400; }
body.console .table td .cell-main { font-size: 13.5px; }
/* 商品编码等行内信息不折行，避免「ZJ-PANEL- / 4S」这种断行 */
body.console .table .cell-meta { white-space: nowrap; }

/* ------------------------------------------- 预存款账户明细（v1.65.47）
   depositAccountDialog 的流水表：**每条记录一行到底、信息完整**。
   原来 8 列挤在 880px 的 modal-lg 里 —— 时间被折成 3 行、「计入」被逐字竖排、末列被裁掉。
   修复：弹窗放宽到 modal-xl + 8 列并成 7 列（计入并入登记类型，用 .cell-meta 行内小字），
   这里只补两条：① 单元格一律不换行；② 「说明」超长以省略号收尾（title 里给全文）。 */
body.console .dep-logs .table th,
body.console .dep-logs .table td { padding-left: 10px; padding-right: 10px; white-space: nowrap; }
body.console .dep-logs .table td .dep-note {
  display: block; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* v1.65.396：明细里的订单号链接（跳订单详情） */
body.console .dep-logs .table a.dep-order-link {
  color: var(--brand-700, #1B6B4C); text-decoration: underline; text-underline-offset: 2px;
}
body.console .dep-logs .table a.dep-order-link:hover { color: var(--brand, #22925F); }

/* ------------------------------------------- 文字型彩色操作按钮（v1.3）
   与首字按钮同一套语义配色，但显示完整的按钮名称（详情 / 改价 / 编辑 / 复制 / 删除），
   字体统一、加粗，宽度按文字自适应。 */
.tone-btn {
  height: 30px; padding: 0 12px; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font); font-size: 13px; font-weight: 700; line-height: 1;
  letter-spacing: 0; border-radius: var(--radius-xs); border: 1px solid var(--gt-bd);
  background: var(--gt-bg); color: var(--gt-fg); cursor: pointer;
  transition: all .16s var(--ease);
}
.tone-btn:hover { background: var(--gt-hover); border-color: var(--gt-hover); color: #fff; }
.table-actions .tone-btn { height: 32px; padding: 0 13px; }

/* ------------------------------------------- 列表内「点名称即筛选」（v1.3）
   分类 / 品牌等可点内容：外观与普通文本一致，悬停提示可点击，点击后按该值筛选列表。 */
body.console .table .cell-link {
  border: 0; background: none; padding: 0; margin: 0; cursor: pointer;
  font: inherit; color: var(--brand); line-height: inherit;
}
body.console .table .cell-link:hover { text-decoration: underline; }
/* v1.65.55：分类列不再用 .badge 药丸底框（用户要求去掉框），徽标样式仅保留给状态列 */
/* 操作按钮字体与状态徽标保持一致（12px / 600 / 同一字体栈） */
body.console .table-actions .tone-btn,
body.console .table-actions .glyph-btn {
  font-family: var(--label-font); font-size: var(--label-size); font-weight: var(--label-weight);
}

/* 排序权重「−／+」文字按钮：紧凑版（与其它彩色按钮同一套字体，只是更窄） */
.tone-btn.sort-btn { min-width: 30px; padding: 0 9px; font-size: 15px; font-weight: 700; }

/* 列表内链接型单元格（如订单号）：与文本同款，保留等宽字体 */
body.console .table .cell-link { text-decoration: none; }
body.console .table .cell-link.mono { font-family: var(--font-num); letter-spacing: -0.02em; }

/* 收款前置未满足时的灰态按钮（v1.3）：可点击但只提示原因，不打开收款弹窗 */
.tone-btn.is-locked { opacity: .55; cursor: not-allowed; }
.tone-btn.is-locked:hover { background: var(--gt-bg); border-color: var(--gt-bd); color: var(--gt-fg); }

/* ------------------------------------------- 详情页内联录入实际运费（v1.3）
   不再弹二级窗口：直接在「物流费用」区块填金额并提交，只改运费、不动客户选项。 */
.freight-inline {
  display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--line);
}
.freight-inline .fi-field { display: grid; gap: 6px; min-width: 220px; flex: 0 0 auto; }
.freight-inline .fi-label { font-size: 13px; font-weight: 600; color: var(--text-2); }
.freight-inline .fi-field .input { height: 40px; font-family: var(--font-num); }
.freight-inline .fi-hint {
  display: inline-flex; align-items: flex-start; gap: 5px; flex: 1 1 260px;
  font-size: 12px; color: var(--text-3); line-height: 1.7;
}
.freight-inline .fi-hint svg { flex: none; margin-top: 2px; color: var(--text-4, #A9B2C0); }

/* ------------------------------------------- 订单修改抽屉的明细编辑（v1.3） */
.order-edit-lines { display: grid; gap: 8px; }
.oel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 13px; font-weight: 600; color: var(--text-2);
}
.oel-empty { padding: 18px; text-align: center; color: var(--text-3); font-size: 13px; border: 1px dashed var(--line); border-radius: 0; }
.oel-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 0; background: #fff;
}
.oel-name { display: grid; gap: 2px; min-width: 0; }
.oel-name b { font-size: 13.5px; font-weight: 600; }
.oel-name em { font-style: normal; font-size: 11.5px; color: var(--text-3); }
.oel-field { display: grid; gap: 4px; }
.oel-field > span { font-size: 11.5px; color: var(--text-3); }
.oel-input { width: 88px; height: 34px; text-align: center; font-family: var(--font-num); }
.oel-ops { display: flex; align-items: center; gap: 6px; }

/* ------------------------------------------- 退单 / 预存款（v1.4） */
.return-pick { display: grid; gap: 8px; }
.rp-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px;
  padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 0; background: #fff; cursor: pointer;
}
.rp-row:hover { border-color: var(--brand-100); }
.rp-name { display: grid; gap: 2px; min-width: 0; }
.rp-name b { font-size: 13.5px; font-weight: 600; }
.rp-name em { font-style: normal; font-size: 11.5px; color: var(--text-3); }
.rp-price { font-size: 13px; color: var(--text-2); }
.rg-qty { width: 76px; height: 34px; text-align: center; }
.return-pick + .notice, .form-section .notice { margin-top: 12px; }
.balance-panel { padding: 4px 0; }
.bp-amount { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.bp-amount b { font-size: 30px; font-weight: 700; font-family: var(--font-num); color: var(--green); }

/* ----------------------------------- 代客下单：可直接填写实际运费 + 商品详情（v1.4） */
.cf-amount-input { width: 96px; height: 32px; text-align: right; font-family: var(--font-num); }
.cf-amount { gap: 6px; }
/* 商品详情弹窗（后台代客下单）—— v1.65.25 重构为「左图右信息」两栏布局。
   pdm-* 命名空间：与客户端 portal.css 的 pd-*（详情页）互不干扰；
   原 pd-* 结构删掉（其参数表 spec-table/feature-grid 样式只在 site.css，
   后台未加载，一直是裸样式）。 */
/* v1.65.29：详情弹窗整体铺浅色底，内部卡片用白底浮起 */
.pdm { display: grid; gap: 22px; background: var(--surface-2); border-radius: 0; padding: 20px 22px; }
.pdm-top { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 26px; align-items: start; }
.pdm-gallery { display: flex; flex-direction: column; gap: 10px; }
.pdm-cover {
  width: 100%; aspect-ratio: 4 / 3; height: auto; border-radius: 0;
  object-fit: cover; background: var(--surface-2); border: 1px solid var(--line-2);
}
.pdm-thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.pdm-thumbs img {
  width: 60px; height: 60px; border-radius: 0; object-fit: cover;
  border: 1px solid var(--line-2); cursor: pointer; opacity: .78;
  transition: opacity .15s, border-color .15s, box-shadow .15s;
}
.pdm-thumbs img:hover { opacity: 1; }
.pdm-thumbs img.is-active { border-color: var(--brand); opacity: 1; box-shadow: 0 0 0 2px var(--brand-100); }
.pdm-info { min-width: 0; }
.pdm-name { font-size: 21px; font-weight: 700; margin: 0 0 6px; letter-spacing: -0.01em; }
.pdm-meta { font-size: 12.5px; color: var(--text-3); margin-bottom: 14px; }
.pdm-price {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 13px 16px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 0; margin-bottom: 14px;
}
.pdm-price-main { color: var(--red); font-family: var(--font-num); }
.pdm-price-main .cur { font-size: 15px; }
.pdm-price-main b { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; }
.pdm-retail { font-size: 12.5px; color: var(--text-3); text-decoration: line-through; }
.pdm-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 26px; }
.pdm-fact { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px dashed var(--line-2); font-size: 13.5px; min-width: 0; }
.pdm-fact .k { width: 84px; flex: none; color: var(--text-3); }
.pdm-fact .v { color: var(--text-1); font-weight: 500; min-width: 0; }
.pdm-block h4 { font-size: 14.5px; font-weight: 600; margin: 0 0 12px; }
.pdm-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pdm-spec-group { border: 1px solid var(--line-2); background: var(--surface); border-radius: 0; padding: 13px 16px; }
.pdm-sg-title { font-size: 13px; font-weight: 600; color: var(--text-2); margin-bottom: 4px; }
.pdm-sg-row {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 7px 0; border-bottom: 1px dashed var(--line-2); font-size: 13px;
}
.pdm-sg-row:last-child { border-bottom: none; }
.pdm-sg-row .k { color: var(--text-3); flex: none; }
.pdm-sg-row .v { text-align: right; color: var(--text-1); font-weight: 500; min-width: 0; }
.pdm-feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pdm-feat { background: var(--surface); border: 1px solid var(--line-2); border-radius: 0; padding: 12px 15px; }
.pdm-feat b { display: block; font-size: 13.5px; margin-bottom: 3px; }
.pdm-feat span { font-size: 12.5px; color: var(--text-3); line-height: 1.65; }
/* v1.65.28：详情弹窗内「规格与订购」区 —— 规格选项 + 数量行 */
.pdm-pick .sku-selector { margin-top: 2px; }
.pdm-qty-row { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line-2); }
.pdm-qty-label { font-size: 13.5px; font-weight: 600; color: var(--text-1); flex: none; }
.pdm-qty { width: 110px; flex: none; }
@media (max-width: 860px) {
  .pdm-top { grid-template-columns: 1fr; }
  .pdm-facts, .pdm-specs, .pdm-feats { grid-template-columns: 1fr; }
}
.catalog-card.is-clickable { cursor: pointer; }
.catalog-card.is-clickable:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ------------------------- 收货人「可选可填」组合框（v1.4，地址选择并入收货人） */
.ac-wrap { position: relative; }
.ac-field { position: relative; display: flex; align-items: center; }
.ac-field .ac-input { padding-right: 36px; }
.ac-arrow {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border: 0; border-radius: 0; background: transparent;
  color: var(--text-3); cursor: pointer; transition: background .15s, color .15s;
}
.ac-arrow:hover { background: var(--surface-2); color: var(--text); }
.ac-wrap.is-open .ac-arrow { color: var(--brand); transform: translateY(-50%) rotate(180deg); }
.ac-menu {
  position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 6px);
  max-height: 288px; overflow: auto; padding: 6px;
  background: #fff; border: 1px solid var(--line-2); border-radius: 0;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .12);
}
.ac-head { padding: 6px 10px; font-size: 12px; color: var(--text-3); }
.ac-empty { padding: 12px 10px; font-size: 13px; color: var(--text-3); }
.ac-item {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 0; cursor: pointer;
}
.ac-item.is-active { background: var(--surface-2); }
.ac-item.is-selected { background: var(--brand-50, #EEF2FF); }
.ac-label {
  font-size: 11.5px; color: var(--brand); background: var(--brand-50, #EEF2FF);
  padding: 2px 8px; border-radius: 0; white-space: nowrap;
}
.ac-body { display: grid; gap: 1px; min-width: 0; }
.ac-body b { font-size: 13.5px; font-weight: 600; }
.ac-body em { font-style: normal; font-size: 11.5px; color: var(--text-3); }
.ac-addr { font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.field-hint { margin-top: 6px; font-size: 11.5px; color: var(--text-3); line-height: 1.5; }

/* ------------------------------------------- 预存款登记 / 预存款账户（v1.4） */
.deposit-panel { display: grid; gap: 14px; }
.deposit-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 16px; border-radius: 0; border: 1px solid var(--line-2);
  background: linear-gradient(180deg, #F7F9FF, #FFFFFF);
}
.deposit-head .dh-info { display: grid; gap: 2px; }
.deposit-head .dh-info b { font-size: 15px; font-weight: 600; }
.deposit-head .dh-amount b { font-size: 26px; font-weight: 700; font-family: var(--font-num); color: var(--green); }

/* ------------------------------------------- 预存款五口径与规则（v1.5） */
.dep-metrics { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.dep-metric {
  flex: 1 1 130px; display: grid; gap: 2px; padding: 10px 12px;
  border: 1px solid var(--line-2); border-radius: 0; background: #fff;
}
.dep-metric.is-main { border-color: var(--brand-100); background: var(--brand-50, #EEF2FF); }
.dep-metric .dm-label { font-size: 11.5px; color: var(--text-3); }
.dep-metric .dm-value { font-size: 16px; font-weight: 700; font-family: var(--font-num); }
.dep-metrics.is-compact .dep-metric { flex-basis: 110px; padding: 8px 10px; }
.dep-metrics.is-compact .dm-value { font-size: 14px; }
/* v1.48.2：指标卡可点击 → 进入相应明细 */
.dep-metric.is-clickable { cursor: pointer; transition: border-color .15s var(--ease), box-shadow .15s var(--ease); }
.dep-metric.is-clickable:hover { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(75, 91, 247, .12); }
.dep-metric.is-clickable:focus-visible { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(75, 91, 247, .18); }
.dep-sum { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; padding: 12px 16px; background: #fff; border-bottom: 1px solid var(--line-2); }
.dep-sum .ds-item { display: grid; gap: 2px; }
.dep-sum .ds-label { font-size: 11.5px; color: var(--text-3); }
.dep-sum .ds-value { font-size: 15px; font-weight: 700; font-family: var(--font-num); }
.dep-sum .ds-side { margin-left: auto; font-size: 12px; color: var(--text-3); }
.rule-note {
  display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; padding: 10px 12px;
  border: 1px dashed var(--line-2); border-radius: 0; background: var(--surface-2);
  font-size: 12.5px; line-height: 1.6; color: var(--text-2);
}
.rule-tiers { display: grid; gap: 8px; }
.rule-row { display: flex; align-items: center; gap: 8px; }
.rule-row .input { width: 130px; height: 34px; text-align: right; }
.rule-row .rr-tag { font-size: 12.5px; color: var(--text-3); }

/* ------------------------- 带底色的通用按钮（v1.5：页头操作按钮统一着底色） */
.btn-tinted { border-color: var(--gt-bd, transparent); background: var(--gt-bg); color: var(--gt-fg); }
.btn-tinted:hover { background: var(--gt-hover, var(--gt-fg)); color: #fff; border-color: transparent; }
.btn-tinted svg { color: inherit; }

/* 表单字段按条件隐藏（如预存款登记里只有「预收货款登记」才需要赠送额度） */
.field.is-hidden { display: none; }

/* ------------------------------------------- 付款方式：预存款 / 补贴抵扣选项（v1.5.1） */
.pay-options { display: grid; gap: 10px; }
.pay-option {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 0; background: #fff;
}
.pay-option .po-main { display: grid; gap: 3px; min-width: 0; }
.pay-option .po-main b { font-size: 13.5px; font-weight: 600; }
.pay-option .btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ------------------------- 商品「列表方式」与规则说明（v1.6） */
.catalog-list { display: grid; gap: 8px; }
.catalog-row {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto auto auto; align-items: center; gap: 14px;
  padding: 10px 14px; cursor: default;
}
.catalog-row .cr-thumb { width: 56px; height: 48px; border-radius: 0; object-fit: cover; background: var(--surface-2); }
.catalog-row .cr-link { display: block; }
.catalog-row .cr-main { display: grid; gap: 2px; min-width: 0; }
.catalog-row .cr-name { font-size: 13.5px; font-weight: 600; color: var(--ink-900); }
.catalog-row a.cr-name:hover { color: var(--brand); }
.catalog-row .cr-main em { font-style: normal; font-size: 11.5px; color: var(--text-3); }
.catalog-row .cr-stock { font-size: 12px; color: var(--text-3); white-space: nowrap; }
.catalog-row .cr-stock.in_stock { color: var(--green); }
.catalog-row .cr-price { font-family: var(--font-num); color: var(--red); white-space: nowrap; }
.catalog-row .cr-price .cur { font-size: 12px; }
.catalog-row .cr-price b { font-size: 17px; font-weight: 700; }
.catalog-row .cr-price .from { font-size: 11px; color: var(--text-3); margin-left: 2px; }
.catalog-row .cr-price .unit { font-size: 11.5px; color: var(--text-3); }
.catalog-row .cc-cart { white-space: nowrap; }
/* 规则说明清单 */
.rule-notes { display: grid; gap: 8px; }
.rule-notes .rn-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: 0; background: #fff; }
.rule-notes .rn-k { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.rule-notes .rn-v { font-size: 12.5px; color: var(--text-2); line-height: 1.6; }
/* 支付设置：二维码列表
   v1.65.13：按用户要求改为「一行一个」纵向排列（原来 .qr-list 是 grid 单列，
   但 .qr-row 内部预览图 96px + 右侧三行字段，导致每条占很高、扫起来费劲）。
   现在：① 预览图缩到 60×60 ② 预览与字段同行 ③ 二维码之间行距加大便于点选。
   ⚠️ 只改后台设置页的这套类名（.qr-list / .qr-row），客户端付款页用的是
      .qr-pay / .qr-item，不受影响。 */
.qr-list { display: grid; gap: 14px; }
.qr-row {
  display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 14px;
  padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 0; background: #fff;
  align-items: start;
}
.qr-row .qr-preview {
  width: 60px; height: 60px; border-radius: 0; background: var(--surface-2);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.qr-row .qr-preview img { width: 60px; height: 60px; object-fit: contain; }
.qr-row .qr-fields { display: grid; gap: 8px; align-content: start; }

/* 扫码支付二维码（客户端付款方式页）
   v1.65.44：两张码改「**一行两个 + 150px 间距**」（用户要求）。
   原来 is-cards 是 flex + wrap + space-between，两张 444px 图在常规弹窗宽度下放不下，
   被挤成上下两行；改用两列 grid：不换行、图片按列宽自适应（列宽 = (容器 - 150) / 2）。
   窄屏（≤720px）把 150px 收回成 16px —— 否则手机上大间距会把内容撑出横向溢出。 */
.qr-pay { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 150px; margin-top: 6px; justify-items: center; }
.qr-pay .qr-item { display: grid; gap: 6px; justify-items: center; padding: 10px; border: 1px solid var(--line-2); border-radius: 0; background: #fff; width: 100%; }
.qr-pay .qr-item img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; background: var(--surface-2); border-radius: 0; }
@media (max-width: 720px) { .qr-pay { gap: 16px; } }

/* ---------- 显示方式：订单明细卡片 / 付款页卡片与列表（v1.6.1，后台可切换） ---------- */
/* 订单明细：卡片方式（把明细表渲染成一条一张卡片） */
.items-card table, .items-card tbody { display: block; }
.items-card thead { display: none; }
.items-card tr {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto auto; align-items: center; gap: 12px;
  padding: 11px 14px; margin-bottom: 8px; border: 1px solid var(--line-2); border-radius: 0; background: #fff;
}
.items-card td { display: block; padding: 0; border: 0; text-align: right; white-space: nowrap; }
.items-card td:first-child { text-align: left; white-space: normal; }
.items-card td .table-actions { justify-content: flex-end; }
/* 付款方式：卡片方式（每项一张卡，按钮占满整行） */
.pay-options.is-cards { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.pay-options.is-cards .pay-option { flex-direction: column; align-items: stretch; gap: 10px; padding: 14px; }
.pay-options.is-cards .pay-option .btn { width: 100%; justify-content: center; }
/* 付款方式：列表方式（紧凑单行） */
.pay-options.is-list .pay-option { padding: 10px 14px; }
.pay-options.is-list .pay-option .po-main { grid-auto-flow: column; align-items: baseline; gap: 14px; }
/* 收款二维码：卡片 / 列表 —— v1.65.44 两种方式都保持「一行两个」（grid 两列由 .qr-pay 提供），
   列表方式只是把卡片与图收窄一点；间距统一 150px（窄屏 16px） */
.qr-pay.is-cards .qr-item { max-width: 444px; }
.qr-pay.is-list .qr-item { grid-auto-flow: row; max-width: 240px; }
.qr-pay.is-list .qr-item img { max-width: 216px; }

/* 付款页面整页显示方式（v1.6.2）：卡片方式 / 列表方式 */
.pay-page.is-cards .form-section {
  padding: 16px; border: 1px solid var(--line-2); border-radius: 0; background: #fff; margin-bottom: 14px;
}
.pay-page.is-cards .notice { border-radius: 0; }
.pay-page.is-list .form-section { padding: 0; border: 0; background: transparent; margin-bottom: 14px; }
.pay-page.is-list .form-section h4 { margin-bottom: 6px; }
.pay-page.is-list .notice { border-radius: 0; padding: 8px 12px; }
.pay-page.is-list .info-list .il-row { padding: 7px 0; }

/* ---------------------------------------------- 在线收款（扫码支付，v1.43.0）
   客户端「付款方式」页里的在线收款区块：渠道选择 → 生成二维码 → 等待/确认结果。 */
.online-pick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.online-pick .op-label { font-size: 12.5px; color: var(--text-3); }
.pick-chip {
  height: 30px; padding: 0 14px; border-radius: 0; cursor: pointer; font: inherit; font-size: 13px;
  border: 1px solid var(--line-2); background: #fff; color: var(--ink-800);
  transition: border-color .18s var(--ease), background .18s var(--ease), color .18s var(--ease);
}
.pick-chip:hover { border-color: var(--brand); }
.pick-chip.is-on { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.online-qr { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.online-qr .oq-code {
  padding: 10px; border: 1px solid var(--line-2); border-radius: 0; background: #fff;
  box-shadow: 0 6px 20px -14px rgba(0, 0, 0, .5);
}
.online-qr .oq-code svg { display: block; }
.oq-meta { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
.oq-amount { font-size: 20px; color: var(--danger, #E23A2E); font-family: var(--font-num); }
.online-actions { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.online-tip { margin-top: 8px; font-size: 12.5px; line-height: 1.7; color: var(--text-3); text-align: center; }
.oq-done {
  display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
  padding: 18px 16px; border-radius: 0; border: 1px solid rgba(7, 193, 96, .35); background: rgba(7, 193, 96, .08);
}
.oq-done b { font-size: 16px; color: #07894A; }

/* 订单卡片明细：列表方式（v1.6.2，与「订单明细显示方式」关联）
   v1.65.63：行内改为 flex —— 原三列网格遇到「名称+规格+数量+金额」四个子元素时
   会把金额挤到第二列错位；现在名称（含规格）占主位、数量与金额固定靠右。
   配色改走 --text-*：在客户端深灰卡内（--text-1 已重定义为白）自动变白，
   浅色场景回退近黑，两边都可读（原 var(--ink-900) 在深灰卡上是黑字黑底）。 */
.oc-items.is-list { display: grid; gap: 6px; align-content: start; }
.oc-items.is-list .oc-line {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 12px; border: 1px solid var(--line-2); border-radius: 0; background: #fff; font-size: 12.5px;
}
.oc-items.is-list .oc-line b { font-weight: 600; color: var(--text-1); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc-items.is-list .oc-line em { font-style: normal; font-size: 11px; color: var(--text-3); flex: none; }
.oc-items.is-list .oc-line .oc-qty { color: var(--text-3); white-space: nowrap; flex: none; }
.oc-items.is-list .oc-line .oc-amt { font-family: var(--font-num); color: var(--text-1); white-space: nowrap; flex: none; }
.oc-items.is-list .oc-more { font-size: 12px; color: var(--text-3); padding: 2px 12px; }

/* 左侧栏归类子菜单（v1.6.3） */
.nav-sub { display: grid; gap: 2px; margin: 2px 0 6px 26px; padding-left: 10px; border-left: 1px solid var(--line-2); }
.nav-sublink {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 10px; border-radius: 0; font-size: 12.5px; color: var(--text-2); text-decoration: none;
}
.nav-sublink:hover { background: var(--surface-2); color: var(--ink-900); }
.nav-sublink.is-active { background: var(--brand-50, #eef1ff); color: var(--brand); font-weight: 600; }
/* v1.13.24：原「订单编号自定义」的编号示例条（.ono-preview / .ono-sample）已按需求删除，样式一并移除 */
.card-pad { padding: 16px 18px; }

/* 管理菜单排序（v1.6.4）
   v1.13.39：行与表头曾用不同列宽（行 96px / 表头 130px），而「归属分组」下拉最小宽 130px，
   于是下拉溢出到下一列、压住右边的输入框（截图里的重叠）——现在两者共用同一套列宽，并给单元格兜底防溢出 */
.menu-sorter { display: grid; gap: 6px; }
.menu-sorter .ms-title { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.menu-sorter .ms-row {
  display: grid; grid-template-columns: 160px 130px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 7px 12px; border: 1px solid var(--line-2); border-radius: 0; background: #fff;
}
/* 单元格内一律允许收缩，控件不得越出自己那一列 */
.menu-sorter .ms-row > * { min-width: 0; }
.menu-sorter .ms-row.is-group { grid-template-columns: 160px minmax(0, 1fr); background: var(--surface-2); }
.menu-sorter .ms-name { font-size: 13px; color: var(--ink-900); }
.menu-sorter .ms-group { font-size: 11.5px; color: var(--text-3); }
.menu-sorter .ms-input { height: 30px; }
.menu-sorter .ms-ops { display: flex; align-items: center; gap: 6px; }
.menu-sorter .ms-hide { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-2); }

/* 管理菜单排序：分组下拉（v1.6.5） —— 撑满所在列且不越界（v1.13.39） */
.menu-sorter .ms-group-sel { height: 30px; font-size: 12.5px; width: 100%; max-width: 100%; }

/* 站点设置页签（v1.6.7） */
.tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line-2); padding-bottom: 0; }
.tabs .tab {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  padding: 9px 16px; font-size: 13.5px; color: var(--text-2); border-bottom: 2px solid transparent; border-radius: 0;
}
.tabs .tab:hover { background: var(--surface-2); color: var(--ink-900); }
.tabs .tab.is-active { color: var(--brand); font-weight: 600; border-bottom-color: var(--brand); }
.tab-panel.is-hidden { display: none; }

/* 登录页品牌区编辑（v1.6.8）
   v1.13.39：原来这里给下拉加 min-width: 130px，列宽一变窄就会溢出压住邻居；改为撑满列宽（见上） */

/* 菜单自定义列表表头（v1.7.2） —— 列宽必须与 .ms-row 完全一致，否则行内控件会错位（v1.13.39） */
.menu-sorter .ms-head {
  display: grid; grid-template-columns: 160px 130px minmax(0, 1fr) auto; gap: 10px;
  padding: 4px 12px; font-size: 11.5px; color: var(--text-3);
}
.menu-sorter .ms-head span:nth-child(4) { text-align: right; }

/* v1.13.62：移动端基础（官网 / 后台 / 订货系统共用）——
   字体自适应、点击高亮与滚动惯性、禁止横向溢出、触控目标不小于 40px */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow-x: hidden; }
* { -webkit-tap-highlight-color: rgba(0, 0, 0, .06); }
@media (max-width: 760px) {
  img, svg, video, table { max-width: 100%; }
  .btn, .btn-sm, .tab, .chip, .glyph-btn, button, [role="button"] { min-height: 34px; }
  .input, .select, .textarea, input, select, textarea { font-size: 16px; } /* iOS 上 <16px 会自动放大页面 */
  /* v1.13.65：全站明细字号兜底 —— 12px 以下在小屏上难以辨认 */
  .text-xs, .cell-sub, .field-hint, .muted, .sub, small { font-size: 12.5px; }
  /* 商品目录 / 预存款 / 地址卡里的徽标与小标签（原本 11~11.5px） */
  .pc-sort .pc-arrow, .catalog-card .cc-flag, .catalog-card .cc-state,
  .ac-label, .dep-metric .dm-label, .dep-sum .ds-label,
  .catalog-row .cr-price .from, .catalog-row .cr-price .unit, .catalog-row .cr-sub, .pcat-count,
  .order-card .oc-sub, .msg-card .mc-time, .stat-card .sc-foot { font-size: 12.5px; }
}

/* v1.13.47：菜单类列表按「卡片自身宽度」自适应（容器查询）
   —— 「官网菜单名称自定义」「管理后台左侧菜单自定义」都是「菜单 / 分组 / 自定义名称 / 操作」四列，
   放进两列网格的半宽卡片里列宽不够会挤到重叠；这里不再要求卡片整行铺满，
   而是列宽不足（≤600px）时把操作按钮换到第二行右对齐。
   只有标了 .is-fluid 的列表参与（客户等级那种 .is-narrow 三列窄表有自己的布局，不受影响）；
   文件末尾还保留 ≤900px 的视口兜底，给不支持容器查询的旧浏览器。 */
.menu-sorter.is-fluid { container-type: inline-size; }
@container (max-width: 600px) {
  .menu-sorter.is-fluid .ms-head { display: none; }
  .menu-sorter.is-fluid .ms-row { grid-template-columns: 110px minmax(96px, 130px) minmax(0, 1fr); row-gap: 8px; }
  .menu-sorter.is-fluid .ms-row > .ms-ops { grid-column: 1 / -1; justify-content: flex-end; flex-wrap: wrap; }
}

/* v1.13.39：窄屏兜底——四列排不下时把操作按钮换到第二行（表头不再参与列对齐，直接隐藏），
   这样任何宽度下都不会出现「下拉 / 输入框被按钮压住」 */
@media (max-width: 900px) {
  .menu-sorter .ms-head { display: none; }
  .menu-sorter .ms-row { grid-template-columns: 110px minmax(96px, 130px) minmax(0, 1fr); row-gap: 8px; }
  .menu-sorter .ms-row > .ms-ops { grid-column: 1 / -1; justify-content: flex-end; flex-wrap: wrap; }
}

/* 客户等级及折扣（v1.7.4） */
.menu-sorter .brand-disc { display: grid; gap: 4px; }
.menu-sorter .ms-row > .brand-disc { min-width: 220px; }

/* ==========================================================================
   v1.10.1 全站直角：所有图标、卡片、按钮、输入框、弹层等圆角一律为 0
   v1.65.2【已撤销】—— 用户要求全站（含后台与客户端）恢复圆角。
   原规则 `*, *::before, *::after { border-radius: 0 !important; }` 已删除：
   它用 !important 压掉了全站 180+ 处本来写好的圆角（卡片、下拉、按钮、
   商品卡、输入框、弹层…），导致设计稿上的圆角全部失效。
   撤销后各组件恢复使用自身声明的圆角值（--radius 16px / --radius-lg /
   组件各自的 6~14px），无需逐个补写。
   ⚠️ 依赖本规则被移除才能生效的样式：
      · site.css 的 .spec-table（原本靠 !important 单独打补丁）→ 现在按自身 12px 生效
      · base.css 的 .round-cards 作用域类（圆角下单页卡片）→ 已成冗余，保留无害
   ⚠️ 少数位置**显式**写了 `border-radius: 0 0 X X`（贴边元素的单侧圆角，
      如 .cc-picked 角标、.round-cards 卡片末段），它们不受本次影响，语义正确。
   ========================================================================== */

/* --------------------------------------------------------------------------
   v1.65.1 下单流程卡片圆角（局部开口）
   v1.65.2 起全站已恢复圆角（全站直角规则被撤销），本作用域类不再产生额外效果，
   保留是为了① 语义标记 ② 卡片头/末段的单侧圆角仍需显式对齐父级圆角。
   -------------------------------------------------------------------------- */
.round-cards .data-card { border-radius: var(--radius); }
.round-cards .data-card > .data-card-head:first-child { border-radius: var(--radius) var(--radius) 0 0; }
.round-cards .data-card > .data-card-body:last-child,
.round-cards .data-card > .cart-subtotal:last-child,
.round-cards .data-card > .data-card-foot:last-child { border-radius: 0 0 var(--radius) var(--radius); }


/* ==========================================================================
   v1.64.4 右侧悬浮购物车（参照淘宝 / 京东的业界标准形态）
   · 右侧贴边竖排，宽 56px，不遮挡内容（底部横条会遮列表尾）
   · 购物车图标带件数角标
   · 鼠标悬停向左浮出已选清单，可直接移除某项
   ========================================================================== */
#cart-bar-host:empty { display: none; }

.fcart {
  position: fixed; right: 0; bottom: 96px; z-index: 90;
  display: flex; align-items: flex-end;
}
.fcart-btn {
  position: relative;
  width: 56px; padding: 10px 0 12px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: var(--ink-900); color: #fff; cursor: pointer;
  border-radius: 0; box-shadow: -4px 0 18px -10px rgba(6, 9, 15, .5);
  transition: background .16s var(--ease);
}
.fcart-btn:hover { background: #1b1f2a; }
.fcart-label { font-size: 11.5px; line-height: 1.2; opacity: .92; }
.fcart-count {
  position: absolute; top: -7px; right: -6px;
  min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 0; background: var(--red); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 19px; text-align: center;
  font-family: var(--font-num); box-shadow: 0 2px 6px -1px rgba(255, 60, 60, .5);
}

/* 悬停向左浮出的清单 */
.fcart-pop {
  position: absolute; right: 62px; bottom: 0; width: 320px;
  background: #fff; border: 1px solid var(--line); border-radius: 0;
  box-shadow: 0 12px 34px -14px rgba(6, 9, 15, .32);
  opacity: 0; visibility: hidden; transform: translateX(8px);
  transition: opacity .16s var(--ease), transform .16s var(--ease), visibility .16s;
  overflow: hidden;
}
.fcart:hover .fcart-pop,
.fcart:focus-within .fcart-pop { opacity: 1; visibility: visible; transform: none; }

.fp-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 13px; border-bottom: 1px solid var(--line);
}
.fp-head b { font-size: 13.5px; }
.fp-clear {
  border: 0; background: none; cursor: pointer;
  font-size: 12.5px; color: var(--text-3); font-family: var(--font);
}
.fp-clear:hover { color: var(--red); }

.fp-list { max-height: 300px; overflow-y: auto; }
.fp-row {
  display: flex; align-items: center; gap: 9px; padding: 9px 13px;
  border-bottom: 1px solid var(--line);
}
.fp-row:last-child { border-bottom: 0; }
.fp-thumb {
  width: 34px; height: 34px; border-radius: 0; flex: none;
  object-fit: contain; background: #F3F5F9; padding: 2px;
}
.fp-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.fp-info b { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-info em { font-style: normal; font-size: 11px; color: var(--text-3); }
.fp-qty { font-size: 12px; color: var(--text-3); flex: none; font-family: var(--font-num); }
.fp-amount { font-size: 12.5px; font-weight: 600; flex: none; font-family: var(--font-num); }
.fp-del {
  flex: none; width: 22px; height: 22px; border: 0; border-radius: 50%;
  background: none; color: var(--text-3); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.fp-del:hover { background: #FDECEC; color: var(--red); }

.fp-foot { padding: 11px 13px 13px; border-top: 1px solid var(--line); background: #FAFBFD; }
.fp-sum { display: flex; align-items: baseline; justify-content: space-between; }
.fp-sum span { font-size: 12.5px; color: var(--text-3); }
.fp-sum b { font-size: 19px; font-weight: 700; color: var(--red); font-family: var(--font-num); }
.fp-note { margin: 2px 0 9px; font-size: 11.5px; color: var(--text-3); }
.fp-go { width: 100%; justify-content: center; }

/* 窄屏：缩小为纯图标条，浮出面板占更宽 */
@media (max-width: 760px) {
  .fcart { bottom: 84px; }
  .fcart-btn { width: 48px; padding: 8px 0 10px; }
  .fcart-label { display: none; }
  .fcart-pop { right: 54px; width: min(300px, calc(100vw - 70px)); }
}

/* v1.64.4：代客下单的悬浮车宿主（与客户端共.fcart 样式，只是挂在不同容器里） */
.fcart-host:empty { display: none; }
body.console .fcart { bottom: 110px; }

/* ==========================================================================
   v1.65.0 淘宝式商品卡（学习淘宝 / 京东的商品瀑布流）
   要点（从用户给的截图提炼）：
     ① 图片是视觉主体 —— 方形、够大，撑起整张卡
     ② 价格最醒目 —— 橙红大字；建议零售价作划线原价作弱对比
     ③ 标题黑色两行，超出省略
     ④ 规格 / 单位等次要信息灰色小字，不与价格抢视线
     ⑤ 卡片间距加大，一屏能看到更多商品
   以下规则覆盖 v1.64.0 的 is-compact 紧凑定义（图片不再压扁）。
   ========================================================================== */
/* ==========================================================================
   v1.65.20 商品卡比例重调（用户：每行固定 4 个 / 显示完整、直观、齐平不重叠）
   —— 列数改为 **固定 4 列**（不再是 auto-fill 随宽度变），
      保证「每行正好 4 个商品」，卡片宽度可预期、便于横向比较。
   —— 图片从 1:1 方形改为 **4:3 扁方形**：每行 4 个时方形图会太高，
      一屏放不下几行；4:3 既保留视觉重量又把高度压下来。
   —— 取消建议零售价后价格区只剩一行，控件行整体上移并压低，
      保证「属性行 + 价格行 + 加购」三段完整可见、不重叠、不截断。
   ========================================================================== */
/* ① 固定 4 列（窄屏降为 3 / 2 / 1，避免挤压与重叠） */
.catalog-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1180px) { .catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .catalog-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   v1.65.350 商品卡买行「窄列防重叠」通用规则（真机截图反馈）
   问题：2 列（≤860px）时每列可用宽仅 ~150-170px，而精简卡 .cc-buyrow 里
        「价格区 + 数量步进器(90px) + 加购按钮(36px)」最小需 ~170px+，
        定长子元素撑破卡片，相邻卡内容互相压叠。
   修法：窄列（≤860px，即 2 列及以下）时买行改为**可换行**布局 ——
        价格区独占一行，数量步进器与加购按钮落到第二行；子元素一律
        flex:none + min-width:0，从根上杜绝溢出。
   说明：这是通用兜底，管理端（代客下单）与客户端（订货目录）同时受益。
   ========================================================================== */
@media (max-width: 860px) {
  .catalog-card.is-compact .cc-buyrow {
    display: flex; flex-wrap: wrap; align-items: center;
    justify-content: space-between; gap: 6px; min-width: 0;
  }
  .catalog-card.is-compact .cc-buyrow .cc-prices { flex: 1 1 100%; height: auto; min-width: 0; }
  .catalog-card.is-compact .cc-buyrow .cc-qty { flex: none; }
  .catalog-card.is-compact .cc-buyrow .cc-cart { flex: none; }
  .catalog-card.is-compact .cc-attrs,
  .catalog-card.is-compact .cc-attr-row,
  .catalog-card.is-compact .cc-attr-vals { min-width: 0; }
}

/* ② 图片：4:3 扁方形（较 1:1 矮约 25%，一屏能多看一行） */
.catalog-card.is-compact .cc-media { height: auto; aspect-ratio: 4 / 3; background: #fff; }
.catalog-card.is-compact .cc-media img { object-fit: contain; padding: 6px 10px; }

/* ③ 主体：紧凑内边距 + 段间距，卡片整体变矮但不拥挤 */
.catalog-card.is-compact .cc-body { padding: 9px 11px 11px; gap: 7px; }
.catalog-card.is-compact .cc-name {
  min-height: 0; font-size: 13.5px; line-height: 1.45; color: var(--text-1);
  -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
}
.catalog-card.is-compact .cc-series { display: none; }

/* ② 价格：橙红大字作视觉焦点，「价格」二字省掉（淘宝直接给金额） */
.catalog-card .cc-prices { display: flex; flex-direction: column; gap: 2px; }
.catalog-card .cc-buyrow { display: flex; align-items: flex-end; gap: 10px; }
.catalog-card .cc-buyrow .cc-prices { flex: 1; min-width: 0; }
.catalog-card .cc-your { display: flex; align-items: baseline; gap: 3px; flex-wrap: wrap; }
.catalog-card .cc-your .k { display: none; }
.catalog-card .cc-your .v {
  font-size: 19px; font-weight: 700; color: var(--red);
  font-family: var(--font-num); letter-spacing: -.02em; line-height: 1.15;
}
.catalog-card .cc-your .v em { font-style: normal; font-size: 12px; margin-left: 2px; }
.catalog-card .cc-your .unit { font-size: 11.5px; color: var(--text-3); font-family: var(--font); }

/* ④ 建议零售价：灰色小字 + 划线，弱化为对照价 */
.catalog-card .cc-retail { display: flex; align-items: baseline; gap: 4px; }
.catalog-card .cc-retail .k { font-size: 11.5px; color: var(--text-3); }
.catalog-card .cc-retail .v {
  font-size: 12px; color: var(--text-3); font-family: var(--font-num);
  text-decoration: line-through; text-decoration-color: rgba(0, 0, 0, .22);
}

/* 已选角标改到右上角（与淘宝一致）；加购按钮放大成圆形 */
.catalog-card .cc-picked { left: auto; right: 0; top: 0; border-radius: 0; padding: 3px 8px; font-size: 11px; }
.catalog-card.is-compact .cc-cart { width: 40px; height: 40px; border-radius: 50%; margin-top: 4px; }

/* ==========================================================================
   v1.65.18 紧凑商品卡：SKU 选择 + 数量步进
   —— 删掉了与商品图重复的名称行，腾出的高度换成真正有用的控件。
   卡片现在只保留：图（角标）/ SKU 下拉 / 建议零售价 + 价格 / 数量步进 + 加购。
   ========================================================================== */
/* SKU 属性平铺：每个维度一行「维度名：值 值 值」（淘宝 / 京东同款） */
.catalog-card .cc-attrs { display: flex; flex-direction: column; gap: 3px; margin-bottom: 4px; }
.catalog-card .cc-attr-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.catalog-card .cc-attr-k {
  flex: none; font-size: 11.5px; color: var(--text-3);
  max-width: 44px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.catalog-card .cc-attr-vals {
  display: flex; align-items: center; gap: 4px;
  flex-wrap: nowrap; min-width: 0; overflow: hidden;
}
.catalog-card .cc-attr {
  padding: 2px 8px; border: 1px solid var(--line); border-radius: 0;
  background: var(--surface-2); color: var(--text-2);
  font-size: 11.5px; line-height: 1.5; cursor: pointer; font-family: var(--font);
  transition: all .15s var(--ease);
}
.catalog-card .cc-attr:hover { border-color: var(--brand); color: var(--brand); }
/* 选中态：品牌色实底，一眼看出当前规格组合 */
.catalog-card .cc-attr.is-on {
  background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600;
}
/* 与其它已选值组合不出 SKU → 置灰不可选（避免用户选出无效组合） */
.catalog-card .cc-attr.is-void {
  opacity: .35; cursor: not-allowed; pointer-events: none;
  border-style: dashed; background: transparent;
}
/* 数量步进器：− [数字] +，与加购按钮同高对齐 */
.catalog-card .cc-qty {
  flex: none; display: inline-flex; align-items: center;
  height: 30px; border: 1px solid var(--line); border-radius: 0;
  background: var(--surface-2); overflow: hidden;
}
.catalog-card .cc-qty-btn {
  width: 26px; height: 100%; display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: var(--text-2);
  font-size: 15px; line-height: 1; cursor: pointer; font-family: var(--font);
  transition: background .15s var(--ease), color .15s var(--ease);
}
.catalog-card .cc-qty-btn:hover { background: var(--brand); color: #fff; }
.catalog-card .cc-qty-in {
  width: 42px; height: 100%; border: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line);
  border-radius: 0; background: transparent; text-align: center;
  font-family: var(--font-num); font-size: 12.5px; font-weight: 600; color: var(--text-1);
}
.catalog-card .cc-qty-in:focus { outline: none; background: #fff; }

/* ==========================================================================
   v1.65.19 对齐修正：价格区 / 数量步进器 / 加购按钮**底部齐平**
   问题（截图）：原来 .cc-buyrow 用 align-items:flex-end 底对齐，
   但三块高度不同（价格区两行 ≈34px、数量器 30px、加购按钮 40px），
   加购按钮额外 margin-top:4px → 底边虽然齐了，顶边却高低错开，很乱。
   修法：① 加购按钮去掉上边距；
        ② 三块统一 height:40px + align-items:center —— 视觉中心与底边同时对齐；
        ③ 价格区 flex 列 justify-content:center，两行价格自身也居中。
   ========================================================================== */
.catalog-card.is-compact .cc-buyrow { align-items: center; gap: 8px; }
.catalog-card.is-compact .cc-cart { margin-top: 0; }
/* v1.65.20：取消建议零售价后价格区只剩一行，把 40px 让给「数量 / 加购」，
   三块统一 36px —— 更紧凑，且底边仍严格齐平（不重叠、不截断）。 */
.catalog-card.is-compact .cc-prices {
  display: flex; flex-direction: column; justify-content: center; gap: 0;
  flex: 1; min-width: 0; height: 36px;
}
.catalog-card.is-compact .cc-qty { height: 36px; }
.catalog-card.is-compact .cc-qty-btn { width: 26px; }
.catalog-card.is-compact .cc-qty-in { width: 38px; }
.catalog-card.is-compact .cc-cart { width: 36px; height: 36px; }
/* 属性行：维度名与值都要完整可见（不截断、不换行导致卡片高度参差） */
.catalog-card .cc-attr-k { max-width: 40px; }
.catalog-card .cc-attr { padding: 2px 7px; font-size: 11px; }
/* 卡片内容区整体贴底：属性行在上，控件行在下，卡片间视觉重量一致 */
.catalog-card.is-compact .cc-body { justify-content: flex-end; }
.catalog-card .cc-media { flex: none; }

/* ==========================================================================
   v1.65.22 收件信息单行布局
   —— 收件人(100px) / 联系电话(150px) / 收件地址(剩余全部) / 期望到货 / 备注
   —— 五个字段挤在一行，靠 flex-basis 分配：
      收件人与电话是定长内容，给固定宽；地址最长，吃掉全部剩余空间。
   ========================================================================== */
.ar-line { display: flex; align-items: flex-end; gap: 10px; }
/* 同行布局下 field 不再自带下边距（由 gap 统一控制） */
.ar-line > .field { margin-bottom: 0; min-width: 0; }
.ar-line .label { white-space: nowrap; }
.ar-line .input, .ar-line .select, .ar-line .textarea { width: 100%; min-width: 0; }
/* 定长字段：flex 允许收缩，防止窄屏把地址挤没 */
.ar-f-receiver { flex: 0 0 100px; }
.ar-f-phone { flex: 0 0 150px; }
/* 地址：不再吃掉全部剩余空间（v1.65.291：宽度约束在 500px），
   备注跟在地址后面自然排列（不再被推到最右侧） */
.ar-f-address { flex: 0 1 500px; min-width: 220px; max-width: 500px; }
/* 日期与备注：按内容给固定宽，窄屏时依次换行 */
.ar-f-date { flex: 0 0 150px; }
.ar-f-remark { flex: 0 0 190px; }
/* 窄屏：从「地址独占一行」逐级退让，保证不重叠、不溢出 */
@media (max-width: 1180px) {
  .ar-line { flex-wrap: wrap; }
  .ar-f-address { flex: 1 1 100%; min-width: 0; max-width: none; order: 3; }
  .ar-f-date, .ar-f-remark { flex: 1 1 160px; }
}
@media (max-width: 720px) {
  .ar-line > .field { flex: 1 1 100%; }
  .ar-f-address, .ar-f-date, .ar-f-remark { order: 0; }
}