/*
Theme Name: Gestão Tips – Sistema de Gestão de Banca
Description: Plataforma SaaS para gestão de banca esportiva, controle de bots, canais, operações e relatórios financeiros.
Version: 3.22.2
Author: Maicon Patrique
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 8.0
Text Domain: gestao-bots
Domain Path: /languages
*/

/* ================================================================
   DESIGN TOKENS (Light Mode — default)
   ================================================================ */
:root {
  /* Brand */
  --gb-green:       #16A34A;
  --gb-green-dk:    #15803D;
  --gb-green-lt:    #22C55E;
  --gb-green-soft:  #F0FDF4;
  --gb-green-mid:   #BBF7D0;

  /* Semantic */
  --gb-red:         #DC2626;
  --gb-red-dk:      #B91C1C;
  --gb-red-soft:    #FEF2F2;
  --gb-amber:       #D97706;
  --gb-amber-soft:  #FFFBEB;
  --gb-blue:        #2563EB;
  --gb-blue-soft:   #EFF6FF;

  /* ── Surfaces (light: neutro-frio com hierarquia de elevação) ── */
  --gb-nav-bg:      #0B1120;
  --gb-nav-w:       250px;
  --gb-bg:          #E9ECF2;   /* fundo da página — mais frio/fundo p/ os cards descolarem */
  --gb-surface:     #FFFFFF;   /* superfície 1 — cards */
  --gb-surface-2:   #F4F6FA;   /* superfície 2 — headers, zebra, trilho de chips */
  --gb-surface-3:   #EBEEF4;   /* superfície 3 — wells / hover profundo */

  /* ── Borders (hierarquia: soft → strong, tom levemente frio) ── */
  --gb-border-soft:   #EDF0F5; /* hairline dentro do card */
  --gb-border:        #DDE2EA; /* padrão */
  --gb-border-medium: #CBD2DD; /* ênfase */
  --gb-border-strong: #B4BCCA; /* forte (hover de input, divisores marcantes) */

  /* Text (secundário levemente mais escuro p/ combater o "lavado") */
  --gb-text:        #0F172A;
  --gb-text-2:      #434F5F;
  --gb-text-3:      #667085;

  /* Radius */
  --gb-radius-sm:   8px;
  --gb-radius:      12px;
  --gb-radius-lg:   16px;
  --gb-radius-xl:   20px;

  /* ── Shadows (slate-tinted, em camadas → profundidade real e suave) ── */
  --gb-shadow-xs:   0 1px 2px rgba(16,24,40,.05);
  --gb-shadow-sm:   0 1px 2px rgba(16,24,40,.04), 0 2px 6px rgba(16,24,40,.07);
  --gb-shadow:      0 2px 4px rgba(16,24,40,.04), 0 8px 18px rgba(16,24,40,.08);
  --gb-shadow-md:   0 4px 8px rgba(16,24,40,.06), 0 12px 24px rgba(16,24,40,.10);
  --gb-shadow-lg:   0 8px 16px rgba(16,24,40,.07), 0 20px 40px rgba(16,24,40,.13);
  --gb-shadow-primary: 0 6px 18px rgba(22,163,74,.18); /* glow p/ destaque do hero KPI */

  /* Typography */
  --f-sans:  'Inter', system-ui, -apple-system, sans-serif;
  --f-head:  'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  --f-mono:  'JetBrains Mono', 'SF Mono', 'Courier New', monospace;

  /* Transitions */
  --gb-ease:  cubic-bezier(.4,0,.2,1);
  --gb-fast:  .15s;
  --gb-slow:  .25s;

  /* Mobile nav */
  --gb-bottom-nav-h: 60px;
  --gb-topbar-h:     56px;
  --gb-fab-bottom:   76px;

  /* ── Primária ── */
  --gb-primary:        var(--gb-green);
  --gb-primary-hover:  var(--gb-green-dk);

  /* ================================================================
     ALIASES SEMÂNTICOS — vocabulário público do Design System.
     Apontam para os tokens --gb-* (que se adaptam sozinhos no dark).
     Use estes em código novo; os valores vivem num único lugar.
     ================================================================ */
  --surface-1:      var(--gb-surface);
  --surface-2:      var(--gb-surface-2);
  --surface-3:      var(--gb-surface-3);
  --border-soft:    var(--gb-border-soft);
  --border-medium:  var(--gb-border-medium);
  --border-strong:  var(--gb-border-strong);
  --primary:        var(--gb-primary);
  --primary-hover:  var(--gb-primary-hover);
  --success:        var(--gb-green);
  --danger:         var(--gb-red);
  --warning:        var(--gb-amber);
  --info:           var(--gb-blue);
  --shadow-sm:      var(--gb-shadow-sm);
  --shadow-md:      var(--gb-shadow-md);
  --shadow-lg:      var(--gb-shadow-lg);
}

/* ================================================================
   DARK MODE TOKENS
   ================================================================ */
[data-gb-theme="dark"] {
  /* ── Surfaces (dark: undertone frio, degraus reais de elevação, sem preto puro) ── */
  --gb-bg:          #0B0D12;   /* fundo — quase preto, levemente azulado */
  --gb-surface:     #16191F;   /* card */
  --gb-surface-2:   #1C2028;   /* inset */
  --gb-surface-3:   #242A34;   /* superfície elevada / hover */

  /* Borders (hierarquia no dark) */
  --gb-border-soft:   #1E222A;
  --gb-border:        #2A2F39;
  --gb-border-medium: #363C48;
  --gb-border-strong: #474E5C;

  /* Sidebar — mais fundo que o conteúdo */
  --gb-nav-bg:      #08090D;

  /* Text */
  --gb-text:        #E7EAF0;
  --gb-text-2:      #A2A9B5;
  --gb-text-3:      #79818E;

  /* Semantic soft — translúcido sobre dark */
  --gb-green-soft:  rgba(22,163,74,.16);
  --gb-green-mid:   rgba(22,163,74,.32);
  --gb-red-soft:    rgba(220,38,38,.16);
  --gb-amber-soft:  rgba(217,119,6,.16);
  --gb-blue-soft:   rgba(37,99,235,.16);

  /* Shadows — mais profundas p/ dar volume sobre o dark */
  --gb-shadow-xs:   0 1px 2px rgba(0,0,0,.30);
  --gb-shadow-sm:   0 1px 3px rgba(0,0,0,.36), 0 2px 6px rgba(0,0,0,.30);
  --gb-shadow:      0 2px 6px rgba(0,0,0,.40), 0 10px 24px rgba(0,0,0,.44);
  --gb-shadow-md:   0 6px 14px rgba(0,0,0,.46), 0 14px 30px rgba(0,0,0,.50);
  --gb-shadow-lg:   0 12px 28px rgba(0,0,0,.52), 0 24px 48px rgba(0,0,0,.55);
  --gb-shadow-primary: 0 6px 20px rgba(22,163,74,.28);
}

/* ================================================================
   BASE
   ================================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  font-family: var(--f-sans);
  font-size: .875rem;
  line-height: 1.6;
  color: var(--gb-text);
  background: var(--gb-bg);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, h4, h5 {
  font-family: var(--f-head);
  font-weight: 700;
  margin: 0;
  line-height: 1.25;
}

a { color: var(--gb-green); text-decoration: none; transition: color var(--gb-fast) var(--gb-ease); }
a:hover { color: var(--gb-green-dk); }

/* ── Utility classes ── */
.font-mono {
  font-family: var(--f-mono) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

.eyebrow {
  font-size: .675rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gb-green);
  display: block;
  margin-bottom: 6px;
}

.page-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--gb-text);
  letter-spacing: -.02em;
}

.text-positive { color: var(--gb-green) !important; }
.text-negative { color: var(--gb-red)   !important; }

/* ── Shared utility classes ── */
.gb-text-meta {
  font-size: .78rem;
  font-weight: 400;
  color: var(--gb-text-3);
}

.gb-section-title {
  font-size: 1.15rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--gb-text);
}

.gb-section-title i {
  color: var(--gb-green);
}

.gb-divider {
  border-top: 1px solid var(--gb-border-soft);
}

.gb-inline-icon {
  font-size: .7rem;
  color: var(--gb-text-3);
  flex-shrink: 0;
}

/* ── Text truncation ── */
.gb-text-ellipsis {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  vertical-align: middle;
}
@media (max-width: 767.98px) { .gb-text-ellipsis { max-width: 110px; } }

/* ── KPI separator (Greens / Reds) ── */
.kpi-sep {
  color: var(--gb-border);
  margin: 0 6px;
  user-select: none;
}

/* ── Action group (table cell buttons) ── */
.gb-action-group {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: flex-start;
}

/* ── Origin cell (table) ── */
.gb-origem-cell {
  white-space: nowrap;
  font-size: .78rem;
}
.gb-origem-excluido {
  font-size: .65rem;
  color: var(--gb-text-3);
}

/* ── Form inline ── */
.gb-form-inline { display: inline; }

/* ── Date input ── */
.gb-date-input { width: auto; min-width: 140px; }
@media (max-width: 575.98px) { .gb-date-input { min-width: 0; width: 100%; } }

/* ── Alert small ── */
.gb-alert-sm { font-size: .78rem; }

/* ── Badge inline (tabs, chips) ── */
.gb-badge-inline {
  font-size: .65rem;
  padding: 2px 6px;
  vertical-align: middle;
}

/* ── Badge card (mobile) ── */
.gb-badge-card {
  font-size: .78rem;
  padding: 6px 12px;
}

/* ── Auth brand ── */
.gb-auth-brand {
  font-family: var(--f-head);
  font-size: .95rem;
  font-weight: 800;
  color: #fff;
}

/* ── Success icon (auth / recovery) ── */
.gb-success-icon {
  width: 52px; height: 52px;
  background: var(--gb-green-soft);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
}
.gb-success-icon i { font-size: 1.5rem; color: var(--gb-green); }

/* ── Nav disabled ── */
.gb-nav-disabled { opacity: .3; cursor: not-allowed; }
.gb-topbar-icon { color: rgba(255,255,255,.5); font-size: 1.2rem; }

/* ── KPI value name (perfil) ── */
.kpi-value-name {
  font-size: 1rem;
  font-family: var(--f-head);
}

/* ── Info pop icon (inline help trigger) ── */
.gb-info-pop {
  font-size: .85rem;
  color: var(--gb-text-3);
  cursor: pointer;
  transition: color var(--gb-fast) var(--gb-ease);
  flex-shrink: 0;
}
.gb-info-pop:hover { color: var(--gb-blue); }

/* ── Popover redesign ── */
.popover {
  background: var(--gb-surface);
  border: 1px solid var(--gb-border);
  border-radius: var(--gb-radius-lg);
  box-shadow: var(--gb-shadow-lg);
  font-family: var(--f-sans);
}
.popover .popover-header {
  font-family: var(--f-sans);
  font-size: .8rem;
  font-weight: 700;
  color: var(--gb-text);
  background: transparent;
  border-bottom: 1px solid var(--gb-border-soft);
  padding: 14px 18px 10px;
  border-radius: var(--gb-radius-lg) var(--gb-radius-lg) 0 0;
}
.popover .popover-body {
  font-size: .82rem;
  color: var(--gb-text-2);
  padding: 12px 18px 14px;
  line-height: 1.6;
}
.popover .popover-arrow::after {
  border-top-color: var(--gb-surface) !important;
  border-bottom-color: var(--gb-surface) !important;
}

/* ── Link muted ── */
.gb-link-muted {
  font-size: .75rem;
  color: var(--gb-text-3);
  text-decoration: none;
}
.gb-link-muted:hover { color: var(--gb-text-2); }

/* ================================================================
   LAYOUT: SIDEBAR + MAIN
   ================================================================ */

/* Desktop: sidebar fixa */
@media (min-width: 992px) {
  .gb-sidebar {
    position: fixed !important;
    top: 0; left: 0; bottom: 0;
    width: var(--gb-nav-w) !important;
    height: 100vh;
    overflow-y: auto;
    transform: none !important;
    visibility: visible !important;
    z-index: 1040;
  }
  .gb-main {
    margin-left: var(--gb-nav-w);
    min-height: 100vh;
  }
}

/* Mobile */
@media (max-width: 991.98px) {
  .gb-sidebar { border-right: none; }
  .gb-main {
    margin-left: 0;
    padding-bottom: calc(var(--gb-bottom-nav-h) + 4px);
  }
  .offcanvas-start { z-index: 1060 !important; }
}

/* ── Sidebar ── */
.gb-sidebar {
  width: var(--gb-nav-w) !important;
  background: var(--gb-nav-bg);
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(255,255,255,.05);
}

/* Brand */
.gb-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 20px 18px;
  border-bottom: 1px solid rgba(255,255,255,.05);
  text-decoration: none;
  flex-shrink: 0;
  transition: opacity var(--gb-fast) var(--gb-ease);
}
.gb-brand:hover { opacity: .85; }

.gb-brand-mark {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--gb-green), var(--gb-green-lt));
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: #fff; font-size: .95rem;
  box-shadow: 0 2px 8px rgba(22,163,74,.35);
}

.gb-brand-name {
  font-family: var(--f-head);
  font-weight: 800;
  font-size: .9rem;
  color: #fff;
  line-height: 1.2;
  letter-spacing: -.01em;
}

.gb-brand-sub {
  font-size: .625rem;
  color: rgba(255,255,255,.28);
  font-weight: 500;
  letter-spacing: .03em;
}

/* Nav items */
.gb-nav {
  flex: 1;
  padding: 12px 12px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

.gb-nav:hover {
  scrollbar-color: rgba(255,255,255,.1) transparent;
}

.gb-nav::-webkit-scrollbar {
  width: 4px;
}

.gb-nav::-webkit-scrollbar-track {
  background: transparent;
}

.gb-nav::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 4px;
}

.gb-nav:hover::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.12);
}

.gb-nav-section-label {
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255,255,255,.2);
  padding: 14px 10px 6px;
}

.gb-nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  color: rgba(255,255,255,.5);
  font-size: .825rem;
  font-weight: 500;
  text-decoration: none;
  transition: all var(--gb-fast) var(--gb-ease);
  margin-bottom: 2px;
  border: none;
  background: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
  position: relative;
}

.gb-nav-link:hover {
  color: rgba(255,255,255,.85);
  background: rgba(255,255,255,.06);
}

.gb-nav-link.active {
  color: #fff;
  background: rgba(22,163,74,.2);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--gb-green);
  border-radius: 6px 10px 10px 6px;
}

.gb-nav-link i {
  font-size: 1.05rem;
  flex-shrink: 0;
  opacity: .85;
}

.gb-nav-link.active i { opacity: 1; }

.gb-nav-sep {
  height: 1px;
  background: rgba(255,255,255,.05);
  margin: 8px 4px;
}

/* Footer */
.gb-nav-footer {
  padding: 12px 12px 16px;
  border-top: 1px solid rgba(255,255,255,.05);
  flex-shrink: 0;
}

.gb-user-info {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px 12px;
}

.gb-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gb-green), #4ADE80);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 700;
  flex-shrink: 0;
}

.gb-user-name {
  font-size: .8rem;
  font-weight: 600;
  color: rgba(255,255,255,.75);
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gb-user-role {
  font-size: .625rem;
  color: rgba(255,255,255,.26);
  letter-spacing: .03em;
}

.gb-logout {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  color: rgba(255,255,255,.3);
  font-size: .78rem;
  text-decoration: none;
  transition: all var(--gb-fast) var(--gb-ease);
}

.gb-logout:hover {
  color: #F87171;
  background: rgba(239,68,68,.1);
}

/* Toggle de tema: mesmo tamanho do logout, mas hover neutro (não é ação destrutiva) */
.gb-theme-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  color: rgba(255,255,255,.45);
  font-size: .78rem;
  text-decoration: none;
  transition: all var(--gb-fast) var(--gb-ease);
  cursor: pointer;
  text-align: left;
}
.gb-theme-toggle:hover {
  color: #fff;
  background: rgba(255,255,255,.06);
}
.gb-theme-toggle i { transition: transform var(--gb-fast) var(--gb-ease); }
.gb-theme-toggle:hover i { transform: rotate(-18deg); }

/* Topbar mobile */
.gb-topbar {
  background: var(--gb-nav-bg);
  padding: 0 18px;
  height: var(--gb-topbar-h);
  display: none;
  align-items: center;
  justify-content: space-between;
  position: sticky; top: 0; z-index: 1030;
  border-bottom: 1px solid rgba(255,255,255,.05);
}

.gb-topbar-name {
  font-family: var(--f-head);
  font-size: .9rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.01em;
}

@media (max-width: 991.98px) {
  .gb-topbar { display: flex; }
}

/* ── Page ── */
.gb-main { min-height: 100vh; }

.gb-page {
  padding: 28px 32px 64px;
  max-width: 1600px;
  margin: 0 auto;
  width: 100%;
}

@media (min-width: 1600px) {
  .gb-page { padding: 32px 40px 64px; }
}

@media (max-width: 991.98px) {
  .gb-page { padding: 16px 16px calc(var(--gb-bottom-nav-h) + 24px); max-width: none; }
}

@media (max-width: 767.98px) {
  .gb-page { padding: 16px 14px calc(var(--gb-bottom-nav-h) + 20px); }
}

@media (max-width: 575.98px) {
  .gb-page { padding: 12px 12px calc(var(--gb-bottom-nav-h) + 24px); }
}

/* ── Page header ── */
.gb-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.gb-page-header .eyebrow { margin-bottom: 4px; }

/* Page description — subtitle below page-title */
.gb-page-desc {
  font-size: .82rem;
  color: var(--gb-text-3);
  line-height: 1.55;
  max-width: 820px;
}

/* ================================================================
   CARDS
   ================================================================ */
.card {
  background: var(--gb-surface);
  border: 1px solid var(--gb-border) !important;
  border-radius: var(--gb-radius-lg) !important;
  box-shadow: var(--gb-shadow-sm);
  transition: box-shadow var(--gb-slow) var(--gb-ease), border-color var(--gb-slow) var(--gb-ease);
}

.card:hover {
  box-shadow: var(--gb-shadow-md);
  border-color: var(--gb-border-medium) !important;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 22px;
  background: var(--gb-surface-2);
  border-bottom: 1px solid var(--gb-border);
  border-radius: var(--gb-radius-lg) var(--gb-radius-lg) 0 0 !important;
}

.card-header h2, .card-header h3 {
  font-size: .85rem;
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--gb-text);
}

.card-header h2 i, .card-header h3 i {
  color: var(--gb-text-3);
  font-size: .9rem;
}

.card-header .text-muted {
  color: var(--gb-text-3) !important;
  font-size: .78rem;
  font-weight: 500;
}

.card-body { padding: 22px; }
.card-body-sm { padding: 16px 22px; }

/* Card dividers: subtle top border on body when header exists */
.card-header + .card-body,
.card-header + .table-responsive,
.card-header + .card-body-sm {
  border-top: 1px solid var(--gb-border-soft);
}

/* ── Tabs inside cards ── */
.card .nav-tabs {
  background: transparent;
  padding: 0 22px;
  border-bottom: 1px solid var(--gb-border-soft);
}

.card .nav-tabs .nav-link {
  font-size: .8rem;
  font-weight: 600;
  color: var(--gb-text-3);
  border: none;
  border-bottom: 2px solid transparent;
  padding: 12px 18px;
  margin-right: 6px;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all var(--gb-fast) var(--gb-ease);
  border-radius: 0;
}

.card .nav-tabs .nav-link:hover {
  color: var(--gb-text);
  border-bottom-color: var(--gb-border);
}

.card .nav-tabs .nav-link.active {
  color: var(--gb-green);
  background: transparent;
  border-bottom-color: var(--gb-green);
}

.card .nav-tabs .nav-link .badge {
  font-weight: 600;
  font-size: .65rem;
}

