/* ============================================================
   Bilhon DS Bridge — Redes de Influencia
   Mapeia tokens legacy (--bg-*, --text-*, etc.) para os
   tokens oficiais da LAND BILHON (--bl-*), e define o accent
   do produto "redes" (roxo brand).

   Carregar DEPOIS de shared/design-system.css e css/styles.css
   para fazer override dos valores legacy sem reescrever 2352 linhas.
   ============================================================ */

/* Product accent: redes de influencia = roxo brand */
[data-product="redes"] {
  --bl-accent:        #a855f7;
  --bl-accent-dim:    rgba(168, 85, 247, 0.15);
  --bl-accent-glow:   rgba(168, 85, 247, 0.25);
  --bl-accent-rgb:    168, 85, 247;
}

/* ── Override das variáveis do legacy design-system.css ──
   Tudo que era --bg-*, --text-*, --border-*, --accent-*
   passa a apontar para tokens Bilhon.                        */
:root {
  /* Backgrounds */
  --bg-primary:    var(--bl-bg-2);
  --bg-secondary:  var(--bl-bg-3);
  --bg-card:       var(--bl-bg-card);
  --bg-card-hover: var(--bl-bg-card-hover);
  --bg-sidebar:    var(--bl-bg-1);
  --bg-input:      var(--bl-bg-3);

  /* Accents (mantem semantica mas com cores Bilhon) */
  --accent-success: var(--bl-success);
  --accent-info:    var(--bl-info);
  --accent-warning: var(--bl-warning);
  --accent-danger:  var(--bl-danger);
  --accent-purple:  #a855f7;

  /* Section theme = product accent */
  --section-accent:     var(--bl-accent);
  --section-accent-rgb: var(--bl-accent-rgb);

  /* Texto */
  --text-primary:   var(--bl-text-primary);
  --text-secondary: var(--bl-text-secondary);
  --text-muted:     var(--bl-text-muted);

  /* Borders */
  --border-color: var(--bl-border);
  --border-light: var(--bl-border-hover);
  --border-glow:  var(--bl-border-accent);

  /* Shadows */
  --shadow-sm:   var(--bl-shadow-sm);
  --shadow-md:   var(--bl-shadow-md);
  --shadow-lg:   var(--bl-shadow-lg);
  --shadow-glow: var(--bl-glow-green);

  /* Fonts */
  --font-mono:     var(--bl-font-mono);
  --font-sans:     var(--bl-font-sans);
}

/* ── Base: herdar do Bilhon (fontes oficiais BOS) ── */
html, body {
  background: var(--bl-bg-2);
  color: var(--bl-text-primary);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body, button, input, select, textarea {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}
code, pre, .mono, [class*="mono"] {
  font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
}

/* Remover o green glow do bilhon-base.css que fica feio no produto "redes"
   (ele fica saindo por tras do modal). Mantemos so o grid. */
body::after { display: none !important; }

/* ── Grid de fundo discreto (assinatura Bilhon) ── */
body.has-topbar::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: var(--bl-grid-size) var(--bl-grid-size);
}
.app-container { position: relative; z-index: 1; }

/* ── Topbar mínimo (fallback, caso topbar.js não injete) ── */
.bl-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--bl-topbar-height);
  background: var(--bl-topbar-bg);
  backdrop-filter: var(--bl-blur-lg);
  -webkit-backdrop-filter: var(--bl-blur-lg);
  border-bottom: 1px solid var(--bl-border);
  display: flex;
  align-items: center;
  padding: 0 var(--bl-space-5);
  z-index: var(--bl-z-topbar);
  font-family: var(--bl-font-sans);
}
.bl-topbar-brand {
  display: flex;
  align-items: center;
  gap: var(--bl-space-3);
  letter-spacing: 0.01em;
}
.bl-topbar-brand .dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--bl-green);
  box-shadow: 0 0 12px var(--bl-green-glow);
}
.bl-brand-name {
  font-family: var(--bl-font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--bl-green);
  letter-spacing: -0.01em;
}
.bl-brand-dot {
  color: var(--bl-text-dim);
  font-weight: 400;
}
.bl-topbar-section {
  font-size: var(--bl-text-xs);
  color: var(--bl-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-left: var(--bl-space-4);
  padding-left: var(--bl-space-4);
  border-left: 1px solid var(--bl-border);
  font-family: var(--bl-font-mono);
}
.bl-topbar-spacer { flex: 1; }
.bl-topbar-meta {
  display: flex;
  align-items: center;
  gap: var(--bl-space-3);
  font-size: var(--bl-text-xs);
  color: var(--bl-text-dim);
  font-family: var(--bl-font-mono);
}
.bl-user {
  color: var(--bl-text-secondary);
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bl-topbar-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--bl-border-hover);
  box-shadow: 0 0 0 2px var(--bl-bg-2);
}

.bl-logout {
  background: transparent;
  border: 1px solid var(--bl-border);
  color: var(--bl-text-dim);
  width: 30px;
  height: 30px;
  border-radius: var(--bl-radius-md);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--bl-ease-default);
}
.bl-logout:hover {
  color: var(--bl-red);
  border-color: var(--bl-red);
  background: rgba(239, 68, 68, 0.08);
}
.bl-logout i { width: 14px; height: 14px; }
body.has-topbar .app-container { padding-top: var(--bl-topbar-height); }

/* ── Accent override nos componentes legacy principais ── */
.stat-pill { border: 1px solid var(--bl-border); }
.stat-pill.highlight-pill {
  border-color: var(--bl-accent);
  box-shadow: 0 0 0 1px var(--bl-accent-dim);
}
.stat-value { color: var(--bl-text-primary); }
.stat-label { color: var(--bl-text-dim); letter-spacing: 0.04em; }

/* ============================================================
   Section card - override total do legacy (remover hover verde feio)
   ============================================================ */
.section-card {
  background: var(--bl-bg-card) !important;
  border: 1px solid var(--bl-border) !important;
  border-radius: var(--bl-radius-lg) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: var(--bl-shadow-md) !important;
  transform: none !important;
  transition: border-color var(--bl-ease-default), box-shadow var(--bl-ease-default) !important;
}

/* Remover gradient highlight + noise do legacy */
.card::before,
.glass-card::before,
.perspective-card::before,
.section-card::before,
.card::after,
.glass-card::after,
.perspective-card::after,
.section-card::after {
  display: none !important;
  content: none !important;
  background: none !important;
}

/* Hover neutro - sem verde, sem elevation exagerada */
.section-card:hover,
.card:hover,
.perspective-card:hover {
  transform: none !important;
  border-color: var(--bl-border-hover) !important;
  box-shadow: var(--bl-shadow-md) !important;
  background: var(--bl-bg-card) !important;
}
.section-card:hover::before,
.card:hover::before,
.perspective-card:hover::before,
.section-card:hover::after,
.card:hover::after,
.perspective-card:hover::after {
  display: none !important;
  background: none !important;
  opacity: 0 !important;
}

.section-title { color: var(--bl-text-primary); }
.section-desc  { color: var(--bl-text-dim); }

/* ============================================================
   Botoes Bilhon OS (action-btn base) - override forcado
   ============================================================ */
button.action-btn,
.action-btn,
.btn-primary,
.btn-secondary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 42px !important;
  padding: 12px 20px !important;
  font-family: var(--bl-font-sans) !important;
  font-size: var(--bl-text-base) !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.01em !important;
  border-radius: var(--bl-radius-md) !important;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: all var(--bl-ease-default);
  box-sizing: border-box !important;
}
.action-btn i,
.btn-primary i,
.btn-secondary i {
  flex: 0 0 auto;
  width: 16px !important;
  height: 16px !important;
}

/* Variante icone-only (square) */
.action-btn.icon-only {
  padding: 12px !important;
  width: 42px !important;
  min-width: 42px !important;
}

/* Primario (accent do produto) */
button.action-btn:not(.secondary),
.action-btn:not(.secondary),
.btn-primary {
  background: var(--bl-accent) !important;
  color: var(--bl-bg-0) !important;
  border: 1px solid transparent !important;
}
.action-btn:not(.secondary):hover,
.btn-primary:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px var(--bl-accent-dim);
}
.action-btn:not(.secondary):active,
.btn-primary:active { transform: translateY(0); }

/* Secundario (ghost) */
button.action-btn.secondary,
.action-btn.secondary,
.btn-secondary {
  background: var(--bl-bg-3) !important;
  color: var(--bl-text-secondary) !important;
  border: 1px solid var(--bl-border-hover) !important;
}
.action-btn.secondary:hover,
.btn-secondary:hover {
  background: var(--bl-bg-4) !important;
  color: var(--bl-text-primary) !important;
  border-color: var(--bl-text-dim) !important;
}

/* Estado "ativo" (demo carregada, etc) */
.action-btn.is-active {
  background: var(--bl-green-soft) !important;
  border-color: var(--bl-green) !important;
  color: var(--bl-green) !important;
}
.action-btn.is-active:hover {
  background: var(--bl-green-dim) !important;
}

