/* ============================================================================
   charts.css — вид модуля визуализации данных (shared/ui/charts.tsx).
   Премиальная SaaS-аналитика Emailzavr: белые карточки, тонкие рамки, спокойные
   серые подписи, зелёный акцент. Все цвета — из токенов chart-* и c-* (var()).
   Хардкод hex запрещён. Анимации появления + prefers-reduced-motion внизу файла.
   ============================================================================ */

/* ------------------------------- Витрина: сетка карточек графиков ------------------------------- */
.ds-charts-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  margin-bottom: var(--sp-4);
}
@media (max-width: 720px) {
  .ds-charts-grid { grid-template-columns: 1fr; }
}

/* ------------------------------- ChartCard ------------------------------- */
.chart-card {
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--c-brand) 4%, transparent) 0%, transparent 60%),
    var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 22px;
  box-shadow: var(--chart-card-shadow);
  padding: var(--sp-5);
  min-width: 0;
  transition: box-shadow var(--t-base), transform var(--t-base), border-color var(--t-base);
  /* появление со stagger (см. nth-child) */
  animation: chartCardIn 380ms cubic-bezier(.22, 1, .36, 1) backwards;
}
.chart-card:hover {
  box-shadow: var(--chart-card-shadow-hover);
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--c-brand) 28%, var(--border-default));
}
.ds-charts-grid .chart-card:nth-child(1) { animation-delay: 40ms; }
.ds-charts-grid .chart-card:nth-child(2) { animation-delay: 120ms; }
.ds-charts-grid .chart-card:nth-child(3) { animation-delay: 200ms; }
.ds-charts-grid .chart-card:nth-child(4) { animation-delay: 280ms; }
.chart-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
}
.chart-card__title-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.chart-card__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--fg-default);
  margin: 0;
  line-height: var(--lh-tight);
}
.chart-card__period {
  font-size: var(--fs-xs);
  color: var(--fg-muted);
  background: var(--bg-inset);
  border-radius: var(--r-full);
  padding: 2px var(--sp-2);
  white-space: nowrap;
}
.chart-card__subtitle {
  margin: var(--sp-1) 0 0;
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  line-height: var(--lh-normal);
}
.chart-card__statusdot {
  width: 8px; height: 8px; border-radius: var(--r-full);
  flex: none;
}
.chart-card__statusdot.is-good { background: var(--chart-green); }
.chart-card__statusdot.is-warning { background: var(--chart-yellow); }
.chart-card__statusdot.is-critical { background: var(--chart-red); }
.chart-card__statusdot.is-info { background: var(--chart-blue); }
.chart-card__statusdot.is-neutral { background: var(--chart-gray); }
.chart-card__actions { display: flex; align-items: center; gap: var(--sp-1); flex: none; }

.chart-card__kpi {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
  flex-wrap: wrap;
}
.chart-card__value {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--fg-default);
  letter-spacing: -0.01em;
}
.chart-card__trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}
.chart-card__trend.is-up { color: var(--c-success); }
.chart-card__trend.is-down { color: var(--c-danger); }
.chart-card__trend.is-flat { color: var(--fg-muted); }
.chart-card__trend-lbl { color: var(--fg-muted); font-weight: var(--fw-regular); }

.chart-card__body { margin-top: var(--sp-4); flex: 1; min-width: 0; }
.chart-card__footer {
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border-default);
  font-size: var(--fs-sm);
  color: var(--fg-muted);
}
/* левая цветная грань карточки по статусу — мягкий акцент */
.chart-card--critical { border-left: 3px solid var(--chart-red); }
.chart-card--warning { border-left: 3px solid var(--chart-yellow); }
.chart-card--good { border-left: 3px solid var(--chart-green); }

/* ------------------------------- Общий контейнер ------------------------------- */
.chart { min-width: 0; }
.chart-ready.is-disabled { opacity: 0.5; pointer-events: none; filter: grayscale(0.4); }

