/* =============================================================
   SUCAITO · 鲸舟速航 — 设计系统 / Design Token（统一设计语言）
   权威规范（用户提供，参见 docs/DESIGN-SYSTEM.md）：
     - 业务蓝  #165DFF  (主品牌色 / 主操作色)
     - 科技灰  #333333  (正文/深色文本)
     - 标准字  思源黑体 Bold / Montserrat Bold
     - 辅助字  Arial / 微软雅黑
   所有页面一律引用本 token，禁止散落硬编码色值。
   ============================================================= */
/* =============================================================
   SUCAITO · 鲸舟速航 — 设计系统 / Design Token（统一设计语言）
   权威规范（用户提供官方品牌规范，参见 docs/DESIGN-SYSTEM.md）：
     主色    #165DFF（业务蓝）
     主色浅  #E8F3FF   主色hover #4080FF   主色禁用 #94BFFF
     语义/功能色 绿#00B42A 橙#FF7D00 红#F53F3F 灰#86909C
     中性色  标题#1D2129  次文#4E5969  占位#86909C  禁用#C9CDD4
     边框    #E5E6EB / #F2F3F5   页面底 #F7F8FA   卡片 #FFFFFF
     字体    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif
     圆角    按钮/输入 4px  卡片/弹窗 6px
     阴影    浮层 0 4px 16px 0 rgba(0,0,0,0.08)
     间距    8px 基准系（4/8/16/24/32）
   所有页面一律引用本 token，禁止散落硬编码色值。
   ============================================================= */
/* =============================================================
   设计主题层（2026-08-22 新增：三套主题可切换）
   -------------------------------------------------------------
   默认 :root = Ant Design 系（品牌业务蓝 #165DFF 保留为默认主色）
   [data-theme="carbon"]   = IBM Carbon Design
   [data-theme="polaris"]  = Shopify Polaris

   三套主题共用同一套业务类名（.btn/.badge/.table-card/.nav/...），
   仅通过 CSS 变量取值不同实现整体换肤。切换入口在导航栏下拉，
   选值存 localStorage("sucaito-theme")，页面加载时 JS 挂到 <html>。
   权威文档：docs/design/*.md
============================================================= */

/* ---------- 主题 1（默认）：Ant Design 系 ---------- */
:root,
[data-theme="ant"] {
  /* === 主色（品牌主操作）===
     Ant Design 主色推荐 #1677FF；本系统以品牌业务蓝 #165DFF 为默认 */
  --color-primary:       #165DFF;   /* 主色：主按钮/重点操作/链接 */
  --color-primary-hover: #4080FF;   /* 主色 hover */
  --color-primary-light: #E8F3FF;   /* 主色浅底（选区/信息条/浅描边） */
  --color-primary-disabled: #94BFFF;/* 主色禁用 */

  /* === 功能色 === */
  --success:  #00B42A;  --success-light:  #E8FFEA;
  --warning:  #FF7D00;  --warning-light:  #FFF7E8;
  --danger:   #F53F3F;  --danger-light:   #FFECE8;
  --info:     #86909C;  --info-light:     #F2F3F5;

  /* === 中性色 === */
  --ink:        #1D2129;
  --ink-soft:   #4E5969;
  --ink-muted:  #86909C;
  --ink-disabled:#C9CDD4;
  --line-strong:#C9CDD4;
  --line:       #E5E6EB;
  --line-light: #F2F3F5;
  --surface:    #FFFFFF;
  --bg:         #F7F8FA;

  /* === 导航（保留既有深蓝品牌导航）=== */
  --nav-bg:   #16213E;
  --nav-bg-2: #1A1A2E;

  /* === 字体 === */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", "Source Han Sans", "Source Han Sans SC",
               "思源黑体", "PingFang SC", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  --font-head: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
  --fw-strong: 600;
  --fw-bold:   600;

  /* === 圆角（Ant：控件 2-6px，卡片 8px）=== */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;

  /* === 阴影（Ant：分层较弱，卡片靠边框区分）=== */
  --shadow-popup: 0 4px 16px 0 rgba(0,0,0,0.08);
  --shadow-hover: 0 2px 8px  0 rgba(0,0,0,0.06);

  /* === 间距（8px 基准）=== */
  --space-1: 4px;  --space-2: 8px;
  --space-4: 16px; --space-6: 24px; --space-8: 32px;

  /* === 统一组件补充 token === */
  --table-head-bg:   #F7F8FA;
  --table-head-text: #6b7280;
  --table-head-line: #E5E6EB;
  --table-row-line:  #F3F4F6;
  --table-row-hover: #F2F3F5;
  --flash-success-bg: #e6f4ea; --flash-success-line: #b7e0c3; --flash-success-text: #137333;
  --flash-error-bg:   #fde8e8; --flash-error-line:   #f5b5b5; --flash-error-text:   #b91c1c;
  --flash-warn-bg:    #fef7e0; --flash-warn-line:    #f3d77a; --flash-warn-text:    #8a5a00;
}

/* ---------- 主题 2：IBM Carbon Design ----------
   权威来源：IBM Carbon Design Language
   - 主色 blue 60 #0F62FE
   - 交互色 hover blue 60→#0F62FE 系
   - 圆角：默认 0（方形，卡片/控件锋锐），按钮可选一半圆角
   - 间距：2px 基准（Carbon grid 使用 2px 八分网格）
   - 字体：IBM Plex Sans
   - 阴影：层叠式（elevation），卡片用 1 层弱阴影 */