/* Menu dropdown para Save/Load */
.vk-dropdown {
  position: relative;
  display: inline-block;
}
.vk-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 260px;
  max-width: 320px;
  background: var(--bl-bg-elevated);
  border: 1px solid var(--bl-border-hover);
  border-radius: var(--bl-radius-md);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
  padding: 6px;
  z-index: var(--bl-z-dropdown);
  display: none;
  max-height: 360px;
  overflow-y: auto;
}
.vk-dropdown.open .vk-dropdown-menu { display: block; }
.vk-dropdown-header {
  padding: 8px 12px 6px;
  font-family: var(--bl-font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bl-text-muted);
  border-bottom: 1px solid var(--bl-border);
  margin-bottom: 4px;
}
.vk-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--bl-radius-sm);
  cursor: pointer;
  font-size: var(--bl-text-base);
  color: var(--bl-text-secondary);
  transition: var(--bl-ease-default);
}
.vk-dropdown-item:hover {
  background: var(--bl-bg-card-hover);
  color: var(--bl-text-primary);
}
.vk-dropdown-item .vk-dropdown-meta {
  font-family: var(--bl-font-mono);
  font-size: 10px;
  color: var(--bl-text-muted);
}
.vk-dropdown-item .vk-dropdown-delete {
  background: transparent;
  border: none;
  color: var(--bl-text-muted);
  cursor: pointer;
  padding: 2px;
  border-radius: var(--bl-radius-sm);
}
.vk-dropdown-item .vk-dropdown-delete:hover { color: var(--bl-red); }
.vk-dropdown-empty {
  padding: 16px;
  text-align: center;
  font-size: var(--bl-text-xs);
  color: var(--bl-text-muted);
  font-family: var(--bl-font-mono);
}

/* Sync badges na tabela */
.vk-sync-badges {
  display: inline-flex;
  gap: 4px;
  margin-left: 4px;
}
.vk-sync-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bl-text-muted);
  display: inline-block;
  border: 1px solid transparent;
}
.vk-sync-dot.synced { background: var(--bl-green); box-shadow: 0 0 6px var(--bl-green-glow); }
.vk-sync-dot.pending { background: var(--bl-warning); }
.vk-sync-dot.error { background: var(--bl-red); }

/* ============================================================
   Rail / Sidebar Panel - Bilhon OS
   Layout inspirado em gestao.bos (mantem ORB no header)
   ============================================================ */
.sidebar-rail {
  background: var(--bl-bg-1) !important;
  border-right: 1px solid var(--bl-border) !important;
}
.sidebar-panel {
  background: var(--bl-bg-1) !important;
  border-right: 1px solid var(--bl-border) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  width: 300px !important;
  /* Empurra o conteudo pra baixo da topbar Bilhon (56px) */
  padding-top: var(--bl-topbar-height) !important;
}

/* ── Panel Header (orb + titulo + X) — padding uniforme top/bottom ── */
.panel-header {
  display: flex !important;
  align-items: center !important;
  gap: var(--bl-space-3) !important;
  padding: var(--bl-space-4) var(--bl-space-5) !important;
  border-bottom: 1px solid var(--bl-border) !important;
}
.panel-header .logo {
  display: flex !important;
  align-items: center !important;
  gap: var(--bl-space-3) !important;
  flex: 1;
  min-width: 0;
}
.panel-header .logo-orb {
  width: 42px !important;
  height: 42px !important;
  flex-shrink: 0 !important;
  border-radius: 50% !important;
}
.panel-header .logo-text {
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--bl-green) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
  line-height: 1.2;
  margin: 0 !important;
}
.panel-header .logo-subtitle {
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 9px !important;
  font-weight: 500 !important;
  color: var(--bl-text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  margin-top: 2px !important;
  line-height: 1.3;
}
.panel-header .btn-close {
  background: transparent !important;
  border: 1px solid var(--bl-border) !important;
  color: var(--bl-text-dim) !important;
  width: 30px;
  height: 30px;
  border-radius: var(--bl-radius-md) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--bl-ease-default);
  font-size: 13px;
  flex-shrink: 0;
}
.panel-header .btn-close:hover {
  background: var(--bl-bg-3) !important;
  color: var(--bl-text-primary) !important;
  border-color: var(--bl-border-hover) !important;
}

.panel-content {
  padding: var(--bl-space-4) 0 !important;
}

/* ── Section title (FERRAMENTAS, OVERVIEW, etc.) ── */
.nav-section {
  margin-bottom: var(--bl-space-4) !important;
  padding: 0 !important;
}
.nav-section-title {
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  color: var(--bl-text-muted) !important;
  margin: 0 0 var(--bl-space-2) 0 !important;
  padding: 0 var(--bl-space-5) !important;
}

/* ── Nav items estilo gestao.bos ──
   Layout: [bolinha] [icone] [label]      [badge/chevron]  */
.nav-item {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px var(--bl-space-5) !important;
  border-radius: 0 !important;
  color: var(--bl-text-secondary) !important;
  cursor: pointer;
  transition: all var(--bl-ease-default) !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  border-left: 2px solid transparent !important;
  overflow: visible !important;
  letter-spacing: -0.005em;
  position: relative !important;
}
.nav-item::after { display: none !important; }