/* ------------------------------- Radial (donut / pie) ------------------------------- */
.chart.radial {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  flex-wrap: wrap;
}
.radial__plot { position: relative; flex: none; line-height: 0; }
.chart.radial svg { overflow: visible; }
.chart-seg {
  transition: transform var(--t-spring), filter var(--t-fast), opacity var(--t-base);
  transform-box: fill-box;
}
.radial.is-animated .chart-seg {
  opacity: 0;
  transform-origin: center;
  animation: chartSegIn 460ms cubic-bezier(.34, 1.2, .64, 1) forwards;
}
.radial__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  text-align: center;
}
.radial__center { transition: transform var(--t-fast); }
.radial__center.is-active { transform: scale(1.06); }
.radial__value {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--fg-default);
  letter-spacing: -0.02em;
  line-height: 1;
  transition: color var(--t-fast);
}
.radial__label {
  font-size: var(--fs-xs);
  color: var(--fg-muted);
  margin-top: 2px;
  max-width: 9ch;
  text-align: center;
  line-height: 1.2;
}
.radial__pct {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--fg-muted);
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}
.chart-seg.is-active { filter: brightness(1.03); }

/* ------------------------------- Legend ------------------------------- */
.chart-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.chart-legend--list { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.chart-legend--inline { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-3); }
.chart-legend__item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  transition: background var(--t-fast);
}
.chart-legend--list .chart-legend__item.is-active { background: var(--bg-hover); }
.chart-legend__item.is-clickable { cursor: pointer; }
.chart-legend__marker {
  width: 10px; height: 10px; border-radius: 3px; flex: none;
}
.chart-legend__label { color: var(--fg-default); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chart-legend__value { color: var(--fg-default); font-variant-numeric: tabular-nums; font-weight: var(--fw-medium); }
.chart-legend__pct { color: var(--fg-muted); font-variant-numeric: tabular-nums; min-width: 40px; text-align: right; }
.chart-legend--inline .chart-legend__value,
.chart-legend--inline .chart-legend__pct { display: none; }

/* ------------------------------- Gauge ------------------------------- */
.chart.gauge { display: flex; flex-direction: column; align-items: center; line-height: 0; }
.chart.gauge svg { overflow: visible; }
.gauge__fill { transition: stroke-dashoffset 1s cubic-bezier(.34, 1, .64, 1), stroke var(--t-base); }
.gauge__shine { transition: stroke-dashoffset 1s cubic-bezier(.34, 1, .64, 1); pointer-events: none; }
.gauge__readout {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: calc(-1 * var(--sp-8));
  line-height: 1.1;
}
.gauge__value { font-size: var(--fs-h2); font-weight: var(--fw-bold); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; transition: transform var(--t-fast); transform-origin: center; }
.chart.gauge { position: relative; cursor: pointer; }
.chart.gauge.is-hover .gauge__value { transform: scale(1.06); }
.gauge__unit { font-size: var(--fs-md); font-weight: var(--fw-semibold); opacity: 0.7; }
.gauge__label { font-size: var(--fs-sm); color: var(--fg-muted); margin-top: 2px; }
.gauge__zone { font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-transform: lowercase; margin-top: 2px; }

/* ------------------------------- BarChart (vertical) ------------------------------- */
.chart.barchart,
.chart.stacked .stacked__main { display: flex; gap: var(--sp-3); }
.barchart__yaxis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: var(--fs-xs);
  color: var(--chart-axis);
  text-align: right;
  padding-bottom: 22px; /* высота подписи оси X */
  font-variant-numeric: tabular-nums;
  flex: none;
  min-width: 32px;
}
.barchart__plot { position: relative; flex: 1; min-width: 0; }
.barchart__grid {
  position: absolute;
  inset: 0 0 22px 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
}
.barchart__gridline { border-top: 1px solid var(--chart-grid); height: 0; }
.barchart__bars {
  position: absolute;
  inset: 0 0 0 0;
  display: flex;
  align-items: flex-end;
  gap: var(--sp-2);
}
.barchart__col {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  transition: opacity var(--t-fast);
}
.barchart__col.is-dim { opacity: 0.42; }
.barchart__bartrack {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 0;
  padding-bottom: 22px;
  box-sizing: border-box;
}
.barchart__bar {
  width: 100%;
  max-width: 46px;
  border-radius: 14px 14px 5px 5px;   /* пилюльные верхушки в стиле Figma */
  /* объёмная колонка: блик сверху → база → тень снизу */
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--bar, var(--chart-s1)), #ffffff 30%) 0%,
    var(--bar, var(--chart-s1)) 52%,
    color-mix(in srgb, var(--bar, var(--chart-s1)), #000000 14%) 100%);
  /* левый блик + правая грань + мягкая тень у основания */
  box-shadow:
    inset 1.5px 0 0 rgba(255, 255, 255, 0.20),
    inset -2px 0 5px rgba(0, 0, 0, 0.12),
    0 8px 14px -6px var(--bar-glow, transparent);
  transition: filter var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.barchart__col:hover .barchart__bar { transform: translateY(-2px); }
.barchart__bar.is-active { filter: brightness(1.04); box-shadow: inset 1.5px 0 0 rgba(255,255,255,0.22), 0 10px 18px -6px var(--bar-glow, var(--c-brand-glow)); }
.barchart__bar.is-animated { transform-origin: bottom; animation: chartBarIn 520ms cubic-bezier(.34, 1.1, .64, 1) backwards; }
.barchart__xlabel {
  position: absolute;
  bottom: 0;
  font-size: var(--fs-xs);
  color: var(--fg-muted);
  white-space: nowrap;
  transition: color var(--t-fast);
}
.barchart__col { position: relative; }
.barchart__xlabel.is-active { color: var(--fg-default); font-weight: var(--fw-semibold); }

/* ------------------------------- Stacked ------------------------------- */
.stacked__bartrack {
  width: 100%;
  max-width: 46px;
  display: flex;
  flex-direction: column-reverse; /* первый ряд снизу */
  border-radius: 14px 14px 5px 5px;  /* пилюльные верхушки в стиле Figma */
  overflow: hidden;
  align-self: flex-end;
  margin-bottom: 22px;
}
.stacked .barchart__bartrack { display: flex; align-items: flex-end; justify-content: center; }
.stacked__seg {
  width: 100%;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--seg, var(--chart-s1)), #ffffff 22%) 0%,
    var(--seg, var(--chart-s1)) 60%,
    color-mix(in srgb, var(--seg, var(--chart-s1)), #000000 10%) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  transition: filter var(--t-fast);
}
.stacked__seg.is-dim { opacity: 0.32; }
.stacked__seg:hover { filter: brightness(1.06); }
.stacked__seg.is-animated { transform-origin: bottom; animation: chartBarIn 460ms cubic-bezier(.34, 1.1, .64, 1) backwards; }

/* ------------------------------- HorizontalBar ------------------------------- */
.chart.hbar { display: flex; flex-direction: column; gap: var(--sp-1); }
.hbar__row { display: grid; grid-template-columns: minmax(80px, 0.9fr) 1fr auto; align-items: center; gap: var(--sp-3); padding: var(--sp-2); border-radius: var(--r-md); transition: background var(--t-fast); }
.hbar__row:hover,
.hbar__row.is-active { background: var(--bg-hover); }
.hbar__row.is-dim { opacity: 0.5; }
.hbar__row.is-clickable { cursor: pointer; }
.hbar__row.is-active .hbar__value { color: var(--accent); font-weight: var(--fw-bold); }
.hbar__bar.is-active { filter: brightness(1.05); }
.hbar__label { font-size: var(--fs-sm); color: var(--fg-default); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar__track { height: 14px; background: var(--chart-track); border-radius: var(--r-full); overflow: hidden; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.07); }
.hbar__bar {
  height: 100%; border-radius: var(--r-full);
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--bar, var(--chart-s1)), #ffffff 22%) 0%,
    var(--bar, var(--chart-s1)) 70%,
    color-mix(in srgb, var(--bar, var(--chart-s1)), #000000 12%) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 1px 6px -1px color-mix(in srgb, var(--bar, var(--chart-s1)) 42%, transparent);
  transition: filter var(--t-fast);
}
.hbar__bar.is-animated { transform-origin: left; animation: chartHBarIn 560ms cubic-bezier(.34, 1.05, .64, 1) backwards; }
.hbar__value { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--fg-default); font-variant-numeric: tabular-nums; min-width: 40px; text-align: right; }

