/* =========================================================
   海川电商工作台 UI 样式  v2.0
   风格：方案B · 清爽办公（白色侧栏 + 线框卡片，延续海川蓝）
   用法：<link rel="stylesheet" href="haichuan-ui.css">
   所有类名以 hc- 开头，颜色/字号/间距统一用下方变量
   ========================================================= */

/* ---------- 1. 设计变量（只改这里即可全局换肤） ---------- */
:root {
  /* 品牌色（取自海川电商 Logo） */
  --hc-primary: #002E9B;        /* 海川深蓝：侧栏、标题、主按钮、主数据 */
  --hc-primary-hover: #00227A;
  --hc-accent: #00A5FE;         /* 天空蓝：进行中、次级高亮 */
  --hc-accent-ink: #04122E;     /* 天空蓝底上的文字 */
  --hc-primary-soft: #F0F4FF;   /* 浅蓝底：人员汇总块、数字徽标 */
  --hc-primary-soft-2: #EAF1FF; /* 浅蓝标签底 */

  /* 中性色 */
  --hc-bg: #F5F6F7;             /* 页面底色 */
  --hc-surface: #FFFFFF;        /* 卡片 */
  --hc-surface-muted: #F7F8FA;  /* 卡片内次级块 */
  --hc-border: #DEE0E3;         /* 卡片线框、分隔线 */
  --hc-divider: #F0F1F2;
  --hc-text: #1F2329;           /* 正文 */
  --hc-text-2: #373C43;         /* 次级正文 */
  --hc-text-3: #646A73;         /* 辅助说明（最浅的文字色，不要再浅） */

  /* 侧栏 */
  --hc-side-bg: #FFFFFF;
  --hc-side-text: #1F2329;
  --hc-side-sub: #646A73;
  --hc-side-label: #8F959E;
  --hc-side-hover: #F2F3F5;
  --hc-side-active: #EAF1FF;    /* 选中菜单：浅蓝底 + 海川蓝字 */

  /* 状态色 */
  --hc-ok: #1A7F45;             /* 正向文字：增长、完成 */
  --hc-ok-dot: #4ADE80;         /* 连接正常小圆点 */
  --hc-info-text: #00639B;
  --hc-info-soft: #E5F6FF;
  --hc-warn: #F76707;           /* 落后/预警 填充色 */
  --hc-warn-text: #B34700;      /* 落后/逾期 文字色 */
  --hc-warn-soft: #FFF0E5;
  --hc-badge: #FF8A3D;          /* 侧栏数量角标 */
  --hc-badge-ink: #1A0B00;
  --hc-alert-dot: #E8590C;      /* 顶栏通知红点 */

  /* 字体与字号 */
  --hc-font: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Helvetica Neue", sans-serif;
  --hc-fs-xs: 12px;   /* 辅助说明、表头、标签 */
  --hc-fs-sm: 13px;   /* 指标名、链接 */
  --hc-fs-md: 14px;   /* 正文默认 */
  --hc-fs-lg: 15px;   /* 卡片标题 */
  --hc-fs-xl: 20px;   /* 问候语 / 页面大标题 */
  --hc-fs-2xl: 16px;  /* 顶栏页面标题 */
  --hc-fs-stat: 22px; /* 次级统计数字 */
  --hc-fs-kpi: 28px;  /* 核心指标数字 */

  /* 圆角 */
  --hc-r-sm: 6px;     /* 菜单项、输入框、按钮 */
  --hc-r-md: 6px;     /* 卡片内块、列表行 */
  --hc-r-lg: 8px;     /* 卡片 */
  --hc-r-tag: 4px;    /* 标签 */
  --hc-r-pill: 999px; /* 头像等圆形 */

  /* 阴影 */
  --hc-shadow-card: none;       /* 卡片不用阴影，用 1px 线框 */
  --hc-shadow-pop: 0 6px 20px rgba(31, 35, 41, 0.12); /* 浮层：提示、抽屉 */

  /* 尺寸 */
  --hc-side-w: 200px;
  --hc-gap: 16px;     /* 卡片之间 */
  --hc-pad-page: 20px 24px 40px;
  --hc-pad-card: 16px 18px;
}

/* ---------- 2. 基础 ---------- */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--hc-font);
  font-size: var(--hc-fs-md);
  line-height: 1.5;
  color: var(--hc-text);
  background: var(--hc-bg);
}
a { color: var(--hc-primary); text-decoration: none; }
a:hover { color: var(--hc-primary-hover); }
h1, h2, h3, p { margin: 0; }
button, input, select { font: inherit; }
.hc-num { font-variant-numeric: tabular-nums; }       /* 所有数字列都加 */
.hc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hc-icon { width: 18px; height: 18px; flex: none; }

/* ---------- 3. 页面骨架：左侧栏 + 右内容 ---------- */
.hc-app { min-height: 100vh; display: flex; }
.hc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hc-content { padding: var(--hc-pad-page); display: flex; flex-direction: column; gap: var(--hc-gap); }

/* ---------- 4. 侧栏 ---------- */
.hc-sidebar {
  width: var(--hc-side-w); flex: none;
  background: var(--hc-side-bg); border-right: 1px solid var(--hc-border);
  padding: 0 8px 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.hc-brand { display: flex; align-items: center; gap: 10px; height: 56px; margin: 0 -8px; padding: 0 16px; border-bottom: 1px solid var(--hc-border); }
.hc-brand img { width: 32px; height: 32px; }
.hc-brand-name { display: block; font-size: 15px; font-weight: 700; color: var(--hc-text); }
.hc-brand-sub { display: block; font-size: var(--hc-fs-xs); color: var(--hc-side-label); }

.hc-nav { display: flex; flex-direction: column; gap: 2px; }
.hc-nav-label { font-size: var(--hc-fs-xs); color: var(--hc-side-label); padding: 14px 10px 4px; }
.hc-nav-label:first-child { padding-top: 6px; }
.hc-nav-item {
  display: flex; align-items: center; gap: 10px;
  min-height: 38px; padding: 0 12px; border-radius: var(--hc-r-sm);
  color: var(--hc-side-text);
}
.hc-nav-item:hover { background: var(--hc-side-hover); color: var(--hc-text); }
.hc-nav-item.is-active { background: var(--hc-side-active); color: var(--hc-primary); font-weight: 600; }
.hc-nav-item > span:first-of-type { flex: 1; }
.hc-nav-sub {
  display: flex; align-items: center;
  min-height: 34px; padding: 0 12px 0 40px; border-radius: var(--hc-r-sm);
  color: var(--hc-side-sub);
}
.hc-nav-sub:hover { background: var(--hc-side-hover); color: var(--hc-text); }
.hc-nav-sub.is-active { background: var(--hc-side-active); color: var(--hc-primary); font-weight: 600; }
.hc-badge {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: var(--hc-badge); color: var(--hc-badge-ink);
  font-size: var(--hc-fs-xs); font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.hc-side-status {
  margin: auto -8px 0; padding: 12px 16px 0; border-top: 1px solid var(--hc-border);
  color: var(--hc-text-3);
  font-size: var(--hc-fs-xs); display: flex; flex-direction: column; gap: 8px;
}
.hc-side-status div { display: flex; align-items: center; gap: 8px; }
.hc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hc-ok-dot); flex: none; }
.hc-dot--warn { background: var(--hc-warn); }

