/* ============================================================
   1. 设计令牌 (Design Tokens) — 严格按 design-tokens.md 落地
   ============================================================ */
#page-after-sale, #page-after-sale .main{
  /* 背景层级（明度从深到浅，靠"差"建立层级；半透明以支撑毛玻璃） */
  --bg-page: #070b16;
  --bg-inset: rgba(14,22,38,0.58);
  --bg-card: rgba(30,41,59,0.62);
  --bg-card-hover: rgba(38,52,73,0.78);
  --bg-elevated: rgba(43,58,82,0.92);
  /* ★毛玻璃（用户确认：半透明背景 + backdrop-filter，深色底上 subtle） */
  --glass-blur: 14px;
  --glass-blur-sm: 8px;
  --glass-border: rgba(148,163,184,0.14);

  /* 文本 */
  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --text-tertiary: #64748b;
  --text-disabled: #475569;

  /* 边框 */
  --border-color: #334155;
  --border-strong: #475569;
  --border-focus: rgba(59,130,246,0.55);

  /* 主色（沿用系统主色） */
  --primary: #3b82f6;
  --primary-hover: #60a5fa;
  --primary-active: #2563eb;
  --primary-soft: rgba(59,130,246,0.13);
  --primary-border: rgba(59,130,246,0.4);

  /* ★财务语义：红=支出/亏损，绿=收入/收益（与管理看板一致） */
  --expense: #ef4444;
  --expense-bright: #f87171;
  --expense-soft: rgba(239,68,68,0.12);
  --expense-border: rgba(239,68,68,0.35);
  --income: #10b981;
  --income-bright: #34d399;
  --income-soft: rgba(16,185,129,0.12);
  --income-border: rgba(16,185,129,0.35);
  --warning: #f59e0b;
  --warning-soft: rgba(245,158,11,0.12);
  --purple: #8b5cf6;
  --cyan: #06b6d4;

  /* 图表系列（支出暖色 / 收入冷色） */
  --chart-exp-1: #ef4444;
  --chart-exp-2: #f97316;
  --chart-exp-3: #f59e0b;
  --chart-exp-4: #e11d48;
  --chart-inc-1: #10b981;
  --chart-inc-2: #06b6d4;
  --chart-inc-3: #34d399;
  --chart-inc-4: #14b8a6;
  --chart-neutral-inc: #0ea5e9;
  --chart-trend: #3b82f6;
  --chart-grid: #334155;

  /* 排版 */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", "JetBrains Mono", "Roboto Mono", Consolas, monospace;

  /* 间距 (4px 基准) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* 圆角 */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  /* 阴影（仅用于浮层） */
  --shadow-raised: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-elevated: 0 8px 24px rgba(0,0,0,0.5);
  --shadow-overlay: 0 16px 48px rgba(0,0,0,0.6);

  /* 语义 class（颜色只通过 class 绑定，禁止裸写红绿） */
  --font-size-h1: 20px;
  --font-size-h2: 16px;
  --font-size-h3: 14px;
  --font-size-kpi: 30px;
  --font-size-body: 14px;
  --font-size-small: 12px;
  --font-size-micro: 11px;
}


/* 毛玻璃背板：极淡的冷色光晕，给 backdrop-filter 提供可模糊内容（克制、不花哨） */
/* 毛玻璃背板(仅售后页面生效): 极淡冷色光晕给backdrop-filter提供模糊源 */
#page-after-sale::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 640px at 14% -6%, rgba(59,130,246,0.09), transparent 62%),
    radial-gradient(820px 520px at 88% 10%, rgba(139,92,246,0.07), transparent 60%),
    radial-gradient(720px 720px at 55% 112%, rgba(6,182,212,0.06), transparent 62%);
}

/* 数字等宽 */
#page-after-sale .num{ font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
#page-after-sale .expense{ color: var(--expense); }
#page-after-sale .income{ color: var(--income); }
#page-after-sale .net{ color: var(--chart-trend); }

/* ============================================================
   2. 应用骨架：左侧导航 + 主内容
   ============================================================ */
#page-after-sale .app{
  display: grid;
  grid-template-columns: 200px 1fr;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

