/* ============================================================
   parts 模板设计语言 · 主题覆盖层（v1）
   ------------------------------------------------------------
   基准来源：parts-delivery 生产 CSS（dist/client/assets/index-*.css）
   本文件只做「换肤 + 组件对齐」，不引入任何新依赖，不改后端接口。

   覆盖策略：
     1. 复用 B2B 既有变量名（--primary/--bg/--card/--border/--radius…）
        直接重新赋值 → 既有 style.css / admin.css 全站零改动自动换肤。
     2. parts 专有量（elevate / sidebar / radius-md|lg|xl / 阴影梯度）以新名补充。
     3. 需要改结构而非颜色的组件（表格 / 按钮 / 输入框 / 侧栏）在本文件末尾覆盖。

   色板出处（生产编译值，已核对）：
     --primary        #2463eb   (hsl 221 83% 53%)
     --primary-border #1450d2   (hsl 221 83% 45%)
     --secondary      #f3f4f6   (hsl 220 14% 96%)
     --muted-fg       #8f949e   (hsl 218 7% 59%)
     --border         #dfe2e7   (hsl 220 14% 89%)
     --destructive    #ef524d   (hsl 2 84% 62%)
     --success        #31a545   (hsl 130 54% 42%)
     --warning        #ed6e0c   (hsl 26 90% 49%)
     --foreground     #1f2229   (hsl 220 14% 14%)
     --sidebar-accent #e0eaff   (hsl 222 100% 94%)
     灰阶（tailwind v4 编译值）：
     50 #f9fafb 100 #f3f4f6 200 #e5e7eb 300 #d1d5dc 400 #99a1af
     500 #6a7282 600 #4a5565 700 #364153 800 #1e2939 900 #0f172b
     parts 生产自定义蓝阶（覆盖 tailwind 默认）：
     50 #f0f4ff 100 #e0e9ff 200 #c2d4ff 300 #94b4ff 400 #7aa2ff
     500 #5083fb 600 #336df4 700 #1456f0 800 #0442d2 900 #002f9e
   ============================================================ */

:root {
  /* ---- parts 专有量（style.css / admin.css 未覆盖的部分）----
     基础色板（--primary/--bg/--card/--text/--border…）统一在 style.css
     的 :root 维护，后台专用 --ad-* 在 admin.css 的 :root 维护，
     本文件只补 parts 专属扩展量，避免同一变量多处定义。 */
  --primary-border: #1450d2;

  /* ---- 圆角（parts: md 6 / lg 8 / xl 12） ---- */
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-pill: 999px;

  /* ---- 阴影梯度（parts 极轻：rgba(0,0,0,.02) 2px 12px） ---- */
  --shadow-sm: 0px 2px 12px 0px rgba(0, 0, 0, .01);
  --shadow-xs: 0px 1px 2px -1px rgba(0, 0, 0, .02);
  --shadow-md: 0px 2px 12px 0px rgba(0, 0, 0, .02), 0px 1px 2px -1px rgba(0, 0, 0, .02);

  /* ---- parts elevate 叠加层（hover/active 用，不换底色） ---- */
  --elevate-1: rgba(0, 0, 0, .03);
  --elevate-2: rgba(0, 0, 0, .08);

  /* ---- parts 侧栏（深靛蓝，240px） ---- */
  --sidebar: #1a1f2e;
  --sidebar-fg: #d1d5dc;
  --sidebar-fg-muted: #6b7280;
  --sidebar-active: #336df4;
  --sidebar-hover: rgba(255, 255, 255, .10);
  --sidebar-border: rgba(255, 255, 255, .10);

  /* ---- 焦点环 ---- */
  --ring: #2463eb;
  --ring-soft: rgba(36, 99, 235, .18);

  /* ---- 间距节奏（parts: 页面 24 / 卡片间距 16） ---- */
  --page-pad: 24px;
  --gap: 16px;

  /* ---- 等宽字（parts mono） ---- */
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

/* ============================================================
   一、通用元件对齐 parts
   ============================================================ */

/* 焦点可见性：键盘导航统一显示 parts 焦点环 */
:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: var(--radius-md);
}