/* ------------------------------- MiniSparkline ------------------------------- */
.spark-wrap { position: relative; display: inline-block; overflow: visible; }
.chart.spark { display: block; overflow: visible; }
.spark__line { stroke-dasharray: 1; }
.chart.spark .spark__line { animation: sparkDraw 900ms ease-out backwards; }
.spark__dot { animation: sparkDot 400ms ease-out 700ms backwards; }

/* ------------------------------- Tooltip ------------------------------- */
.chart-tip {
  position: absolute;
  z-index: var(--z-dropdown);
  pointer-events: none;
  max-width: 240px;
  background: var(--chart-tip-bg);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
  color: var(--fg-default);
  border: 1px solid var(--chart-tip-border);
  border-radius: 14px;
  padding: var(--sp-3) var(--sp-3);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.20);
  font-size: var(--fs-xs);
  line-height: 1.4;
  animation: chartTipIn 140ms cubic-bezier(.22, 1, .36, 1);
  transform: translateY(-100%);
}
.chart-tip__head { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.chart-tip__dot { width: 9px; height: 9px; border-radius: var(--r-full); flex: none; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 0%, transparent); }
.chart-tip__label { font-weight: var(--fw-semibold); color: var(--fg-default); }
.chart-tip__period { margin-left: auto; font-size: var(--fs-2xs, 10px); color: var(--fg-muted); background: var(--bg-inset); border-radius: var(--r-full); padding: 1px 6px; }
.chart-tip__value { font-size: var(--fs-md); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; color: var(--fg-default); }
.chart-tip__pct { font-weight: var(--fw-regular); color: var(--fg-muted); }
.chart-tip__status { color: var(--fg-muted); margin-top: 2px; }
.chart-tip__desc { color: var(--fg-muted); margin-top: 3px; }
.chart-tip__lines { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }
.chart-tip__line { display: flex; align-items: center; gap: 7px; }
.chart-tip__line-lbl { color: var(--fg-muted); }
.chart-tip__line-val { margin-left: auto; font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.chart-tip__total { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--chart-tip-border); font-weight: var(--fw-semibold); }