/* ---- 侧边栏 ---- */
#page-after-sale .sidebar{
  background: rgba(10,16,32,0.86);
  border-right: 1px solid var(--border-color);
  padding: var(--space-4) 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  backdrop-filter: blur(var(--glass-blur-sm));
  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
}
#page-after-sale .sidebar .brand{
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-4) var(--space-4);
  border-bottom: 1px solid var(--border-color);
  margin-bottom: var(--space-3);
}
#page-after-sale .sidebar .brand .logo{
  width: 28px; height: 28px; border-radius: var(--radius-sm);
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #fff;
}
#page-after-sale .sidebar .brand .title{ font-size: 13px; font-weight: 600; color: var(--text-primary); }
#page-after-sale .sidebar .brand .sub{ font-size: 11px; color: var(--text-tertiary); }
#page-after-sale .sidebar nav{ display: flex; flex-direction: column; gap: 1px; }
#page-after-sale .sidebar .nav-item{
  display: flex; align-items: center; gap: var(--space-3);
  padding: 8px var(--space-4);
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  border-left: 2px solid transparent;
  user-select: none;
}
#page-after-sale .sidebar .nav-item:hover{ background: var(--bg-card-hover); color: var(--text-primary); }
#page-after-sale .sidebar .nav-item.active{
  background: var(--primary-soft);
  color: var(--primary);
  border-left-color: var(--primary);
  font-weight: 500;
}
#page-after-sale .sidebar .nav-item .ico{
  width: 14px; height: 14px; display: inline-block; flex-shrink: 0;
  color: currentColor;
}
#page-after-sale .sidebar .nav-badge{
  margin-left: auto;
  font-size: 10px;
  background: var(--expense);
  color: #fff;
  padding: 1px 5px;
  border-radius: 8px;
  font-weight: 500;
}

/* ---- 顶部主内容区 ---- */
#page-after-sale .main{
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ============================================================
   3. 页面顶部（标题 + 导出）
   ============================================================ */
#page-after-sale .page-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6) var(--space-4);
  border-bottom: 1px solid var(--border-color);
}
#page-after-sale .page-header h1{
  margin: 0;
  font-size: var(--font-size-h1);
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
#page-after-sale .page-header .breadcrumb{
  font-size: 12px;
  color: var(--text-tertiary);
  font-weight: 400;
}
#page-after-sale .page-header .actions{ display: flex; gap: var(--space-2); }

/* ============================================================
   4. 筛选条
   ============================================================ */
#page-after-sale .filter-bar{ position: relative; z-index: 100;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-color);
  padding: var(--space-3) var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
}
#page-after-sale .filter-group{ display: flex; align-items: center; gap: var(--space-2); }
#page-after-sale .filter-label{
  font-size: 12px;
  color: var(--text-tertiary);
  font-weight: 500;
  white-space: nowrap;
}

/* 日期分段控件 */
#page-after-sale .segmented{
  display: inline-flex;
  background: var(--bg-inset);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 2px;
  gap: 2px;
}
#page-after-sale .segmented button{
  background: transparent;
  border: 0;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
}
#page-after-sale .segmented button:hover{ color: var(--text-primary); }
#page-after-sale .segmented button.active{
  background: var(--primary-soft);
  color: var(--primary);
  border: 1px solid var(--primary-border);
  padding: 3px 11px;
}

/* 下拉触发器 */
#page-after-sale .dropdown-trigger{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-inset);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  height: 32px;
  padding: 0 10px;
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
  font-family: inherit;
  min-width: 180px;
  justify-content: space-between;
}
#page-after-sale .dropdown-trigger:hover{ border-color: var(--border-strong); }
#page-after-sale .dropdown-trigger .caret{ color: var(--text-tertiary); font-size: 10px; }
#page-after-sale .dropdown-trigger .count{
  font-size: 11px;
  color: var(--text-tertiary);
  font-weight: 500;
  margin-left: 4px;
}

/* 下拉面板 */
#page-after-sale .dropdown-panel{
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-elevated);
  min-width: 280px;
  max-height: 360px;
  overflow-y: auto;
  z-index: 1500;
  display: none;
  backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
}
#page-after-sale .dropdown-panel.open{ display: block; }
#page-after-sale .dropdown-search{
  padding: 8px;
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  background: var(--bg-elevated);
}
#page-after-sale .dropdown-search input{
  width: 100%;
  background: var(--bg-inset);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  color: var(--text-primary);
  font-size: 12px;
  outline: none;
  font-family: inherit;
}
#page-after-sale .dropdown-search input:focus{ border-color: var(--border-focus); }
#page-after-sale .dropdown-item{
  padding: 6px 12px;
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}
#page-after-sale .dropdown-item:hover{ background: var(--bg-card-hover); }
#page-after-sale .dropdown-item .check{
  width: 14px; height: 14px;
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  font-size: 10px;
  flex-shrink: 0;
}
#page-after-sale .dropdown-item.selected .check{ background: var(--primary); border-color: var(--primary); color: #fff; }
#page-after-sale .dropdown-item.selected{ color: var(--primary); }
#page-after-sale .dropdown-empty{ padding: 12px; color: var(--text-tertiary); font-size: 12px; text-align: center; }