/* 按钮：36px / r6 / hover 用 elevate 叠加而非换底色 */
.btn {
  height: 36px;
  padding: 0 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
  position: relative;
  z-index: 0;
}
.btn:hover {
  border-color: #c9ced6;
  background: var(--card);
  color: var(--text);
}
/* 叠加层实现 hover 变暗（对齐 parts hover-elevate / active-elevate-2） */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--elevate-1);
  opacity: 0;
  transition: opacity .15s;
  pointer-events: none;
  z-index: 999;
}
.btn:hover::after { opacity: 1; }
.btn:active::after { opacity: 1; background: var(--elevate-2); }

.btn.primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #f9fafb;
  font-weight: 500;
  box-shadow: var(--shadow-xs);
}
.btn.primary:hover { background: var(--primary); border-color: var(--primary); color: #f9fafb; }
.btn.primary:active { background: var(--primary-dark); border-color: var(--primary-dark); }

.btn.accent { background: var(--primary); border-color: var(--primary); color: #f9fafb; }
.btn.accent:hover { filter: none; background: var(--primary); }

.btn.danger {
  background: var(--card);
  border-color: #f4c7c5;
  color: var(--danger);
}
.btn.danger:hover { background: var(--danger-soft); border-color: #f0aeab; }

.btn.ghost { border-color: transparent; background: transparent; color: var(--muted); }
.btn.ghost:hover { background: var(--bg-2); }

.btn.sm {
  height: 30px;
  padding: 0 10px;
  font-size: 13px;
  border-radius: var(--radius-md);
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn:disabled::after { opacity: 0; }

/* 输入框：36px / r6 / 焦点环 #2463eb/18% */
.input, .select, textarea.input {
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
  color: var(--text);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
textarea.input { height: auto; padding: 9px 12px; resize: vertical; min-height: 62px; }
.input:hover, .select:hover { border-color: #c9ced6; }
.input:focus, .select:focus, textarea.input:focus {
  border-color: var(--ring);
  box-shadow: 0 0 0 3px var(--ring-soft);
}
.input::placeholder, .select::placeholder { color: var(--muted); }
.input:disabled, .select:disabled { background: var(--bg-2); color: var(--muted); cursor: not-allowed; }

/* 卡片：白底 r8 / 1px 边框 / 极轻阴影 */
.card, .stat, .order, .mine-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  background: var(--card);
}

/* 表格：parts / antd 风格 —— 无斑马纹，表头浅底，cell padding 16px */
table.tbl { font-size: 13px; }
table.tbl th, table.tbl td { padding: 12px 16px; border-bottom: 1px solid var(--border-soft); }
table.tbl th {
  background: rgba(0, 0, 0, .02);
  color: var(--text-2);
  font-weight: 600;
  font-size: 12px;
  border-bottom: 1px solid var(--border);
}
table.tbl tbody tr:hover td { background: rgba(0, 0, 0, .02); }
table.tbl tbody tr.sel td { background: var(--primary-softer); }
table.tbl tbody tr:nth-child(even) td { background: transparent; }
table.tbl tbody tr:nth-child(even):hover td { background: rgba(0, 0, 0, .02); }

/* 后台表格：需与 admin.css 的斑马纹/吸右列同权重覆盖（admin.css 选择器更长） */
body.admin-mode table.tbl tbody tr:nth-child(even) td { background: transparent; }
body.admin-mode table.tbl tbody tr:nth-child(even):hover td { background: rgba(0, 0, 0, .02); }
body.admin-mode table.tbl tbody tr:hover td { background: rgba(0, 0, 0, .02); }
body.admin-mode table.tbl tbody tr.sel td { background: var(--primary-softer); }
body.admin-mode table.tbl tbody tr.sel:hover td { background: var(--primary-softer); }
/* 吸右操作列：底色必须跟随所在行，否则斑马纹去掉后会露出白底断层 */
body.admin-mode .products-tbl th:last-child,
body.admin-mode .products-tbl td:last-child { background: var(--card); }
body.admin-mode .products-tbl thead th:last-child { background: rgba(0, 0, 0, .02); }
body.admin-mode .products-tbl tbody tr:nth-child(even) td:last-child { background: var(--card); }
body.admin-mode .products-tbl tbody tr:hover td:last-child { background: rgba(0, 0, 0, .02); }
body.admin-mode .products-tbl tbody tr.sel td:last-child { background: var(--primary-softer); }

/* 徽标 / 标签：parts Badge —— r6 / 小字号 / 语义底色 */
.tag {
  padding: 2px 8px;
  border-radius: var(--radius-md);
  font-size: 11px;
  font-weight: 500;
  background: var(--bg-2);
  color: var(--text-2);
  border: 1px solid transparent;
}
.tag.mp-tag { background: var(--primary-soft); color: var(--primary-dark); }
.tag.sku { font-family: var(--font-mono); background: var(--bg-2); color: var(--muted); }

/* 状态徽标：映射到 parts 语义三色 + 中性 */
.stt { padding: 2px 10px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; white-space: nowrap; }
.stt.unpaid { background: var(--warn-soft); color: var(--warn); }
.stt.review { background: var(--info-soft); color: var(--primary-dark); }
.stt.pending { background: var(--warn-soft); color: var(--warn); }
.stt.confirmed { background: var(--info-soft); color: var(--primary-dark); }
.stt.shipped { background: var(--info-soft); color: var(--primary-dark); }
.stt.completed { background: var(--success-soft); color: var(--success); }
.stt.cancelled { background: var(--bg-2); color: var(--muted); }
.stt.refunded { background: var(--danger-soft); color: var(--danger); }

/* 胶囊筛选 */
.chip {
  min-height: 32px;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 500;
  transition: background-color .15s, border-color .15s, color .15s;
}
.chip:hover { border-color: var(--primary); color: var(--primary-dark); background: var(--card); }
.chip.on {
  background: var(--primary);
  border-color: var(--primary);
  color: #f9fafb;
  font-weight: 500;
}
.chip.on .badge { background: #fff; color: var(--primary); }

/* 弹窗：parts Dialog —— r8 卡片 + 极轻阴影 */
.modal {
  border-radius: var(--radius-lg);
  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, .10), 0px 12px 40px 0px rgba(0, 0, 0, .08);
  border: 1px solid var(--border);
}
.mask { background: rgba(15, 23, 42, .45); }
.modal-h h3 { font-weight: 600; color: var(--text); }
.modal-h .x { color: var(--muted); border-radius: var(--radius-md); }
.modal-h .x:hover { background: var(--bg-2); color: var(--text); }

/* toast：parts sonner 观感 —— 小圆角 + 语义底 */
.toast {
  border-radius: var(--radius-md);
  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, .12);
  font-size: 13px;
  font-weight: 500;
  max-width: min(80vw, 420px);
}
.toast.err { background: var(--danger); }
.toast.ok { background: var(--success); }
.toast.warn { background: var(--warn); }
.toast.info { background: var(--info); }

/* 通用间距工具补齐 */
.mt16 { margin-top: 16px; }
.mt24 { margin-top: 24px; }
.gap8 { gap: 8px; }
.gap12 { gap: 12px; }
.gap16 { gap: 16px; }

/* ============================================================
   二、状态三态（parts Skeleton / Empty / Alert）
   ============================================================ */

/* 加载：spinner + 文案居中 */
.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 48px 16px;
  color: var(--muted);
  font-size: 13px;
}
.loading::before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--border);
  border-top-color: var(--primary);
  animation: ptSpin .7s linear infinite;
}
@keyframes ptSpin { to { transform: rotate(360deg); } }

/* 骨架屏：parts Skeleton —— accent 底 + 呼吸 */
.skeleton {
  background: var(--bg-2);
  border-radius: var(--radius-md);
  animation: ptPulse 1.6s ease-in-out infinite;
}
@keyframes ptPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}
.sk-line { height: 12px; margin-bottom: 8px; }
.sk-line.w60 { width: 60%; }
.sk-line.w40 { width: 40%; }
.sk-line.w80 { width: 80%; }
.sk-block { height: 64px; border-radius: var(--radius-lg); }

