/* ============================================================
   SmartLeads — Design System (Minimalista Escuro)
   ============================================================ */

:root {
    /* Light mode (secundário/funcional) */
    --sl-bg:            #FFFFFF;
    --sl-surface-1:     #FAFAFA;
    --sl-surface-2:     #F4F4F5;
    --sl-surface-3:     #E4E4E7;

    --sl-border:        #E4E4E7;
    --sl-border-strong: #D4D4D8;

    --sl-text:          #18181B;
    --sl-text-muted:    #52525B;
    --sl-text-subtle:   #71717A;

    --sl-accent:        #2563EB;
    --sl-accent-hover:  #1D4ED8;
    --sl-accent-soft:   rgba(37, 99, 235, 0.08);
    --sl-accent-ring:   rgba(37, 99, 235, 0.20);

    --sl-success:       #10B981;
    --sl-warning:       #F59E0B;
    --sl-danger:        #EF4444;
    --sl-ai:            #8B5CF6;

    --bs-body-bg:       var(--sl-bg);
    --bs-body-color:    var(--sl-text);
    --bs-border-color:  var(--sl-border);
    --bs-primary:       var(--sl-accent);
    --bs-primary-rgb:   37, 99, 235;
    --bs-secondary-color: var(--sl-text-muted);
}

[data-bs-theme="dark"] {
    --sl-bg:            #0D0D0F;
    --sl-surface-1:     #161619;
    --sl-surface-2:     #1E1E22;
    --sl-surface-3:     #27272D;

    --sl-border:        #26262C;
    --sl-border-strong: #3A3A42;

    --sl-text:          #F4F4F5;
    --sl-text-muted:    #A1A1AA;
    --sl-text-subtle:   #71717A;

    --sl-accent:        #3B82F6;
    --sl-accent-hover:  #60A5FA;
    --sl-accent-soft:   rgba(59, 130, 246, 0.12);
    --sl-accent-ring:   rgba(59, 130, 246, 0.25);

    --sl-success:       #10B981;
    --sl-warning:       #F59E0B;
    --sl-danger:        #EF4444;
    --sl-ai:            #A78BFA;

    --bs-body-bg:       var(--sl-bg);
    --bs-body-color:    var(--sl-text);
    --bs-border-color:  var(--sl-border);
    --bs-primary:       var(--sl-accent);
    --bs-primary-rgb:   59, 130, 246;
    --bs-secondary-color: var(--sl-text-muted);
    --bs-tertiary-bg:   var(--sl-surface-1);
    --bs-secondary-bg:  var(--sl-surface-2);
}

/* ============================================================
   Tipografia
   ============================================================ */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, sans-serif;
    font-feature-settings: 'cv11', 'ss01', 'ss03';
    letter-spacing: -0.005em;
    background: var(--sl-bg);
    color: var(--sl-text);
}

h1, h2, h3, h4, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-weight: 600;
    letter-spacing: -0.02em;
}

h5, h6 {
    font-weight: 600;
    letter-spacing: -0.01em;
}

.text-muted {
    color: var(--sl-text-muted) !important;
}