#page-after-sale .dropdown-wrap{ position: relative; }

/* 按钮 */
#page-after-sale .btn{
  height: 32px;
  padding: 0 14px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid transparent;
  transition: all .15s;
}
#page-after-sale .btn-primary{ background: var(--primary); color: #fff; }
#page-after-sale .btn-primary:hover{ background: var(--primary-hover); }
#page-after-sale .btn-secondary{
  background: var(--bg-inset);
  color: var(--text-secondary);
  border-color: var(--border-color);
}
#page-after-sale .btn-secondary:hover{ color: var(--text-primary); border-color: var(--border-strong); }
#page-after-sale .btn-ghost{ background: transparent; color: var(--text-secondary); }
#page-after-sale .btn-ghost:hover{ color: var(--primary); }

#page-after-sale .filter-bar .spacer{ flex: 1; }

/* ============================================================
   5. 主内容容器
   ============================================================ */
#page-after-sale .content{
  padding: var(--space-5) var(--space-6);
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  display: block;  /* [fix] 改block布局, 避免flex stretch不可靠导致卡片不撑满 */
}
#page-after-sale .content > * + *{ margin-top: var(--space-6); }  /* 替代gap的子项间距 */

/* ============================================================
   6. 卡片基础
   ============================================================ */
#page-after-sale .card{
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  transition: border-color .15s, background .15s;
  backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
}
#page-after-sale .card:hover{ border-color: var(--border-strong); }
#page-after-sale .card-title{
  font-size: var(--font-size-h2);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
#page-after-sale .card-title .meta{ font-size: 12px; color: var(--text-tertiary); font-weight: 400; }
#page-after-sale .card-title .left{ display: flex; align-items: center; gap: 6px; }
#page-after-sale .card-title .dot{ width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }

/* ============================================================
   7. KPI 卡区
   ============================================================ */
#page-after-sale .kpi-grid{
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--space-3);
}
#page-after-sale .kpi{
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  cursor: default;
  transition: border-color .15s, background .15s;
  min-width: 0;
  backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
}
#page-after-sale .kpi:hover{ border-color: var(--border-strong); background: var(--bg-card-hover); }
#page-after-sale .kpi.main{
  border-left: 3px solid var(--primary);
  box-shadow: inset 0 0 48px rgba(59,130,246,0.07);
}
#page-after-sale .kpi-label{
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-h3);
  font-weight: 600;
  color: var(--text-secondary);
  min-height: 18px;
}
#page-after-sale .kpi-amount{
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px;
  white-space: nowrap;
}
#page-after-sale .kpi-amount .sign{ font-weight: 500; margin-right: 1px; }
#page-after-sale .kpi-sub{
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: var(--font-size-small);
  color: var(--text-tertiary);
}
#page-after-sale .kpi-sub .delta-good{ color: var(--income-bright); font-weight: 500; }
#page-after-sale .kpi-sub .delta-bad{ color: var(--expense-bright); font-weight: 500; }
#page-after-sale .kpi-mini{
  height: 30px;
  background: var(--bg-inset);
  border-radius: var(--radius-sm);
  margin-top: 2px;
  position: relative;
  overflow: hidden;
}
#page-after-sale .kpi-mini svg{ width: 100%; height: 100%; display: block; }

/* 净额主卡大字号变体 */
#page-after-sale .kpi.main .kpi-amount{ font-size: 26px; letter-spacing: -0.8px; }

/* 收入/支出 标签 */
#page-after-sale .chip{
  display: inline-flex;
  align-items: center;
  font-size: var(--font-size-micro);
  font-weight: 500;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  line-height: 1.5;
  border: 1px solid;
  white-space: nowrap;
}
#page-after-sale .chip.expense{ color: var(--expense); background: var(--expense-soft); border-color: var(--expense-border); }
#page-after-sale .chip.income{ color: var(--income);  background: var(--income-soft);  border-color: var(--income-border); }
#page-after-sale .chip.neutral{ color: var(--text-tertiary); background: var(--bg-inset); border-color: var(--border-color); }
#page-after-sale .chip.warn{ color: var(--warning); background: var(--warning-soft); border-color: rgba(245,158,11,0.35); }

