/* Usado por Components/UI/Spark.razor (sparkline em colunas CSS) */
.spark { display: flex; align-items: flex-end; gap: 3px; height: 44px; }
.spark i { flex: 1; background: var(--accent-soft); border-top: 2px solid var(--accent); min-width: 6px; }
.spark i.neg { background: var(--bad-bg); border-top-color: var(--bad); }

/* Usado por Components/UI/DualSpark.razor — barras pareadas receita/custo por mês */
.spark.dual { height: 110px; gap: 8px; }
.spark.dual .dual-col { flex: 1; display: flex; align-items: flex-end; gap: 3px; height: 100%; min-width: 14px; }
.spark.dual .dual-col i { flex: 1; min-width: 5px; }
.spark.dual i.revenue { background: var(--accent-soft); border-top: 2px solid var(--accent); }
.spark.dual i.cost { background: var(--bad-bg); border-top: 2px solid var(--bad); }
.spark-labels { display: flex; gap: 8px; margin-top: 6px; }
.spark-labels span { flex: 1; text-align: center; font-size: var(--fs-xs); color: var(--ink-3); }