/* Chart layer — fintech tokens (shadcn/Tremor-inspired, без React) */
:root{
  --chart-grid: rgba(255,255,255,.06);
  --chart-axis: rgba(255,255,255,.38);
  --chart-tooltip-bg: rgba(20,22,28,.96);
  --chart-tooltip-border: rgba(255,255,255,.12);
  --chart-surface: rgba(255,255,255,.02);
  --chart-radius: var(--v2-capital-radius, 10px);
  --chart-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --chart-kpi-shadow: 0 1px 0 rgba(255,255,255,.04) inset;
}
html.theme-dark{
  --chart-grid: rgba(255,255,255,.06);
  --chart-axis: rgba(255,255,255,.42);
  --chart-tooltip-bg: rgba(14,16,20,.97);
}
html:not(.theme-dark){
  --chart-grid: rgba(37,33,29,.08);
  --chart-axis: rgba(37,33,29,.45);
  --chart-tooltip-bg: rgba(248,246,242,.98);
  --chart-tooltip-border: rgba(37,33,29,.12);
  --chart-surface: rgba(255,255,255,.65);
}

.v2-chart-host{
  width:100%;
  min-width:0;
  min-height:160px;
  border-radius:var(--chart-radius);
  background:var(--chart-surface);
  border:1px solid var(--line);
  box-sizing:border-box;
}
.v2-chart-host--sankey{ min-height:240px; }
.v2-chart-host--treemap{ min-height:200px; margin-top:10px; }
.v2-chart-host--growth{ min-height:200px; margin-bottom:10px; }
.v2-chart-host--waterfall{ min-height:240px; border:none; background:transparent; }
.v2-mermaid-host{
  width:100%;
  min-height:120px;
  margin-top:10px;
  overflow-x:auto;
  border-radius:var(--chart-radius);
  background:var(--chart-surface);
  border:1px solid var(--line);
  padding:8px;
  box-sizing:border-box;
}
.v2-mermaid-host--agent{ margin-top:12px; }
.v2-mermaid-host svg{ max-width:100%; height:auto; }
.v2-chart-host canvas{ border-radius:var(--chart-radius); }

.v2-income-cal-kpi__tile,
.v2-metric-tile{
  box-shadow:var(--chart-kpi-shadow);
}