/* ============================================================
   海南闪途·城配通 · 管理后台设计系统（v2 · 橙色 SaaS 宽屏）
   布局：左侧分组侧边栏 + 顶部工具条 + 宽屏内容区（≤900px 侧边栏转抽屉）
   主色与小程序 v3 / 品牌视觉统一为橙 #FF6A00；浅色、宽屏、响应式
   ============================================================ */

:root {
  /* 品牌橙 */
  --ad-primary: #FF6A00;
  --ad-primary-dark: #E85D00;
  --ad-primary-soft: #FFF1E5;
  --ad-primary-xsoft: #FFF8F2;
  --ad-ink: #1E293B;
  --ad-2: #64748B;
  --ad-muted: #94A3B8;
  --ad-line: #E8EDF3;
  --ad-bg: #F6F7FA;
  --ad-card: #FFFFFF;
  --ad-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .05);
  --ad-radius: 14px;
  --ad-side-w: 232px;
  --ad-top-h: 56px;
}

/* 进入后台时隐藏商城导航/顶栏/底栏，避免干扰 */
body.admin-mode .topbar { display: none; }
body.admin-mode .nav { display: none; }
body.admin-mode .tabbar { display: none; }
body.admin-mode { padding-bottom: 0; background: var(--ad-bg); }

/* ============================================================
   一、布局：侧边栏 + 主区（顶栏 + 内容）
   ============================================================ */
.ad-side {
  position: fixed; left: 0; top: 0; bottom: 0; z-index: 120;
  width: var(--ad-side-w); background: #fff;
  border-right: 1px solid var(--ad-line);
  display: flex; flex-direction: column;
}
.ad-side-scroll { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 8px; scrollbar-width: thin; }

.ad-main { margin-left: var(--ad-side-w); min-width: 0; min-height: 100vh; display: flex; flex-direction: column; overflow-x: clip; }

