/* ZBOSS Shared Styles v2.3
 * 职责：全部样式定义
 * 约束：builder 和 ui.js 中禁止内联 style="..."
 * 动态值通过 data-* 属性 + 属性选择器渲染
 */

:root {
  /* Background */
  --bg-page: #f0f2f5;
  --bg-card: #ffffff;
  --bg-hover: #f8f9fa;

  /* Text */
  --text-primary: #1a1a2e;
  --text-secondary: #6b7280;
  --text-tertiary: #9ca3af;

  /* Brand */
  --primary: #2563eb;
  --primary-light: #eff6ff;

  /* Status */
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --info: #3b82f6;

  /* Board semantic colors */
  --plan: #2563eb;
  --plan-light: #dbeafe;
  --info-board: #8b5cf6;
  --info-board-light: #ede9fe;

  /* Border & Shadow */
  --border: #e5e7eb;
  --shadow: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-lg: 0 4px 12px rgba(0,0,0,0.12);

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg-page);
  color: var(--text-primary);
  line-height: 1.5;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* ===== Navigation ===== */
.top-nav {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.top-nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-md);
  display: flex;
  align-items: center;
  height: 56px;
  gap: var(--space-xl);
}

.brand-link {
  text-decoration: none;
  color: inherit;
}
.brand-link:hover {
  opacity: 0.8;
}

.brand {
  font-size: 16px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: -0.5px;
}

.nav-links {
  display: flex;
  gap: 4px;
  flex: 1;
}

.nav-version {
  font-size: 11px;
  color: var(--text-tertiary);
  white-space: nowrap;
  margin-left: auto;
  padding-left: var(--space-md);
}

.nav-link {
  padding: 8px 16px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s;
}

.nav-link:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.nav-link.active {
  background: var(--primary);
  color: #fff;
}

/* ===== Header ===== */
.page-header {
  margin-bottom: var(--space-lg);
}

.page-header h1 {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
}

.page-header .subtitle {
  color: var(--text-secondary);
  font-size: 12px;
  margin-top: var(--space-xs);
}

/* ===== Section ===== */
.section {
  margin-bottom: var(--space-lg);
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-md);
  padding-left: 12px;
  border-left: 3px solid var(--primary);
}

/* 经营总览专用 — section 头部 flex 布局 */
.section-header-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
  gap: var(--space-md);
}

/* 经营总览专用 — 去除 section-title 的默认 margin/padding */
.section-title-reset {
  margin-bottom: 0;
  padding-left: 0;
  border-left: none;
}

/* 经营总览专用 — 计数徽章 */
.badge-count {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg-hover);
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
}

/* 经营总览专用 — 空状态卡片 */
.empty-state-box {
  text-align: center;
  padding: var(--space-xl);
  color: var(--text-tertiary);
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: var(--bg-page);
}

/* 经营总览专用 — 汇总标签容器 */
.mini-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--space-md);
}

/* 经营总览专用 — 汇总徽章 */
.summary-badge {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  background: #f1f5f9;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
}

.summary-badge strong {
  color: var(--text-primary);
  font-weight: 600;
}

/* 经营总览专用 — 紧凑表格 */
.data-table.compact th {
  padding: 8px 6px;
  font-size: 12px;
}

.data-table.compact td {
  padding: 6px;
  font-size: 12px;
  white-space: nowrap;
}

.data-table.compact td.wrap {
  white-space: normal;
  overflow-wrap: break-word;
  line-height: 1.6;
}

/* ===== Cards ===== */
.card {
  background: var(--bg-card);
  border-radius: 10px;
  padding: var(--space-lg);
  box-shadow: var(--shadow);
  transition: box-shadow 0.2s;
  border: 1px solid var(--border);
}

.card:hover {
  box-shadow: var(--shadow-lg);
}

/* ===== KPI Section ===== */
#kpi-section {
  margin-bottom: var(--space-lg);
}

/* ===== KPI / 统计卡片（统一组件，双模式兼容） ===== */

/* KPI 模式网格 */
.kpi-grid,
.kpi-grid[data-mode="kpi"] {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}

.kpi-grid[data-columns="2"] { grid-template-columns: repeat(2, 1fr); }
.kpi-grid[data-columns="3"] { grid-template-columns: repeat(3, 1fr); }
.kpi-grid[data-columns="4"] { grid-template-columns: repeat(4, 1fr); }
.kpi-grid[data-columns="5"] { grid-template-columns: repeat(5, 1fr); }
.kpi-grid[data-columns="6"] { grid-template-columns: repeat(6, 1fr); }

/* 6列KPI卡片：字号22px不换行，高度对齐项目追踪卡片 */
.kpi-grid[data-columns="6"] .stat-card {
  min-height: 100px;
}
.kpi-grid[data-columns="6"] .stat-card .stat-value,
.kpi-grid[data-columns="6"] .kpi-card .kpi-value {
  font-size: 22px;
  white-space: nowrap;
}

/* 筛选模式网格 */
.filter-grid,
.stat-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

/* 统一卡片基础 */
.stat-card,
.kpi-card {
  background: var(--bg-card);
  border-radius: 10px;
  padding: 20px;
  box-shadow: var(--shadow);
  transition: box-shadow 0.2s;
  border: 1px solid var(--border);
}