/* ------------------------------- Состояния ------------------------------- */
.chart-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  text-align: center;
  color: var(--fg-muted);
  padding: var(--sp-6);
}
.chart-state__ico { color: var(--fg-subtle); }
.chart-state--error .chart-state__ico { color: var(--c-danger); }
.chart-state__msg { font-size: var(--fs-sm); }
.chart-state__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--c-brand);
  background: var(--c-brand-soft);
  border: none;
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3);
  cursor: pointer;
  transition: background var(--t-fast);
}
.chart-state__btn:hover { background: var(--c-brand-glow); }

/* skeleton-состояние графика */
.chart-state--loading { gap: var(--sp-4); }
.chart-skel {
  background: linear-gradient(100deg, var(--bg-inset) 30%, var(--bg-hover) 50%, var(--bg-inset) 70%);
  background-size: 200% 100%;
  animation: chartShimmer 1.4s ease-in-out infinite;
  border-radius: var(--r-md);
}
.chart-skel--ring { width: 130px; height: 130px; border-radius: var(--r-full); }
.chart-skel-legend { display: flex; flex-direction: column; gap: var(--sp-2); width: 180px; }
.chart-skel-legend span {
  height: 12px; border-radius: var(--r-full);
  background: var(--bg-inset);
  animation: chartShimmer 1.4s ease-in-out infinite;
  background: linear-gradient(100deg, var(--bg-inset) 30%, var(--bg-hover) 50%, var(--bg-inset) 70%);
  background-size: 200% 100%;
}
.chart-skel-legend span:nth-child(1) { width: 100%; }
.chart-skel-legend span:nth-child(2) { width: 75%; }
.chart-skel-legend span:nth-child(3) { width: 55%; }