/* Bolinha colorida a esquerda (accent do item) */
.nav-item::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bl-text-muted);
  flex-shrink: 0;
  transition: all var(--bl-ease-default);
}
.nav-item.color-gold::before   { background: #D4A853; box-shadow: 0 0 6px rgba(212,168,83,0.6); }
.nav-item.color-cyan::before   { background: var(--bl-cyan); box-shadow: 0 0 6px rgba(6,182,212,0.6); }
.nav-item.color-purple::before { background: #a855f7; box-shadow: 0 0 6px rgba(168,85,247,0.6); }
.nav-item.color-orange::before { background: var(--bl-orange); box-shadow: 0 0 6px rgba(251,146,60,0.6); }
.nav-item.color-red::before    { background: var(--bl-red); box-shadow: 0 0 6px rgba(239,68,68,0.6); }
.nav-item.color-pink::before   { background: var(--bl-pink); box-shadow: 0 0 6px rgba(236,72,153,0.6); }
.nav-item.color-blue::before   { background: var(--bl-blue); box-shadow: 0 0 6px rgba(96,165,250,0.6); }
.nav-item.color-yellow::before { background: var(--bl-yellow); box-shadow: 0 0 6px rgba(251,191,36,0.6); }
.nav-item.color-green::before  { background: var(--bl-green); box-shadow: 0 0 6px var(--bl-green-glow); }

/* Hover */
.nav-item:hover {
  background: var(--bl-bg-3) !important;
  color: var(--bl-text-primary) !important;
}

/* Ativo: bg sutil + barra vertical a direita (cor do accent) */
.nav-item.active {
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--bl-text-primary) !important;
  font-weight: 700 !important;
}
.nav-item.active::after {
  display: block !important;
  content: '' !important;
  position: absolute !important;
  right: 0 !important;
  top: 10% !important;
  bottom: 10% !important;
  width: 3px !important;
  border-radius: 3px 0 0 3px !important;
  background: var(--bl-accent);
}
.nav-item.active.color-gold::after   { background: #D4A853 !important; box-shadow: 0 0 12px rgba(212,168,83,0.5); }
.nav-item.active.color-cyan::after   { background: var(--bl-cyan) !important; box-shadow: 0 0 12px rgba(6,182,212,0.5); }
.nav-item.active.color-purple::after { background: #a855f7 !important; box-shadow: 0 0 12px rgba(168,85,247,0.5); }
.nav-item.active.color-orange::after { background: var(--bl-orange) !important; box-shadow: 0 0 12px rgba(251,146,60,0.5); }
.nav-item.active.color-red::after    { background: var(--bl-red) !important; box-shadow: 0 0 12px rgba(239,68,68,0.5); }
.nav-item.active.color-pink::after   { background: var(--bl-pink) !important; box-shadow: 0 0 12px rgba(236,72,153,0.5); }
.nav-item.active.color-blue::after   { background: var(--bl-blue) !important; box-shadow: 0 0 12px rgba(96,165,250,0.5); }
.nav-item.active.color-yellow::after { background: var(--bl-yellow) !important; box-shadow: 0 0 12px rgba(251,191,36,0.5); }
.nav-item.active.color-green::after  { background: var(--bl-green) !important; box-shadow: 0 0 12px var(--bl-green-glow); }

/* Icone do nav item: gestao.bos usa icone simples, sem box */
.nav-item-icon {
  width: 18px !important;
  height: 18px !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.nav-item-icon i,
.nav-item-icon svg {
  width: 18px !important;
  height: 18px !important;
  stroke-width: 2 !important;
  color: var(--bl-text-dim) !important;
}
.nav-item:hover .nav-item-icon i,
.nav-item:hover .nav-item-icon svg,
.nav-item.active .nav-item-icon i,
.nav-item.active .nav-item-icon svg {
  color: var(--bl-text-primary) !important;
}
/* Cores por nav color (ativos ou hover ja passam pelo primary acima) */
.nav-item.color-gold   .nav-item-icon i { color: #D4A853 !important; }
.nav-item.color-cyan   .nav-item-icon i { color: var(--bl-cyan) !important; }
.nav-item.color-purple .nav-item-icon i { color: #a855f7 !important; }
.nav-item.color-orange .nav-item-icon i { color: var(--bl-orange) !important; }
.nav-item.color-red    .nav-item-icon i { color: var(--bl-red) !important; }
.nav-item.color-pink   .nav-item-icon i { color: var(--bl-pink) !important; }
.nav-item.color-blue   .nav-item-icon i { color: var(--bl-blue) !important; }
.nav-item.color-yellow .nav-item-icon i { color: var(--bl-yellow) !important; }
.nav-item.color-green  .nav-item-icon i { color: var(--bl-green) !important; }

/* Rail (collapsed sidebar) - mantem perfeito */
.rail-item {
  transition: all var(--bl-ease-default) !important;
}
.rail-item.active {
  background: var(--bl-bg-3) !important;
}
.rail-item:hover { background: var(--bl-bg-card-hover) !important; }

/* Scrollbar Bilhon */
*::-webkit-scrollbar { width: var(--bl-scroll-width); height: var(--bl-scroll-width); }
*::-webkit-scrollbar-track { background: var(--bl-scroll-track); }
*::-webkit-scrollbar-thumb { background: var(--bl-scroll-thumb); border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: var(--bl-scroll-hover); }

/* ============================================================
   Influencer CRM - Componentes da feature mergeada
   ============================================================ */
.inf-table-wrap {
  border: 1px solid var(--bl-border);
  border-radius: var(--bl-radius-lg);
  overflow: hidden;
  background: rgba(0, 0, 0, 0.2);
}
.inf-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--bl-font-sans);
  font-size: var(--bl-text-base);
}
.inf-table thead th {
  padding: var(--bl-space-3) var(--bl-space-5);
  background: rgba(0, 0, 0, 0.35);
  text-align: left;
  font-size: var(--bl-text-xs);
  font-weight: 600;
  color: var(--bl-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--bl-border);
}
.inf-table tbody td {
  padding: var(--bl-space-4) var(--bl-space-5);
  border-bottom: 1px solid var(--bl-border-1);
  color: var(--bl-text-secondary);
  vertical-align: middle;
}
.inf-table tbody tr:last-child td { border-bottom: none; }
.inf-table tbody tr:hover td { background: var(--bl-bg-card-hover); }
.inf-table .mono { font-family: var(--bl-font-mono); }

.inf-name { display: flex; flex-direction: column; gap: 2px; }
.inf-name strong { color: var(--bl-text-primary); font-weight: 600; }
.inf-notes { font-size: var(--bl-text-xs); color: var(--bl-text-dim); }

.inf-platform {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-transform: capitalize;
  color: var(--bl-text-secondary);
}

.inf-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--bl-radius-full);
  font-size: var(--bl-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
}
.inf-badge.status-prospecting { background: rgba(113, 113, 122, 0.12); color: var(--bl-text-dim); border-color: rgba(113, 113, 122, 0.3); }
.inf-badge.status-negotiating { background: rgba(251, 191, 36, 0.1); color: var(--bl-warning);  border-color: rgba(251, 191, 36, 0.35); }
.inf-badge.status-active       { background: rgba(107, 201, 80, 0.1); color: var(--bl-success);  border-color: rgba(107, 201, 80, 0.35); }
.inf-badge.status-finished     { background: rgba(96, 165, 250, 0.1); color: var(--bl-info);     border-color: rgba(96, 165, 250, 0.35); }

.inf-roi.roi-good { color: var(--bl-success); }
.inf-roi.roi-mid  { color: var(--bl-warning); }
.inf-roi.roi-zero { color: var(--bl-text-muted); }

.inf-icon-btn {
  background: transparent;
  border: 1px solid var(--bl-border);
  color: var(--bl-text-dim);
  border-radius: var(--bl-radius-md);
  width: 28px;
  height: 28px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
  transition: var(--bl-ease-default);
}
.inf-icon-btn:hover {
  border-color: var(--bl-accent);
  color: var(--bl-accent);
  background: var(--bl-accent-dim);
}
.inf-icon-btn.danger:hover {
  border-color: var(--bl-danger);
  color: var(--bl-danger);
  background: rgba(239, 68, 68, 0.1);
}

.inf-empty {
  padding: var(--bl-space-12) var(--bl-space-6);
  text-align: center;
  color: var(--bl-text-dim);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--bl-space-4);
}
.inf-empty.hidden { display: none; }
.inf-empty p { margin: 0; }

/* Modal — overlay TOTALMENTE OPACO (sem ver conteudo atras) */
.inf-modal {
  position: fixed;
  inset: 0;
  background: var(--bl-bg-0);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--bl-z-modal);
  padding: var(--bl-space-4);
  overflow-y: auto;
}
.inf-modal.hidden { display: none; }
.inf-modal-content {
  width: 100%;
  max-width: 520px;
  padding: var(--bl-space-6);
  background: var(--bl-bg-elevated) !important;
  border: 1px solid var(--bl-border-hover) !important;
  border-radius: var(--bl-radius-xl);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
  /* Anular qualquer backdrop-filter/glass herdado de .section-card */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.inf-close {
  background: transparent;
  border: 1px solid var(--bl-border);
  color: var(--bl-text-dim);
  border-radius: var(--bl-radius-md);
  width: 32px;
  height: 32px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.inf-close:hover { color: var(--bl-text-primary); border-color: var(--bl-border-hover); }

.inf-form-group { margin-bottom: var(--bl-space-4); }
.inf-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--bl-space-4);
  margin-bottom: var(--bl-space-4);
}
.c-label {
  display: block;
  font-size: var(--bl-text-xs);
  color: var(--bl-text-dim);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.form-input {
  width: 100%;
  background: var(--bl-bg-3);
  border: 1px solid var(--bl-border);
  color: var(--bl-text-primary);
  padding: 10px 12px;
  border-radius: var(--bl-radius-md);
  outline: none;
  box-sizing: border-box;
  font-family: var(--bl-font-sans);
  font-size: var(--bl-text-base);
  transition: var(--bl-ease-default);
}
.form-input:focus {
  border-color: var(--bl-accent);
  box-shadow: 0 0 0 3px var(--bl-accent-dim);
}
.inf-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--bl-space-3);
  margin-top: var(--bl-space-6);
  padding-top: var(--bl-space-4);
  border-top: 1px solid var(--bl-border);
}
.inf-modal-actions .action-btn { min-width: 120px; }

/* Toast */
.crm-toast {
  position: fixed;
  bottom: var(--bl-space-6);
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--bl-bg-elevated);
  color: var(--bl-text-primary);
  border: 1px solid var(--bl-border-hover);
  padding: 10px 16px;
  border-radius: var(--bl-radius-full);
  font-size: var(--bl-text-base);
  box-shadow: var(--bl-shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: var(--bl-ease-spring);
  z-index: var(--bl-z-toast);
}
.crm-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.crm-toast[data-type="error"]   { border-color: var(--bl-danger);  }
.crm-toast[data-type="success"] { border-color: var(--bl-success); }
.crm-toast[data-type="info"]    { border-color: var(--bl-info);    }

/* ============================================================
   Brand Power Card (ex Pokemon Card) - sem vibe pokemon, foco em influencia
   ============================================================ */