code, .font-mono, .tabular-nums {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   Surfaces — cards, navbar, modais
   ============================================================ */
.navbar {
    background: var(--sl-bg) !important;
    border-bottom: 1px solid var(--sl-border);
    backdrop-filter: blur(8px);
}

.card {
    background: var(--sl-surface-1);
    border: 1px solid var(--sl-border);
    border-radius: 10px;
    box-shadow: none;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.modal-content {
    background: var(--sl-surface-1);
    border: 1px solid var(--sl-border);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.35);
}

.modal-header, .modal-footer {
    border-color: var(--sl-border);
}

.dropdown-menu {
    background: var(--sl-surface-1);
    border: 1px solid var(--sl-border);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 20px rgba(0, 0, 0, 0.25);
}

.dropdown-item {
    color: var(--sl-text);
}
.dropdown-item:hover, .dropdown-item:focus {
    background: var(--sl-surface-2);
    color: var(--sl-text);
}

hr, .modal-divider {
    border-color: var(--sl-border);
    opacity: 1;
}

/* ============================================================
   Hero
   ============================================================ */
.hero-section {
    position: relative;
    overflow: hidden;
    background: var(--sl-surface-1);
    border: 1px solid var(--sl-border);
    border-radius: 12px;
    color: var(--sl-text);
    margin-bottom: 2rem;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -8%;
    width: 480px;
    height: 480px;
    background: radial-gradient(circle, var(--sl-accent-soft) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
}

.hero-section::after {
    content: '';
    position: absolute;
    bottom: -50%;
    left: -10%;
    width: 380px;
    height: 380px;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.06) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.hero-section > * {
    position: relative;
    z-index: 1;
}

/* ============================================================
   Gradient text → acento sólido sutil
   ============================================================ */
.gradient-text {
    background: none;
    -webkit-background-clip: initial;
    -webkit-text-fill-color: initial;
    background-clip: initial;
    color: var(--sl-text);
    font-weight: 600;
    letter-spacing: -0.02em;
}

.gradient-text .accent,
.text-accent {
    color: var(--sl-accent);
}

/* ============================================================
   Ícones decorativos (auth, hero) — surface + accent
   ============================================================ */
.gradient-bg {
    background: var(--sl-surface-2);
    border: 1px solid var(--sl-border);
    border-radius: 10px;
    width: 100px;
    color: var(--sl-accent) !important;
}

.gradient-bg i,
.gradient-bg.text-white,
.gradient-bg.text-white i {
    color: var(--sl-accent) !important;
}

.gradient-bg-infinite {
    background: var(--sl-surface-2);
    border: 1px solid var(--sl-border);
    border-radius: 10px;
    color: var(--sl-accent) !important;
    text-align: center;
    position: relative;
    isolation: isolate;
}

.gradient-bg-infinite::after {
    content: '';
    position: absolute;
    inset: -16px;
    background: radial-gradient(circle, var(--sl-accent-soft) 0%, transparent 65%);
    pointer-events: none;
    z-index: -1;
}

.gradient-bg-infinite i,
.gradient-bg-infinite.text-white,
.gradient-bg-infinite.text-white i {
    color: var(--sl-accent) !important;
}

/* ============================================================
   Cards interativos: search type / platform / prospect
   ============================================================ */
.search-type-card,
.platform-card,
.prospect-card {
    background: var(--sl-surface-1);
    border: 1px solid var(--sl-border);
    border-radius: 10px;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    cursor: pointer;
}

.search-type-card:hover,
.platform-card:hover,
.prospect-card:hover {
    background: var(--sl-surface-2);
    border-color: var(--sl-border-strong);
}

.search-type-card.active,
.platform-card.active {
    border-color: var(--sl-accent) !important;
    background: var(--sl-accent-soft);
    box-shadow: 0 0 0 1px var(--sl-accent-ring);
}

.prospect-card.selected {
    border: 1px solid var(--sl-accent) !important;
    background: var(--sl-accent-soft);
    box-shadow: 0 0 0 1px var(--sl-accent-ring);
}

/* Grid simétrico dos 5 menus de Tipo de Prospecção */
.search-types-grid {
    display: grid;
    gap: 0.65rem;
    grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
    .search-types-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 992px) {
    .search-types-grid { grid-template-columns: repeat(5, 1fr); }
}

.search-types-grid .search-type-card {
    height: 100%;
    display: flex;
}

.search-types-grid .search-type-card .card-body {
    padding: 0.85rem 0.6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
}

.search-types-grid .search-type-card .card-title {
    font-size: 0.82rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.search-types-grid .search-type-card .card-text {
    font-size: 0.72rem;
    color: var(--sl-text-muted);
    line-height: 1.3;
    margin-bottom: 0.45rem;
    min-height: 2.3em;
}

.search-types-grid .search-type-card .platform-example {
    font-size: 0.68rem;
    color: var(--sl-text-subtle);
    font-style: italic;
    line-height: 1.2;
    margin-top: auto;
}

.search-type-icon {
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    /* Override hardcoded 100px width das classes *-gradient */
}

.search-type-icon i {
    line-height: 1;
}

/* Os gradient backgrounds têm width:100px fixo — sobrescreve no contexto do grid */
.search-types-grid .maps-gradient,
.search-types-grid .gradient-bg,
.search-types-grid .hibrido-gradient,
.search-types-grid .provedores-gradient,
.search-types-grid .receita-gradient {
    width: 44px;
    height: 44px;
}

/* ============================================================
   Stats card
   ============================================================ */
.stats-card {
    background: var(--sl-surface-1);
    border: 1px solid var(--sl-border);
    border-radius: 10px;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.stats-card:hover {
    border-color: var(--sl-border-strong);
    background: var(--sl-surface-2);
}

[data-bs-theme="dark"] .stats-card {
    background: var(--sl-surface-1);
}

/* ============================================================
   Animação de entrada
   ============================================================ */
.fade-in {
    animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================
   Seções (export, search-header, pagination)
   ============================================================ */
.export-section {
    background: var(--sl-surface-1);
    border: 1px solid var(--sl-border);
    border-radius: 10px;
    position: relative;
}

.export-section::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--sl-success);
    border-radius: 10px 0 0 10px;
}

.search-header {
    background: var(--sl-surface-1);
    border: 1px solid var(--sl-border);
    border-radius: 10px;
}

.pagination-controls {
    background: var(--sl-surface-1);
    border: 1px solid var(--sl-border);
    border-radius: 10px;
    padding: 12px 16px;
    margin: 20px 0;
}

.filter-status {
    background: var(--sl-accent-soft);
    border: 1px solid var(--sl-accent-ring);
    border-radius: 9999px;
    padding: 6px 12px;
    font-size: 0.8rem;
    margin-bottom: 10px;
    color: var(--sl-text);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ============================================================
   Badges / status pills
   ============================================================ */
.badge {
    font-weight: 500;
    letter-spacing: 0;
}

.whatsapp-status {
    font-size: 0.7rem;
    padding: 3px 8px;
    border-radius: 9999px;
    font-weight: 500;
}

.rating-stars {
    color: var(--sl-warning);
}

/* ============================================================
   Botões
   ============================================================ */
.btn {
    border-radius: 6px;
    font-weight: 500;
    letter-spacing: -0.005em;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn-lg {
    border-radius: 8px;
}

.btn-primary {
    background: var(--sl-accent);
    border-color: var(--sl-accent);
    color: #FFFFFF;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background: var(--sl-accent-hover) !important;
    border-color: var(--sl-accent-hover) !important;
    color: #FFFFFF;
}

.btn-outline-secondary {
    background: transparent;
    border: 1px solid var(--sl-border-strong);
    color: var(--sl-text);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    background: var(--sl-surface-2);
    border-color: var(--sl-border-strong);
    color: var(--sl-text);
}

.btn-outline-primary {
    background: transparent;
    border: 1px solid var(--sl-accent);
    color: var(--sl-accent);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background: var(--sl-accent-soft);
    border-color: var(--sl-accent);
    color: var(--sl-accent);
}

.btn-success {
    background: var(--sl-success);
    border-color: var(--sl-success);
    color: #FFFFFF;
}

.btn-success:hover, .btn-success:focus {
    background: #059669;
    border-color: #059669;
}

.btn-danger {
    background: var(--sl-danger);
    border-color: var(--sl-danger);
}

.export-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ============================================================
   Inputs
   ============================================================ */
.form-control,
.form-select {
    background: var(--sl-surface-2);
    border: 1px solid var(--sl-border);
    color: var(--sl-text);
    border-radius: 6px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background: var(--sl-surface-2);
    color: var(--sl-text);
}

.form-control::placeholder {
    color: var(--sl-text-subtle);
}

.form-control:focus,
.form-select:focus {
    background: var(--sl-surface-2);
    border-color: var(--sl-accent);
    box-shadow: 0 0 0 3px var(--sl-accent-ring);
    color: var(--sl-text);
}

.input-group-text {
    background: var(--sl-surface-3);
    border: 1px solid var(--sl-border);
    color: var(--sl-text-muted);
    border-radius: 6px;
}

.form-label {
    color: var(--sl-text);
    font-weight: 500;
    letter-spacing: -0.005em;
}

.form-check-input {
    background-color: var(--sl-surface-2);
    border-color: var(--sl-border-strong);
}

.form-check-input:checked {
    background-color: var(--sl-accent);
    border-color: var(--sl-accent);
}

.form-check-input:focus {
    border-color: var(--sl-accent);
    box-shadow: 0 0 0 3px var(--sl-accent-ring);
}

/* ============================================================
   Alerts
   ============================================================ */
.alert {
    border-radius: 8px;
    border-width: 1px;
    font-weight: 500;
}

.alert-danger {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.25);
    color: var(--sl-danger);
}

.alert-success {
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.25);
    color: var(--sl-success);
}

.alert-warning {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.25);
    color: var(--sl-warning);
}

.alert-info {
    background: var(--sl-accent-soft);
    border-color: var(--sl-accent-ring);
    color: var(--sl-text);
}

/* ============================================================
   Ícones de identidade de plataforma (mantidos como tags)
   ============================================================ */
.linkedin-gradient {
    background: linear-gradient(135deg, #0077B5, #004182);
    width: 100px;
    border-radius: 10px;
}

.instagram-gradient {
    background: linear-gradient(135deg, #E4405F, #833AB4);
    width: 100px;
    border-radius: 10px;
}

.maps-gradient {
    background: linear-gradient(135deg, #4285F4, #34A853);
    width: 100px;
    border-radius: 10px;
}

.hibrido-gradient {
    background: linear-gradient(135deg, #6F42C1, #3B82F6, #10B981);
    width: 100px;
    border-radius: 10px;
}

.provedores-gradient {
    background: linear-gradient(135deg, #6366F1, #EC4899);
    width: 100px;
    border-radius: 10px;
}

.receita-gradient {
    background: linear-gradient(135deg, #059669, #10B981, #84CC16);
    width: 100px;
    border-radius: 10px;
}

/* ============================================================
   Modo Receita CNPJ (Casa dos Dados)
   ============================================================ */
#cdd-results-table thead th {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted, #6b7280);
}
#cdd-results-table tbody tr:hover {
    background-color: rgba(16, 185, 129, 0.04);
}
.btn-outline-purple {
    color: #8B5CF6;
    border-color: #8B5CF6;
}
.btn-outline-purple:hover {
    background: #8B5CF6;
    color: #fff;
}
#cdd-cost-hint strong { color: var(--bs-success, #10B981); }
.ts-control { min-height: 38px; }
.ts-wrapper.multi .ts-control > div { background: rgba(16,185,129,0.15); border: 1px solid rgba(16,185,129,0.35); color: inherit; }

/* ============================================================
   Modo Provedores: card, badges de fonte, modal BGP
   ============================================================ */
.provedor-card {
    border-left: 3px solid #6366f1;
}

.bgp-source-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    background: rgba(99, 102, 241, 0.12);
    color: #a5b4fc;
    border: 1px solid rgba(99, 102, 241, 0.35);
}

.bgp-source-badge.src-bgpview { background: rgba(245, 158, 11, 0.12); color: #fbbf24; border-color: rgba(245, 158, 11, 0.35); }
.bgp-source-badge.src-ripe { background: rgba(16, 185, 129, 0.12); color: #34d399; border-color: rgba(16, 185, 129, 0.35); }
.bgp-source-badge.src-peeringdb { background: rgba(59, 130, 246, 0.12); color: #60a5fa; border-color: rgba(59, 130, 246, 0.35); }
.bgp-source-badge.src-rdap { background: rgba(236, 72, 153, 0.12); color: #f472b6; border-color: rgba(236, 72, 153, 0.35); }
.bgp-source-badge.src-brasilapi { background: rgba(34, 197, 94, 0.12); color: #4ade80; border-color: rgba(34, 197, 94, 0.35); }

.provedor-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    background: rgba(99, 102, 241, 0.08);
    min-width: 90px;
    border: 1px solid transparent;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.provedor-stat.clickable {
    cursor: pointer;
}
.provedor-stat.clickable:hover {
    background: rgba(99, 102, 241, 0.18);
    border-color: rgba(99, 102, 241, 0.45);
    transform: translateY(-1px);
}
.provedor-stat.clickable:hover .stat-label::after {
    content: ' ›';
    color: #a5b4fc;
}
.provedor-stat.disabled {
    opacity: 0.5;
}
.provedor-stat .stat-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: #c7d2fe;
    font-family: 'JetBrains Mono', monospace;
}
.provedor-stat .stat-label {
    font-size: 0.7rem;
    color: var(--bs-secondary-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.provedor-asn-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    background: linear-gradient(135deg, #6366F1, #EC4899);
    color: #fff;
    border-radius: 999px;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 0.8rem;
}

/* Segurança & Mitigação (card dentro do card do provedor) */
.mitigation-card {
    background: rgba(99, 102, 241, 0.04);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    margin-top: 0.75rem;
}
.mitigation-title {
    color: #c7d2fe;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.6rem;
    font-weight: 600;
}
.mitigation-detected {
    background: rgba(16, 185, 129, 0.08);
    border-left: 3px solid #10b981;
    padding: 0.6rem 0.8rem;
    border-radius: 0.4rem;
}
.mitigation-detected .mitigation-header { color: #34d399; }
.mitigation-none {
    background: rgba(107, 114, 128, 0.06);
    border-left: 3px solid #6b7280;
    padding: 0.6rem 0.8rem;
    border-radius: 0.4rem;
    color: var(--bs-secondary-color);
}
.mitigation-none .mitigation-header { color: #9ca3af; }
.mitigation-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.9rem;
}
.mitigation-match {
    padding: 0.5rem 0;
    border-top: 1px dashed rgba(255, 255, 255, 0.08);
}
.mitigation-match:first-of-type { border-top: none; padding-top: 0.4rem; }

/* Modal BGP — layout flex + painel lateral de info do nó */
.bgp-content-flex {
    display: flex;
    gap: 0.75rem;
    align-items: stretch;
}
.bgp-content-flex > #bgp-network-container {
    flex: 1 1 auto;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    background: rgba(0, 0, 0, 0.15);
    min-width: 0;
}
.bgp-node-info-panel {
    flex: 0 0 320px;
    border: 1px solid rgba(99, 102, 241, 0.25);
    border-radius: 0.5rem;
    padding: 0.85rem;
    background: rgba(99, 102, 241, 0.04);
    overflow-y: auto;
    max-height: 600px;
}
.bgp-node-info-empty {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--bs-secondary-color);
    text-align: center;
    padding: 1rem;
}
.bgp-node-info-empty i {
    font-size: 2rem;
    opacity: 0.4;
}
.bgp-node-info-header h6 {
    color: #e0e7ff;
    font-weight: 600;
}
.bgp-node-info-section {
    border-top: 1px solid rgba(99, 102, 241, 0.18);
    padding-top: 0.6rem;
}
.bgp-node-info-section-title {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #a5b4fc;
    margin-bottom: 0.4rem;
    font-weight: 600;
}
.bgp-node-info-metrics > div {
    display: flex;
    justify-content: space-between;
    padding: 0.2rem 0;
    font-size: 0.82rem;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.04);
}
.bgp-node-info-metrics > div:last-child { border-bottom: none; }
.bgp-node-info-metrics .metric-label { color: var(--bs-secondary-color); }
.bgp-node-info-metrics .metric-value {
    font-family: 'JetBrains Mono', monospace;
    color: #c7d2fe;
    font-weight: 600;
}

@media (max-width: 768px) {
    .bgp-content-flex { flex-direction: column; }
    .bgp-node-info-panel { flex: 0 0 auto; max-height: 320px; }
    .bgp-content-flex > #bgp-network-container { height: 420px !important; }
}

.bgp-legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 0.4rem;
    vertical-align: middle;
}

/* Progress de busca de provedores */
.provedores-progress {
    background: rgba(99, 102, 241, 0.06);
    border: 1px solid rgba(99, 102, 241, 0.25);
    border-radius: 0.5rem;
    padding: 0.9rem 1rem;
    margin-bottom: 1rem;
}

.provedores-steps {
    list-style: none;
    padding-left: 0;
    margin: 0;
    max-height: 220px;
    overflow-y: auto;
}

.provedores-steps li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.2rem 0;
    color: var(--bs-secondary-color);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    line-height: 1.4;
}

.provedores-steps li.step-group {
    margin-top: 0.4rem;
    color: #c7d2fe;
    font-weight: 600;
    border-top: 1px dashed rgba(99, 102, 241, 0.2);
    padding-top: 0.4rem;
}
.provedores-steps li.step-group:first-child { border-top: none; padding-top: 0; }

.provedores-steps li .step-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.provedores-steps li.step-pending .step-icon::before { content: '○'; color: #6b7280; }
.provedores-steps li.step-running .step-icon::before { content: '⟳'; color: #60a5fa; animation: prov-spin 1s linear infinite; display: inline-block; }
.provedores-steps li.step-done .step-icon::before { content: '✓'; color: #10b981; font-weight: 700; }
.provedores-steps li.step-failed .step-icon::before { content: '✕'; color: #f87171; font-weight: 700; }
.provedores-steps li.step-warn .step-icon::before { content: '!'; color: #fbbf24; font-weight: 700; }

.provedores-steps li.step-done { color: #d1fae5; }
.provedores-steps li.step-failed { color: #fecaca; }
.provedores-steps li.step-warn { color: #fde68a; }
.provedores-steps li.step-running { color: #dbeafe; }

.provedores-steps li .step-meta {
    margin-left: auto;
    color: var(--bs-secondary-color);
    font-size: 0.7rem;
    opacity: 0.8;
}

@keyframes prov-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Tabela do modal de detalhes do provedor */
.provedor-detail-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.provedor-detail-table th {
    position: sticky;
    top: 0;
    background: var(--sl-surface-2, #1c1c20);
    color: #c7d2fe;
    text-align: left;
    padding: 0.45rem 0.6rem;
    border-bottom: 1px solid rgba(99, 102, 241, 0.3);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.provedor-detail-table td {
    padding: 0.45rem 0.6rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    vertical-align: middle;
}
.provedor-detail-table tr:hover td {
    background: rgba(99, 102, 241, 0.06);
}
.provedor-detail-table .asn-cell {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    color: #a5b4fc;
}
.provedor-detail-table .prefix-cell {
    font-family: 'JetBrains Mono', monospace;
    color: #e0e7ff;
}
.provedor-detail-table .country-cell {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
}
.provedor-detail-table .links-cell a {
    color: var(--bs-secondary-color);
    text-decoration: none;
    margin-right: 0.4rem;
    font-size: 0.75rem;
}
.provedor-detail-table .links-cell a:hover {
    color: #a5b4fc;
}
.provedor-detail-empty {
    padding: 2rem;
    text-align: center;
    color: var(--bs-secondary-color);
}
.roa-badge { font-size: 0.65rem; padding: 0.1rem 0.4rem; }
.roa-badge.roa-valid { background: rgba(16, 185, 129, 0.2); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.4); }
.roa-badge.roa-invalid { background: rgba(248, 113, 113, 0.2); color: #fca5a5; border: 1px solid rgba(248, 113, 113, 0.4); }
.roa-badge.roa-unknown { background: rgba(156, 163, 175, 0.2); color: #d1d5db; border: 1px solid rgba(156, 163, 175, 0.4); }

.cell-loading {
    color: var(--bs-secondary-color);
    font-size: 0.72rem;
    font-style: italic;
    opacity: 0.7;
    animation: cell-pulse 1.4s ease-in-out infinite;
}

@keyframes cell-pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.9; }
}

.spinning-icon {
    display: inline-block;
    animation: prov-spin 1.4s linear infinite;
}

/* ============================================================
   Híbrido: card de empresa com perfis aninhados
   ============================================================ */
.hibrido-empresa-card {
    border-left: 3px solid var(--sl-ai);
}

.hibrido-perfis-toggle {
    background: var(--sl-surface-2);
    border: none;
    border-top: 1px solid var(--sl-border);
    width: 100%;
    padding: 10px 16px;
    text-align: left;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--sl-text);
}

.hibrido-perfis-toggle:hover {
    background: var(--sl-surface-3);
}

.hibrido-perfis-toggle .toggle-icon {
    transition: transform 0.15s ease;
}

.hibrido-perfis-toggle.expanded .toggle-icon {
    transform: rotate(180deg);
}

.hibrido-perfis-section {
    padding: 10px 16px 16px 16px;
    background: var(--sl-surface-1);
    border-top: 1px dashed var(--sl-border);
}

[data-bs-theme="dark"] .hibrido-perfis-section {
    background: var(--sl-bg);
}

.hibrido-perfil-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    margin-bottom: 4px;
    border-left: 2px solid transparent;
    transition: background-color 0.15s ease;
}

.hibrido-perfil-item:hover {
    background: var(--sl-surface-2);
}

.hibrido-perfil-item.platform-linkedin {
    border-left-color: #0077B5;
}

.hibrido-perfil-item.platform-instagram {
    border-left-color: #E4405F;
}

.hibrido-perfil-item.selected {
    background: var(--sl-accent-soft);
    border-left-color: var(--sl-accent);
}

.hibrido-perfil-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: #FFFFFF;
}

.hibrido-perfil-icon.linkedin {
    background: #0077B5;
}

.hibrido-perfil-icon.instagram {
    background: linear-gradient(135deg, #E4405F, #833AB4);
}

.hibrido-perfil-content {
    flex: 1;
    min-width: 0;
}

.hibrido-perfil-title {
    font-weight: 500;
    font-size: 0.9rem;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hibrido-perfil-snippet {
    font-size: 0.8rem;
    color: var(--sl-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hibrido-perfil-actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.hibrido-perfis-empty {
    padding: 12px;
    text-align: center;
    color: var(--sl-text-subtle);
    font-size: 0.85rem;
    font-style: italic;
}

.hibrido-progress {
    background: var(--sl-surface-1);
    border: 1px solid var(--sl-border);
    border-left: 3px solid var(--sl-ai);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 16px;
}

/* ============================================================
   Mini map
   ============================================================ */
#minimap {
    height: 560px;
    border-radius: 0 0 10px 10px;
    border: none;
    box-shadow: none;
}

#map-section {
    overflow: hidden;
}

.platform-example {
    font-size: 0.85rem;
    color: var(--sl-text-subtle);
}

.search-mode-section {
    transition: opacity 0.15s ease;
}

/* ============================================================
   Auth overlays — license + login
   ============================================================ */
.login-overlay,
.license-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--sl-bg);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.license-overlay {
    z-index: 10000;
    display: none;
}

.login-overlay::before,
.license-overlay::before {
    content: '';
    position: absolute;
    top: -20%;
    left: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, var(--sl-accent-soft) 0%, transparent 65%);
    pointer-events: none;
}

.login-overlay::after,
.license-overlay::after {
    content: '';
    position: absolute;
    bottom: -20%;
    right: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

.login-card,
.license-card {
    position: relative;
    background: var(--sl-surface-1);
    border: 1px solid var(--sl-border);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 16px 40px rgba(0, 0, 0, 0.35);
    padding: 2.5rem;
    width: 100%;
    max-width: 460px;
    color: var(--sl-text);
}

[data-bs-theme="dark"] .login-card,
[data-bs-theme="dark"] .license-card {
    background: var(--sl-surface-1);
    color: var(--sl-text);
}

.license-card {
    text-align: center;
}

.main-content {
    display: none;
}

.main-content.authenticated {
    display: block;
}

.login-form .form-control:focus {
    border-color: var(--sl-accent);
    box-shadow: 0 0 0 3px var(--sl-accent-ring);
}

.login-loading,
.license-loading,
.loading-spinner {
    display: none;
}

/* Removida pulse-animation — auth icons agora são estáticos */
.pulse-animation {
    animation: none;
}

/* ============================================================
   ANÁLISE COM IA — botão e modal
   ============================================================ */
.btn-outline-purple {
    color: var(--sl-ai);
    border: 1px solid var(--sl-ai);
    background: transparent;
    border-radius: 6px;
    font-weight: 500;
}

.btn-outline-purple:hover,
.btn-outline-purple:focus {
    background: rgba(139, 92, 246, 0.10);
    color: var(--sl-ai);
    border-color: var(--sl-ai);
}

.btn-outline-purple:disabled {
    opacity: 0.5;
}

.text-purple {
    color: var(--sl-ai) !important;
}

.ai-analyze-btn.loading {
    opacity: 0.6;
    pointer-events: none;
}

.ai-section-card {
    border-left: 3px solid var(--sl-ai);
    border-radius: 6px;
    padding: 0.85rem 1rem;
    margin-bottom: 0.75rem;
    background: rgba(139, 92, 246, 0.04);
    border-top: 1px solid var(--sl-border);
    border-right: 1px solid var(--sl-border);
    border-bottom: 1px solid var(--sl-border);
}

[data-bs-theme="dark"] .ai-section-card {
    background: rgba(139, 92, 246, 0.06);
}

.ai-section-header {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
    color: var(--sl-ai);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: -0.005em;
}

.ai-section-body {
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--sl-text);
}

.ai-section-body ul {
    margin: 0;
}

.ai-section-body li {
    margin-bottom: 0.3rem;
}

.ai-deep-card {
    border-radius: 8px;
    padding: 0.85rem 1rem;
    margin-bottom: 0.85rem;
    border: 1px solid var(--sl-border);
    background: var(--sl-surface-1);
}

.ai-deep-reputation {
    border-left: 3px solid #60A5FA;
}

.ai-deep-reputation .ai-section-header {
    color: #60A5FA;
}

.ai-deep-complaints {
    border-left: 3px solid var(--sl-warning);
}

.ai-deep-complaints .ai-section-header {
    color: var(--sl-warning);
}

.ai-deep-subsection {
    margin-bottom: 0.85rem;
}

.ai-deep-subsection:last-child {
    margin-bottom: 0;
}

.ai-review-list,
.ai-complaint-list,
.ai-socios-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.ai-review-item,
.ai-complaint-item,
.ai-socio-item {
    padding: 0.55rem 0.85rem;
    border-radius: 6px;
    background: var(--sl-surface-2);
    margin-bottom: 0.4rem;
    border: 1px solid var(--sl-border);
}

.ai-review-stars {
    color: var(--sl-warning);
    letter-spacing: 1px;
}

.ai-deep-cnpj {
    border-left: 3px solid var(--sl-success);
}

.ai-deep-cnpj .ai-section-header {
    color: var(--sl-success);
}

.ai-lacuna-item {
    padding: 0.55rem 0.85rem;
    border-radius: 6px;
    background: rgba(245, 158, 11, 0.06);
    border-left: 2px solid var(--sl-warning);
    margin-bottom: 0.35rem;
}

.ai-decisor-item {
    padding: 0.85rem 1rem;
    border-radius: 8px;
    background: var(--sl-surface-1);
    border: 1px solid var(--sl-border);
    border-left: 3px solid var(--sl-ai);
    margin-bottom: 0.6rem;
}

.ai-decisor-nome {
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.ai-decisor-score {
    font-size: 0.8rem;
    padding: 0.3rem 0.7rem;
    border-radius: 9999px;
}

.ai-evidencia-list li {
    margin-bottom: 0.55rem;
}

.ai-evidencia-list li:last-child {
    margin-bottom: 0;
}

.ai-objecao-item {
    padding: 0.55rem 0.85rem;
    border-radius: 6px;
    background: var(--sl-surface-2);
    border: 1px solid var(--sl-border);
    margin-bottom: 0.4rem;
}

.ai-ticket-faixa {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--sl-success);
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   Scrollbar refinada (webkit)
   ============================================================ */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--sl-surface-3);
    border-radius: 9999px;
    border: 2px solid var(--sl-bg);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--sl-border-strong);
}

/* ============================================================
   Tabelas (caso usadas)
   ============================================================ */
.table {
    color: var(--sl-text);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--sl-border);
}

.table > :not(caption) > * > * {
    background: transparent;
    border-bottom-color: var(--sl-border);
    color: var(--sl-text);
}

/* ============================================================
   Nav toggler / theme buttons
   ============================================================ */
.navbar-brand {
    font-weight: 600;
    letter-spacing: -0.015em;
}

.btn-icon, .navbar .btn {
    border-radius: 8px;
}

/* ============================================================
   Credits — Infográfico de custos (legend card + modal)
   ============================================================ */
.credits-infographic {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* HERO — duas regras destacadas no topo */
.credits-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.credits-hero-rule {
    background: linear-gradient(135deg, var(--sl-accent-soft), transparent);
    border: 1px solid var(--sl-accent-ring);
    border-radius: 14px;
    padding: 14px 18px;
}

.credits-hero-rule-alt {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.10), transparent);
    border-color: rgba(245, 158, 11, 0.30);
}

.credits-hero-rule-title {
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--sl-text);
    margin-bottom: 4px;
    letter-spacing: -0.01em;
}

.credits-hero-rule-text {
    font-size: 0.85rem;
    color: var(--sl-text-muted);
    line-height: 1.45;
}

/* SEÇÕES — Custos e Planos */
.credits-section {
    background: var(--sl-surface-1);
    border: 1px solid var(--sl-border);
    border-radius: 14px;
    overflow: hidden;
}

.credits-section-header {
    background: var(--sl-surface-2);
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sl-text);
    border-bottom: 1px solid var(--sl-border);
}

.credits-section-header i {
    font-size: 1.1rem;
    color: var(--sl-accent);
}

/* LINHAS DE OPERAÇÕES */
.credits-rows {
    padding: 6px 0;
}

.credits-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--sl-border);
    transition: background 0.15s ease;
}

.credits-row:last-child {
    border-bottom: none;
}

.credits-row:hover {
    background: var(--sl-surface-2);
}

.credits-row-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.4rem;
}

.credits-row-info {
    flex: 1;
    min-width: 0;
}

.credits-row-title {
    font-weight: 600;
    font-size: 1rem;
    color: var(--sl-text);
    margin-bottom: 2px;
    letter-spacing: -0.01em;
}

.credits-row-desc {
    font-size: 0.82rem;
    color: var(--sl-text-muted);
    line-height: 1.4;
}

.credits-row-cost {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 110px;
    text-align: right;
}

.credits-row-cost-num {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--sl-text);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.credits-row-cost-unit {
    font-size: 0.78rem;
    color: var(--sl-text-muted);
    margin-top: 2px;
    font-weight: 500;
}

.credits-row-cost-hint {
    font-size: 0.7rem;
    color: var(--sl-text-subtle);
    margin-top: 4px;
    font-style: italic;
}

.credits-row-cost-brl {
    font-size: 0.82rem;
    color: var(--sl-accent);
    margin-top: 4px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

/* ============================================================
   AS-PATH MONITORING — seção dedicada na Tabela de Custos
   ============================================================ */
.credits-aspath-section .credits-section-header i {
    color: #A855F7; /* púrpura para combinar com tema "monitor" */
}

.credits-section-sub {
    margin-left: auto;
    font-size: 0.7rem;
    color: var(--sl-text-subtle);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    font-style: italic;
}

.aspath-intro {
    padding: 14px 18px 6px;
    font-size: 0.88rem;
    color: var(--sl-text-muted);
    line-height: 1.5;
}

.aspath-intro strong {
    color: var(--sl-text);
}

.aspath-block {
    padding: 12px 18px;
    border-top: 1px dashed var(--sl-border);
}

.aspath-block-title {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--sl-text);
    font-weight: 700;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.aspath-block-title i {
    color: var(--sl-accent);
    font-size: 0.95rem;
}

.aspath-block-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.aspath-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--sl-surface-2);
    border-radius: 8px;
    font-size: 0.88rem;
}

.aspath-row-label {
    color: var(--sl-text);
    font-weight: 500;
}

.aspath-row-val {
    color: var(--sl-text);
    font-variant-numeric: tabular-nums;
}

.aspath-row-val strong {
    color: var(--sl-accent);
    font-size: 1rem;
}

.aspath-row-val small {
    color: var(--sl-text-subtle);
    font-size: 0.78rem;
    margin-left: 4px;
}

.aspath-row-val.aspath-free {
    color: #22C55E;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
}

.aspath-table-wrap {
    overflow-x: auto;
    margin: 0 -4px;
}

.aspath-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 6px;
    font-size: 0.85rem;
}

.aspath-table th {
    text-align: center;
    padding: 8px 6px;
    font-weight: 600;
    color: var(--sl-text-muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--sl-border);
}

.aspath-table th.aspath-highlight {
    color: var(--sl-accent);
}

.aspath-table td {
    text-align: center;
    padding: 10px 8px;
    background: var(--sl-surface-2);
    border-radius: 8px;
    color: var(--sl-text);
}

.aspath-table td.aspath-mode {
    text-align: left;
    background: transparent;
    font-weight: 600;
}

.aspath-table td.aspath-highlight {
    background: rgba(168, 85, 247, 0.10);
    border: 1px solid rgba(168, 85, 247, 0.30);
}

.aspath-cr {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--sl-text);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.aspath-table td.aspath-highlight .aspath-cr {
    color: #A855F7;
}

.aspath-hint {
    font-size: 0.7rem;
    color: var(--sl-text-subtle);
    margin-top: 4px;
    font-style: italic;
}

.aspath-formula {
    margin-top: 10px;
    padding: 8px 12px;
    background: var(--sl-surface-2);
    border-radius: 8px;
    font-size: 0.78rem;
    color: var(--sl-text-muted);
    line-height: 1.5;
}

.aspath-formula i {
    color: var(--sl-accent);
    margin-right: 4px;
}

.aspath-formula code {
    background: var(--sl-surface-1);
    padding: 2px 6px;
    border-radius: 4px;
    color: var(--sl-text);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78rem;
}

.aspath-policies {
    padding: 10px 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-top: 1px dashed var(--sl-border);
}

.aspath-policy {
    font-size: 0.82rem;
    color: var(--sl-text-muted);
    line-height: 1.5;
}

.aspath-policy i {
    color: var(--sl-accent);
    margin-right: 6px;
}

.aspath-policy strong {
    color: var(--sl-text);
}

@media (max-width: 640px) {
    .aspath-table { font-size: 0.78rem; }
    .aspath-cr { font-size: 1.05rem; }
    .aspath-row { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* TABELA DE PLANOS */
.credits-planos-table-wrap {
    padding: 0 12px;
}

.credits-planos-table {
    width: 100%;
    border-collapse: collapse;
    margin: 6px 0;
}

.credits-planos-table thead th {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--sl-text-muted);
    font-weight: 600;
    padding: 12px 10px;
    border-bottom: 2px solid var(--sl-border);
    text-align: center;
}

.credits-planos-table thead th:first-child {
    text-align: left;
}

.credits-planos-table thead th small {
    font-size: 0.62rem;
    color: var(--sl-text-subtle);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}

.credits-planos-table tbody td {
    padding: 12px 10px;
    border-bottom: 1px solid var(--sl-border);
    font-size: 0.92rem;
    color: var(--sl-text);
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.credits-planos-table tbody td:first-child {
    text-align: left;
    font-size: 1rem;
    color: var(--sl-accent);
}

.credits-planos-table tbody tr:last-child td {
    border-bottom: none;
}

.credits-planos-table tbody tr:hover td {
    background: var(--sl-surface-2);
}

.credits-planos-name {
    color: var(--sl-accent);
}

.credits-planos-note {
    padding: 10px 18px 14px;
    font-size: 0.78rem;
    color: var(--sl-text-subtle);
    display: flex;
    align-items: center;
    gap: 6px;
}

.credits-planos-note i {
    color: var(--sl-accent);
}

/* TABELA DE PLANOS — Premium (com preço e R$/cr) */
.credits-planos-table-wide thead th {
    font-size: 0.7rem;
    padding: 12px 8px;
}

.credits-planos-table-wide tbody td {
    padding: 14px 8px;
}

.credits-plano-name-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    line-height: 1.1;
}

.credits-plano-name-cell strong {
    font-size: 1.05rem;
    color: var(--sl-accent);
}

.credits-plano-name-unit {
    font-size: 0.7rem;
    color: var(--sl-text-subtle);
    font-weight: 400;
}

.credits-plano-tag {
    margin-top: 4px;
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--sl-text-muted);
    background: var(--sl-surface-2);
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
    align-self: flex-start;
}

.credits-plano-price-cell strong {
    font-size: 1.1rem;
    color: var(--sl-text);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.credits-plano-rate-cell {
    color: var(--sl-text-muted);
    font-size: 0.88rem;
}

.credits-plano-rate-cell small {
    color: var(--sl-text-subtle);
    margin-left: 1px;
    font-size: 0.72rem;
}

.credits-plano-highlight {
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--sl-accent) 8%, transparent),
        transparent);
    position: relative;
}

.credits-plano-highlight td:first-child::before {
    content: '★';
    color: var(--sl-accent);
    margin-right: 4px;
    font-size: 0.85rem;
}

.credits-plano-highlight .credits-plano-tag {
    background: color-mix(in srgb, var(--sl-accent) 18%, transparent);
    color: var(--sl-accent);
}

/* MINI-CARDS DE INFORMAÇÃO */
.credits-minicards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.credits-minicard {
    background: var(--sl-surface-1);
    border: 1px solid var(--sl-border);
    border-radius: 14px;
    padding: 18px;
    text-align: center;
    transition: transform 0.15s ease, border-color 0.15s ease;
}

.credits-minicard:hover {
    transform: translateY(-2px);
    border-color: var(--sl-border-strong);
}

.credits-minicard-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin: 0 auto 10px;
}