/* ------------------------------- Keyframes ------------------------------- */
@keyframes chartCardIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes chartSegIn { from { opacity: 0; transform: scale(0.82); } to { opacity: 1; transform: scale(1); } }
@keyframes chartBarIn { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes chartHBarIn { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes chartTipIn { from { opacity: 0; transform: translateY(-100%) scale(0.96); } to { opacity: 1; transform: translateY(-100%) scale(1); } }
@keyframes chartShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes sparkDraw { from { stroke-dasharray: 200; stroke-dashoffset: 200; } to { stroke-dasharray: 200; stroke-dashoffset: 0; } }
@keyframes sparkDot { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }

/* ------------------------------- Адаптив ------------------------------- */
@media (max-width: 720px) {
  .chart.radial { flex-direction: column; align-items: center; gap: var(--sp-4); }
  .chart.radial .chart-legend--list { width: 100%; }
  .hbar__row { grid-template-columns: minmax(64px, 0.8fr) 1fr auto; }
}

/* ------------------------------- prefers-reduced-motion ------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .chart-card,
  .chart-seg,
  .barchart__bar,
  .stacked__seg,
  .hbar__bar,
  .gauge__fill,
  .gauge__shine,
  .spark__line,
  .spark__dot,
  .chart-skel,
  .chart-skel-legend span,
  .chart-tip {
    animation: none !important;
    transition: none !important;
  }
  .radial.is-animated .chart-seg { opacity: 1; transform: none; }
}

/* ====================== Figma-графики (ChartRenderer + галерея) ====================== */
.chart-figma {
  position: relative; width: 100%; border-radius: var(--r-md);
  background: var(--bg-surface); border: 1px solid var(--border-default);
  overflow: hidden; display: flex; align-items: center; justify-content: center;
  aspect-ratio: 16 / 10; padding: var(--sp-3);
  transition: box-shadow var(--t-base), transform var(--t-base), border-color var(--t-base);
}
.chart-figma__img { max-width: 100%; max-height: 100%; height: auto; object-fit: contain; display: block; }
.chart-figma--dark { background: #12161a; border-color: rgba(255,255,255,0.08); }
.chart-figma--empty { color: var(--fg-muted); font-size: var(--fs-sm); aspect-ratio: 16/10; }
/* появление: график «прорисовывается» слева направо (wipe) */
.chart-figma.is-animated .chart-figma__img { animation: chartFigmaWipe 900ms cubic-bezier(.22,1,.36,1) both; }
.chart-card:hover .chart-figma, .ds-cell:hover .chart-figma { box-shadow: var(--shadow-sm); }
@keyframes chartFigmaIn { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes chartFigmaWipe {
  0%   { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateY(6px); }
  35%  { opacity: 1; }
  100% { opacity: 1; clip-path: inset(0 0 0 0); transform: none; }
}
/* блик-проход по графику на hover карточки — «живой» отклик */
.chart-figma::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; border-radius: inherit;
  background: linear-gradient(105deg, transparent 32%, color-mix(in srgb, var(--c-brand) 18%, transparent) 50%, transparent 68%);
}
.figma-chartcard-wrap:hover .chart-figma::after { animation: chartFigmaShine 700ms ease; }
@keyframes chartFigmaShine { 0% { opacity: 0; transform: translateX(-55%); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateX(55%); } }

/* галерея */
.figma-gallery__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ez-control-gap); margin-bottom: var(--sp-4); }
.figma-gallery__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-4); }
.figma-chartcard { display: flex; flex-direction: column; gap: var(--sp-3); }
.figma-chartcard__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.figma-chartcard__title { font-weight: var(--fw-semibold); font-size: var(--fs-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.figma-chartcard__badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.figma-chartcard__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-top: auto; }
@media (prefers-reduced-motion: reduce) { .chart-figma.is-animated .chart-figma__img { animation: none; } }

/* галерея: карточка кликабельна, превью увеличивается на hover */
.figma-chartcard-wrap { cursor: pointer; }
.figma-chartcard-wrap:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chart-figma__img { transition: transform 220ms ease, filter 220ms ease; }
.figma-chartcard-wrap:hover .chart-figma { box-shadow: var(--shadow-sm); border-color: color-mix(in srgb, var(--c-brand) 24%, var(--border-default)); }
.figma-chartcard-wrap:hover .chart-figma__img { transform: scale(1.035); }
/* крупный preview в modal */
.chart-figma--preview-lg { aspect-ratio: auto; min-height: 320px; max-height: 56vh; padding: var(--sp-6); }
.chart-figma--preview-lg .chart-figma__img { max-height: 52vh; }

/* Legacy quarantine — свёрнутый блок */
.ds-legacy { border: 1px dashed var(--c-line-3); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); background: var(--c-surface-2); }
.ds-legacy > summary { cursor: pointer; font-weight: var(--fw-semibold); color: var(--fg-muted); list-style: none; }
.ds-legacy > summary::-webkit-details-marker { display: none; }
.ds-legacy > summary::before { content: "▸ "; }
.ds-legacy[open] > summary::before { content: "▾ "; }