/* ============================================================
   8. 三区图表
   ============================================================ */
#page-after-sale .charts-row{
  display: grid;
  grid-template-columns: 1.5fr 1.5fr 1fr;
  gap: var(--space-4);
}
#page-after-sale .chart-card{ min-width: 0; }
#page-after-sale .chart-body{ margin-top: var(--space-3); }

/* 原因拆解占比条 */
#page-after-sale .reason-list{ display: flex; flex-direction: column; gap: 6px; }
#page-after-sale .reason-row{
  display: grid;
  grid-template-columns: 100px 1fr 96px 60px;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--font-size-small);
  height: 24px;
}
#page-after-sale .reason-name{ color: var(--text-secondary); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#page-after-sale .reason-bar{ height: 8px; background: var(--bg-inset); border-radius: 2px; position: relative; overflow: hidden; }
#page-after-sale .reason-bar .fill{ height: 100%; border-radius: 2px; }
#page-after-sale .reason-amount{ color: var(--text-primary); font-variant-numeric: tabular-nums; text-align: right; font-weight: 500; }
#page-after-sale .reason-pct{ color: var(--text-tertiary); font-variant-numeric: tabular-nums; text-align: right; }

/* 趋势图 */
#page-after-sale .trend-chart{ height: 220px; position: relative; padding: 0 4px; }
#page-after-sale .trend-chart svg{ width: 100%; height: 100%; display: block; }
#page-after-sale .trend-axis{
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
}
#page-after-sale .trend-axis .grid-line{
  position: absolute;
  left: 36px;
  right: 0;
  height: 1px;
  background: rgba(148,163,184,0.10);
}
#page-after-sale .trend-axis .axis-label{
  position: absolute;
  left: 0;
  font-size: 10px;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
  transform: translateY(-50%);
}
#page-after-sale .trend-axis .x-label{
  position: absolute;
  bottom: -18px;
  font-size: 10px;
  color: var(--text-tertiary);
  transform: translateX(-50%);
  font-variant-numeric: tabular-nums;
}
#page-after-sale .trend-legend{ display: flex; gap: 12px; font-size: 11px; color: var(--text-secondary); margin-top: 8px; }
#page-after-sale .trend-legend .item{ display: inline-flex; align-items: center; gap: 4px; }
#page-after-sale .trend-legend .swatch{ width: 10px; height: 3px; border-radius: 1px; }

/* 申诉结果 */
#page-after-sale .appeal-card{ display: flex; flex-direction: column; gap: 10px; }
#page-after-sale .appeal-success{
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 14px;
  color: var(--text-secondary);
}
#page-after-sale .appeal-success .rate{ font-size: 28px; font-weight: 700; color: var(--income); }
#page-after-sale .appeal-success .rate .pct{ font-size: 18px; font-weight: 500; margin-left: 2px; }
#page-after-sale .appeal-stats{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 4px;
}
#page-after-sale .appeal-stat{
  background: var(--bg-inset);
  border-radius: var(--radius-md);
  padding: 10px 12px;
}
#page-after-sale .appeal-stat .label{ font-size: 11px; color: var(--text-tertiary); }
#page-after-sale .appeal-stat .value{ font-size: 18px; font-weight: 600; margin-top: 2px; font-variant-numeric: tabular-nums; }
#page-after-sale .appeal-bars{ display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
#page-after-sale .appeal-bar-row{
  display: grid;
  grid-template-columns: 90px 1fr 60px;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
#page-after-sale .appeal-bar-row .name{ color: var(--text-secondary); }
#page-after-sale .appeal-bar-row .bar{ height: 6px; background: var(--bg-inset); border-radius: 3px; overflow: hidden; }
#page-after-sale .appeal-bar-row .bar .fill{ height: 100%; border-radius: 3px; }
#page-after-sale .appeal-bar-row .val{ text-align: right; color: var(--text-primary); font-variant-numeric: tabular-nums; font-weight: 500; }

/* ============================================================
   9. 货主对比表
   ============================================================ */