.pokemon-card-compact,
.brand-power-card {
  background: linear-gradient(180deg, var(--bl-bg-3), var(--bl-bg-4)) !important;
  border: 1px solid var(--bl-border-hover) !important;
  border-radius: var(--bl-radius-xl) !important;
  padding: var(--bl-space-5) !important;
  position: relative;
  overflow: hidden;
}
.pokemon-card-compact::before,
.brand-power-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top right, rgba(212, 168, 83, 0.08), transparent 60%);
  pointer-events: none;
}
.pokemon-header {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  justify-content: center !important;
  margin-bottom: var(--bl-space-2) !important;
}
.pokemon-title,
.brand-power-title {
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #D4A853 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}
.pokemon-expert {
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 10px !important;
  color: var(--bl-text-dim) !important;
  text-align: center !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin: var(--bl-space-2) 0 !important;
}
.pokemon-emoji {
  display: flex !important;
  justify-content: center !important;
  margin: var(--bl-space-3) 0 !important;
}
.pokemon-stats {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin: var(--bl-space-4) 0 !important;
}
.stat-row {
  display: grid !important;
  grid-template-columns: 90px 1fr 50px !important;
  align-items: center !important;
  gap: 10px !important;
}
.stat-name {
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  color: var(--bl-text-dim) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}
.stat-val {
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--bl-text-primary) !important;
  text-align: right !important;
}
.stat-bar-bg {
  height: 6px !important;
  background: var(--bl-bg-1) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  border: 1px solid var(--bl-border) !important;
}
.stat-bar {
  height: 100% !important;
  border-radius: 999px !important;
  transition: width var(--bl-ease-spring);
}
.stat-bar.hp      { background: linear-gradient(90deg, #6bc950, #33E87B) !important; }
.stat-bar.attack  { background: linear-gradient(90deg, #ec4899, #f97316) !important; }
.stat-bar.defense { background: linear-gradient(90deg, #fbbf24, #f97316) !important; }
.stat-bar.spatk   { background: linear-gradient(90deg, #a855f7, #ec4899) !important; }
.stat-bar.spdef   { background: linear-gradient(90deg, #06b6d4, #60a5fa) !important; }
.stat-bar.speed   { background: linear-gradient(90deg, #D4A853, #fbbf24) !important; }

.pokemon-footer {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: var(--bl-space-3) !important;
  padding: var(--bl-space-3) 0 !important;
  border-top: 1px solid var(--bl-border) !important;
  border-bottom: 1px solid var(--bl-border) !important;
  margin: var(--bl-space-3) 0 !important;
}
.pf-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
}
.pf-label {
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  color: var(--bl-text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}
.pf-value {
  font-family: 'Inter', sans-serif !important;
  font-size: var(--bl-text-base) !important;
  font-weight: 700 !important;
  color: var(--bl-text-primary) !important;
}
.pf-value.power {
  color: #D4A853 !important;
  font-size: var(--bl-text-xl) !important;
}
.pf-value.legendary {
  color: #D4A853 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}
.pokemon-ref {
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 10px !important;
  color: var(--bl-text-dim) !important;
  text-align: center !important;
  margin-top: var(--bl-space-2) !important;
}
.pokemon-ref strong { color: var(--bl-text-secondary); }

/* Influence Score meta (antigo XP) */
.brand-power-meta {
  display: flex !important;
  justify-content: space-between !important;
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  color: var(--bl-text-dim) !important;
  margin-top: 6px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}

/* Main title (FINCH) - Inter bold + icon */
.main-title {
  font-family: 'Inter', sans-serif !important;
  font-size: 3rem !important;
  font-weight: 800 !important;
  color: var(--bl-text-primary) !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  justify-content: center !important;
  letter-spacing: -0.03em !important;
  background: linear-gradient(180deg, var(--bl-text-primary), #D4A853) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  margin-bottom: 6px !important;
}
.main-title i { -webkit-text-fill-color: #D4A853 !important; flex: 0 0 auto; }

.subtitle {
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--bl-text-dim) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.2em !important;
  margin-bottom: var(--bl-space-2) !important;
}

.persona-tag {
  font-family: 'Inter', sans-serif !important;
  font-size: var(--bl-text-base) !important;
  color: var(--bl-text-secondary) !important;
}
.persona-tag .highlight {
  color: #D4A853 !important;
  font-weight: 600;
}

/* ============================================================
   Tooltip universal Bilhon OS
   ============================================================ */
.bl-tooltip {
  position: fixed;
  z-index: 10000;
  pointer-events: none;
  max-width: 300px;
  padding: 10px 14px;
  background: var(--bl-bg-elevated);
  color: var(--bl-text-primary);
  border: 1px solid var(--bl-border-hover);
  border-radius: var(--bl-radius-md);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.005em;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 140ms ease, transform 140ms ease;
}
.bl-tooltip.visible {
  opacity: 1;
  transform: translateY(0);
}
/* Seta pequena apontando pro elemento */
.bl-tooltip::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 8px;
  height: 8px;
  background: var(--bl-bg-elevated);
  border-right: 1px solid var(--bl-border-hover);
  border-bottom: 1px solid var(--bl-border-hover);
  transform: translateX(-50%) rotate(45deg);
}
.bl-tooltip[data-placement="top"]::after    { bottom: -5px; }
.bl-tooltip[data-placement="bottom"]::after { top: -5px; transform: translateX(-50%) rotate(-135deg); }

/* Cursor help em elementos com tooltip */
[data-tooltip] {
  cursor: help;
}
[data-tooltip] button,
[data-tooltip] input,
[data-tooltip] select,
[data-tooltip] a {
  cursor: auto;
}
button[data-tooltip],
a[data-tooltip] { cursor: pointer; }

/* ============================================================
   OPERACAO VALKYRIA - Pagina principal (section-valkyria)
   Accent local: ouro Bilhon
   ============================================================ */
#section-valkyria {
  --valkyria-gold: #D4A853;
  --valkyria-gold-dim: rgba(212, 168, 83, 0.15);
  --valkyria-gold-glow: rgba(212, 168, 83, 0.3);
}

.valkyria-hero {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--bl-space-6);
  align-items: end;
  margin-bottom: var(--bl-space-6);
  padding: var(--bl-space-6) var(--bl-space-6);
  border-radius: var(--bl-radius-xl);
  background:
    radial-gradient(ellipse at top right, rgba(212, 168, 83, 0.12), transparent 60%),
    linear-gradient(180deg, rgba(212, 168, 83, 0.04), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(212, 168, 83, 0.25);
  position: relative;
  overflow: hidden;
}
.valkyria-hero::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--valkyria-gold), transparent);
  opacity: 0.5;
}
.valkyria-hero-left { min-width: 0; }

.valkyria-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--bl-radius-full);
  background: var(--valkyria-gold-dim);
  color: var(--valkyria-gold);
  font-size: var(--bl-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 1px solid rgba(212, 168, 83, 0.3);
  margin-bottom: var(--bl-space-3);
}

.valkyria-title {
  font-family: 'Inter', sans-serif !important;
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--bl-text-primary);
  margin: 0 0 var(--bl-space-3) 0;
  letter-spacing: -0.02em;
  line-height: 1.1;
  background: linear-gradient(180deg, var(--bl-text-primary), var(--valkyria-gold));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.valkyria-subtitle {
  font-size: var(--bl-text-md);
  color: var(--bl-text-dim);
  line-height: 1.6;
  max-width: 640px;
  margin: 0;
}
.valkyria-subtitle strong {
  color: var(--bl-text-secondary);
  font-weight: 600;
}

.valkyria-stats {
  display: flex;
  gap: var(--bl-space-3);
  flex-wrap: wrap;
  justify-content: flex-end;
}
.valkyria-stats .stat-pill {
  min-width: 120px;
  padding: var(--bl-space-3) var(--bl-space-4);
  background: var(--bl-bg-card);
  border: 1px solid var(--bl-border);
  border-radius: var(--bl-radius-lg);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.valkyria-stats .stat-pill.highlight-pill {
  border-color: var(--valkyria-gold);
  background: var(--valkyria-gold-dim);
  box-shadow: 0 0 24px rgba(212, 168, 83, 0.12);
}
.valkyria-stats .stat-value {
  font-family: var(--bl-font-sans);
  font-size: var(--bl-text-xl);
  font-weight: 700;
  color: var(--bl-text-primary);
}
.valkyria-stats .highlight-pill .stat-value { color: var(--valkyria-gold); }
.valkyria-stats .stat-label {
  font-size: var(--bl-text-xs);
  color: var(--bl-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Toolbar */
.valkyria-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--bl-space-4);
  margin-bottom: var(--bl-space-5);
  flex-wrap: wrap;
}
.valkyria-actions {
  display: flex;
  gap: var(--bl-space-2);
  align-items: center;
  flex-wrap: wrap;
}
.valkyria-search {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--bl-bg-3);
  border: 1px solid var(--bl-border);
  border-radius: var(--bl-radius-md);
  min-width: 240px;
}
.valkyria-search input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--bl-text-primary);
  font-family: var(--bl-font-sans);
  font-size: var(--bl-text-base);
  flex: 1;
  min-width: 0;
}
.valkyria-search input::placeholder { color: var(--bl-text-muted); }
.valkyria-search i { color: var(--bl-text-dim); }
.valkyria-search:focus-within {
  border-color: var(--valkyria-gold);
  box-shadow: 0 0 0 3px var(--valkyria-gold-dim);
}

.vk-filter {
  width: auto;
  min-width: 140px;
  max-width: 180px;
  padding: 10px 12px;
  font-size: var(--bl-text-base);
  height: 42px;
}

/* Owner chip na tabela */
.vk-owner-chip {
  display: inline-block;
  padding: 3px 10px;
  background: rgba(168, 85, 247, 0.12);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.3);
  border-radius: var(--bl-radius-full);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Contador de resultados + chips de filtros ativos */
.vk-results-count {
  display: flex;
  align-items: center;
  gap: var(--bl-space-3);
  padding: var(--bl-space-3) var(--bl-space-4);
  margin-bottom: var(--bl-space-3);
  background: var(--bl-bg-3);
  border: 1px solid var(--bl-border);
  border-radius: var(--bl-radius-md);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
}
.vk-rc-count {
  color: var(--bl-text-primary);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.vk-rc-filters {
  color: var(--bl-text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  letter-spacing: 0.04em;
}

/* Toolbar wrap: em telas menores os filtros quebram linha */
.valkyria-actions {
  gap: 8px !important;
}
.valkyria-search {
  min-width: 220px !important;
  flex: 1 1 240px !important;
  max-width: 320px;
  height: 42px;
}

/* Mobile responsivo */
@media (max-width: 1200px) {
  .valkyria-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .valkyria-actions {
    justify-content: flex-start;
  }
}

/* ============================================================
   Ad Inventory cards - icones Lucide + clickable
   ============================================================ */
.ad-card {
  cursor: pointer !important;
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease !important;
}
.ad-card:hover {
  transform: translateY(-2px) !important;
  border-color: var(--bl-border-hover) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4) !important;
}
.ad-card:focus-visible {
  outline: 2px solid var(--bl-accent);
  outline-offset: 2px;
}
.ad-type-icon {
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--bl-bg-3) !important;
  border: 1px solid var(--bl-border) !important;
  border-radius: var(--bl-radius-md) !important;
  color: var(--bl-text-secondary) !important;
  font-size: 0 !important; /* esconde qualquer texto/emoji residual */
}
.ad-type-icon i {
  color: var(--bl-text-primary) !important;
  width: 18px !important;
  height: 18px !important;
}
.ad-status {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  padding: 3px 8px !important;
  border-radius: var(--bl-radius-full) !important;
  border: 1px solid transparent !important;
}
.ad-status.live {
  background: rgba(107, 201, 80, 0.12) !important;
  color: var(--bl-green) !important;
  border-color: rgba(107, 201, 80, 0.35) !important;
}
.ad-status.paused {
  background: rgba(113, 113, 122, 0.12) !important;
  color: var(--bl-text-dim) !important;
  border-color: rgba(113, 113, 122, 0.35) !important;
}

/* ============================================================
   Ad Detail Modal - didatico para leigos
   ============================================================ */
.ad-detail-modal-content {
  max-width: 680px !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
  padding: var(--bl-space-8) !important;
  position: relative;
}
.ad-detail-close {
  position: absolute !important;
  top: var(--bl-space-4);
  right: var(--bl-space-4);
}

.ad-detail-hero {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--bl-space-4);
  align-items: start;
  margin-bottom: var(--bl-space-5);
  padding-bottom: var(--bl-space-5);
  border-bottom: 1px solid var(--bl-border);
}
.ad-detail-type {
  display: flex;
  align-items: center;
  gap: var(--bl-space-3);
}
.ad-detail-type > i {
  color: var(--bl-accent);
  flex-shrink: 0;
}
.ad-detail-type-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--bl-text-dim);
  margin-bottom: 2px;
}
.ad-detail-type-desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--bl-text-secondary);
  max-width: 480px;
}
.ad-detail-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--bl-radius-full);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 1px solid;
  white-space: nowrap;
  height: fit-content;
}