/* ============================ LineAreaChart ============================ */
.linearea { display: flex; gap: var(--sp-2); align-items: stretch; }
.linearea__col { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.linearea__plot { position: relative; width: 100%; }
.linearea__svg { display: block; width: 100%; overflow: visible; }
.linearea__dot { transition: r var(--t-fast), opacity var(--t-fast); }
.linearea__xaxis { display: flex; justify-content: space-between; padding: 6px 2px 0; }
.linearea__xlabel { font-size: var(--fs-xs); color: var(--fg-muted); transition: color var(--t-fast); }
.linearea__xlabel.is-active { color: var(--fg-default); font-weight: var(--fw-semibold); }
@keyframes la-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes la-fade { from { opacity: 0; } to { opacity: 1; } }
.linearea__svg.is-animated .linearea__line {
  stroke-dasharray: 1; stroke-dashoffset: 0;
  animation: la-draw 900ms cubic-bezier(.4, 0, .2, 1);
}
.linearea__svg.is-animated .linearea__fill { animation: la-fade 700ms ease 200ms both; }

/* ============================ Объёмные столбцы (VolumeBarChart) ============================ */
.barchart__bar.is-volume {
  background: linear-gradient(180deg, var(--bar-light, var(--bar)) 0%, var(--bar) 46%, var(--bar-dark, var(--bar)) 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.28),
    3px 0 0 var(--bar-dark, rgba(0, 0, 0, 0.18)),
    0 6px 14px -4px var(--bar-glow, transparent);
  border-top-left-radius: var(--r-sm);
  border-top-right-radius: var(--r-sm);
}

/* ============================ MetricInfographicCard ============================ */
.metric-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-4) var(--sp-3);
  border: 1px solid var(--color-line); border-radius: var(--r-xl);
  background: var(--color-surface); box-shadow: var(--chart-card-shadow);
  transition: box-shadow var(--t-base), transform var(--t-base), border-color var(--t-base);
  animation: la-fade 350ms ease both;
}
.metric-card.is-clickable { cursor: pointer; }
.metric-card.is-clickable:hover { transform: translateY(-2px); box-shadow: var(--chart-card-shadow-hover); border-color: color-mix(in srgb, var(--metric) 40%, var(--color-line)); }
.metric-card__accent { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--metric); }
.metric-card__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
.metric-card__title { font-size: var(--fs-sm); color: var(--fg-muted); font-weight: var(--fw-medium); }
.metric-card__hint { font-size: var(--fs-xs); color: var(--fg-subtle); }
.metric-card__value-row { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; }
.metric-card__value { font-size: var(--fs-h2); font-weight: var(--fw-bold); color: var(--color-text); line-height: 1.05; letter-spacing: -0.01em; }
.metric-card__unit { font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--fg-muted); }
.metric-card__delta { display: inline-flex; align-items: center; gap: 3px; font-size: var(--fs-sm); font-weight: var(--fw-semibold); padding: 2px 8px; border-radius: var(--r-full); }
.metric-card__delta.is-up { color: var(--chart-green); background: var(--chart-green-soft); }
.metric-card__delta.is-down { color: var(--chart-red); background: var(--chart-red-soft); }
.metric-card__delta.is-flat { color: var(--fg-muted); background: var(--bg-inset); }
.metric-card__delta-lbl { color: var(--fg-muted); font-weight: var(--fw-regular); }
.metric-card__spark { margin-top: auto; max-width: 100%; }