#page-after-sale .table-card{ padding: 0; overflow: hidden; }
#page-after-sale .table-card .header{
  padding: 14px 16px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-color);
}
#page-after-sale .table-wrap{ overflow-x: auto; }
#page-after-sale table.aftersale{
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-body);
  table-layout: fixed;  /* [fix] 固定布局: 列宽由colgroup/th width决定, 不被内容撑开 */
}
#page-after-sale table.aftersale th, #page-after-sale table.aftersale td{
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#page-after-sale table.aftersale thead th{
  background: var(--bg-inset);
  color: var(--text-secondary);
  font-size: var(--font-size-small);
  font-weight: 500;
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
  user-select: none;
  cursor: pointer;
  position: relative;
}
#page-after-sale table.aftersale thead th .sort-ind{
  display: inline-block;
  width: 8px;
  height: 10px;
  margin-left: 4px;
  vertical-align: middle;
  position: relative;
  opacity: 0;
}
table.aftersale thead th:hover .sort-ind,
#page-after-sale table.aftersale thead th.sorted .sort-ind{ opacity: 1; }
#page-after-sale table.aftersale thead th .sort-ind::before{
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 0; height: 0;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-bottom: 5px solid var(--text-tertiary);
}
#page-after-sale table.aftersale thead th .sort-ind::after{
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 0;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-top: 5px solid var(--text-tertiary);
}
#page-after-sale table.aftersale thead th.sorted.asc .sort-ind::before{ border-bottom-color: var(--primary); }
#page-after-sale table.aftersale thead th.sorted.asc .sort-ind::after{ border-top-color: rgba(148,163,184,0.25); }
#page-after-sale table.aftersale thead th.sorted.desc .sort-ind::before{ border-bottom-color: rgba(148,163,184,0.25); }
#page-after-sale table.aftersale thead th.sorted.desc .sort-ind::after{ border-top-color: var(--primary); }
#page-after-sale table.aftersale thead th.right{ text-align: right; }
#page-after-sale table.aftersale thead th.center{ text-align: center; }
#page-after-sale table.aftersale tbody td{
  padding: 10px 14px;
  border-bottom: 1px solid rgba(51,65,85,0.5);
  color: var(--text-primary);
  white-space: nowrap;
}
#page-after-sale table.aftersale tbody tr{ transition: background .12s; }
#page-after-sale table.aftersale tbody tr:hover{ background: var(--bg-card-hover); }
#page-after-sale table.aftersale td.right{ text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
#page-after-sale table.aftersale td.center{ text-align: center; }
#page-after-sale table.aftersale td.shipper{
  font-weight: 500;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}
#page-after-sale table.aftersale td.shipper .avatar{
  width: 22px; height: 22px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600;
  color: #fff;
  flex-shrink: 0;
}
#page-after-sale table.aftersale .row-action{
  font-size: 12px;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 3px 10px;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
}
#page-after-sale table.aftersale .row-action:hover{
  color: var(--primary);
  border-color: var(--primary-border);
  background: var(--primary-soft);
}

/* 分页 */
#page-after-sale .pagination{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-top: 1px solid var(--border-color);
  font-size: var(--font-size-small);
  color: var(--text-tertiary);
}
#page-after-sale .pagination .pages{ display: flex; align-items: center; gap: 4px; }
#page-after-sale .pagination .pg{
  min-width: 32px; height: 32px;
  border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  padding: 0 8px;
  font-family: inherit;
}
#page-after-sale .pagination .pg:hover{ background: var(--bg-card-hover); color: var(--text-primary); }
#page-after-sale .pagination .pg.current{ background: var(--primary-soft); color: var(--primary); border-color: var(--primary-border); }
#page-after-sale .pagination .pg.disabled{ color: var(--text-disabled); cursor: not-allowed; }

/* ============================================================
   10. 抽屉（明细下钻）
   ============================================================ */
#page-after-sale .drawer-mask{
  position: fixed; inset: 0;
  background: rgba(7,11,22,0.55);
  z-index: 299;
  opacity: 0; pointer-events: none;
  transition: opacity .2s;
}
#page-after-sale .drawer-mask.open{ opacity: 1; pointer-events: auto; }
#page-after-sale .drawer{
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 540px;
  background: var(--bg-elevated);
  border-left: 1px solid var(--border-strong);
  box-shadow: var(--shadow-overlay);
  z-index: 300;
  transform: translateX(100%);
  transition: transform .25s ease;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
}
#page-after-sale .drawer.open{ transform: translateX(0); }
#page-after-sale .drawer-head{
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
}
#page-after-sale .drawer-head h3{ margin: 0; font-size: 16px; font-weight: 600; }
#page-after-sale .drawer-head .sub{ font-size: 12px; color: var(--text-tertiary); margin-top: 2px; }
#page-after-sale .drawer-head .close{
  width: 28px; height: 28px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 0;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 16px;
  display: inline-flex; align-items: center; justify-content: center;
}
#page-after-sale .drawer-head .close:hover{ background: var(--bg-card-hover); color: var(--text-primary); }