.ad-detail-name {
  font-family: 'Inter', sans-serif;
  font-size: 24px;
  font-weight: 800;
  color: var(--bl-text-primary);
  letter-spacing: -0.02em;
  margin: 0 0 6px 0;
}
.ad-detail-context {
  font-size: 14px;
  color: var(--bl-text-dim);
  margin: 0 0 var(--bl-space-5) 0;
}
.ad-detail-context strong { color: var(--bl-text-secondary); font-weight: 600; }

.ad-detail-phase {
  display: flex;
  gap: var(--bl-space-3);
  padding: var(--bl-space-4);
  background: var(--bl-bg-3);
  border: 1px solid var(--bl-border);
  border-radius: var(--bl-radius-md);
  margin-bottom: var(--bl-space-6);
}
.ad-detail-phase > i {
  color: var(--bl-accent);
  flex-shrink: 0;
  margin-top: 2px;
}
.ad-detail-phase strong {
  display: block;
  font-size: 13px;
  color: var(--bl-text-primary);
  margin-bottom: 4px;
  letter-spacing: -0.005em;
}
.ad-detail-phase p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--bl-text-dim);
}

.ad-detail-section-title {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--bl-text-dim);
  margin: var(--bl-space-6) 0 var(--bl-space-3) 0;
  padding-bottom: var(--bl-space-2);
  border-bottom: 1px solid var(--bl-border);
}

.ad-detail-metric-card {
  padding: var(--bl-space-4);
  background: var(--bl-bg-3);
  border: 1px solid var(--bl-border);
  border-radius: var(--bl-radius-md);
  margin-bottom: var(--bl-space-3);
}
.ad-detail-metric-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--bl-space-4);
  margin-bottom: var(--bl-space-3);
}
.ad-metric-name {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--bl-text-primary);
  margin-bottom: 2px;
}
.ad-metric-hint {
  font-size: 12px;
  color: var(--bl-text-dim);
  line-height: 1.4;
}
.ad-metric-big {
  font-family: 'Inter', sans-serif;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  white-space: nowrap;
  text-align: right;
  line-height: 1;
}
.ad-metric-bench {
  display: inline-block;
  padding: 3px 10px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border: 1px solid;
  border-radius: var(--bl-radius-full);
  background: transparent;
  margin-bottom: var(--bl-space-2);
}
.ad-metric-explain {
  font-size: 13px;
  color: var(--bl-text-secondary);
  line-height: 1.55;
  margin-bottom: var(--bl-space-2);
}
.ad-metric-rule {
  font-size: 12px;
  color: var(--bl-text-dim);
  padding-top: var(--bl-space-2);
  border-top: 1px dashed var(--bl-border);
}
.ad-metric-rule strong { color: var(--bl-text-secondary); }

.ad-detail-tags {
  display: flex;
  flex-direction: column;
  gap: var(--bl-space-2);
}
.ad-detail-tag {
  padding: var(--bl-space-3);
  background: var(--bl-bg-3);
  border: 1px solid var(--bl-border);
  border-radius: var(--bl-radius-md);
}
.ad-detail-tag-name {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bl-accent);
  margin-bottom: 4px;
}
.ad-detail-tag-desc {
  font-size: 12px;
  line-height: 1.5;
  color: var(--bl-text-secondary);
}

.ad-detail-summary {
  margin-top: var(--bl-space-6);
  padding: var(--bl-space-4);
  background: rgba(168, 85, 247, 0.06);
  border: 1px solid rgba(168, 85, 247, 0.2);
  border-radius: var(--bl-radius-md);
}
.ad-detail-summary p {
  font-size: 13px;
  line-height: 1.6;
  color: var(--bl-text-secondary);
  margin: 0;
}
.ad-detail-summary strong { color: var(--bl-text-primary); }

/* Top Performers (Ads Inventory) - remover emoticons legados */
.top-performers .performer-item { cursor: default; }

/* ============================================================
   Nome clicavel na tabela Valkyria
   ============================================================ */
.vk-name-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--bl-text-primary);
  font-family: inherit;
  font-size: inherit;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color var(--bl-ease-default);
}
.vk-name-link:hover {
  color: var(--bl-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ============================================================
   Profile Modal (pop-up do candidato)
   ============================================================ */
.vk-profile-content {
  max-width: 820px !important;
  max-height: 92vh !important;
  overflow-y: auto !important;
  padding: var(--bl-space-8) !important;
  position: relative;
}
.vk-profile-close-btn {
  position: absolute !important;
  top: var(--bl-space-4);
  right: var(--bl-space-4);
  z-index: 1;
}

/* Hero */
.vk-profile-hero {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--bl-space-4);
  align-items: center;
  padding-bottom: var(--bl-space-5);
  margin-bottom: var(--bl-space-5);
  border-bottom: 1px solid var(--bl-border);
}
.vk-profile-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--bl-bg-3);
  border: 2px solid var(--bl-border-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bl-text-dim);
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}
.vk-profile-avatar.has-photo {
  border-color: var(--bl-accent);
  box-shadow: 0 0 0 3px var(--bl-accent-dim), 0 8px 24px rgba(0,0,0,0.5);
}
.vk-profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.vk-avatar-initials {
  font-family: 'Inter', sans-serif;
  font-size: 28px;
  font-weight: 800;
  color: var(--bl-text-primary);
  letter-spacing: -0.02em;
}