/* ============================ ChartEnlarge ============================ */
.chart-enlarge { position: relative; }
.chart-enlarge__btn {
  position: absolute; top: 0; right: 0; z-index: 2;
  display: grid; place-items: center; width: 30px; height: 30px;
  border: 1px solid var(--color-line); border-radius: var(--r-md);
  background: var(--color-surface); color: var(--fg-muted);
  cursor: pointer; opacity: 0; transition: opacity var(--t-fast), color var(--t-fast), border-color var(--t-fast);
  box-shadow: var(--shadow-xs);
}
.chart-enlarge:hover .chart-enlarge__btn,
.chart-enlarge__btn:focus-visible { opacity: 1; }
.chart-enlarge__btn:hover { color: var(--color-brand); border-color: var(--color-brand); }
.chart-enlarge__grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--sp-5); align-items: center; }
.chart-enlarge__big { display: flex; align-items: center; justify-content: center; min-width: 0; }
.chart-enlarge__sub { font-size: var(--fs-sm); color: var(--fg-muted); margin-bottom: var(--sp-2); }
.chart-enlarge__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.chart-enlarge__list > li { display: grid; grid-template-columns: 14px 1fr auto auto; align-items: center; gap: var(--sp-2); padding: var(--sp-2); border-radius: var(--r-sm); }
.chart-enlarge__list > li:hover { background: var(--bg-hover); }
.chart-enlarge__sw { width: 12px; height: 12px; border-radius: 4px; }
.chart-enlarge__lbl { font-size: var(--fs-base); color: var(--color-text); }
.chart-enlarge__val { font-variant-numeric: tabular-nums; font-weight: var(--fw-semibold); }
.chart-enlarge__pct { font-variant-numeric: tabular-nums; color: var(--fg-muted); min-width: 44px; text-align: right; }
.chart-enlarge__sum { border-top: 1px solid var(--color-line); margin-top: var(--sp-1); padding-top: var(--sp-2) !important; font-weight: var(--fw-bold); }
@media (max-width: 760px) { .chart-enlarge__grid { grid-template-columns: 1fr; } }

/* ============================ ChartPreviewGrid (витрина) ============================ */
.chart-preview { display: flex; flex-direction: column; gap: var(--sp-5); }
.chart-preview__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--sp-4); }
.chart-preview__metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-4); }
.chart-preview__states-bar { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-3); flex-wrap: wrap; }
.chart-preview__state-btn {
  padding: 5px 12px; border: 1px solid var(--color-line); border-radius: var(--r-full);
  background: var(--color-surface); color: var(--fg-muted); font-size: var(--fs-sm); font-weight: var(--fw-medium); cursor: pointer;
  transition: all var(--t-fast);
}
.chart-preview__state-btn:hover { border-color: var(--border-strong); color: var(--fg-default); }
.chart-preview__state-btn.is-active { background: var(--color-brand-soft); border-color: var(--color-brand); color: var(--color-brand); }