#page-after-sale .drawer-summary{
  padding: 12px 20px;
  background: var(--bg-inset);
  border-bottom: 1px solid var(--border-color);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  flex-shrink: 0;
}
#page-after-sale .drawer-summary .item .lbl{ font-size: 11px; color: var(--text-tertiary); }
#page-after-sale .drawer-summary .item .val{ font-size: 18px; font-weight: 600; margin-top: 2px; font-variant-numeric: tabular-nums; }

#page-after-sale .drawer-body{
  padding: 0;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}
#page-after-sale .drawer-body table{
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
#page-after-sale .drawer-body table thead th{
  position: sticky;
  top: 0;
  background: var(--bg-elevated);
  font-size: 11px;
  color: var(--text-tertiary);
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-color);
  font-weight: 500;
  z-index: 1;
}
#page-after-sale .drawer-body table tbody td{
  padding: 9px 14px;
  border-bottom: 1px solid rgba(51,65,85,0.4);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
  font-size: 12px;
}
#page-after-sale .drawer-body table tbody td.t-left{ font-family: var(--font-sans); font-size: 12px; }
#page-after-sale .drawer-body table tbody tr:hover{ background: var(--bg-card-hover); }

#page-after-sale .drawer-foot{
  padding: 12px 20px;
  border-top: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  font-size: 12px;
  color: var(--text-tertiary);
}
#page-after-sale .drawer-foot a{
  color: var(--primary);
  text-decoration: none;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
#page-after-sale .drawer-foot a:hover{ color: var(--primary-hover); text-decoration: underline; }

/* ============================================================
   11. 响应式
   ============================================================ */
@media (max-width: 1280px) {
#page-after-sale .kpi-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); }
#page-after-sale .kpi.main{ grid-column: span 2; }
#page-after-sale .charts-row{ grid-template-columns: 1.5fr 1fr; }
#page-after-sale .charts-row > :last-child{ grid-column: span 2; }
}
@media (max-width: 1024px) {
#page-after-sale .app{ grid-template-columns: 1fr; }
#page-after-sale .sidebar{ display: none; }
#page-after-sale .kpi-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
#page-after-sale .kpi.main{ grid-column: span 2; }
#page-after-sale .charts-row{ grid-template-columns: 1fr; }
#page-after-sale .charts-row > *{ grid-column: span 1 !important; }
}
@media (max-width: 768px) {
#page-after-sale .drawer{ width: 100%; }
#page-after-sale .content{ padding: var(--space-4); }
#page-after-sale .page-header{ padding: var(--space-4); }
#page-after-sale .filter-bar{ padding: var(--space-3) var(--space-4); }
}

/* 动效偏好：减少动画用户关闭过渡/动画 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
#page-after-sale *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   12. 实用工具
   ============================================================ */
#page-after-sale .flex{ display: flex; }
#page-after-sale .flex-between{ display: flex; align-items: center; justify-content: space-between; }
#page-after-sale .mt-3{ margin-top: var(--space-3); }
#page-after-sale .mt-4{ margin-top: var(--space-4); }
#page-after-sale .divider{
  height: 1px; background: var(--border-color); margin: var(--space-3) 0;
}
#page-after-sale .scrollbar::-webkit-scrollbar{ width: 6px; height: 6px; }
#page-after-sale .scrollbar::-webkit-scrollbar-thumb{ background: var(--border-strong); border-radius: 3px; }
#page-after-sale .scrollbar::-webkit-scrollbar-track{ background: transparent; }

/* ===== 售后/交货进度 tab 切换(加强高亮) ===== */
#page-after-sale #tab-btn-as, #page-after-sale #tab-btn-dp{
  padding: 7px 18px; border-radius: 8px; border: none; cursor: pointer;
  background: transparent; color: var(--text-secondary); font-size: 13px;
  transition: all .15s;
}
#page-after-sale #tab-btn-as:hover, #page-after-sale #tab-btn-dp:hover{ color: var(--text-primary); background: rgba(148,163,184,0.12); }
#page-after-sale #tab-btn-as.active, #page-after-sale #tab-btn-dp.active{
  background: var(--primary);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(59,130,246,0.35);
}

