/* Página Comparativo — única página que sobrepõe as 4 redes orgânicas no
   mesmo gráfico. Por isso usa só a paleta genérica (--c1/--c2/--c4/--c3,
   mesmas cores já usadas em seguidores.js pros cards por rede) + rótulo
   direto na legenda — nunca paleta por-rede aqui (spec-design-system.md
   regra 5: paletas por-rede não se misturam). */

.comp-chart-card { padding: var(--space-4); }
.comp-chart-head { margin-bottom: var(--space-4); }
.comp-chart-head h2 { margin: 0 0 4px; }
#comp-chart { overflow: visible; }

.comp-table-card { margin-top: var(--space-4); }
#comp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
#comp-table th, #comp-table td { padding: 8px 10px; text-align: right; border-bottom: 1px solid var(--grid); }
#comp-table th:first-child, #comp-table td:first-child { text-align: left; }
#comp-table th { color: var(--text-2); font-weight: 500; font-size: 11px; }
#comp-table td.net-name { display: flex; align-items: center; gap: 8px; font-weight: 600; }
#comp-table td.net-name .sw { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
#comp-table td.gain { color: var(--good); }
#comp-table td.loss { color: var(--critical); }