[data-theme="carbon"] {
  --color-primary:       #0F62FE;   /* blue 60 主色 */
  --color-primary-hover: #0043CE;   /* blue 70 hover */
  --color-primary-light: #EDF5FF;   /* blue 10 浅底 */
  --color-primary-disabled: #C8DDFF;/* blue 30 禁用 */

  --success:  #24A148;  --success-light:  #DEFBE6;
  --warning:  #F1C21B;  --warning-light:  #FCF4D6;
  --danger:   #DA1E28;  --danger-light:   #FFE9E9;
  --info:     #525252;  --info-light:     #F4F4F4;

  --ink:        #161616;   /* gray 100 */
  --ink-soft:   #525252;   /* gray 70 */
  --ink-muted:  #6F6F6F;   /* gray 60 */
  --ink-disabled:#C6C6C6;  /* gray 30 */
  --line-strong:#8D8D8D;   /* gray 50 */
  --line:       #E0E0E0;   /* gray 20 */
  --line-light: #F4F4F4;   /* gray 10 */
  --surface:    #FFFFFF;
  --bg:         #F4F4F4;   /* gray 10 */

  --nav-bg:   #161616;   /* gray 100 炭黑导航 */
  --nav-bg-2: #393939;   /* gray 80 */

  --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", "Source Han Sans SC", "PingFang SC",
               "Microsoft YaHei", Arial, sans-serif;
  --font-head: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "PingFang SC", "Microsoft YaHei", sans-serif;

  --radius-sm: 2px;   /* Carbon 默认方形，小控件 2px */
  --radius-md: 2px;   /* 卡片矩形 */
  --radius-lg: 2px;

  --shadow-popup: 0 4px 12px 0 rgba(0,0,0,0.16);
  --shadow-hover: 0 1px 4px  0 rgba(0,0,0,0.12);

  --space-1: 4px;  --space-2: 8px;
  --space-4: 16px; --space-6: 24px; --space-8: 32px;

  --table-head-bg:   #E0E0E0;
  --table-head-text: #161616;
  --table-head-line: #E0E0E0;
  --table-row-line:  #E0E0E0;
  --table-row-hover: #E5E5E5;
  --flash-success-bg: #DEFBE6; --flash-success-line: #24A148; --flash-success-text: #0E6027;
  --flash-error-bg:   #FFE9E9; --flash-error-line:   #DA1E28; --flash-error-text:   #750E13;
  --flash-warn-bg:    #FCF4D6; --flash-warn-line:    #F1C21B; --flash-warn-text:    #684E00;
}

/* ---------- 主题 3：Shopify Polaris ----------
   权威来源：Shopify Polaris Design System
   - 主色 #008060（绿）
   - 交互色 hover #006E52
   - 圆角：控件 6px，卡片 8px/大卡片 18px
   - 间距：4px 基准（Polaris 使用 4px 网格）
   - 字体：Shopify Sans / Inter
   - 阴影：Polaris 分层明显（0,1,2,3 层） */
[data-theme="polaris"] {
  --color-primary:       #008060;   /* Polaris 主绿 */
  --color-primary-hover: #006E52;   /* hover 深绿 */
  --color-primary-light: #E3F1EC;   /* 浅绿底 */
  --color-primary-disabled: #B7D9CF;/* 禁用 */

  --success:  #2E7D32;  --success-light:  #D9F0DF;
  --warning:  #B98900;  --warning-light:  #FFF1C9;
  --danger:   #D82C0F;  --danger-light:   #FFE8E0;
  --info:     #424242;  --info-light:     #F6F6F7;

  --ink:        #202223;
  --ink-soft:   #6D7175;
  --ink-muted:  #8C9196;
  --ink-disabled:#C9CCCF;
  --line-strong:#AEAEAE;
  --line:       #D9D9D9;
  --line-light: #EBEBEB;
  --surface:    #FFFFFF;
  --bg:         #F6F6F7;

  --nav-bg:   #202223;   /* Polaris 深灰导航 */
  --nav-bg-2: #3A3B3C;

  --font-sans: "Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue", "Source Han Sans SC",
               "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  --font-head: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;

  --radius-sm: 6px;   /* Polaris 控件 6px */
  --radius-md: 8px;   /* 卡片 8px */
  --radius-lg: 18px;  /* 大卡片/令牌 18px */

  --shadow-popup: 0 4px 20px 0 rgba(0,0,0,0.2);
  --shadow-hover: 0 2px 10px 0 rgba(0,0,0,0.12);

  --space-1: 4px;  --space-2: 8px;
  --space-4: 16px; --space-6: 24px; --space-8: 32px;

  --table-head-bg:   #F6F6F7;
  --table-head-text: #202223;
  --table-head-line: #E1E3E5;
  --table-row-line:  #F0F1F2;
  --table-row-hover: #EDEFF0;
  --flash-success-bg: #D9F0DF; --flash-success-line: #2E7D32; --flash-success-text: #1F4B2B;
  --flash-error-bg:   #FFE8E0; --flash-error-line:   #D82C0F; --flash-error-text:   #943010;
  --flash-warn-bg:    #FFF1C9; --flash-warn-line:    #B98900; --flash-warn-text:    #5B4B00;
}

/* === Reset & Base === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  /* 固定保留竖向滚动条轨道：避免内容长短变化导致滚动条出现/消失，
     使 fixed 顶部导航宽度恒定，根治「导航栏本身左右抖动」(1265↔1280 跳变) */
  overflow-y: scroll;
}

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  padding-top: 62px; /* 补偿 fixed 顶部导航(62px) 占位，避免遮挡内容 */
  -webkit-font-smoothing: antialiased;
}

