.ca-muted { color: var(--ca-muted); }
.ca-kpis { display: grid; grid-template-columns: 1fr; gap: 12px; }
.ca-chart-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }

html.dark .ui-card,
html.dark .ca-card { border-color: var(--ca-border); }
html.dark .btn-secondary,
html.dark .ca-btn-secondary { border-color: var(--ca-border); }
html.dark mark { background: #854d0e; color: #fff; }
html.dark .ca-search-mark {
  background-color: color-mix(in srgb, var(--ca-primary) 35%, transparent);
  color: var(--ca-text);
}

@media (min-width: 700px) {
  .ca-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ca-chart-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
  .ca-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}