/* Mini avatar na tabela */
.inf-name-with-avatar {
  display: flex;
  align-items: center;
  gap: 12px;
}
.inf-name-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.vk-row-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bl-bg-3);
  border: 1px solid var(--bl-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  cursor: pointer;
  transition: all var(--bl-ease-default);
  position: relative;
}
.vk-row-avatar:hover {
  border-color: var(--bl-accent);
  transform: scale(1.05);
}
.vk-row-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.vk-row-avatar-fallback {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--bl-text-dim);
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.vk-profile-name {
  font-family: 'Inter', sans-serif;
  font-size: 26px;
  font-weight: 800;
  color: var(--bl-text-primary);
  letter-spacing: -0.02em;
  margin: 0 0 4px 0;
  line-height: 1.15;
}
.vk-profile-brand {
  font-size: 14px;
  color: var(--bl-text-dim);
  margin-bottom: var(--bl-space-2);
}
.vk-profile-meta {
  display: flex;
  gap: var(--bl-space-2);
  align-items: center;
  flex-wrap: wrap;
}
.vk-profile-niche {
  font-size: 12px;
  color: var(--bl-text-dim);
  padding: 3px 10px;
  background: var(--bl-bg-3);
  border: 1px solid var(--bl-border);
  border-radius: var(--bl-radius-full);
}
.vk-profile-sync {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--bl-space-3);
  background: var(--bl-bg-3);
  border: 1px solid var(--bl-border);
  border-radius: var(--bl-radius-md);
  min-width: 120px;
}
.vk-profile-sync > div {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--bl-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.vk-profile-sync .vk-sync-label { flex: 1; }

/* Sections */
.vk-profile-section {
  padding: var(--bl-space-4);
  background: var(--bl-bg-3);
  border: 1px solid var(--bl-border);
  border-radius: var(--bl-radius-md);
}
.vk-profile-section h3 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--bl-text-dim);
  margin: 0 0 var(--bl-space-3) 0;
}
.vk-profile-section dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 12px;
  margin: 0;
  font-size: 13px;
}
.vk-profile-section dt {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bl-text-muted);
  padding-top: 2px;
}
.vk-profile-section dd {
  margin: 0;
  color: var(--bl-text-secondary);
  font-weight: 500;
}
.vk-dd-highlight {
  color: #D4A853 !important;
  font-weight: 700 !important;
}
.vk-dd-email {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--bl-text-muted);
  margin-top: 1px;
}

.vk-profile-notes {
  padding: var(--bl-space-3);
  background: var(--bl-bg-1);
  border-radius: var(--bl-radius-sm);
  font-size: 12px;
  color: var(--bl-text-secondary);
  line-height: 1.5;
  margin-top: var(--bl-space-3);
  border-left: 3px solid var(--bl-border-hover);
}

/* Grid de sections */
.vk-profile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--bl-space-3);
  margin-bottom: var(--bl-space-4);
}
.vk-profile-socials { grid-column: 1 / -1; }

/* Social list dentro do profile */
.vk-profile-social-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 6px;
}
.vk-profile-social-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bl-bg-1);
  border: 1px solid var(--bl-border);
  border-radius: var(--bl-radius-sm);
  text-decoration: none;
  color: var(--bl-text-secondary);
  transition: all var(--bl-ease-default);
  position: relative;
  overflow: hidden;
}
.vk-profile-social-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: var(--bl-text-dim);
  flex-shrink: 0;
  transition: color var(--bl-ease-default);
}
.vk-profile-social-ico svg { width: 100%; height: 100%; display: block; }

/* Hover: cor brand oficial em cada rede */
.vk-profile-social-item[data-brand="instagram"]:hover {
  border-color: var(--brand-instagram);
  background: linear-gradient(135deg, rgba(247,119,55,0.15), rgba(225,48,108,0.2), rgba(131,58,180,0.15));
  box-shadow: 0 0 20px var(--brand-instagram-glow);
}
.vk-profile-social-item[data-brand="instagram"]:hover .vk-profile-social-ico,
.vk-profile-social-item[data-brand="instagram"]:hover .vk-profile-social-name,
.vk-profile-social-item[data-brand="instagram"]:hover .vk-profile-social-handle { color: #fff; }
.vk-profile-social-item[data-brand="instagram"]:hover .vk-profile-social-ico { color: var(--brand-instagram); }

.vk-profile-social-item[data-brand="tiktok"]:hover {
  border-color: var(--brand-tiktok-alt);
  background: #000;
  box-shadow: 0 0 20px var(--brand-tiktok-glow), inset 0 0 0 1px var(--brand-tiktok);
}
.vk-profile-social-item[data-brand="tiktok"]:hover .vk-profile-social-ico { color: var(--brand-tiktok); }
.vk-profile-social-item[data-brand="tiktok"]:hover .vk-profile-social-name,
.vk-profile-social-item[data-brand="tiktok"]:hover .vk-profile-social-handle { color: #fff; }

.vk-profile-social-item[data-brand="youtube"]:hover {
  border-color: var(--brand-youtube);
  background: rgba(255, 0, 0, 0.15);
  box-shadow: 0 0 20px var(--brand-youtube-glow);
}
.vk-profile-social-item[data-brand="youtube"]:hover .vk-profile-social-ico { color: var(--brand-youtube); }
.vk-profile-social-item[data-brand="youtube"]:hover .vk-profile-social-name,
.vk-profile-social-item[data-brand="youtube"]:hover .vk-profile-social-handle { color: #fff; }

.vk-profile-social-item[data-brand="linkedin"]:hover {
  border-color: var(--brand-linkedin);
  background: rgba(10, 102, 194, 0.2);
  box-shadow: 0 0 20px var(--brand-linkedin-glow);
}
.vk-profile-social-item[data-brand="linkedin"]:hover .vk-profile-social-ico { color: var(--brand-linkedin); }
.vk-profile-social-item[data-brand="linkedin"]:hover .vk-profile-social-name,
.vk-profile-social-item[data-brand="linkedin"]:hover .vk-profile-social-handle { color: #fff; }

.vk-profile-social-item[data-brand="twitter"]:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 20px var(--brand-twitter-glow);
}
.vk-profile-social-item[data-brand="twitter"]:hover .vk-profile-social-ico,
.vk-profile-social-item[data-brand="twitter"]:hover .vk-profile-social-name,
.vk-profile-social-item[data-brand="twitter"]:hover .vk-profile-social-handle { color: #fff; }

.vk-profile-social-item[data-brand="whatsapp"]:hover {
  border-color: var(--brand-whatsapp);
  background: rgba(37, 211, 102, 0.15);
  box-shadow: 0 0 20px var(--brand-whatsapp-glow);
}
.vk-profile-social-item[data-brand="whatsapp"]:hover .vk-profile-social-ico { color: var(--brand-whatsapp); }
.vk-profile-social-item[data-brand="whatsapp"]:hover .vk-profile-social-name,
.vk-profile-social-item[data-brand="whatsapp"]:hover .vk-profile-social-handle { color: #fff; }

.vk-profile-social-item[data-brand="email"]:hover {
  border-color: var(--brand-email);
  background: rgba(96, 165, 250, 0.15);
  box-shadow: 0 0 20px var(--brand-email-glow);
}
.vk-profile-social-item[data-brand="email"]:hover .vk-profile-social-ico { color: var(--brand-email); }
.vk-profile-social-item[data-brand="email"]:hover .vk-profile-social-name,
.vk-profile-social-item[data-brand="email"]:hover .vk-profile-social-handle { color: #fff; }
.vk-profile-social-name {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--bl-text-muted);
}
.vk-profile-social-handle {
  font-size: 12px;
  color: var(--bl-text-primary);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 130px;
}

.vk-profile-empty {
  font-size: 12px;
  color: var(--bl-text-muted);
  text-align: center;
  padding: var(--bl-space-3) 0;
  margin: 0;
}

/* Apify section (destaque) */
.vk-profile-apify-section {
  background: rgba(168, 85, 247, 0.05) !important;
  border: 1px solid rgba(168, 85, 247, 0.25) !important;
  margin-bottom: var(--bl-space-4);
}
.vk-profile-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--bl-space-3);
  margin-bottom: var(--bl-space-3);
  flex-wrap: wrap;
}
.vk-profile-section-head h3 {
  margin: 0;
  color: #c084fc;
  font-size: 11px;
}
.vk-profile-section-meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--bl-text-muted);
  margin: 4px 0 0 0;
}

.vk-profile-apify-body {
  min-height: 120px;
}

/* Apify states (never/loading/error/disabled) */
.vk-apify-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--bl-space-6) var(--bl-space-4);
  text-align: center;
  gap: var(--bl-space-2);
  color: var(--bl-text-dim);
}
.vk-apify-state i { opacity: 0.5; }
.vk-apify-state p { margin: 4px 0; font-size: 13px; }
.vk-apify-hint {
  font-size: 12px !important;
  color: var(--bl-text-muted);
  max-width: 520px;
  line-height: 1.5;
}
.vk-apify-disabled i { color: var(--bl-warning); opacity: 1; }
.vk-apify-error i { color: var(--bl-red); opacity: 1; }
.vk-apify-empty i { color: #c084fc; opacity: 0.7; }
.vk-apify-list {
  text-align: left;
  font-size: 12px;
  color: var(--bl-text-dim);
  margin: var(--bl-space-2) 0 0 0;
  padding-left: 20px;
  max-width: 520px;
}
.vk-apify-list li { margin-bottom: 4px; line-height: 1.5; }
.vk-apify-list strong { color: var(--bl-text-secondary); }

@keyframes spin { to { transform: rotate(360deg); } }
.vk-apify-state [data-lucide="loader-2"] { color: var(--bl-accent); }

/* Apify data (dados reais) */
.vk-apify-platform {
  padding: var(--bl-space-3);
  background: var(--bl-bg-1);
  border: 1px solid var(--bl-border);
  border-radius: var(--bl-radius-md);
  margin-bottom: var(--bl-space-2);
}
.vk-apify-platform-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--bl-text-primary);
  margin-bottom: var(--bl-space-3);
}
.vk-apify-handle {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--bl-text-dim);
  margin-left: 4px;
}
.vk-apify-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 8px;
}
.vk-apify-stat {
  padding: 8px;
  background: var(--bl-bg-3);
  border-radius: var(--bl-radius-sm);
  text-align: center;
  border: 1px solid var(--bl-border);
}
.vk-apify-stat-value {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: var(--bl-text-primary);
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.vk-apify-stat-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bl-text-muted);
  margin-top: 4px;
}
.vk-apify-bio {
  margin-top: var(--bl-space-3);
  padding: 8px 10px;
  background: var(--bl-bg-3);
  border-radius: var(--bl-radius-sm);
  font-size: 12px;
  line-height: 1.5;
  color: var(--bl-text-secondary);
}