/* === Header === */
.site-header {
  background: linear-gradient(135deg, var(--nav-bg-2) 0%, var(--nav-bg) 100%);
  color: #fff;
  padding: 18px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: var(--shadow-popup);
  position: sticky;
  top: 0;
  z-index: 100;
}
.site-header h1 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.site-header .count { color: rgba(255,255,255,0.6); font-size: 14px; }

/* === 顶部导航栏（统一）=== */
.site-nav {
  background: linear-gradient(135deg, var(--nav-bg-2) 0%, var(--nav-bg) 100%);
  color: #fff;
  padding: 0 28px;
  height: 62px;
  display: flex;
  align-items: center;
  gap: 32px;
  box-shadow: var(--shadow-popup);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 100;
  /* 说明：不能用 overflow:hidden——会纵向裁掉「系统」下拉弹层(展开超过62px被切)。
     横向防抖/防撑破由 .nav-links{overflow-x:auto} + html{overflow-y:scroll}+.nav-side{flex-shrink:0} 承担 */
}

/* 主题切换下拉 */
.theme-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.theme-switch select {
  appearance: none;
  -webkit-appearance: none;
  background: rgba(255,255,255,0.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 6px;
  padding: 5px 26px 5px 12px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  outline: none;
  transition: background .2s;
}
.theme-switch select:hover { background: rgba(255,255,255,0.2); }
.theme-switch select option { color: #1d1d1f; }
.theme-switch::after {
  content: "▾";
  position: absolute;
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255,255,255,0.8);
  font-size: 11px;
  pointer-events: none;
}
.theme-switch-label {
  color: rgba(255,255,255,0.6);
  font-size: 12px;
  margin-right: 2px;
  /* 覆盖各页面内联裸 label{display:block}（如 quote.html 等 16 个模板）对导航栏 label 的挤压 */
  display: inline-block !important;
  margin-bottom: 0 !important;
  line-height: 1;
  white-space: nowrap;
}
/* 主题切换脚本：挂载到 <html> 的 data-theme，保证全站生效 */
.theme-switch-script {
  position: fixed;
  bottom: -9999px;
  visibility: hidden;
  width: 0;
  height: 0;
}

.site-nav .nav-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  text-decoration: none;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.site-nav .nav-brand img { height: 16px; vertical-align: middle; position: relative; top: -2px; }
.site-nav .nav-links { display: flex; align-items: center; gap: 6px; margin-left: 8px; flex: 1 1 auto; min-width: 0; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.28) transparent; }
/* v2.83.16 导航窄屏可滚动：不再隐藏滚动条——避免导航项超宽时尾部被裁又看不见/滚不动；细滚动条在窄屏可见，触控板可横滑 */
.site-nav .nav-links::-webkit-scrollbar { height: 6px; }
.site-nav .nav-links::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.25); border-radius: 3px; }
.site-nav .nav-links::-webkit-scrollbar-track { background: transparent; }
.site-nav .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 8px;
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: background .2s, color .2s;
}
.site-nav .nav-link:hover { background: rgba(255,255,255,0.1); color: #fff; }
.site-nav .nav-link.active {
  background: var(--color-primary);
  color: #fff;
  font-weight: 600;
}
/* 统一线性导航图标（SVG stroke 同系列） */
.site-nav .nav-ico {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: block;
}
.site-nav .nav-side { margin-left: auto; display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.site-nav .nav-side .count-text { color: rgba(255,255,255,0.6); font-size: 13px; }
.site-nav .nav-logout { color: #fff; font-size: 13px; padding: 6px 14px; border-radius: 6px; background: var(--danger); border: 1px solid rgba(255,255,255,0.25); text-decoration: none; transition: background .15s; white-space: nowrap; }
.site-nav .nav-logout:hover { filter: brightness(.9); color: #fff; }
/* === 「系统」下拉菜单（系统设置/退出登录合并折叠）=== */
.site-nav .nav-drop { position: relative; display: inline-flex; align-items: center; }
.site-nav .nav-drop-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.75);
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s, color .2s;
}
.site-nav .nav-drop-trigger:hover { background: rgba(255,255,255,0.1); color: #fff; }
.site-nav .nav-drop.active .nav-drop-trigger,
.site-nav .nav-drop:hover .nav-drop-trigger { background: rgba(255,255,255,0.12); color: #fff; }
.site-nav .nav-drop-caret { width: 14px; height: 14px; flex-shrink: 0; opacity: .8; transition: transform .18s; }
.site-nav .nav-drop:hover .nav-drop-caret { transform: rotate(180deg); }
.site-nav .nav-drop-menu {
  position: absolute;
  top: calc(100% - 2px);
  right: 0;
  min-width: 150px;
  background: #1c1c20;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,.28);
  padding: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .15s, transform .15s, visibility .15s;
  z-index: 200;
}
.site-nav .nav-drop:hover .nav-drop-menu,
.site-nav .nav-drop:focus-within .nav-drop-menu,
.site-nav .nav-drop.open .nav-drop-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.site-nav .nav-drop-item {
  display: block;
  padding: 9px 12px;
  border-radius: 7px;
  color: rgba(255,255,255,0.82);
  text-decoration: none;
  font-size: 13px;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.site-nav .nav-drop-item:hover { background: rgba(255,255,255,0.1); color: #fff; }
.site-nav .nav-drop-item.active { background: var(--color-primary); color: #fff; font-weight: 600; }
.site-nav .nav-drop-sep { height: 1px; background: rgba(255,255,255,0.12); margin: 5px 8px; }
.site-nav .nav-drop-logout { color: #ff7a75; }
.site-nav .nav-drop-logout:hover { background: rgba(255,80,70,0.14); color: #ff8f8a; }
/* v2.84.1 fix: 分组下拉嵌在 .nav-links(overflow-x:auto 横向滚动容器)内,
   absolute 弹性会因 overflow-x 祖先被裁剪/压制非页面顶层 → 改为 fixed, JS 按触发器
   getBoundingClientRect 实时定位(脱离 overflow 祖先上浮, 不被下方内容遮挡)。
   v2.97.1: 「系统」下拉已挪到导航栏最右侧(nav-side 内、主题切换右边)，用 absolute right:0 展开；
   但贴屏幕右缘的 absolute 弹层右边距为 0，圆角/阴影/文字会顶到视口边缘 → 右移 8px 留边距。 */
.site-nav .nav-links .nav-drop .nav-drop-menu { position: fixed; right: auto; }
.site-nav .nav-side .nav-drop .nav-drop-menu { right: -8px; }
.site-nav .nav-links .nav-drop.open .nav-drop-menu,
.site-nav .nav-links .nav-drop:hover .nav-drop-menu { transform: translateY(0); }

@media (max-width: 560px) {
  .site-nav { padding: 0 14px; gap: 10px; }
  .site-nav .nav-link { padding: 8px 10px; font-size: 13px; }
  .site-nav .nav-brand { font-size: 16px; }
  .site-nav { height: 56px; }
  .site-nav .nav-drop-trigger { padding: 8px 10px; font-size: 13px; }
  .site-nav .nav-ico { width: 15px; height: 15px; }
  .site-nav .nav-brand img { height: 15px; }
  .site-nav .nav-links { gap: 2px; margin-left: 2px; }
  /* 窄屏文字导航往往溢出，改图标优先以便横行放下更多项 */
  .site-nav .nav-link { padding: 7px 9px; gap: 4px; }
}
/* v2.83.16 中/窄屏导航：折叠次要工具栏，把空间还给导航主体——避免 nav-side(计数/汇率/主题 共~466px) 把 nav-links 挤到只剩几十px 致后方导航看不见 */
@media (max-width: 1500px) {
  .site-nav .nav-side .count-text { display: none; }
}
@media (max-width: 1240px) {
  .site-nav .nav-side .theme-switch-label { display: none; }
  .site-nav .nav-links { gap: 2px; }
  .site-nav .nav-link { padding: 8px 11px; gap: 4px; }
}
@media (max-width: 1080px) {
  /* 主题切换也很次要，窄屏藏起来；导航仍可横向滚动（细滚动条已开） */
  .site-nav .nav-side .theme-switch { display: none; }
  .site-nav .nav-side { gap: 6px; }
  .site-nav .nav-side .nav-drop-trigger { padding: 8px 10px; }
}

/* === Breadcrumb === */
.breadcrumb {
  padding: 14px 28px;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #e8e8ed;
  font-size: 13px;
}
.breadcrumb.a1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.breadcrumb .bc-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.breadcrumb a { color: var(--color-primary); text-decoration: none; font-weight: 500; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb span { color: #8e8e93; }

/* === Card === */
.card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  transition: box-shadow .25s, transform .25s;
}
.card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  /* v2.113.32 修复弹窗错位：原来这里还有 transform: translateY(-2px)，但 .card 内含
     position:fixed 弹窗（物流轨迹明细）——父级一旦带 transform，后代的 fixed 定位基准
     就从「视口」被劫持成「该父级」，弹窗会被推到内容中部并溢出视口（实测卡片 top 1167
     高 79，视口仅 900，关闭按钮点不到）。
     且该位移仅在 :hover 时生效 → 鼠标在卡片上才复现，现象偶发难查。
     权衡：这 2px 悬停位移是纯装饰，代价是每张含弹窗的卡片都埋雷 → 直接去掉位移，
     仅保留阴影加深（悬停反馈不丢）。 */
}
.card a { text-decoration: none; color: inherit; display: block; }
.card-img {
  width: 100%;
  aspect-ratio: 1;
  background: #f0f0f0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #aaa;
  font-size: 12px;
  position: relative;
  border-radius: 8px 8px 0 0;
}
.card-img img { width: 100%; height: 100%; object-fit: cover; }
.card-body { padding: 14px 18px; }
.card-body h3 {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-meta { display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.card-meta .price { color: var(--color-primary); font-weight: 700; font-size: 17px; }
.card-meta .supplier { color: #8e8e93; }
.card-tags { margin-top: 8px; display: flex; gap: 4px; flex-wrap: wrap; }
.card-tags span {
  display: inline-block;
  background: #f2f2f5;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 11px;
  color: #555;
}
/* 缺成本价角标（2026-09-10 v2.99.2：从首页待办移出后挪到产品卡） */
.card-tags span.tag-nocost {
  background: #fff4e5;
  color: #b26a00;
  border: 1px solid #ffd8a8;
  font-weight: 600;
}

/* === Grid === */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
  padding: 24px 28px;
}

/* === 详情页布局 === */
.detail-container {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  padding: 28px;
  display: flex;
  gap: 24px;
  align-items: flex-start;
}
.detail-main { flex: 1; min-width: 320px; max-width: 1050px; }
.detail-sidebar { width: 560px; flex-shrink: 0; }

/* === 统一卡片 === */
.info-card {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  margin-bottom: 20px;
}
.info-card h2 { font-size: 22px; font-weight: 700; margin-bottom: 14px; line-height: 1.35; }
.info-card h3 {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid #f0f0f0;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* === 产品图片 === */
.product-img {
  width: 100%;
  border-radius: 10px;
  aspect-ratio: 1;
  max-height: 400px;
  object-fit: cover;
  background: #f5f5f7;
}
.image-gallery { margin-bottom: 18px; }
.gallery-main { position: relative; max-width: 400px; margin: 0 auto; }
.gallery-thumbs {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.thumb {
  width: 64px;
  height: 48px;
  object-fit: cover;
  border-radius: 6px;
  cursor: pointer;
  border: 2px solid transparent;
  opacity: 0.6;
  transition: all .2s;
  flex-shrink: 0;
}
.thumb:hover { opacity: 0.9; }
.thumb.active { border-color: var(--color-primary); opacity: 1; }
.gallery-nav {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.nav-counter { font-size: 12px; color: #8e8e93; white-space: nowrap; }

/* === 信息表格 === */
.info-table { width: 100%; font-size: 14px; border-collapse: collapse; }
.info-table tr { border-bottom: 1px solid #f0f0f0; }
.info-table tr:last-child { border-bottom: none; }
.info-table td { padding: 8px 12px; vertical-align: top; }
.info-table td:first-child { font-weight: 600; color: #555; white-space: nowrap; width: 30%; }
.info-table code {
  background: #f2f2f5;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  color: #555;
}

/* === 价格 === */
.price-big {
  font-size: 34px;
  font-weight: 700;
  color: var(--color-primary);
  margin: 10px 0;
  letter-spacing: -0.5px;
}
.price-usd-ref {
  font-size: 20px;
  font-weight: 600;
  color: #8e8e93;
  margin-left: 8px;
}

/* === 链接按钮 === */
.link-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 22px;
  color: #fff !important;
  border-radius: 10px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: all .2s;
}
.link-btn:hover { filter: brightness(1.15); transform: translateY(-1px); }
.link-btn:active { transform: scale(0.97); }
.link-btn small { opacity: 0.75; font-weight: 400; }
.link-placeholder {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 22px;
  background: #f0f0f0;
  color: #a0a0a0;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 400;
}

/* === 关键词标签 === */
.keyword-tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 14px;
  font-size: 12px;
  margin: 3px 5px 3px 0;
  font-weight: 500;
  transition: all .15s;
}
.keyword-tag:hover { transform: translateY(-1px); }
.keyword-tag.cn { background: #e8f0fe; color: #1a73e8; }
.keyword-tag.en { background: var(--flash-success-bg); color: var(--flash-success-text); }
/* === 备选标题 === */
.alt-title-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
}
.alt-title-item:last-child { border-bottom: none; }
.title-num {
  background: var(--color-primary);
  color: #fff;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  white-space: nowrap;
  flex-shrink: 0;
}
.title-text { flex: 1; font-size: 14px; color: var(--ink); line-height: 1.5; }

/* === 复制按钮 === */
.copy-btn {
  background: #555;
  color: #fff;
  border: none;
  padding: 6px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
  transition: background .2s;
}
.copy-btn:hover { background: var(--ink); }

/* === 规格参数 === */
.specs { width: 100%; border-collapse: collapse; }
.specs thead th {
  background: var(--nav-bg);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 8px 14px;
  text-align: left;
}
.specs tr:nth-child(even) { background: #fafafa; }
.specs td {
  padding: 9px 14px;
  font-size: 13px;
  border-bottom: 1px solid #f0f0f0;
}
.specs td:first-child { font-weight: 600; color: #555; width: 20%; white-space: nowrap; }
.specs td:nth-child(2) { width: 52%; white-space: nowrap; }
.specs td.specs-en { color: #666; font-size: 12.5px; width: 28%; }
.specs.hidden { display: none; }

/* 规格标签栏 */
.spec-tabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.spec-tab {
  padding: 6px 14px;
  border: 1px solid #d1d1d6;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
  color: #555;
  transition: all .2s;
}
.spec-tab:hover { background: #e8e8ed; border-color: #bbb; }
.spec-tab.active { background: var(--nav-bg); color: #fff; border-color: var(--nav-bg); }
.hidden { display: none !important; }

/* === 详情文案 === */
.detail-copy-text {
  font-size: 14px;
  line-height: 1.8;
  white-space: pre-wrap;
  color: var(--ink);
}

/* === 页脚导航 === */
.footer-nav-wrap {
  width: 100%;
  border-top: 1px solid #e8e8ed;
  background: #f5f5f7;
  position: relative;
}
.footer-nav {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  padding: 14px 28px;
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
}
.footer-nav-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
}
@media (max-width: 600px) {
  .footer-nav-center { position: static; transform: none; margin: 0 auto; }
}
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  padding: 10px 20px;
  background: var(--nav-bg-2);
  color: #fff !important;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  transition: background .2s;
  flex-shrink: 0;
}
.back-link:hover { background: #2a2a4e; }
.nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 10px 20px;
  background: #fff;
  color: var(--ink) !important;
  text-decoration: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid #d1d1d6;
  transition: all .2s;
}
.nav-btn:hover { border-color: var(--color-primary); color: var(--color-primary) !important; }
.nav-btn.disabled { opacity: 0.3; pointer-events: none; cursor: default; }

/* === 分页 === */
.pagination {
  text-align: center;
  padding: 24px 28px 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.pagination .page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  background: #fff;
  border-radius: 8px;
  text-decoration: none;
  color: var(--ink);
  border: 1px solid #e8e8ed;
  font-size: 14px;
  transition: all .2s;
}
.pagination .page-btn:hover { border-color: var(--color-primary); color: var(--color-primary); z-index: 1; }
.pagination .page-btn.active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
  font-weight: 600;
}
.pagination .page-btn.disabled {
  color: #ccc;
  cursor: default;
  pointer-events: none;
}
.pagination .page-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  color: #aaa;
  font-size: 14px;
  letter-spacing: 2px;
}

/* === 分页（pg-btn 系，商机/客户页共用，原 crm.html 内联提升至此） === */
.pagination .pg-btn {
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e0e0e5;
  border-radius: 8px;
  background: #fff;
  color: #1d1d1f;
  font-size: 13px;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .2s, background .2s, color .2s;
}
.pagination .pg-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.pagination .pg-btn.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; font-weight: 600; }
.pagination .pg-btn.disabled { opacity: 0.4; pointer-events: none; }
.pagination .pg-info { font-size: 13px; color: #8e8e93; margin: 0 6px; }

/* === 空状态 === */
.no-results { text-align: center; padding: 80px 20px; color: #8e8e93; }
.no-results h3 { font-size: 18px; margin-bottom: 8px; font-weight: 600; }

/* === 弹窗/预览 === */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.7);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-content {
  background: #fff;
  border-radius: 14px;
  padding: 24px;
  max-width: 1350px;
  width: 95%;
  max-height: 100%;
  overflow-y: auto;
  position: relative;
}
.modal-close {
  position: absolute;
  top: 12px; right: 16px;
  background: none;
  border: none;
  font-size: 24px;
  color: #666;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}
.modal-close:hover { background: #f0f0f0; }
.modal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(192px, 1fr));
  gap: 12px;
  align-items: start;
}
.modal-item {
  background: #f5f5f7;
  border-radius: 8px;
  overflow: hidden;
  text-align: center;
}
.modal-item img { width: 100%; height: 192px; object-fit: cover; display: block; cursor: pointer; }
.modal-item video { width: 100%; max-height: 240px; display: block; background: #000; object-fit: contain; }
.modal-item-actions { display: flex; gap: 1px; }
.modal-item-actions .action-btn {
  flex: 1;
  padding: 5px 4px;
  font-size: 11px;
  border: none;
  cursor: pointer;
  text-align: center;
  color: var(--ink) !important;
  text-decoration: none;
  display: block;
  font-family: inherit;
  background: #e8e8ed;
  transition: background .15s;
}
.modal-item-actions .action-btn:hover { background: #d1d1d6; }
.download-btn {
  display: block;
  padding: 6px;
  background: #e8e8ed;
  color: var(--ink) !important;
  text-decoration: none;
  font-size: 12px;
  text-align: center;
  transition: background .2s;
}
.download-btn:hover { background: #d1d1d6; }

/* 图片全屏预览 */
.preview-overlay {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.9);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.preview-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 90vw;
  max-height: 90vh;
}
.preview-img {
  max-width: 90vw;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 4px;
  cursor: pointer;
}
.preview-info {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
  color: #aaa;
  font-size: 14px;
}
.preview-actions {
  display: flex;
  gap: 6px;
}
.preview-actions .action-btn {
  padding: 6px 16px;
  font-size: 12px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  color: var(--ink);
  font-family: inherit;
  text-decoration: none;
  display: inline-block;
  background: #e8e8ed;
  transition: background .15s;
}
.preview-actions .action-btn:hover { background: #d1d1d6; }
.preview-nav-btn {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.1);
  border: none;
  color: #fff;
  font-size: 32px;
  padding: 16px 12px;
  cursor: pointer;
  border-radius: 6px;
  z-index: 10001;
  transition: background .2s;
}
.preview-nav-btn:hover { background: rgba(255,255,255,0.25); }
.preview-nav-btn.prev { left: 16px; }
.preview-nav-btn.next { right: 16px; }
.preview-nav-btn.disabled { display: none; }

/* === 供应商详情页 === */
.contact-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: #f2f2f5;
  border-radius: 10px;
  font-size: 13px;
  color: var(--ink);
}
.contact-tag a { color: #1a73e8; text-decoration: none; }
.contact-tag a:hover { text-decoration: underline; }
.flex-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 16px;
}
.info-item { flex: 1; min-width: 200px; }
.info-item .label {
  font-size: 11px;
  text-transform: uppercase;
  color: #8e8e93;
  font-weight: 600;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.info-item .value {
  font-size: 15px;
  color: var(--ink);
  line-height: 1.4;
}

/* === 完善度徽标 === */
.completeness-badge {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.completeness-badge.level-a { background: #1b5e20; color: #fff; }
.completeness-badge.level-b { background: #1565c0; color: #fff; }
.completeness-badge.level-c { background: #f57f17; color: #fff; }
.completeness-badge.level-d { background: #c62828; color: #fff; }

/* === 亚马逊价格框 === */
.amazon-price-box {
  background: linear-gradient(135deg, #fff8e1, #fff3cd);
  border: 1px solid #ffe082;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
}
.amazon-price-box .price-amount {
  font-size: 30px;
  font-weight: 700;
  color: var(--color-primary);
}
.amazon-price-box .price-note {
  font-size: 12px;
  color: #b0a080;
  margin-top: 6px;
}

/* === 登录页样式 === */
.login-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}
.login-card {
  background: #fff;
  border-radius: 16px;
  padding: 40px 36px 32px;
  width: 380px;
  max-width: 100%;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.login-card .brand {
  text-align: center;
  margin-bottom: 28px;
}
.login-card .brand .subtitle {
  font-size: 13px;
  color: #8e8e93;
}
.input-group { margin-bottom: 18px; }
.input-group label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #555;
  margin-bottom: 6px;
}
.input-group input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #d1d1d6;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border .2s;
  background: #fafafa;
}
.input-group input:focus { border-color: var(--color-primary); background: #fff; }
.login-btn {
  width: 100%;
  padding: 12px;
  background: var(--nav-bg-2);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background .2s;
  margin-top: 8px;
}
.login-btn:hover { background: #2a2a4e; }
.error-msg {
  background: #fff5f5;
  border: 1px solid #fecaca;
  color: #dc2626;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 18px;
}
.footer-text {
  text-align: center;
  margin-top: 24px;
  font-size: 11px;
  color: #c7c7cc;
}

/* === 响应式 === */
@media (max-width: 900px) {
  .detail-container { flex-direction: column; }
  .detail-sidebar { width: 100%; }
  .detail-main { min-width: 100%; }
}
@media (max-width: 720px) {
  .grid { padding: 16px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
  .site-header { padding: 14px 16px; }
  .site-header h1 { font-size: 18px; }
  .detail-container { padding: 16px; }
  .filters { padding: 12px 16px; top: 58px; }
  .filters input[type=text] { width: 140px; }
  .container { padding: 16px; }
}

/* ===== 统一组件库（2026-08-17 新增；2026-08-22 方案B：令牌化·品牌色彩阶收敛）===== */
/* 方案B（权威见 docs/DESIGN-SYSTEM.md）：
   主操作 = 业务蓝 var(--color-primary)=#165DFF（主品牌色 / 主操作色）
   品牌强调 = 业务蓝 var(--color-primary)=#165DFF（主按钮/重点操作/导航激活）
   链接 = 中性灰 --link → hover 深蓝 --link-hover
   语义色：成功绿/警告琥珀/危险红 各归其位。
   禁止第三方色混入。 */

/* 统一按钮体系 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 16px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  line-height: 1.4;
  cursor: pointer;
  text-decoration: none;
  transition: background .2s, border-color .2s, color .2s, transform .1s, box-shadow .2s;
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-hover); }
.btn-secondary { background: var(--nav-bg); color: #fff; }
.btn-secondary:hover { background: var(--nav-bg-2); }
.btn-success { background: var(--success); color: #fff; }
.btn-success:hover { filter: brightness(.95); }
.btn-warn { background: var(--warning); color: #fff; }
.btn-warn:hover { filter: brightness(.95); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { filter: brightness(.95); }
.btn-ghost { background: var(--line); color: var(--ink); }
.btn-ghost:hover { background: var(--line-strong); }
.btn-outline { background: var(--surface); border: 1px solid var(--color-primary); color: var(--color-primary); }
.btn-outline:hover { background: var(--color-primary-light); border-color: var(--color-primary); }
.btn-ghost { background: transparent; border: none; color: var(--color-primary); }
.btn-ghost:hover { background: var(--color-primary-light); }
.btn-sm { padding: 5px 10px; font-size: 12px; border-radius: var(--radius-sm); }
.btn-block { width: 100%; }

/* 统一徽标/状态 */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}

/* 客户阶段徽标（对齐阿里国际站 4 阶段：洽谈中/未成交/跟单中/售后） */
.badge.洽谈中 { background: #e0f2fe; color: #0369a1; }
.badge.未成交 { background: #f1f3f4; color: #5f6368; }
.badge.跟单中 { background: #dcfce7; color: #15803d; }
.badge.售后   { background: #ffedd5; color: #c2410c; }

/* 统一表格卡片容器 */
.table-card {
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-hover);
  overflow: hidden;
}
.table-card table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.table-card thead th {
  background: var(--table-head-bg);
  color: var(--table-head-text);
  font-weight: 600;
  text-align: left;
  padding: 11px 14px;
  border-bottom: 1px solid var(--table-head-line);
  white-space: nowrap;
}
.table-card tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--table-row-line);
  vertical-align: middle;
}
.table-card tbody tr:hover { background: var(--table-row-hover); }

/* 统一提示消息 */
.flash {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 16px;
}
.flash-success { background: var(--flash-success-bg); border: 1px solid var(--flash-success-line); color: var(--flash-success-text); }
.flash-error   { background: var(--flash-error-bg); border: 1px solid var(--flash-error-line); color: var(--flash-error-text); }
.flash-warn    { background: var(--flash-warn-bg); border: 1px solid var(--flash-warn-line); color: var(--flash-warn-text); }

/* ===== 发货批次表单（ship-card / ship-grid）统一样式（2026-08-23 新增）===== */
.ship-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  margin-bottom: 14px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.ship-card .sc-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  margin: 0 0 12px;
}
.ship-card .sc-title .step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-size: 12px;
  font-weight: 700;
  flex: none;
}
.ship-card .sc-title .hint {
  font-size: 12px; font-weight: 400; color: var(--ink-muted);
}
.ship-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
/* 通用：grid 布局跨满整行（多个表单网格共用，2026-08-23 提取自各页内联） */
.full { grid-column: 1 / -1; }
.ship-grid .full { grid-column: 1 / -1; }
.ship-grid label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 5px;
}
.ship-grid input[type=text],
.ship-grid input[type=number] {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  font-size: 13px;
  font-family: var(--font-sans);
  background: var(--surface);
  color: var(--ink);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.ship-grid input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}
/* 「本批发什么货」商品选择行 */
.ship-item-row {
  display: grid;
  grid-template-columns: 1.4fr 2fr .7fr .7fr;
  gap: 10px;
  align-items: end;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  margin-bottom: 8px;
}
.ship-item-row label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 4px;
}
.ship-item-row input[type=text],
.ship-item-row input[type=number] {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font-size: 13px;
  font-family: var(--font-sans);
  background: var(--surface);
  color: var(--ink);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.ship-item-row input[readonly],
.ship-item-row input:disabled {
  background: var(--line-light);
  color: var(--ink-soft);
  cursor: not-allowed;
}
.ship-item-row input[name=si_qty] {
  border-color: var(--color-primary);
  font-weight: 600;
  color: var(--color-primary);
}
.ship-item-row input[name=si_qty]:focus {
  box-shadow: 0 0 0 3px var(--color-primary-light);
}
/* 表单底部操作按钮 */
.ship-form-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
}
.ship-form-actions .btn-primary {
  padding: 10px 26px;
  font-size: 14px;
}
.ship-form-actions .hint {
  font-size: 12px;
  color: var(--ink-muted);
}
/* 新增批次草稿卡片（方案A：新增与保存分离） */
.ship-edit-card {
  border: 2px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  padding: 14px 16px 18px;
  margin-bottom: 16px;
  background: var(--surface);
}
.ship-edit-card .se-head b { color: var(--ink); }

/* 发货批次表单：第1节点/公共数据 4 列保持同一行（不换行） */
.ship-edit-card .ship-grid { grid-template-columns: repeat(4, 1fr); }
.ship-edit-card .ship-grid input[type=text],
.ship-edit-card .ship-grid input[type=number] { min-width: 0; }

/* ===== 通用卡片组件补充（2026-08-22 新增：KPI/筛选栏/页头/空状态）===== */
/* 页面标题栏 */
.page-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}
.page-head h2 { margin: 0; font-size: 20px; font-weight: 700; color: var(--ink); }
.page-head .sub { font-size: 13px; color: var(--ink-muted); font-weight: normal; margin-left: 6px; }

/* KPI 统计卡 */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.kpi {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  box-shadow: var(--shadow-hover);
  transition: box-shadow .15s, transform .1s;
}
.kpi:hover { box-shadow: var(--shadow-popup); }
.kpi .kpi-num { font-size: 30px; font-weight: 800; line-height: 1.1; color: var(--ink); }
.kpi .kpi-lbl { font-size: 13px; color: var(--ink-muted); margin-top: 4px; display: flex; align-items: center; gap: 5px; }
.kpi-primary .kpi-num { color: var(--color-primary); }
.kpi-success .kpi-num { color: var(--success); }
.kpi-warn .kpi-num    { color: var(--danger); }
.kpi-info .kpi-num    { color: var(--info); }

/* 阶段/状态 Tab 组 */
.tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.tab {
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  color: var(--ink-soft);
  transition: all .15s;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.tab:hover { border-color: var(--color-primary); color: var(--color-primary); }
.tab.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); font-weight: 600; }
.tab .n { opacity: .75; font-weight: 600; font-size: 12px; }

/* 筛选工具栏 */
.toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 18px;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 10px 12px;
}
.toolbar input[type=text],
.toolbar input[type=search],
.toolbar select {
  padding: 8px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: var(--font-sans);
  background: var(--surface);
  color: var(--ink);
  outline: none;
  transition: border-color .2s;
}
.toolbar input[type=text]:focus,
.toolbar input[type=search]:focus,
.toolbar select:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); }
.toolbar input[type=text],
.toolbar input[type=search] { width: 240px; }
.toolbar a.clear { font-size: 13px; color: var(--ink-muted); text-decoration: none; }
.toolbar a.clear:hover { color: var(--color-primary); text-decoration: underline; }

/* 行内小操作按钮（文字/轻量） */
.btn-xs-text {
  display: inline-block;
  background: none;
  border: 1px solid transparent;
  color: var(--color-primary);
  /* 热区放大：原 3px 8px 导致列表操作按钮难以点中（2026-09-14 用户反馈） */
  padding: 6px 11px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  line-height: 1.25;
  cursor: pointer;
  font-family: var(--font-sans);
  text-decoration: none;
  transition: background .15s, border-color .15s;
}
.btn-xs-text:hover { background: var(--color-primary-light); }
.btn-xs-text.danger { color: var(--danger); border-color: rgba(0,0,0,0); }
.btn-xs-text.danger:hover { background: var(--danger-light); }
.btn-xs-text:active { transform: translateY(1px); }

/* 行内状态 select（迷你） */
.inline-select {
  padding: 4px 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-family: var(--font-sans);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  outline: none;
}
.inline-select:focus { border-color: var(--color-primary); }

/* 空状态 */
.empty {
  padding: 70px 0;
  text-align: center;
  color: var(--ink-muted);
}
.empty .big { font-size: 44px; margin-bottom: 12px; opacity: .5; }
.empty p { font-size: 14px; }
.empty .action { margin-top: 14px; }


/* 表格行内辅助文字 */
.cell-sub { font-size: 12px; color: var(--ink-muted); margin-top: 2px; }
.cell-sub a { color: var(--color-primary); text-decoration: none; }
.cell-sub a:hover { text-decoration: underline; }