.credits-minicard-danger .credits-minicard-icon  { background: rgba(239, 68, 68, 0.12);  color: var(--sl-danger); }
.credits-minicard-success .credits-minicard-icon { background: rgba(34, 197, 94, 0.12);  color: #22C55E; }
.credits-minicard-info .credits-minicard-icon    { background: var(--sl-accent-soft);    color: var(--sl-accent); }

.credits-minicard-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--sl-text);
    margin-bottom: 6px;
    letter-spacing: -0.01em;
}

.credits-minicard-text {
    font-size: 0.82rem;
    color: var(--sl-text-muted);
    line-height: 1.45;
}

/* RESPONSIVO */
@media (max-width: 640px) {
    .credits-hero { grid-template-columns: 1fr; }
    .credits-row { flex-wrap: wrap; padding: 12px 14px; }
    .credits-row-info { flex-basis: calc(100% - 64px); }
    .credits-row-cost {
        min-width: 0;
        flex-direction: row;
        align-items: baseline;
        gap: 6px;
        margin-left: 64px;
    }
    .credits-row-cost-num { font-size: 1.4rem; }
    .credits-row-cost-brl { font-size: 0.78rem; margin-top: 0; margin-left: 2px; }
    .credits-row-cost-hint { display: none; }
    .credits-planos-table thead th,
    .credits-planos-table tbody td { padding: 8px 6px; font-size: 0.8rem; }
    .credits-planos-table-wide { font-size: 0.78rem; }
    .credits-planos-table-wide thead th { font-size: 0.62rem; padding: 8px 4px; }
    .credits-planos-table-wide tbody td { padding: 10px 4px; }
    .credits-plano-name-cell strong { font-size: 0.9rem; }
    .credits-plano-name-unit { display: none; }
    .credits-plano-tag { font-size: 0.58rem; padding: 1px 4px; }
    .credits-plano-price-cell strong { font-size: 0.95rem; }
    .credits-plano-rate-cell { font-size: 0.78rem; }
}

/* LEGEND CARD na home — card collapsible */
#credits-legend-card .card-header {
    background: var(--sl-surface-1);
    border-bottom: 1px solid var(--sl-border);
    font-weight: 500;
    padding: 12px 16px;
}

#credits-legend-card .card-header:hover {
    background: var(--sl-surface-2);
}

#credits-legend-card .card-body {
    padding: 18px;
    background: var(--sl-bg);
}

/* MODAL de créditos — refinamentos */
#creditsModal .modal-body { padding: 1rem 1.25rem 1.5rem; }

#creditsModal .nav-tabs .nav-link {
    color: var(--sl-text-muted);
    border: none;
    border-bottom: 2px solid transparent;
    font-weight: 500;
}

#creditsModal .nav-tabs .nav-link.active {
    color: var(--sl-accent);
    background: transparent;
    border-bottom-color: var(--sl-accent);
}

/* ============================================================
   AS-PATH MONITORING — UI
   ============================================================ */

/* Botão "Monitorar" no card do provedor */
.btn-monitor-aspath {
    color: #A855F7;
    border: 1px solid rgba(168, 85, 247, 0.5);
    background: rgba(168, 85, 247, 0.08);
    font-weight: 600;
}
.btn-monitor-aspath:hover {
    background: rgba(168, 85, 247, 0.18);
    color: #C084FC;
    border-color: rgba(168, 85, 247, 0.8);
}