/* ===== 响应式断点 ===== */
/* 大屏 (>=1600): 7 KPI一行 + 三列图表, 内容铺满(已max 1920) */
@media (min-width: 1600px) {
#page-after-sale .kpi-grid{ grid-template-columns: repeat(7, 1fr) !important; gap: 14px; }
#page-after-sale .charts-row{ grid-template-columns: 1.4fr 1fr 0.9fr !important; }
}
/* 中等屏 (1280-1599): 4+3布局, 2+1 图表 */
@media (min-width: 1280px) and (max-width: 1599px) {
#page-after-sale .kpi-grid{ grid-template-columns: repeat(4, 1fr) !important; gap: 12px; }
#page-after-sale .kpi.main{ grid-column: span 1 !important; }
#page-after-sale .charts-row{ grid-template-columns: 1fr 1fr !important; }
#page-after-sale .appeal-card-wrapper{ grid-column: span 2 !important; }
}
/* 平板 (1024-1279): 2列KPI, 单列图表 */
@media (min-width: 1024px) and (max-width: 1279px) {
#page-after-sale .kpi-grid{ grid-template-columns: repeat(2, 1fr) !important; gap: 12px; }
#page-after-sale .kpi.main{ grid-column: span 2 !important; }
#page-after-sale .charts-row{ grid-template-columns: 1fr !important; }
}
/* 手机/小屏 (<1024): 全单列堆叠, 抽屉全宽, 筛选条换行 */
@media (max-width: 1023px) {
#page-after-sale .kpi-grid{ grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
#page-after-sale .kpi{ padding: 14px !important; }
#page-after-sale .kpi-amount{ font-size: 20px !important; }
#page-after-sale .kpi.main .kpi-amount{ font-size: 22px !important; }
#page-after-sale .kpi-label{ font-size: 11px !important; }
#page-after-sale .charts-row{ grid-template-columns: 1fr !important; gap: 12px !important; }
#page-after-sale .filter-bar{ flex-wrap: wrap; gap: 8px !important; }
#page-after-sale .dropdown-panel{ min-width: 240px !important; max-height: 280px !important; }
#page-after-sale .drawer{ width: 100% !important; }
#page-after-sale .page-header{ padding: 12px 16px !important; }
#page-after-sale .page-header h1{ font-size: 16px !important; }
#page-after-sale .page-header h1 .breadcrumb{ display: none !important; }
#page-after-sale .segmented button{ padding: 5px 10px !important; font-size: 12px !important; }
#page-after-sale .table-wrap{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
#page-after-sale .table-wrap table{ min-width: 600px; }
}
/* 超小屏 (<640): KPI单列 */
@media (max-width: 639px) {
#page-after-sale .kpi-grid{ grid-template-columns: 1fr !important; }
#page-after-sale .kpi.main{ grid-column: span 1 !important; }
}