.stat-card:hover,
.kpi-card:hover {
  box-shadow: var(--shadow-lg);
}

/* KPI 模式 — 顶部边框色 */
.stat-card[data-mode="kpi"],
.kpi-card {
  border-top: 3px solid transparent;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.stat-card[data-mode="kpi"][data-color="primary"],
.kpi-card[data-color="primary"] { border-top-color: var(--primary); }
.stat-card[data-mode="kpi"][data-color="success"],
.kpi-card[data-color="success"]  { border-top-color: var(--success); }
.stat-card[data-mode="kpi"][data-color="warning"],
.kpi-card[data-color="warning"]  { border-top-color: var(--warning); }
.stat-card[data-mode="kpi"][data-color="danger"],
.kpi-card[data-color="danger"]   { border-top-color: var(--danger); }
.stat-card[data-mode="kpi"][data-color="info"],
.kpi-card[data-color="info"]     { border-top-color: var(--info); }

/* 筛选模式 — 基础样式 */
.stat-card[data-mode="filter"] {
  text-align: center;
  cursor: pointer;
}

/* 筛选模式 — 激活态 */
.stat-card[data-mode="filter"].active,
.stat-card.active {
  border-color: var(--primary);
  background: var(--primary-light);
}

/* 头部布局（KPI 模式） */
.stat-card[data-mode="kpi"] .stat-header,
.kpi-card .kpi-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-md);
}

/* 标签 */
.stat-card .stat-label,
.kpi-card .kpi-label {
  font-size: 12px;
  color: var(--text-secondary);
}

/* 趋势标记 */
.stat-card .stat-trend,
.kpi-card .kpi-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 500;
}

.stat-card .stat-trend.trend-up,
.kpi-card .kpi-badge.trend-up { color: var(--success); }
.stat-card .stat-trend.trend-down,
.kpi-card .kpi-badge.trend-down { color: var(--danger); }

/* 数值 */
.stat-card .stat-value,
.kpi-card .kpi-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.stat-card .stat-value .unit,
.kpi-card .kpi-value .unit {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-secondary);
}

/* 副标题（KPI 模式） */
.stat-card[data-mode="kpi"] .stat-sub,
.kpi-card .kpi-sub {
  font-size: 11px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

/* 进度条（KPI 模式） */
.stat-card[data-mode="kpi"] .stat-progress,
.kpi-card .kpi-bar {
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}

.stat-card[data-mode="kpi"] .stat-progress-fill,
.kpi-card .kpi-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s;
}