/* 骨架容器：列表占位行（左头像块 + 右文本块） */
.skeleton-wrap { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }
.skeleton-wrap.sk-wrap { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.sk-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--card);
}
.sk-cols { flex: 1; min-width: 0; }
.sk-cols .sk-line:last-child { margin-bottom: 0; }

/* 空态：parts Empty —— 虚线框 + 图标块 */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 48px 16px;
  color: var(--muted);
  text-align: center;
}
.empty .em {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-lg);
  background: var(--bg-2);
  font-size: 20px;
  opacity: 1;
  margin-bottom: 0;
}

/* 错误态：parts Alert —— 淡红底 + 红左边条 */
.error-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border-radius: var(--radius-lg);
  border: 1px solid #f4c7c5;
  border-left: 3px solid var(--danger);
  background: var(--danger-soft);
  color: #9f2d23;
  font-size: 13px;
  line-height: 1.6;
}
.error-box .eb-ico { flex: 0 0 auto; font-size: 16px; line-height: 1.3; }
.error-box .eb-txt { flex: 1; min-width: 0; }
.error-box .eb-txt b { display: block; color: #8a1f16; font-weight: 700; margin-bottom: 2px; }

/* 字段级校验（提到前台共用，parts Alert-destructive 观感） */
.field.invalid > label { color: var(--danger); }
.field.invalid .input,
.field.invalid .select,
.field.invalid textarea.input {
  border-color: var(--danger) !important;
  background: var(--danger-soft);
}
.field-err {
  color: var(--danger);
  font-size: 12px;
  margin-top: 4px;
  line-height: 1.4;
}
.spec-line.invalid .input { border-color: var(--danger); background: var(--danger-soft); }

/* ============================================================
   三、后台：parts 深侧栏形态（240px / #1a1f2e / 激活 #336df4）
   ============================================================ */
body.admin-mode { background: var(--bg); }

/* 侧栏宽度走 --ad-side-w（admin.css 抽屉模式在 ≤1024px 会把 margin-left 归零，
   此处不可硬编码 margin-left，否则抽屉态被覆盖回 240px） */
.ad-side {
  width: var(--ad-side-w);
  background: var(--sidebar);
  border-right: 1px solid var(--sidebar-border);
  color: var(--sidebar-fg);
}

.ad-brand { border-bottom: 1px solid var(--sidebar-border); padding: 14px 16px 12px; }
.ad-bm {
  background: var(--sidebar-active);
  border-radius: var(--radius-md);
  box-shadow: none;
}
.ad-bt { color: #f9fafb; }
.ad-bs { color: var(--sidebar-fg-muted); }

.ad-glabel { color: var(--sidebar-fg-muted); }
.ad-glabel i { background: var(--sidebar-border); }

.ad-item {
  color: var(--sidebar-fg);
  border-radius: var(--radius-md);
  margin: 1px 8px;
  transition: background-color .15s, color .15s;
}
.ad-item:hover { background: var(--sidebar-hover); color: #f9fafb; }
.ad-item.on {
  background: var(--sidebar-active);
  color: #fff;
  font-weight: 500;
  box-shadow: none;
}
.ad-item.on .nav-pending-badge { background: rgba(255, 255, 255, .95); color: var(--sidebar-active); }
.nav-pending-badge { background: var(--sidebar-active); border-radius: var(--radius-pill); }

.ad-side-f {
  border-top: 1px solid var(--sidebar-border);
  background: transparent;
}
.ad-un { color: #f9fafb; }
.ad-ur { color: var(--sidebar-fg-muted); }
.ad-ava { background: var(--sidebar-active); border-radius: 50%; }
.ad-logout {
  background: transparent;
  border-color: var(--sidebar-border);
  color: var(--sidebar-fg);
  border-radius: var(--radius-md);
}
.ad-logout:hover { background: var(--sidebar-hover); border-color: transparent; color: #f9fafb; }

/* 顶栏：parts header —— 白底 / h-14 / 底边 #dfe2e7 */
.ad-top {
  height: 56px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.ad-burger {
  background: var(--card);
  border-color: var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
}
.ad-burger:hover { border-color: var(--primary); color: var(--primary-dark); background: var(--card); }
.ad-top-brand { color: var(--text); }
.ad-top-brand .bm { background: var(--primary); border-radius: var(--radius-md); }
.ad-search {
  background: var(--card);
  border-color: var(--border);
  border-radius: var(--radius-md);
  color: var(--text-2);
}
.ad-search:hover { border-color: var(--primary); color: var(--primary-dark); background: var(--card); }
.ad-search kbd { background: var(--bg-2); border-color: var(--border); border-radius: 4px; color: var(--muted); }

/* 内容区：parts main —— p-6 / 卡片间距 16
   注意：不能写成 padding: var(--page-pad)，那会抹掉 admin.css 里的
   底部安全区（env(safe-area-inset-bottom)），iPhone 刘海屏底部会贴边。 */
.admin-content {
  padding: var(--page-pad) var(--page-pad) calc(var(--page-pad) + 16px + env(safe-area-inset-bottom));
  max-width: 1760px;
}
.admin-content .card,
.admin-content .stat {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.admin-content .grid { gap: var(--gap); }
.admin-content .page-title { margin: 4px 0 var(--gap); }
.admin-content .page-title h2 { font-weight: 700; color: var(--text); }
.admin-content .page-title h2::before { background: var(--primary); border-radius: 2px; }
.admin-content .page-title span { color: var(--muted); }
.admin-content .card-h h3 { color: var(--text); font-weight: 600; }
.admin-content .stat .k { color: var(--text-2); }
.admin-content .stat .v { font-weight: 700; }
.admin-content .stat .s { color: var(--muted); }
.admin-content .stat:hover { box-shadow: var(--shadow-md); }

/* 后台共享元件换色：统一到 parts 蓝 */
body.admin-mode .btn.primary { background: var(--primary); border-color: var(--primary); color: #f9fafb; }
body.admin-mode .btn.primary:hover { background: var(--primary); border-color: var(--primary); }
body.admin-mode .btn.primary:active { background: var(--primary-dark); border-color: var(--primary-dark); }
body.admin-mode .btn.accent { background: var(--primary); border-color: var(--primary); color: #f9fafb; }
body.admin-mode .btn.accent:hover { background: var(--primary); border-color: var(--primary); }
body.admin-mode .input:focus,
body.admin-mode .select:focus,
body.admin-mode textarea.input:focus {
  border-color: var(--ring);
  box-shadow: 0 0 0 3px var(--ring-soft);
}
body.admin-mode .switch input { accent-color: var(--primary); }
body.admin-mode .chip.on { background: var(--primary); border-color: var(--primary); box-shadow: none; }
body.admin-mode .chip:hover { background: var(--card); border-color: var(--primary); color: var(--primary-dark); }
body.admin-mode .stat.hl .v { color: var(--primary-dark); }
body.admin-mode .sec-title::before { background: var(--primary); }
body.admin-mode .tag.mp-tag { background: var(--primary-soft); color: var(--primary-dark); }
body.admin-mode .model-ac-tick { color: var(--primary); }
body.admin-mode .model-ac-item:hover { background: var(--primary-softer); }
body.admin-mode .suggest li:hover,
body.admin-mode .suggest li.on { background: var(--primary-softer); color: var(--primary-dark); }
body.admin-mode .modal { border-radius: var(--radius-lg); }

/* 图表 / 金额强调统一主色 */
body.admin-mode .bar-col .bar { background: linear-gradient(180deg, #5083fb, var(--primary)); }
body.admin-mode .profit-col .pa { background: linear-gradient(180deg, #5083fb, var(--primary)); }
body.admin-mode .rank .i.top { background: var(--primary); }
body.admin-mode .rank .i { background: var(--primary-soft); color: var(--primary-dark); }
body.admin-mode .feed-item .fi-a,
body.admin-mode .drawer-d-item .m,
body.admin-mode .oi .m,
body.admin-mode .order-f .amt b,
body.admin-mode .hot-p { color: var(--primary-dark); }
body.admin-mode .auto-flow { color: var(--primary-dark); background: var(--primary-soft); }
body.admin-mode .auto-flow.done { color: var(--success); background: var(--success-soft); }

/* 订单卡片左色条：改用语义三色 */
body.admin-mode .order.unpaid { border-left: 3px solid var(--warn); }
body.admin-mode .order.review { border-left: 3px solid var(--primary); }
body.admin-mode .order.pending { border-left: 3px solid var(--warn); }
body.admin-mode .order.confirmed { border-left: 3px solid var(--primary); }
body.admin-mode .order.shipped { border-left: 3px solid var(--primary); }
body.admin-mode .order.completed { border-left: 3px solid var(--success); }
body.admin-mode .order.refunded { border-left: 3px solid var(--muted); }
body.admin-mode .order.cancelled { border-left: 3px solid var(--muted); }
body.admin-mode .order:hover { border-color: var(--primary); box-shadow: var(--shadow-md); }
body.admin-mode .order-h { background: var(--bg-2); }
body.admin-mode .order-f { background: var(--bg-2); }
body.admin-mode .order.sel { box-shadow: 0 0 0 2px var(--primary), var(--shadow); }

/* 批量操作条：parts 深色浮层 */
.batch-bar {
  background: #1f2329;
  border-radius: var(--radius-lg);
  box-shadow: 0px 12px 32px 0px rgba(0, 0, 0, .16);
}
.batch-bar .btn.primary { background: var(--primary); border-color: var(--primary); }
.batch-bar .btn.primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); }

/* 抽屉 */
.drawer { box-shadow: -8px 0 32px 0px rgba(0, 0, 0, .12); }
.drawer-d-item { border-radius: var(--radius-md); }
.drawer-sec .t { color: var(--muted); font-weight: 600; }

/* 全局搜索弹窗 */
.gs-input-row { border: 1px solid var(--primary); border-radius: var(--radius-md); box-shadow: 0 0 0 3px var(--ring-soft); }
.gs-item:hover, .gs-item.on { background: var(--primary-softer); }
.gs-item .gi { color: var(--primary); }
.gs-item .gx { color: var(--primary); }

/* 补货助手 / 分类管理 KPI 块 */
.rk-kpi .k { background: var(--primary-softer); border-radius: var(--radius-lg); }
.rk-kpi .k .kv { color: var(--primary-dark); font-weight: 700; }
.rk-cat-btn.on { background: var(--primary); border-color: var(--primary); box-shadow: none; }
.rk-cat-btn:hover { background: var(--card); border-color: var(--primary); color: var(--primary-dark); }
.rk-dim { background: var(--bg-2); }
.rk-dim-btn.on { background: var(--card); color: var(--primary-dark); box-shadow: var(--shadow-xs); }
.rk-sup { border-radius: var(--radius-lg); }
.rk-sup-h { background: var(--primary-softer); }
.rk-tag.hot { background: var(--danger-soft); color: var(--danger); }
.rk-tag.warm { background: var(--warn-soft); color: var(--warn); }
.rk-tag.cold { background: var(--bg-2); color: var(--text-2); }
.rk-tag.low { background: var(--warn-soft); color: var(--warn); }
body.admin-mode .cat-group > .cat-row { background: var(--primary-softer); }
body.admin-mode .cat-tag.lvl1 { background: var(--primary-soft); color: var(--primary-dark); }
body.admin-mode .cat-tag.lvl2 { background: var(--success-soft); color: var(--success); }
.rk-legend { color: var(--muted); }

/* 经营概览：条形图 / 健康度 / 排行 */
.obar .otrack { background: var(--border); }
.obar .otrack i { background: var(--primary); }
.ov-health .hc-ok { background: var(--success-soft); color: var(--success); }
.ov-health .hc-low { background: var(--warn-soft); color: var(--warn); }
.ov-health .hc-out { background: var(--danger-soft); color: var(--danger); }
.rank .stk { background: var(--bg-2); color: var(--text-2); }
.rank .stk.low { background: var(--warn-soft); color: var(--warn); }
.rank .stk.out { background: var(--danger-soft); color: var(--danger); }
.bar-col .bar.b-pf { background: linear-gradient(180deg, #35bd4b, var(--success)); }
.ov-legend .lg-pf::before { background: linear-gradient(180deg, #35bd4b, var(--success)); }
.contrib-row .rk { background: var(--primary-soft); color: var(--primary-dark); }
.contrib-bar { background: var(--border); }
.contrib-bar i { background: var(--primary); }
.dfield { background: var(--primary-softer); color: var(--primary-dark); }
.dfield.warn { background: var(--warn-soft); color: var(--warn); }

/* 环比小芯片（涨绿跌红，业务看板惯例，遵循中国股市约定） */
.chip.up { background: var(--success-soft); color: var(--success); border-color: #bbf7d0; }
.chip.down { background: var(--danger-soft); color: var(--danger); border-color: #fecaca; }
.chip.flat { background: var(--bg-2); color: var(--muted); border-color: var(--border); }

/* 实时订单流：窄屏折成两行
   原布局是「订单号 + 客户名 + 金额 + 时间」单行 nowrap，390px 下 .fi-c 被压到 11px，
   整条 flex 容器横向溢出 30px（实测 feed-item 324<354）。改为窄屏两行栅格。 */
@media (max-width: 640px) {
  .feed-item { flex-wrap: wrap; row-gap: 3px; }
  .feed-item .fi-no { flex: 0 0 auto; order: 0; }
  .feed-item .fi-a { flex: 0 0 auto; order: 1; margin-left: auto; }
  .feed-item .fi-t { flex: 0 0 auto; order: 2; }
  .feed-item .fi-c { flex: 1 1 100%; order: 3; min-width: 0; }
}

/* ============================================================
   四、前台（顾客端）：保留移动端顶栏 + 底栏形态，视觉换成 parts 语言
   ============================================================ */
body { background: var(--bg); color: var(--text); }

.topbar {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  height: 56px;
}
.brand-mark {
  background: var(--primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}
.nav a { border-radius: var(--radius-md); }
.nav a:hover { background: var(--primary-softer); color: var(--primary-dark); }
.nav a.active { background: var(--primary-soft); color: var(--primary-dark); font-weight: 500; }
.badge { background: var(--danger); border-radius: var(--radius-pill); }
.pill.used { background: var(--danger-soft); color: var(--danger); border-color: #f4c7c5; }
.pill.unused { background: var(--success-soft); color: var(--success); border-color: #bbf7d0; }
.lv { background: var(--primary-soft); color: var(--primary-dark); border-radius: 4px; }
.lv.vip { background: var(--warn-soft); color: var(--warn); }
.lv.big { background: var(--info-soft); color: var(--primary-dark); }
.user-chip b { color: var(--text); }

.app { max-width: 1180px; padding: 16px 16px 24px; }

/* 首页搜索框：parts 输入形态 */
.mp-search {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  height: 48px;
  background: var(--card);
  box-shadow: var(--shadow);
}
.mp-search:focus-within { border-color: var(--ring); box-shadow: 0 0 0 3px var(--ring-soft); }
.mp-search-ico { color: var(--primary); }
.mp-search-input::placeholder { color: var(--muted); }
.mp-search-clear { background: var(--bg-2); color: var(--text-2); }
.mp-search-clear:hover { background: #e4e6e9; }

/* 轮播点 / 分类导航 */
.mp-banner-dot.on { background: var(--primary); }
.rail-i { border-radius: var(--radius-md); }
.rail-i:hover { background: var(--bg-2); }
.rail-i.on { background: var(--primary); box-shadow: none; }
.rail-badge { border-radius: var(--radius-md); box-shadow: none; }
.mp-brands .br { border-radius: var(--radius-pill); }
.mp-brands .br.on { background: var(--primary); border-color: var(--primary); }
.mp-sorts .srt { border-radius: var(--radius-md); }
.mp-sorts .srt.on { background: var(--primary); border-color: var(--primary); }

/* 商品卡 */
.pcard {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  padding: 12px 16px;
}
.pcard:hover { border-color: #c9ced6; box-shadow: var(--shadow-md); }
.pcard-price .p { color: var(--primary-dark); }
.hot-i, .rel-i { border-radius: var(--radius-lg); }
.hot-i:hover, .rel-i:hover { border-color: var(--primary); box-shadow: var(--shadow-md); }
.hot-p, .rel-p { color: var(--primary-dark); }
.mp-hot { background: var(--card); border-color: var(--border); border-radius: var(--radius-lg); }
.mp-hot-t { color: var(--primary-dark); }
.cat-rail { border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.rail-i.on .rail-badge { background: rgba(255, 255, 255, .24); }

/* 详情页 */
.pdp-hero {
  background: var(--primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.pdp-price { color: var(--primary-dark); }
.pdp-back, .pdp-topbar .back { color: var(--primary); }
.spec-chip { border-radius: var(--radius-md); }
.spec-chip.on { border-color: var(--primary); background: var(--primary-softer); }
.stepper { border-radius: var(--radius-md); }
.stepper button:hover { background: var(--primary-softer); color: var(--primary-dark); }
.stepper .step:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); }
.stepper .step:last-child { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.pdp-foot { box-shadow: 0 -1px 3px 0 rgba(0, 0, 0, .04); }

/* 购物车 / 结算 */
.ci-price { color: var(--primary-dark); }
.co-total b { color: var(--primary-dark); }
.cart-bbar .amt .c-price { color: var(--primary-dark); }
.pay-opt { border-radius: var(--radius-md); }
.pay-opt.on { border-color: var(--primary); background: var(--primary-softer); }
.auto-flow { background: var(--primary-soft); color: var(--primary-dark); border-radius: var(--radius-md); }

/* 我的页 */
.mine-profile { background: var(--primary); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.ostat .os .num { color: var(--primary-dark); }
.mine-card.menu .mi-v { color: var(--primary-dark); }
.mine-logout { border-radius: var(--radius-md); color: var(--danger); }
.mine-logout:hover { background: var(--danger-soft); border-color: #f4c7c5; }

/* 客服台条 */
.csbar { background: var(--primary); border-radius: var(--radius-lg); }

/* 站点公告 / 提示条 */
.site-notice {
  background: var(--primary-softer);
  border-color: #c2d4ff;
  color: var(--primary-dark);
  border-radius: var(--radius-md);
}
.gate-tip.on { background: var(--warn-soft); color: var(--warn); border-color: #fed7aa; }
.gate-tip.off { background: var(--success-soft); color: var(--success); border-color: #bbf7d0; }

/* 联想下拉 */
.model-ac-list { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.model-ac-item:hover { background: var(--primary-softer); }
.model-ac-tick { color: var(--primary); }
.suggest { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.suggest li:hover, .suggest li.on { background: var(--primary-softer); color: var(--primary-dark); }
.suggest li.sg .sg-c { background: var(--bg-2); }
.suggest li.sg.hist .sg-del:hover { color: var(--danger); }

/* 订单卡 */
.order-f .amt b { color: var(--primary-dark); }
.oi .m { color: var(--primary-dark); }
.order.refunded { border-color: #f4c7c5; }
.order.refunded .order-h { background: var(--danger-soft); }
.order.om-new { background: var(--warn-soft); }

/* 统计卡 / 条形图（前台概览） */
.stat.hl .v { color: var(--primary-dark); }
.stat.profit .v { color: var(--success); }
.stat.warn .v { color: var(--warn); }
.bar-col .bar { background: linear-gradient(180deg, #5083fb, var(--primary)); }
.rank .i.top { background: var(--primary); }
.rank .i { background: var(--bg-2); color: var(--text-2); }

/* 分类管理树 */
.cat-group { border-radius: var(--radius-lg); }
.cat-group > .cat-row { background: var(--primary-softer); }
.cat-tag.lvl1 { background: var(--primary-soft); color: var(--primary-dark); }
.cat-tag.lvl2 { background: var(--success-soft); color: var(--success); }

/* 机型库 */
.ml-chip { border-radius: var(--radius-pill); }
.ml-chip.on { background: var(--primary); border-color: var(--primary); }
.ml-chip.on b { color: rgba(255, 255, 255, .85); }
.ml-chip:hover { border-color: var(--primary); }

/* 批量入库（保留 .inbound 系列，勿删） */
.inbound .drop { background: var(--bg-2); border-radius: var(--radius-lg); }
.inbound .drop:hover, .inbound .drop.drag { border-color: var(--primary); background: var(--primary-softer); }
.inbound .thumb { border-radius: var(--radius-md); }
.inbound .name-rec { background: var(--primary-soft); color: var(--primary-dark); }
.inbound .name-rec:hover { background: var(--primary-softer); }
.inbound .name-cell.is-dup .ib-name { border-color: var(--warn); background: var(--warn-soft); }
.inbound tr.is-dup > td { background: var(--warn-soft); }
.inbound tr.is-badname > td { background: var(--danger-soft); }
.inbound .name-cell.is-badname .input { border-color: var(--danger); background: var(--danger-soft); }
.inbound .dup-warn { background: var(--warn-soft); border-color: #fed7aa; }
.inbound .dup-warn .dup-flag { color: var(--warn); }
.inbound .dup-warn .dup-flag.bad { color: var(--danger); }
.inbound tr.is-badname .dup-warn { background: var(--danger-soft); border-color: #f4c7c5; }

/* ============================================================
   五、响应式断点统一（640 / 768 / 1024 / 1280）
   ============================================================ */
@media (max-width: 1024px) {
  .admin-content {
    padding: 16px 16px calc(32px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 768px) {
  :root { --page-pad: 16px; }
  .app { padding: 12px 12px 20px; }
  .grid-2 { grid-template-columns: 1fr; }
  .dash-grid { grid-template-columns: minmax(0, 1fr); }
  .hs-merge { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}

@media (max-width: 640px) {
  .btn { height: 34px; padding: 0 12px; font-size: 13px; }
  .btn.sm { height: 28px; padding: 0 8px; font-size: 12px; }
  .input, .select, textarea.input { height: 34px; padding: 0 10px; font-size: 14px; }
  .card { padding: 12px; }
  .card + .card { margin-top: 10px; }
  table.tbl th, table.tbl td { padding: 10px 12px; }
  .admin-content .stat { padding: 12px 14px; }
  .admin-content .stat .v { font-size: 20px; }
}