/* ===== 售后自定义日期筛选器 (毛玻璃日历) ===== */
#page-after-sale .as3-custom-wrap{ position: relative; }
#page-after-sale .as3-custom-btn{
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 12px; border-radius: 8px; cursor: pointer;
  background: var(--bg-inset); border: 1px solid var(--border-color);
  color: var(--text-secondary); font-size: 12.5px;
  transition: all .15s;
}
#page-after-sale .as3-custom-btn:hover{ border-color: var(--primary); color: var(--primary); }
#page-after-sale .as3-custom-btn.active{ background: var(--primary); border-color: var(--primary); color: #fff; }
#page-after-sale .as3-calendar{
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 1600;
  width: 300px; padding: 14px;
  background: rgba(30, 41, 59, 0.97);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  box-shadow: 0 14px 40px rgba(0,0,0,.45);
  display: none;
}
#page-after-sale .as3-calendar.open{ display: block; }
#page-after-sale .as3-cal-head{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
#page-after-sale .as3-cal-nav{
  width: 26px; height: 26px; border-radius: 6px; border: none; cursor: pointer;
  background: var(--bg-inset); color: var(--text-secondary); font-size: 15px;
}
#page-after-sale .as3-cal-nav:hover{ color: var(--text-primary); background: var(--bg-card-hover); }
#page-after-sale .as3-cal-month{ font-size: 13px; font-weight: 600; color: var(--text-primary); }
#page-after-sale .as3-cal-week{ display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 4px; }
#page-after-sale .as3-cal-week span{ text-align: center; font-size: 10.5px; color: var(--text-tertiary); padding: 3px 0; }
#page-after-sale .as3-cal-grid{ display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
#page-after-sale .as3-cal-day{
  aspect-ratio: 1; border: none; border-radius: 7px; cursor: pointer;
  background: transparent; color: var(--text-secondary); font-size: 12px;
  font-variant-numeric: tabular-nums;
}
#page-after-sale .as3-cal-day:hover{ background: var(--bg-card-hover); color: var(--text-primary); }
#page-after-sale .as3-cal-day.other{ color: var(--text-disabled); }
#page-after-sale .as3-cal-day.today{ color: var(--primary); font-weight: 600; }
#page-after-sale .as3-cal-day.in-range{ background: rgba(59,130,246,.18); color: #93c5fd; }
#page-after-sale .as3-cal-day.start, #page-after-sale .as3-cal-day.end{
  background: var(--primary); color: #fff; font-weight: 600;
}
#page-after-sale .as3-cal-hint{ margin: 8px 0 4px; font-size: 11px; color: var(--text-tertiary); min-height: 16px; }
#page-after-sale .as3-cal-foot{ display: flex; gap: 8px; margin-top: 10px; }
#page-after-sale .as3-cal-btn{
  flex: 1; padding: 8px 0; border-radius: 8px; border: none; cursor: pointer;
  background: var(--bg-inset); color: var(--text-secondary); font-size: 12.5px;
}
#page-after-sale .as3-cal-btn:hover{ color: var(--text-primary); }
#page-after-sale .as3-cal-btn.primary{ background: var(--primary); color: #fff; font-weight: 600; }
#page-after-sale .as3-cal-btn.primary:hover{ background: var(--primary-hover); }

/* ===== 2026-08-19 前端整改 ===== */
/* KPI卡 hover 浮动动画 */
#page-after-sale .kpi {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
#page-after-sale .kpi:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0,0,0,.38), 0 0 0 1px rgba(59,130,246,.25);
  border-color: var(--primary-border);
  background: var(--bg-card-hover);
}
#page-after-sale .kpi.main:hover { transform: translateY(-3px); }

/* 货主对比 / 商品售后排行 表格: 单元格居中 + 列宽平均分配 */
#page-after-sale table.aftersale th,
#page-after-sale table.aftersale td {
  text-align: center !important;
  padding: 9px 8px;
}
#page-after-sale table.aftersale th { font-weight: 500; }
#page-after-sale table.aftersale .shipper { justify-content: center; }
#page-after-sale table.aftersale .shipper span[title] {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
/* 商品表/货主表 固定布局下让弹性列平均 */
#page-after-sale #shipperTable, #page-after-sale #prodTable { table-layout: fixed; }

/* 商品分页控件 */
#prodPagination button.pg {
  padding: 5px 12px; border-radius: 6px; border: 1px solid var(--border-color);
  background: var(--bg-inset); color: var(--text-secondary); font-size: 12px; cursor: pointer;
  transition: all .15s;
}
#prodPagination button.pg:hover:not(:disabled) { color: var(--text-primary); border-color: var(--primary); }
#prodPagination button.pg:disabled { opacity: .4; cursor: default; }
#prodPagination span { font-size: 12px; color: var(--text-secondary); }

/* [fix-2026-08-25] 交货进度日历状态: 全齐=绿点 / 缺货=红数字徽章 */
#page-after-sale .as3-cal-day.dp-cal-ok{ background: rgba(16,185,129,.14); }
#page-after-sale .as3-cal-day.dp-cal-short{ background: rgba(239,68,68,.16); color: #f87171; font-weight: 600; }
#page-after-sale .as3-cal-day .dp-cal-badge{ display:block; margin-top:1px; font-size:9px; line-height:1; }
#page-after-sale .as3-cal-day .dp-cal-badge-ok{ width:6px; height:6px; margin:2px auto 0; border-radius:50%; background:#34d399; }
#page-after-sale .as3-cal-day .dp-cal-badge-short{ color:#f87171; font-weight:700; }
#page-after-sale .as3-cal-day.start .dp-cal-badge-ok{ background:#fff; }
#page-after-sale .as3-cal-day.start .dp-cal-badge-short{ color:#fff; }