/* Profile actions (rodape) */
.vk-profile-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--bl-space-2);
  padding-top: var(--bl-space-4);
  border-top: 1px solid var(--bl-border);
  flex-wrap: wrap;
}

/* Mobile profile */
@media (max-width: 768px) {
  .vk-profile-hero { grid-template-columns: 1fr; text-align: center; }
  .vk-profile-grid { grid-template-columns: 1fr; }
  .vk-profile-sync { flex-direction: row; justify-content: center; }
}

/* Botao principal dourado dentro da secao Valkyria */
#section-valkyria .action-btn:not(.secondary) {
  background: var(--valkyria-gold);
  color: #1a1305;
  border: 1px solid transparent;
}
#section-valkyria .action-btn:not(.secondary):hover {
  filter: brightness(1.08);
  box-shadow: 0 0 0 3px var(--valkyria-gold-dim);
}

/* Tabela Valkyria */
.vk-table-wrap { overflow-x: auto; }
.vk-table { min-width: 1100px; }
.vk-table thead th { white-space: nowrap; }
.vk-table .vk-revenue {
  color: var(--valkyria-gold);
  font-weight: 600;
}

/* Badges de status Valkyria */
.vk-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--bl-radius-full);
  font-size: var(--bl-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
  white-space: nowrap;
}
.vk-status-new             { background: rgba(113, 113, 122, 0.12); color: var(--bl-text-dim);  border-color: rgba(113, 113, 122, 0.35); }
.vk-status-contacted       { background: rgba(96, 165, 250, 0.1);   color: var(--bl-info);      border-color: rgba(96, 165, 250, 0.4); }
.vk-status-interested      { background: rgba(251, 191, 36, 0.1);   color: var(--bl-warning);   border-color: rgba(251, 191, 36, 0.4); }
.vk-status-negotiating     { background: rgba(168, 85, 247, 0.1);   color: #c084fc;             border-color: rgba(168, 85, 247, 0.4); }
.vk-status-active_clickmax { background: var(--valkyria-gold-dim);  color: var(--valkyria-gold); border-color: var(--valkyria-gold); }
.vk-status-declined        { background: rgba(239, 68, 68, 0.1);    color: var(--bl-danger);    border-color: rgba(239, 68, 68, 0.4); }

/* ============================================================
   Brand cores (oficiais) — usadas em chips, hover, profile, modal
   ============================================================ */
:root {
  --brand-instagram:  #E1306C;
  --brand-instagram-glow: rgba(225, 48, 108, 0.35);
  --brand-tiktok:     #25F4EE;
  --brand-tiktok-alt: #FE2C55;
  --brand-tiktok-glow: rgba(254, 44, 85, 0.35);
  --brand-youtube:    #FF0000;
  --brand-youtube-glow: rgba(255, 0, 0, 0.35);
  --brand-linkedin:   #0A66C2;
  --brand-linkedin-glow: rgba(10, 102, 194, 0.35);
  --brand-twitter:    #ffffff;
  --brand-twitter-glow: rgba(255, 255, 255, 0.2);
  --brand-whatsapp:   #25D366;
  --brand-whatsapp-glow: rgba(37, 211, 102, 0.35);
  --brand-email:      #60a5fa;
  --brand-email-glow: rgba(96, 165, 250, 0.35);
}

/* Social chips (tabela) */
.vk-social-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 240px;
}
.vk-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px 4px 6px;
  background: var(--bl-bg-3);
  border: 1px solid var(--bl-border);
  border-radius: var(--bl-radius-full);
  font-size: 11px;
  color: var(--bl-text-secondary);
  text-decoration: none;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: all var(--bl-ease-default);
}
.vk-chip-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  color: var(--bl-text-dim);
  flex-shrink: 0;
}
.vk-chip-ico svg {
  width: 100%;
  height: 100%;
  display: block;
}
.vk-chip:hover .vk-chip-ico { color: currentColor; }

/* Cores brand no hover do chip (aplicadas por data-brand) */
.vk-chip[data-brand="instagram"]:hover {
  color: #fff;
  border-color: var(--brand-instagram);
  background: linear-gradient(135deg, #F77737, #E1306C, #833AB4);
  box-shadow: 0 0 16px var(--brand-instagram-glow);
}
.vk-chip[data-brand="tiktok"]:hover {
  color: #fff;
  border-color: var(--brand-tiktok-alt);
  background: #000;
  box-shadow: 0 0 16px var(--brand-tiktok-glow), inset 0 0 0 1px var(--brand-tiktok);
}
.vk-chip[data-brand="youtube"]:hover {
  color: #fff;
  border-color: var(--brand-youtube);
  background: var(--brand-youtube);
  box-shadow: 0 0 16px var(--brand-youtube-glow);
}
.vk-chip[data-brand="linkedin"]:hover {
  color: #fff;
  border-color: var(--brand-linkedin);
  background: var(--brand-linkedin);
  box-shadow: 0 0 16px var(--brand-linkedin-glow);
}
.vk-chip[data-brand="twitter"]:hover {
  color: #000;
  border-color: #fff;
  background: #fff;
}
.vk-chip[data-brand="whatsapp"]:hover {
  color: #fff;
  border-color: var(--brand-whatsapp);
  background: var(--brand-whatsapp);
  box-shadow: 0 0 16px var(--brand-whatsapp-glow);
}
.vk-chip[data-brand="email"]:hover {
  color: #fff;
  border-color: var(--brand-email);
  background: var(--brand-email);
  box-shadow: 0 0 16px var(--brand-email-glow);
}

.vk-social-empty { color: var(--bl-text-muted); font-family: var(--bl-font-mono); }

/* Bought flag (legacy) */
.vk-bought {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--bl-text-xs);
  font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--bl-radius-sm);
}
.vk-bought.yes { color: var(--bl-success); background: rgba(107, 201, 80, 0.1); }
.vk-bought.no  { color: var(--bl-text-dim); }
.vk-bought.unk { color: var(--bl-warning); }

/* Historico Finch badges (novo) — categorias: ghost/buyer/vip/gold/free */
.vk-bought-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--bl-radius-full);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  white-space: nowrap;
}
.vk-bought-badge.ghost {
  color: var(--bl-text-muted);
  background: rgba(113, 113, 122, 0.08);
}
.vk-bought-badge.buyer {
  color: var(--bl-success);
  background: rgba(107, 201, 80, 0.12);
  border-color: rgba(107, 201, 80, 0.35);
}
.vk-bought-badge.vip {
  color: #D4A853;
  background: rgba(212, 168, 83, 0.12);
  border-color: rgba(212, 168, 83, 0.4);
  box-shadow: 0 0 12px rgba(212, 168, 83, 0.15);
}
.vk-bought-badge.gold {
  color: #c084fc;
  background: rgba(168, 85, 247, 0.12);
  border-color: rgba(168, 85, 247, 0.35);
}
.vk-bought-badge.free {
  color: var(--bl-info);
  background: rgba(96, 165, 250, 0.1);
  border-color: rgba(96, 165, 250, 0.3);
}

.vk-products {
  display: inline-block;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--bl-text-secondary);
  font-size: var(--bl-text-xs);
}

/* Modal Valkyria */
.vk-modal-content {
  max-width: 780px;
  max-height: 90vh;
  overflow-y: auto;
}
.vk-modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--bl-space-4);
}
.vk-modal-col > .inf-form-group { margin-bottom: var(--bl-space-3); }

.vk-modal-section-title {
  font-size: var(--bl-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--valkyria-gold);
  padding-bottom: var(--bl-space-2);
  margin-bottom: var(--bl-space-3);
  border-bottom: 1px solid rgba(212, 168, 83, 0.2);
}

