/* Abas horizontais sublinhadas (estilo Stripe): texto simples, sublinhado na ativa. */
.tabs { display: flex; gap: 28px; margin: 4px 0 20px; border-bottom: 1px solid var(--line, var(--line, #e4e4e7)); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { position: relative; flex: 0 0 auto; margin-bottom: -1px; padding: 10px 0; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted, #6b7280); font: inherit; font-weight: 600; white-space: nowrap; cursor: pointer; }
.tab:hover { color: var(--ink, #1c1c1e); }
.tab.active { color: var(--brand, #29292c); border-bottom-color: var(--brand, #29292c); }
.tab:focus-visible { outline: 2px solid var(--brand, #29292c); outline-offset: 2px; border-radius: 4px; }
.tab-count { margin-left: 8px; padding: 1px 7px; border-radius: 999px; background: var(--brand-soft, #f1f2f4); color: var(--muted, #6b7280); font-size: 12px; font-weight: 600; }
.tab.active .tab-count { background: var(--brand, #29292c); color: var(--on-brand, #fff); }
.tab-panel[hidden] { display: none; }

@media (max-width: 720px) {
 .tabs { gap: 20px; margin-inline: -16px; padding-inline: 16px; }
}
.tab:disabled { opacity: .45; cursor: not-allowed; }
.tab:disabled:hover { color: inherit; }