/* 进度条 — data-progress 属性选择器 0-100（KPI 模式） */
.stat-progress-fill[data-progress="0"],
.kpi-bar-fill[data-progress="0"]  { width: 0%; }
.stat-progress-fill[data-progress="1"],
.kpi-bar-fill[data-progress="1"]  { width: 1%; }
.stat-progress-fill[data-progress="2"],
.kpi-bar-fill[data-progress="2"]  { width: 2%; }
.stat-progress-fill[data-progress="3"],
.kpi-bar-fill[data-progress="3"]  { width: 3%; }
.stat-progress-fill[data-progress="4"],
.kpi-bar-fill[data-progress="4"]  { width: 4%; }
.stat-progress-fill[data-progress="5"],
.kpi-bar-fill[data-progress="5"]  { width: 5%; }
.stat-progress-fill[data-progress="6"],
.kpi-bar-fill[data-progress="6"]  { width: 6%; }
.stat-progress-fill[data-progress="7"],
.kpi-bar-fill[data-progress="7"]  { width: 7%; }
.stat-progress-fill[data-progress="8"],
.kpi-bar-fill[data-progress="8"]  { width: 8%; }
.stat-progress-fill[data-progress="9"],
.kpi-bar-fill[data-progress="9"]  { width: 9%; }
.stat-progress-fill[data-progress="10"],
.kpi-bar-fill[data-progress="10"] { width: 10%; }
.stat-progress-fill[data-progress="11"],
.kpi-bar-fill[data-progress="11"] { width: 11%; }
.stat-progress-fill[data-progress="12"],
.kpi-bar-fill[data-progress="12"] { width: 12%; }
.stat-progress-fill[data-progress="13"],
.kpi-bar-fill[data-progress="13"] { width: 13%; }
.stat-progress-fill[data-progress="14"],
.kpi-bar-fill[data-progress="14"] { width: 14%; }
.stat-progress-fill[data-progress="15"],
.kpi-bar-fill[data-progress="15"] { width: 15%; }
.stat-progress-fill[data-progress="16"],
.kpi-bar-fill[data-progress="16"] { width: 16%; }
.stat-progress-fill[data-progress="17"],
.kpi-bar-fill[data-progress="17"] { width: 17%; }
.stat-progress-fill[data-progress="18"],
.kpi-bar-fill[data-progress="18"] { width: 18%; }
.stat-progress-fill[data-progress="19"],
.kpi-bar-fill[data-progress="19"] { width: 19%; }
.stat-progress-fill[data-progress="20"],
.kpi-bar-fill[data-progress="20"] { width: 20%; }
.stat-progress-fill[data-progress="21"],
.kpi-bar-fill[data-progress="21"] { width: 21%; }
.stat-progress-fill[data-progress="22"],
.kpi-bar-fill[data-progress="22"] { width: 22%; }
.stat-progress-fill[data-progress="23"],
.kpi-bar-fill[data-progress="23"] { width: 23%; }
.stat-progress-fill[data-progress="24"],
.kpi-bar-fill[data-progress="24"] { width: 24%; }
.stat-progress-fill[data-progress="25"],
.kpi-bar-fill[data-progress="25"] { width: 25%; }
.stat-progress-fill[data-progress="26"],
.kpi-bar-fill[data-progress="26"] { width: 26%; }
.stat-progress-fill[data-progress="27"],
.kpi-bar-fill[data-progress="27"] { width: 27%; }
.stat-progress-fill[data-progress="28"],
.kpi-bar-fill[data-progress="28"] { width: 28%; }
.stat-progress-fill[data-progress="29"],
.kpi-bar-fill[data-progress="29"] { width: 29%; }
.stat-progress-fill[data-progress="30"],
.kpi-bar-fill[data-progress="30"] { width: 30%; }
.stat-progress-fill[data-progress="31"],
.kpi-bar-fill[data-progress="31"] { width: 31%; }
.stat-progress-fill[data-progress="32"],
.kpi-bar-fill[data-progress="32"] { width: 32%; }
.stat-progress-fill[data-progress="33"],
.kpi-bar-fill[data-progress="33"] { width: 33%; }
.stat-progress-fill[data-progress="34"],
.kpi-bar-fill[data-progress="34"] { width: 34%; }
.stat-progress-fill[data-progress="35"],
.kpi-bar-fill[data-progress="35"] { width: 35%; }
.stat-progress-fill[data-progress="36"],
.kpi-bar-fill[data-progress="36"] { width: 36%; }
.stat-progress-fill[data-progress="37"],
.kpi-bar-fill[data-progress="37"] { width: 37%; }
.stat-progress-fill[data-progress="38"],
.kpi-bar-fill[data-progress="38"] { width: 38%; }
.stat-progress-fill[data-progress="39"],
.kpi-bar-fill[data-progress="39"] { width: 39%; }
.stat-progress-fill[data-progress="40"],
.kpi-bar-fill[data-progress="40"] { width: 40%; }
.stat-progress-fill[data-progress="41"],
.kpi-bar-fill[data-progress="41"] { width: 41%; }
.stat-progress-fill[data-progress="42"],
.kpi-bar-fill[data-progress="42"] { width: 42%; }
.stat-progress-fill[data-progress="43"],
.kpi-bar-fill[data-progress="43"] { width: 43%; }
.stat-progress-fill[data-progress="44"],
.kpi-bar-fill[data-progress="44"] { width: 44%; }
.stat-progress-fill[data-progress="45"],
.kpi-bar-fill[data-progress="45"] { width: 45%; }
.stat-progress-fill[data-progress="46"],
.kpi-bar-fill[data-progress="46"] { width: 46%; }
.stat-progress-fill[data-progress="47"],
.kpi-bar-fill[data-progress="47"] { width: 47%; }
.stat-progress-fill[data-progress="48"],
.kpi-bar-fill[data-progress="48"] { width: 48%; }
.stat-progress-fill[data-progress="49"],
.kpi-bar-fill[data-progress="49"] { width: 49%; }
.stat-progress-fill[data-progress="50"],
.kpi-bar-fill[data-progress="50"] { width: 50%; }
.stat-progress-fill[data-progress="51"],
.kpi-bar-fill[data-progress="51"] { width: 51%; }
.stat-progress-fill[data-progress="52"],
.kpi-bar-fill[data-progress="52"] { width: 52%; }
.stat-progress-fill[data-progress="53"],
.kpi-bar-fill[data-progress="53"] { width: 53%; }
.stat-progress-fill[data-progress="54"],
.kpi-bar-fill[data-progress="54"] { width: 54%; }
.stat-progress-fill[data-progress="55"],
.kpi-bar-fill[data-progress="55"] { width: 55%; }
.stat-progress-fill[data-progress="56"],
.kpi-bar-fill[data-progress="56"] { width: 56%; }
.stat-progress-fill[data-progress="57"],
.kpi-bar-fill[data-progress="57"] { width: 57%; }
.stat-progress-fill[data-progress="58"],
.kpi-bar-fill[data-progress="58"] { width: 58%; }
.stat-progress-fill[data-progress="59"],
.kpi-bar-fill[data-progress="59"] { width: 59%; }
.stat-progress-fill[data-progress="60"],
.kpi-bar-fill[data-progress="60"] { width: 60%; }
.stat-progress-fill[data-progress="61"],
.kpi-bar-fill[data-progress="61"] { width: 61%; }
.stat-progress-fill[data-progress="62"],
.kpi-bar-fill[data-progress="62"] { width: 62%; }
.stat-progress-fill[data-progress="63"],
.kpi-bar-fill[data-progress="63"] { width: 63%; }
.stat-progress-fill[data-progress="64"],
.kpi-bar-fill[data-progress="64"] { width: 64%; }
.stat-progress-fill[data-progress="65"],
.kpi-bar-fill[data-progress="65"] { width: 65%; }
.stat-progress-fill[data-progress="66"],
.kpi-bar-fill[data-progress="66"] { width: 66%; }
.stat-progress-fill[data-progress="67"],
.kpi-bar-fill[data-progress="67"] { width: 67%; }
.stat-progress-fill[data-progress="68"],
.kpi-bar-fill[data-progress="68"] { width: 68%; }
.stat-progress-fill[data-progress="69"],
.kpi-bar-fill[data-progress="69"] { width: 69%; }
.stat-progress-fill[data-progress="70"],
.kpi-bar-fill[data-progress="70"] { width: 70%; }
.stat-progress-fill[data-progress="71"],
.kpi-bar-fill[data-progress="71"] { width: 71%; }
.stat-progress-fill[data-progress="72"],
.kpi-bar-fill[data-progress="72"] { width: 72%; }
.stat-progress-fill[data-progress="73"],
.kpi-bar-fill[data-progress="73"] { width: 73%; }
.stat-progress-fill[data-progress="74"],
.kpi-bar-fill[data-progress="74"] { width: 74%; }
.stat-progress-fill[data-progress="75"],
.kpi-bar-fill[data-progress="75"] { width: 75%; }
.stat-progress-fill[data-progress="76"],
.kpi-bar-fill[data-progress="76"] { width: 76%; }
.stat-progress-fill[data-progress="77"],
.kpi-bar-fill[data-progress="77"] { width: 77%; }
.stat-progress-fill[data-progress="78"],
.kpi-bar-fill[data-progress="78"] { width: 78%; }
.stat-progress-fill[data-progress="79"],
.kpi-bar-fill[data-progress="79"] { width: 79%; }
.stat-progress-fill[data-progress="80"],
.kpi-bar-fill[data-progress="80"] { width: 80%; }
.stat-progress-fill[data-progress="81"],
.kpi-bar-fill[data-progress="81"] { width: 81%; }
.stat-progress-fill[data-progress="82"],
.kpi-bar-fill[data-progress="82"] { width: 82%; }
.stat-progress-fill[data-progress="83"],
.kpi-bar-fill[data-progress="83"] { width: 83%; }
.stat-progress-fill[data-progress="84"],
.kpi-bar-fill[data-progress="84"] { width: 84%; }
.stat-progress-fill[data-progress="85"],
.kpi-bar-fill[data-progress="85"] { width: 85%; }
.stat-progress-fill[data-progress="86"],
.kpi-bar-fill[data-progress="86"] { width: 86%; }
.stat-progress-fill[data-progress="87"],
.kpi-bar-fill[data-progress="87"] { width: 87%; }
.stat-progress-fill[data-progress="88"],
.kpi-bar-fill[data-progress="88"] { width: 88%; }
.stat-progress-fill[data-progress="89"],
.kpi-bar-fill[data-progress="89"] { width: 89%; }
.stat-progress-fill[data-progress="90"],
.kpi-bar-fill[data-progress="90"] { width: 90%; }
.stat-progress-fill[data-progress="91"],
.kpi-bar-fill[data-progress="91"] { width: 91%; }
.stat-progress-fill[data-progress="92"],
.kpi-bar-fill[data-progress="92"] { width: 92%; }
.stat-progress-fill[data-progress="93"],
.kpi-bar-fill[data-progress="93"] { width: 93%; }
.stat-progress-fill[data-progress="94"],
.kpi-bar-fill[data-progress="94"] { width: 94%; }
.stat-progress-fill[data-progress="95"],
.kpi-bar-fill[data-progress="95"] { width: 95%; }
.stat-progress-fill[data-progress="96"],
.kpi-bar-fill[data-progress="96"] { width: 96%; }
.stat-progress-fill[data-progress="97"],
.kpi-bar-fill[data-progress="97"] { width: 97%; }
.stat-progress-fill[data-progress="98"],
.kpi-bar-fill[data-progress="98"] { width: 98%; }
.stat-progress-fill[data-progress="99"],
.kpi-bar-fill[data-progress="99"] { width: 99%; }
.stat-progress-fill[data-progress="100"],
.kpi-bar-fill[data-progress="100"] { width: 100%; }