/* 顶部工具条 */
.ad-top {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; gap: 10px;
  height: var(--ad-top-h); padding: 0 20px; flex: 0 0 auto;
  background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ad-line);
}
.ad-top .sp { flex: 1; }
.ad-burger {
  display: none; width: 38px; height: 38px; flex: 0 0 auto;
  border: 1px solid var(--ad-line); border-radius: 10px; background: #fff;
  font-size: 16px; color: var(--ad-ink); cursor: pointer; line-height: 1;
}
.ad-burger:hover { border-color: var(--ad-primary); color: var(--ad-primary-dark); }
.ad-top-brand { display: none; align-items: center; gap: 8px; text-decoration: none; font-weight: 800; font-size: 15px; color: var(--ad-ink); white-space: nowrap; }
.ad-top-brand .bm { width: 28px; height: 28px; border-radius: 8px; flex: 0 0 auto;
  background: linear-gradient(135deg, #FF8A33, var(--ad-primary)); color: #fff;
  display: grid; place-items: center; font-size: 14px; font-weight: 800; }
.ad-search {
  display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px;
  border: 1px solid var(--ad-line); border-radius: 10px; background: #fff;
  color: var(--ad-2); font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap;
  transition: border-color .15s, color .15s, background .15s; font-family: inherit;
}
.ad-search:hover { border-color: var(--ad-primary); color: var(--ad-primary-dark); background: var(--ad-primary-xsoft); }
.ad-search kbd { font-family: inherit; font-size: 11px; background: #fafbfc; border: 1px solid var(--ad-line); border-radius: 5px; padding: 1px 6px; color: var(--ad-muted); }
.ad-quick { flex: 0 0 auto; }

/* 内容区 */
.admin-content { width: 100%; max-width: 1760px; margin: 0 auto; padding: 20px 24px calc(40px + env(safe-area-inset-bottom)); }
/* 后台整站脱离顾客端 .app(1180) 宽度限制：后台在宽屏下应占满视口（侧栏 232 + 主区自适应），否则大屏两侧大量留白 */
body.admin-mode #app { max-width: none; padding: 0; }

/* 抽屉遮罩（移动端） */
.ad-mask {
  position: fixed; inset: 0; z-index: 115; background: rgba(15, 23, 42, .42);
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
body.admin-nav-open .ad-mask { opacity: 1; pointer-events: auto; }

/* ============================================================
   二、侧边栏：品牌 / 分组导航 / 用户卡
   ============================================================ */
.ad-brand { display: flex; align-items: center; gap: 10px; padding: 14px 16px 12px; text-decoration: none; flex: 0 0 auto; }
.ad-bm {
  width: 36px; height: 36px; border-radius: 10px; flex: 0 0 auto;
  background: linear-gradient(135deg, #FF8A33, var(--ad-primary)); color: #fff;
  display: grid; place-items: center; font-size: 18px; font-weight: 800;
  box-shadow: 0 6px 14px rgba(255, 106, 0, .28);
}
.ad-bt { font-size: 15px; font-weight: 800; color: var(--ad-ink); line-height: 1.25; }
.ad-bs { font-size: 11px; color: var(--ad-muted); margin-top: 1px; }

.ad-glabel {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; color: var(--ad-muted);
  letter-spacing: .12em; padding: 14px 18px 6px; white-space: nowrap;
}
.ad-glabel i { flex: 1; height: 1px; background: var(--ad-line); }

.ad-item {
  display: flex; align-items: center; gap: 10px;
  margin: 1px 10px; padding: 8px 10px; border-radius: 10px;
  color: var(--ad-2); font-size: 14px; font-weight: 500;
  text-decoration: none; white-space: nowrap;
  transition: background .15s, color .15s, box-shadow .15s;
}
.ad-item:hover { background: var(--ad-primary-xsoft); color: var(--ad-primary-dark); }
.ad-item.on { background: var(--ad-primary); color: #fff; font-weight: 600; box-shadow: 0 4px 12px rgba(255, 106, 0, .25); }
.ad-ic { width: 22px; flex: 0 0 auto; text-align: center; font-size: 15px; font-style: normal; }
.ad-item .lb { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* 待处理角标（refreshPendingBadge 统一维护：显示时清掉内联 display:none 即可） */
.nav-pending-badge {
  display: inline-block; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--ad-primary); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 18px; text-align: center; flex: 0 0 auto;
}
.ad-item.on .nav-pending-badge { background: rgba(255, 255, 255, .95); color: var(--ad-primary-dark); }

/* 侧边栏底部用户卡 */
.ad-side-f { flex: 0 0 auto; border-top: 1px solid var(--ad-line); padding: 10px; background: #fff; }
.ad-user { display: flex; align-items: center; gap: 10px; padding: 2px 4px; }
.ad-ava {
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto;
  background: linear-gradient(135deg, #FF8A33, var(--ad-primary)); color: #fff;
  display: grid; place-items: center; font-size: 14px; font-weight: 700;
}
.ad-un { font-size: 13px; font-weight: 600; color: var(--ad-ink); line-height: 1.25; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-ur { font-size: 11px; color: var(--ad-muted); }
.ad-logout {
  margin-left: auto; flex: 0 0 auto; padding: 6px 10px;
  border: 1px solid var(--ad-line); border-radius: 8px; background: #fff;
  color: var(--ad-2); font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.ad-logout:hover { background: #fff5f5; border-color: #fecaca; color: #dc2626; }

/* ============================================================
   三、页面骨架：标题 / 卡片 / 统计卡
   ============================================================ */
.admin-content .page-title { align-items: center; margin: 4px 0 16px; flex-wrap: wrap; row-gap: 10px; }
.admin-content .page-title h2 {
  font-size: 20px; font-weight: 800; color: var(--ad-ink); flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 10px;
}
.admin-content .page-title h2::before {
  content: ''; width: 5px; height: 20px; border-radius: 3px; flex: 0 0 auto;
  background: linear-gradient(180deg, #FF8A33, var(--ad-primary));
}
.admin-content .page-title span { font-size: 12px; color: var(--ad-muted); }

/* 仪表盘热销榜分页控件 */
.hot-pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 10px; font-size: 12px; color: var(--ad-muted); }
.hot-pager .hot-page { white-space: nowrap; font-variant-numeric: tabular-nums; }
.hot-pager .btn[disabled] { opacity: .45; cursor: not-allowed; }
/* 标题行右侧动作组：空间不足时整组换行，绝不挤压标题 */
.admin-content .page-title > span:last-child { flex: 0 0 auto; }

.admin-content .card {
  border-radius: var(--ad-radius); border: 1px solid var(--ad-line);
  box-shadow: var(--ad-shadow); padding: 16px; background: var(--ad-card);
}
.admin-content .card-h { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.admin-content .card-h h3 { font-size: 15px; font-weight: 700; color: var(--ad-ink); display: inline-flex; align-items: center; gap: 8px; }
.admin-content .card-h .spacer { margin-left: auto; }

.admin-content .grid { gap: 14px; }
.admin-content .stat {
  border-radius: var(--ad-radius); border: 1px solid var(--ad-line);
  box-shadow: var(--ad-shadow); padding: 14px 16px; background: var(--ad-card);
  transition: box-shadow .15s, transform .15s;
}
.admin-content .stat:hover { box-shadow: 0 2px 4px rgba(15, 23, 42, .05), 0 12px 28px rgba(15, 23, 42, .08); }
.admin-content .stat .k { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ad-2); margin-bottom: 8px; font-weight: 500; }
.admin-content .stat .v { font-size: 24px; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; }
.admin-content .stat .s { font-size: 12px; color: var(--ad-muted); margin-top: 5px; }
/* KPI 图标块 */
.stat .ki {
  width: 32px; height: 32px; border-radius: 9px; flex: 0 0 auto;
  background: var(--ad-primary-soft); display: inline-grid; place-items: center; font-size: 16px;
}

/* ============================================================
   四、后台内共享组件换色（style.css 的红/蓝 → 品牌橙）
   ============================================================ */
body.admin-mode .btn.primary { background: var(--ad-primary); border-color: var(--ad-primary); color: #fff; }
body.admin-mode .btn.primary:hover { background: var(--ad-primary-dark); border-color: var(--ad-primary-dark); }
body.admin-mode .btn.accent { background: var(--ad-primary); border-color: var(--ad-primary); color: #fff; }
body.admin-mode .btn.accent:hover { background: var(--ad-primary-dark); border-color: var(--ad-primary-dark); }
body.admin-mode .btn.danger:hover { background: var(--danger-soft); }

body.admin-mode .input:focus, body.admin-mode .select:focus, body.admin-mode textarea.input:focus {
  border-color: var(--ad-primary); box-shadow: 0 0 0 3px rgba(255, 106, 0, .14);
}
body.admin-mode .switch input { accent-color: var(--ad-primary); }

/* 筛选胶囊（订单页等） */
body.admin-mode .chip {
  display: inline-flex; align-items: center; min-height: 32px; padding: 5px 14px;
  border: 1px solid var(--ad-line); border-radius: 999px; background: #fff;
  color: var(--ad-2); font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
body.admin-mode .chip:hover { border-color: var(--ad-primary); color: var(--ad-primary-dark); }
body.admin-mode .chip.on { background: var(--ad-primary); border-color: var(--ad-primary); color: #fff; font-weight: 600; box-shadow: 0 3px 10px rgba(255, 106, 0, .22); }
body.admin-mode .chip.on .badge { background: #fff; color: var(--ad-primary-dark); }

/* 概览环比小芯片（增长绿 / 下降红，业务看板惯例） */
.chip.up { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
.chip.down { background: #fef2f2; color: #dc2626; border-color: #fecaca; }
.chip.flat { background: #f1f5f9; color: var(--ad-muted); border-color: var(--ad-line); }
.stat .chip { font-size: 10.5px; font-weight: 700; padding: 3px 8px; min-height: 0; line-height: 1.4; }

/* 统计卡数值色 */
body.admin-mode .stat.hl .v { color: var(--ad-primary-dark); }

/* 图表：柱/条/图例 统一橙 */
body.admin-mode .bar-col .bar { background: linear-gradient(180deg, #FFA25C, var(--ad-primary)); }
body.admin-mode .ov-legend .lg-amt::before { background: linear-gradient(180deg, #FFA25C, var(--ad-primary)); }
body.admin-mode .obar .otrack i { background: linear-gradient(90deg, #FFB173, var(--ad-primary)); }
body.admin-mode .obar.sale .otrack i { background: linear-gradient(90deg, #FFB173, var(--ad-primary)); }
body.admin-mode .rank .i.top { background: var(--ad-primary); }
body.admin-mode .rank .i { background: var(--ad-primary-soft); color: var(--ad-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(--ad-primary-dark); }

/* 订单状态徽标：色系统一（待支付橙 / 待确认琥珀 / 备货蓝 / 发货紫 / 完成绿 / 取消灰） */
body.admin-mode .stt.unpaid { background: var(--ad-primary-soft); color: var(--ad-primary-dark); }
body.admin-mode .stt.confirmed { background: #eff6ff; color: #2563eb; }
body.admin-mode .stt.shipped { background: #f5f3ff; color: #7c3aed; }
body.admin-mode .stt.review { background: #f5f3ff; color: #7c3aed; }
body.admin-mode .stt.pending { background: var(--warn-soft); color: var(--warn); }
body.admin-mode .stt.completed { background: var(--success-soft); color: var(--success); }
body.admin-mode .stt.cancelled { background: #f1f5f9; color: var(--ad-muted); }
body.admin-mode .auto-flow { color: var(--ad-primary-dark); background: var(--ad-primary-soft); }
body.admin-mode .auto-flow.done { color: var(--success); background: var(--success-soft); }

/* ============================================================
   订单卡片打磨（仅后台 admin-mode）：左色条状态识别 + 头部分层 + 商品行分隔 + 按钮橙主题
   ============================================================ */
body.admin-mode .order { transition: box-shadow .15s, border-color .15s; }
body.admin-mode .order:hover { border-color: var(--ad-primary); box-shadow: 0 6px 18px rgba(15, 27, 45, .08); }
body.admin-mode .order.unpaid    { border-left: 3px solid var(--ad-primary); }
body.admin-mode .order.review    { border-left: 3px solid #7c3aed; }
body.admin-mode .order.pending   { border-left: 3px solid var(--warn); }
body.admin-mode .order.confirmed { border-left: 3px solid #2563eb; }
body.admin-mode .order.shipped   { border-left: 3px solid #7c3aed; }
body.admin-mode .order.completed { border-left: 3px solid var(--success); }
body.admin-mode .order.refunded  { border-left: 3px solid var(--ad-muted); }
body.admin-mode .order.cancelled { border-left: 3px solid var(--ad-muted); }

/* 头部：订单号突出、客户名强调、浅底分区 */
body.admin-mode .order-h { background: #fafbff; padding: 12px 14px; }
body.admin-mode .order-h .no { font-size: 13px; font-weight: 700; color: var(--ad-ink); letter-spacing: .2px; }
body.admin-mode .order-h > span:last-child { font-weight: 600; color: var(--ad-2); }

/* 商品行：姓名加粗、行间虚线分隔 */
body.admin-mode .oi + .oi { border-top: 1px dashed var(--ad-line); }
body.admin-mode .oi { padding: 8px 0; }
body.admin-mode .oi .nm div:first-child { font-weight: 600; color: var(--ad-ink); }

/* 页脚：浅底分区、金额更醒目 */
body.admin-mode .order-f { background: #fafbff; border-top: 1px solid var(--ad-line); gap: 8px; }
body.admin-mode .order-f .small.muted { color: var(--ad-muted); }
body.admin-mode .order-f .amt { font-size: 12px; color: var(--ad-muted); }
body.admin-mode .order-f .amt b { font-size: 18px; font-weight: 700; }

/* 订单内操作按钮统一橙色主题（覆盖 style.css 的蓝 primary，与后台整体一致） */
body.admin-mode .order-f .btn.primary { background: var(--ad-primary); border-color: var(--ad-primary); color: #fff; }
body.admin-mode .order-f .btn.primary:hover { background: var(--ad-primary-dark); border-color: var(--ad-primary-dark); }
body.admin-mode .order-f .btn.danger { background: #fff; border-color: #fecaca; color: var(--danger); }
body.admin-mode .order-f .btn.danger:hover { background: var(--danger-soft); }

/* 会员等级 / 联想 / 区块标题 / 搜索建议 */
body.admin-mode .lv.vip { background: var(--ad-primary-soft); color: var(--ad-primary-dark); }
body.admin-mode .model-ac-tick { color: var(--ad-primary); }
body.admin-mode .model-ac-item:hover { background: var(--ad-primary-xsoft); }
body.admin-mode .sec-title::before { background: var(--ad-primary); }
body.admin-mode .suggest li:hover, body.admin-mode .suggest li.on { background: var(--ad-primary-xsoft); color: var(--ad-primary-dark); }
body.admin-mode .tag.mp-tag { background: var(--ad-primary-soft); color: var(--ad-primary-dark); }

/* 弹窗微调 */
body.admin-mode .modal { border-radius: 16px; }
body.admin-mode .modal-h h3 { font-size: 16px; font-weight: 700; }

/* ============================================================
   五、批量操作条 / 订单多选
   ============================================================ */
.batch-bar {
  position: sticky; bottom: 12px; z-index: 30;
  display: none; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 12px; padding: 10px 14px;
  background: var(--ad-ink); color: #fff; border-radius: 12px;
  box-shadow: 0 10px 30px rgba(15, 27, 45, .3);
}
.batch-bar.show { display: flex; }
.batch-bar .cnt { font-size: 13px; opacity: .9; }
.batch-bar .cnt b { font-size: 15px; }
.batch-bar .spacer { margin-left: auto; }
.batch-bar .btn { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .2); color: #fff; }
.batch-bar .btn:hover { background: rgba(255, 255, 255, .2); }
.batch-bar .btn.primary { background: var(--ad-primary); border-color: var(--ad-primary); }
.batch-bar .btn.primary:hover { background: var(--ad-primary-dark); border-color: var(--ad-primary-dark); }
.batch-bar .btn.danger { background: rgba(220, 38, 38, .25); border-color: rgba(220, 38, 38, .5); color: #fff; }

/* 订单多选 checkbox 视觉 */
.admin-content .order { cursor: pointer; }
.order-check { display: none; }
.order.sel { box-shadow: 0 0 0 2px var(--ad-primary), var(--ad-shadow); }
.order.hover { outline: 2px solid var(--ad-muted); outline-offset: -1px; }
.batch-mode .order-check { display: block; }
.order-check input { width: 18px; height: 18px; accent-color: var(--ad-primary); cursor: pointer; }
.order-h .order-check { margin-right: 8px; flex: 0 0 auto; display: flex; align-items: center; }
.batch-toolbar { display: none; align-items: center; gap: 10px; margin-bottom: 10px; }
.batch-toolbar.show { display: flex; }
.batch-toolbar label { font-size: 13px; color: var(--ad-2); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.batch-toolbar .link { color: var(--ad-primary); font-size: 13px; cursor: pointer; }
.batch-toolbar .link:hover { text-decoration: underline; }

/* ============================================================
   六、详情抽屉
   ============================================================ */
.drawer-mask {
  position: fixed; inset: 0; z-index: 110; background: rgba(15, 27, 45, .42);
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.drawer-mask.show { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 111;
  width: min(480px, 94vw); background: #fff;
  transform: translateX(100%); transition: transform .25s cubic-bezier(.2, .8, .2, 1);
  display: flex; flex-direction: column; box-shadow: -10px 0 40px rgba(0, 0, 0, .18);
}
.drawer.show { transform: none; }
.drawer-h {
  display: flex; align-items: center; gap: 10px; padding: 16px 18px;
  border-bottom: 1px solid var(--ad-line); flex: 0 0 auto;
}
.drawer-h h3 { font-size: 15px; }
.drawer-h .x { margin-left: auto; border: 0; background: none; font-size: 22px; color: var(--ad-muted); cursor: pointer; line-height: 1; }
.drawer-b { flex: 1; overflow-y: auto; padding: 16px 18px calc(16px + env(safe-area-inset-bottom)); }
.drawer-sec { margin-bottom: 16px; }
.drawer-sec .t { font-size: 12px; font-weight: 700; color: var(--ad-muted); margin-bottom: 8px; letter-spacing: .3px; }
.drawer .kv { font-size: 13px; }
.drawer-d-items { display: flex; flex-direction: column; gap: 8px; }
.drawer-d-item { display: flex; gap: 10px; padding: 10px; border: 1px solid var(--ad-line); border-radius: 10px; }
.drawer-d-item .nm { flex: 1; min-width: 0; font-size: 13px; }
.drawer-d-item .sk { font-size: 11px; color: var(--ad-muted); }
.drawer-d-item .q { color: var(--ad-2); white-space: nowrap; }
.drawer-d-item .m { min-width: 64px; text-align: right; font-weight: 600; }
.drawer-actions { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px 18px; border-top: 1px solid var(--ad-line); flex: 0 0 auto; }
.drawer-actions .btn { flex: 1; }

/* ============================================================
   七、全局搜索弹窗
   ============================================================ */
.search-modal .modal { max-width: 640px; }
.gs-wrap { display: flex; flex-direction: column; max-height: 72vh; }
.gs-input-row { display: flex; align-items: center; gap: 10px; border: 2px solid var(--ad-primary); border-radius: 12px; padding: 0 14px; height: 48px; }
.gs-input-row .ico { font-size: 18px; color: var(--ad-primary); }
.gs-input-row input { flex: 1; min-width: 0; border: 0; outline: none; font-size: 16px; background: transparent; }
.gs-results { margin-top: 10px; overflow-y: auto; }
.gs-group { margin-bottom: 6px; }
.gs-group .gh { font-size: 11px; font-weight: 700; color: var(--ad-muted); padding: 8px 4px 4px; letter-spacing: .4px; }
.gs-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; cursor: pointer; }
.gs-item:hover, .gs-item.on { background: var(--ad-primary-xsoft); }
.gs-item .gi { width: 22px; text-align: center; font-size: 15px; color: var(--ad-primary); flex: 0 0 auto; }
.gs-item .gt { flex: 1; min-width: 0; }
.gs-item .gt .a { font-size: 13.5px; color: var(--ad-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-item .gt .b { font-size: 11px; color: var(--ad-muted); }
.gs-item .gx { font-size: 12px; color: var(--ad-primary); }
.gs-empty { text-align: center; color: var(--ad-muted); padding: 26px; font-size: 13px; }
.gs-hint { font-size: 11px; color: var(--ad-muted); text-align: center; margin-top: 8px; }
.gs-hint kbd { background: #fff; border: 1px solid var(--ad-line); border-radius: 4px; padding: 0 5px; margin: 0 2px; }

/* ============================================================
   八、经营概览
   ============================================================ */
.dash-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px; margin-top: 14px; }
@media (max-width: 860px) { .dash-grid { grid-template-columns: minmax(0, 1fr); } }
.profit-area { display: flex; align-items: flex-end; gap: 8px; height: 120px; padding-top: 10px; }
.profit-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; }
.profit-col .pa { width: 100%; max-width: 40px; border-radius: 6px 6px 0 0; min-height: 2px;
  background: linear-gradient(180deg, #FFA25C, var(--ad-primary)); position: relative; }
.profit-col .pv { font-size: 10px; color: var(--ad-primary-dark); }
.profit-col .lb { font-size: 10px; color: var(--ad-muted); }
.contrib-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--ad-line); }
.contrib-row:last-child { border-bottom: 0; }
.contrib-row .rk { width: 20px; height: 20px; border-radius: 5px; background: var(--ad-primary-soft); color: var(--ad-primary-dark); display: grid; place-items: center; font-size: 11px; font-weight: 700; flex: 0 0 auto; }
.contrib-row .nm { flex: 1; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contrib-bar { width: 70px; height: 6px; border-radius: 3px; background: var(--ad-line); overflow: hidden; flex: 0 0 auto; }
.contrib-bar i { display: block; height: 100%; background: var(--ad-primary); }
.contrib-row .amt { font-size: 12px; color: var(--ad-2); white-space: nowrap; min-width: 64px; text-align: right; font-variant-numeric: tabular-nums; }
.feed-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--ad-line); }
.feed-item:last-child { border-bottom: 0; }
.feed-item .fi-no { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; color: var(--ad-ink); }
.feed-item .fi-c { font-size: 12px; color: var(--ad-2); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-item .fi-a { font-size: 12px; font-weight: 600; white-space: nowrap; }
.feed-item .fi-t { font-size: 11px; color: var(--ad-muted); white-space: nowrap; }

/* 热销 + 库存预警 合并卡 */
.hs-merge { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 24px; }
@media (max-width: 860px) { .hs-merge { grid-template-columns: minmax(0, 1fr); gap: 6px; } }
.hs-sub { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--ad-muted);
  letter-spacing: .3px; padding: 0 0 8px; border-bottom: 1px solid var(--ad-line); margin-bottom: 2px; }
.hs-sub .cnt { margin-left: auto; font-weight: 400; color: var(--ad-muted); }
.rank .stk { flex: 0 0 auto; font-size: 11px; line-height: 1; padding: 4px 8px; border-radius: 20px;
  background: #eef2f7; color: var(--ad-2); white-space: nowrap; }
.rank .stk.low { background: #fff7ed; color: #c2410c; font-weight: 600; }
.rank .stk.out { background: #fef2f2; color: #dc2626; font-weight: 600; }

/* 库存健康分级 / 类目条形 */
.ov-health { display: flex; gap: 8px; margin: 4px 0 10px; }
.ov-health .hc { flex: 1; text-align: center; padding: 8px 4px; border-radius: 10px; font-size: 11px; }
.ov-health .hc b { display: block; font-size: 19px; font-weight: 800; line-height: 1.25; font-variant-numeric: tabular-nums; }
.ov-health .hc-out { background: #fef2f2; color: #b91c1c; }
.ov-health .hc-low { background: #fff7ed; color: #c2410c; }
.ov-health .hc-ok { background: #f0fdf4; color: #15803d; }

.obar { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.obar .on { flex: 0 0 78px; font-size: 12px; color: var(--ad-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.obar .otrack { flex: 1; min-width: 0; height: 14px; background: var(--ad-line); border-radius: 7px; overflow: hidden; }
.obar .otrack i { display: block; height: 100%; border-radius: 7px; }
.obar .ovv { flex: 0 0 auto; min-width: 74px; text-align: right; font-size: 12px; color: var(--ad-ink);
  font-variant-numeric: tabular-nums; white-space: nowrap; }

/* 双序列柱状图（style.css .bars 基础上微调） */
.bars { display: flex; align-items: flex-end; gap: 8px; height: 150px; padding-top: 10px; }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; min-width: 0; }
.bar-col .bgroup { display: flex; align-items: flex-end; justify-content: center; gap: 3px; width: 100%; height: 100%; }
.bar-col .bgroup .bar { flex: 1 1 0; width: auto; max-width: 30px; min-width: 0; }
.bar-col .bar.b-pf { background: linear-gradient(180deg, #7fc8a0, #16a34a); }
.bar-col .bar span { font-size: 9px; }
.bar-col .lb { font-size: 11px; color: var(--ad-muted); }
.bar-col .ct { font-size: 10px; color: var(--ad-muted); }
.ov-legend { display: flex; gap: 14px; justify-content: flex-end; font-size: 11px; color: var(--ad-muted); margin: 2px 0 2px; }
.ov-legend .lg::before { content: ''; display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.ov-legend .lg-pf::before { background: linear-gradient(180deg, #7fc8a0, #16a34a); }

/* 窄屏：柱顶数值标签会重叠，隐藏 */
@media (max-width: 640px) {
  .bar-col .bar span { display: none; }
  .bar-col .bgroup { gap: 2px; }
  .obar .on { flex-basis: 66px; }
  .obar .ovv { min-width: 62px; }
}

/* ============================================================
   九、配件库决策字段标签 / XLS 导入 / 规格行
   ============================================================ */
.dfield { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; padding: 2px 7px; border-radius: 6px; background: var(--ad-primary-xsoft); color: var(--ad-primary-dark); }
.dfield.warn { background: #fff7ed; color: #c2410c; }
.dfield .dv { font-weight: 700; }

/* 在售配件卡片：库存成本按顶层类目细分 */
.stock-cats { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); display: flex; flex-direction: column; gap: 3px; }
.stock-cats .sc-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; }
.stock-cats .sc-n { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.stock-cats .sc-v { color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* 配件库表格：选中行高亮 / 悬停 / 隔行（品牌橙体系内聚） */
body.admin-mode table.tbl tbody tr:nth-child(even) td { background: #FBFCFE; }
body.admin-mode table.tbl tbody tr:hover td { background: var(--ad-primary-xsoft); }
body.admin-mode table.tbl tbody tr.sel td { background: var(--ad-primary-soft); }
body.admin-mode table.tbl tbody tr.sel:hover td { background: var(--ad-primary-soft); }

/* 配件库桌面布局修正：筛选行任意宽度可换行，避免窄窗横向溢出把按钮挤出视口；
   表格设最小宽度，超宽时卡片内横向滚动而非压窄列（解决末列日期截切）。
   「操作」列允许按钮换行并设最小宽度，保证常用操作在常见桌面宽度始终可见。 */
body.admin-mode .filter-row { flex-wrap: wrap; }
/* 配件库表格：固定布局，桌面常见宽度（≥1280）整表可见、不横向裁切 */
.products-tbl { table-layout: fixed; min-width: 840px; }
.products-tbl th:last-child, .products-tbl td:last-child { width: 150px; }
/* 操作列吸右：即便表格在窄屏内横向滚动，操作按钮也始终固定在右侧、不被隐藏 */
.products-tbl th:last-child, .products-tbl td:last-child {
  position: sticky; right: 0; z-index: 2;
  background: #fff;
  box-shadow: -8px 0 10px -8px rgba(0,0,0,.12);
}
.products-tbl thead th:last-child { background: #fafbfd; z-index: 3; }
.products-tbl tbody tr:nth-child(even) td:last-child { background: #FBFCFE; }
.products-tbl tbody tr:hover td:last-child { background: var(--ad-primary-xsoft); }
.products-tbl tbody tr.sel td:last-child { background: var(--ad-primary-soft); }
/* 操作列内按钮允许换行，确保所有功能在窄列内也不被隐藏 */
.products-tbl td:last-child .row-actions { gap: 4px; }
@media (max-width: 1280px) { .products-tbl { min-width: 800px; } }

/* ============================================================
   十、补货助手（智能补货决策台）
   ============================================================ */
.rk-subtabs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rk-kpi { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.rk-kpi .k { background: var(--ad-primary-xsoft); border: 1px solid var(--ad-line); border-radius: 12px; padding: 12px 14px; min-width: 0; }
.rk-kpi .k .kv { font-size: 22px; font-weight: 800; color: var(--ad-primary-dark); font-variant-numeric: tabular-nums; line-height: 1.1; }
.rk-kpi .k .kl { font-size: 12px; color: var(--ad-2); margin-top: 4px; }
.rk-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.rk-tools .spacer { margin-left: auto; }
.rk-chk { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--ad-2); cursor: pointer; white-space: nowrap; }
.rk-chk input { accent-color: var(--ad-primary); }
/* 分类胶囊筛选 */
.rk-cats { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.rk-cat-btn {
  flex: 0 0 auto; min-height: 32px; padding: 6px 14px; border-radius: 999px;
  background: #fff; border: 1px solid var(--ad-line); color: var(--ad-2);
  font-size: 13px; line-height: 1; cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px; transition: background .15s, border-color .15s, color .15s;
}
.rk-cat-btn:hover { border-color: var(--ad-primary); color: var(--ad-primary-dark); }
.rk-cat-btn.on { background: var(--ad-primary); border-color: var(--ad-primary); color: #fff; font-weight: 600; box-shadow: 0 3px 10px rgba(255, 106, 0, .22); }
.rk-cat-btn .n { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--ad-primary-soft); color: var(--ad-primary-dark); font-variant-numeric: tabular-nums; }
.rk-cat-btn.on .n { background: rgba(255, 255, 255, .25); color: #fff; }
/* 胶囊筛选维度切换（品类 / 供应商） */
.rk-filt { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.rk-dim { display: inline-flex; background: var(--ad-primary-xsoft); border: 1px solid var(--ad-line); border-radius: 999px; padding: 3px; flex: 0 0 auto; }
.rk-dim-btn {
  border: 0; background: transparent; cursor: pointer; white-space: nowrap;
  font-size: 13px; color: var(--ad-2); padding: 5px 14px; border-radius: 999px; line-height: 1;
  transition: background .15s, color .15s;
}
.rk-dim-btn:hover { color: var(--ad-primary-dark); }
.rk-dim-btn.on { background: #fff; color: var(--ad-primary-dark); font-weight: 600; box-shadow: 0 1px 4px rgba(255, 106, 0, .18); }
.rk-legend { font-size: 11.5px; color: var(--ad-muted); margin-bottom: 10px; line-height: 1.7; }
.rk-cat { font-size: 13px; }
.rk-sub { font-size: 11px; color: var(--ad-muted); }
.rk-name { white-space: normal !important; max-width: 300px; min-width: 180px; word-break: break-word; }
.rk-low { font-size: 11px; color: var(--danger); margin-top: 2px; }
.rk-sug { width: 66px !important; text-align: right; padding: 0 6px !important; }
.rk-tag { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 6px; margin-right: 5px; vertical-align: middle; }
.rk-tag.hot { background: #fdecea; color: #c0392b; }
.rk-tag.warm { background: #fff7ed; color: #c2410c; }
.rk-tag.cold { background: #eef2f7; color: var(--ad-2); }
.rk-tag.low { background: #fef3c7; color: #b45309; }
.rk-sup { margin-bottom: 14px; border: 1px solid var(--ad-line); border-radius: 12px; overflow: hidden; }
.rk-sup-h { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--ad-primary-xsoft); font-weight: 700; font-size: 13px; color: var(--ad-ink); flex-wrap: wrap; }
.rk-sup-h .cnt { color: var(--ad-2); font-weight: 500; font-size: 12px; }
.rk-sup-h .spacer { margin-left: auto; }
@media (max-width: 640px) {
  .rk-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .rk-kpi .k .kv { font-size: 18px; }
  .rk-tools .spacer { display: none; }
  .rk-tools .btn.sm { flex: 1 1 auto; }
}

/* 品类管理：一级分组行 / 层级标签换品牌橙（覆盖 style.css 红蓝） */
body.admin-mode .cat-group > .cat-row { background: var(--ad-primary-xsoft); }
body.admin-mode .cat-tag.lvl1 { background: var(--ad-primary-soft); color: var(--ad-primary-dark); }
body.admin-mode .cat-tag.lvl2 { background: #ecfdf5; color: #0f9d6b; }

/* ============================================================
   十一、表单字段级校验
   ============================================================ */
.field.invalid > label { color: #d94646; }
.field.invalid .input,
.field.invalid .select,
.field.invalid textarea.input {
  border-color: #ff7a7a !important;
  background: #fff7f7;
}
.field-err {
  color: #d94646;
  font-size: 12px;
  margin-top: 4px;
  line-height: 1.4;
}
.spec-line.invalid .input {
  border-color: #ff7a7a;
  background: #fff7f7;
}

/* ============================================================
   十二、响应式：≤900px 侧边栏转抽屉；≤640px 细节收紧
   ============================================================ */
@media (max-width: 900px) {
  .ad-side {
    transform: translateX(-100%); transition: transform .25s cubic-bezier(.2, .8, .2, 1);
    box-shadow: none;
  }
  body.admin-nav-open .ad-side { transform: none; box-shadow: 20px 0 60px rgba(15, 23, 42, .18); }
  .ad-main { margin-left: 0; }
  .ad-burger { display: inline-grid; place-items: center; }
  .ad-top-brand { display: flex; }
  .ad-top { padding: 0 12px; gap: 8px; }
  .admin-content { padding: 14px 12px calc(32px + env(safe-area-inset-bottom)); }
}
@media (max-width: 640px) {
  .ad-search .lbl, .ad-search kbd { display: none; }
  .ad-quick .lbl { display: none; }
  .dash-grid { gap: 10px; }
  /* 标题行：动作组占满整行独立展示，按钮左对齐排列 */
  .admin-content .page-title > span { margin-left: 0 !important; }
  .admin-content .page-title > span:last-child { flex: 1 1 100%; }
  /* 手机安全网：卡片/表格不撑破页面 */
  .admin-content .card { min-width: 0; max-width: 100%; }
  .admin-content .card > .table-wrap { margin: 0; padding: 0; }
  .admin-content .tbl .btn.sm { padding: 5px 9px; font-size: 12px; }
  .admin-content .filter-row .input { max-width: 100% !important; flex: 1 1 100%; }
  .batch-bar { bottom: 8px; padding: 8px 10px; gap: 6px; }
  .batch-bar .btn { padding: 7px 10px; font-size: 13px; }
  .drawer { width: 100vw; }
  .rank .q { max-width: 42vw; overflow: hidden; text-overflow: ellipsis; }
  .contrib-bar { width: 46px; }
  .admin-content .stat { padding: 12px 14px; }
  .admin-content .stat .v { font-size: 20px; }
  .admin-content .page-title h2 { font-size: 18px; }
}