/* ── Standalone tabs (outside cards — e.g. Banca page) ── */
.nav-tabs-standalone {
  border-bottom: 1px solid var(--gb-border);
  margin-bottom: 16px;
}

.nav-tabs-standalone .nav-link {
  font-size: .8rem;
  font-weight: 600;
  color: var(--gb-text-3);
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 20px;
  margin-right: 4px;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all var(--gb-fast) var(--gb-ease);
  border-radius: 0;
}

.nav-tabs-standalone .nav-link:hover {
  color: var(--gb-text);
  border-bottom-color: var(--gb-border);
}

.nav-tabs-standalone .nav-link.active {
  color: var(--gb-green);
  background: transparent;
  border-bottom-color: var(--gb-green);
}

/* ── Dark mode: tabs ── */
[data-gb-theme="dark"] .card .nav-tabs { border-bottom-color: var(--gb-border); }
[data-gb-theme="dark"] .card .nav-tabs .nav-link:hover { color: var(--gb-text); }
[data-gb-theme="dark"] .nav-tabs-standalone { border-bottom-color: var(--gb-border); }
[data-gb-theme="dark"] .nav-tabs-standalone .nav-link:hover { color: var(--gb-text); }

/* ================================================================
   KPI CARDS — Unified layout (horizontal icon + label row)
   ================================================================ */
.kpi-card {
  background: var(--gb-surface);
  border: 1px solid var(--gb-border);
  border-radius: var(--gb-radius);
  padding: 22px 20px;
  height: 180px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  box-shadow: var(--gb-shadow-sm);
  transition: box-shadow var(--gb-slow) var(--gb-ease), transform var(--gb-slow) var(--gb-ease), border-color var(--gb-slow) var(--gb-ease);
}

.kpi-card:hover {
  box-shadow: var(--gb-shadow-md);
  transform: translateY(-2px);
  border-color: var(--gb-border-medium);
}

/* Accent bar: left side */
.kpi-card::before {
  content: '';
  position: absolute;
  top: 12px; bottom: 12px; left: 0;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: var(--gb-border-medium);
  transition: background var(--gb-slow) var(--gb-ease);
}