.fill-success { background: var(--success); }
.fill-warning { background: var(--warning); }
.fill-danger { background: var(--danger); }

/* 筛选模式 — 金额 */
.stat-card[data-mode="filter"] .stat-amt,
.stat-card .stat-amt {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 6px;
  font-weight: 500;
}
.stat-amt .money-val {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
}
.stat-amt .unit {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-left: 2px;
}

/* 进度百分比文字 */
.progress-text {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 6px;
  text-align: right;
}

/* ===== Status Tags ===== */
.tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

/* 合同状态标签 */
.tag-dev { background: #fef3c7; color: #d97706; }
.tag-com { background: var(--primary-light); color: var(--primary); }
.tag-sig { background: #d1fae5; color: #059669; }
.tag-term { background: #fee2e2; color: #dc2626; }

/* 项目状态标签 — data-status */
.tag[data-status="开拓"] { background: #fef3c7; color: #d97706; border: 1px solid rgba(217,119,6,0.25); }
.tag[data-status="已定"] { background: var(--primary-light); color: var(--primary); border: 1px solid rgba(37,99,235,0.25); }
.tag[data-status="已签"] { background: #d1fae5; color: #059669; border: 1px solid rgba(5,150,105,0.25); }
.tag[data-status="意向"] { background: #eff6ff; color: #1d4ed8; border: 1px solid rgba(29,78,216,0.25); }
.tag[data-status="商机"] { background: #f9fafb; color: #4b5563; border: 1px solid rgba(75,85,99,0.25); }

/* 状态指示条（存量管理表格第一列） */
.status-indicator {
  display: inline-block;
  width: 3px;
  height: 14px;
  border-radius: 2px;
  margin-right: 6px;
  vertical-align: middle;
}
.status-indicator[data-status="已签"] { background: var(--success); }
.status-indicator[data-status="已定"] { background: var(--primary); }
.status-indicator[data-status="开拓"] { background: var(--warning); }
.status-indicator[data-status="—"] { background: var(--text-tertiary); }

/* 旧 left-bar 样式保留兼容，新行使用背景色 */
.left-bar { display: none; }
.left-bar.yellow { background:#f59e0b; }
.left-bar.red { background:#ef4444; }
.left-bar.both { background:linear-gradient(180deg,#f59e0b 50%,#ef4444 50%); }

/* ===== Tabs ===== */
.board-tabs, .period-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.tab-btn {
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: #fff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.tab-btn:hover {
  background: var(--bg-hover);
  border-color: var(--primary);
}

.tab-btn.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);
}

/* ===== Filter Bar ===== */
.filter-bar {
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
  background: var(--bg-card);
  padding: 12px 16px;
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.filter-bar select {
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  font-size: 13px;
  min-width: 140px;
  background: #fff;
  transition: border-color 0.2s;
}

.filter-bar select:hover,
.filter-bar select:focus {
  border-color: var(--primary);
  outline: none;
}

/* ===== Table ===== */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: fixed;
  word-wrap: break-word;
}

.data-table th {
  text-align: left;
  padding: 12px 12px;
  background: #f1f5f9;
  font-weight: 600;
  color: var(--text-secondary);
  border-bottom: 2px solid #cbd5e1;
  font-size: 12px;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
}

.data-table td {
  padding: 12px 12px;
  border-bottom: 1px solid #e2e8f0;
  vertical-align: top;
  overflow-wrap: break-word;
}

/* 斑马纹 */
.data-table tbody tr:nth-child(even) {
  background: #fafbfc;
}

.data-table tr:hover {
  background: #f0f5ff;
}

/* ===== Table Wrap ===== */
.table-wrap {
  overflow-x: auto;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  box-shadow: var(--shadow);
}

/* ===== Number Alignment ===== */
.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* th.num 需与 td.num 对齐 */
.data-table th.num { text-align: right; }

/* ===== 经营总览 KPI 子元素 ===== */
.kpi-title { font-size:14px; color:var(--text-secondary); margin-bottom:12px; }
.kpi-values { margin-bottom:12px; }
.kpi-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; }
.kpi-actual { font-size:20px; font-weight:700; color:var(--text-primary); }
.kpi-progress { margin-top:8px; }
.progress-text { font-size:12px; color:var(--text-secondary); margin-top:6px; text-align:right; }

/* ===== 人员管理组件 ===== */
.person-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.person-card { background:var(--bg-card); border-radius:10px; padding:20px; box-shadow:var(--shadow); border:1px solid var(--border); }
.person-header { display:flex; align-items:center; gap:12px; margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--border); }
.person-avatar { width:40px; height:40px; border-radius:50%; color:white; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:16px; }
.person-info { flex:1; }
.person-name { font-weight:600; font-size:15px; }
.person-role { font-size:12px; color:var(--text-tertiary); }
.person-stats { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.stat-item { text-align:center; }
.stat-val { font-size:16px; font-weight:700; color:var(--text-primary); }
.stat-lbl { font-size:11px; color:var(--text-tertiary); margin-top:2px; }

/* ===== 趋势图组件（v2 重构：双图并排 + 面积图 + 数据点） ===== */

.trend-section { margin-bottom: var(--space-lg); }

/* 顶部微卡片 */
.trend-mini-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.trend-mini-card {
  background: var(--bg-card);
  border-radius: 10px;
  padding: 20px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  border-top: 3px solid var(--primary);
  transition: transform 0.2s, box-shadow 0.2s;
}

.trend-mini-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

.trend-mini-card[data-color="primary"]   { border-top-color: var(--primary); }
.trend-mini-card[data-color="success"]   { border-top-color: var(--success); }
.trend-mini-card[data-color="warning"]   { border-top-color: var(--warning); }
.trend-mini-card[data-color="info"]      { border-top-color: var(--info); }

.trend-mini-label {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 8px;
  font-weight: 500;
}

.trend-mini-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}

.trend-mini-trend {
  font-size: 13px;
  font-weight: 600;
}

.trend-mini-trend.up   { color: var(--success); }
.trend-mini-trend.down { color: var(--danger); }
.trend-mini-trend.flat { color: var(--text-tertiary); }

.trend-mini-sub {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
}

/* 双图并排 */
.trend-pair {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.trend-chart-wrap {
  background: var(--bg-card);
  border-radius: 10px;
  padding: 20px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}

.trend-chart-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.trend-svg {
  width: 100%;
  height: 300px;
  overflow: visible;
}

/* 面积图 hover 效果 */
.trend-area { transition: fill-opacity 0.2s; }
.trend-area:hover { fill-opacity: 0.12; }

/* 折线 hover 效果 */
.trend-line { transition: opacity 0.2s, stroke-width 0.2s; }
.trend-line:hover { opacity: 1; stroke-width: 3.5; }

/* 数据点 */
.trend-dot { transition: r 0.2s; cursor: pointer; }
.trend-dot:hover { r: 6; }

/* 图例 */
.trend-legend {
  display: flex;
  gap: 16px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; }

/* 趋势洞察 */
.trend-insight {
  background: linear-gradient(135deg, #f0f5ff 0%, #e0f2fe 100%);
  border-radius: 10px;
  padding: 20px;
  border: 1px solid #bfdbfe;
}

.trend-insight-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 10px;
}

.trend-insight-body {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.7;
}

/* 响应式：移动端单列 */
@media (max-width: 768px) {
  .trend-mini-cards { grid-template-columns: repeat(2, 1fr); }
  .trend-pair { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .trend-mini-cards { grid-template-columns: 1fr; }
}

/* ===== 排名表 ===== */
.rank-table { width:100%; border-collapse:collapse; font-size:13px; }
.rank-table th { background:#f8fafc; padding:10px 12px; text-align:left; font-weight:600; color:var(--text-secondary); border-bottom:2px solid var(--border); white-space:nowrap; }
.rank-table td { padding:10px 12px; border-bottom:1px solid var(--border); }
.rank-table tr:hover { background:#f8fafc; }
.rank-table .num { text-align:right; font-variant-numeric:tabular-nums; }
.rank-table .rank { font-weight:700; color:var(--primary); width:40px; }
.rank-table .name { font-weight:600; }

/* ===== 经营总览周卡片 ===== */
.week-grid { display:grid; gap:16px; margin-bottom:24px; }
.week-grid[data-columns="2"] { grid-template-columns:repeat(2,1fr); }
.week-grid[data-columns="4"] { grid-template-columns:repeat(4,1fr); }
.week-grid[data-columns="5"] { grid-template-columns:repeat(5,1fr); }
.week-grid[data-columns="6"] { grid-template-columns:repeat(6,1fr); }

.week-card {
  background:var(--bg-card);
  border-radius:10px;
  padding:20px;
  box-shadow:var(--shadow);
  border:1px solid var(--border);
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* 左侧色条 */
.week-card[data-border="primary"] { border-left:4px solid var(--primary); }
.week-card[data-border="success"] { border-left:4px solid var(--success); }
.week-card[data-border="warning"] { border-left:4px solid var(--warning); }
.week-card[data-border="danger"] { border-left:4px solid var(--danger); }
.week-card[data-border="info"] { border-left:4px solid var(--info); }
.week-card[data-border="secondary"] { border-left:4px solid var(--text-tertiary); }

/* 卡片头部：标题 */
.week-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.week-title {
  font-size:13px;
  font-weight:600;
  color:var(--text-secondary);
}
.week-tag {
  font-size:11px;
  padding:2px 8px;
  border-radius:4px;
  background:var(--bg-hover);
  color:var(--text-tertiary);
  font-weight:500;
}

/* 数据行 */
.week-row {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
}
.week-row .row-label {
  font-size:12px;
  color:var(--text-tertiary);
}
.week-row .row-value {
  font-size:20px;
  font-weight:700;
  color:var(--text-primary);
  font-variant-numeric:tabular-nums;
}
.week-row .row-unit {
  font-size:12px;
  font-weight:400;
  color:var(--text-secondary);
  margin-left:2px;
}
.week-row .row-meta {
  font-size:11px;
  color:var(--text-tertiary);
  margin-left:4px;
}

/* 大数字模式（存量管理金额） */
.week-row.large .row-value {
  font-size:24px;
}

/* 小数字模式（项目追踪个数） */
.week-row.small .row-value {
  font-size:18px;
}

/* 颜色状态 */
.week-row.up .row-value { color: var(--success); }
.week-row.down .row-value { color: var(--danger); }
.week-row.neutral .row-value { color: var(--info); }

/* ===== A/B 本周变化对比样式 ===== */

/* 方案区块 */
.ab-section { margin-bottom: 24px; }
.ab-section:last-child { margin-bottom: 0; }
.ab-section-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
  padding-left: 4px;
}

/* ---- 方案 A：板块聚合 ---- */
.ab-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }

.ab-card {
  background: var(--bg-card);
  border-radius: 10px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  overflow: hidden;
}
.ab-gh { border-top: 3px solid var(--primary); }
.ab-xx { border-top: 3px solid var(--info); }

.ab-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--border);
}
.ab-icon { font-size: 20px; }
.ab-title { font-size: 16px; font-weight: 600; color: var(--text-primary); flex: 1; }

.ab-card-body { padding: 14px 18px 18px; }
.ab-block + .ab-block { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--border); }
.ab-block-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 10px;
}
.ab-block-row { display: flex; flex-wrap: wrap; gap: 10px; }
.ab-block-row-large { gap: 12px; }
.ab-block-row-large .ab-tag {
  font-size: 14px;
  padding: 6px 14px;
}

/* ---- 方案 B：紧凑矩阵 ---- */
.ab-compact {
  background: var(--bg-card);
  border-radius: 10px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  overflow: hidden;
}
.ab-compact-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.ab-compact-title { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.ab-compact-sub { font-size: 12px; color: var(--text-tertiary); }

.ab-compact-body { padding: 12px 16px 16px; }
.ab-compact-row + .ab-compact-row { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); }
.ab-compact-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.ab-compact-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  min-width: 90px;
  flex-shrink: 0;
  padding-top: 2px;
}
.ab-compact-data {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  flex: 1;
}
.ab-compact-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.ab-compact-group-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  margin-right: 4px;
}
.ab-compact-sep {
  color: var(--border);
  font-size: 14px;
  user-select: none;
}

/* 通用小标签 */
.ab-tag {
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 500;
  display: inline-block;
}
.ab-tag.up   { color: var(--success); background: #f0fdf4; }
.ab-tag.down { color: var(--danger);  background: #fef2f2; }
.ab-tag.neutral { color: var(--info); background: #eff6ff; }

.ab-kpi {
  font-size: 14px;
  color: var(--text-secondary);
}
.ab-kpi strong {
  color: var(--text-primary);
  font-weight: 600;
}

/* 响应式 */
@media (max-width: 768px) {
  .ab-grid { grid-template-columns: 1fr; }
  .ab-compact-row { flex-direction: column; gap: 8px; }
  .ab-compact-data { gap: 8px; }
}

/* ===== 变化卡片 ===== */
.change-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-bottom:24px; }
.change-card { background:var(--bg-card); border-radius:8px; padding:16px; box-shadow:var(--shadow); text-align:center; border:1px solid var(--border); }
.change-num { font-size:24px; font-weight:700; color:var(--primary); }
.change-lbl { font-size:12px; color:var(--text-secondary); margin-top:4px; }

/* ===== 项目追踪 / 存量管理 变化标签 ===== */
.change-tag {
  font-size: 11px;
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1.4;
  margin-top: 2px;
}
.change-tag + .change-tag { margin-left: 4px; margin-top: 2px; }
.change-tag.status-change { color: #92400e; background: #fef3c7; font-weight: 600; }
.change-tag.budget-change { color: #166534; background: #f0fdf4; font-weight: 600; }
.change-tag.remark-change { color: #1d4ed8; background: #eff6ff; font-weight: 600; }

/* 存量管理周变化列：无变化显示灰色短线 */
.week-col .no-change { color: var(--text-tertiary); font-size: 13px; }

/* 周变化列垂直对齐 top，避免多标签推高整行 */
.week-col { vertical-align: top; white-space: normal; }
tr .week-col { padding-top: 10px; }

/* ===== 分页控件 ===== */
.pager {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  padding: 12px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
  flex-wrap: wrap;
  gap: 8px;
}
.pager-info {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
}
.pager-btns {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.pager-btn {
  font-size: 13px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-card);
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.15s ease;
  min-width: 32px;
}
.pager-btn:hover:not(:disabled) {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary);
}
.pager-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  font-weight: 600;
}
.pager-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.pager-ellipsis {
  font-size: 13px;
  color: var(--text-tertiary);
  padding: 5px 4px;
  user-select: none;
}

@media (max-width: 768px) {
  .pager { flex-direction: column; align-items: flex-start; }
  .pager-btns { gap: 3px; }
  .pager-btn { padding: 4px 8px; font-size: 12px; }
}

/* 需要换行的列（替代 ellip） */
.data-table td.wrap {
  overflow-wrap: break-word;
  line-height: 1.6;
}

/* 金额列：数字和单位分字号 */
.data-table td.num .money-val {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.data-table td.num .unit,
.data-table td.num .suffix {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-left: 2px;
}


/* ===== 项目追踪特有 ===== */
.week-label { font-size:13px; font-weight:600; color:var(--text-primary); }
.type-tag { font-size:11px; padding:2px 6px; border-radius:4px; font-weight:500; white-space:nowrap; }
.type-tag.type-重点项目 { background:#fef3c7; color:#92400e; }
.type-tag.type-传统项目 { background:#f0fdf4; color:#166534; }
.type-tag.type-数据项目 { background:#eff6ff; color:#1d4ed8; }
.type-tag.type-软件项目 { background:#f5f3ff; color:#7c3aed; }
.left-bar { position:absolute; left:0; top:0; bottom:0; width:4px; }
.left-bar.yellow { background:#f59e0b; }
.left-bar.red { background:#ef4444; }
.left-bar.both { background:linear-gradient(180deg,#f59e0b 50%,#ef4444 50%); }
.budget-cell { text-align: right; }
.budget-cell .budget-val { font-weight: 600; }
.budget-cell .budget-arrow { display: inline-block; margin-left: 4px; font-weight: 700; font-size: 13px; cursor: help; }
.budget-arrow.up { color: #22c55e; }
.budget-arrow.down { color: #ef4444; }

/* ===== 入口页 ===== */
.nav-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-bottom: 40px; }
.nav-card {
  background: var(--bg-card); border-radius: 12px; padding: 32px;
  box-shadow: var(--shadow); border-left: 4px solid transparent; text-decoration: none;
  color: inherit; display: flex; flex-direction: column; transition: all 0.2s ease;
  position: relative;
}
.nav-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.nav-card[data-border="primary"] { border-left-color: var(--primary); }
.nav-card[data-border="success"] { border-left-color: var(--success); }
.nav-card[data-border="warning"] { border-left-color: var(--warning); }
.nav-card[data-border="info"] { border-left-color: var(--info); }
.nav-card .card-header h3 { font-size: 20px; font-weight: 600; margin-bottom: 4px; }
.nav-card .card-subtitle { font-size: 13px; color: var(--text-tertiary); }
.nav-card .card-value { font-size: 32px; font-weight: 700; margin: 16px 0; }
.nav-card .card-arrow {
  position: absolute; right: 24px; bottom: 24px; font-size: 24px;
  color: var(--text-tertiary); transition: color 0.2s;
}
.nav-card:hover .card-arrow { color: var(--primary); }

.summary-bar {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  margin-bottom: 40px;
}
.summary-item {
  background: var(--bg-card); border-radius: 12px; padding: 24px;
  box-shadow: var(--shadow); text-align: center; border: 1px solid var(--border);
}
.summary-item .label { font-size: 13px; color: var(--text-tertiary); margin-bottom: 8px; }
.summary-item .value { font-size: 24px; font-weight: 600; color: var(--text-primary); }
.summary-item .value.highlight { color: var(--primary); }

.status-bar {
  background: var(--bg-card); border-radius: 12px; padding: 20px 24px;
  box-shadow: var(--shadow); display: flex; justify-content: space-between;
  align-items: center; font-size: 13px; color: var(--text-tertiary);
  border: 1px solid var(--border);
}
.status-bar .batch-info { font-weight: 500; color: var(--text-primary); }

/* ===== 入口页微调 ===== */
.index-header { margin-bottom: 40px; }
.index-header h1 { font-size: 28px; font-weight: 600; margin-bottom: 8px; }
.index-header .subtitle { color: var(--text-tertiary); font-size: 14px; }

/* ===== 背景色类（人员头像/图例） ===== */
.bg-color-0 { background: #2563eb; }
.bg-color-1 { background: #8b5cf6; }
.bg-color-2 { background: #16a34a; }
.bg-color-3 { background: #d97706; }
.bg-color-4 { background: #dc2626; }
.bg-color-5 { background: #0891b2; }
.bg-color-6 { background: #ec4899; }
.bg-color-7 { background: #6366f1; }

/* ===== 列宽工具类（colgroup） ===== */
.col-w65  { width: 65px; }
.col-w70  { width: 70px; }
.col-w75  { width: 75px; }
.col-w80  { width: 80px; }
.col-w85  { width: 85px; }
.col-w90  { width: 90px; }
.col-w95  { width: 95px; }
.col-w100 { width: 100px; }
.col-w110 { width: 110px; }
.col-w120 { width: 120px; }
.col-w130 { width: 130px; }
.col-w140 { width: 140px; }
.col-w150 { width: 150px; }
.col-w160 { width: 160px; }
.col-w180 { width: 180px; }
.col-w200 { width: 200px; }
.col-w220 { width: 220px; }
.col-w240 { width: 240px; }

/* ===== 数据锚点 ===== */
.data-anchor { text-align: right; font-size: 12px; color: var(--text-tertiary); margin-bottom: 8px; }

/* ===== 项目追踪行交互 ===== */
.data-table tr.proj-row { cursor: pointer; transition: background .15s; }
.data-table tr.proj-row:hover { background: var(--bg-hover); }
.data-table tr.proj-row-removed { background: #fff1f2; }
.data-table tr.proj-row-removed td { color: #9f1239; }
.data-table tr.proj-row-removed td:nth-child(4),
.data-table tr.proj-row-removed td:nth-child(6) {
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}

/* ===== Responsive ===== */
@media(max-width:768px){
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .kpi-grid[data-columns="4"] { grid-template-columns: repeat(2, 1fr); }
  .kpi-grid[data-columns="6"] { grid-template-columns: repeat(3, 1fr); }
  .nav-links { display: none; }
  .container { padding: 16px; }
  .stat-grid { grid-template-columns: repeat(3, 1fr); }
  .change-grid { grid-template-columns: repeat(3, 1fr); }
  .person-grid { grid-template-columns: repeat(2, 1fr); }
  .week-grid { grid-template-columns: 1fr; }
  .rank-table { font-size: 11px; }
  .rank-table th, .rank-table td { padding: 6px 8px; }
  .nav-grid { grid-template-columns: 1fr; }
  .summary-bar { grid-template-columns: repeat(2, 1fr); }
}

@media(max-width:480px){
  .kpi-grid { grid-template-columns: 1fr; }
  .kpi-grid[data-columns="4"] { grid-template-columns: 1fr; }
  .kpi-grid[data-columns="6"] { grid-template-columns: repeat(2, 1fr); }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .change-grid { grid-template-columns: repeat(2, 1fr); }
  .person-grid { grid-template-columns: 1fr; }
  .summary-bar { grid-template-columns: 1fr; }
}