/* ============================ Figma-card chrome ============================ */
.chart-card.is-accent { position: relative; }
.chart-card.is-accent::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--accent, var(--chart-s1));
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.chart-card__actions { display: flex; align-items: center; gap: 4px; }
.chart-card__more, .chart-card__copy {
  display: grid; place-items: center; width: 28px; height: 28px;
  border: 1px solid transparent; border-radius: var(--r-sm);
  background: transparent; color: var(--fg-subtle); cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.chart-card__more:hover, .chart-card__copy:hover { background: var(--bg-hover); color: var(--fg-default); border-color: var(--color-line); }
.chart-card__copy.is-done { color: var(--chart-green); border-color: transparent; }

/* ============================ RadarChart ============================ */
.radar { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); }
.radar__axislabel { font-size: var(--fs-xs); fill: var(--fg-muted); }
.radar__shapes { transform-box: view-box; }
.radar__shapes.is-animated { animation: radar-pop 600ms cubic-bezier(.34, 1.1, .64, 1) both; }
@keyframes radar-pop { from { opacity: 0; transform: scale(0.18); } to { opacity: 1; transform: scale(1); } }

/* ============================ ScatterChart ============================ */
.scatter { position: relative; width: 100%; }
.scatter__tick { font-size: 10px; fill: var(--fg-subtle); }
.scatter__bubble { transition: r var(--t-fast), fill-opacity var(--t-fast); }
.scatter__pts.is-animated .scatter__bubble {
  transform-box: fill-box; transform-origin: center;
  animation: sc-pop 420ms cubic-bezier(.34, 1.3, .64, 1) both;
  animation-delay: calc(var(--i, 0) * 55ms);
}
@keyframes sc-pop { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }

/* ============================ BarLineChart ============================ */
.barline { display: flex; gap: var(--sp-2); align-items: stretch; }
.barline__svg { display: block; width: 100%; overflow: visible; }
.barline__svg.is-animated .barline__bar {
  transform-box: fill-box; transform-origin: center bottom;
  animation: chartBarIn 560ms cubic-bezier(.34, 1.1, .64, 1) backwards;
}
.barline__svg.is-animated .barline__line {
  stroke-dasharray: 1; stroke-dashoffset: 0;
  animation: la-draw 900ms cubic-bezier(.4, 0, .2, 1) 140ms backwards;
}

/* ============================ MultiBarChart ============================ */
.multibar { display: flex; flex-direction: column; }
.multibar__main { display: flex; gap: var(--sp-2); }
.multibar__group { flex: 1 1 auto; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 3px; }
.multibar__group.is-stacked { flex-direction: column-reverse; gap: 0; }
.multibar__bar {
  flex: 1 1 0; min-width: 5px; max-width: 22px;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  background: linear-gradient(180deg, var(--seg-light, var(--seg)) 0%, var(--seg) 58%, var(--seg-dark, var(--seg)) 100%);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.25);
  transition: opacity var(--t-fast), filter var(--t-fast);
}
.multibar__group.is-stacked .multibar__bar { width: 100%; max-width: 30px; border-radius: 0; flex: 0 0 auto; }
.multibar__bar.is-animated { transform-origin: bottom; animation: chartBarIn 520ms cubic-bezier(.34, 1.1, .64, 1) backwards; }
.multibar__bar.is-dim { opacity: 0.3; }
.multibar__group:hover .multibar__bar { filter: brightness(1.04); }

@media (prefers-reduced-motion: reduce) {
  .radar__shapes.is-animated, .scatter__pts.is-animated .scatter__bubble,
  .barline__svg.is-animated .barline__bar, .barline__svg.is-animated .barline__line,
  .multibar__bar.is-animated { animation: none; }
}