/* ============================================================
 * 14280 · 赛季数据看板 (Season Dashboard)
 * 2026-10-06 新增。与生产全局主题一致：obsidian #080909 / ivory #f2efe8
 * / champion gold #d7b56d / muted cyan #86e7dd。
 * 哑光实色、无彩虹渐变、无金属光泽。作用域全部 zdb- 前缀，不影响原有样式。
 * ============================================================ */

.zdb-board {
  margin: 0 0 46px;
  --zdb-line: rgba(215, 181, 109, .22);
  --zdb-line-soft: rgba(215, 181, 109, .13);
  --zdb-gold: #d7b56d;
  --zdb-ivory: #f2efe8;
  --zdb-muted: #a0a3a7;
  --zdb-dim: #74777b;
  --zdb-cyan: #86e7dd;
  --zdb-cell: #0a0b0c;
  font-family: 'Manrope', 'Microsoft YaHei', 'PingFang SC', system-ui, sans-serif;
}

/* ── 头部 ── */
.zdb-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 28px; padding: 0 0 16px; border-bottom: 1px solid var(--zdb-line);
}
.zdb-head-left { display: flex; flex-direction: column; gap: 8px; }
.zdb-kicker { font-size: 10px; font-weight: 500; letter-spacing: .16em; color: #9b9da0; }
.zdb-head h3 {
  margin: 0; font-size: clamp(20px, 2vw, 26px); line-height: 1.3;
  font-weight: 500; letter-spacing: -.03em; color: var(--zdb-ivory);
}
.zdb-meta { font-size: 11px; line-height: 1.7; color: var(--zdb-muted); text-align: right; }
.zdb-meta b { color: var(--zdb-gold); font-weight: 500; }

/* ── KPI 指标行 ── */
.zdb-kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 1px; background: var(--zdb-line-soft);
  border-bottom: 1px solid var(--zdb-line-soft);
}
.zdb-kpi { background: var(--zdb-cell); padding: 22px 20px 20px; display: flex; flex-direction: column; gap: 9px; }
.zdb-kpi-top { display: flex; align-items: center; gap: 8px; }
.zdb-kpi-dot { width: 5px; height: 5px; flex: 0 0 5px; background: var(--zdb-gold); }
.zdb-kpi-label { font-size: 11px; letter-spacing: .04em; color: var(--zdb-muted); }
.zdb-kpi-num {
  font-size: clamp(26px, 3.4vw, 36px); line-height: 1; font-weight: 500;
  color: var(--zdb-ivory); letter-spacing: -.045em; font-variant-numeric: tabular-nums;
}
.zdb-kpi-num small { font-size: .42em; letter-spacing: 0; color: var(--zdb-dim); margin-left: 5px; font-weight: 400; }
.zdb-kpi-sub { font-size: 11px; line-height: 1.6; color: var(--zdb-dim); }
.zdb-kpi-sub em { font-style: normal; color: var(--zdb-cyan); }

/* ── 图表网格 ── */
.zdb-charts {
  display: grid; grid-template-columns: 1.55fr 1fr; gap: 1px;
  background: var(--zdb-line-soft); border-bottom: 1px solid var(--zdb-line-soft);
}
.zdb-card {
  margin: 0; background: var(--zdb-cell); padding: 22px 24px 20px;
  display: flex; flex-direction: column; gap: 14px; min-width: 0;
}
.zdb-card--wide { grid-column: 1 / -1; }
.zdb-card figcaption {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
}
.zdb-card figcaption span { font-size: 13px; font-weight: 500; color: var(--zdb-ivory); letter-spacing: -.01em; }
.zdb-card figcaption b { font-size: 10px; font-weight: 400; letter-spacing: .1em; color: #8f9296; }
.zdb-plot { width: 100%; min-width: 0; }
.zdb-plot svg { display: block; width: 100%; height: auto; overflow: visible; }
.zdb-empty { padding: 26px 0; font-size: 12px; color: var(--zdb-dim); }

/* ── 折线图图例 ── */
.zdb-legend { display: flex; flex-wrap: wrap; gap: 6px 22px; padding-top: 4px; }
.zdb-legend-item { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--zdb-muted); }
.zdb-legend-swatch { width: 16px; height: 2px; flex: 0 0 16px; }
.zdb-legend-item b { color: var(--zdb-ivory); font-weight: 500; font-variant-numeric: tabular-nums; }

/* ── 环形图 / 条形图配套 ── */
.zdb-donut-wrap { display: flex; align-items: center; gap: 20px; }
.zdb-donut-canvas { flex: 0 0 176px; }
.zdb-donut-legend { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.zdb-donut-row { display: grid; grid-template-columns: 7px minmax(0, 1fr) auto auto; align-items: center; gap: 9px; font-size: 11px; color: var(--zdb-muted); }
.zdb-donut-swatch { width: 7px; height: 7px; }
.zdb-donut-row i { font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #c9c7c0; }
.zdb-donut-row b { color: var(--zdb-ivory); font-weight: 500; font-variant-numeric: tabular-nums; }
.zdb-donut-row u { text-decoration: none; color: var(--zdb-dim); font-variant-numeric: tabular-nums; min-width: 30px; text-align: right; }

.zdb-bar-note { font-size: 11px; color: var(--zdb-dim); padding-top: 2px; }

@media (max-width: 980px) {
  .zdb-charts { grid-template-columns: 1fr; }
  .zdb-head { flex-direction: column; align-items: flex-start; }
  .zdb-meta { text-align: left; }
}
@media (max-width: 560px) {
  .zdb-kpi { padding: 18px 16px 16px; }
  .zdb-card { padding: 18px 16px 16px; }
  .zdb-donut-wrap { flex-direction: column; align-items: flex-start; }
  .zdb-donut-canvas { flex: 0 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .zdb-kpi-num { transition: none !important; }
}