/* ============================================================
   Multi-input: redes sociais, sites, emails (multi por tipo)
   ============================================================ */
.vk-multi-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: var(--bl-space-3);
}
.vk-multi-list:empty { display: none; }

.vk-multi-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 6px;
  align-items: center;
  padding: 6px 8px;
  background: var(--bl-bg-3);
  border: 1px solid var(--bl-border);
  border-radius: var(--bl-radius-md);
}
.vk-multi-row .vk-brand-ico-sm {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.vk-multi-row .vk-multi-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  color: var(--bl-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0 4px;
  white-space: nowrap;
}
.vk-multi-row input.form-input {
  background: transparent !important;
  border: none !important;
  padding: 8px 6px !important;
  font-size: 13px !important;
  color: var(--bl-text-primary) !important;
  min-width: 0;
  width: 100%;
}
.vk-multi-row input.form-input:focus {
  outline: none;
  box-shadow: none;
}
.vk-multi-row .vk-multi-sub {
  width: 110px;
  border-left: 1px solid var(--bl-border) !important;
  padding-left: 10px !important;
  font-size: 11px !important;
  color: var(--bl-text-dim) !important;
}
.vk-multi-remove {
  background: transparent;
  border: 1px solid var(--bl-border);
  color: var(--bl-text-dim);
  width: 24px;
  height: 24px;
  border-radius: var(--bl-radius-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--bl-ease-default);
}
.vk-multi-remove:hover {
  border-color: var(--bl-red);
  color: var(--bl-red);
  background: rgba(239, 68, 68, 0.1);
}

/* Borda colorida por brand nas linhas multi */
.vk-multi-row[data-brand="instagram"]:focus-within { border-color: var(--brand-instagram); }
.vk-multi-row[data-brand="tiktok"]:focus-within    { border-color: var(--brand-tiktok-alt); }
.vk-multi-row[data-brand="youtube"]:focus-within   { border-color: var(--brand-youtube); }
.vk-multi-row[data-brand="linkedin"]:focus-within  { border-color: var(--brand-linkedin); }
.vk-multi-row[data-brand="twitter"]:focus-within   { border-color: #fff; }
.vk-multi-row[data-brand="whatsapp"]:focus-within  { border-color: var(--brand-whatsapp); }
.vk-multi-row[data-brand="email"]:focus-within     { border-color: var(--brand-email); }
.vk-multi-row[data-brand="website"]:focus-within   { border-color: var(--bl-accent); }

.vk-multi-row[data-brand="instagram"] .vk-brand-ico-sm svg { color: var(--brand-instagram); }
.vk-multi-row[data-brand="tiktok"] .vk-brand-ico-sm svg    { color: var(--brand-tiktok-alt); }
.vk-multi-row[data-brand="youtube"] .vk-brand-ico-sm svg   { color: var(--brand-youtube); }
.vk-multi-row[data-brand="linkedin"] .vk-brand-ico-sm svg  { color: var(--brand-linkedin); }
.vk-multi-row[data-brand="whatsapp"] .vk-brand-ico-sm svg  { color: var(--brand-whatsapp); }
.vk-multi-row[data-brand="email"] .vk-brand-ico-sm svg     { color: var(--brand-email); }

/* Botoes de adicionar (chip style) */
.vk-add-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--bl-space-2);
}
.vk-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  background: var(--bl-bg-3);
  border: 1px dashed var(--bl-border-hover);
  border-radius: var(--bl-radius-full);
  color: var(--bl-text-secondary);
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--bl-ease-default);
}
.vk-add-btn::before {
  content: '+';
  font-weight: 700;
  font-size: 14px;
  color: var(--bl-text-dim);
  line-height: 1;
  margin-right: 2px;
}
.vk-add-btn .vk-brand-ico-sm { width: 12px; height: 12px; color: var(--bl-text-dim); }
.vk-add-btn:hover {
  border-color: var(--bl-accent);
  color: var(--bl-text-primary);
  background: var(--bl-bg-4);
}
.vk-add-btn:hover::before { color: var(--bl-accent); }
.vk-add-btn.full-width {
  width: 100%;
  justify-content: center;
  padding: 10px;
}
.vk-add-btn[data-add-type="instagram"]:hover { border-color: var(--brand-instagram); }
.vk-add-btn[data-add-type="tiktok"]:hover    { border-color: var(--brand-tiktok-alt); }
.vk-add-btn[data-add-type="youtube"]:hover   { border-color: var(--brand-youtube); }
.vk-add-btn[data-add-type="linkedin"]:hover  { border-color: var(--brand-linkedin); }
.vk-add-btn[data-add-type="twitter"]:hover   { border-color: #fff; }
.vk-add-btn[data-add-type="whatsapp"]:hover  { border-color: var(--brand-whatsapp); }
.vk-add-btn[data-add-type="email"]:hover     { border-color: var(--brand-email); }

.vk-social-row { margin-bottom: var(--bl-space-2); }
.vk-social-row .c-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-transform: none;
  font-size: var(--bl-text-xs);
  letter-spacing: 0;
  margin-bottom: 4px;
  color: var(--bl-text-dim);
}
.vk-brand-ico-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  color: var(--bl-text-dim);
  flex-shrink: 0;
}
.vk-brand-ico-sm svg { width: 100%; height: 100%; display: block; }

/* Focus: borda na cor brand */
.vk-social-row[data-brand="instagram"] .form-input:focus { border-color: var(--brand-instagram); box-shadow: 0 0 0 3px rgba(225,48,108,0.15); }
.vk-social-row[data-brand="tiktok"]    .form-input:focus { border-color: var(--brand-tiktok-alt); box-shadow: 0 0 0 3px rgba(254,44,85,0.15); }
.vk-social-row[data-brand="youtube"]   .form-input:focus { border-color: var(--brand-youtube); box-shadow: 0 0 0 3px rgba(255,0,0,0.15); }
.vk-social-row[data-brand="linkedin"]  .form-input:focus { border-color: var(--brand-linkedin); box-shadow: 0 0 0 3px rgba(10,102,194,0.15); }
.vk-social-row[data-brand="twitter"]   .form-input:focus { border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,0.15); }
.vk-social-row[data-brand="whatsapp"]  .form-input:focus { border-color: var(--brand-whatsapp); box-shadow: 0 0 0 3px rgba(37,211,102,0.2); }
.vk-social-row[data-brand="email"]     .form-input:focus { border-color: var(--brand-email); box-shadow: 0 0 0 3px rgba(96,165,250,0.2); }

/* Cor do icone no label quando input esta com foco */
.vk-social-row[data-brand="instagram"] .form-input:focus ~ .c-label .vk-brand-ico-sm,
.vk-social-row[data-brand="instagram"]:focus-within .c-label .vk-brand-ico-sm { color: var(--brand-instagram); }
.vk-social-row[data-brand="tiktok"]:focus-within    .c-label .vk-brand-ico-sm { color: var(--brand-tiktok-alt); }
.vk-social-row[data-brand="youtube"]:focus-within   .c-label .vk-brand-ico-sm { color: var(--brand-youtube); }
.vk-social-row[data-brand="linkedin"]:focus-within  .c-label .vk-brand-ico-sm { color: var(--brand-linkedin); }
.vk-social-row[data-brand="twitter"]:focus-within   .c-label .vk-brand-ico-sm { color: #fff; }
.vk-social-row[data-brand="whatsapp"]:focus-within  .c-label .vk-brand-ico-sm { color: var(--brand-whatsapp); }
.vk-social-row[data-brand="email"]:focus-within     .c-label .vk-brand-ico-sm { color: var(--brand-email); }

.inf-modal-content textarea.form-input {
  resize: vertical;
  min-height: 60px;
  font-family: var(--bl-font-sans);
}

.vk-etl-details {
  margin-top: var(--bl-space-4);
  padding: var(--bl-space-3);
  background: var(--bl-bg-3);
  border: 1px dashed var(--bl-border-hover);
  border-radius: var(--bl-radius-md);
}
.vk-etl-details summary {
  cursor: pointer;
  font-size: var(--bl-text-xs);
  color: var(--bl-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}
.vk-etl-details[open] summary { color: var(--valkyria-gold); }

/* Rail gold item */
.rail-item.color-gold { }
.rail-item.color-gold.active {
  background: var(--valkyria-gold-dim);
  color: #D4A853;
}
.rail-item.color-gold .rail-icon i { color: #D4A853; }
.nav-item.color-gold .nav-item-icon i { color: #D4A853; }
.nav-item.color-gold.active {
  background: var(--valkyria-gold-dim);
  color: #D4A853;
}

/* Mobile: hero empilhado */
@media (max-width: 960px) {
  .valkyria-hero { grid-template-columns: 1fr; }
  .valkyria-stats { justify-content: flex-start; }
  .vk-modal-grid { grid-template-columns: 1fr; }
}