/* Gradiente do card "Monitoramentos" no grid de tipos */
.aspath-gradient {
    background: linear-gradient(135deg, #A855F7 0%, #6366F1 100%);
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}

/* ---------- Modal de criação ---------- */
.aspath-modal-hero {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 0 16px;
    border-bottom: 1px solid var(--sl-border);
    margin-bottom: 18px;
}

.aspath-modal-section {
    margin-bottom: 18px;
}

.aspath-modal-section-title {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--sl-text-muted);
    margin-bottom: 8px;
}

.aspath-mode-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.aspath-mode-opt {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border: 2px solid var(--sl-border);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    background: var(--sl-surface-1);
}
.aspath-mode-opt:hover:not(.disabled) {
    border-color: #A855F7;
    background: rgba(168, 85, 247, 0.06);
}
.aspath-mode-opt.active {
    border-color: #A855F7;
    background: rgba(168, 85, 247, 0.1);
}
.aspath-mode-opt.disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.aspath-mode-opt input { margin-top: 4px; }
.aspath-mode-opt-title { font-weight: 600; color: var(--sl-text); margin-bottom: 2px; }
.aspath-mode-opt-desc { font-size: 0.82rem; color: var(--sl-text-muted); }

.aspath-interval-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.aspath-interval-btn {
    background: var(--sl-surface-1);
    border: 2px solid var(--sl-border);
    border-radius: 8px;
    padding: 10px 6px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    text-align: center;
}
.aspath-interval-btn:hover { border-color: #A855F7; }
.aspath-interval-btn.active {
    border-color: #A855F7;
    background: rgba(168, 85, 247, 0.12);
}
.aspath-interval-label { font-size: 1rem; font-weight: 700; color: var(--sl-text); }
.aspath-interval-hint { font-size: 0.7rem; color: var(--sl-text-subtle); margin-top: 2px; font-style: italic; }

.aspath-modal-hint {
    margin-top: 8px;
    font-size: 0.82rem;
    color: var(--sl-text-muted);
    min-height: 1.2em;
}
.aspath-modal-hint.warn {
    color: #F59E0B;
}

.aspath-notify-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.aspath-notify-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--sl-surface-2);
    border-radius: 8px;
    cursor: pointer;
}
.aspath-notify-row input { margin: 0; }

.aspath-cost-box {
    background: var(--sl-surface-2);
    border: 1px solid var(--sl-border);
    border-radius: 10px;
    padding: 12px 16px;
    margin-top: 6px;
}
.aspath-cost-line {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 0.9rem;
}
.aspath-cost-line strong { color: var(--sl-accent); font-variant-numeric: tabular-nums; }
.aspath-cost-line.aspath-cost-brl {
    border-top: 1px dashed var(--sl-border);
    margin-top: 4px;
    padding-top: 8px;
    font-size: 0.82rem;
    color: var(--sl-text-muted);
}

/* ---------- Página de monitoramentos ---------- */
.aspath-page {
    background: var(--sl-surface-1);
    border: 1px solid var(--sl-border);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 20px;
}

.aspath-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--sl-border);
    background: var(--sl-surface-2);
}

.aspath-page-body { padding: 16px; }