.kpi-card.kpi-success::before { background: linear-gradient(180deg, var(--gb-green-lt), var(--gb-green)); }
.kpi-card.kpi-danger::before  { background: linear-gradient(180deg, #F87171, var(--gb-red)); }
.kpi-card.kpi-primary::before { background: linear-gradient(180deg, var(--gb-green-lt), var(--gb-green)); }

/* Hero (Lucro) lidera a hierarquia com um glow sutil na cor do resultado */
.kpi-card.kpi-hero.kpi-success { box-shadow: var(--gb-shadow-sm), var(--gb-shadow-primary); }
.kpi-card.kpi-hero.kpi-success:hover { box-shadow: var(--gb-shadow-md), var(--gb-shadow-primary); }

/* Remove old bottom bar */
.kpi-card::after { display: none; }

/* Dark mode KPI */
[data-gb-theme="dark"] .kpi-card.kpi-hero.kpi-success {
  background: linear-gradient(135deg, var(--gb-surface) 0%, rgba(22,163,74,.06) 100%);
  border-color: rgba(22,163,74,.25) !important;
}
[data-gb-theme="dark"] .kpi-card.kpi-hero.kpi-danger {
  background: linear-gradient(135deg, var(--gb-surface) 0%, rgba(220,38,38,.06) 100%);
  border-color: rgba(220,38,38,.25) !important;
}
[data-gb-theme="dark"] .ki-green { background: rgba(22,163,74,.18);  color: #4ADE80; }
[data-gb-theme="dark"] .ki-red   { background: rgba(220,38,38,.18);  color: #F87171; }
[data-gb-theme="dark"] .ki-blue  { background: rgba(37,99,235,.18);  color: #93C5FD; }
[data-gb-theme="dark"] .ki-amber { background: rgba(217,119,6,.18);  color: #FCD34D; }
[data-gb-theme="dark"] .ki-slate { background: rgba(100,116,139,.18); color: #B0B7C3; }

/* KPI header row: icon + label side by side */
.kpi-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 34px;
  flex-shrink: 0;
}

.kpi-header .kpi-icon {
  margin-bottom: 0;
}

.kpi-header .kpi-label {
  margin-bottom: 0;
}

/* Hero KPI — card de destaque principal (Lucro) */
.kpi-card.kpi-hero {
  border-width: 1.5px;
}

.kpi-card.kpi-hero.kpi-success {
  background: linear-gradient(135deg, #fff 0%, #F0FDF4 100%);
  border-color: #BBF7D0 !important;
}

.kpi-card.kpi-hero.kpi-danger {
  background: linear-gradient(135deg, #fff 0%, #FEF2F2 100%);
  border-color: #FCA5A5 !important;
}

/* Dark variant */
.kpi-dark {
  background: var(--gb-nav-bg) !important;
  border-color: rgba(255,255,255,.06) !important;
}

.kpi-dark .kpi-label { color: rgba(255,255,255,.35); }
.kpi-dark .kpi-value { color: #fff; }
.kpi-dark .kpi-foot  { color: rgba(255,255,255,.22); }

.kpi-icon {
  width: 32px; height: 32px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  margin-bottom: 6px;
  flex-shrink: 0;
}

.ki-green { background: var(--gb-green-soft);  color: var(--gb-green); }
.ki-red   { background: var(--gb-red-soft);    color: var(--gb-red); }
.ki-blue  { background: var(--gb-blue-soft);   color: var(--gb-blue); }
.ki-amber { background: var(--gb-amber-soft);  color: var(--gb-amber); }
.ki-slate { background: var(--gb-surface-3);   color: var(--gb-text-3); }

.kpi-label {
  font-size: .70rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--gb-text-3);
}

.kpi-value {
  font-family: var(--f-mono);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--gb-text);
  letter-spacing: -.02em;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Variantes de tamanho */
.kpi-value-hero  { font-size: 1.6rem; font-weight: 800; letter-spacing: -.03em; }
.kpi-value-small { font-size: 1.1rem; }

/* Mobile: todos os kpi-value com o mesmo tamanho + card reduzido */
@media (max-width: 991.98px) {
  .kpi-card  { height: 150px; padding: 18px 16px; }
  .kpi-value,
  .kpi-value-hero,
  .kpi-value-small { font-size: 1.25rem !important; font-weight: 700; }
}

.kpi-foot {
  font-size: .7rem;
  color: var(--gb-text-3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-shrink: 0;
}

/* KPI trend arrow */
.kpi-trend-up {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: .7rem;
  font-weight: 700;
  color: var(--gb-green);
}

.kpi-trend-dn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: .7rem;
  font-weight: 700;
  color: var(--gb-red);
}

/* ================================================================
   DATA TABLE
   ================================================================ */
.table-gb {
  margin: 0;
  font-size: .84rem;
  --bs-table-bg: transparent;
  --bs-table-color: var(--gb-text);
  background-color: transparent;
  border-collapse: separate;
  border-spacing: 0;
}

/* Dark mode: ensure Bootstrap table variables don't leak light bg */
[data-gb-theme="dark"] .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--gb-text);
}

.table-gb thead tr {
  border-bottom: none;
}

.table-gb thead th {
  font-family: var(--f-sans);
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--gb-text-3);
  padding: 14px 16px 12px;
  background: transparent;
  white-space: nowrap;
  border: none;
  vertical-align: bottom;
  border-bottom: 2px solid var(--gb-border);
}

.table-gb thead th:first-child {
  border-radius: var(--gb-radius-sm) 0 0 0;
}

.table-gb thead th:last-child {
  border-radius: 0 var(--gb-radius-sm) 0 0;
}

.table-gb thead th.text-end { text-align: right; }

.table-gb tbody tr {
  border-bottom: 1px solid var(--gb-border-soft);
  transition: background var(--gb-fast) var(--gb-ease), box-shadow var(--gb-fast) var(--gb-ease);
}

.table-gb tbody tr:last-child { border-bottom: none; }

/* Zebra discreta — melhora a escaneabilidade sem poluir */
.table-gb tbody tr:nth-child(even) {
  background: var(--gb-surface-2);
}

.table-gb tbody tr:hover {
  background: var(--gb-surface-3);
  box-shadow: inset 3px 0 0 var(--gb-green);
}

.table-gb tbody td {
  padding: 14px 16px;
  border: none;
  vertical-align: middle;
  color: var(--gb-text-2);
  line-height: 1.45;
  background: transparent;
  white-space: nowrap;
}

.table-gb tbody td.td-primary {
  font-weight: 600;
  color: var(--gb-text);
}

.table-gb tbody td.td-mono {
  font-family: var(--f-mono);
  font-size: .8rem;
}

.table-gb tbody td.td-muted {
  color: var(--gb-text-3);
  font-size: .78rem;
}

.table-gb tbody td.text-end { text-align: right; }

.td-actions {
  white-space: nowrap;
  text-align: left;
}

.cell-stack {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* ================================================================
   BADGES & TAGS
   ================================================================ */
.badge {
  font-size: .7rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: .01em;
  transition: transform var(--gb-fast) var(--gb-ease);
}

.badge-green   { background: #D1FAE5; color: #065F46; }
.badge-red     { background: #FEE2E2; color: #991B1B; }
.badge-amber   { background: #FEF3C7; color: #92400E; }

/* Subscription status badges */
.badge-trial    { background: #FEF3C7; color: #92400E; font-weight: 600; }
.badge-ativa    { background: #D1FAE5; color: #065F46; font-weight: 600; }
.badge-expirada { background: #FEE2E2; color: #991B1B; font-weight: 600; }
.badge-bloqueada{ background: #F1F5F9; color: #475569; font-weight: 600; }
.badge-blue    { background: #DBEAFE; color: #1E40AF; }
.badge-neutral { background: #F1F5F9; color: #475569; }

.tag-mercado {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--gb-green-soft);
  color: var(--gb-green-dk);
  border: 1px solid var(--gb-green-mid);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: .7rem;
  font-weight: 600;
  white-space: nowrap;
  letter-spacing: .01em;
}

.tag-padrao-off {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: .68rem;
  font-weight: 600;
  color: var(--gb-amber);
}

/* Dark mode badges */
[data-gb-theme="dark"] .badge-green   { background: rgba(22,163,74,.22);  color: #4ADE80; }
[data-gb-theme="dark"] .badge-red     { background: rgba(220,38,38,.22);  color: #FCA5A5; }
[data-gb-theme="dark"] .badge-amber   { background: rgba(217,119,6,.22);  color: #FCD34D; }
[data-gb-theme="dark"] .badge-trial    { background: rgba(217,119,6,.18);  color: #FCD34D; }
[data-gb-theme="dark"] .badge-ativa    { background: rgba(22,163,74,.18);  color: #4ADE80; }
[data-gb-theme="dark"] .badge-expirada { background: rgba(220,38,38,.18);  color: #FCA5A5; }
[data-gb-theme="dark"] .badge-bloqueada{ background: rgba(255,255,255,.06); color: #8B9098; }
[data-gb-theme="dark"] .badge-blue    { background: rgba(37,99,235,.22);  color: #93C5FD; }
[data-gb-theme="dark"] .badge-neutral { background: rgba(100,116,139,.22); color: #CBD5E1; }
[data-gb-theme="dark"] .badge-secondary { background: rgba(100,116,139,.18); color: #B0B7C3; }
[data-gb-theme="dark"] .tag-mercado {
  background: rgba(22,163,74,.16);
  border-color: rgba(22,163,74,.30);
  color: #4ADE80;
}

/* ================================================================
   BUTTONS
   ================================================================ */
.btn {
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: .825rem;
  border-radius: var(--gb-radius-sm);
  padding: 8px 16px;
  transition: all var(--gb-fast) var(--gb-ease);
  letter-spacing: .01em;
}

.btn-sm {
  font-size: .75rem;
  border-radius: 6px;
  padding: 5px 12px;
}

.btn-lg {
  font-size: .9rem;
  border-radius: 10px;
  padding: 10px 22px;
}

.btn-primary {
  background: var(--gb-green) !important;
  border-color: var(--gb-green) !important;
  color: #fff !important;
  box-shadow: 0 1px 2px rgba(22,163,74,.25);
}

.btn-primary:hover {
  background: var(--gb-green-dk) !important;
  border-color: var(--gb-green-dk) !important;
  box-shadow: 0 2px 8px rgba(22,163,74,.35);
  transform: translateY(-1px);
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(22,163,74,.25);
}

.btn-success {
  background: #22C55E !important;
  border-color: #22C55E !important;
  color: #fff !important;
}

.btn-danger {
  background: var(--gb-red) !important;
  border-color: var(--gb-red) !important;
  color: #fff !important;
}

.btn-danger:hover {
  background: var(--gb-red-dk) !important;
  border-color: var(--gb-red-dk) !important;
}

.btn-outline-secondary {
  color: var(--gb-text-2);
  background: var(--gb-surface);
  border-color: var(--gb-border-medium);
  box-shadow: var(--gb-shadow-xs);
}

.btn-outline-secondary:hover {
  background: var(--gb-surface-2);
  color: var(--gb-text);
  border-color: var(--gb-border-strong);
  box-shadow: var(--gb-shadow-sm);
  transform: translateY(-1px);
}

.btn-outline-secondary:active {
  transform: translateY(0);
  box-shadow: none;
}

.btn-outline-danger {
  color: var(--gb-red);
  border-color: var(--gb-red);
  background: transparent;
}

.btn-outline-danger:hover,
.btn-outline-danger:focus-visible {
  background: var(--gb-red);
  border-color: var(--gb-red);
  color: #fff !important;
}

/* Toggle buttons (origem da aposta): checked state uses brand green */
.btn-check:checked + .btn-outline-secondary {
  background-color: var(--gb-green) !important;
  border-color: var(--gb-green) !important;
  color: #fff !important;
}

.btn-outline-light {
  color: rgba(255,255,255,.7);
  border-color: rgba(255,255,255,.15);
}

.btn-outline-light:hover {
  background: rgba(255,255,255,.08);
  color: #fff;
  border-color: rgba(255,255,255,.25);
}

/* ================================================================
   FORMS
   ================================================================ */
.form-label {
  font-size: .78rem;
  font-weight: 600;
  color: var(--gb-text-2);
  margin-bottom: 5px;
  letter-spacing: .01em;
}

/* Labels com ícone em modo flex (d-*-flex): o flexbox descarta o espaço
   em branco do markup entre o <i> e o texto, então restauramos o respiro
   com gap (em vez de depender do whitespace). */
.form-label.d-flex,
.form-label.d-inline-flex,
.form-label.d-sm-flex,
.form-label.d-md-flex,
.form-label.d-lg-flex {
  align-items: center;
  gap: 6px;
}

.form-control, .form-select {
  font-size: .84rem;
  border-radius: var(--gb-radius-sm);
  border: 1.5px solid var(--gb-border-medium);
  color: var(--gb-text);
  padding: 9px 13px;
  transition: border-color var(--gb-fast) var(--gb-ease), box-shadow var(--gb-fast) var(--gb-ease), background-color var(--gb-fast) var(--gb-ease);
  background: var(--gb-surface);
}

.form-control:hover:not(:focus), .form-select:hover:not(:focus) {
  border-color: var(--gb-border-strong);
}

.form-control:focus, .form-select:focus {
  border-color: var(--gb-green);
  box-shadow: 0 0 0 3px rgba(22,163,74,.14);
  outline: none;
  background-color: var(--gb-surface);
}

.form-control.is-mono {
  font-family: var(--f-mono);
}

/* Placeholder contrast */
.form-control::placeholder,
.form-select::placeholder {
  color: var(--gb-text-3);
  opacity: 1;
}

[data-gb-theme="dark"] .form-control::placeholder,
[data-gb-theme="dark"] .form-select::placeholder {
  color: #6B7080;
  opacity: 1;
}

/* Dark mode: inputs com contraste garantido */
[data-gb-theme="dark"] .form-control,
[data-gb-theme="dark"] .form-select {
  color-scheme: dark;
  background-color: #1E2130;
  color: #E4E8ED;
  border-color: #2D3144;
}
[data-gb-theme="dark"] .form-control:focus,
[data-gb-theme="dark"] .form-select:focus {
  background-color: #1E2130;
  color: #FFFFFF;
  border-color: var(--gb-green);
}

/* Remove fundo amarelo do autofill do Chrome (modo claro e escuro) */
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 30px var(--gb-surface) inset;
  -webkit-text-fill-color: var(--gb-text);
  caret-color: var(--gb-text);
  transition: background-color 5000s ease-in-out 0s;
}

.form-text {
  font-size: .72rem;
  color: var(--gb-text-3);
}

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

/* ── Filter row: equalize heights of selects, inputs and buttons ── */
.gb-filtro-row .form-select-sm,
.gb-filtro-row .form-control-sm,
.gb-filtro-row .btn-sm {
  height: 36px;
  padding-top: 0;
  padding-bottom: 0;
  display: inline-flex;
  align-items: center;
}

/* ── Botão "Filtrar": ação primária da barra de filtros ── */
.gb-btn-filtrar {
  gap: 6px;
  font-weight: 600;
}
.gb-filtro-row .gb-btn-filtrar {
  padding-left: 18px;
  padding-right: 18px;
}

/* ── Abas de origem (Bot/Canal/Tipster): visíveis só no mobile ── */
.gb-origem-tabs {
  display: none;
}

@media (max-width: 575.98px) {
  /* Barra de abas */
  .gb-origem-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
    padding: 3px;
    background: var(--gb-surface-2);
    border: 1px solid var(--gb-border);
    border-radius: var(--gb-radius-sm);
  }
  .gb-origem-tab {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 7px 6px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    color: var(--gb-text-2);
    background: transparent;
    border: 0;
    border-radius: calc(var(--gb-radius-sm) - 3px);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s, color .15s;
  }
  .gb-origem-tab i { font-size: 13px; margin-right: 2px; line-height: 1; }
  .gb-origem-tab.active {
    color: var(--gb-green);
    background: var(--gb-surface);
    box-shadow: var(--gb-shadow-xs);
  }

  /* Só a coluna da aba ativa aparece, ocupando a largura toda */
  .gb-origem-col { display: none; }
  .gb-origem-col.gb-origem-active { display: block; }

  /* Botão "Filtrar" (e "Limpar"): ação principal do formulário.
     Sobrescreve a utility .mt-1 do Bootstrap (que vem com !important). */
  .gb-filtro-row .d-grid {
    margin-top: 24px !important;
  }
  .gb-filtro-row .d-grid .btn-sm {
    height: auto;
    padding: 11px 12px;
    font-size: 14px;
    font-weight: 600;
    gap: 8px;
    border-width: 2px;
    border-radius: var(--gb-radius-sm);
  }
  .gb-filtro-row .d-grid .btn-outline-secondary:hover,
  .gb-filtro-row .d-grid .btn-outline-secondary:active {
    background: rgba(22, 163, 74, .08);
    border-color: var(--gb-green);
    color: var(--gb-green);
  }
}

/* ── Form hint text ── */
.gb-form-hint {
  font-size: .78rem;
  color: var(--gb-text-3);
  margin-bottom: 16px;
  line-height: 1.5;
}

/* ================================================================
   ALERTS
   ================================================================ */
.alert {
  font-size: .84rem;
  border-radius: var(--gb-radius);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-left-width: 4px !important;
  padding: 14px 18px;
}

.alert i { flex-shrink: 0; margin-top: .05rem; font-size: 1rem; }

.alert-success {
  background: var(--gb-green-soft);
  color: #15803D;
  border-color: #22C55E !important;
}
.alert-danger {
  background: var(--gb-red-soft);
  color: #991B1B;
  border-color: var(--gb-red) !important;
}
.alert-warning {
  background: var(--gb-amber-soft);
  color: #92400E;
  border-color: var(--gb-amber) !important;
}
.alert-info {
  background: var(--gb-blue-soft);
  color: #1E40AF;
  border-color: var(--gb-blue) !important;
}

/* Dark mode alerts */
[data-gb-theme="dark"] .alert-success { color: #4ADE80; }

[data-gb-theme="dark"] .alert-warning {
  color: #FCD34D;
}
[data-gb-theme="dark"] .alert-danger  { color: #FCA5A5; }
[data-gb-theme="dark"] .alert-warning { color: #FCD34D; }
[data-gb-theme="dark"] .alert-info    { color: #93C5FD; }

/* Alertas dispensáveis */
.alert-dismissible { padding-right: 44px; }

.alert-dismissible .btn-close {
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  padding: 10px;
  font-size: .7rem;
  opacity: .55;
}
.alert-dismissible .btn-close:hover { opacity: 1; }

[data-gb-theme="dark"] .alert-dismissible .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* ================================================================
   PERIOD SELECTOR — unified via scroll-chip
   ================================================================ */
.scroll-x {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.scroll-x::-webkit-scrollbar { display: none; }

/* ================================================================
   SCROLLBARS — thin, subtle, matching the design system
   ================================================================ */
.table-responsive,
.gb-pagination {
  scrollbar-width: thin;
  scrollbar-color: var(--gb-border) transparent;
}

.table-responsive::-webkit-scrollbar,
.gb-pagination::-webkit-scrollbar {
  height: 5px;
  width: 5px;
}

.table-responsive::-webkit-scrollbar-track,
.gb-pagination::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 6px;
}

.table-responsive::-webkit-scrollbar-thumb,
.gb-pagination::-webkit-scrollbar-thumb {
  background: var(--gb-border);
  border-radius: 6px;
}

.table-responsive::-webkit-scrollbar-thumb:hover,
.gb-pagination::-webkit-scrollbar-thumb:hover {
  background: var(--gb-text-3);
}

.scroll-chip {
  flex-shrink: 0;
  padding: 7px 16px;
  border-radius: 10px;
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap;
  border: 1.5px solid var(--gb-border);
  color: var(--gb-text-2);
  background: var(--gb-surface);
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: all var(--gb-fast) var(--gb-ease);
  letter-spacing: .01em;
}

.scroll-chip:hover {
  border-color: var(--gb-border-strong);
  color: var(--gb-text);
  background: var(--gb-surface-2);
}

/* Ativo — pílula preenchida de alto contraste (estilo Linear/GitHub).
   Usa --gb-text/--gb-surface, invertendo automaticamente no dark. */
.scroll-chip.active {
  background: var(--gb-text);
  color: var(--gb-surface);
  border-color: var(--gb-text);
  font-weight: 700;
  box-shadow: var(--gb-shadow-xs);
}

/* ── Active chip herda a cor da badge correspondente ── */
.scroll-chip.active:has(.badge-green)   { background: #D1FAE5; color: #065F46; border-color: #6EE7B7; }
.scroll-chip.active:has(.badge-red)     { background: #FEE2E2; color: #991B1B; border-color: #FCA5A5; }
.scroll-chip.active:has(.badge-amber)   { background: #FEF3C7; color: #92400E; border-color: #FCD34D; }
.scroll-chip.active:has(.badge-blue)    { background: #DBEAFE; color: #1E40AF; border-color: #93C5FD; }
.scroll-chip.active:has(.badge-neutral) { background: #F1F5F9; color: #475569; border-color: #CBD5E1; }

/* Dark mode */
[data-gb-theme="dark"] .scroll-chip.active {
  background: var(--gb-text);
  color: var(--gb-surface);
  border-color: var(--gb-text);
}
[data-gb-theme="dark"] .scroll-chip.active:has(.badge-green)   { background: rgba(22,163,74,.25);  color: #4ADE80; border-color: rgba(34,197,94,.4); }
[data-gb-theme="dark"] .scroll-chip.active:has(.badge-red)     { background: rgba(220,38,38,.25);  color: #FCA5A5; border-color: rgba(239,68,68,.4); }
[data-gb-theme="dark"] .scroll-chip.active:has(.badge-amber)   { background: rgba(217,119,6,.25);  color: #FCD34D; border-color: rgba(245,158,11,.4); }
[data-gb-theme="dark"] .scroll-chip.active:has(.badge-blue)    { background: rgba(37,99,235,.25);  color: #93C5FD; border-color: rgba(59,130,246,.4); }
[data-gb-theme="dark"] .scroll-chip.active:has(.badge-neutral) { background: rgba(100,116,139,.25); color: #CBD5E1; border-color: rgba(148,163,184,.4); }

/* No chip ativo, a badge some no fundo do chip (fundo unificado, como no modo
   claro). Sem isso, o empilhamento das transparências deixa a badge mais
   escura que o chip. O texto herda a cor correta do próprio chip ativo. */
[data-gb-theme="dark"] .scroll-chip.active .badge {
  background: transparent;
}

.gb-period-meta {
  font-size: .7rem;
  color: var(--gb-text-3);
  padding-top: 8px;
  letter-spacing: .01em;
}

/* Chips with wrap (for filter chips that should not scroll) */
.gb-filtro-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.gb-filtro-chips .scroll-chip {
  border-radius: 10px;
}

/* ================================================================
   FILTRO DE RESULTADO — o próprio chip é o status (sem badge interna)
   O chip carrega fundo, borda e cor do texto em TODOS os estados
   (inativo, hover, ativo). A badge deixa de existir visualmente:
   vira apenas o texto do chip, herdando a cor correta.
   ================================================================ */

/* Neutraliza a pill interna — elimina o efeito "caixa dentro da caixa" */
.gb-filtro-chips .scroll-chip .badge {
  background: transparent;
  color: inherit;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
}

/* ── Inativo: identidade suave (~fundo bem claro da cor do status) ── */
.gb-filtro-chips .scroll-chip:has(.badge-green)   { background: #ECFDF5; color: #16A34A; border-color: #BBF7D0; }
.gb-filtro-chips .scroll-chip:has(.badge-red)     { background: #FEF2F2; color: #DC2626; border-color: #FECACA; }
.gb-filtro-chips .scroll-chip:has(.badge-amber)   { background: #FFFBEB; color: #D97706; border-color: #FDE68A; }
.gb-filtro-chips .scroll-chip:has(.badge-blue)    { background: #EFF6FF; color: #2563EB; border-color: #BFDBFE; }
.gb-filtro-chips .scroll-chip:has(.badge-neutral) { background: #F8FAFC; color: #64748B; border-color: #E2E8F0; }

/* ── Hover: apenas intensifica levemente o fundo/borda (sem salto brusco) ── */
.gb-filtro-chips .scroll-chip:has(.badge-green):hover   { background: #D1FAE5; color: #15803D; border-color: #86EFAC; }
.gb-filtro-chips .scroll-chip:has(.badge-red):hover     { background: #FEE2E2; color: #B91C1C; border-color: #FCA5A5; }
.gb-filtro-chips .scroll-chip:has(.badge-amber):hover   { background: #FEF3C7; color: #B45309; border-color: #FCD34D; }
.gb-filtro-chips .scroll-chip:has(.badge-blue):hover    { background: #DBEAFE; color: #1D4ED8; border-color: #93C5FD; }
.gb-filtro-chips .scroll-chip:has(.badge-neutral):hover { background: #F1F5F9; color: #475569; border-color: #CBD5E1; }

/* ── Ativo: MESMA lógica dos botões de ação — FUNDO SÓLIDO + texto branco ── */
.gb-filtro-chips .scroll-chip.active:has(.badge-green)   { background: var(--gb-act-ok);      color: #fff; border-color: var(--gb-act-ok); }
.gb-filtro-chips .scroll-chip.active:has(.badge-red)     { background: var(--gb-act-del);     color: #fff; border-color: var(--gb-act-del); }
.gb-filtro-chips .scroll-chip.active:has(.badge-amber)   { background: var(--gb-act-amber);   color: #fff; border-color: var(--gb-act-amber); }
.gb-filtro-chips .scroll-chip.active:has(.badge-blue)    { background: var(--gb-act-edit);    color: #fff; border-color: var(--gb-act-edit); }
.gb-filtro-chips .scroll-chip.active:has(.badge-neutral) { background: var(--gb-act-neutral); color: #fff; border-color: var(--gb-act-neutral); }

/* "Todas" (sem badge) — sólido neutro quando ativo */
.gb-filtro-chips .scroll-chip.active:not(:has(.badge)) {
  background: var(--gb-act-neutral);
  color: #fff;
  border-color: var(--gb-act-neutral);
}

/* ── Dark mode ── */
[data-gb-theme="dark"] .gb-filtro-chips .scroll-chip:has(.badge-green)   { background: rgba(22,163,74,.10);  color: #4ADE80; border-color: rgba(34,197,94,.22); }
[data-gb-theme="dark"] .gb-filtro-chips .scroll-chip:has(.badge-red)     { background: rgba(220,38,38,.10);  color: #FCA5A5; border-color: rgba(239,68,68,.22); }
[data-gb-theme="dark"] .gb-filtro-chips .scroll-chip:has(.badge-amber)   { background: rgba(217,119,6,.10);  color: #FCD34D; border-color: rgba(245,158,11,.22); }
[data-gb-theme="dark"] .gb-filtro-chips .scroll-chip:has(.badge-blue)    { background: rgba(37,99,235,.10);  color: #93C5FD; border-color: rgba(59,130,246,.22); }
[data-gb-theme="dark"] .gb-filtro-chips .scroll-chip:has(.badge-neutral) { background: rgba(100,116,139,.12); color: #CBD5E1; border-color: rgba(148,163,184,.22); }

[data-gb-theme="dark"] .gb-filtro-chips .scroll-chip:has(.badge-green):hover   { background: rgba(22,163,74,.18);  border-color: rgba(34,197,94,.34); }
[data-gb-theme="dark"] .gb-filtro-chips .scroll-chip:has(.badge-red):hover     { background: rgba(220,38,38,.18);  border-color: rgba(239,68,68,.34); }
[data-gb-theme="dark"] .gb-filtro-chips .scroll-chip:has(.badge-amber):hover   { background: rgba(217,119,6,.18);  border-color: rgba(245,158,11,.34); }
[data-gb-theme="dark"] .gb-filtro-chips .scroll-chip:has(.badge-blue):hover    { background: rgba(37,99,235,.18);  border-color: rgba(59,130,246,.34); }
[data-gb-theme="dark"] .gb-filtro-chips .scroll-chip:has(.badge-neutral):hover { background: rgba(100,116,139,.20); border-color: rgba(148,163,184,.34); }

/* Dark: mantém o fundo sólido (branco garante contraste sobre a cor cheia) */
[data-gb-theme="dark"] .gb-filtro-chips .scroll-chip.active:has(.badge-green)   { background: var(--gb-act-ok);      color: #fff; border-color: var(--gb-act-ok);      box-shadow: 0 0 0 3px var(--gb-act-ok-ring); }
[data-gb-theme="dark"] .gb-filtro-chips .scroll-chip.active:has(.badge-red)     { background: var(--gb-act-del);     color: #fff; border-color: var(--gb-act-del); }
[data-gb-theme="dark"] .gb-filtro-chips .scroll-chip.active:has(.badge-amber)   { background: var(--gb-act-amber);   color: #fff; border-color: var(--gb-act-amber);   box-shadow: 0 0 0 3px var(--gb-act-amber-ring); }
[data-gb-theme="dark"] .gb-filtro-chips .scroll-chip.active:has(.badge-blue)    { background: var(--gb-act-edit);    color: #fff; border-color: var(--gb-act-edit);    box-shadow: 0 0 0 3px var(--gb-act-edit-ring); }
[data-gb-theme="dark"] .gb-filtro-chips .scroll-chip.active:has(.badge-neutral) { background: var(--gb-act-neutral); color: #fff; border-color: var(--gb-act-neutral); box-shadow: 0 0 0 3px var(--gb-act-neutral-ring); }
[data-gb-theme="dark"] .gb-filtro-chips .scroll-chip.active:not(:has(.badge))   { background: var(--gb-act-neutral); color: #fff; border-color: var(--gb-act-neutral); box-shadow: 0 0 0 3px var(--gb-act-neutral-ring); }

.gb-filtro-chips-wrap {
  position: relative;
}

/* Botões de navegação dos chips (aparecem só no mobile, quando há overflow) */
.gb-chips-nav {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--gb-border);
  background: var(--gb-surface);
  box-shadow: var(--gb-shadow-xs);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.gb-chips-nav:active { background: var(--gb-surface-2); }

/* Chevron desenhado com borda */
.gb-chips-nav::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  border-top: 2px solid var(--gb-text-2);
  border-right: 2px solid var(--gb-text-2);
}

.gb-chips-nav-left  { left: 0; }
.gb-chips-nav-right { right: 0; }
.gb-chips-nav-left::before  { transform: translate(-35%, -50%) rotate(-135deg); } /* "<" */
.gb-chips-nav-right::before { transform: translate(-65%, -50%) rotate(45deg); }   /* ">" */

/* Mobile: chips numa única linha com rolagem horizontal; setas laterais
   surgem conforme houver conteúdo para rolar (esquerda e/ou direita). */
@media (max-width: 575.98px) {
  .gb-filtro-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-padding-inline: 4px;
    /* folga vertical p/ o ring (box-shadow) do chip ativo não ser cortado
       pelo overflow-x da rolagem horizontal */
    padding-block: 4px;
  }
  .gb-filtro-chips::-webkit-scrollbar { display: none; }

  .gb-filtro-chips-wrap.can-left  .gb-chips-nav-left  { display: block; }
  .gb-filtro-chips-wrap.can-right .gb-chips-nav-right { display: block; }

  /* Fade sob cada botão, escondendo o corte do chip */
  .gb-filtro-chips-wrap.can-left::before,
  .gb-filtro-chips-wrap.can-right::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 44px;
    z-index: 1;
    pointer-events: none;
  }
  .gb-filtro-chips-wrap.can-left::before {
    left: 0;
    background: linear-gradient(to left, transparent, var(--gb-surface) 72%);
  }
  .gb-filtro-chips-wrap.can-right::after {
    right: 0;
    background: linear-gradient(to right, transparent, var(--gb-surface) 72%);
  }
}

/* Tabela com rolagem horizontal: seta + fade indicando colunas ocultas
   (surgem em telas menores como notebooks, quando a tabela transborda). */
.gb-table-scroll-wrap {
  position: relative;
}

.gb-table-scroll {
  scrollbar-width: thin;
}

/* Botão de navegação — mesmo visual das setas dos chips de filtro */
.gb-table-nav {
  display: none;
  position: absolute;
  top: 8px;
  z-index: 3;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--gb-border);
  background: var(--gb-surface);
  box-shadow: var(--gb-shadow-sm);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.gb-table-nav:hover  { background: var(--gb-surface-2); }
.gb-table-nav:active { background: var(--gb-surface-2); }

.gb-table-nav::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  border-top: 2px solid var(--gb-text-2);
  border-right: 2px solid var(--gb-text-2);
}

.gb-table-nav-left  { left: 6px; }
.gb-table-nav-right { right: 6px; }
.gb-table-nav-left::before  { transform: translate(-35%, -50%) rotate(-135deg); } /* "<" */
.gb-table-nav-right::before { transform: translate(-65%, -50%) rotate(45deg); }   /* ">" */

/* Setas surgem conforme houver conteúdo para rolar em cada lado */
.gb-table-scroll-wrap.can-left  .gb-table-nav-left  { display: block; }
.gb-table-scroll-wrap.can-right .gb-table-nav-right { display: block; }

/* Fade nas bordas escondendo o corte das colunas */
.gb-table-scroll-wrap.can-left::before,
.gb-table-scroll-wrap.can-right::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 48px;
  z-index: 1;
  pointer-events: none;
}
.gb-table-scroll-wrap.can-left::before {
  left: 0;
  background: linear-gradient(to left, transparent, var(--gb-surface) 78%);
}
.gb-table-scroll-wrap.can-right::after {
  right: 0;
  background: linear-gradient(to right, transparent, var(--gb-surface) 78%);
}

/* Period chip grid — wraps on mobile, inline on desktop */
.gb-period-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Pagination — same chip pattern */
.gb-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.gb-period-grid .scroll-chip {
  /* inherits from scroll-chip */
}

/* ================================================================
   RESOLVE POPOVER
   ================================================================ */
.resolve-wrap { position: relative; display: inline-block; }
.resolve-wrap > summary { list-style: none; cursor: pointer; }
.resolve-wrap > summary::-webkit-details-marker { display: none; }

/* Menu flutuante: position:fixed + coords via JS (escapa do overflow da tabela).
   Fica fora do fluxo/clipping do container, sempre 100% visível. */
.resolve-dropdown {
  position: fixed;
  top: 0; left: 0;              /* substituído inline pelo JS ao abrir */
  z-index: 1065;               /* acima de topbar (1030) e offcanvas (1060) */
  background: var(--gb-surface);
  border: 1px solid var(--gb-border);
  border-radius: var(--gb-radius);
  box-shadow: var(--gb-shadow-lg);
  padding: 8px;
  width: 180px;
  max-width: calc(100vw - 16px);
}

/* Fallback sem JS: âncora ao botão dentro do wrap (recortado, mas usável) */
.no-js .resolve-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: auto; right: 0;
  z-index: 600;
}

.r-btn {
  width: 100%;
  border: none;
  cursor: pointer;
  border-radius: 8px;
  padding: 9px 13px;
  font-size: .8rem;
  font-weight: 600;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all var(--gb-fast) var(--gb-ease);
  font-family: var(--f-sans);
  margin-bottom: 3px;
  letter-spacing: .01em;
}

.r-btn:last-child { margin-bottom: 0; }

.r-btn-green  { background: #D1FAE5; color: #065F46; }
.r-btn-green:hover  { background: var(--gb-green); color: #fff; }
.r-btn-red    { background: #FEE2E2; color: #991B1B; }
.r-btn-red:hover    { background: var(--gb-red); color: #fff; }
.r-btn-void   { background: #F1F5F9; color: #475569; }
.r-btn-void:hover   { background: #64748B; color: #fff; }

[data-gb-theme="dark"] .r-btn-green { background: rgba(22,163,74,.20); color: #4ADE80; }
[data-gb-theme="dark"] .r-btn-red   { background: rgba(220,38,38,.20); color: #FCA5A5; }
[data-gb-theme="dark"] .r-btn-void  { background: rgba(100,116,139,.18); color: #CBD5E1; }

.r-cashout {
  border-top: 1px solid var(--gb-border-soft);
  padding-top: 9px;
  margin-top: 5px;
}

.r-cashout-label {
  font-size: .65rem;
  font-weight: 700;
  color: var(--gb-text-3);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 6px;
}

/* ================================================================
   CHART
   ================================================================ */
.chart-wrap {
  position: relative;
  height: 240px;
  width: 100%;
}

@media (max-width: 767.98px) {
  .chart-wrap { height: 200px; }
}

@media (max-width: 575.98px) {
  .chart-wrap { height: 170px; }
}

/* ================================================================
   AUTH
   ================================================================ */
/* ================================================================
   AUTH — Login / Cadastro / Recuperar
   ================================================================ */

body.auth-page {
  background: #060E1A;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  position: relative;
  overflow-x: hidden;
}

/* ── Subtle background glow ── */
body.auth-page::before {
  content: '';
  position: fixed;
  top: -30%;
  left: 50%;
  transform: translateX(-50%);
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(34,197,94,.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

body.auth-page::after {
  content: '';
  position: fixed;
  bottom: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(59,130,246,.06) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.auth-wrap {
  width: 100%;
  max-width: 420px;
  position: relative;
  z-index: 1;
}

/* ── Brand row ── */
.auth-brand-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 28px;
}

.auth-logo-mark {
  width: 40px; height: 40px;
  background: linear-gradient(135deg, #22C55E, #4ADE80);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1rem;
  box-shadow: 0 4px 16px rgba(34,197,94,.3);
}

.gb-auth-brand {
  font-family: var(--f-head);
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.02em;
}

/* ── Card ── */
.auth-card {
  background: rgba(15,29,50,.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,.35);
}

.auth-card-body {
  padding: 32px 28px;
}

.auth-card-top {
  margin-bottom: 24px;
}

.auth-card h1 {
  font-size: 1.3rem;
  font-weight: 700;
  color: #F1F5F9;
  letter-spacing: -.02em;
  margin: 0 0 4px;
}

.auth-subtitle {
  font-size: .82rem;
  color: #B0B7C3;
  margin: 0;
  line-height: 1.5;
}

/* ── Alerts ── */
.auth-alert {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: .78rem;
  line-height: 1.45;
  padding: 10px 14px;
  border-radius: 10px;
  margin-bottom: 18px;
}

.auth-alert i {
  font-size: .9rem;
  flex-shrink: 0;
  margin-top: .05rem;
}

.auth-alert-danger {
  background: rgba(239,68,68,.12);
  color: #FCA5A5;
  border: 1px solid rgba(239,68,68,.2);
}

.auth-alert-warning {
  background: rgba(245,158,11,.12);
  color: #FCD34D;
  border: 1px solid rgba(245,158,11,.2);
}

/* ── Form ── */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.auth-field {
  margin-bottom: 16px;
}

.auth-label {
  display: block;
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #B0B7C3;
  margin-bottom: 6px;
}

.auth-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.auth-input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: .85rem;
  color: #94A3B8;
  pointer-events: none;
  z-index: 2;
  line-height: 1;
}

.auth-input {
  width: 100%;
  padding: 12px 14px 12px 40px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  color: #F1F5F9;
  font-size: .9rem;
  font-family: var(--f-mono, inherit);
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
  outline: none;
}

textarea.auth-input {
  padding: 12px 14px 12px 40px;
  min-height: 120px;
  resize: vertical;
  line-height: 1.6;
  font-family: var(--f-body, inherit);
}

select.auth-input {
  padding: 12px 36px 12px 40px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2394A3B8' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

select.auth-input option {
  background: #0F1D32;
  color: #F1F5F9;
}

.auth-input::placeholder {
  color: #94A3B8;
}

.auth-input:focus {
  border-color: rgba(34,197,94,.45);
  background: rgba(255,255,255,.06);
  box-shadow: 0 0 0 3px rgba(34,197,94,.1);
}

/* CF7 wrapper não quebra o layout do auth-input-wrap */
.auth-input-wrap .wpcf7-form-control-wrap {
  flex: 1;
  display: block;
}

/* Input sem ícone — remove o espaço do ícone */
.auth-input--no-icon {
  padding-left: 14px !important;
}

/* Ícone alinha no topo quando o campo é textarea */
.auth-input-wrap.has-textarea .auth-input-icon {
  top: 12px;
  transform: none;
}

/* Campo de senha com botão de mostrar/ocultar */
.auth-input--has-toggle {
  padding-right: 44px;
}

.auth-input-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: transparent;
  color: #94A3B8;
  border-radius: 8px;
  cursor: pointer;
  transition: color .15s ease, background .15s ease;
}

.auth-input-toggle:hover,
.auth-input-toggle:focus-visible {
  color: #F1F5F9;
  background: rgba(255,255,255,.06);
  outline: none;
}

/* Toggle de senha em campos Bootstrap (.form-control) — ex.: Meu Perfil */
.gb-input-toggle-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.gb-input--has-toggle {
  padding-right: 42px;
}

.gb-input-toggle {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--gb-text-2);
  border-radius: 8px;
  cursor: pointer;
  transition: color .15s ease, background .15s ease;
}

.gb-input-toggle:hover,
.gb-input-toggle:focus-visible {
  color: var(--gb-text);
  background: rgba(0,0,0,.05);
  outline: none;
}

[data-gb-theme="dark"] .gb-input-toggle:hover,
[data-gb-theme="dark"] .gb-input-toggle:focus-visible {
  background: rgba(255,255,255,.08);
}

.auth-forgot {
  text-align: right;
  margin-bottom: 18px;
  margin-top: -4px;
}

.auth-forgot a {
  font-size: .76rem;
  color: #94A3B8;
  text-decoration: none;
  transition: color .15s ease;
}

.auth-forgot a:hover {
  color: #CBD5E1;
}

/* ── Button ── */
.auth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px 24px;
  background: linear-gradient(135deg, #22C55E, #16A34A);
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: .92rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform .1s ease, box-shadow .15s ease, opacity .15s ease;
  letter-spacing: -.01em;
}

.auth-btn:hover {
  box-shadow: 0 4px 20px rgba(34,197,94,.35);
  transform: translateY(-1px);
}

.auth-btn:active {
  transform: translateY(0);
  opacity: .9;
}

.auth-btn i {
  font-size: .85rem;
  transition: transform .15s ease;
}

.auth-btn:hover i {
  transform: translateX(3px);
}

/* ── Divider ── */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,.08);
}

.auth-divider span {
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #94A3B8;
}

/* ── Footer link ── */
.auth-footer-link {
  text-align: center;
  font-size: .8rem;
  color: #94A3B8;
}

.auth-footer-link a {
  color: #4ADE80;
  text-decoration: none;
  font-weight: 600;
  transition: color .15s ease;
}

.auth-footer-link a:hover {
  color: #22C55E;
}

/* ── Bottom text ── */
.auth-bottom-text {
  text-align: center;
  font-size: .7rem;
  color: #94A3B8;
  margin-top: 24px;
  line-height: 1.4;
}

/* ── Mobile refinements ── */
@media (max-width: 480px) {
  body.auth-page {
    padding: 12px;
    align-items: flex-start;
    padding-top: 60px;
  }

  body.auth-page::before {
    top: -50%;
    width: 350px; height: 350px;
  }

  body.auth-page::after {
    bottom: -30%;
    width: 300px; height: 300px;
  }

  .auth-card-body {
    padding: 24px 18px;
  }

  .auth-brand-row {
    margin-bottom: 22px;
  }

  .auth-logo-mark {
    width: 36px; height: 36px;
    border-radius: 9px;
    font-size: .9rem;
  }

  .gb-auth-brand {
    font-size: .95rem;
  }

  .auth-card h1 {
    font-size: 1.2rem;
  }

  .auth-btn {
    padding: 14px 24px;
    font-size: .9rem;
  }

  .auth-bottom-text {
    margin-top: 20px;
    padding: 0 8px;
  }
}

/* ================================================================
   INFO BOXES
   ================================================================ */
.info-box {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--gb-radius);
  font-size: .84rem;
  margin-bottom: 18px;
  line-height: 1.5;
}

.info-box i { font-size: 1.15rem; flex-shrink: 0; margin-top: .05rem; }

.info-box strong { display: block; font-weight: 700; margin-bottom: 3px; }

.info-box p { margin: 0; opacity: .75; font-size: .8rem; }

.info-box-danger  { background: var(--gb-red-soft);   color: #991B1B; border: 1px solid #FCA5A5; }
.info-box-success { background: var(--gb-green-soft);  color: #15803D; border: 1px solid var(--gb-green-mid); }
.info-box-info    { background: var(--gb-blue-soft);   color: #1E40AF; border: 1px solid #BFDBFE; }

/* Dark mode info boxes */
[data-gb-theme="dark"] .info-box-danger  { color: #FCA5A5; border-color: rgba(220,38,38,.25); }
[data-gb-theme="dark"] .info-box-success { color: #4ADE80; border-color: rgba(22,163,74,.25); }
[data-gb-theme="dark"] .info-box-info    { color: #93C5FD; border-color: rgba(37,99,235,.25); }

/* ================================================================
   EMPTY STATE
   ================================================================ */
.gb-empty {
  padding: 52px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.gb-empty-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--gb-border-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gb-text-3);
  font-size: 1.4rem;
  margin-bottom: 6px;
}

.gb-empty-title {
  font-size: .9rem;
  font-weight: 600;
  color: var(--gb-text);
}

.gb-empty-sub {
  font-size: .8rem;
  color: var(--gb-text-3);
}

/* Dark mode empty state */
[data-gb-theme="dark"] .gb-empty-icon { background: rgba(255,255,255,.04); }

/* ================================================================
   MOBILE BET CARD (apostas + generic listing cards)
   ================================================================ */
.gb-apostas-mobile {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 6px 0;
}

.gb-card-aposta {
  background: var(--gb-surface);
  border: 1px solid var(--gb-border);
  border-radius: var(--gb-radius-lg);
  padding: 18px;
  box-shadow: var(--gb-shadow-xs);
  transition: box-shadow var(--gb-slow) var(--gb-ease);
}

.gb-card-aposta:active {
  box-shadow: var(--gb-shadow);
}

/* Header row */
.gb-card-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--gb-border-soft);
}

.gb-card-evento {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gb-card-evento-nome {
  font-family: var(--f-head);
  font-size: .95rem;
  font-weight: 700;
  color: var(--gb-text);
  line-height: 1.35;
}

.gb-card-evento .tag-mercado { align-self: flex-start; }

.gb-card-evento .tag-padrao-off {
  align-self: flex-start;
  font-size: .68rem;
}

/* Grid */
.gb-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 18px;
  margin-bottom: 14px;
}

.gb-card-cell {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.gb-card-cell-label {
  font-size: .625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--gb-text-3);
}

.gb-card-cell-value {
  font-size: .85rem;
  font-weight: 600;
  color: var(--gb-text);
}

/* Mercado + info row (mobile bet card) */
.gb-aposta-mercado {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.gb-aposta-info {
  font-size: .78rem;
  color: var(--gb-text-2);
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-top: 4px;
}

/* Actions */
.gb-card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--gb-border-soft);
}

.gb-card-actions .btn {
  font-size: .78rem;
  padding: 7px 14px;
  border-radius: 8px;
  font-weight: 500;
}

.gb-card-form-inline { display: inline; }

/* Inline resolve buttons */
.resolve-inline {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border-top: 1px solid var(--gb-border-soft);
}

.resolve-inline .r-btn {
  flex: 1;
  min-width: 70px;
  justify-content: center;
  font-size: .8rem;
}

/* ── Generic mobile list card (used by Bots, Canais, Banca) ── */
.gb-list-mobile {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 6px 0;
}

.gb-list-card {
  background: var(--gb-surface);
  border: 1px solid var(--gb-border);
  border-radius: var(--gb-radius);
  padding: 16px;
  box-shadow: var(--gb-shadow-xs);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  transition: box-shadow var(--gb-fast) var(--gb-ease);
}

.gb-list-card:active {
  box-shadow: var(--gb-shadow);
}

.gb-list-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.gb-list-card-title {
  font-size: .88rem;
  font-weight: 600;
  color: var(--gb-text);
  line-height: 1.3;
}

.gb-list-card-sub {
  font-size: .75rem;
  color: var(--gb-text-3);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.gb-list-card-desc {
  font-size: .78rem;
  color: var(--gb-text-2);
  line-height: 1.45;
  margin-top: 6px;
}

/* ── Bot mobile card ── */
.gb-bot-card { flex-direction: column; align-items: stretch; }

.gb-bot-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.gb-bot-card-top .gb-list-card-title {
  flex: 1;
  min-width: 0;
}

.gb-bot-card-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.gb-bot-card-info {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.gb-bot-card-label {
  font-size: .65rem;
  font-weight: 600;
  color: var(--gb-text-3);
  flex-shrink: 0;
}

.gb-bot-card-desc {
  font-size: .78rem;
  color: var(--gb-text-2);
  line-height: 1.45;
}

.gb-list-card-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.gb-list-card-actions .btn {
  padding: 6px 10px;
  font-size: .75rem;
}

/* ================================================================
   BANCA HERO (compact redesign)
   ================================================================ */
.banca-hero {
  background: linear-gradient(135deg, #0B1525 0%, #132244 100%);
  border-radius: var(--gb-radius-lg);
  padding: 24px 28px;
  border: 1px solid rgba(255,255,255,.06);
  position: relative;
  overflow: hidden;
}

.banca-hero-mes {
  position: absolute;
  top: 18px;
  right: 20px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.75);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
}
.banca-hero-mes i { font-size: .78rem; opacity: .8; }

.banca-hero-label {
  color: rgba(255,255,255,.4);
  font-size: .625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 6px;
}

.banca-hero-valor {
  font-family: var(--f-mono);
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  letter-spacing: -.02em;
}

.banca-hero-sub {
  font-size: .72rem;
  color: rgba(255,255,255,.3);
  margin-top: 8px;
  letter-spacing: .01em;
}

.banca-hero-variation {
  font-weight: 600;
}

.banca-hero-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  justify-content: flex-end;
}

.banca-hero-btn {
  flex: 0 0 auto;
  text-align: center;
  padding: 10px 18px;
  border-radius: 10px;
  text-decoration: none;
  font-size: .8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all var(--gb-fast) var(--gb-ease);
  letter-spacing: .01em;
}

.banca-hero-btn-saque {
  background: rgba(220,38,38,.12);
  border: 1px solid rgba(220,38,38,.2);
  color: #F87171;
}

.banca-hero-btn-saque:hover {
  background: rgba(220,38,38,.2);
  color: #FCA5A5;
}

.banca-hero-btn-deposito {
  background: rgba(22,163,74,.15);
  border: 1px solid rgba(22,163,74,.22);
  color: #4ADE80;
}

.banca-hero-btn-deposito:hover {
  background: rgba(22,163,74,.22);
  color: #6EE7A0;
}

.banca-hero-btn-relatorio {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.6);
}

.banca-hero-btn-relatorio:hover {
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.8);
}

/* ================================================================
   MOBILE NAVIGATION
   ================================================================ */
.gb-bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 1050;
  background: var(--gb-nav-bg);
  border-top: 1px solid rgba(255,255,255,.06);
  height: var(--gb-bottom-nav-h);
  display: none;
}

.gb-bottom-nav-inner {
  display: flex;
  height: 100%;
}

.gb-bottom-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-decoration: none;
  color: rgba(255,255,255,.35);
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .02em;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--gb-fast) var(--gb-ease);
  position: relative;
}

.gb-bottom-nav-item i { font-size: 1.2rem; }

/* "Banca" fica oculto no bottom nav (mobile) — acessível pela sidebar/menu.
   O bottom nav só existe no mobile, então basta ocultar o item aqui. */
.gb-bottom-nav-item--banca { display: none; }

.gb-bottom-nav-item.active {
  color: var(--gb-green);
}

.gb-bottom-nav-item.active::before {
  content: '';
  position: absolute;
  top: 0; left: 25%; right: 25%;
  height: 2px;
  background: var(--gb-green);
  border-radius: 0 0 2px 2px;
}

/* FAB */
.gb-fab {
  position: fixed;
  bottom: var(--gb-fab-bottom);
  right: 18px;
  z-index: 1040;
  background: var(--gb-green);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 14px 22px;
  font-size: .84rem;
  font-weight: 700;
  display: none;
  align-items: center;
  gap: 7px;
  box-shadow: 0 4px 20px rgba(22,163,74,.4);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: all var(--gb-fast) var(--gb-ease);
  letter-spacing: .01em;
}

.gb-fab:hover {
  box-shadow: 0 6px 24px rgba(22,163,74,.5);
  transform: translateY(-1px);
}

.gb-fab:active {
  transform: scale(.96);
}

/* ================================================================
   RESPONSIVE OVERRIDES
   ================================================================ */
@media (max-width: 991.98px) {
  .gb-bottom-nav { display: block; }
  .gb-fab        { display: inline-flex; }
  .gb-main       { padding-bottom: var(--gb-bottom-nav-h); }
  .gb-page       { padding: 16px 16px calc(var(--gb-bottom-nav-h) + 24px); }
  .card-header   { padding: 14px 16px; }
  .card-body     { padding: 16px; }
  .card-body-sm  { padding: 12px 16px; }
  .gb-nav-footer { padding-bottom: calc(var(--gb-bottom-nav-h) + 10px); }
  .page-title    { font-size: 1.45rem; }
  .table-gb tbody td, .table-gb thead th {
    padding: 10px 12px;
    font-size: .8rem;
  }
  .banca-hero    { padding: 20px 22px; }
}

@media (max-width: 767.98px) {
  .page-title    { font-size: 1.35rem; }
  .banca-hero-valor { font-size: 1.6rem; }
  .card-body     { padding: 14px; }

  /* Botão "Editar cadastro" vira apenas o lápis quadrado no mobile */
  .gb-edit-btn {
    width: 34px;
    height: 34px;
    padding: 0;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
  }
  .gb-edit-btn .gb-edit-label { display: none; }
  .gb-edit-btn i { margin: 0; }
}

@media (max-width: 575.98px) {
  .page-title    { font-size: 1.2rem; }
  .table-responsive {
    border-radius: 0;
    margin: 0 -1px;
  }
  .table-gb tbody td, .table-gb thead th {
    padding: 8px 10px;
    font-size: .72rem;
  }
}

/* ================================================================
   INSIGHT CARDS (Inteligência Operacional)
   ================================================================ */
/* ================================================================
   INSIGHTS — Inteligência Operacional
   ================================================================ */

.gb-insights-section {
  margin-bottom: 1.5rem;
}

/* ── Cabeçalho da seção ── */

.gb-insights-section-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 1.25rem;
}

.gb-insights-section-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--gb-green-soft);
  color: var(--gb-green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.gb-insights-eyebrow {
  display: block;
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--gb-text-3);
  margin-bottom: 2px;
}

.gb-insights-heading {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gb-text);
  margin: 0;
  line-height: 1.2;
}

/* ── Carrossel de slides ── */

.gb-insights-carousel .carousel-inner {
  border-radius: var(--gb-radius);
}

.gb-insights-carousel .carousel-item {
  transition: transform .5s ease-in-out;
}

/* ── Card ── */

.gb-insight-card {
  background: var(--gb-surface);
  border: 1px solid var(--gb-border);
  border-radius: var(--gb-radius);
  padding: 16px 20px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--gb-shadow-xs);
  display: flex;
  flex-direction: column;
}

.gb-insight-card::before {
  content: '';
  position: absolute;
  top: 12px; bottom: 12px; left: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
}

.gb-insight-success::before { background: #22C55E; }
.gb-insight-danger::before  { background: var(--gb-red); }
.gb-insight-warning::before { background: var(--gb-amber); }
.gb-insight-info::before    { background: var(--gb-blue); }

.gb-insight-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.gb-insight-icon {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem;
  flex-shrink: 0;
}

.gb-insight-success .gb-insight-icon { background: var(--gb-green-soft);  color: var(--gb-green); }
.gb-insight-danger  .gb-insight-icon { background: var(--gb-red-soft);    color: var(--gb-red); }
.gb-insight-warning .gb-insight-icon { background: var(--gb-amber-soft);  color: var(--gb-amber); }
.gb-insight-info    .gb-insight-icon { background: var(--gb-blue-soft);   color: var(--gb-blue); }

.gb-insight-title {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--gb-text-3);
  flex: 1;
}

.gb-insight-hero {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--gb-text);
  line-height: 1.15;
  letter-spacing: -.03em;
  margin-bottom: 2px;
}

.gb-insight-hero small {
  font-size: .7rem;
  font-weight: 500;
  color: var(--gb-text-3);
  letter-spacing: 0;
  margin-left: 2px;
}

.gb-insight-hero .text-positive { color: var(--gb-green); }
.gb-insight-hero .text-negative { color: var(--gb-red); }

.gb-insight-desc {
  font-size: .78rem;
  color: var(--gb-text-2);
  line-height: 1.5;
  margin-top: 10px;
  flex: 1;
}

/* ── Seções internas do card ── */

.gb-insight-section-label {
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--gb-text-3);
  margin: 0 0 6px;
}

.gb-insight-indicators {
  padding-top: 0px;
  margin-top: 0px;
  border-top: 1px solid var(--gb-border-soft);
}

.gb-insight-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.gb-insight-list li {
  font-size: .72rem;
  color: var(--gb-text-2);
  line-height: 1.4;
  padding-left: 14px;
  position: relative;
}

.gb-insight-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 7px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gb-text-3);
}

.gb-insight-recommendation {
  padding-top: 10px;
  margin-top: 10px;
  border-top: 1px solid var(--gb-border-soft);
}

.gb-insight-recommendation-text {
  font-size: .8rem;
  color: var(--gb-text);
  line-height: 1.55;
  margin: 0;
  font-weight: 500;
}

.gb-insight-recommendation-text::before {
  content: '💡 ';
  font-size: .75rem;
}

/* ================================================================
   PERFORMANCE TABLES (Relatórios — fixed column layout)
   ================================================================ */
.gb-perf-card { max-width: 1100px; }

.gb-perf-table { table-layout: fixed; }

.gb-perf-col-nome { width: 45%; }
.gb-perf-col-num  { width: 12%; }
.gb-perf-col-acerto { width: 13%; }

/* ================================================================
   ENTITY PERFORMANCE CARDS (Bots/Canais/Tipsters — mini-dashboard)
   ================================================================ */
.gb-entity-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0;
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(22,163,74,.05), transparent 60%),
    var(--gb-surface);
  transition: transform var(--gb-slow) var(--gb-ease), box-shadow var(--gb-slow) var(--gb-ease), border-color var(--gb-fast) var(--gb-ease);
}

.gb-entity-card:hover {
  color: inherit;
  transform: translateY(-4px);
  border-color: var(--gb-green-mid);
  box-shadow: 0 12px 28px rgba(22,163,74,.10), 0 4px 10px rgba(0,0,0,.04);
}

/* ── Rodapé "Ver detalhes" ── */
.gb-entity-cta {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--gb-border-soft);
  background: transparent;
  font-size: .78rem;
  font-weight: 700;
  color: var(--gb-text-2);
  transition: color var(--gb-fast) var(--gb-ease), background var(--gb-fast) var(--gb-ease);
}

.gb-entity-cta i { transition: transform var(--gb-fast) var(--gb-ease); }

.gb-entity-card:hover .gb-entity-cta {
  color: var(--gb-green);
  background: var(--gb-green-soft);
}
.gb-entity-card:hover .gb-entity-cta i { transform: translateX(4px); }

/* ── Card destaque: aura verde ambiente ── */
.gb-entity-card.gb-entity-card-destaque {
  border-color: var(--gb-green) !important;
  background:
    radial-gradient(140% 80% at 50% -20%, rgba(22,163,74,.22), transparent 55%),
    var(--gb-surface);
  box-shadow: 0 0 0 1px var(--gb-green-mid), 0 14px 32px rgba(22,163,74,.16);
}
.gb-entity-card.gb-entity-card-destaque:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 0 1px var(--gb-green), 0 20px 40px rgba(22,163,74,.22);
}

.gb-entity-ribbon {
  background: linear-gradient(90deg, var(--gb-green), #12b981);
  color: #fff;
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 8px 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.gb-entity-ribbon i { font-size: .85rem; filter: drop-shadow(0 1px 2px rgba(0,0,0,.15)); }

/* ── Header ── */
.gb-entity-header {
  padding: 16px 20px;
  background: linear-gradient(180deg, var(--gb-surface-2) 0%, transparent 100%);
}
.gb-entity-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
/* Barra de acento verde: dá "vida" ao header (sobretudo no tema claro) sem
   competir com o conteúdo — é o accent da marca, não um indicador de status */
.gb-entity-name {
  position: relative;
  padding-left: 14px;
  min-width: 0;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 1.12rem;
  line-height: 1.3;
  color: var(--gb-text);
  letter-spacing: -.01em;
}
.gb-entity-name::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 1.1em;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--gb-green-lt), var(--gb-green));
}
.gb-entity-header-top .badge { flex-shrink: 0; }
.gb-entity-meta-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding-left: 14px;
  min-width: 0;
  color: var(--gb-text-3);
  font-size: .78rem;
}
.gb-entity-meta-row .gb-text-meta {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gb-entity-meta-label {
  font-size: .78rem;
  color: var(--gb-text-3);
  flex-shrink: 0;
}
/* Header do card em destaque: aura verde condizente com a faixa "Melhor do período" */
.gb-entity-card-destaque .gb-entity-header {
  background: linear-gradient(180deg, var(--gb-green-soft) 0%, transparent 100%);
}

/* ── Divisores mais discretos ── */
.gb-entity-sep {
  border-top: 1px dashed var(--gb-border-soft);
  opacity: .6;
  margin: 0 20px;
}

/* ── Seções ── */
.gb-entity-section { padding: 14px 20px; }
.gb-entity-section-label {
  font-size: .64rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--gb-text-3);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.gb-entity-section-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--gb-border-soft);
}

/* ── Stats: linha limpa (sem "input desativado") ── */
.gb-entity-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.gb-entity-stat {
  background: transparent;
  border-radius: 0;
  padding: 4px 8px;
  text-align: center;
  min-width: 0;
  position: relative;
}
.gb-entity-stat + .gb-entity-stat {
  border-left: 1px solid var(--gb-border-soft);
}
.gb-entity-stat-label {
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--gb-text-3);
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gb-entity-stat-value {
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--gb-text);
  letter-spacing: -.02em;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Hero: Lucro dominante (KPI #1 do sistema) ── */
.gb-entity-stat-hero .gb-entity-stat-value {
  font-family: var(--f-head);
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -.03em;
}
.gb-entity-stat-hero .gb-entity-stat-label {
  font-size: .66rem;
}

/* ── Resultado: pílulas horizontais compactas com barra de proporção ── */
.gb-entity-result-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.gb-entity-result {
  border-radius: var(--gb-radius-sm);
  padding: 14px 12px;
  min-height: 78px;
  overflow: visible;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  position: relative;
  overflow: hidden;
}
.gb-entity-result-green { background: var(--gb-green-soft); border: 1px solid rgba(22,163,74,.18); }
.gb-entity-result-red   { background: var(--gb-red-soft);   border: 1px solid rgba(220,53,69,.18); }

.gb-entity-result-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .64rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  line-height: 1;
  white-space: nowrap;
  overflow: visible;
}
.gb-entity-result-label i { font-size: .9rem; line-height: 1; }
.gb-entity-result-green .gb-entity-result-label,
.gb-entity-result-green .gb-entity-result-value { color: var(--gb-green); }
.gb-entity-result-red .gb-entity-result-label,
.gb-entity-result-red .gb-entity-result-value { color: var(--gb-red); }

.gb-entity-result-value {
  font-family: var(--f-head);
  font-weight: 800;
  font-size: 1.35rem;
  line-height: 1.1;
  letter-spacing: -.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Notebooks (992–1399px) ── */
@media (min-width: 992px) and (max-width: 1399.98px) {
  .gb-entity-header { padding: 14px 16px; }
  .gb-entity-name { font-size: .98rem; }
  .gb-entity-section { padding: 12px 16px; }
  .gb-entity-sep { margin: 0 16px; }
  .gb-entity-stat { padding: 4px 6px; }
  .gb-entity-stat-label,
  .gb-entity-result-label { font-size: .58rem; }
  .gb-entity-stat-value { font-size: .95rem; }
  .gb-entity-stat-hero .gb-entity-stat-value { font-size: 1.35rem; }
  .gb-entity-result-value { font-size: 1.1rem; }
  .gb-entity-result { padding: 8px 10px; }
}

/* ── Mobile ── */
@media (max-width: 575.98px) {
  .gb-entity-header { padding: 14px 16px; }
  .gb-entity-section { padding: 12px 16px; }
  .gb-entity-sep { margin: 0 16px; }
  .gb-entity-stat-hero .gb-entity-stat-value { font-size: 1.55rem; }
}

/* ================================================================
   ENTITY CARDS — Indicadores como 4 quadrados (Financeiros + Operacionais)
   ================================================================ */

/* Cada célula (Lucro, ROI, Acerto, Apostas) vira um quadrado tonalizado
   com borda — deixa de parecer "área branca". Divisor vertical some. */
.gb-entity-section:not(:has(.gb-entity-result-grid)) .gb-entity-stat-grid {
  gap: 8px;
}
.gb-entity-section:not(:has(.gb-entity-result-grid)) .gb-entity-stat {
  background: var(--gb-surface-2);
  border: 1px solid var(--gb-border-soft);
  border-radius: var(--gb-radius-sm);
  padding: 16px 12px;
  min-height: 78px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}
.gb-entity-section:not(:has(.gb-entity-result-grid)) .gb-entity-stat + .gb-entity-stat {
  border-left: 1px solid var(--gb-border-soft);
}

/* Célula Lucro (hero) — tinta conforme resultado, como as pílulas Greens/Reds */
.gb-entity-stat-hero:has(.text-positive) {
  background: var(--gb-green-soft) !important;
  border-color: rgba(22,163,74,.22) !important;
}
.gb-entity-stat-hero:has(.text-negative) {
  background: var(--gb-red-soft) !important;
  border-color: rgba(220,38,38,.22) !important;
}

/* Nunca truncar o valor do Lucro — encolhe a fonte para caber inteiro */
.gb-entity-stat-hero .gb-entity-stat-value {
  overflow: visible;
  text-overflow: clip;
  font-size: clamp(.95rem, 2.6vw, 1.3rem);
}
@media (min-width: 992px) and (max-width: 1399.98px) {
  .gb-entity-stat-hero .gb-entity-stat-value { font-size: clamp(.9rem, 1.2vw, 1.1rem); }
}
.gb-entity-stat-hero .gb-entity-stat-label { font-size: .66rem; }

/* ── KPI consolidado (6 colunas — Bots/Canais/Tipsters): impede que
   label/valor quebrem em 2 linhas quando o card fica estreito. ── */
.gb-kpi-consolidado .kpi-label,
.gb-kpi-consolidado .kpi-value,
.gb-kpi-consolidado .kpi-value-hero {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.gb-kpi-consolidado .kpi-header .kpi-label {
  min-width: 0;
}

/* Grid custom: 5 cards pequenos + Lucro Total maior (último) */
@media (min-width: 992px) {
  .gb-kpi-consolidado {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) 1.7fr;
    gap: 1rem;
    margin-left: 0;
    margin-right: 0;
  }
  .gb-kpi-consolidado > [class*="col-"] {
    width: 100%;
    max-width: 100%;
    flex: unset;
    padding-left: 0;
    padding-right: 0;
  }
}

/* ================================================================
   KPI CONSOLIDADO — Refinamento (Bots/Canais/Tipsters)
   Cada card ganha personalidade: gradiente sutil na cor da métrica,
   ícone maior, valor dominante, halo no hover.
   ================================================================ */
.gb-kpi-consolidado .kpi-card {
  padding: 18px 16px 16px;
  border-radius: 14px;
  background:
    radial-gradient(120% 60% at 50% -20%, rgba(22,163,74,.05), transparent 55%),
    linear-gradient(180deg, var(--gb-surface) 0%, var(--gb-surface-2) 100%);
  transition:
    transform var(--gb-slow) var(--gb-ease),
    box-shadow var(--gb-slow) var(--gb-ease),
    border-color var(--gb-slow) var(--gb-ease);
}
.gb-kpi-consolidado .kpi-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(15,23,42,.08), 0 4px 10px rgba(0,0,0,.04);
}

/* Faixa lateral vira faixa cheia (topo), mais visível */
.gb-kpi-consolidado .kpi-card::before {
  top: 0; bottom: auto; left: 0; right: 0;
  width: auto; height: 3px;
  border-radius: 14px 14px 0 0;
  opacity: .85;
}

/* Header centralizado com ícone maior e "aro" tonalizado */
.gb-kpi-consolidado .kpi-header {
  flex-direction: column;
  gap: 10px;
  min-height: auto;
  margin-bottom: 4px;
}
.gb-kpi-consolidado .kpi-icon {
  width: 40px; height: 40px;
  font-size: 1.15rem;
  border-radius: 12px;
  box-shadow:
    0 0 0 4px color-mix(in srgb, currentColor 10%, transparent),
    inset 0 -2px 0 rgba(0,0,0,.04);
}
.gb-kpi-consolidado .kpi-label {
  font-size: .68rem;
  color: var(--gb-text-2);
}

/* Valor dominante, centralizado */
.gb-kpi-consolidado .kpi-value {
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: -.03em;
  margin-top: 4px;
}

/* Tintas suaves por métrica — dá "cor emocional" a cada card */
.gb-kpi-consolidado .kpi-card:has(.ki-green) {
  background:
    radial-gradient(120% 70% at 50% -20%, rgba(22,163,74,.10), transparent 60%),
    linear-gradient(180deg, var(--gb-surface) 0%, #F0FDF4 100%);
  border-color: rgba(22,163,74,.20);
}
.gb-kpi-consolidado .kpi-card:has(.ki-red) {
  background:
    radial-gradient(120% 70% at 50% -20%, rgba(220,38,38,.10), transparent 60%),
    linear-gradient(180deg, var(--gb-surface) 0%, #FEF2F2 100%);
  border-color: rgba(220,38,38,.20);
}
.gb-kpi-consolidado .kpi-card:has(.ki-blue) {
  background:
    radial-gradient(120% 70% at 50% -20%, rgba(37,99,235,.10), transparent 60%),
    linear-gradient(180deg, var(--gb-surface) 0%, #EFF6FF 100%);
  border-color: rgba(37,99,235,.20);
}
.gb-kpi-consolidado .kpi-card:has(.ki-amber) {
  background:
    radial-gradient(120% 70% at 50% -20%, rgba(217,119,6,.10), transparent 60%),
    linear-gradient(180deg, var(--gb-surface) 0%, #FFFBEB 100%);
  border-color: rgba(217,119,6,.20);
}

/* Hero (Lucro Total) — o card mais desejável, com aura forte */
.gb-kpi-consolidado .kpi-card.kpi-hero {
  border-width: 1.5px;
}
.gb-kpi-consolidado .kpi-card.kpi-hero.kpi-success {
  background:
    radial-gradient(140% 80% at 50% -20%, rgba(22,163,74,.22), transparent 55%),
    linear-gradient(180deg, var(--gb-surface) 0%, #ECFDF5 100%);
  box-shadow: 0 0 0 1px rgba(22,163,74,.25), 0 12px 28px rgba(22,163,74,.10);
}
.gb-kpi-consolidado .kpi-card.kpi-hero.kpi-danger {
  background:
    radial-gradient(140% 80% at 50% -20%, rgba(220,38,38,.20), transparent 55%),
    linear-gradient(180deg, var(--gb-surface) 0%, #FEF2F2 100%);
  box-shadow: 0 0 0 1px rgba(220,38,38,.25), 0 12px 28px rgba(220,38,38,.10);
}
.gb-kpi-consolidado .kpi-card.kpi-hero:hover {
  transform: translateY(-4px);
}
.gb-kpi-consolidado .kpi-card {
  min-width: 0;
  container-type: inline-size;
}
.gb-kpi-consolidado .kpi-value {
  font-size: min(1.3rem, 14cqi);
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.15;
  padding: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  text-align: center;
}
.gb-kpi-consolidado .kpi-card.kpi-hero .kpi-value {
  font-size: min(2rem, 11cqi);
  font-weight: 900;
}

/* Dark mode: tintas em transparência sobre o surface escuro */
[data-gb-theme="dark"] .gb-kpi-consolidado .kpi-card {
  background:
    radial-gradient(120% 60% at 50% -20%, rgba(255,255,255,.03), transparent 55%),
    var(--gb-surface);
}
[data-gb-theme="dark"] .gb-kpi-consolidado .kpi-card:has(.ki-green)  { background: linear-gradient(180deg, var(--gb-surface) 0%, rgba(22,163,74,.08) 100%); }
[data-gb-theme="dark"] .gb-kpi-consolidado .kpi-card:has(.ki-red)    { background: linear-gradient(180deg, var(--gb-surface) 0%, rgba(220,38,38,.08) 100%); }
[data-gb-theme="dark"] .gb-kpi-consolidado .kpi-card:has(.ki-blue)   { background: linear-gradient(180deg, var(--gb-surface) 0%, rgba(37,99,235,.08) 100%); }
[data-gb-theme="dark"] .gb-kpi-consolidado .kpi-card:has(.ki-amber)  { background: linear-gradient(180deg, var(--gb-surface) 0%, rgba(217,119,6,.08) 100%); }
[data-gb-theme="dark"] .gb-kpi-consolidado .kpi-card.kpi-hero.kpi-success {
  background: linear-gradient(180deg, var(--gb-surface) 0%, rgba(22,163,74,.14) 100%);
}
[data-gb-theme="dark"] .gb-kpi-consolidado .kpi-card.kpi-hero.kpi-danger {
  background: linear-gradient(180deg, var(--gb-surface) 0%, rgba(220,38,38,.14) 100%);
}

@media (max-width: 991.98px) {
  .gb-kpi-consolidado .kpi-card { padding: 14px 10px 12px; height: auto; min-height: 128px; }
  .gb-kpi-consolidado .kpi-icon { width: 32px; height: 32px; font-size: .95rem; border-radius: 10px; }
  .gb-kpi-consolidado .kpi-value { font-size: 1.35rem !important; }
  .gb-kpi-consolidado .kpi-card.kpi-hero .kpi-value { font-size: 1.5rem !important; }
}

@media (min-width: 992px) and (max-width: 1399.98px) {
  .gb-kpi-consolidado .kpi-card { padding: 14px 10px; height: auto; min-height: 130px; }
  .gb-kpi-consolidado .kpi-header { gap: 6px; min-height: auto; }
  .gb-kpi-consolidado .kpi-icon { width: 24px; height: 24px; font-size: .8rem; flex-shrink: 0; }
  .gb-kpi-consolidado .kpi-label { font-size: .58rem; }
  .gb-kpi-consolidado .kpi-value,
  .gb-kpi-consolidado .kpi-value-hero { font-size: 1.3rem; }
  .gb-kpi-consolidado .kpi-card.kpi-hero .kpi-value { font-size: 1.45rem; }
  .gb-kpi-consolidado .kpi-icon { width: 34px; height: 34px; font-size: .95rem; }
  .gb-kpi-consolidado .kpi-foot { font-size: .62rem; }
}

@media (max-width: 767.98px) {
  .gb-perf-table { table-layout: auto; }
}

/* Nome truncado (via PHP, mb_substr) — apenas mobile.
   Desktop mostra o nome completo (span com d-none d-md-inline). */

/* ================================================================
   PRINT
   ================================================================ */
@media print {
  .gb-topbar, .gb-sidebar, .td-actions, .btn-pdf,
  .resolve-wrap, .page-header-actions { display: none !important; }
  .gb-main { margin-left: 0 !important; }
}

/* ================================================================
   BOOTSTRAP 5 OFF CANVAS FIXES
   ================================================================ */
.gb-sidebar,
.gb-sidebar.offcanvas,
.gb-sidebar.offcanvas-lg,
.offcanvas-lg.gb-sidebar,
.offcanvas-lg.gb-sidebar.show,
.offcanvas-lg.gb-sidebar.showing,
.gb-sidebar.offcanvas-lg:not(.hidden) {
  --bs-offcanvas-bg: var(--gb-nav-bg) !important;
  --bs-offcanvas-color: rgba(255,255,255,.88) !important;
  background: var(--gb-nav-bg) !important;
  background-color: var(--gb-nav-bg) !important;
  color: rgba(255,255,255,.88) !important;
}

.gb-sidebar .offcanvas-header,
.offcanvas-lg.gb-sidebar .offcanvas-header {
  background: var(--gb-nav-bg) !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  color: #fff !important;
}

.gb-sidebar .offcanvas-header .btn-close,
.offcanvas-lg.gb-sidebar .offcanvas-header .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
  opacity: .6;
}

.gb-sidebar .offcanvas-header .btn-close:hover { opacity: 1; }

.gb-sidebar .offcanvas-body,
.offcanvas-lg.gb-sidebar .offcanvas-body {
  background: var(--gb-nav-bg) !important;
  color: rgba(255,255,255,.88) !important;
  padding: 0 !important;
}

.offcanvas-backdrop {
  background: #000 !important;
  opacity: .5 !important;
}

@media (max-width: 991.98px) {
  body.offcanvas-open,
  body:has(.gb-sidebar.show) { overflow: hidden; }
}

@media (min-width: 992px) {
  .gb-sidebar,
  .gb-sidebar.offcanvas-lg {
    position: fixed !important;
    transform: none !important;
    visibility: visible !important;
    width: var(--gb-nav-w) !important;
    max-width: none !important;
    box-shadow: none !important;
  }
}

/* ================================================================
   ANIMATIONS & MICROINTERACTIONS
   ================================================================ */

/* Smooth page entry */
.gb-page {
  animation: gbFadeIn .35s var(--gb-ease);
}

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

/* Skeleton pulse for loading states */
@keyframes gbPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .4; }
}

.gb-skeleton {
  background: var(--gb-border-soft);
  border-radius: var(--gb-radius);
  animation: gbPulse 1.8s ease-in-out infinite;
}

/* Row highlight (for linked bets) */
@keyframes gbHighlight {
  from { background: var(--gb-green-soft); }
  to   { background: transparent; }
}

tr:target, .gb-card-aposta:target {
  animation: gbHighlight 2s var(--gb-ease);
}

/* Focus ring for accessibility */
:focus-visible {
  outline: 2px solid var(--gb-green);
  outline-offset: 2px;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ================================================================
   LANDING PAGE (migrated from template-landing.php)
   ================================================================ */

/* NAV */
.lp-nav{position:fixed;top:0;left:0;right:0;z-index:999;background:rgba(6,13,26,.96);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.06);}
.lp-nav-inner{max-width:1140px;margin:0 auto;padding:0 24px;height:60px;display:flex;align-items:center;justify-content:space-between;}
.lp-brand{display:flex;align-items:center;gap:9px;text-decoration:none;}
.lp-brand-mark{width:30px;height:30px;border-radius:7px;background:var(--gb-green);display:flex;align-items:center;justify-content:center;}
.lp-brand-name{font-family:var(--f-head);font-weight:800;font-size:.88rem;color:#fff;}

/* Nav button size */
.lp-nav .btn-hp-ghost,
.lp-nav .btn-hp-primary{padding:8px 18px;font-size:.8rem;}

/* HERO */
.lp-hero{background:linear-gradient(150deg,#060d1a 0%,#0d1f38 55%,#060d1a 100%);padding:120px 0 80px;position:relative;overflow:hidden;min-height:100vh;display:flex;align-items:center;}
.lp-hero::before{content:'';position:absolute;top:-200px;right:-200px;width:800px;height:800px;border-radius:50%;background:radial-gradient(circle,rgba(34,197,94,.1) 0%,transparent 65%);pointer-events:none;}
.lp-badge{display:inline-flex;align-items:center;gap:7px;background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.2);color:#86EFAC;font-size:.7rem;font-weight:700;letter-spacing:.04em;padding:5px 14px;border-radius:999px;text-transform:uppercase;}
.hero-headline{font-size:clamp(2rem,5vw,3.4rem);color:#fff;line-height:1.1;letter-spacing:-.025em;}
.hero-headline .hl{color:var(--gb-green-lt);}
.hero-sub{font-size:clamp(.9rem,2vw,1.1rem);color:rgba(255,255,255,.5);line-height:1.7;max-width:560px;}

/* Sections */
.lp-section{padding:88px 0;}
.lp-section-dark{background:#060d1a;padding:88px 0;color:#fff;}
.lp-section-gray{background:var(--gb-bg);padding:88px 0;}

/* Headings */
.sec-eyebrow{font-family:var(--f-mono);font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--gb-green);display:block;margin-bottom:12px;}
.sec-eyebrow.lt{color:var(--gb-green-lt);}
.sec-title{font-size:clamp(1.7rem,3.5vw,2.4rem);color:var(--gb-text);margin-bottom:16px;}
.sec-title.lt{color:#fff;}
.sec-subtitle{font-size:.9rem;color:var(--gb-text-2);line-height:1.7;max-width:600px;margin-bottom:0;}
.sec-subtitle.lt{color:rgba(255,255,255,.45);}

/* Benefits bar — dark bg bridging hero to next section */
.sp-bar{background:#060d1a;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);padding:48px 0;}
.sp-icon{font-size:1.5rem;color:var(--gb-green-lt);margin-bottom:8px;}
.sp-title{font-size:.82rem;font-weight:700;color:#fff;margin-bottom:2px;}
.sp-lbl{font-size:.68rem;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.06em;margin-top:2px;}

/* Pain cards — transmitem urgencia e frustracao */
.pain-card{
  background: var(--gb-surface);
  border: 1px solid var(--gb-border);
  border-radius: var(--gb-radius-lg);
  padding: 32px 26px 28px;
  height: 100%;
  position: relative;
  overflow: hidden;
  transition: transform var(--gb-fast) var(--gb-ease), box-shadow var(--gb-fast) var(--gb-ease), border-color var(--gb-fast) var(--gb-ease);
}
.pain-card::before{
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gb-red), transparent);
  opacity: .6;
}
.pain-card:hover{
  transform: translateY(-4px);
  border-color: rgba(220,38,38,.35);
  box-shadow: 0 14px 32px rgba(220,38,38,.10), 0 4px 10px rgba(0,0,0,.04);
}
.pain-card h3{
  font-family: var(--f-head);
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 14px;
  color: var(--gb-text);
  letter-spacing: -.01em;
  display:flex;
  align-items:center;
  gap:12px;
}
.pain-card h3 i{
  color: var(--gb-red);
  font-size: 1.15rem;
  background: rgba(220,38,38,.10);
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pain-card p{
  font-size: .9rem;
  color: var(--gb-text-2);
  line-height: 1.7;
  margin: 0;
}

/* Feature cards */
.feat-card{background:var(--gb-surface);border:1px solid var(--gb-border);border-radius:var(--gb-radius-lg);padding:28px;height:100%;transition:box-shadow .2s,transform .2s;}
.feat-card:hover{box-shadow:0 8px 28px rgba(0,0,0,.08);transform:translateY(-2px);}
.feat-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0;}
.fi-g{background:var(--gb-green-soft);color:var(--gb-green);} .fi-b{background:var(--gb-blue-soft);color:var(--gb-blue);} .fi-o{background:var(--gb-amber-soft);color:var(--gb-amber);}
.feat-card h3{font-size:.92rem;font-weight:700;margin-bottom:8px;color:var(--gb-text);}
.feat-card p{font-size:.8rem;color:var(--gb-text-2);line-height:1.7;margin:0;}

/* How it works */
.step-card{text-align:center;}
.step-num{width:46px;height:46px;border-radius:50%;background:var(--gb-text);color:#fff;font-family:var(--f-mono);font-weight:700;font-size:1rem;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;}
.step-card h3{font-size:.9rem;font-weight:700;margin-bottom:6px;color:var(--gb-text);}
.step-card p{font-size:.78rem;color:var(--gb-text-2);line-height:1.65;margin:0;}

/* Testimonials */
.test-section{background:#060d1a;padding:88px 0;}
.test-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:var(--gb-radius-lg);padding:26px;height:100%;}
.test-stars{color:#FBBF24;font-size:.85rem;margin-bottom:12px;letter-spacing:2px;}
.test-txt{font-size:.82rem;color:rgba(255,255,255,.6);line-height:1.7;margin-bottom:16px;font-style:italic;}
.t-avatar{width:34px;height:34px;border-radius:50%;background:var(--gb-green);display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:.82rem;flex-shrink:0;}
.t-name{font-size:.8rem;font-weight:600;color:#fff;}
.t-role{font-size:.65rem;color:rgba(255,255,255,.3);}

/* FAQ */
.faq-item{background:var(--gb-surface);border:1px solid var(--gb-border);border-radius:10px;margin-bottom:8px;overflow:hidden;}
.faq-item summary{padding:15px 20px;font-size:.88rem;font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;color:var(--gb-text);}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:'+';font-size:1.1rem;color:var(--gb-text-3);flex-shrink:0;margin-left:12px;}
.faq-item[open] summary::after{content:'\2212';}
.faq-item .faq-body{padding:0 20px 16px;font-size:.82rem;color:var(--gb-text-2);line-height:1.7;}

/* CTA */
.cta-section{background:linear-gradient(135deg,var(--gb-green) 0%,var(--gb-green-dk) 100%);padding:88px 0;text-align:center;}
.cta-section h2{color:#fff;font-size:clamp(1.7rem,3.5vw,2.6rem);margin-bottom:14px;}
.cta-section p{color:rgba(255,255,255,.7);font-size:.95rem;margin-bottom:28px;max-width:560px;margin-left:auto;margin-right:auto;}

/* Buttons */
.btn-hp{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:700;font-size:.95rem;padding:14px 30px;border-radius:10px;transition:all .2s;white-space:nowrap;border:none;cursor:pointer;}
.btn-hp-primary{background:var(--gb-green);color:#fff;}
.btn-hp-primary:hover{background:var(--gb-green-dk);color:#fff;transform:translateY(-1px);box-shadow:0 8px 24px rgba(22,163,74,.35);}
.btn-hp-ghost{background:rgba(255,255,255,.08);color:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.15);}
.btn-hp-ghost:hover{background:rgba(255,255,255,.14);color:#fff;}
.btn-hp-white{background:var(--gb-surface);color:var(--gb-green-dk);}
.btn-hp-white:hover{background:var(--gb-green-soft);color:var(--gb-green-dk);}

/* Trust bar */
.trust-bar{display:flex;flex-wrap:wrap;gap:24px 32px;align-items:center;color:rgba(255,255,255,.18);font-size:.7rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase;}

/* Inline-style replacements */
.lp-hero-img{width:100%;max-width:100%;border-radius:var(--gb-radius-lg);box-shadow:var(--gb-shadow-lg);}
.lp-trust-icon{color:var(--gb-green-lt);margin-right:6px;}
.lp-footer-brand{font-family:var(--f-head);font-weight:800;font-size:.8rem;color:rgba(255,255,255,.45);}

/* Footer */
.lp-footer{background:#060d1a;padding:28px 0;border-top:1px solid rgba(255,255,255,.06);}

/* Responsive */
@media(max-width:991.98px){
  .lp-hero{padding:90px 0 60px;min-height:auto;}
  .hero-sub{max-width:100%;}
  .lp-section,.lp-section-dark,.lp-section-gray,.test-section{padding:64px 0;}
  .cta-section{padding:64px 0;}
  .sp-bar{padding:36px 0;}
}
@media(max-width:575.98px){
  .m-kpis{grid-template-columns:1fr;}
  .btn-hp{width:100%;justify-content:center;}
}

/* Dark mode landing overrides */
[data-gb-theme="dark"] .lp-section{background:var(--gb-bg);}
[data-gb-theme="dark"] .lp-section-gray{background:var(--gb-bg-2);}
[data-gb-theme="dark"] .lp-price-card { background: var(--gb-surface); box-shadow: 0 40px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(22,163,74,.24); }
[data-gb-theme="dark"] .lp-price-trial { background: rgba(22,163,74,.16); color: #86EFAC; }
[data-gb-theme="dark"] .lp-price-trial strong { color: #BBF7D0; }
[data-gb-theme="dark"] .lp-price-groups { border-top-color: var(--gb-border); }
[data-gb-theme="dark"] .lp-price-list li i { background: rgba(22,163,74,.18); box-shadow: inset 0 0 0 1px rgba(22,163,74,.30); }
[data-gb-theme="dark"] .pain-card{background: var(--gb-surface); border-color: var(--gb-border);}
[data-gb-theme="dark"] .pain-card h3 i{background: rgba(220,38,38,.18);}
[data-gb-theme="dark"] .pain-card:hover{border-color: rgba(220,38,38,.45); box-shadow: 0 14px 32px rgba(0,0,0,.5);}
[data-gb-theme="dark"] .feat-card{background:var(--gb-surface);border-color:var(--gb-border);}
[data-gb-theme="dark"] .step-num{background:var(--gb-text);}
[data-gb-theme="dark"] .faq-item{background:var(--gb-surface);border-color:var(--gb-border);}
[data-gb-theme="dark"] .faq-item summary{color:var(--gb-text);}
[data-gb-theme="dark"] .test-card{background:var(--gb-surface);border-color:var(--gb-border);}
[data-gb-theme="dark"] .lp-section.cta-section{background:linear-gradient(135deg, #0B1525 0%, #132244 100%);}

/* ── LANDING PAGE: inline-style cleanup ── */
.lp-brand-mark i { font-size: .8rem; }
.lp-checklist-item { display: flex; align-items: flex-start; gap: 10px; font-size: .84rem; color: var(--gb-text-2); padding: 6px 0; }
.lp-checklist-icon { color: var(--gb-green); flex-shrink: 0; margin-top: 1px; font-size: .9rem; }
.lp-checklist-item.lt { color: rgba(255,255,255,.72); }

/* Inteligência Operacional — cards de exemplo (a UI real do produto sobre a seção escura) */
.lp-insight { background: var(--gb-surface); border: 1px solid var(--gb-border); border-radius: var(--gb-radius); padding: 18px 20px; position: relative; overflow: hidden; box-shadow: 0 12px 32px rgba(0,0,0,.28); }
.lp-insight::before { content:''; position:absolute; top:14px; bottom:14px; left:0; width:3px; border-radius:0 3px 3px 0; }
.lp-insight-good::before { background: var(--gb-green-lt); }
.lp-insight-bad::before  { background: var(--gb-red); }
.lp-insight-head { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.lp-insight-ic { width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1.05rem; flex-shrink:0; }
.lp-insight-ic.good { background: var(--gb-green-soft); color: var(--gb-green); }
.lp-insight-ic.bad  { background: var(--gb-red-soft);   color: var(--gb-red); }
.lp-insight-eyebrow { font-size:.62rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color: var(--gb-text-3); }
.lp-insight-hero { font-family: var(--f-head); font-weight:800; font-size:1.05rem; color: var(--gb-text); line-height:1.25; }
.lp-insight-desc { font-size:.86rem; color: var(--gb-text-2); line-height:1.65; margin:0; }
.lp-insight-desc strong { color: var(--gb-text); }
.lp-insight-note { font-family: var(--f-mono); font-size:.66rem; color: rgba(255,255,255,.35); text-align:center; margin:6px 0 0; }

/* CTA fixo no mobile — encurta a distância até a ação numa página longa */
.lp-sticky-cta { display: none; }
@media (max-width: 767.98px) {
  .lp-sticky-cta {
    display: block;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: linear-gradient(to top, var(--gb-nav-bg) 72%, rgba(11,17,32,0));
  }
  .lp-sticky-cta .btn-hp { width: 100%; justify-content: center; box-shadow: 0 8px 24px rgba(22,163,74,.4); }
  .lp-footer { padding-bottom: 86px; } /* espaço para o CTA fixo não cobrir os links */
}
.cta-eyebrow { color: rgba(255,255,255,.55); }
.cta-sub-text { font-size: .72rem; color: rgba(255,255,255,.35); }
.lp-footer-sep { color: rgba(255,255,255,.2); margin: 0 10px; }
.lp-footer-text { font-size: .7rem; color: rgba(255,255,255,.45); }
.lp-footer-link { font-size: .7rem; color: rgba(255,255,255,.5); text-decoration: none; margin-right: 14px; }
.lp-footer-link:hover { color: rgba(255,255,255,.75); }

/* ================================================================
   LANDING — Blocos novos (autor, tour, pricing, comparativo)
   ================================================================ */

/* Autor / posicionamento humano */
.lp-author-section { background: var(--gb-bg); }
.lp-author-values { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.lp-author-val {
  font-size: .95rem;
  color: var(--gb-text-2);
  max-width: 720px;
  padding: 12px 18px;
  background: var(--gb-surface);
  border: 1px solid var(--gb-border);
  border-left: 3px solid var(--gb-green);
  border-radius: var(--gb-radius-sm);
  text-align: left;
  width: 100%;
}
.lp-author-val i { color: var(--gb-green); margin-right: 6px; }
.lp-author-val strong { color: var(--gb-text); }

/* Carrossel de tour */
.gb-tour-carousel { padding: 0 44px; }
.gb-tour-carousel .carousel-indicators {
  position: relative;
  margin: 0 0 26px 0;
  gap: 6px;
  justify-content: center;
}
.gb-tour-carousel .carousel-indicators button {
  width: 30px; height: 4px;
  border-radius: 4px;
  background: var(--gb-border);
  border: 0; opacity: 1;
  transition: background var(--gb-fast) var(--gb-ease), transform var(--gb-fast) var(--gb-ease);
}
.gb-tour-carousel .carousel-indicators .active {
  background: var(--gb-green);
  transform: scaleX(1.5);
}
.gb-tour-info h3 {
  font-family: var(--f-head);
  font-size: 1.6rem;
  font-weight: 700;
  margin: 8px 0 10px;
  color: var(--gb-text);
  letter-spacing: -.01em;
}
.gb-tour-info p { color: var(--gb-text-2); font-size: .95rem; line-height: 1.7; }
.gb-tour-eyebrow {
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--gb-green);
  background: var(--gb-green-soft);
  padding: 4px 10px;
  border-radius: 999px;
  display: inline-block;
}
.gb-tour-frame {
  background: #1E293B;
  border-radius: 12px;
  padding: 0;
  box-shadow: 0 24px 60px rgba(0,0,0,.22), 0 8px 20px rgba(0,0,0,.12);
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
}
.gb-tour-frame-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: #0F172A;
  border-bottom: 1px solid #1E293B;
}
.gb-tour-frame-bar > span:not(.gb-tour-url) {
  width: 10px; height: 10px; border-radius: 50%;
  background: #475569;
}
.gb-tour-frame-bar > span:nth-child(1) { background: #EF4444; }
.gb-tour-frame-bar > span:nth-child(2) { background: #F59E0B; }
.gb-tour-frame-bar > span:nth-child(3) { background: #10B981; }
.gb-tour-url {
  flex: 1;
  text-align: center;
  font-family: var(--f-mono);
  font-size: .72rem;
  color: #94A3B8;
  background: #0B1120;
  padding: 4px 10px;
  border-radius: 6px;
  max-width: 340px;
  margin: 0 auto;
}
.gb-tour-img {
  display: block;
  width: 100%;
  height: auto;
}
.gb-tour-carousel .carousel-control-prev,
.gb-tour-carousel .carousel-control-next {
  width: 44px;
  opacity: 1;
}
.gb-tour-ctl {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--gb-surface);
  color: var(--gb-text);
  border: 1px solid var(--gb-border);
  box-shadow: var(--gb-shadow-sm);
  font-size: 1.1rem;
  transition: all var(--gb-fast) var(--gb-ease);
}
.gb-tour-ctl:hover { background: var(--gb-green); color: #fff; border-color: var(--gb-green); transform: scale(1.06); }
@media (max-width: 767.98px) {
  .gb-tour-carousel { padding: 0 32px; }
  .gb-tour-info h3 { font-size: 1.35rem; }
  .gb-tour-info { text-align: center; }
  .gb-tour-eyebrow { margin: 0 auto; }
}

/* Pricing */
.lp-pricing-section { background: var(--gb-bg); }
.lp-title-hl { color: var(--gb-green); }
.lp-price-card {
  position: relative;
  background: var(--gb-surface);
  border: 1px solid var(--gb-border);
  border-radius: var(--gb-radius-xl);
  padding: 44px 40px 32px;
  box-shadow:
    0 30px 60px rgba(22,163,74,.10),
    0 12px 24px rgba(0,0,0,.06),
    0 0 0 1px rgba(22,163,74,.10);
  overflow: hidden;
  transition: transform var(--gb-slow) var(--gb-ease), box-shadow var(--gb-slow) var(--gb-ease);
}
.lp-price-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(140% 65% at 50% -15%, rgba(22,163,74,.16), transparent 55%),
    radial-gradient(50% 40% at 100% 100%, rgba(22,163,74,.05), transparent 70%);
  pointer-events: none;
}
.lp-price-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--gb-green) 0%, transparent 30%, transparent 70%, var(--gb-green) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: .5;
}
.lp-price-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 40px 80px rgba(22,163,74,.16),
    0 16px 32px rgba(0,0,0,.08),
    0 0 0 1px rgba(22,163,74,.18);
}

/* Badge topo (no lugar da fita cortada) */
.lp-price-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: linear-gradient(135deg, var(--gb-green), var(--gb-green-dk));
  color: #fff;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  position: absolute;
  top: 20px; left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 8px 18px rgba(22,163,74,.32);
  z-index: 2;
}
.lp-price-badge i { font-size: .9rem; }

.lp-price-header {
  text-align: center;
  margin: 24px 0 32px;
  position: relative;
  z-index: 1;
}
.lp-price-eyebrow {
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--gb-text-3);
  margin-bottom: 16px;
  display: block;
}
.lp-price-hero {
  display: inline-flex;
  align-items: flex-start;
  justify-content: center;
  gap: 14px;
  color: var(--gb-text);
  font-family: var(--f-head);
  line-height: 1;
  letter-spacing: -.04em;
  margin-bottom: 20px;
}
.lp-price-value {
  font-size: 6.8rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--gb-green), #22c55e 60%, var(--gb-green-dk));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: .85;
  letter-spacing: -.05em;
}
.lp-price-cents-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  margin-top: 8px;
  gap: 6px;
}
.lp-price-cents {
  font-size: 2rem;
  font-weight: 800;
  color: var(--gb-green);
  line-height: 1;
}
.lp-price-period {
  font-size: .78rem;
  color: var(--gb-green-dk);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  background: var(--gb-green-soft);
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(22,163,74,.24);
}
.lp-price-trial {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: rgba(22,163,74,.08);
  border: 1px dashed rgba(22,163,74,.32);
  color: var(--gb-text-2);
  border-radius: 999px;
  font-size: .88rem;
  font-weight: 500;
}
.lp-price-trial i { color: var(--gb-green); font-size: 1rem; }

/* Bloco "se quiser continuar" - deixa o R$ 19,90 secundário mas visível */
.lp-price-continues {
  margin-top: 24px;
  padding: 16px 20px;
  background: var(--gb-surface-2);
  border: 1px solid var(--gb-border);
  border-radius: var(--gb-radius);
  position: relative;
  z-index: 1;
}
.lp-price-continues-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.lp-price-continues-label {
  font-size: .78rem;
  color: var(--gb-text-3);
  font-weight: 600;
  flex: 1;
  min-width: 200px;
}
.lp-price-continues-value {
  font-size: .95rem;
  color: var(--gb-text-2);
  font-weight: 500;
}
.lp-price-continues-value strong {
  font-family: var(--f-head);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--gb-text);
  letter-spacing: -.01em;
}
.lp-price-continues-note {
  font-size: .78rem;
  color: var(--gb-text-3);
  display: block;
  margin-top: 2px;
}

/* Grupos de features */
.lp-price-groups {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 32px;
  padding-top: 24px;
  border-top: 1px dashed var(--gb-border);
  position: relative;
  z-index: 1;
}
.lp-price-group-label {
  font-size: .65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--gb-text-3);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.lp-price-group-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--gb-border-soft);
}
.lp-price-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.lp-price-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .9rem;
  color: var(--gb-text);
  line-height: 1.45;
}
.lp-price-list li i {
  color: var(--gb-green);
  background: var(--gb-green-soft);
  width: 22px; height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .82rem;
  flex-shrink: 0;
  margin-top: 1px;
  box-shadow: inset 0 0 0 1px rgba(22,163,74,.14);
}

/* CTA */
.lp-price-cta {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 16px 22px !important;
  margin-top: 28px !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  background: linear-gradient(135deg, var(--gb-green), var(--gb-green-dk)) !important;
  border: 0 !important;
  border-radius: 14px !important;
  box-shadow:
    0 12px 28px rgba(22,163,74,.32),
    inset 0 1px 0 rgba(255,255,255,.15) !important;
  position: relative;
  overflow: hidden;
  transition: transform var(--gb-fast) var(--gb-ease), box-shadow var(--gb-fast) var(--gb-ease);
  z-index: 1;
}
.lp-price-cta::before {
  content: "";
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  transition: left .6s var(--gb-ease);
}
.lp-price-cta:hover {
  transform: translateY(-2px);
  box-shadow:
    0 18px 40px rgba(22,163,74,.42),
    inset 0 1px 0 rgba(255,255,255,.22) !important;
}
.lp-price-cta:hover::before { left: 100%; }
.lp-price-cta-arrow { transition: transform var(--gb-fast) var(--gb-ease); margin-left: 4px; }
.lp-price-cta:hover .lp-price-cta-arrow { transform: translateX(4px); }

.lp-price-note {
  margin-top: 18px;
  text-align: center;
  font-size: .82rem;
  color: var(--gb-text-3);
  position: relative;
  z-index: 1;
}
.lp-price-note i { color: var(--gb-green); margin-right: 4px; }

@media (max-width: 767.98px) {
  .lp-price-card { padding: 44px 22px 24px; }
  .lp-price-value { font-size: 5.2rem; }
  .lp-price-cents { font-size: 1.6rem; }
  .lp-price-period { font-size: .68rem; padding: 3px 8px; }
  .lp-price-groups { grid-template-columns: 1fr; gap: 16px; }
  .lp-price-trial { font-size: .78rem; padding: 8px 14px; flex-wrap: wrap; justify-content: center; text-align: center; }
  .lp-price-cta { padding: 14px 18px !important; font-size: .95rem !important; }
  .lp-price-continues-inner { flex-direction: column; align-items: flex-start; text-align: left; }
  .lp-title-hl { display: block; }
}

/* Comparativo */
.lp-compare-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--gb-surface);
  border: 1px solid var(--gb-border);
  border-radius: var(--gb-radius);
  overflow: hidden;
  font-size: .92rem;
}
.lp-compare-table thead th {
  background: var(--gb-surface-2);
  padding: 16px 14px;
  font-size: .82rem;
  font-weight: 800;
  text-align: center;
  color: var(--gb-text-2);
  text-transform: uppercase;
  letter-spacing: .05em;
  border-bottom: 1px solid var(--gb-border);
}
.lp-compare-table thead th:first-child { text-align: left; }
.lp-compare-table thead th.lp-compare-us {
  background: linear-gradient(180deg, var(--gb-green), var(--gb-green-dk));
  color: #fff;
  position: relative;
}
.lp-compare-table thead th.lp-compare-us::after {
  content: "★";
  display: block;
  font-size: .7rem;
  color: rgba(255,255,255,.7);
  margin-top: 2px;
}
.lp-compare-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--gb-border-soft);
  color: var(--gb-text);
  text-align: center;
  font-size: 1.05rem;
}
.lp-compare-table tbody td:first-child {
  text-align: left;
  font-weight: 600;
  color: var(--gb-text);
  font-size: .92rem;
}
.lp-compare-table tbody tr:last-child td { border-bottom: 0; }
.lp-compare-table tbody tr:hover { background: var(--gb-surface-2); }
.lp-compare-us-cell {
  background: rgba(22,163,74,.05);
  border-left: 1px solid rgba(22,163,74,.15);
  border-right: 1px solid rgba(22,163,74,.15);
}
.lp-comp-yes { color: var(--gb-green); font-weight: 700; }
.lp-comp-no  { color: var(--gb-red);   opacity: .5; }
.lp-comp-partial { color: var(--gb-amber); opacity: .7; }

@media (max-width: 767.98px) {
  .lp-compare-table { font-size: .82rem; }
  .lp-compare-table thead th { padding: 10px 8px; font-size: .7rem; }
  .lp-compare-table tbody td { padding: 10px 8px; font-size: .95rem; }
  .lp-compare-table tbody td:first-child { font-size: .82rem; }
}

/* ================================================================
   APP FOOTER (páginas autenticadas)
   ================================================================ */

.gb-app-footer {
  margin-top: 48px;
  padding: 20px 0;
  border-top: 1px solid var(--gb-border);
  background: transparent;
}

.gb-app-footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.gb-app-footer-brand {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.gb-app-footer-brand span {
  font-size: .78rem;
  font-weight: 700;
  color: var(--gb-text);
  font-family: var(--f-head);
}

.gb-app-footer-brand small {
  font-size: .68rem;
  color: var(--gb-text-2);
}

.gb-app-footer-links {
  display: flex;
  gap: 20px;
}

.gb-app-footer-links a {
  font-size: .74rem;
  color: var(--gb-text-2);
  text-decoration: none;
  transition: color .15s ease;
}

.gb-app-footer-links a:hover {
  color: var(--gb-text);
}

@media (max-width: 576px) {
  .gb-app-footer {
    margin-top: 32px;
    padding: 16px 0;
    padding-bottom: 80px; /* espaço para bottom nav mobile */
  }

  .gb-app-footer-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .gb-app-footer-links {
    gap: 16px;
  }
}

/* ================================================================
   LANDING SUB-PAGES (Sobre, Contato, Privacidade)
   Tema escuro consistente com a landing page.
   ================================================================ */

body.lp-sub-page {
  background: linear-gradient(155deg, #060E1A 0%, #0F1D32 40%, #132444 100%);
  min-height: 100vh;
  color: #E2E8F0;
  font-family: var(--f-body, 'Inter', sans-serif);
}

/* ── Content section ── */
.lp-sub-content {
  padding: 40px 0 80px;
}

.lp-sub-header {
  text-align: center;
  margin-bottom: 40px;
  padding-top: 20px;
}

.lp-sub-header h1 {
  font-size: 2rem;
  font-weight: 800;
  color: #F1F5F9;
  letter-spacing: -.03em;
  margin: 8px 0 8px;
}

.lp-sub-header p {
  font-size: .92rem;
  color: #B0B7C3;
  max-width: 500px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ── Card de conteúdo ── */
.lp-sub-card {
  background: rgba(15,29,50,.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 16px;
  padding: 36px 32px;
  margin-bottom: 20px;
}

.lp-sub-card h2 {
  font-size: 1.2rem;
  font-weight: 700;
  color: #F1F5F9;
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.lp-sub-card h2:first-child { margin-top: 0; }

.lp-sub-card p {
  font-size: .86rem;
  color: #B0B7C3;
  line-height: 1.7;
  margin-bottom: 12px;
}

.lp-sub-card p:last-child { margin-bottom: 0; }

.lp-sub-card ul {
  padding-left: 20px;
  margin-bottom: 12px;
}

.lp-sub-card ul li {
  font-size: .84rem;
  color: #B0B7C3;
  line-height: 1.65;
  margin-bottom: 6px;
}

.lp-sub-card strong {
  color: #E2E8F0;
}

.lp-sub-card a {
  color: #4ADE80;
  text-decoration: none;
  font-weight: 500;
  transition: color .15s ease;
}

.lp-sub-card a:hover {
  color: #22C55E;
}

.lp-sub-card em {
  color: #CBD5E1;
}

/* ── Data da política ── */
.lp-legal-date {
  font-size: .75rem !important;
  color: #94A3B8 !important;
  font-style: italic;
  margin-bottom: 24px !important;
}

/* ── Features (Sobre) ── */
.lp-sub-feature {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border-radius: 10px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.04);
}

.lp-sub-feature i {
  font-size: 1.1rem;
  color: #4ADE80;
  flex-shrink: 0;
  width: 32px; height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(34,197,94,.1);
  border-radius: 8px;
}

.lp-sub-feature strong {
  display: block;
  font-size: .82rem;
  color: #F1F5F9;
  margin-bottom: 2px;
}

.lp-sub-feature p {
  font-size: .76rem;
  color: #94A3B8;
  margin: 0;
  line-height: 1.5;
}

/* ── Contato: info items ── */
.lp-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.lp-contact-item:last-child {
  border-bottom: none;
}

.lp-contact-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: rgba(34,197,94,.1);
  color: #4ADE80;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  flex-shrink: 0;
}

.lp-contact-item strong {
  display: block;
  font-size: .8rem;
  color: #F1F5F9;
  margin-bottom: 1px;
}

.lp-contact-item p {
  font-size: .76rem;
  color: #94A3B8;
  margin: 0;
}

.lp-contact-item a {
  color: #4ADE80;
  text-decoration: none;
  font-weight: 500;
}

.lp-contact-item a:hover { color: #22C55E; }

/* ── Contato: formulário ── */
.lp-form-label {
  display: block;
  font-size: .76rem;
  font-weight: 600;
  color: #CBD5E1;
  margin-bottom: 5px;
}

.lp-form-input {
  width: 100%;
  padding: 11px 14px;
  font-size: .86rem;
  color: #F1F5F9;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.lp-form-input::placeholder {
  color: #94A3B8;
}

.lp-form-input:focus {
  border-color: rgba(34,197,94,.45);
  background: rgba(255,255,255,.06);
  box-shadow: 0 0 0 3px rgba(34,197,94,.1);
}

select.lp-form-input {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2364748B' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

select.lp-form-input option {
  background: #0F1D32;
  color: #F1F5F9;
}

textarea.lp-form-input {
  resize: vertical;
  min-height: 120px;
}

.lp-form-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px 24px;
  background: linear-gradient(135deg, #22C55E, #16A34A);
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: .92rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform .1s ease, box-shadow .15s ease;
  letter-spacing: -.01em;
}

.lp-form-btn:hover {
  box-shadow: 0 4px 20px rgba(34,197,94,.35);
  transform: translateY(-1px);
}

.lp-form-btn:active {
  transform: translateY(0);
}

/* ── CF7 wrapper no tema escuro ── */
.lp-cf7-wrap .wpcf7 label {
  display: block;
  font-size: .76rem;
  font-weight: 600;
  color: #CBD5E1;
  margin-bottom: 5px;
}

.lp-cf7-wrap .wpcf7 input[type="text"],
.lp-cf7-wrap .wpcf7 input[type="email"],
.lp-cf7-wrap .wpcf7 input[type="tel"],
.lp-cf7-wrap .wpcf7 select,
.lp-cf7-wrap .wpcf7 textarea {
  width: 100%;
  padding: 11px 14px;
  font-size: .86rem;
  color: #F1F5F9;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  outline: none;
  margin-bottom: 16px;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.lp-cf7-wrap .wpcf7 input:focus,
.lp-cf7-wrap .wpcf7 select:focus,
.lp-cf7-wrap .wpcf7 textarea:focus {
  border-color: rgba(34,197,94,.45);
  background: rgba(255,255,255,.06);
  box-shadow: 0 0 0 3px rgba(34,197,94,.1);
}

.lp-cf7-wrap .wpcf7 input[type="submit"] {
  width: 100%;
  padding: 13px 24px;
  background: linear-gradient(135deg, #22C55E, #16A34A);
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: .92rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform .1s ease, box-shadow .15s ease;
}

.lp-cf7-wrap .wpcf7 input[type="submit"]:hover {
  box-shadow: 0 4px 20px rgba(34,197,94,.35);
  transform: translateY(-1px);
}

.lp-cf7-wrap .wpcf7-response-output {
  font-size: .8rem;
  padding: 12px 16px;
  border-radius: 10px;
  margin: 16px 0 0;
  border: 1px solid;
  color: #F1F5F9;
}

.lp-cf7-wrap .wpcf7 form.sent .wpcf7-response-output {
  background: rgba(34,197,94,.1);
  border-color: rgba(34,197,94,.3);
  color: #4ADE80;
}

.lp-cf7-wrap .wpcf7 form.invalid .wpcf7-response-output {
  background: rgba(239,68,68,.1);
  border-color: rgba(239,68,68,.3);
  color: #FCA5A5;
}

/* ── Mobile ── */
@media (max-width: 768px) {
  .lp-sub-content {
    padding: 24px 0 60px;
  }

  .lp-sub-header h1 {
    font-size: 1.6rem;
  }

  .lp-sub-header p {
    font-size: .84rem;
  }

  .lp-sub-card {
    padding: 24px 18px;
  }

  .lp-sub-card h2 {
    font-size: 1.1rem;
  }
}

@media (max-width: 480px) {
  .lp-sub-content {
    padding: 16px 0 48px;
  }

  .lp-sub-header {
    margin-bottom: 28px;
  }

  .lp-sub-header h1 {
    font-size: 1.4rem;
  }

  .lp-sub-card {
    padding: 20px 16px;
    border-radius: 12px;
  }
}

/* ================================================================
   BANCA PROMPT — Card de definição da banca do mês
   ================================================================ */

.gb-banca-prompt {
  background: var(--gb-green-soft);
  border: 1.5px solid var(--gb-green-mid);
  border-radius: var(--gb-radius-lg);
  padding: 36px 32px;
  margin-bottom: 1.5rem;
  text-align: center;
}

.gb-banca-prompt-icon {
  width: 56px; height: 56px;
  margin: 0 auto 16px;
  background: var(--gb-green);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: #fff;
  box-shadow: 0 4px 16px rgba(22,163,74,.25);
}

.gb-banca-prompt-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--gb-text);
  margin: 0 0 8px;
  letter-spacing: -.02em;
}

.gb-banca-prompt-desc {
  font-size: .88rem;
  color: var(--gb-text-2);
  line-height: 1.6;
  max-width: 500px;
  margin: 0 auto 24px;
}

.gb-banca-prompt-desc strong {
  color: var(--gb-text);
}

.gb-banca-prompt-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.gb-banca-prompt-ou {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--gb-text-3);
}

.gb-banca-prompt-form {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.gb-banca-prompt-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.gb-banca-prompt-prefix {
  position: absolute;
  left: 14px;
  font-size: .95rem;
  font-weight: 700;
  color: var(--gb-text-2);
  pointer-events: none;
  z-index: 2;
}

.gb-banca-prompt-input {
  width: 160px;
  padding: 13px 16px 13px 36px;
  font-size: 1.05rem;
  font-weight: 700;
  font-family: var(--f-mono);
  text-align: right;
  background: var(--gb-surface);
  border: 2px solid var(--gb-green-mid);
  border-radius: var(--gb-radius);
  color: var(--gb-text);
  outline: none;
  transition: border-color var(--gb-fast) var(--gb-ease), box-shadow var(--gb-fast) var(--gb-ease);
}

.gb-banca-prompt-input:focus {
  border-color: var(--gb-green);
  box-shadow: 0 0 0 4px var(--gb-green-soft);
}

.gb-banca-prompt-input::placeholder {
  color: var(--gb-text-3);
  font-weight: 400;
}

@media (max-width: 576px) {
  .gb-banca-prompt {
    padding: 28px 18px;
  }

  .gb-banca-prompt-title {
    font-size: 1.15rem;
  }

  .gb-banca-prompt-desc {
    font-size: .82rem;
  }

  .gb-banca-prompt-actions {
    flex-direction: column;
    gap: 12px;
  }

  .gb-banca-prompt-form {
    flex-direction: column;
    width: 100%;
  }

  .gb-banca-prompt-input {
    width: 100%;
  }

  .gb-banca-prompt-form .btn {
    width: 100%;
  }
}

/* ================================================================
   PROFILE PAGE
   ================================================================ */

.gb-profile-avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--gb-green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  font-weight: 700;
  color: #fff;
  margin: 0 auto 12px;
}

.gb-profile-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gb-text);
  margin-bottom: 2px;
  font-family: var(--f-head);
}

.gb-profile-email {
  font-size: .8rem;
  color: var(--gb-text-2);
  margin-bottom: 8px;
}

.gb-profile-meta {
  font-size: .7rem;
  color: var(--gb-text-3);
}

.gb-profile-section-title {
  font-size: .88rem;
  font-weight: 700;
  color: var(--gb-text);
  margin-bottom: 4px;
}

.gb-profile-stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--gb-border);
}

.gb-profile-stat:last-child {
  border-bottom: none;
}

.gb-profile-stat-label {
  font-size: .8rem;
  color: var(--gb-text-2);
  display: flex;
  align-items: center;
  gap: 6px;
}

.gb-profile-stat-label i {
  font-size: .75rem;
  color: var(--gb-text-3);
  width: 18px;
  text-align: center;
}

.gb-profile-stat-value {
  font-size: .82rem;
  font-weight: 600;
  color: var(--gb-text);
  font-family: var(--f-mono);
}

/* ================================================================
   ASSINATURA — preço, badges, modal
   ================================================================ */

/* Preço destacado */
.gb-assinatura-preco {
  font-size: 2rem;
  font-weight: 800;
  color: var(--gb-text);
  font-family: var(--f-head);
  line-height: 1.2;
}

.gb-assinatura-preco .gb-text-meta {
  font-size: .9rem;
  font-weight: 500;
}

/* Modal — segue o design system */
.modal-content {
  border: 1px solid var(--gb-border);
  border-radius: var(--gb-radius);
  background: var(--gb-surface);
}

.modal-header {
  border-bottom: 1px solid var(--gb-border);
  padding: 18px 22px;
}

.modal-header .modal-title {
  font-family: var(--f-head);
  font-size: 1rem;
  font-weight: 700;
  color: var(--gb-text);
}

.modal-header .btn-close {
  filter: none;
}

[data-gb-theme="dark"] .modal-header .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

.modal-body {
  padding: 24px 22px;
  color: var(--gb-text);
}

.modal-footer {
  border-top: 1px solid var(--gb-border);
  padding: 14px 22px;
}

[data-gb-theme="dark"] .modal-backdrop.show {
  opacity: .7;
}

/* ================================================================
   HERO DO LUCRO (Nova hierarquia)
   ================================================================ */

.hero-profit-card {
  background: var(--gb-surface);
  border: 1px solid var(--gb-border);
  border-radius: var(--gb-radius-lg);
  padding: 32px 28px;
  margin-bottom: 24px;
  box-shadow: var(--gb-shadow-xs);
  position: relative;
  overflow: hidden;
  transition: box-shadow .2s ease;
}

.hero-profit-card:hover {
  box-shadow: var(--gb-shadow);
}

.hero-profit-card::before {
  content: '';
  position: absolute;
  top: 16px; bottom: 16px; left: 0;
  width: 5px;
  border-radius: 0 4px 4px 0;
  background: var(--gb-border);
  transition: background .2s ease;
}

.hero-profit-positive::before { background: var(--gb-green); }
.hero-profit-negative::before { background: var(--gb-red); }

.hero-profit-grid {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}

.hero-profit-left {
  flex: 1 1 420px;
  min-width: 260px;
}

.hero-profit-right {
  flex: 0 1 auto;
  min-width: 240px;
  display: flex;
  flex-wrap: wrap;
  gap: 24px 40px;
  justify-content: flex-start;
}

.hero-label {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--gb-text-3);
  margin-bottom: 4px;
}

.hero-number {
  font-family: var(--f-mono);
  font-size: 3.2rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.03em;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.hero-number-value {
  white-space: nowrap;
}

.hero-number small {
  font-size: 1rem;
  font-weight: 500;
  color: var(--gb-text-3);
  letter-spacing: 0;
  white-space: nowrap;
}

/* Monitores grandes (24"+): não deixa o número esticar até a borda
   e empurrar ROI/Acerto para longe — limita o crescimento do bloco
   esquerdo a partir daqui, sem afetar notebooks/desktops comuns. */
@media (min-width: 1700px) {
  .hero-profit-left { flex: 0 1 620px; }
}

/* Notebook / tablet intermediário */
@media (max-width: 1200px) {
  .hero-profit-card { padding: 22px 18px; }
  .hero-profit-grid { gap: 16px; }
  .hero-profit-left { flex: 3; min-width: 0; }
  .hero-profit-right { flex: 1.5; min-width: 0; gap: 12px 16px; }
  .hero-number { font-size: 2rem; }
  .hero-number small { font-size: .8rem; }
  .metric-item .value { font-size: 1.1rem; }
  .secondary-stats { gap: 10px 16px; margin-top: 16px; padding-top: 16px; }
}

@media (max-width: 900px) {
  .hero-profit-card { padding: 18px 14px; }
  .hero-profit-grid { flex-direction: column; gap: 14px; }
  .hero-profit-left { min-width: 0; flex: none; }
  .hero-profit-right { min-width: 0; flex: none; flex-direction: row; gap: 20px 32px; }
  .hero-number { font-size: 2rem; }
  .hero-number small { font-size: .8rem; }
  .secondary-stats { flex-direction: column; align-items: flex-start; gap: 8px; }
  .chip-link { margin-left: 0; }
}

@media (max-width: 900px) {
  .hero-number { font-size: 1.8rem; }
  .hero-number small { font-size: .75rem; }
}

.hero-sub-info {
  font-size: .82rem;
  color: var(--gb-text-2);
  margin-top: 8px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.hero-sub-info strong { color: var(--gb-text); font-weight: 600; }
.hero-sub-sep { color: var(--gb-text-3); opacity: .5; }
.hero-delta-wrap { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.hero-delta-caption { color: var(--gb-text-3); }
.hero-vol {
  white-space: nowrap;
  color: var(--gb-text-3);
  font-size: .8rem;
}
.hero-vol strong { color: var(--gb-text-2); font-weight: 600; }

.hero-delta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 500;
  font-size: .88rem;
  font-family: var(--f-sans);
  letter-spacing: 0;
  line-height: 1.2;
}
.hero-delta strong {
  font-family: var(--f-mono);
  font-weight: 700;
  letter-spacing: -.01em;
}
.hero-delta.positive {
  color: var(--gb-green);
  background: var(--gb-green-soft);
  border: 1px solid rgba(22,163,74,.22);
}
.hero-delta.negative {
  color: var(--gb-red);
  background: var(--gb-red-soft);
  border: 1px solid rgba(220,38,38,.22);
}
.hero-delta i { font-size: 1rem; }

/* Sparkline no hero */
.hero-profit-spark {
  flex: 1 1 240px;
  min-width: 180px;
  max-width: 320px;
  align-self: flex-end;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hero-profit-spark svg { display: block; overflow: visible; }
.hero-profit-spark svg path { transition: opacity var(--gb-slow) var(--gb-ease); }
.hero-profit-card:hover .hero-profit-spark svg path[stroke] {
  filter: drop-shadow(0 2px 6px rgba(22,163,74,.35));
}
.hero-spark-label {
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--gb-text-3);
  text-align: right;
}

/* Metric delta (comparativo com mês anterior) */
.metric-delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--f-mono);
  font-size: .72rem;
  font-weight: 700;
  margin-top: 2px;
  letter-spacing: -.01em;
}
.metric-delta.positive { color: var(--gb-green); }
.metric-delta.negative { color: var(--gb-red); }
.metric-delta i { font-size: .85rem; }

@media (max-width: 1200px) {
  .hero-profit-spark { flex: 1 1 180px; max-width: 220px; }
  .hero-spark-label { font-size: .6rem; }
}
@media (max-width: 900px) {
  .hero-profit-spark { display: none; }
}

.metric-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.metric-item .label {
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--gb-text-3);
}
.metric-item .value {
  font-family: var(--f-mono);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--gb-text);
}

.secondary-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--gb-border-soft);
}

.chip-banca {
  background: var(--gb-surface-2);
  border: 1px solid var(--gb-border);
  border-radius: 999px;
  padding: 6px 10px 6px 18px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--gb-text);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.chip-banca i {
  color: var(--gb-text-3);
  font-size: .9rem;
}
.chip-banca .variacao {
  font-size: .72rem;
  font-weight: 700;
  color: var(--gb-green);
  background: var(--gb-green-soft);
  padding: 3px 10px;
  border-radius: 999px;
  margin-left: 2px;
}
.chip-banca .variacao.neg {
  color: var(--gb-red);
  background: var(--gb-red-soft);
}

/* ================================================================
   PAINEL MOBILE — layout exclusivo
   ================================================================ */

.gb-mob-hero {
  background: var(--gb-surface);
  border-radius: var(--gb-radius-lg);
  padding: 20px 16px;
  margin-bottom: 12px;
  border: 1px solid var(--gb-border);
  position: relative;
  overflow: hidden;
}
.gb-mob-hero::before {
  content: '';
  position: absolute;
  top: 12px; bottom: 12px; left: 0;
  width: 4px;
  border-radius: 0 4px 4px 0;
}
.gb-mob-hero-positive::before { background: var(--gb-green); }
.gb-mob-hero-negative::before { background: var(--gb-red); }

.gb-mob-hero-label {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--gb-text-3);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}

.gb-mob-hero-value {
  font-family: var(--f-mono);
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.gb-mob-hero-value small {
  font-size: .9rem;
  font-weight: 500;
  color: var(--gb-text-3);
}

.gb-mob-hero-sub {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: .78rem;
  color: var(--gb-text-2);
  margin-top: 6px;
}
.gb-mob-hero-sub strong { color: var(--gb-text); }

.gb-mob-roi-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  background: var(--gb-green-soft);
  color: var(--gb-green);
  margin-left: auto;
}
.gb-mob-roi-badge.neg {
  background: var(--gb-red-soft);
  color: var(--gb-red);
}

/* Grid de quantidades: Greens, Reds, Total */
.gb-mob-count-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}

.gb-mob-count-card {
  background: var(--gb-surface);
  border: 1px solid var(--gb-border);
  border-radius: var(--gb-radius);
  padding: 14px 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gb-mob-count-icon {
  width: 30px; height: 30px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem;
  margin-bottom: 6px;
}
.gb-mob-count-icon.green { background: var(--gb-green-soft); color: var(--gb-green); }
.gb-mob-count-icon.red   { background: var(--gb-red-soft);   color: var(--gb-red); }
.gb-mob-count-icon.total { background: var(--gb-blue-soft);  color: var(--gb-blue); }

.gb-mob-count-number {
  font-family: var(--f-mono);
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--gb-text);
  line-height: 1.1;
}
.gb-mob-count-label {
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--gb-text-3);
  margin-top: 2px;
}

/* Banca inicial + final do mês (mesmo card, informação secundária) */
.gb-mob-banca-card {
  background: var(--gb-surface);
  border: 1px solid var(--gb-border);
  border-radius: var(--gb-radius);
  padding: 12px 16px;
  display: flex;
  align-items: center;
}

.gb-mob-banca-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}

.gb-mob-banca-item .label {
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--gb-text-3);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.gb-mob-banca-item .label i { font-size: .8rem; }

.gb-mob-banca-item .value {
  font-family: var(--f-mono);
  font-size: .95rem;
  font-weight: 700;
  color: var(--gb-text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.gb-mob-banca-item .value .var {
  font-size: .68rem;
  font-weight: 700;
  color: var(--gb-green);
}
.gb-mob-banca-item .value .var.neg { color: var(--gb-red); }

.gb-mob-banca-divider {
  width: 1px;
  align-self: stretch;
  background: var(--gb-border);
  margin: 0 14px;
}

@media (max-width: 380px) {
  .gb-mob-hero-value { font-size: 2rem; }
  .gb-mob-count-grid { gap: 8px; }
  .gb-mob-count-number { font-size: 1.1rem; }
  .gb-mob-hero { padding: 16px 12px; }
  .gb-mob-banca-card { padding: 10px 12px; }
  .gb-mob-banca-divider { margin: 0 10px; }
  .gb-mob-banca-item .value { font-size: .85rem; }
}

.chip-ops {
  font-size: .8rem;
  color: var(--gb-text-2);
  display: flex;
  align-items: center;
  gap: 12px;
}
.chip-ops .green-dot { color: var(--gb-green); font-weight: 700; }
.chip-ops .red-dot { color: var(--gb-red); font-weight: 700; }

.chip-link {
  font-size: .78rem;
  color: var(--gb-text-3);
  text-decoration: none;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color .15s ease;
}
.chip-link:hover {
  color: var(--gb-text);
}


/* Modal — texto interno usa tokens do tema */
.modal-body .gb-text-meta {
  color: var(--gb-text-3);
}

.modal-body .gb-empty-title {
  color: var(--gb-text);
}

.modal-body .gb-empty-sub {
  color: var(--gb-text-2);
}

/* ================================================================
   AÇÕES DO SISTEMA — Botões padronizados (Editar / Resolver / Excluir)
   ----------------------------------------------------------------
   Substitui o visual outline do Bootstrap por FUNDO SÓLIDO com cores
   semânticas, mantendo exatamente o mesmo markup — a cor é aplicada
   pelo container de ação + ícone (bi-*), sem tocar nos templates.
   Cobre: Apostas, Banca, Gerenciar Bots / Tipsters / Canais
   (desktop e mobile).
       Editar   → azul     (bi-pencil)
       Resolver → verde    (bi-check2-square)
       Excluir  → vermelho (bi-trash3)
       Outras   → neutro (slate) como fallback coerente
   ================================================================ */
:root {
  /* Editar (azul) */
  --gb-act-edit:         var(--gb-blue);           /* #2563EB */
  --gb-act-edit-hover:   #1D4ED8;
  --gb-act-edit-active:  #1E40AF;
  --gb-act-edit-ring:    rgba(37, 99, 235, .32);

  /* Resolver / Confirmar (verde) */
  --gb-act-ok:           var(--gb-green);           /* #16A34A */
  --gb-act-ok-hover:     var(--gb-green-dk);         /* #15803D */
  --gb-act-ok-active:    #166534;
  --gb-act-ok-ring:      rgba(22, 163, 74, .32);

  /* Excluir (vermelho) */
  --gb-act-del:          var(--gb-red);              /* #DC2626 */
  --gb-act-del-hover:    var(--gb-red-dk);           /* #B91C1C */
  --gb-act-del-active:   #991B1B;
  --gb-act-del-ring:     rgba(220, 38, 38, .32);

  /* Pendente / alerta (âmbar) — usado nos chips de filtro */
  --gb-act-amber:        var(--gb-amber);            /* #D97706 */
  --gb-act-amber-hover:  #B45309;
  --gb-act-amber-active: #92400E;
  --gb-act-amber-ring:   rgba(217, 119, 6, .32);

  /* Outras ações (neutro) */
  --gb-act-neutral:        #475569;
  --gb-act-neutral-hover:  #334155;
  --gb-act-neutral-active: #1E293B;
  --gb-act-neutral-ring:   rgba(71, 85, 105, .30);
}

/* ── Base: qualquer .btn (a / button / summary) dentro de uma área de ação ── */
:is(.td-actions, .gb-action-group, .gb-card-actions, .gb-bot-card-actions, .gb-list-card-actions) .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: .8rem;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  /* Fallback neutro — sobrescrito pelas cores semânticas abaixo */
  background-color: var(--gb-act-neutral);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .10);
  transition: background-color var(--gb-fast) var(--gb-ease),
              border-color var(--gb-fast) var(--gb-ease),
              box-shadow var(--gb-fast) var(--gb-ease),
              transform var(--gb-fast) var(--gb-ease);
}
:is(.td-actions, .gb-action-group, .gb-card-actions, .gb-bot-card-actions, .gb-list-card-actions) .btn i {
  font-size: 1rem;
  line-height: 1;
}
:is(.td-actions, .gb-action-group, .gb-card-actions, .gb-bot-card-actions, .gb-list-card-actions) .btn:hover {
  color: #fff;
  background-color: var(--gb-act-neutral-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(15, 23, 42, .16);
}
:is(.td-actions, .gb-action-group, .gb-card-actions, .gb-bot-card-actions, .gb-list-card-actions) .btn:active {
  background-color: var(--gb-act-neutral-active);
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .12);
}
:is(.td-actions, .gb-action-group, .gb-card-actions, .gb-bot-card-actions, .gb-list-card-actions) .btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--gb-act-neutral-ring);
}

/* ── Editar (azul) — botões com ícone de lápis ── */
:is(.td-actions, .gb-action-group, .gb-card-actions, .gb-bot-card-actions, .gb-list-card-actions) .btn:has(.bi-pencil) {
  background-color: var(--gb-act-edit);
}
:is(.td-actions, .gb-action-group, .gb-card-actions, .gb-bot-card-actions, .gb-list-card-actions) .btn:has(.bi-pencil):hover {
  background-color: var(--gb-act-edit-hover);
}
:is(.td-actions, .gb-action-group, .gb-card-actions, .gb-bot-card-actions, .gb-list-card-actions) .btn:has(.bi-pencil):active {
  background-color: var(--gb-act-edit-active);
}
:is(.td-actions, .gb-action-group, .gb-card-actions, .gb-bot-card-actions, .gb-list-card-actions) .btn:has(.bi-pencil):focus-visible {
  box-shadow: 0 0 0 3px var(--gb-act-edit-ring);
}

/* ── Resolver / Confirmar (verde) — ícone de check ── */
:is(.td-actions, .gb-action-group, .gb-card-actions, .gb-bot-card-actions, .gb-list-card-actions) .btn:has(.bi-check2-square) {
  background-color: var(--gb-act-ok);
}
:is(.td-actions, .gb-action-group, .gb-card-actions, .gb-bot-card-actions, .gb-list-card-actions) .btn:has(.bi-check2-square):hover {
  background-color: var(--gb-act-ok-hover);
}
:is(.td-actions, .gb-action-group, .gb-card-actions, .gb-bot-card-actions, .gb-list-card-actions) .btn:has(.bi-check2-square):active {
  background-color: var(--gb-act-ok-active);
}
:is(.td-actions, .gb-action-group, .gb-card-actions, .gb-bot-card-actions, .gb-list-card-actions) .btn:has(.bi-check2-square):focus-visible {
  box-shadow: 0 0 0 3px var(--gb-act-ok-ring);
}

/* ── Excluir (vermelho) — ícone de lixeira ── */
:is(.td-actions, .gb-action-group, .gb-card-actions, .gb-bot-card-actions, .gb-list-card-actions) .btn:has(.bi-trash3) {
  background-color: var(--gb-act-del);
}
:is(.td-actions, .gb-action-group, .gb-card-actions, .gb-bot-card-actions, .gb-list-card-actions) .btn:has(.bi-trash3):hover {
  background-color: var(--gb-act-del-hover);
}
:is(.td-actions, .gb-action-group, .gb-card-actions, .gb-bot-card-actions, .gb-list-card-actions) .btn:has(.bi-trash3):active {
  background-color: var(--gb-act-del-active);
}
:is(.td-actions, .gb-action-group, .gb-card-actions, .gb-bot-card-actions, .gb-list-card-actions) .btn:has(.bi-trash3):focus-visible {
  box-shadow: 0 0 0 3px var(--gb-act-del-ring);
}

/* Reduz o "pulo" no hover para quem prefere menos movimento */
@media (prefers-reduced-motion: reduce) {
  :is(.td-actions, .gb-action-group, .gb-card-actions, .gb-bot-card-actions, .gb-list-card-actions) .btn:hover,
  :is(.td-actions, .gb-action-group, .gb-card-actions, .gb-bot-card-actions, .gb-list-card-actions) .btn:active {
    transform: none;
  }
}