/* ---------- 5. 顶栏 ---------- */
.hc-header {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
  min-height: 56px; padding: 8px 24px; background: var(--hc-surface);
  border-bottom: 1px solid var(--hc-border);
}
.hc-header-title { flex: 1 1 260px; display: flex; flex-direction: column; }
.hc-breadcrumb { font-size: var(--hc-fs-xs); color: var(--hc-text-3); }
.hc-page-title { font-size: var(--hc-fs-2xl); font-weight: 600; color: var(--hc-text); }
.hc-search {
  flex: 0 1 280px; display: flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 10px; border-radius: var(--hc-r-sm);
  border: 1px solid var(--hc-border); background: var(--hc-surface); color: var(--hc-text-3);
}
.hc-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--hc-text); outline: none; }
.hc-icon-btn {
  position: relative; width: 40px; height: 40px; border: 0; border-radius: var(--hc-r-sm);
  background: transparent; color: var(--hc-text-2);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.hc-icon-btn:hover { background: var(--hc-side-hover); }
.hc-icon-btn .hc-alert { position: absolute; top: 10px; right: 11px; width: 8px; height: 8px; border-radius: 50%; background: var(--hc-alert-dot); }
.hc-user { display: flex; align-items: center; gap: 10px; line-height: 1.3; }
.hc-user-name { display: block; font-weight: 600; }
.hc-user-role { display: block; font-size: var(--hc-fs-xs); color: var(--hc-text-3); }
.hc-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  background: var(--hc-accent); color: var(--hc-accent-ink);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700;
}
.hc-avatar--primary { background: var(--hc-primary); color: #FFF; }

/* 页面问候行 */
.hc-page-intro { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.hc-greeting { font-size: var(--hc-fs-xl); font-weight: 600; }
.hc-page-meta { font-size: var(--hc-fs-sm); color: var(--hc-text-3); }

/* ---------- 6. 指标卡 KPI ---------- */
.hc-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.hc-kpi {
  background: var(--hc-surface); border: 1px solid var(--hc-border); border-radius: var(--hc-r-lg);
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 6px;
}
.hc-kpi-label { font-size: var(--hc-fs-sm); color: var(--hc-text-3); }
.hc-kpi-value { font-size: var(--hc-fs-kpi); font-weight: 700; letter-spacing: -0.5px; color: var(--hc-primary); font-variant-numeric: tabular-nums; }
.hc-kpi-note { font-size: var(--hc-fs-xs); color: var(--hc-text-3); }
/* 每页最多 1 个重点卡（实心品牌蓝） */
.hc-kpi.is-hero { background: var(--hc-primary); border-color: var(--hc-primary); color: #FFF; }
.hc-kpi.is-hero .hc-kpi-label { color: #D6E2FF; }
.hc-kpi.is-hero .hc-kpi-value { color: #FFF; }
.hc-kpi.is-hero .hc-kpi-note { color: #D6E2FF; }

/* ---------- 7. 卡片与栅格 ---------- */
.hc-row { display: flex; flex-wrap: wrap; gap: var(--hc-gap); }
.hc-card {
  flex: 1 1 320px; min-width: 0;
  background: var(--hc-surface); border: 1px solid var(--hc-border); border-radius: var(--hc-r-lg);
  padding: var(--hc-pad-card);
  display: flex; flex-direction: column; gap: 12px;
}
.hc-card--wide { flex: 2 1 560px; }   /* 主内容卡，占 2/3 */
.hc-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.hc-card-head > div:first-child { flex: 1 1 240px; }
.hc-card-title { font-size: var(--hc-fs-lg); font-weight: 600; color: var(--hc-text); }
.hc-card-sub { display: block; font-size: var(--hc-fs-xs); color: var(--hc-text-3); }
.hc-card-foot {
  margin-top: auto; padding-top: 12px; border-top: 1px solid var(--hc-border);
  display: flex; justify-content: space-between; font-size: var(--hc-fs-sm); color: var(--hc-text-3);
}

/* 卡片内的浅蓝汇总块（如负责人汇总） */
.hc-summary { flex: 1 1 200px; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--hc-r-md); background: var(--hc-primary-soft); }
.hc-summary-value { margin-left: auto; font-size: var(--hc-fs-stat); font-weight: 700; color: var(--hc-primary); font-variant-numeric: tabular-nums; }

/* ---------- 8. 按钮 ---------- */
.hc-btn {
  height: 32px; padding: 0 16px; border: 1px solid transparent; border-radius: var(--hc-r-sm);
  font-weight: 500; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.hc-btn--primary { background: var(--hc-primary); color: #FFF; }
.hc-btn--primary:hover { background: var(--hc-primary-hover); }
.hc-btn--secondary { background: var(--hc-surface); border-color: var(--hc-border); color: var(--hc-text); }
.hc-btn--secondary:hover { background: var(--hc-side-hover); }
.hc-btn--ghost { background: transparent; color: var(--hc-primary); }
.hc-btn--ghost:hover { background: var(--hc-primary-soft); }
.hc-btn--sm { height: 28px; padding: 0 12px; }
.hc-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* 切换按钮组（按品类 / 按负责人） */
/* 下划线标签页样式 */
.hc-seg { display: inline-flex; gap: 20px; border-bottom: 1px solid var(--hc-border); }
.hc-seg button { height: 34px; padding: 0 2px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--hc-text-3); cursor: pointer; }
.hc-seg button:hover { color: var(--hc-text); }
.hc-seg button.is-active { color: var(--hc-primary); border-bottom-color: var(--hc-primary); font-weight: 600; }

/* ---------- 9. 标签 ---------- */
.hc-tag { display: inline-block; font-size: var(--hc-fs-xs); padding: 2px 8px; border-radius: var(--hc-r-tag); white-space: nowrap; }
.hc-tag--ok { background: var(--hc-primary-soft-2); color: var(--hc-primary); }   /* 超进度 / 正常 */
.hc-tag--info { background: var(--hc-info-soft); color: var(--hc-info-text); }    /* 略落后 / 进行中 */
.hc-tag--warn { background: var(--hc-warn-soft); color: var(--hc-warn-text); }    /* 落后 / 逾期 */
.hc-tag--neutral { background: var(--hc-surface-muted); color: var(--hc-text-3); }/* 已结束 / 停用 */

/* ---------- 10. 进度条（完成率） ---------- */
.hc-progress { position: relative; height: 6px; border-radius: 3px; background: #EFF0F1; }
.hc-progress-fill { height: 100%; border-radius: 3px; background: var(--hc-primary); }
.hc-progress-fill--info { background: var(--hc-accent); }
.hc-progress-fill--warn { background: var(--hc-warn); }
/* 时间进度竖线：style="left: 81%" */
.hc-progress-marker { position: absolute; top: -4px; width: 2px; height: 14px; background: var(--hc-text); opacity: 0.8; }
/* 一行：名称 | 负责人 | 进度条 | 百分比 | 标签 */
.hc-progress-row { display: grid; grid-template-columns: 64px 44px minmax(0, 1fr) 52px 64px; align-items: center; gap: 12px; }

/* ---------- 11. 表格 ---------- */
.hc-table-wrap { overflow-x: auto; }
.hc-table { width: 100%; min-width: 560px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.hc-table th { padding: 10px 12px; font-size: var(--hc-fs-sm); font-weight: 500; color: var(--hc-text-3); text-align: left; background: var(--hc-bg); }
.hc-table td { padding: 10px 12px; border-bottom: 1px solid var(--hc-divider); }
.hc-table tbody tr:hover { background: var(--hc-surface-muted); }
.hc-table .is-num { text-align: right; }
.hc-table .is-key { display: inline-block; min-width: 44px; padding: 2px 8px; border-radius: var(--hc-r-tag); background: var(--hc-primary-soft-2); color: var(--hc-primary); font-weight: 700; text-align: center; }

/* ---------- 12. 表单 ---------- */
.hc-field { display: flex; flex-direction: column; gap: 4px; font-size: var(--hc-fs-xs); color: var(--hc-text-3); }
.hc-input, .hc-select {
  height: 32px; padding: 0 10px; border: 1px solid var(--hc-border); border-radius: var(--hc-r-sm);
  background: var(--hc-surface); font-size: var(--hc-fs-md); color: var(--hc-text);
}
.hc-input:focus, .hc-select:focus { outline: none; border-color: var(--hc-primary); box-shadow: 0 0 0 2px var(--hc-primary-soft-2); }
.hc-check { width: 16px; height: 16px; accent-color: var(--hc-primary); }

/* ---------- 13. 列表 ---------- */
/* 排班 / 时间段行 */
.hc-slot { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--hc-r-md); background: var(--hc-surface-muted); }
.hc-slot-time { width: 96px; color: var(--hc-text-2); font-variant-numeric: tabular-nums; }
.hc-slot-name { flex: 1; }
.hc-slot-state { font-size: var(--hc-fs-xs); color: var(--hc-text-3); display: inline-flex; align-items: center; gap: 6px; }
.hc-slot.is-live { background: var(--hc-accent); color: var(--hc-accent-ink); font-weight: 700; }
.hc-slot.is-live .hc-slot-time, .hc-slot.is-live .hc-slot-state { color: var(--hc-accent-ink); }
.hc-slot.is-live .hc-dot { background: var(--hc-accent-ink); }
/* 待办行 */
.hc-todo { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--hc-divider); cursor: pointer; }
.hc-todo .hc-check { margin-top: 2px; }
.hc-todo-title { display: block; font-weight: 500; }
.hc-todo-due { display: block; font-size: var(--hc-fs-xs); color: var(--hc-text-3); }

/* ---------- 14. 文字颜色工具类（放最后，可覆盖组件默认色） ---------- */
.hc-muted { color: var(--hc-text-3); }
.hc-text-ok { color: var(--hc-ok); }
.hc-text-warn { color: var(--hc-warn-text); }

/* ---------- 15. 窄屏（平板/小窗口） ---------- */
@media (max-width: 900px) {
  .hc-app { flex-direction: column; }
  .hc-sidebar { width: auto; }
  .hc-header, .hc-content { padding-left: 16px; padding-right: 16px; }
}

/* UI refinement · 2026-10-25. Shared presentation only. */
:root {
  --hc-bg: #F3F5F9; --hc-surface-muted: #F7F9FC;
  --hc-border: #E2E7F0; --hc-divider: #EDF0F5;
  --hc-text: #19263D; --hc-text-2: #3C4B62; --hc-text-3: #66748A;
  --hc-side-label: #6C7C93; --hc-side-hover: #F4F7FC;
  --hc-r-sm: 8px; --hc-r-md: 10px; --hc-r-lg: 14px; --hc-r-tag: 5px;
  --hc-fs-2xl: 21px; --hc-fs-stat: 25px; --hc-fs-kpi: 32px;
  --hc-pad-page: 26px 30px 40px; --hc-pad-card: 22px;
  --hc-gap: 20px;
}
body { -webkit-font-smoothing: antialiased; }
button, a, input, select, summary { -webkit-tap-highlight-color: transparent; }
:where(button,a,input,select,summary,[tabindex]):focus-visible { outline: 3px solid var(--hc-accent); outline-offset: 3px; }
.hc-sidebar { position: sticky; top: 0; height: 100dvh; padding: 0 12px 20px; gap: 16px; overflow-y: auto; }
.hc-brand { height: 86px; margin: 0; border-bottom: 1px solid var(--hc-divider); }
.hc-brand-name { font-size: 17px; letter-spacing: .3px; }
.hc-brand-sub { margin-top: 3px; font-size: 11px; }
.hc-nav { gap: 5px; }
.hc-nav-label { letter-spacing: 1px; padding-top: 22px; padding-bottom: 7px; font-size: 11px; }
.hc-nav-item { min-height: 42px; }
.hc-nav-sub { min-height: 40px; }
.hc-nav-item.is-active,.hc-nav-sub.is-active { box-shadow: inset 3px 0 var(--hc-primary); }
.hc-side-status { margin: auto 0 0; border-top-color: var(--hc-divider); line-height: 1.6; }
.hc-header { min-height: 86px; padding: 14px 30px; gap: 20px; }
.hc-header-title { flex: 1 1 190px; gap: 3px; }
.hc-breadcrumb { font-size: 11px; }
.hc-page-title { font-weight: 700; letter-spacing: -.4px; }
.hc-search { height: 38px; flex-basis: 260px; border-color: transparent; background: var(--hc-surface-muted); }
.hc-search:focus-within { border-color: var(--hc-primary); background: var(--hc-surface); }
.hc-search input { font-size: 12px; }
.hc-user { padding-left: 18px; border-left: 1px solid var(--hc-border); }
.hc-avatar { width: 36px; height: 36px; background: var(--hc-primary-soft); color: var(--hc-primary); }
.hc-user-name { font-size: 13px; }.hc-user-role { font-size: 11px; margin-top: 3px; }
.hc-greeting { font-size: 19px; letter-spacing: -.3px; }
.hc-page-intro { gap: 8px 24px; }.hc-page-meta { font-size: 12px; }
.hc-kpis { gap: 16px; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); }
.hc-kpi { padding: 20px 22px; gap: 8px; box-shadow: 0 2px 3px rgba(25,38,61,.02); }
.hc-kpi-label { font-size: 12px; font-weight: 500; }
.hc-kpi-value { line-height: 1.2; letter-spacing: -1px; }
.hc-kpi-note { font-size: 11px; line-height: 1.65; }
.hc-kpi.is-hero { box-shadow: 0 5px 14px rgba(0,46,155,.13); }
.hc-card { gap: 18px; box-shadow: 0 2px 3px rgba(25,38,61,.02); }
.hc-card-title { font-size: 16px; font-weight: 700; letter-spacing: -.2px; }
.hc-card-sub { margin-top: 5px; line-height: 1.7; }
.hc-card-head { gap: 12px; }.hc-card-foot { gap: 12px; flex-wrap: wrap; font-size: 11px; padding-top: 15px; border-color: var(--hc-divider); }
.hc-btn { height: 36px; font-size: 12px; transition: background .15s, border-color .15s; }
.hc-btn--sm { height: 32px; }.hc-btn--primary:hover { color: white; }
.hc-input,.hc-select { height: 36px; font-size: 13px; }.hc-field { gap: 6px; }
.hc-seg { gap: 3px; border: 1px solid var(--hc-border); padding: 3px; border-radius: 9px; background: var(--hc-surface-muted); flex-wrap: wrap; }
.hc-seg button { border: 0; margin: 0; padding: 0 13px; height: 29px; border-radius: 6px; font-size: 12px; }
.hc-seg button.is-active { background: var(--hc-surface); box-shadow: 0 1px 4px rgba(25,38,61,.10); }
.hc-table th { padding: 12px; font-size: 11px; font-weight: 600; background: var(--hc-surface-muted); border-bottom: 1px solid var(--hc-border); }
.hc-table td { padding: 13px 12px; font-size: 12px; }
.hc-table .is-key { padding: 3px 9px; font-size: 13px; }
.hc-table tbody tr:last-child td { border-bottom: 0; }
.hc-table-wrap { border: 1px solid var(--hc-border); border-radius: 10px; }
.hc-tag { font-size: 11px; line-height: 1.6; }
.hc-summary { padding: 14px 16px; }.hc-summary-value { font-size: 22px; }
.hc-progress { height: 5px; }.hc-progress-marker { height: 13px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }

/* Apple-inspired workbench · selected design · 2026-10-25 */
:root {
 --hc-primary:#0071E3;--hc-primary-hover:#005BB7;--hc-primary-soft:#EAF3FF;--hc-primary-soft-2:#EAF3FF;
 --hc-accent:#409CFF;--hc-accent-ink:#102F53;--hc-bg:#F5F5F7;--hc-surface:#FFF;--hc-surface-muted:#F5F5F7;
 --hc-border:#E5E5EA;--hc-divider:#EFEFF2;--hc-text:#1D1D1F;--hc-text-2:#424245;--hc-text-3:#6E6E73;
 --hc-side-bg:#EFEFF2;--hc-side-text:#1D1D1F;--hc-side-sub:#58585E;--hc-side-label:#6E6E73;
 --hc-side-hover:#E5E5EA;--hc-side-active:#0071E3;--hc-warn:#BA7516;--hc-warn-text:#9B5B00;--hc-warn-soft:#FFF4E5;
 --hc-font:-apple-system,BlinkMacSystemFont,"SF Pro Display","PingFang SC","Microsoft YaHei",sans-serif;
 --hc-r-sm:9px;--hc-r-md:13px;--hc-r-lg:20px;--hc-r-tag:5px;--hc-gap:24px;
 --hc-fs-kpi:34px;--hc-pad-page:24px 32px 40px;--hc-pad-card:24px;
}
body {letter-spacing:-.15px}
.hc-sidebar {background:var(--hc-side-bg);border-right:1px solid var(--hc-border)}
.hc-brand {border-bottom:0;height:88px}.hc-brand img {border-radius:10px;background:#FFF;padding:3px}
.hc-brand-name {font-size:16px;letter-spacing:0}.hc-brand-sub {color:var(--hc-text-3);letter-spacing:0}
.hc-nav-label {font-weight:600;letter-spacing:0}.hc-nav-item .hc-icon {color:var(--hc-primary)}
.hc-nav-item.is-active,.hc-nav-sub.is-active {background:var(--hc-primary);color:#FFF;box-shadow:0 2px 5px #0071E31A;font-weight:500}
.hc-nav-item.is-active .hc-icon {color:inherit}.hc-nav-item:hover,.hc-nav-sub:hover {color:var(--hc-text)}
.hc-nav-item.is-active:hover,.hc-nav-sub.is-active:hover {background:var(--hc-primary-hover);color:#FFF}
.hc-header {background:var(--hc-bg);border-bottom:0;min-height:90px;padding:18px 32px}
.hc-page-title {font-size:25px;font-weight:650;letter-spacing:-.8px}.hc-header-title {gap:6px}
.hc-search {background:#EDEDF1;border:0;height:36px;border-radius:10px}.hc-user {border:0}
.hc-avatar {background:#E4E4EA;color:var(--hc-text);font-weight:500}
.hc-content > .hc-page-intro {padding-bottom:0}.hc-greeting {font-size:18px;font-weight:500}
.hc-card {border:0;border-radius:20px;box-shadow:0 3px 18px #1D1D1F05;gap:20px}
.hc-card-title {font-size:17px;font-weight:600;letter-spacing:-.4px}
.hc-kpi {border:0;padding:22px 24px;box-shadow:0 3px 16px #1D1D1F05;border-radius:18px}
.hc-kpi-value {color:var(--hc-text);font-weight:600;letter-spacing:-1px}
.hc-kpi.is-hero {background:var(--hc-surface);box-shadow:0 3px 16px #1D1D1F05;border:0}
.hc-kpi.is-hero .hc-kpi-value {color:var(--hc-text)}
.hc-kpi.is-hero .hc-kpi-label,.hc-kpi.is-hero .hc-kpi-note {color:var(--hc-text-3)}
#rep .hc-kpi:first-child .hc-kpi-value {color:var(--hc-primary)}
.hc-btn {border-radius:9px;font-weight:500}.hc-btn--primary {box-shadow:0 1px 2px #0071E319}
.hc-btn--secondary {background:var(--hc-surface);border-color:var(--hc-border)}
.hc-input,.hc-select {border-radius:9px;border-color:#DCDCE1;background:#FFF}
.hc-seg {background:#ECECF0;border:0;padding:3px;border-radius:9px}
.hc-seg button {border:0;border-radius:7px;color:var(--hc-text-2);padding:0 13px}
.hc-seg button.is-active {background:#FFF;color:var(--hc-text);box-shadow:0 1px 4px #00000015;font-weight:500}
.hc-table-wrap {border:0;border-radius:0}.hc-table th {background:#FFF;border-bottom:1px solid var(--hc-border);font-weight:500}
.hc-table td {padding:14px 12px;border-bottom:1px solid var(--hc-divider);font-size:13px}
.hc-table .is-key {background:var(--hc-primary-soft);color:var(--hc-primary);font-weight:600}
.hc-table tbody tr:hover {background:var(--hc-surface-muted)}
.hc-table tr.wb-prow:hover td {background:var(--hc-surface-muted)}
.hc-table tbody tr.wb-sub td {background:var(--hc-surface-muted);color:var(--hc-text)}
.hc-table tbody tr.wb-total td {background:var(--hc-primary-soft);color:var(--hc-text)}
.hc-table tbody tr.wb-mine td {background:var(--hc-primary-soft)}
.hc-table tr.wb-mine td:first-child {box-shadow:inset 3px 0 var(--hc-primary)}
.hc-table tr.wb-mine .wb-rate {color:var(--hc-primary)}
.wb-pdot {background:var(--hc-text-3)}.wb-me {background:var(--hc-primary)}
.wb-psum {background:var(--hc-surface-muted);border-radius:12px}
.wb-psum .hc-avatar {background:#E4E4EA;color:var(--hc-text)}.wb-psum .hc-summary-value {color:var(--hc-text)}
.wb-psum.is-mine {background:var(--hc-primary-soft);box-shadow:inset 0 0 0 1px #0071E333}
.wb-cat {border:0;border-radius:14px;background:var(--hc-surface-muted);box-shadow:none;padding:18px}
.wb-cat-rate {color:var(--hc-text);font-weight:600}.wb-cat-owner {color:var(--hc-text-3)}
.wb-care-quote {background:var(--hc-surface-muted);border-radius:14px}
.wb-count .wb-tile {border:0;background:var(--hc-surface-muted);border-radius:12px}
.wb-count .wb-tile.is-active {background:var(--hc-primary-soft);box-shadow:inset 0 0 0 1px #0071E333}
.wb-count b {color:var(--hc-text);font-weight:600}.wb-count b.hc-text-warn {color:var(--hc-warn-text)}
.wb-scroll .hc-table thead th {background:var(--hc-surface);z-index:2}
.hc-formula {border-radius:10px}.hc-filters {border-radius:12px}
.hc-card-foot {font-size:12px}.hc-progress {background:#E8E8ED}

/* =========================================================
   E 版 · 海川蓝侧栏（年轻活力数据风）· 2026-11-01
   来源：海川蓝侧栏UI规范.md（v3/E）。只改外观，不改结构和逻辑。
   生效条件：<html class="hc-e">。去掉这个 class 即恢复旧外观。
   变量用 html.hc-e（优先级高于 :root）；组件外观用 :where(html.hc-e)（不额外加优先级），
   页面内 <style> 里针对具体模块的微调仍然优先；页面里旧的苹果风主题段已用 html:not(.hc-e) 包住。
   ========================================================= */
html.hc-e {
  /* 规范 token（与 preview.html 一致） */
  --nav:#102B56;--nav-hover:#1D3D69;--nav-muted:#AEC1DD;--blue:#1464F6;--blue-hover:#0750CF;--cyan:#38D9DF;--coral:#FA735C;--purple:#7957D6;
  --ink:#142A48;--muted:#5D6F88;--bg:#F3F6FB;--surface:#FFFFFF;--soft:#EAF1FF;--line:#E2E9F3;--green:#087B64;--green-bg:#E5F5EF;
  --amber:#915600;--amber-bg:#FFF3D9;--coral-dark:#B7402D;--chart-grid:#E5EBF4;--hero-soft:#BBD3FF;
  --shadow:0 8px 28px #102B5608;--hero-shadow:0 12px 28px #1464F61A;
  --font:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
  --r-sm:6px;--r-md:10px;--r-lg:16px;--r-xl:20px;--nav-width:208px;--header:68px;--page-pad:28px;--transition:160ms;
  /* 映射到现有 --hc-* 变量：页面里所有引用 --hc-* 的地方自动换成 E 版 */
  --hc-primary:var(--blue);--hc-primary-hover:var(--blue-hover);--hc-primary-soft:var(--soft);--hc-primary-soft-2:var(--soft);
  --hc-accent:var(--cyan);--hc-accent-ink:var(--nav);
  --hc-bg:var(--bg);--hc-surface:var(--surface);--hc-surface-muted:#F6F8FC;--hc-border:var(--line);--hc-divider:#EDF1F7;
  --hc-text:var(--ink);--hc-text-2:#33465F;--hc-text-3:var(--muted);
  --hc-side-bg:var(--nav);--hc-side-text:var(--nav-muted);--hc-side-sub:var(--nav-muted);--hc-side-label:#8EA4C4;
  --hc-side-hover:var(--nav-hover);--hc-side-active:var(--blue);--hc-side-w:var(--nav-width);
  --hc-ok:var(--green);--hc-ok-dot:#3FD08F;--hc-info-text:var(--blue-hover);--hc-info-soft:var(--soft);
  --hc-warn:var(--coral);--hc-warn-text:var(--amber);--hc-warn-soft:var(--amber-bg);--hc-danger:var(--coral-dark);--hc-success:var(--green);
  --hc-badge:var(--coral);--hc-badge-ink:#2A0D07;--hc-alert-dot:var(--coral);
  --hc-font:var(--font);
  --hc-r-sm:var(--r-md);--hc-r-md:12px;--hc-r-lg:var(--r-xl);--hc-r-tag:var(--r-sm);
  --hc-shadow-pop:0 12px 32px #102B561F;
  --hc-gap:16px;--hc-pad-page:20px var(--page-pad) 40px;--hc-pad-card:24px;
  --hc-fs-2xl:26px;--hc-fs-kpi:30px;
  --hc-ring-time:var(--cyan);
}
html.hc-e body { font-family: var(--font); color: var(--ink); background: var(--bg); letter-spacing: 0; }
:where(html.hc-e) :where(button,a,input,select,summary,[tabindex]):focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
/* 规范要求青色焦点框；青色在白底上对比度只有 1.7:1（不达 3:1），所以内容区用鲜蓝、藏蓝侧栏里用青色（8.1:1） */
:where(html.hc-e) .hc-sidebar :where(a,button,[tabindex]):focus-visible { outline-color: var(--cyan); }

/* ---- 侧栏：藏蓝底，选中鲜蓝 + 右侧青色短标记 ---- */
:where(html.hc-e) .hc-sidebar { background: var(--nav); border-right: 0; color: var(--nav-muted); scrollbar-color: var(--nav-hover) transparent; }
:where(html.hc-e) .hc-brand { border-bottom: 1px solid var(--nav-hover); }
:where(html.hc-e) .hc-brand img { background: var(--surface); border-radius: var(--r-md); }
:where(html.hc-e) .hc-brand-name { color: var(--surface); font-size: 20px; font-weight: 700; }
:where(html.hc-e) .hc-brand-sub { color: var(--nav-muted); }
:where(html.hc-e) .hc-nav-label { color: var(--hc-side-label); font-weight: 600; letter-spacing: 1px; }
:where(html.hc-e) .hc-nav-item, :where(html.hc-e) .hc-nav-sub { position: relative; color: var(--nav-muted); border-radius: var(--r-md); transition: background var(--transition), color var(--transition); }
:where(html.hc-e) .hc-nav-item { min-height: 44px; }
:where(html.hc-e) .hc-nav-item .hc-icon { color: inherit; }
:where(html.hc-e) .hc-nav-item:hover, :where(html.hc-e) .hc-nav-sub:hover { background: var(--nav-hover); color: var(--surface); }
:where(html.hc-e) .hc-nav-item.is-active, :where(html.hc-e) .hc-nav-sub.is-active { background: var(--blue); color: var(--surface); font-weight: 600; box-shadow: none; }
:where(html.hc-e) .hc-nav-item.is-active:hover, :where(html.hc-e) .hc-nav-sub.is-active:hover { background: var(--blue-hover); color: var(--surface); }
:where(html.hc-e) .hc-nav-item.is-active::after, :where(html.hc-e) .hc-nav-sub.is-active::after { content: ""; position: absolute; right: 10px; top: 50%; width: 4px; height: 16px; margin-top: -8px; border-radius: 2px; background: var(--cyan); }
:where(html.hc-e) .hc-nav-item.is-active .wb-chev { margin-right: 10px; }
:where(html.hc-e) .hc-side-status { border-top: 1px solid var(--nav-hover); color: var(--nav-muted); }
:where(html.hc-e) .hc-side-status .wb-side-ver { color: var(--hc-side-label); }
:where(html.hc-e) .wb-backdrop { background: #102B568C; }

/* ---- 顶栏：白底细线 ---- */
:where(html.hc-e) .hc-header { background: var(--surface); border-bottom: 1px solid var(--line); min-height: var(--header); padding: 12px var(--page-pad); }
:where(html.hc-e) .hc-breadcrumb { color: var(--muted); font-size: 12px; }
:where(html.hc-e) .hc-page-title { font-size: 26px; font-weight: 700; letter-spacing: -.5px; color: var(--ink); }
:where(html.hc-e) .hc-search { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md); height: 40px; color: var(--muted); }
:where(html.hc-e) .hc-search:focus-within { background: var(--surface); border-color: var(--blue); box-shadow: 0 0 0 3px var(--soft); }
:where(html.hc-e) .hc-user { border-left: 1px solid var(--line); }
:where(html.hc-e) .hc-avatar { background: var(--soft); color: var(--blue); font-weight: 700; }
:where(html.hc-e) .hc-greeting { font-size: 20px; font-weight: 700; color: var(--ink); }

/* ---- 面板与指标卡：白底、轻边框、轻投影 ---- */
:where(html.hc-e) .hc-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow); }
:where(html.hc-e) .hc-card-title { font-size: 16px; font-weight: 700; color: var(--ink); letter-spacing: 0; }
:where(html.hc-e) .hc-card-sub, :where(html.hc-e) .hc-card-foot { color: var(--muted); }
:where(html.hc-e) .hc-kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); }
:where(html.hc-e) .hc-kpi-label { color: var(--muted); font-size: 13px; }
:where(html.hc-e) .hc-kpi-value { color: var(--ink); font-size: 30px; font-weight: 700; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
:where(html.hc-e) .hc-kpi-note { color: var(--muted); font-size: 12px; }
:where(html.hc-e) .hc-kpi.is-hero { background: var(--blue); border-color: var(--blue); box-shadow: var(--hero-shadow); }
:where(html.hc-e) .hc-kpi.is-hero .hc-kpi-value { color: var(--surface); }
:where(html.hc-e) .hc-kpi.is-hero .hc-kpi-label, :where(html.hc-e) .hc-kpi.is-hero .hc-kpi-note { color: var(--hero-soft); }
:where(html.hc-e) .hc-summary { background: var(--soft); border-radius: var(--r-lg); }
:where(html.hc-e) .hc-summary-value { color: var(--blue); }

/* ---- 按钮：高 36，圆角 10 ---- */
:where(html.hc-e) .hc-btn { height: 36px; padding: 0 12px; border-radius: var(--r-md); font-size: 13px; font-weight: 600; box-shadow: none; transition: background var(--transition), border-color var(--transition); }
:where(html.hc-e) .hc-btn--sm { height: 32px; }
:where(html.hc-e) .hc-btn--primary { background: var(--blue); color: var(--surface); }
:where(html.hc-e) .hc-btn--primary:hover { background: var(--blue-hover); color: var(--surface); }
:where(html.hc-e) .hc-btn--secondary { background: var(--surface); border-color: var(--line); color: var(--ink); }
:where(html.hc-e) .hc-btn--secondary:hover { background: var(--soft); border-color: var(--muted); }
:where(html.hc-e) .hc-btn--ghost { color: var(--blue); }
:where(html.hc-e) .hc-btn--ghost:hover { background: var(--soft); }
:where(html.hc-e) .hc-btn:disabled { opacity: 1; background: var(--bg); border-color: var(--line); color: var(--muted); }

/* ---- 输入框：高 40（筛选条里保持 36 以免挤压），焦点蓝边 + 浅蓝外圈 ---- */
:where(html.hc-e) .hc-input, :where(html.hc-e) .hc-select { height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--ink); font-size: 14px; }
:where(html.hc-e) .hc-input::placeholder { color: var(--muted); }
:where(html.hc-e) .hc-input:hover, :where(html.hc-e) .hc-select:hover { border-color: var(--muted); }
:where(html.hc-e) .hc-input:focus, :where(html.hc-e) .hc-select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--soft); }
:where(html.hc-e) :is(.hc-filters, .wb-toolbar, .wb-div-line, .wb-cov, .wb-oq) :is(.hc-input, .hc-select) { height: 36px; }
:where(html.hc-e) .hc-field { color: var(--muted); font-size: 12px; }
:where(html.hc-e) .hc-check { accent-color: var(--blue); }

/* ---- Tab / 切换：选中蓝字 + 3px 下划线 ---- */
:where(html.hc-e) .hc-seg { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 0; gap: 4px; }
:where(html.hc-e) .hc-seg button { height: 36px; padding: 0 12px; border: 0; border-radius: var(--r-sm) var(--r-sm) 0 0; background: transparent; color: var(--muted); font-size: 13px; font-weight: 500; box-shadow: none; }
:where(html.hc-e) .hc-seg button:hover { background: var(--soft); color: var(--ink); }
:where(html.hc-e) .hc-seg button.is-active { background: transparent; color: var(--blue); font-weight: 700; box-shadow: inset 0 -3px 0 var(--blue); }

/* ---- 标签：12px，圆角 6，带语义色 ---- */
:where(html.hc-e) .hc-tag { font-size: 12px; line-height: 1.5; padding: 2px 8px; border-radius: var(--r-sm); font-weight: 600; }
:where(html.hc-e) .hc-tag--ok { background: var(--green-bg); color: var(--green); }
:where(html.hc-e) .hc-tag--info { background: var(--soft); color: var(--blue-hover); }
:where(html.hc-e) .hc-tag--warn { background: var(--amber-bg); color: var(--amber); }
:where(html.hc-e) .hc-tag--neutral { background: var(--bg); color: var(--muted); }
:where(html.hc-e) .hc-text-ok { color: var(--green); }
:where(html.hc-e) .hc-text-warn { color: var(--amber); }

/* ---- 进度条 ---- */
:where(html.hc-e) .hc-progress { background: var(--chart-grid); }
:where(html.hc-e) .hc-progress-fill { background: var(--blue); }
:where(html.hc-e) .hc-progress-fill--info { background: var(--cyan); }
:where(html.hc-e) .hc-progress-fill--warn { background: var(--coral); }
:where(html.hc-e) .hc-progress-marker { background: var(--ink); }

/* ---- 表格：表头 32，正文行 40，悬停浅蓝 ---- */
:where(html.hc-e) .hc-table-wrap { border: 1px solid var(--line); border-radius: var(--r-lg); }
:where(html.hc-e) .hc-table th { height: 32px; padding: 6px 12px; background: var(--bg); color: var(--muted); font-size: 12px; font-weight: 600; border-bottom: 1px solid var(--line); }
:where(html.hc-e) .hc-table td { height: 40px; padding: 8px 12px; font-size: 13px; color: var(--ink); border-bottom: 1px solid var(--line); }
:where(html.hc-e) .hc-table tbody tr:hover, :where(html.hc-e) .hc-table tr.wb-prow:hover td { background: var(--soft); }
:where(html.hc-e) .hc-table .is-key { background: var(--soft); color: var(--blue); }
:where(html.hc-e) .wb-scroll .hc-table thead th { background: var(--bg); }

/* ---- 筛选区、说明块、弹窗、提示 ---- */
:where(html.hc-e) .hc-filters { background: var(--bg); border-radius: var(--r-lg); }
:where(html.hc-e) .hc-formula { background: var(--bg); border-radius: var(--r-md); color: var(--muted); }
:where(html.hc-e) .wb-mdlg-mask { background: #102B568C; }
:where(html.hc-e) .wb-mdlg { border-radius: var(--r-xl); padding: 24px; box-shadow: var(--hc-shadow-pop); }
:where(html.hc-e) .wb-toast { background: var(--ink); }
:where(html.hc-e) .wb-tip::after { background: var(--ink); }
:where(html.hc-e) .wb-loadbar::before { background: var(--cyan); }
:where(html.hc-e) .wb-tabbar .is-active { color: var(--blue); }

/* ---- 窄屏（≤900px）：沿用现有抽屉，只换外观，不加 72px 折叠 ---- */
@media (max-width: 900px) {
  :where(html.hc-e) .hc-header { background: var(--surface); padding: 10px 16px; min-height: 60px; }
  :where(html.hc-e) .hc-page-title { font-size: 20px; }
  :where(html.hc-e) .hc-sidebar { background: var(--nav); }
}
@media (max-width: 760px) {
  :where(html.hc-e) .hc-input, :where(html.hc-e) .hc-select { font-size: 16px; }
  :where(html.hc-e) .hc-card { border-radius: var(--r-lg); }
}

/* ---- E 版 第3批：首页 / 完成率英雄区 + 登录页（仍只在 html.hc-e 下生效） ---- */
/* 单一口径时的主指标：鲜蓝英雄区（每页只出现一次）。数字全部来自现有接口，不新增计算 */
html.hc-e .hc-apple-overview { grid-template-columns: minmax(0,1.18fr) minmax(0,1fr); gap: 16px; }
html.hc-e .hc-apple-primary { background: var(--blue); color: var(--surface); border-radius: var(--r-xl); box-shadow: var(--hero-shadow); padding: 24px 28px; }
html.hc-e .hc-apple-primary .hc-kpi-label { color: var(--hero-soft); font-size: 13px; font-weight: 600; }
html.hc-e .hc-apple-value { color: var(--surface); font-size: 58px; line-height: 1.1; letter-spacing: -2px; font-weight: 700; margin: 8px 0; }
html.hc-e .hc-apple-caption, html.hc-e .hc-apple-caption.hc-text-warn { color: var(--surface); font-weight: 600; }
html.hc-e .hc-apple-meta { color: var(--hero-soft); }
html.hc-e .hc-apple-primary .wb-ring circle { stroke: #FFFFFF2E; }
html.hc-e .hc-apple-primary .wb-ring path[stroke*="--hc-primary"] { stroke: var(--surface); }
html.hc-e .hc-apple-primary .wb-ring path[stroke*="--hc-warn"] { stroke: var(--coral); }
html.hc-e .hc-apple-primary .wb-ring text { fill: var(--surface); }
html.hc-e .hc-apple-primary .wb-ring text:first-of-type { fill: var(--hero-soft); }
html.hc-e .hc-apple-primary .wb-ring-leg { color: var(--hero-soft); }
html.hc-e .hc-apple-primary .wb-ring-leg i[style*="--hc-primary"] { background: var(--surface) !important; }
html.hc-e .hc-apple-stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow); }
html.hc-e .hc-apple-stat b { color: var(--ink); font-size: 30px; font-weight: 700; letter-spacing: -.5px; }
/* 多事业部（口径不同）时：各事业部白色面板并排，主数字放大，不做蓝色大块以免暗示主次 */
html.hc-e .wb-divcard-head strong { color: var(--ink); }
html.hc-e .wb-divcard-rate { font-size: 48px; letter-spacing: -1.5px; color: var(--ink); font-variant-numeric: tabular-nums; }
html.hc-e .wb-divcard-ok { color: var(--green); font-weight: 600; }
html.hc-e .wb-trio > div { background: var(--bg); border-radius: var(--r-md); }
html.hc-e .wb-trio b { color: var(--ink); }
html.hc-e .wb-cat { background: var(--bg); border-radius: var(--r-lg); }
html.hc-e .wb-cat-rate { color: var(--ink); font-weight: 700; }
html.hc-e .wb-care-quote { background: var(--soft); color: var(--ink); border-radius: var(--r-lg); }
html.hc-e .wb-care-item .hc-icon { color: var(--blue); }
html.hc-e .wb-count .wb-tile { background: var(--bg); border-radius: var(--r-lg); }
html.hc-e .wb-count .wb-tile.is-active { background: var(--soft); box-shadow: inset 0 0 0 1px var(--blue); }
html.hc-e .wb-count b { color: var(--ink); }
html.hc-e #mockCard { background: var(--amber-bg); color: var(--amber); }
@media (max-width: 1100px) { html.hc-e .hc-apple-value { font-size: 48px; } }
@media (max-width: 760px) {
  html.hc-e .hc-apple-overview { grid-template-columns: minmax(0,1fr); }
  html.hc-e .hc-apple-primary { padding: 20px; border-radius: var(--r-lg); }
  html.hc-e .hc-apple-value { font-size: 44px; }
  html.hc-e .hc-apple-stat b { font-size: 24px; }
  html.hc-e .wb-divcard-rate { font-size: 40px; }
}

/* 登录页：左侧藏蓝品牌区 + 右侧浅灰底白卡 */
html.hc-e .wb-login-side { background: var(--nav); color: var(--nav-muted); }
html.hc-e .wb-login-side::after { display: none; }
html.hc-e .wb-login-side h2 { color: var(--surface); font-weight: 700; }
html.hc-e .wb-login-side p { color: var(--nav-muted); }
html.hc-e .wb-login-side .hc-brand-name { color: var(--surface); }
html.hc-e .wb-login-side .hc-brand-sub, html.hc-e .wb-login-side .hc-login-eyebrow { color: var(--nav-muted); }
html.hc-e .hc-login-features > span { color: var(--cyan); }
html.hc-e .hc-login-features b { color: var(--surface); }
html.hc-e .hc-login-features small { color: var(--nav-muted); }
html.hc-e .wb-login-main { background: var(--bg); }
html.hc-e .wb-login-card { border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow); }
html.hc-e .wb-login-card .hc-card-title { color: var(--ink); font-weight: 700; }
html.hc-e .wb-login-card .hc-login-eyebrow { color: var(--blue); font-weight: 600; }
html.hc-e .wb-login-card .hc-input { height: 44px; background: var(--surface); border-color: var(--line); }
html.hc-e .wb-login-card .hc-btn { height: 44px; font-size: 14px; }
/* 手机上双环图例换行，避免把页面撑出横向滚动（原版就有 6px 溢出） */
@media (max-width: 480px) { html.hc-e .wb-ring-leg { flex-wrap: wrap; justify-content: center; white-space: normal; gap: 2px 10px; max-width: 128px; } }

/* 对比度复核（WCAG AA）后的微调：浅蓝底上的小字改用深一级蓝；蓝底英雄区小字用白色（hero-soft 对蓝底仅 3.3:1） */
html.hc-e .hc-table .is-key, html.hc-e .hc-table tr.wb-total td, html.hc-e .hc-table tbody tr.wb-total td { color: var(--blue-hover); }
html.hc-e .hc-tag--info { color: var(--blue-hover); }
html.hc-e .hc-apple-primary .hc-kpi-label, html.hc-e .hc-apple-meta, html.hc-e .hc-apple-primary .wb-ring-leg,
html.hc-e .hc-kpi.is-hero .hc-kpi-label, html.hc-e .hc-kpi.is-hero .hc-kpi-note { color: var(--surface); }
html.hc-e .hc-apple-primary .wb-ring text:first-of-type { fill: var(--surface); }