.aspath-empty {
    text-align: center;
    padding: 60px 30px;
    color: var(--sl-text-muted);
}
.aspath-empty i { font-size: 3rem; color: #A855F7; opacity: 0.6; }
.aspath-empty h5 { margin-top: 16px; color: var(--sl-text); }
.aspath-empty.aspath-empty-small { padding: 30px; }
.aspath-empty.aspath-empty-small i { font-size: 2rem; }

/* Cards de monitor na lista */
.aspath-monitor-card {
    background: var(--sl-surface-1);
    border: 1px solid var(--sl-border);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.1s;
}
.aspath-monitor-card:hover {
    border-color: #A855F7;
    transform: translateY(-1px);
}

.aspath-monitor-card-head {
    margin-bottom: 12px;
}

.aspath-monitor-name {
    color: var(--sl-text);
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aspath-live-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}
.aspath-live-dot.green  { background: #22C55E; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25); animation: aspath-pulse 2s infinite; }
.aspath-live-dot.yellow { background: #F59E0B; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25); }
.aspath-live-dot.red    { background: #EF4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25); }
.aspath-live-dot.paused { background: #94A3B8; }
.aspath-live-dot.pending { background: #A855F7; box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.25); animation: aspath-pulse 1.5s infinite; }

@keyframes aspath-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25); }
    50% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
}

.aspath-monitor-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}
.aspath-meta-pill {
    font-size: 0.75rem;
    background: var(--sl-surface-2);
    padding: 3px 8px;
    border-radius: 6px;
    color: var(--sl-text-muted);
}
.aspath-meta-pill i { margin-right: 4px; color: #A855F7; }

.aspath-monitor-card-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px dashed var(--sl-border);
}
.aspath-monitor-times {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    font-size: 0.85rem;
}
.aspath-monitor-actions {
    display: flex;
    gap: 6px;
}

/* ---------- Painel de detalhe ---------- */
.aspath-detail-head {
    padding: 12px 16px;
    background: var(--sl-surface-2);
    border-radius: 10px;
    margin-bottom: 16px;
}

.aspath-detail-meta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin: 8px 0 12px;
    font-size: 0.85rem;
    color: var(--sl-text-muted);
}

.aspath-detail-times {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.aspath-time-block {
    background: var(--sl-surface-1);
    border: 1px solid var(--sl-border);
    border-radius: 8px;
    padding: 8px 14px;
    flex: 1;
    min-width: 180px;
}

.aspath-timeline-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 4px 12px;
}
.aspath-timeline-filters {
    display: flex;
    gap: 8px;
}
.aspath-timeline-filters select { max-width: 200px; }

.aspath-timeline { display: flex; flex-direction: column; gap: 8px; }

.aspath-ev-card {
    display: flex;
    gap: 12px;
    padding: 12px 14px;
    background: var(--sl-surface-1);
    border: 1px solid var(--sl-border);
    border-left: 3px solid var(--sl-border);
    border-radius: 8px;
}
.aspath-ev-card.aspath-ev-critical { border-left-color: #DC2626; }
.aspath-ev-card.aspath-ev-warning  { border-left-color: #F59E0B; }
.aspath-ev-card.aspath-ev-info     { border-left-color: #3B82F6; }

.aspath-ev-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.1rem;
}

.aspath-ev-body { flex: 1; min-width: 0; }
.aspath-ev-head {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.aspath-ev-prefix {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    background: var(--sl-surface-2);
    padding: 2px 6px;
    border-radius: 4px;
    color: var(--sl-text);
}
.aspath-ev-when {
    margin-left: auto;
    font-size: 0.78rem;
    color: var(--sl-text-subtle);
    font-style: italic;
}
.aspath-ev-desc {
    font-size: 0.85rem;
    color: var(--sl-text-muted);
    margin-bottom: 4px;
}
.aspath-ev-peer { margin-bottom: 4px; }
.aspath-ev-diff {
    background: var(--sl-surface-2);
    border-radius: 6px;
    padding: 6px 10px;
    margin-top: 6px;
}
.aspath-ev-diff-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 2px 0;
    font-family: 'JetBrains Mono', monospace;
}
.aspath-ev-diff-row small { min-width: 56px; }
.aspath-path-line { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.aspath-asn {
    font-size: 0.78rem;
    background: var(--sl-surface-1);
    padding: 1px 5px;
    border-radius: 3px;
    color: var(--sl-text);
    border: 1px solid var(--sl-border);
}
.aspath-asn-origin {
    color: #A855F7;
    border-color: rgba(168, 85, 247, 0.5);
    font-weight: 700;
}
.aspath-arrow { color: var(--sl-text-subtle); margin: 0 2px; }

@media (max-width: 640px) {
    .aspath-interval-grid { grid-template-columns: repeat(2, 1fr); }
    .aspath-monitor-card-foot { flex-direction: column; align-items: stretch; }
    .aspath-detail-times { flex-direction: column; }
}

/* ---------- Modal: bloco de descoberta de cone ---------- */
.aspath-cone-section {
    border-top: 1px dashed var(--sl-border);
    padding-top: 14px;
    margin-top: -4px;
}

.aspath-cone-counter {
    font-size: 0.78rem;
    font-weight: 500;
    color: #A855F7;
    text-transform: none;
    letter-spacing: 0;
    margin-left: 6px;
}

.aspath-cone-status {
    padding: 16px;
    text-align: center;
    color: var(--sl-text-muted);
    background: var(--sl-surface-2);
    border-radius: 8px;
    font-size: 0.88rem;
}

.aspath-cone-toolbar {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
    align-items: center;
}
.aspath-cone-toolbar .form-control {
    flex: 1;
    min-width: 0;
}

.aspath-cone-list {
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid var(--sl-border);
    border-radius: 8px;
    padding: 4px;
    background: var(--sl-surface-1);
}

.aspath-cone-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s;
    margin-bottom: 2px;
}
.aspath-cone-item:hover { background: var(--sl-surface-2); }
.aspath-cone-item.selected {
    background: rgba(168, 85, 247, 0.10);
}
.aspath-cone-item input {
    margin: 0;
    accent-color: #A855F7;
}
.aspath-cone-asn {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.82rem;
    color: var(--sl-text);
    font-weight: 600;
    min-width: 80px;
}
.aspath-cone-name {
    flex: 1;
    font-size: 0.88rem;
    color: var(--sl-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.aspath-cone-flag {
    font-size: 0.72rem;
    background: var(--sl-surface-2);
    padding: 2px 6px;
    border-radius: 4px;
    color: var(--sl-text-muted);
}

.aspath-cone-name-empty {
    color: var(--sl-text-subtle);
    font-style: italic;
    font-size: 0.82rem;
}

/* Toggle Lista ↔ Árvore */
.aspath-cone-view-toggle {
    margin-left: auto;
}
.aspath-cone-view-toggle .btn {
    padding: 4px 10px;
}
.aspath-cone-view-toggle .btn.active {
    background: #A855F7 !important;
    color: #fff !important;
    border-color: #A855F7 !important;
}

/* Container da árvore */
.aspath-cone-tree {
    border: 1px solid var(--sl-border);
    border-radius: 8px;
    background: var(--sl-surface-2);
    overflow: hidden;
}

.aspath-cone-tree-canvas {
    height: 380px;
    background: var(--sl-surface-1);
}

.aspath-cone-tree-legend {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 8px 14px;
    border-top: 1px solid var(--sl-border);
    background: var(--sl-surface-2);
    font-size: 0.78rem;
    color: var(--sl-text-muted);
    flex-wrap: wrap;
}

.aspath-tree-dot {
    display: inline-block;
    width: 11px;
    height: 11px;
    border-radius: 3px;
    margin-right: 5px;
    vertical-align: middle;
}
.aspath-tree-dot.dot-root { background: #A855F7; }
.aspath-tree-dot.dot-on   { background: #22C55E; }
.aspath-tree-dot.dot-off  { background: #475569; }

/* Banner de aviso "monitor sem prefixos" no detalhe */
.aspath-no-prefixes-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: rgba(245, 158, 11, 0.10);
    border: 1px solid rgba(245, 158, 11, 0.40);
    border-radius: 10px;
    margin-bottom: 14px;
}

.aspath-no-prefixes-icon {
    flex-shrink: 0;
    font-size: 1.8rem;
    color: #F59E0B;
}

.aspath-no-prefixes-body {
    flex: 1;
}

.aspath-no-prefixes-body strong {
    color: var(--sl-text);
    display: block;
    margin-bottom: 2px;
}

/* ============================================================
   PAINEL DE LOGS — FAB + painel deslizante
   ============================================================ */
.aspath-fab {
    position: fixed;
    bottom: 22px;
    right: 22px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #A855F7 0%, #6366F1 100%);
    color: #fff;
    border: none;
    box-shadow: 0 6px 18px rgba(168, 85, 247, 0.35), 0 2px 4px rgba(0,0,0,0.15);
    cursor: pointer;
    z-index: 1040;
    font-size: 1.2rem;
    opacity: 0.80;
    transition: opacity 0.15s, transform 0.15s, box-shadow 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.aspath-fab:hover {
    opacity: 1;
    transform: scale(1.06);
    box-shadow: 0 8px 24px rgba(168, 85, 247, 0.5), 0 2px 4px rgba(0,0,0,0.15);
}
.aspath-fab:active { transform: scale(0.96); }

.aspath-log-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1045;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}
.aspath-log-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}

.aspath-log-panel {
    position: fixed;
    top: 0;
    right: -440px;
    width: 420px;
    max-width: 100vw;
    height: 100vh;
    background: var(--sl-surface-1);
    border-left: 1px solid var(--sl-border);
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.25);
    z-index: 1050;
    transition: right 0.28s ease;
    display: flex;
    flex-direction: column;
}
.aspath-log-panel.open { right: 0; }

.aspath-log-header {
    padding: 14px 18px;
    border-bottom: 1px solid var(--sl-border);
    background: var(--sl-surface-2);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.aspath-log-header h6 {
    color: var(--sl-text);
}

.aspath-log-header h6 i { color: #A855F7; }

.aspath-log-body {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
}

.aspath-log-section { margin-bottom: 18px; }

.aspath-log-section-title {
    font-size: 0.72rem;
    text-transform: uppercase;
    color: var(--sl-text-muted);
    letter-spacing: 0.06em;
    font-weight: 700;
    margin-bottom: 8px;
}

.aspath-log-status {
    background: var(--sl-surface-2);
    border-radius: 8px;
    padding: 4px 14px;
}

.aspath-log-status-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--sl-border);
}
.aspath-log-status-row:last-child { border-bottom: none; }
.aspath-log-status-row strong { color: var(--sl-text); font-variant-numeric: tabular-nums; }

.aspath-log-monitors {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.aspath-log-monitor {
    background: var(--sl-surface-2);
    border-radius: 8px;
    padding: 8px 12px;
}

.aspath-log-monitor-stats {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 4px;
    font-size: 0.75rem;
    color: var(--sl-text-muted);
}
.aspath-log-monitor-stats i { color: #A855F7; margin-right: 3px; }

.aspath-log-activity {
    background: var(--sl-surface-2);
    border-radius: 8px;
    padding: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.74rem;
    max-height: 320px;
    overflow-y: auto;
}

.aspath-log-entry {
    display: flex;
    gap: 8px;
    padding: 5px 8px;
    border-bottom: 1px solid var(--sl-border);
    align-items: center;
}
.aspath-log-entry:last-child { border-bottom: none; }

.aspath-log-time { color: var(--sl-text-subtle); flex-shrink: 0; min-width: 70px; }
.aspath-log-asn { color: #A855F7; flex-shrink: 0; font-weight: 700; min-width: 70px; }
.aspath-log-prefix { color: var(--sl-text); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aspath-log-meta { color: var(--sl-text-muted); flex-shrink: 0; font-size: 0.7rem; }

.aspath-log-invocation {
    margin-top: 10px;
    background: var(--sl-surface-2);
    border-radius: 6px;
    padding: 8px;
}

.aspath-log-invocation-head {
    display: flex;
    justify-content: space-between;
    font-size: 0.78rem;
    margin-bottom: 6px;
}

.aspath-log-response {
    background: var(--sl-surface-1);
    border-radius: 4px;
    padding: 8px;
    font-size: 0.7rem;
    max-height: 240px;
    overflow: auto;
    margin: 0;
    color: var(--sl-text);
    font-family: 'JetBrains Mono', monospace;
}

@media (max-width: 480px) {
    .aspath-log-panel { width: 100vw; right: -100vw; }
    .aspath-fab { bottom: 14px; right: 14px; width: 42px; height: 42px; }
}

/* Tooltip rico para nós de grafo (diff + cone tree) */
.aspath-node-tooltip {
    position: fixed;
    z-index: 1080;
    background: var(--sl-surface-1);
    border: 1px solid var(--sl-border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    padding: 10px 12px;
    min-width: 200px;
    max-width: 280px;
    pointer-events: none;
    font-size: 0.82rem;
    color: var(--sl-text);
    line-height: 1.4;
}

.aspath-tip-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-bottom: 1px dashed var(--sl-border);
    padding-bottom: 6px;
    margin-bottom: 6px;
}

.aspath-tip-asn {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    color: #A855F7;
    font-size: 0.78rem;
}

.aspath-tip-name {
    font-weight: 600;
    color: var(--sl-text);
    word-break: break-word;
}

.aspath-tip-name-loading {
    color: var(--sl-text-subtle);
    font-style: italic;
    font-weight: 400;
}

.aspath-tip-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.aspath-tip-row {
    color: var(--sl-text-muted);
    font-size: 0.78rem;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.aspath-tip-row i {
    color: #A855F7;
}

.aspath-tip-row a {
    color: var(--sl-accent);
    text-decoration: none;
    pointer-events: auto;
    font-size: 0.75rem;
}

.aspath-tip-row a:hover { text-decoration: underline; }

.aspath-tip-source {
    margin-top: 6px;
    font-size: 0.7rem;
    color: var(--sl-text-subtle);
    font-style: italic;
    text-align: right;
    text-transform: lowercase;
}

/* ============================================================
   TIMELINE — Modo Compacto (cards agregados)
   ============================================================ */

/* Toggle Compacto/Detalhado */
.aspath-view-toggle .btn { padding: 4px 12px; font-size: 0.78rem; }
.aspath-view-toggle .btn.active {
    background: #A855F7 !important;
    color: #fff !important;
    border-color: #A855F7 !important;
}

/* Resumo de agregação acima da timeline */
.aspath-aggregation-summary {
    background: rgba(168, 85, 247, 0.08);
    border: 1px solid rgba(168, 85, 247, 0.25);
    border-radius: 8px;
    padding: 8px 14px;
    margin-bottom: 10px;
    font-size: 0.85rem;
    color: var(--sl-text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.aspath-aggregation-summary i { color: #A855F7; }
.aspath-aggregation-summary strong { color: var(--sl-text); }

.aspath-compression {
    margin-left: auto;
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(34, 197, 94, 0.15);
    color: #22C55E;
    font-weight: 600;
}

/* Card de grupo agregado */
.aspath-group-card {
    display: flex;
    gap: 14px;
    padding: 14px 16px;
    background: var(--sl-surface-1);
    border: 1px solid var(--sl-border);
    border-left: 4px solid var(--sl-border);
    border-radius: 10px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: transform 0.1s, border-color 0.15s, box-shadow 0.15s;
}
.aspath-group-card:hover {
    transform: translateX(2px);
    border-color: #A855F7;
    box-shadow: 0 4px 12px rgba(168, 85, 247, 0.15);
}
.aspath-group-card.aspath-ev-critical { border-left-color: #DC2626; }
.aspath-group-card.aspath-ev-warning  { border-left-color: #F59E0B; }
.aspath-group-card.aspath-ev-info     { border-left-color: #3B82F6; }

.aspath-group-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
}

.aspath-group-body {
    flex: 1;
    min-width: 0;
}

.aspath-group-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.aspath-group-label {
    color: var(--sl-text);
    font-size: 0.95rem;
}

.aspath-group-prefix {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    background: var(--sl-surface-2);
    padding: 2px 8px;
    border-radius: 4px;
    color: var(--sl-text);
}

.aspath-group-when {
    font-size: 0.78rem;
    color: var(--sl-text-subtle);
    font-style: italic;
}

.aspath-group-alert {
    background: rgba(220, 38, 38, 0.15);
    color: #FCA5A5;
    border: 1px solid rgba(220, 38, 38, 0.40);
    padding: 2px 10px;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.aspath-group-alert i { color: #DC2626; margin-right: 4px; }

.aspath-group-meta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 0.82rem;
    color: var(--sl-text-muted);
    margin-bottom: 10px;
}
.aspath-group-meta i { color: #A855F7; margin-right: 4px; }
.aspath-group-meta strong { color: var(--sl-text); }
.aspath-group-name { color: var(--sl-text-muted); }

/* Top paths dentro do card */
.aspath-group-paths {
    background: var(--sl-surface-2);
    border-radius: 8px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.aspath-group-path-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.aspath-group-path-row .aspath-path-line {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    flex-wrap: nowrap;
}

.aspath-group-path-bar {
    position: relative;
    flex-shrink: 0;
    width: 90px;
    height: 18px;
    background: var(--sl-surface-1);
    border-radius: 9px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 8px;
}

.aspath-group-path-fill {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(168, 85, 247, 0.35), rgba(168, 85, 247, 0.55));
    border-radius: 9px;
    transition: width 0.3s ease;
}

.aspath-group-path-count {
    position: relative;
    z-index: 1;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--sl-text);
    font-variant-numeric: tabular-nums;
}

.aspath-group-more {
    font-size: 0.78rem;
    color: var(--sl-text-muted);
    font-style: italic;
    text-align: center;
    padding: 4px;
    border-top: 1px dashed var(--sl-border);
    margin-top: 4px;
}

/* ============================================================
   MODAL DE DETALHES DO GRUPO
   ============================================================ */
#aspathGroupModal .modal-content { background: var(--sl-surface-1); }

.aspath-group-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    background: var(--sl-surface-2);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 14px;
}

.aspath-group-meta-item {
    background: var(--sl-surface-1);
    border-radius: 6px;
    padding: 8px 10px;
}

.aspath-group-meta-item .aspath-asn {
    margin-right: 4px;
    margin-bottom: 4px;
    display: inline-block;
}

.aspath-group-warning {
    background: rgba(220, 38, 38, 0.10);
    border: 1px solid rgba(220, 38, 38, 0.40);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 14px;
    color: var(--sl-text);
    font-size: 0.88rem;
    line-height: 1.5;
}
.aspath-group-warning i { color: #DC2626; margin-right: 6px; }

.aspath-group-paths-title {
    margin-top: 6px;
    margin-bottom: 10px;
    color: var(--sl-text);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
}
.aspath-group-paths-title i { color: #A855F7; }

.aspath-group-tbl-wrap {
    border-radius: 8px;
    border: 1px solid var(--sl-border);
    overflow: hidden;
}

.aspath-group-tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.aspath-group-tbl thead {
    background: var(--sl-surface-2);
}

.aspath-group-tbl th {
    padding: 8px 12px;
    text-align: left;
    color: var(--sl-text-muted);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
}

.aspath-group-tbl td {
    padding: 10px 12px;
    border-top: 1px solid var(--sl-border);
    color: var(--sl-text);
    vertical-align: middle;
}

.aspath-group-tbl tbody tr:hover {
    background: var(--sl-surface-2);
}

.aspath-group-tbl-freq {
    width: 120px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}

.aspath-group-freq-bar {
    position: relative;
    height: 8px;
    background: var(--sl-surface-2);
    border-radius: 4px;
    flex: 1;
    overflow: hidden;
}
.aspath-group-freq-bar div {
    height: 100%;
    background: linear-gradient(90deg, #A855F7, #6366F1);
}

.aspath-group-tbl-path {
    word-break: break-all;
}
.aspath-group-tbl-path .aspath-path-line { flex-wrap: wrap; }

.aspath-group-tbl-act {
    text-align: right;
    width: 110px;
}

/* ============================================================
   ANÁLISE POR AS DO CONE
   ============================================================ */

/* Tabs Eventos | Análise Cone */
.aspath-detail-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--sl-border);
}

.aspath-detail-tab {
    background: transparent;
    border: none;
    color: var(--sl-text-muted);
    padding: 8px 16px;
    border-bottom: 2px solid transparent;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.aspath-detail-tab:hover { color: var(--sl-text); }
.aspath-detail-tab.active {
    color: #A855F7;
    border-bottom-color: #A855F7;
}

/* Bloco da análise do cone */
.aspath-cone-analytics-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 14px;
    background: var(--sl-surface-2);
    border-radius: 10px;
}
.aspath-cone-analytics-head h6 i { color: #A855F7; }
.aspath-cone-analytics-controls {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Resumo no topo */
.aspath-cone-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}
.aspath-cone-summary-item {
    background: var(--sl-surface-2);
    border-radius: 8px;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.aspath-cone-summary-item strong {
    font-size: 1.4rem;
    color: var(--sl-text);
    font-variant-numeric: tabular-nums;
}

/* Tabela do cone */
.aspath-cone-tbl-wrap {
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid var(--sl-border);
}
.aspath-cone-tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.aspath-cone-tbl thead { background: var(--sl-surface-2); }
.aspath-cone-tbl th {
    padding: 10px 12px;
    text-align: left;
    color: var(--sl-text-muted);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
}
.aspath-cone-tbl td {
    padding: 12px;
    border-top: 1px solid var(--sl-border);
    color: var(--sl-text);
    vertical-align: top;
}
.aspath-cone-tr {
    cursor: pointer;
    transition: background 0.12s;
}
.aspath-cone-tr:hover { background: var(--sl-surface-2); }
.aspath-cone-tr-root { background: rgba(168, 85, 247, 0.06); }
.aspath-cone-tr-root:hover { background: rgba(168, 85, 247, 0.12); }

.aspath-cone-tr-asn {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 2px;
}
.aspath-cone-tr-name {
    color: var(--sl-text-muted);
    font-size: 0.8rem;
}

.aspath-cone-via { min-width: 140px; }

.aspath-cone-bar {
    position: relative;
    height: 18px;
    border-radius: 9px;
    overflow: hidden;
    background: var(--sl-surface-2);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 8px;
    margin-bottom: 4px;
}
.aspath-cone-bar-fill {
    position: absolute;
    inset: 0;
    border-radius: 9px;
    transition: width 0.3s;
}
.aspath-cone-bar-label {
    position: relative;
    z-index: 1;
    font-size: 0.74rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.aspath-cone-bar-good .aspath-cone-bar-fill { background: linear-gradient(90deg, #15803D, #22C55E); }
.aspath-cone-bar-warn .aspath-cone-bar-fill { background: linear-gradient(90deg, #B45309, #F59E0B); }
.aspath-cone-bar-bad  .aspath-cone-bar-fill { background: linear-gradient(90deg, #B91C1C, #EF4444); }
.aspath-cone-bar-none { background: var(--sl-surface-1); }

.aspath-cone-up {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    background: var(--sl-surface-2);
    color: var(--sl-text);
    padding: 2px 8px;
    border-radius: 4px;
    margin: 2px 2px 2px 0;
    font-family: 'JetBrains Mono', monospace;
}
.aspath-cone-up-count {
    color: var(--sl-text-muted);
    font-size: 0.72rem;
}
.aspath-cone-up-warn {
    background: rgba(245, 158, 11, 0.15);
    color: #FCD34D;
    border: 1px solid rgba(245, 158, 11, 0.40);
}

.aspath-cone-mitig {
    display: inline-block;
    font-size: 0.78rem;
    background: rgba(220, 38, 38, 0.12);
    color: #FCA5A5;
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid rgba(220, 38, 38, 0.30);
    margin: 1px 0;
}

/* ============================================================
   MODAL DE ANÁLISE POR AS
   ============================================================ */
#aspathConeAsModal .modal-content { background: var(--sl-surface-1); }
#aspathConeAsModal .modal-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.aspath-cone-as-subtitle {
    color: var(--sl-text-muted);
    font-size: 0.88rem;
    margin-bottom: 14px;
    padding: 8px 14px;
    background: var(--sl-surface-2);
    border-radius: 8px;
}

.aspath-cone-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}
.aspath-cone-kpi {
    background: var(--sl-surface-2);
    border-radius: 10px;
    padding: 12px 14px;
    border: 1px solid var(--sl-border);
}
.aspath-cone-kpi-title {
    font-size: 0.72rem;
    color: var(--sl-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    margin-bottom: 6px;
}
.aspath-cone-kpi-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--sl-text);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.aspath-cone-kpi-value-time {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--sl-text);
    line-height: 1;
}
.aspath-cone-kpi-good { color: #22C55E; }
.aspath-cone-kpi-warn { color: #F59E0B; }
.aspath-cone-kpi-bad  { color: #EF4444; }
.aspath-cone-kpi-sub {
    margin-top: 4px;
    font-size: 0.78rem;
    color: var(--sl-text-muted);
    line-height: 1.4;
}

.aspath-cone-section-h {
    color: var(--sl-text);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    margin: 10px 0;
}
.aspath-cone-section-h i { color: #A855F7; }

/* Timeline SVG */
.aspath-cone-timeline-block {
    background: var(--sl-surface-2);
    border-radius: 10px;
    padding: 12px;
    border: 1px solid var(--sl-border);
}
.aspath-cone-timeline-svg {
    color: var(--sl-text);
    background: var(--sl-surface-1);
    border-radius: 6px;
    display: block;
}
.aspath-cone-timeline-legend {
    display: flex;
    gap: 18px;
    margin-top: 8px;
    font-size: 0.78rem;
    color: var(--sl-text-muted);
    flex-wrap: wrap;
}
.aspath-tdot {
    display: inline-block;
    width: 11px;
    height: 11px;
    border-radius: 2px;
    margin-right: 5px;
    vertical-align: middle;
}

/* Tabela upstreams no modal */
.aspath-cone-up-tbl-wrap {
    border-radius: 8px;
    border: 1px solid var(--sl-border);
    overflow: hidden;
}
.aspath-cone-up-tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.aspath-cone-up-tbl thead { background: var(--sl-surface-2); }
.aspath-cone-up-tbl th {
    padding: 8px 12px;
    text-align: left;
    color: var(--sl-text-muted);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
}
.aspath-cone-up-tbl td {
    padding: 10px 12px;
    border-top: 1px solid var(--sl-border);
    color: var(--sl-text);
    vertical-align: middle;
}
.aspath-cone-up-tbl tbody tr:hover { background: var(--sl-surface-2); }

.aspath-cone-status-self {
    color: #22C55E;
    font-weight: 600;
    font-size: 0.78rem;
}
.aspath-cone-status-other {
    color: #F59E0B;
    font-size: 0.78rem;
}
.aspath-cone-status-mitigation {
    color: #FCA5A5;
    font-weight: 600;
    font-size: 0.78rem;
}

/* Badge de tendência na célula "Via Você" */
.aspath-cone-trend-up,
.aspath-cone-trend-down,
.aspath-cone-trend-flat {
    display: inline-block;
    margin-top: 4px;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.aspath-cone-trend-up {
    background: rgba(34, 197, 94, 0.15);
    color: #4ADE80;
    border: 1px solid rgba(34, 197, 94, 0.35);
}
.aspath-cone-trend-down {
    background: rgba(239, 68, 68, 0.15);
    color: #FCA5A5;
    border: 1px solid rgba(239, 68, 68, 0.35);
}
.aspath-cone-trend-flat {
    color: var(--sl-text-subtle);
    font-style: italic;
    font-weight: 400;
}

/* Botão de export dentro do summary */
.aspath-cone-summary-export {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    padding: 4px !important;
}

/* ============================================================
   FASE 3 — Stability chart, filtros avançados, diff modal
   ============================================================ */

/* ---------- Gráfico de estabilidade ---------- */
.aspath-stability-block {
    background: var(--sl-surface-2);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 12px;
}

.aspath-stability-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
    font-size: 0.85rem;
}

.aspath-stability-head i { color: #A855F7; }

.aspath-stability-chart {
    width: 100%;
    height: 60px;
    display: block;
}

/* ---------- Filtros avançados ---------- */
.aspath-timeline-filters {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

.aspath-timeline-filters .form-select-sm,
.aspath-timeline-filters .form-control-sm {
    max-width: 170px;
}

.aspath-filter-prefix-input {
    width: 140px !important;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem !important;
}

/* ---------- Card de evento clicável + indicador ---------- */
.aspath-ev-card.aspath-ev-clickable {
    cursor: pointer;
    transition: transform 0.1s, border-color 0.15s;
}
.aspath-ev-card.aspath-ev-clickable:hover {
    transform: translateX(2px);
    border-color: #A855F7;
}
.aspath-ev-diffbtn {
    margin-left: auto;
    color: #A855F7;
    font-size: 0.9rem;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(168, 85, 247, 0.10);
    opacity: 0.75;
    transition: opacity 0.15s;
}
.aspath-ev-card.aspath-ev-clickable:hover .aspath-ev-diffbtn {
    opacity: 1;
}

/* ---------- Modal de diff (mini-mapa antes/depois) ---------- */
#aspathDiffModal .modal-content {
    background: var(--sl-surface-1);
}

.aspath-diff-meta {
    padding: 10px 14px;
    background: var(--sl-surface-2);
    border-radius: 8px;
    margin-bottom: 14px;
}
.aspath-diff-meta-row {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.aspath-diff-graphs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}

.aspath-diff-graph {
    background: var(--sl-surface-2);
    border-radius: 10px;
    border: 1px solid var(--sl-border);
    overflow: hidden;
}

.aspath-diff-graph-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: var(--sl-surface-1);
    border-bottom: 1px solid var(--sl-border);
}

.aspath-diff-graph-label {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.aspath-diff-label-prev { color: #EF4444; }
.aspath-diff-label-curr { color: #22C55E; }

.aspath-diff-graph-canvas {
    height: 280px;
    background: var(--sl-surface-2);
}

.aspath-diff-empty {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--sl-text-muted);
    gap: 8px;
    padding: 20px;
}
.aspath-diff-empty i {
    font-size: 2rem;
    color: #EF4444;
    opacity: 0.6;
}

.aspath-diff-legend {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 10px;
    background: var(--sl-surface-2);
    border-radius: 8px;
    font-size: 0.82rem;
    color: var(--sl-text-muted);
}

.aspath-diff-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    margin-right: 6px;
    vertical-align: middle;
}
.aspath-diff-dot.dot-removed { background: #EF4444; }
.aspath-diff-dot.dot-stable  { background: #475569; }
.aspath-diff-dot.dot-added   { background: #22C55E; }
.aspath-diff-dot.dot-origin  { background: #A855F7; }

@media (max-width: 768px) {
    .aspath-diff-graphs { grid-template-columns: 1fr; }
    .aspath-diff-graph-canvas { height: 220px; }
}

/* ---------- Fase 4: extra do WhatsApp dentro de notificações ---------- */
.aspath-notify-extra {
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.30);
    border-radius: 8px;
    padding: 10px 12px;
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.aspath-notify-extra-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.aspath-notify-extra-label {
    font-size: 0.78rem;
    color: var(--sl-text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.aspath-notify-extra-hint {
    font-size: 0.78rem;
    color: var(--sl-text-muted);
    line-height: 1.5;
}

.aspath-notify-extra-hint i {
    color: #22C55E;
}

/* ============================================================
   MITIGAÇÕES — Janelas de mitigação DDoS por prefixo (Gantt)
   ============================================================ */
.aspath-mitig-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--sl-text-muted);
}
.aspath-mitig-empty i {
    font-size: 2.5rem;
    color: #22C55E;
}

.aspath-mitig-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr) 1.6fr;
    gap: 12px;
    margin-bottom: 18px;
}
@media (max-width: 900px) {
    .aspath-mitig-kpis { grid-template-columns: 1fr 1fr; }
    .aspath-mitig-kpi-wide { grid-column: span 2; }
}

.aspath-mitig-kpi {
    background: var(--sl-surface-2);
    border: 1px solid var(--sl-border);
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}
.aspath-mitig-kpi.is-active {
    border-color: #EF4444;
    background: linear-gradient(135deg, rgba(220,38,38,0.10) 0%, var(--sl-surface-2) 60%);
    box-shadow: 0 0 0 1px rgba(239,68,68,0.3);
}
.aspath-mitig-kpi-val {
    font-size: 1.65rem;
    font-weight: 700;
    color: var(--sl-text);
    line-height: 1;
}
.aspath-mitig-kpi.is-active .aspath-mitig-kpi-val { color: #FCA5A5; }
.aspath-mitig-kpi-lbl {
    font-size: 0.72rem;
    color: var(--sl-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}
.aspath-mitig-kpi-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}
.aspath-mitig-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border: 1px solid;
    border-radius: 999px;
    font-size: 0.75rem;
    color: var(--sl-text);
    background: rgba(15, 23, 42, 0.5);
}

.aspath-mitig-gantt-wrap {
    background: var(--sl-surface-2);
    border: 1px solid var(--sl-border);
    border-radius: 10px;
    padding: 8px;
    overflow-x: auto;
}
.aspath-mitig-gantt {
    width: 100%;
    min-width: 720px;
    height: auto;
    display: block;
}
.aspath-mitig-row .aspath-mitig-row-bg {
    transition: fill 0.12s ease;
}
.aspath-mitig-row:hover .aspath-mitig-row-bg {
    fill: rgba(168, 85, 247, 0.12);
}

.aspath-mitig-footer {
    margin-top: 10px;
    text-align: center;
}

.aspath-mitig-modal-section {
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--sl-border);
}
.aspath-mitig-modal-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Pizza de distribuição de tempo */
.aspath-mitig-pie-wrap { margin-bottom: 18px; }
.aspath-mitig-pie-card {
    background: var(--sl-surface-2);
    border: 1px solid var(--sl-border);
    border-radius: 10px;
    padding: 14px 16px;
}
.aspath-mitig-pie-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.aspath-mitig-pie-head i { color: #A855F7; }
.aspath-mitig-pie-body {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 24px;
    align-items: center;
}
@media (max-width: 700px) {
    .aspath-mitig-pie-body { grid-template-columns: 1fr; justify-items: center; }
}
.aspath-mitig-pie-svg {
    width: 180px;
    height: 180px;
    flex-shrink: 0;
}
.aspath-mitig-pie-legend {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}
.aspath-mitig-pie-legend-row {
    display: grid;
    grid-template-columns: 16px 1fr auto auto;
    align-items: center;
    gap: 10px;
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 0.85rem;
}
.aspath-mitig-pie-legend-row:hover { background: rgba(168, 85, 247, 0.08); }
.aspath-mitig-pie-legend-name {
    color: var(--sl-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.aspath-mitig-pie-legend-pct {
    font-weight: 700;
    color: var(--sl-text);
    font-variant-numeric: tabular-nums;
}
.aspath-mitig-pie-legend-time {
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    min-width: 50px;
    text-align: right;
}

/* Searchable ASN picker (aba Mitigações) */
.aspath-asn-picker {
    position: relative;
    display: inline-block;
}
.aspath-asn-picker-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--sl-surface-2);
    border: 1px solid var(--sl-border);
    border-radius: 6px;
    padding: 4px 10px;
    color: var(--sl-text);
    font-size: 0.85rem;
    min-width: 220px;
    max-width: 320px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    justify-content: space-between;
}
.aspath-asn-picker-btn:hover { border-color: #A855F7; }
.aspath-asn-picker-btn > span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    text-align: left;
}

.aspath-asn-picker-pop {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 1050;
    width: 360px;
    max-width: 90vw;
    background: var(--sl-surface);
    border: 1px solid var(--sl-border);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    padding: 8px;
}
.aspath-asn-picker-pop input {
    margin-bottom: 6px;
}
.aspath-asn-picker-pop ul {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 320px;
    overflow-y: auto;
}
.aspath-asn-picker-pop li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
}
.aspath-asn-picker-pop li:hover {
    background: rgba(168, 85, 247, 0.15);
}
.aspath-asn-picker-pop li.is-selected {
    background: rgba(168, 85, 247, 0.25);
    color: var(--sl-text);
}
.aspath-asn-picker-pop li.aspath-asn-picker-empty {
    cursor: default;
    color: var(--sl-text-muted);
    text-align: center;
    padding: 12px;
}
.aspath-asn-picker-pop li.aspath-asn-picker-empty:hover {
    background: none;
}
.aspath-asn-picker-asn {
    font-family: ui-monospace, SFMono-Regular, monospace;
    color: #A855F7;
    font-weight: 600;
    margin-right: 4px;
}
.aspath-asn-picker-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.aspath-asn-picker-count {
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}


/* ============================================================
   Modo Provedores Anatel (anatel.js) — prefixo .anat-
   ============================================================ */
.anatel-gradient {
    background: linear-gradient(135deg, #0EA5E9, #6366F1);
    width: 100px;
    border-radius: 10px;
}
.search-types-grid .anatel-gradient { width: 44px; height: 44px; }
.anat-home-card { border-color: rgba(14, 165, 233, 0.45); }

.anat-wrap {
    --anat-up: #059669;
    --anat-down: #DC2626;
    --anat-fibra: #0EA5E9;
    --anat-radio: #F59E0B;
    --anat-cabo: #8B5CF6;
    --anat-metalico: #71717A;
    --anat-satelite: #EC4899;
    --anat-radius: 12px;
}
[data-bs-theme="dark"] .anat-wrap,
[data-bs-theme="dark"] .anat-drawer,
[data-bs-theme="dark"] .anat-modal {
    --anat-up: #34D399;
    --anat-down: #F87171;
}
.anat-drawer, .anat-modal {
    --anat-up: #059669;
    --anat-down: #DC2626;
    --anat-fibra: #0EA5E9;
    --anat-radio: #F59E0B;
    --anat-cabo: #8B5CF6;
    --anat-metalico: #71717A;
    --anat-satelite: #EC4899;
}
.anat-up { color: var(--anat-up) !important; }
.anat-down { color: var(--anat-down) !important; }
.anat-num, .anat-kpi-value, .anat-dkpi-value, .anat-hbar-val, .anat-table td.text-end { font-variant-numeric: tabular-nums; }

/* Header */
.anat-header {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}
.anat-title-icon {
    width: 42px; height: 42px;
    border-radius: 11px;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #0EA5E9, #6366F1);
    color: #fff; font-size: 1.25rem;
    flex-shrink: 0;
}
.anat-title { font-weight: 700; letter-spacing: -0.02em; }
.anat-meta-chip {
    display: inline-flex; align-items: center;
    margin-top: 2px;
    font-size: 0.74rem;
    color: var(--sl-text-muted);
    background: var(--sl-surface-2);
    border: 1px solid var(--sl-border);
    border-radius: 999px;
    padding: 1px 10px;
}
.anat-meta-chip .bi-patch-check-fill { color: var(--sl-success); }

/* Busca */
.anat-search { position: relative; margin-bottom: 0.75rem; }
.anat-search > .bi {
    position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
    color: var(--sl-text-subtle); font-size: 1.05rem; pointer-events: none;
}
.anat-search .form-control {
    padding-left: 44px;
    border-radius: var(--anat-radius);
    background: var(--sl-surface-1);
    border-color: var(--sl-border);
    font-size: 1rem;
    min-height: 50px;
}
.anat-search .form-control:focus { border-color: var(--sl-accent); box-shadow: 0 0 0 3px var(--sl-accent-ring); }

/* Buscas prontas */
.anat-presets {
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
    margin-bottom: 1rem;
}
.anat-presets-label {
    font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--sl-text-muted); margin-right: 4px;
}
.anat-presets-label .bi { color: var(--sl-warning); }
.anat-preset {
    display: inline-flex; align-items: center;
    font-size: 0.8rem;
    padding: 4px 11px;
    border-radius: 999px;
    border: 1px solid var(--sl-border);
    background: var(--sl-surface-1);
    color: var(--sl-text);
    transition: background-color .15s ease, border-color .15s ease;
    white-space: nowrap;
}
.anat-preset:hover { background: var(--sl-surface-2); border-color: var(--sl-border-strong); }
.anat-preset-salva { padding: 0; overflow: hidden; border-color: var(--sl-accent-ring); background: var(--sl-accent-soft); }
.anat-preset-btn, .anat-preset-del { border: 0; background: transparent; color: inherit; font-size: 0.8rem; }
.anat-preset-btn { padding: 4px 4px 4px 11px; }
.anat-preset-del { padding: 4px 10px 4px 6px; color: var(--sl-text-muted); font-size: 1rem; line-height: 1; }
.anat-preset-del:hover { color: var(--sl-danger); }
.anat-preset-save { border-style: dashed; color: var(--sl-text-muted); }

/* Sidebar de filtros */
.anat-sidebar {
    width: 100%;
    background: var(--sl-surface-1);
    border: 1px solid var(--sl-border);
    border-radius: var(--anat-radius);
    overflow: hidden;
}
@media (min-width: 992px) {
    .anat-sidebar {
        position: sticky;
        top: 1rem;
        max-height: calc(100vh - 2rem);
        overflow-y: auto;
        scrollbar-width: thin;
    }
}
@media (max-width: 991.98px) {
    .anat-filtros-oc { width: min(380px, 92vw) !important; }
    .anat-filtros-oc .anat-sidebar { border: 0; border-radius: 0; }
    .anat-filtros-oc .offcanvas-body { overflow-y: auto; }
}
.anat-oc-footer { padding: 0.75rem 1rem; border-top: 1px solid var(--sl-border); background: var(--sl-surface-1); }
.anat-sidebar-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.7rem 1rem;
    font-weight: 600; font-size: 0.9rem;
    border-bottom: 1px solid var(--sl-border);
    position: sticky; top: 0; z-index: 3;
    background: var(--sl-surface-1);
}
.anat-sidebar .accordion { --bs-accordion-bg: transparent; --bs-accordion-border-color: var(--sl-border); }
.anat-acc-item .accordion-button {
    padding: 0.7rem 1rem;
    font-size: 0.86rem; font-weight: 600;
    background: transparent;
    color: var(--sl-text);
    box-shadow: none;
}
.anat-acc-item .accordion-button:not(.collapsed) { background: var(--sl-surface-2); }
.anat-acc-item .accordion-body { padding: 0.75rem 1rem 1rem; }
.anat-acc-icon { color: var(--sl-text-muted); }
.anat-star { color: var(--sl-warning); font-size: 0.62rem; }
.anat-tip { color: var(--sl-text-subtle); font-size: 0.8rem; cursor: help; }
.anat-acc-count { background: var(--sl-accent) !important; color: #fff; font-size: 0.68rem; }
.anat-field { margin-bottom: 0.8rem; }
.anat-field:last-child { margin-bottom: 0; }
.anat-label { display: block; font-size: 0.75rem; font-weight: 500; color: var(--sl-text-muted); margin-bottom: 4px; }
.anat-help { font-size: 0.72rem; color: var(--sl-text-subtle); line-height: 1.3; margin-top: 2px; }
.anat-hint { font-size: 0.7rem; color: var(--sl-accent); min-height: 0; font-variant-numeric: tabular-nums; }
.anat-hint:empty { display: none; }
.anat-pair { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; align-items: start; }
.anat-pair-sep { font-size: 0.72rem; color: var(--sl-text-subtle); padding-top: 6px; }
.anat-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.anat-chip {
    font-size: 0.76rem;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid var(--sl-border);
    background: var(--sl-surface-2);
    color: var(--sl-text);
    transition: all .12s ease;
}
.anat-chip small { color: var(--sl-text-muted); }
.anat-chip:hover { border-color: var(--sl-border-strong); }
.anat-chip.active { background: var(--sl-accent-soft); border-color: var(--sl-accent); color: var(--sl-accent); }
.anat-chip.active small { color: inherit; }
.anat-seg .btn { font-size: 0.76rem; }
.anat-seg .btn.active { background: var(--sl-accent); border-color: var(--sl-accent); color: #fff; }
.anat-switch { margin-bottom: 0.55rem; font-size: 0.83rem; }
.anat-switch .form-check-input { cursor: pointer; }
.anat-raio { display: flex; gap: 6px; align-items: flex-start; }
.anat-raio-km { width: 104px; flex-shrink: 0; }
.anat-sidebar .ts-wrapper .ts-control { font-size: 0.82rem; min-height: 32px; }
.anat-sidebar .ts-wrapper.multi .ts-control > div { background: var(--sl-accent-soft); border: 1px solid var(--sl-accent-ring); }
.anat-sidebar .ts-dropdown { font-size: 0.82rem; }

/* KPIs */
.anat-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.6rem;
    margin-bottom: 0.9rem;
    transition: opacity .15s ease;
}
.anat-kpis.anat-is-loading { opacity: 0.6; }
.anat-kpi {
    background: var(--sl-surface-1);
    border: 1px solid var(--sl-border);
    border-radius: var(--anat-radius);
    padding: 0.65rem 0.85rem;
}
.anat-kpi-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--sl-text-muted); font-weight: 500; }
.anat-kpi-value { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; }
.anat-kpi-sub { font-size: 0.74rem; color: var(--sl-text-muted); }

/* Toolbar, pills, seleção */
.anat-toolbar {
    display: flex; flex-wrap: wrap; gap: 0.5rem;
    justify-content: space-between; align-items: center;
    margin-bottom: 0.5rem;
}
.anat-toolbar-label { font-size: 0.75rem; color: var(--sl-text-muted); }
.anat-total { font-size: 0.88rem; }
.anat-sort { width: auto; min-width: 200px; }
.anat-limit { width: auto; }
.anat-pills { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-bottom: 0.6rem; }
.anat-pills:empty { display: none; }
.anat-pill {
    display: inline-flex; align-items: center; gap: 2px;
    font-size: 0.76rem;
    padding: 2px 4px 2px 10px;
    border-radius: 999px;
    background: var(--sl-accent-soft);
    border: 1px solid var(--sl-accent-ring);
    color: var(--sl-text);
}
.anat-pill button {
    border: 0; background: transparent; color: var(--sl-text-muted);
    width: 20px; height: 20px; border-radius: 50%; line-height: 1; font-size: 0.95rem;
}
.anat-pill button:hover { background: var(--sl-surface-3); color: var(--sl-danger); }
.anat-pill-clear { font-size: 0.76rem; padding: 0 4px; }
.anat-selbar {
    display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: space-between; align-items: center;
    padding: 0.5rem 0.8rem; margin-bottom: 0.6rem;
    border-radius: 10px;
    background: var(--sl-accent-soft);
    border: 1px solid var(--sl-accent-ring);
    font-size: 0.85rem;
}

/* Tabela */
.anat-table-card {
    background: var(--sl-surface-1);
    border: 1px solid var(--sl-border);
    border-radius: var(--anat-radius);
    overflow: hidden;
}
.anat-table-wrap { max-height: calc(100vh - 140px); overflow: auto; }
.anat-table { --bs-table-bg: transparent; font-size: 0.84rem; min-width: 1060px; }
.anat-table thead th {
    position: sticky; top: 0; z-index: 2;
    background: var(--sl-surface-2);
    font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--sl-text-muted);
    border-bottom: 1px solid var(--sl-border);
    white-space: nowrap;
    padding: 0.6rem 0.6rem;
}
.anat-table td { padding: 0.6rem; border-color: var(--sl-border); vertical-align: middle; }
.anat-sortable { cursor: pointer; user-select: none; }
.anat-sortable:hover { color: var(--sl-text); }
.anat-sorted { color: var(--sl-accent) !important; }
.anat-sort-ic { font-size: 0.7rem; opacity: 0.55; }
.anat-sorted .anat-sort-ic { opacity: 1; }
.anat-col-chk { width: 34px; }
.anat-row { cursor: pointer; transition: background-color .1s ease; }
.anat-row:hover td { background: var(--sl-surface-2); }
.anat-row-sel td { background: var(--sl-accent-soft); }
.anat-col-empresa { min-width: 240px; max-width: 320px; }
.anat-nome { font-weight: 600; line-height: 1.25; }
.anat-razao { font-size: 0.74rem; color: var(--sl-text-muted); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anat-cnpj { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace; font-size: 0.7rem; color: var(--sl-text-subtle); display: inline-flex; align-items: center; gap: 2px; }
.anat-copy { border: 0; background: transparent; color: var(--sl-text-subtle); padding: 0 4px; font-size: 0.72rem; border-radius: 4px; }
.anat-copy:hover { color: var(--sl-accent); background: var(--sl-accent-soft); }
.anat-badges { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; }
.anat-badges .badge { font-weight: 500; font-size: 0.66rem; }
.anat-col-sede { white-space: nowrap; }
.anat-col-acessos .anat-num { font-weight: 600; }
.anat-spark { display: inline-block; margin-top: 2px; }
.anat-spark-up { color: var(--anat-up); }
.anat-spark-down { color: var(--anat-down); }
.anat-spark-flat { color: var(--sl-text-subtle); }
.anat-var { font-weight: 600; font-size: 0.76rem; font-variant-numeric: tabular-nums; }
.anat-var-pct { font-weight: 400; opacity: 0.85; }
.anat-sub { font-size: 0.7rem; color: var(--sl-text-muted); margin-top: 2px; white-space: nowrap; }
.anat-sub-strong { font-size: 0.78rem; white-space: nowrap; }
.anat-meiobar {
    display: flex; height: 5px; width: 120px; margin-top: 5px;
    border-radius: 3px; overflow: hidden; background: var(--sl-surface-3);
}
.anat-meiobar span { display: block; height: 100%; }
.anat-c-fibra { background: var(--anat-fibra); }
.anat-c-radio { background: var(--anat-radio); }
.anat-c-cabo { background: var(--anat-cabo); }
.anat-c-metalico { background: var(--anat-metalico); }
.anat-c-satelite { background: var(--anat-satelite); }
.anat-contatos { display: flex; gap: 2px; align-items: center; }
.anat-ic {
    position: relative;
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px;
    color: var(--sl-text-muted);
    text-decoration: none;
}
.anat-ic:hover { background: var(--sl-surface-3); color: var(--sl-text); }
.anat-ic.anat-wa:hover { color: #25D366; }
.anat-warn-ic { position: absolute; top: 1px; right: 0; font-size: 0.6rem; color: var(--sl-warning); }
.anat-mail-warn { color: var(--sl-warning); }
.anat-status { font-weight: 500; }

/* Skeleton / vazio */
@keyframes anat-shimmer { 0% { background-position: -200px 0; } 100% { background-position: 200px 0; } }
.anat-skel {
    display: block; height: 10px; border-radius: 5px;
    background: linear-gradient(90deg, var(--sl-surface-2) 0%, var(--sl-surface-3) 50%, var(--sl-surface-2) 100%);
    background-size: 400px 100%;
    animation: anat-shimmer 1.2s linear infinite;
}
.anat-skel-sm { width: 40% !important; height: 8px; margin-top: 6px; }
.anat-skel-kpi { width: 70%; height: 20px; margin-top: 6px; }
.anat-skel-block { height: 90px; margin-bottom: 12px; border-radius: 12px; width: 100%; }
.anat-skel-row td { padding: 1rem 0.6rem; }
.anat-empty { text-align: center; padding: 2.5rem 1rem; }
.anat-empty-big { padding: 4rem 1rem; background: var(--sl-surface-1); border: 1px solid var(--sl-border); border-radius: var(--anat-radius); }
.anat-empty-ic { font-size: 2.4rem; color: var(--sl-text-subtle); display: block; margin-bottom: 0.5rem; }
.anat-empty p { max-width: 520px; margin-left: auto; margin-right: auto; }
.anat-export-prog {
    position: fixed; right: 16px; bottom: 16px; z-index: 1080;
    width: min(360px, calc(100vw - 32px));
    padding: 0.8rem 1rem;
    background: var(--sl-surface-1);
    border: 1px solid var(--sl-border-strong);
    border-radius: var(--anat-radius);
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

/* Drawer de detalhe */
.anat-drawer.offcanvas-end { width: 720px; max-width: 100vw; background: var(--sl-bg); }
@media (max-width: 767.98px) { .anat-drawer.offcanvas-end { width: 100vw; } }
.anat-drawer .offcanvas-header { border-bottom: 1px solid var(--sl-border); background: var(--sl-surface-1); }
.anat-dr-nome { font-weight: 700; letter-spacing: -0.02em; }
.anat-dr-status { display: flex; align-items: center; flex-wrap: wrap; }
.anat-dr-status .form-select { width: auto; min-width: 170px; }
.anat-dr-card {
    background: var(--sl-surface-1);
    border: 1px solid var(--sl-border);
    border-radius: var(--anat-radius);
    padding: 0.9rem 1rem;
    margin-bottom: 0.9rem;
}
.anat-drawer .row > [class*="col-"] > .anat-dr-card { margin-bottom: 0; }
.anat-drawer .row.g-3 { margin-bottom: 0.9rem; }
.anat-dr-h { font-size: 0.85rem; font-weight: 600; margin-bottom: 0.7rem; }
.anat-contact-line {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 0; border-bottom: 1px dashed var(--sl-border);
    font-size: 0.86rem;
}
.anat-contact-line:last-of-type { border-bottom: 0; }
.anat-contact-line > .bi { color: var(--sl-text-muted); }
.anat-contact-acts { display: flex; gap: 4px; flex-shrink: 0; }
.anat-dkpis {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.5rem;
    margin-bottom: 0.9rem;
}
.anat-dkpi {
    background: var(--sl-surface-1);
    border: 1px solid var(--sl-border);
    border-radius: 10px;
    padding: 0.55rem 0.75rem;
}
.anat-dkpi-value { font-size: 1.1rem; font-weight: 700; letter-spacing: -0.01em; }
.anat-chart { width: 100%; height: auto; display: block; }
.anat-chart .anat-grid { stroke: var(--sl-border); stroke-width: 1; }
.anat-chart .anat-axis { fill: var(--sl-text-subtle); font-size: 10px; font-family: inherit; }
.anat-chart .anat-line { fill: none; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; stroke: var(--sl-accent); }
.anat-chart .anat-area { fill: var(--sl-accent); opacity: 0.12; }
.anat-chart-up .anat-line { stroke: var(--anat-up); }
.anat-chart-up .anat-area { fill: var(--anat-up); }
.anat-chart-down .anat-line { stroke: var(--anat-down); }
.anat-chart-down .anat-area { fill: var(--anat-down); }
.anat-hov .anat-hov-line { stroke: var(--sl-text-subtle); stroke-dasharray: 3 3; opacity: 0; }
.anat-hov .anat-hov-dot { fill: var(--sl-bg); stroke: var(--sl-text); stroke-width: 2; opacity: 0; }
.anat-hov:hover .anat-hov-line, .anat-hov:hover .anat-hov-dot { opacity: 1; }
.anat-hbar { display: grid; grid-template-columns: 110px 1fr auto; gap: 8px; align-items: center; font-size: 0.78rem; margin-bottom: 6px; }
.anat-hbar-label { color: var(--sl-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.anat-hbar-track { height: 8px; background: var(--sl-surface-3); border-radius: 4px; overflow: hidden; }
.anat-hbar-track span { display: block; height: 100%; background: var(--sl-accent); border-radius: 4px; }
.anat-hbar-val { text-align: right; white-space: nowrap; }
.anat-hbar-val small { color: var(--sl-text-muted); }
.anat-dr-table table { font-size: 0.8rem; --bs-table-bg: transparent; }
.anat-dr-table th { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--sl-text-muted); white-space: nowrap; }

/* Admin: importação */
.anat-stepper { display: flex; align-items: center; gap: 6px; margin-bottom: 1rem; overflow-x: auto; padding-bottom: 2px; }
.anat-step { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--sl-text-subtle); white-space: nowrap; }
.anat-step-n {
    width: 24px; height: 24px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--sl-border-strong); font-size: 0.74rem; font-weight: 600;
}
.anat-step.active { color: var(--sl-text); font-weight: 600; }
.anat-step.active .anat-step-n { background: var(--sl-accent); border-color: var(--sl-accent); color: #fff; }
.anat-step.done { color: var(--sl-text-muted); }
.anat-step.done .anat-step-n { background: var(--sl-success); border-color: var(--sl-success); color: #fff; }
.anat-step-sep { flex: 1; min-width: 14px; height: 1px; background: var(--sl-border); }
.anat-imp-help { font-size: 0.85rem; color: var(--sl-text-muted); margin-bottom: 0.75rem; }
.anat-drop {
    border: 2px dashed var(--sl-border-strong);
    border-radius: var(--anat-radius);
    padding: 2rem 1rem;
    text-align: center;
    background: var(--sl-surface-1);
    transition: border-color .15s ease, background-color .15s ease;
}
.anat-drop.dragover { border-color: var(--sl-accent); background: var(--sl-accent-soft); }
.anat-drop-ic { font-size: 2.2rem; color: var(--sl-accent); display: block; margin-bottom: 0.3rem; }
.anat-file-list { margin-top: 0.8rem; border: 1px solid var(--sl-border); border-radius: 10px; overflow: hidden; }
.anat-file { display: flex; align-items: center; gap: 8px; padding: 6px 10px; font-size: 0.82rem; border-bottom: 1px solid var(--sl-border); }
.anat-file:last-child { border-bottom: 0; }
.anat-prog-row { margin-bottom: 0.7rem; }
.anat-avisos { background: var(--sl-surface-2); border-radius: 8px; padding: 0.6rem 0.8rem; }
.anat-diff { background: var(--sl-surface-1); border: 1px solid var(--sl-border); border-radius: var(--anat-radius); padding: 1rem; }
.anat-diff-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 5px 0; font-size: 0.9rem; }
.anat-diff-l { width: 100px; color: var(--sl-text-muted); font-size: 0.8rem; }
.anat-diff-v { font-variant-numeric: tabular-nums; }
.anat-hist-table { font-size: 0.82rem; }
.anat-arpu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.8rem; }

@media (max-width: 575.98px) {
    .anat-kpi-value { font-size: 1.1rem; }
    .anat-sort { min-width: 0; flex: 1; }
    .anat-toolbar > div { width: 100%; }
    .anat-hbar { grid-template-columns: 90px 1fr auto; }
    .anat-contact-line { flex-wrap: wrap; }
}

/* ---- Anatel: validação, escopo regional e avisos ---- */
.anat-err { font-size: 0.7rem; color: var(--sl-danger); line-height: 1.25; margin-top: 2px; }
.anat-err:empty { display: none; }
.anat-sidebar .form-control.is-invalid { border-color: var(--sl-danger); background-image: none; padding-right: 0.5rem; }
.anat-sidebar .form-control:disabled { opacity: 0.55; cursor: not-allowed; }
.anat-sfx { color: var(--sl-text-subtle); font-weight: 400; }
.anat-sfx.anat-sfx-reg { color: var(--sl-accent); font-weight: 500; }
.anat-help-regiao { color: var(--sl-accent); }
.anat-sub-emp { color: var(--sl-text-subtle) !important; font-size: 0.68rem; }
.anat-aviso-inline {
    display: inline-flex; align-items: center;
    font-size: 0.7rem; line-height: 1.2;
    color: var(--sl-warning);
    max-width: 240px;
}
@media (max-width: 575.98px) { .anat-aviso-inline { max-width: 100%; } }

/* ============================================================
   Radar DDoS (radar-ddos.js) — prefixo .rdd-
   ============================================================ */
.radar-gradient {
    background: linear-gradient(135deg, #EF4444 0%, #F97316 100%);
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
}
.rdd-wrap { max-width: 1400px; }
.rdd-wrap .rdd-num, .rdd-kpi-value, .rdd-table td.text-end { font-variant-numeric: tabular-nums; }

.rdd-status {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.8rem; padding: 4px 10px; border-radius: 999px;
    border: 1px solid var(--sl-border); background: var(--sl-surface-1); color: var(--sl-text-muted);
}
.rdd-status i { font-size: 0.55rem; }
.rdd-status-on i { color: var(--sl-success); }
.rdd-status-off i { color: var(--sl-danger); }

.rdd-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.rdd-kpi { border: 1px solid var(--sl-border); background: var(--sl-surface-1); border-radius: 10px; padding: 10px 14px; }
.rdd-kpi-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--sl-text-muted); font-weight: 500; }
.rdd-kpi-value { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; }

.rdd-grupo .card-header { background: var(--sl-surface-1); font-size: 0.9rem; }
.rdd-table th { font-size: 0.75rem; color: var(--sl-text-muted); font-weight: 600; white-space: nowrap; }
.rdd-table td { font-size: 0.85rem; }
.rdd-as { font-weight: 600; text-decoration: none; }
.rdd-ext { font-size: 0.7rem; color: var(--sl-text-subtle); }
.rdd-asnome { color: var(--sl-text-muted); font-size: 0.8rem; }

.rdd-badge { font-weight: 500; border: 1px solid transparent; }
.rdd-b-mitig    { background: rgba(236, 72, 153, 0.14); color: #DB2777; border-color: rgba(236, 72, 153, 0.35); }
.rdd-b-proprio  { background: var(--sl-accent-soft); color: var(--sl-accent); border-color: var(--sl-accent-ring); }
.rdd-b-terceiro { background: rgba(245, 158, 11, 0.14); color: #B45309; border-color: rgba(245, 158, 11, 0.4); }
.rdd-b-origem   { background: rgba(139, 92, 246, 0.14); color: #7C3AED; border-color: rgba(139, 92, 246, 0.35); }
.rdd-b-indireto { background: var(--sl-surface-2); color: var(--sl-text-muted); border-color: var(--sl-border); }
.rdd-b-ok       { background: rgba(16, 185, 129, 0.14); color: #047857; border: 1px solid rgba(16, 185, 129, 0.35); }
.rdd-b-up       { background: var(--sl-surface-2); color: var(--sl-text); border-color: var(--sl-border); }
[data-bs-theme="dark"] .rdd-b-mitig    { color: #F472B6; }
[data-bs-theme="dark"] .rdd-b-terceiro { color: #FBBF24; }
[data-bs-theme="dark"] .rdd-b-origem   { color: #A78BFA; }
[data-bs-theme="dark"] .rdd-b-ok       { color: #34D399; }

.rdd-chip { border: 1px solid var(--sl-border); background: var(--sl-surface-1); color: var(--sl-text); }
.rdd-chip:hover { border-color: var(--sl-accent); }

.rdd-vazio { text-align: center; padding: 40px 16px; color: var(--sl-text-muted); border: 1px dashed var(--sl-border); border-radius: 10px; }
.rdd-vazio > i { font-size: 2rem; color: var(--sl-success); display: block; margin-bottom: 6px; }

.rdd-tl-linha { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.rdd-tl-rotulo { width: 220px; flex-shrink: 0; font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rdd-tl-trilho { position: relative; flex: 1; height: 14px; background: var(--sl-surface-2); border-radius: 4px; }
.rdd-bar { position: absolute; top: 0; bottom: 0; background: #F97316; border-radius: 3px; cursor: pointer; min-width: 3px; }
.rdd-bar-ativa { background: var(--sl-danger); box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.4); }
.rdd-bar-ao { background: var(--sl-text-subtle); }
.rdd-tl-eixo { position: relative; height: 18px; margin-left: 230px; font-size: 0.68rem; color: var(--sl-text-subtle); }
.rdd-tl-eixo span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.rdd-tl-eixo span:first-child { transform: none; }
.rdd-tl-eixo span:last-child { transform: translateX(-100%); }

.rdd-path { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.rdd-hop { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.78rem; padding: 2px 6px; border-radius: 4px; background: var(--sl-surface-2); border: 1px solid var(--sl-border); }
.rdd-hop-mitig { background: rgba(236, 72, 153, 0.16); border-color: rgba(236, 72, 153, 0.45); }
.rdd-hop-contr { background: rgba(245, 158, 11, 0.16); border-color: rgba(245, 158, 11, 0.45); }
.rdd-hop-vit   { background: var(--sl-accent-soft); border-color: var(--sl-accent-ring); }
.rdd-hop-sep { font-size: 0.65rem; color: var(--sl-text-subtle); }

.rdd-rodape { font-size: 0.72rem; color: var(--sl-text-subtle); border-top: 1px solid var(--sl-border); padding-top: 10px; }

/* Ataques ativos — cartões */
.rdd-explica { font-size: 0.82rem; color: var(--sl-text-muted); border-left: 3px solid var(--sl-accent); padding: 6px 10px; background: var(--sl-surface-1); border-radius: 0 8px 8px 0; margin-bottom: 12px; }
.rdd-kpi-sub { font-size: 0.72rem; color: var(--sl-text-subtle); margin-top: 2px; }
.rdd-kpi-destaque { border-color: rgba(239, 68, 68, 0.45); background: linear-gradient(135deg, rgba(239, 68, 68, 0.10), transparent 70%), var(--sl-surface-1); }
.rdd-kpi-destaque .rdd-kpi-value { color: var(--sl-danger); }
.rdd-kpi-label .rdd-live-dot { margin-right: 6px; vertical-align: 1px; }

.rdd-live { display: inline-flex; align-items: center; gap: 6px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; color: var(--sl-danger); background: rgba(239, 68, 68, 0.12); border: 1px solid rgba(239, 68, 68, 0.35); padding: 2px 8px; border-radius: 999px; }
.rdd-live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--sl-danger); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6); animation: rdd-bolinha 1.6s ease-out infinite; }
@keyframes rdd-bolinha { 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6); } 70% { box-shadow: 0 0 0 7px rgba(239, 68, 68, 0); } 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } }
@media (prefers-reduced-motion: reduce) { .rdd-live-dot { animation: none; } }

.rdd-chip-f { border: 1px solid var(--sl-border); background: var(--sl-surface-1); color: var(--sl-text); border-radius: 999px; padding: 4px 12px; font-size: 0.8rem; }
.rdd-chip-f span { display: inline-block; min-width: 20px; margin-left: 4px; padding: 0 6px; border-radius: 999px; background: var(--sl-surface-3); font-size: 0.72rem; font-variant-numeric: tabular-nums; }
.rdd-chip-f:hover { border-color: var(--sl-accent); }
.rdd-chip-f.ativo { background: var(--sl-accent); border-color: var(--sl-accent); color: #fff; }
.rdd-chip-f.ativo span { background: rgba(255, 255, 255, 0.22); }

.rdd-atk-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 12px; }
.rdd-atk { background: var(--sl-surface-1); border: 1px solid var(--sl-border); border-left: 3px solid var(--sl-danger); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; min-width: 0; }
.rdd-atk-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.rdd-atk-tempo { font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.rdd-atk-tempo i { color: var(--sl-text-subtle); font-size: 0.9rem; }
.rdd-atk-as { display: flex; flex-direction: column; margin-bottom: 4px; min-width: 0; }
.rdd-atk-as a { font-size: 1.2rem; font-weight: 700; text-decoration: none; letter-spacing: -0.01em; }
.rdd-atk-nome { color: var(--sl-text-muted); font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.rdd-desvio { background: var(--sl-surface-2); border-radius: 8px; padding: 8px 12px; margin-top: 10px; }
.rdd-linha { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px; align-items: baseline; padding: 3px 0; font-size: 0.84rem; }
.rdd-linha + .rdd-linha { border-top: 1px solid var(--sl-border); }
.rdd-rot { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--sl-text-subtle); }
.rdd-val { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rdd-val a { font-weight: 600; text-decoration: none; }
.rdd-val em { font-style: normal; color: var(--sl-text-muted); }
.rdd-mit-tag { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: #DB2777; }
[data-bs-theme="dark"] .rdd-mit-tag { color: #F472B6; }
.rdd-tag { display: inline-block; font-size: 0.66rem; font-weight: 500; padding: 1px 6px; border-radius: 999px; border: 1px solid var(--sl-border); color: var(--sl-text-muted); vertical-align: 1px; }
.rdd-tag-up { border-color: rgba(245, 158, 11, 0.45); color: #B45309; }
[data-bs-theme="dark"] .rdd-tag-up { color: #FBBF24; }
.rdd-atk-rodape { margin-top: auto; padding-top: 10px; font-size: 0.72rem; color: var(--sl-text-subtle); }

@media (max-width: 480px) { .rdd-atk-grade { grid-template-columns: 1fr; } }

/* Mapa de ataques */
.rdd-mapa { height: 560px; border-radius: 10px; border: 1px solid var(--sl-border); background: #0b0b0d; }
.rdd-mapa .leaflet-control-attribution { background: rgba(13, 13, 15, 0.7); color: #a1a1aa; }
.rdd-mapa .leaflet-control-attribution a { color: #d4d4d8; }
.rdd-ponto-vivo { animation: rdd-pulso 1.6s ease-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes rdd-pulso { 0% { stroke-width: 2; stroke-opacity: 1; } 70% { stroke-width: 10; stroke-opacity: 0; stroke: #EF4444; } 100% { stroke-width: 2; stroke-opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .rdd-ponto-vivo { animation: none; } }
.rdd-leg-ponto { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #F59E0B; vertical-align: middle; margin-right: 4px; }
.rdd-leg-ponto.rdd-leg-vivo { background: #EF4444; }
.rdd-popup .leaflet-popup-content-wrapper, .rdd-popup .leaflet-popup-tip { background: var(--sl-surface-1); color: var(--sl-text); border: 1px solid var(--sl-border); }
.rdd-popup .leaflet-popup-content { margin: 12px 14px; font-size: 0.82rem; line-height: 1.45; }
.rdd-pop-t { font-weight: 700; font-size: 0.95rem; }
.rdd-pop-t span { font-weight: 500; color: var(--sl-text-muted); font-size: 0.8rem; }
.rdd-pop-l { color: var(--sl-text-muted); margin-bottom: 6px; }
.rdd-pop-ep { border-top: 1px solid var(--sl-border); padding: 6px 0; }

/* Ranking + mapa de calor por UF */
.rdd-rank-linha { cursor: pointer; }
.rdd-rank-sel > td { background: var(--sl-accent-soft) !important; }
.rdd-rank-barra { height: 4px; margin-top: 4px; background: var(--sl-surface-2); border-radius: 2px; max-width: 220px; }
.rdd-rank-barra span { display: block; height: 100%; background: var(--sl-accent); border-radius: 2px; }
.rdd-mapa-uf { height: 380px; background: transparent; }
.rdd-mapa-uf.leaflet-container { background: transparent; }
.rdd-legenda { display: flex; flex-wrap: wrap; gap: 10px; font-size: 0.75rem; color: var(--sl-text-muted); }
.rdd-leg-item { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.rdd-leg-cor { width: 14px; height: 10px; border-radius: 2px; border: 1px solid var(--sl-border); }
#rdd-r-ufs { max-height: 220px; overflow-y: auto; }

@media (max-width: 768px) {
    .rdd-mapa { height: 420px; }
    .rdd-tl-rotulo { width: 120px; }
    .rdd-tl-eixo { margin-left: 130px; }
}