:root {
  --bg-deep: #060810;
  --bg-surface: #0d1117;
  --bg-card: #111827;
  --bg-card2: #161f2e;
  --bg-hover: #1a2436;
  --border: rgba(255, 255, 255, 0.07);
  --border-accent: rgba(0, 255, 136, 0.25);
  --green: #00ff88;
  --green-dim: #00cc6a;
  --green-bg: rgba(0, 255, 136, 0.08);
  --amber: #f59e0b;
  --amber-dim: #d97706;
  --amber-bg: rgba(245, 158, 11, 0.1);
  --red: #ef4444;
  --red-dim: #dc2626;
  --red-bg: rgba(239, 68, 68, 0.1);
  --blue: #3b82f6;
  --blue-dim: #2563eb;
  --blue-bg: rgba(59, 130, 246, 0.1);
  --cyan: #06b6d4;
  --cyan-bg: rgba(6, 182, 212, 0.1);
  --purple: #a78bfa;
  --purple-dim: #7c5cd4;
  --purple-bg: rgba(167, 139, 250, 0.1);
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted: #475569;
  --font-main: "Space Grotesk", sans-serif;
  --font-mono: "JetBrains Mono", monospace;
  --font-display: "Bebas Neue", cursive;
  --radius: 10px;
  --radius-sm: 6px;
  --shadow-glow: 0 0 20px rgba(0, 255, 136, 0.12);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: var(--font-main);
  background: var(--bg-deep);
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
}

/* ── TOPBAR ── */
.topbar {
  display: flex;
  align-items: center;

  padding: 0 16px;
  height: 90px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(12px);
  gap: 12px;
  min-width: 0;
}
.topbar-nav-row {
  display: contents;
}
.logo {
  order: 1;
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: 2px;
  color: var(--green);
  text-shadow: 0 0 24px rgba(0, 255, 136, 0.5);
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  margin-left: 20px;
  margin-right: -10px;
}
.logo span {
  color: var(--text-primary);
}
.topbar-center {
  order: 2;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  margin-left: 10px;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;

  flex: 1 1 auto;
  min-width: 0 !important;

  overflow-x: auto !important;
  overflow-y: hidden;
  scrollbar-width: none;
}
.topbar-center::-webkit-scrollbar {
  display: none;
}
.topbar-block {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 1 auto;
  min-width: 0;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
.topbar-block:hover {
  border-color: rgba(255, 255, 255, 0.18);
}

.topbar-block-1:hover {
  border-color: var(--green-dim);
}
.topbar-block-2 {
  padding: 6px 8px;
}

.topbar-block-2:hover {
  border-color: var(--blue) !important;
}

.topbar-block-1,
.topbar-block-2,
.topbar-block-3 {
  border-color: rgb(85, 80, 105);
  background: rgba(72, 64, 78, 0.35);
}
.topbar-block-3:hover {
  border-color: var(--amber);
}
.topbar-right {
  order: 3;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}
.topbar-actions-right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
#btn-toggle-som {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 13px;
  line-height: 1;
  transition: all 0.2s ease;
  user-select: none;
  white-space: nowrap;
  flex-shrink: 0;
}
#btn-toggle-som:hover {
  border-color: rgba(255, 255, 255, 0.25);
  background: var(--bg-hover);
  color: var(--text-primary);
}
#btn-toggle-som.mutado {
  opacity: 0.55;
  border-color: rgba(239, 68, 68, 0.35);
}
#btn-toggle-som.mutado:hover {
  opacity: 0.85;
  border-color: rgba(239, 68, 68, 0.55);
}
.filter-pill {
  padding: 6px 10px;
  border-radius: 8px;
  font-size: clamp(7px, 0.7vw, 12px);
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-family: var(--font-main);
  transition: all 0.2s;

  box-sizing: border-box;
  min-width: 0;
  flex-shrink: 1;
  white-space: nowrap;
  overflow: hidden;
}
.filter-pill:hover,
.filter-pill.active {
  background: var(--green-bg);
  border-color: var(--border-accent);
  color: var(--green);
}
.contador-feed {
  display: inline-flex;
  flex: 0 0 18px;
  width: 18px;
  min-width: 18px;
  max-width: 18px;
  letter-spacing: 2px;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
  color: #ffffff;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
}

.contador-feed-cheio {
  color: var(--red);
  text-shadow: 0 0 10px rgba(239, 68, 68, 0.7);
  background-color: rgba(239, 68, 68, 0.15);
  font-size: 13px;

  display: inline-flex;
  justify-content: center;
  border: 1px solid rgba(239, 68, 68, 0.5);
  border-radius: 6px;
  width: 25px;
  height: auto;
}

.filter-pill.ht {
  background: var(--bg-surface);
  border-color: var(--border);
  color: var(--text-secondary);
}
.filter-pill.ht:hover,
.filter-pill.ht.active {
  background: var(--red-bg);
  border-color: rgba(239, 68, 68, 0.35);
  color: var(--red);
}
.filter-pill.seg {
  background: transparent;
  border-color: var(--border);
  color: var(--text-secondary);
}
.filter-pill.seg:hover,
.filter-pill.seg.active {
  background: var(--green-bg);
  border-color: var(--border-accent);
  color: var(--green);
}
.filter-pill.tem-fav-perd {
  border-color: var(--red);
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.45);
  animation: none !important;
}
.filter-pill[data-filter="favoritos"]:hover,
.filter-pill[data-filter="favoritos"].active {
  background: rgba(245, 158, 11, 0.15) !important;
  border-color: rgba(245, 158, 11, 0.6) !important;
  color: var(--amber) !important;
}

.filter-pill[data-filter="fila"]:hover,
.filter-pill[data-filter="fila"].active {
  background: rgba(6, 182, 212, 0.15) !important;
  border-color: var(--cyan) !important;
  color: var(--cyan) !important;
}

/* FILA com jogos elegíveis: borda acesa em ciano (sem piscar e sem alterar texto) */
.filter-pill[data-filter="fila"].tem-fav-perd {
  border-color: var(--cyan) !important;
  box-shadow: 0 0 8px rgba(6, 182, 212, 0.55) !important;
  animation: none !important;
}

/* Filtros Radar/Alertas: HOT e FAV-PERD em Amber */
.filter-pill[data-filter="hot"]:hover,
.filter-pill[data-filter="hot"].active,
.filter-pill[data-filter="fav_perd"]:hover,
.filter-pill[data-filter="fav_perd"].active {
  background: rgba(245, 158, 11, 0.15) !important;
  border-color: rgba(245, 158, 11, 0.6) !important;
  color: var(--amber) !important;
}
.filter-pill[data-filter="hot"].active .contador-feed,
.filter-pill[data-filter="fav_perd"].active .contador-feed {
  background: var(--amber) !important;
  color: #031018 !important;
}
/* HOT é o ÚNICO que ainda pisca/pulsa quando há jogo elegível */
.filter-pill[data-filter="hot"].tem-fav-perd {
  border-color: var(--amber) !important;
  color: var(--amber) !important;
  animation: alerta-filtro-amber 1s ease-in-out infinite !important;
}
/* FAV-PERD: apenas acende a borda em amber (sem piscar e sem alterar o texto) */
.filter-pill[data-filter="fav_perd"].tem-fav-perd {
  border-color: var(--amber) !important;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.5) !important;
  animation: none !important;
}

/* =====================================================================
   BALÃOZINHOS DE DEFINIÇÃO DOS FILTROS (TOOLTIP DARK-GLASS FLUTUANTE)
   ===================================================================== */
.golscanner-filter-tooltip {
  position: fixed;
  z-index: 999999;
  max-width: 250px;
  min-width: 190px;
  background: rgba(11, 16, 27, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(245, 158, 11, 0.5);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.75),
    0 0 16px rgba(245, 158, 11, 0.2);
  border-radius: 8px;
  padding: 8px 12px;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition:
    opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0.18s;
  box-sizing: border-box;
}

.golscanner-filter-tooltip.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.filter-tooltip-arrow {
  position: absolute;
  width: 9px;
  height: 9px;
  background: rgba(11, 16, 27, 0.96);
  border-left: 1px solid rgba(245, 158, 11, 0.5);
  border-top: 1px solid rgba(245, 158, 11, 0.5);
  transform: rotate(45deg);
  pointer-events: none;
}

.golscanner-filter-tooltip[data-arrow="top"] .filter-tooltip-arrow {
  top: -5.5px;
}

.golscanner-filter-tooltip[data-arrow="bottom"] .filter-tooltip-arrow {
  bottom: -5.5px;
  border-left: none;
  border-top: none;
  border-right: 1px solid rgba(245, 158, 11, 0.5);
  border-bottom: 1px solid rgba(245, 158, 11, 0.5);
}

.filter-tooltip-title {
  font-family: var(--font-main, sans-serif);
  font-size: 11px;
  font-weight: 800;
  color: #fbbf24;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.filter-tooltip-body {
  font-family: var(--font-main, sans-serif);
  font-size: 11.5px;
  line-height: 1.42;
  color: #f1f5f9;
  font-weight: 500;
  text-align: left;
}

/* Filtros Bloco 2 (Estratégias): Hover e Ativo em Azul */
.topbar-block-2 .filter-pill:hover,
.topbar-block-2 .filter-pill.active {
  background: rgba(59, 130, 246, 0.15) !important;
  border-color: rgba(59, 130, 246, 0.6) !important;
  color: rgb(255, 255, 255, 0.7) !important;
}

/* Botões dos Filtros Custom (CUSTOM 1 e CUSTOM 2): sem border-radius e com borda branca */
.filter-pill[data-filter="gols"],
.filter-pill[data-filter="ht_zero_zero"],
.topbar-block-2 .filter-pill[data-filter="gols"],
.topbar-block-2 .filter-pill[data-filter="ht_zero_zero"] {
  border-color: rgb(255, 255, 255, 0.5);
  color: white;
}

/* Filtros Bloco 2 (Estratégias): quando há jogo elegível, pisca a borda em azul igual ao HOT */
.topbar-block-2 .filter-pill.tem-fav-perd {
  border-color: var(--blue) !important;
  color: #93c5fd !important;
  animation: alerta-filtro-blue 1s ease-in-out infinite !important;
}

/* ─────────────────────────────────────────────────────────────────
   NOTA: Os estilos do Menu, Abas e Configurações foram separados
   e organizados no arquivo dedicado "golscanner_menu.css".
   ───────────────────────────────────────────────────────────────── */

/* Indicador de País no Card do Feed (Bolinha + Sigla em amber) */
.league-country-dot {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--amber);
  margin: 0 6px;
  vertical-align: middle;
  flex-shrink: 0;
  box-shadow: 0 0 3px rgba(245, 158, 11, 0.4);
}

.league-country-code {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 700;
  color: var(--amber);
  letter-spacing: 0.06em;
  display: inline-block;
  vertical-align: middle;
}

.competition-badge .league-country-dot {
  width: 3.5px;
  height: 3.5px;
  margin: 0 4px;
}

.competition-badge .league-country-code {
  font-size: 9px;
  color: var(--amber);
}

.league-country-pill {
  font-family: var(--font-mono, monospace);
  font-size: 9.5px;
  font-weight: 700;
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 1px 4px;
  border-radius: 3px;
  letter-spacing: 0.04em;
  margin-left: 2px;
  vertical-align: middle;
  line-height: 1.1;
  display: inline-block;
}

/* Painel "Jogos em espera" (fila) -- reaproveita .championship-panel /
   .championship-panel-header / .championship-list como container, só
   a linha de cada jogo tem estilo próprio abaixo. */
.queue-list {
  display: grid;
  gap: 2px;
  max-height: 430px;
  overflow-y: auto;
  padding: 10px;
}
.queue-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 34px;
  padding: 6px 8px;
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: 12px;
}
.queue-item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.queue-item-placar {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.queue-item-remover {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
}
.queue-item-remover:hover {
  border-color: rgba(239, 68, 68, 0.45);
  background: var(--red-bg);
  color: var(--red);
}
.championship-state {
  padding: 18px 8px;
  color: var(--text-muted);
  font-size: 12px;
  text-align: center;
}
@keyframes alerta-fav-perd {
  0%,
  100% {
    box-shadow: 0 0 0 rgba(239, 68, 68, 0);
  }
  50% {
    border-color: #fca5a5;
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.9);
  }
}
@keyframes alerta-filtro-amber {
  0%,
  100% {
    box-shadow: 0 0 0 rgba(245, 158, 11, 0);
  }
  50% {
    border-color: #fde68a;
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.9);
  }
}
@keyframes alerta-filtro-blue {
  0%,
  100% {
    box-shadow: 0 0 0 rgba(59, 130, 246, 0);
  }
  50% {
    border-color: #93c5fd;
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.9);
  }
}
.topbar-right {
  display: flex;
  align-items: center;
  gap: 16px;
}
.view-mode-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-hover);
}
.view-mode-button {
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 5px 9px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-family: var(--font-main);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: all 0.2s ease;
}
.view-mode-button:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
}
.view-mode-button[data-view-mode="scanner"].active,
.view-mode-button[data-view-mode="scanner"]:hover {
  background: var(--green-bg);
  border-color: var(--border-accent);
  color: var(--green);
  box-shadow: 0 0 10px rgba(0, 255, 136, 0.2);
}
.view-mode-button[data-view-mode="dashboard"].active,
.view-mode-button[data-view-mode="dashboard"]:hover {
  background: var(--cyan-bg);
  border-color: rgba(6, 182, 212, 0.5);
  color: var(--cyan);
  box-shadow:
    0 0 14px rgba(6, 182, 212, 0.35),
    inset 0 0 6px rgba(6, 182, 212, 0.15);
  text-shadow: 0 0 8px rgba(6, 182, 212, 0.6);
}
.view-mode-button[data-view-mode="scanner"]:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}
.view-mode-button[data-view-mode="dashboard"]:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}
body[data-view-mode="dashboard"] .view-mode-switch {
  border-color: rgba(6, 182, 212, 0.3);
  box-shadow: 0 0 12px rgba(6, 182, 212, 0.12);
}
.days-badge {
  background: var(--green-bg);
  border: 1px solid var(--border-accent);
  color: var(--green);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

/* ── NEON SWITCHES ── */
.switch-item {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
  transition: all 0.25s ease;
}
.switch-item:hover {
  border-color: var(--border-accent);
  background: var(--green-bg);
  box-shadow: 0 0 12px rgba(0, 255, 136, 0.08);
}
.switch-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.switch-ui {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
  border-radius: 8px;
  background: var(--bg-card2);
  border: 1px solid var(--border);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}
.switch-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.switch-icon {
  font-size: 8px;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.switch-text {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  transition: color 0.25s ease;
}

/* LIGAR — verde neon */
.switch-input:checked + .switch-ui {
  background: var(--green-bg);
  border-color: var(--green);
  box-shadow:
    0 0 14px rgba(0, 255, 136, 0.35),
    inset 0 0 6px rgba(0, 255, 136, 0.15);
}
.switch-input:checked + .switch-ui .switch-knob {
  left: 22px;
  background: var(--green);
  box-shadow: 0 0 10px rgba(0, 255, 136, 0.8);
}
.switch-input:checked + .switch-ui .switch-icon {
  opacity: 1;
  color: #04120a;
}
.switch-item:has(.switch-input:checked) .switch-text {
  color: var(--green);
  text-shadow: 0 0 8px rgba(0, 255, 136, 0.5);
}
.switch-item:has(.switch-input:checked) {
  border-color: var(--border-accent);
  background: var(--green-bg);
  box-shadow: 0 0 16px rgba(0, 255, 136, 0.12);
}

/* ── LUZ DE STATUS DO SCRAPER ── */
.luz-status {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;

  background: var(--text-muted);
  transition:
    background 0.3s ease,
    box-shadow 0.3s ease;
}
.luz-status.luz-verde {
  background: var(--green);
  box-shadow: 0 0 6px rgba(0, 255, 136, 0.7);
}
.luz-status.luz-vermelha {
  background: var(--red);
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.7);
}
@keyframes luzStatusFlash {
  0% {
    transform: scale(1);
    filter: brightness(1);
  }
  35% {
    transform: scale(1.7);
    filter: brightness(2);
  }
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}
.luz-status.luz-flash {
  animation: luzStatusFlash 0.6s ease-out;
}

/* ── SELETOR MODO DE VISUALIZAÇÃO DO FEED (OFF | CARDS | MINI) ── */
.feed-view-mode-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-hover);
  transition: all 0.25s ease;
}

.feed-view-btn {
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 5px 10px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-family: var(--font-main);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: all 0.2s ease;
  user-select: none;
}

.feed-view-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
}

/* FEED ativo — verde neon */
.feed-view-btn[data-feed-mode="off"].active,
.feed-view-btn[data-feed-mode="off"]:hover {
  background: var(--green-bg);
  border-color: rgba(0, 255, 136, 0.5);
  color: var(--green);
  box-shadow:
    0 0 14px rgba(0, 255, 136, 0.35),
    inset 0 0 6px rgba(0, 255, 136, 0.15);
  text-shadow: 0 0 8px rgba(0, 255, 136, 0.6);
}

/* CARDS ativo — ciano neon */
.feed-view-btn[data-feed-mode="cards"].active,
.feed-view-btn[data-feed-mode="cards"]:hover {
  background: var(--cyan-bg);
  border-color: rgba(6, 182, 212, 0.5);
  color: var(--cyan);
  box-shadow:
    0 0 14px rgba(6, 182, 212, 0.35),
    inset 0 0 6px rgba(6, 182, 212, 0.15);
  text-shadow: 0 0 8px rgba(6, 182, 212, 0.6);
}

/* MINI ativo — âmbar neon */
.feed-view-btn[data-feed-mode="mini"].active,
.feed-view-btn[data-feed-mode="mini"]:hover {
  background: var(--amber-bg);
  border-color: rgba(245, 158, 11, 0.5);
  color: var(--amber);
  box-shadow:
    0 0 14px rgba(245, 158, 11, 0.35),
    inset 0 0 6px rgba(245, 158, 11, 0.15);
  text-shadow: 0 0 8px rgba(245, 158, 11, 0.6);
}

.feed-view-btn:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}
.user-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-secondary);
}
.user-dot {
  width: 8px;
  height: 8px;
  background: var(--green);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--green);
}

/* ── LAYOUT ── */
.layout {
  display: grid;
  grid-template-columns: 1fr 430px;
  gap: 0;
  height: calc(100vh - 56px);
}
.main-panel {
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.side-panel {
  border-left: 1px solid var(--border);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── CONTROLES QUE NÃO QUEBRAM LINHA (FIXOS) ── */
.switch-item,
.switch-text {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.switch-item {
  display: inline-flex !important;
  align-items: center !important;
}

.switch-text {
  display: inline-flex !important;
  align-items: center !important;
}

/* JOGOS, FILA, DEL e FAVORITOS se mantêm sempre inteiros sem quebrar */
/* .filter-pill[data-filter="todos"] span,
.filter-pill[data-filter="fila"] span,
.filter-pill[data-filter="deletados"] span,
.filter-pill[data-filter="favoritos"] span {
  flex-shrink: 0;
  white-space: nowrap;
} */

/* .filter-pill {
  white-space: nowrap !important;
  flex-shrink: 1;
} */

/* Níveis de abreviação dos filtros */
.pill-full {
  display: inline;
}
.pill-short {
  display: none;
}
.pill-mini {
  display: none;
}

@media (max-width: 1350px) {
  .pill-full {
    display: none !important;
  }
  .pill-short {
    display: inline !important;
  }
  .pill-mini {
    display: none !important;
  }
  .filter-pill {
    padding: 4px 7px !important;
    font-size: 11.5px !important;
  }
}

@media (max-width: 1080px) {
  .pill-full {
    display: none !important;
  }
  .pill-short {
    display: none !important;
  }
  .pill-mini {
    display: inline !important;
  }
  .filter-pill {
    padding: 4px 5px !important;
    font-size: 11px !important;
  }
}

/* ── FILTER BAR ── */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 16px;
  background: var(--bg-card);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.matches-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.empty-state {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-secondary);
  padding: 18px 16px;
  text-align: center;
}
.status-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
}

.status-info {
  color: var(--text-secondary);
  font-size: 12px;
  text-align: center;
  display: block;
}

.streak-button {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  transition: all 0.2s ease;
  padding: 0;
}

.streak-button:hover {
  border-color: var(--border-accent);
  color: var(--green);
  box-shadow: 0 0 10px rgba(0, 255, 136, 0.12);
}

.streak-button:disabled {
  opacity: 0.6;
  cursor: wait;
}

.search-input {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 3px 28px 3px 14px;
  margin-bottom: 10px;
  border-radius: var(--radius-sm);
  font-family: var(--font-main);
  font-size: 13px;
  width: 170px;
  outline: none;
  transition: border-color 0.2s;
}
.search-input:focus {
  border-color: var(--green-dim);
}
.search-input::placeholder {
  color: var(--text-muted);
}
.search-input-wrapper {
  position: relative;
  display: inline-block;
}
.search-clear {
  position: absolute;
  right: 6px;
  top: 44%;
  transform: translateY(-65%);
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.2s,
    color 0.2s;
}
.search-clear.visible {
  opacity: 0.8;
  pointer-events: auto;
}
.search-clear:hover {
  opacity: 1;
  color: var(--text-primary);
}
.time-range-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.range-val {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: #6b8abd;
  min-width: 24px;
  text-align: center;
}
.range-slider {
  position: relative;
  width: 110px;
  height: 16px;
  display: flex;
  align-items: center;
}
.range-track {
  position: absolute;
  width: 100%;
  height: 3px;
  background: #1a2744;
  border-radius: 2px;
}
.range-fill {
  position: absolute;
  height: 3px;
  background: #2d5a9e;
  border-radius: 2px;
}
.range-input {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  width: 100%;
  height: 16px;
  background: transparent;
  pointer-events: none;
  margin: 0;
  outline: none;
  z-index: 2;
}
.range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #3b7ddd;
  border: 2px solid #0f1a2e;
  cursor: pointer;
  transition: background 0.2s;
}
.range-input::-webkit-slider-thumb:hover {
  background: #5a9cf5;
}
.range-input::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #3b7ddd;
  border: 2px solid #0f1a2e;
  cursor: pointer;
  transition: background 0.2s;
}
.range-input::-moz-range-thumb:hover {
  background: #5a9cf5;
}
.col-header {
  font-size: clamp(10px, 0.72vw, 12px);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  cursor: pointer;
  user-select: none;
  transition: color 0.2s;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
}
.col-header:hover {
  color: var(--green);
}
.col-header.active {
  color: var(--green);
}
.col-header-partida,
.col-header[data-sort-key="tempo_jogo"] {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  padding: 4px clamp(2px, 0.35vw, 6px);
  font-size: clamp(10px, 0.72vw, 12px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.score-filter-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
}
.score-filter-trigger {
  width: 100%;
  padding: 4px clamp(2px, 0.35vw, 6px);
  font-size: clamp(10px, 0.72vw, 12px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}
.score-filter-trigger:hover,
.score-filter-trigger.active {
  color: var(--red);
  border-color: rgba(239, 68, 68, 0.35);
  background: var(--red-bg);
}
.score-filter-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 70px;
  width: 70px;
  padding: 10px 8px;
  border-radius: 12px;
  background: var(--bg-card2);
  border: 1px solid var(--border);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.32);
  display: grid;
  gap: 8px;
  z-index: 30;
}

#score-filter-panel[hidden] {
  display: none !important;
}
.score-filter-option {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-primary);
  font-size: 12px;
  cursor: pointer;
}
.score-filter-option input {
  accent-color: var(--red);
  width: 13px;
  height: 13px;
}
.sort-icon {
  opacity: 0.5;
  margin-left: 2px;
}

/* ── MATCH CARD ── */
.match-card {
  background: var(--bg-card);
  border: 1px solid rgba(0, 255, 136, 0.35);
  box-shadow: var(--shadow-glow);
  border-radius: var(--radius);
  overflow: hidden;
  transition: all 0.25s;
  position: relative;
  container-name: match-card;
  container-type: inline-size;
}
.match-card:hover {
  border-color: rgba(0, 255, 136, 0.55);
  background: var(--bg-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-glow);
}
.match-card.favorite {
  border-color: rgba(245, 158, 11, 0.7);
  box-shadow:
    0 0 0 1px rgba(245, 158, 11, 0.2),
    0 0 22px rgba(245, 158, 11, 0.18);
}
.match-card.favorite:hover {
  border-color: rgba(245, 158, 11, 0.9);
}
.match-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--green);
  transition: background 0.2s;
}
.match-card.favorite::before {
  background: var(--amber);
}
.match-card.live-hot::before {
  background: var(--amber);
}
.match-card.deletado {
  border-color: rgba(239, 68, 68, 0.6);
  box-shadow:
    0 0 0 1px rgba(239, 68, 68, 0.15),
    0 0 18px rgba(239, 68, 68, 0.12);
}
.match-card.deletado:hover {
  border-color: rgba(239, 68, 68, 0.9);
}
.match-card.deletado::before {
  background: var(--red);
}
.match-card.deletado .act-btn[data-role],
.suggestion-card.deletado
  .suggestion-card-btn:not([data-role="excluir-jogo-card"]) {
  pointer-events: none;
  opacity: 0.25;
  cursor: not-allowed;
}

.match-card.deletado .act-btn:not([data-role]):hover,
.match-card.deletado .act-btn:not([data-role]):focus-visible {
  color: var(--green);
  border-color: rgba(0, 255, 136, 0.5);
  background: rgba(0, 255, 136, 0.12);
  box-shadow: 0 0 12px rgba(0, 255, 136, 0.18);
}

/* Cards no filtro FILA: borda cyan e indicador lateral cyan */
.match-card.fila,
.suggestion-card.fila {
  border-color: rgba(6, 182, 212, 0.7);
  box-shadow:
    0 0 0 1px rgba(6, 182, 212, 0.2),
    0 0 18px rgba(6, 182, 212, 0.15);
}
.match-card.fila:hover,
.suggestion-card.fila:hover {
  border-color: rgba(6, 182, 212, 0.95);
}
.match-card.fila::before {
  background: var(--cyan);
}

/* Nos cards em FILA, desabilita os botões popup e cardlateral */
.match-card.fila .act-btn[data-role="link-externo"],
.match-card.fila .act-btn[data-role="gerar-card"],
.suggestion-card.fila .suggestion-card-btn[data-role="abrir-popup-fechar"] {
  pointer-events: none;
  opacity: 0.25;
  cursor: not-allowed;
}

.card-inner {
  padding: 10px 16px;
}
.card-top {
  display: flex;
  align-items: center;
  gap: 12px;
}
.card-actions {
  width: 12.5%;
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  grid-template-rows: auto auto auto;
  gap: 5px;
  align-items: center;
}
.competition-row {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  margin-bottom: 2px;
}
.competition-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 4px 8px;
  border-radius: 5px;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: var(--amber);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.act-btn {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  transition: all 0.2s;
}
.act-btn:hover {
  color: var(--amber);
  border-color: rgba(245, 158, 11, 0.3);
}
.act-btn.active {
  color: var(--amber);
  border-color: rgba(245, 158, 11, 0.7);
  background: rgba(245, 158, 11, 0.12);
  box-shadow:
    0 0 0 1px rgba(245, 158, 11, 0.2),
    0 0 10px rgba(245, 158, 11, 0.18);
}
.act-btn.fav {
  color: var(--amber);
}
.act-btn.fav.active,
.act-btn.active {
  color: var(--amber);
  border-color: rgba(245, 158, 11, 0.7);
  background: rgba(245, 158, 11, 0.12);
  box-shadow:
    0 0 0 1px rgba(245, 158, 11, 0.2),
    0 0 10px rgba(245, 158, 11, 0.18);
}
.teams-block {
  flex: 1;
  padding-left: 0;
}
.team-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0;
}
.team-name {
  display: flex;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  width: 90px;
  flex-shrink: 0;
  text-align: start;
}
.team-score {
  display: flex;
  background-color: rgb(255, 255, 255, 0.8);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: black;
  margin-left: 8px;
  box-sizing: border-box;
  flex-shrink: 0;
  min-width: 20px;
  justify-content: center;
  border-radius: 7px;
  border: 2px solid grey;
  padding: 0 10px;
  box-shadow: inset 0 0 8px rgba(14, 13, 13, 0.5);
}

.teamAway-badge {
  width: 35px;
  height: 20px;
  border-radius: 5px;
  background: rgba(6, 182, 212, 0.16);
  border: 1px solid rgba(6, 182, 212, 0.5);
  box-shadow: 0 0 5px rgba(6, 182, 212, 0.25);
  transition:
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  letter-spacing: 0.5px;
  color: #fff;
}
.teamHome-badge {
  width: 35px;
  height: 20px;
  border-radius: 5px;
  background: rgba(167, 139, 250, 0.16);
  border: 1px solid rgba(167, 139, 250, 0.5);
  box-shadow: 0 0 5px rgba(167, 139, 250, 0.25);
  transition:
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #fff;
  letter-spacing: 0.5px;
}
.teamHome-badge.vencendo {
  background: #6244b9;
  border-color: #c4b5fd;
  box-shadow: 0 0 14px rgba(167, 139, 250, 0.95);
}
.teamAway-badge.vencendo {
  background: #06b6d4;
  border-color: #67e8f9;
  box-shadow: 0 0 14px rgba(6, 182, 212, 0.95);
}

.teamHome-badge,
.teamAway-badge {
  box-sizing: border-box;
  white-space: nowrap;
}

.teamHome-badge.has-odd,
.teamAway-badge.has-odd {
  font-family: var(--font-main), var(--font-mono), sans-serif;
  font-size: 9.5px;

  color: #ffffff !important;
}

.teamHome-badge.is-favorito,
.teamAway-badge.is-favorito {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: normal;
  color: #ffffff !important;
}

/* Pulse no badge quando o time tem 5+ scouts acesos */
@keyframes badge-pulse {
  0%,
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.02);
    filter: brightness(1.25);
  }
}
.teamHome-badge.badge-pulsando,
.teamAway-badge.badge-pulsando,
.intensity-team-badge.badge-pulsando {
  animation: badge-pulse 0.8s ease-in-out infinite;
}
.teamHome-badge.badge-pulsando {
  box-shadow: 0 0 18px rgba(167, 139, 250, 1);
  border-color: #e9d5ff;
}
.teamAway-badge.badge-pulsando {
  box-shadow: 0 0 18px rgba(6, 182, 212, 1);
  border-color: #a5f3fc;
}
.intensity-team-badge.vencendo.casa {
  background: #6244b9;
  border-color: #c4b5fd;
  box-shadow: 0 0 14px rgba(167, 139, 250, 0.95);
}
.intensity-team-badge.vencendo.fora {
  background: #06b6d4;
  border-color: #67e8f9;
  box-shadow: 0 0 14px rgba(6, 182, 212, 0.95);
}
.intensity-team-badge.badge-pulsando.casa {
  box-shadow: 0 0 18px rgba(167, 139, 250, 1);
  border-color: #e9d5ff;
}
.intensity-team-badge.badge-pulsando.fora {
  box-shadow: 0 0 18px rgba(6, 182, 212, 1);
  border-color: #a5f3fc;
}

.time-bubble {
  grid-row: span 2;

  background: var(--bg-surface);
  border: 1px solid var(--border-accent);
  border-radius: 8px;
  padding: 6px 6px;
  text-align: center;
  min-width: 50px;
  container-name: time-bubble;
  container-type: inline-size;
}
.time-val {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--green);
  text-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
  line-height: 1;
}

.time-val.gol-destaque,
.score-time.gol-destaque,
.compact-info-tempo.gol-destaque {
  color: var(--red) !important;
  text-shadow: 0 0 10px rgba(239, 68, 68, 0.7) !important;
  font-weight: 700;
}

.compact-info-tempo.gol-destaque {
  font-weight: 900;
}

.time-val.ft,
.score-time.ft,
.compact-info-tempo.ft {
  color: var(--red) !important;
  text-shadow: 0 0 10px rgba(239, 68, 68, 0.7) !important;
  font-weight: 700;
}

.team-score.scout-alterado,
.stat-val.scout-alterado {
  color: var(--red);
}

.stat-val.card-v-ativo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  background: rgb(255, 0, 0, 0.8);

  border-radius: 4px;
  color: #fff;
  font-weight: 500;
  box-shadow: inset 0 0 8px rgba(214, 209, 209, 0.5);
}

.stat-val.scout-casa-ativo {
  display: inline-flex;
  justify-content: center;
  border: 1px solid white;
  background-color: var(--purple-bg);
  border-radius: 6px;
  width: 25px;
  height: auto;
  color: var(--purple);
  text-shadow: 0 0 10px rgba(167, 139, 250, 0.7);
  font-weight: 800;
}

.stat-val.scout-fora-ativo {
  display: inline-flex;
  justify-content: center;
  background-color: var(--cyan-bg);
  border: 1px solid white;
  border-radius: 6px;
  width: 25px;
  height: auto;
  color: var(--cyan);
  text-shadow: 0 0 10px rgba(6, 182, 212, 0.7);
  font-weight: 800;
}

/* Quando scout está alterado E ativo pela comparação, vermelho tem prioridade total */
.stat-val.scout-alterado.scout-casa-ativo {
  color: var(--red) !important;
  text-shadow: 0 0 10px rgba(239, 68, 68, 0.7) !important;
  background-color: rgba(239, 68, 68, 0.15) !important;
  border-color: rgba(239, 68, 68, 0.5) !important;
}

.stat-val.scout-alterado.scout-fora-ativo {
  color: var(--red) !important;
  text-shadow: 0 0 10px rgba(239, 68, 68, 0.7) !important;
  background-color: rgba(239, 68, 68, 0.15) !important;
  border-color: rgba(239, 68, 68, 0.5) !important;
}
.time-label {
  font-size: 9px;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  margin-top: 2px;
  white-space: nowrap !important;
}

.time-label .status-rest {
  display: inline;
}

@container time-bubble (max-width: 65px) {
  .time-label .status-rest {
    display: none !important;
  }
}

@container (max-width: 65px) {
  .time-label .status-rest {
    display: none !important;
  }
}

@container match-card (max-width: 1100px) {
  .time-label .status-rest {
    display: none !important;
  }
}
.pontinhos {
  display: inline-flex;
  gap: 2px;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.pontinhos span {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--text-secondary);
  opacity: 0;
  animation: pontinhos-aparecer 3s ease-in-out infinite;
}
.pontinhos span:nth-child(1) {
  animation-delay: 0s;
}
.pontinhos span:nth-child(2) {
  animation-delay: 1s;
}
.pontinhos span:nth-child(3) {
  animation-delay: 2s;
}
@keyframes pontinhos-aparecer {
  0%,
  100% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
}
.time-tug {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 2px;
  font-size: 11px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.tug-label {
  color: var(--text-muted);
  font-weight: 600;
}
.tug-val {
  font-size: 13px;
  color: var(--amber);
  font-weight: 700;

  text-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
}
.tug-val.tug-desconhecido {
  color: var(--red);
  text-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
}

.stats-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2px;
  margin-left: 1%;
}
.stats-row div {
  display: inline;
  width: 10%;
}

.stat-cell {
  text-align: center;
}
.stat-val {
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-mono);
  color: var(--text-primary);
}
.stat-val.highlight {
  color: var(--green);
}
.stat-val.warn {
  color: var(--amber);
}
.stat-val.ips-alto,
.stat-val.exg-alto {
  color: var(--amber);
  text-shadow: 0 0 7px rgba(247, 225, 104, 0.7);
}
.stat-val.muted {
  color: var(--text-muted);
}
.stat-label {
  font-size: 9px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

.stat-divider {
  width: 1px;
  background: var(--border);
  margin: 0 auto;
}

.vs-line {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  width: 100%;
  margin: 2px 0;
}

.vs-badge-spacer {
  width: 30px;
  flex-shrink: 0;
}

.vs-team-label {
  width: 90px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: start;
  padding-left: 15px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.vs-score-label {
  width: 46px;
  box-sizing: border-box;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.vs-stats-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  margin-bottom: 2px;
}

.vs-stats-row .stat-label {
  width: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 9px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0;
  margin: 0;
}

.vs-text {
  font-size: 10px;
  color: var(--text-muted);
}

/* ── MINI BAR CHART ── */
.mini-bar {
  display: flex;
  align-items: flex-end;
  gap: 1px;
  height: 20px;
}
.mini-bar-col {
  width: 3px;
  border-radius: 1px;
  transition: height 0.3s;
}
.bar-home {
  background: var(--green);
}
.bar-away {
  background: var(--cyan);
}

/* ── SIDE PANEL ── */
.side-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-surface);
  position: sticky;
  top: 0;
  z-index: 10;
  min-height: 54px;
}
.fila-controles {
  display: flex;
  align-items: center;
  gap: 10px;
}
.side-user-title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-main);
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  text-transform: uppercase;
  user-select: none;
  white-space: nowrap;
  pointer-events: none;
}
.side-user-title-icon {
  font-size: 13px;
  color: var(--cyan);
}
.btn-atualizar-fila {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-family: var(--font-main);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.btn-atualizar-fila:hover {
  border-color: var(--green);
  color: var(--amber);
}
.btn-atualizar-fila:disabled {
  opacity: 0.6;
  cursor: default;
}
.icone-atualizar {
  display: inline-block;
  font-size: 11px;
  line-height: 1;
}
.btn-atualizar-fila.atualizando .icone-atualizar {
  animation: girar-icone-fila 0.8s linear infinite;
}
@keyframes girar-icone-fila {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MONITOR DE JOGOS AO VIVO & MODAL DE TELEMETRIA DO SISTEMA
   (Será removido ao final do projeto)
   ═══════════════════════════════════════════════════════════════════════════ */
.btn-monitor-sistema {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  background: rgba(6, 182, 212, 0.1);
  border: 1px solid rgba(6, 182, 212, 0.35);
  border-radius: 6px;
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  user-select: none;
}
.btn-monitor-sistema:hover {
  background: rgba(6, 182, 212, 0.2);
  border-color: var(--cyan);
  box-shadow: 0 0 10px rgba(6, 182, 212, 0.35);
}
.monitor-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
  animation: pulse-live-dot 1.5s infinite;
}
@keyframes pulse-live-dot {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.35;
    transform: scale(0.85);
  }
}
.monitor-live-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}
.monitor-live-count {
  font-size: 13px;
  font-weight: 800;
  color: var(--cyan);
}

.telemetria-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 15, 29, 0.85);
  backdrop-filter: blur(5px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}
.telemetria-modal-card {
  width: 100%;
  max-width: 580px;
  max-height: 88vh;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.75);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.telemetria-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: rgba(15, 23, 42, 0.9);
  border-bottom: 1px solid var(--border);
}
.telemetria-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.telemetria-header-left h3 {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.1em;
  font-weight: 800;
  color: var(--text-primary);
  text-transform: uppercase;
}
.telemetria-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
}
.telemetria-close-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: 6px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
}
.telemetria-close-btn:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: var(--red);
  color: #fff;
}
.telemetria-modal-body {
  padding: 18px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.telemetria-kpis-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
.telemetria-kpi-box {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: center;
}
.telemetria-kpi-rotulo {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  text-transform: uppercase;
}
.telemetria-kpi-val {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--text-primary);
}
.telemetria-kpi-val.live {
  color: var(--green);
  text-shadow: 0 0 10px rgba(0, 255, 136, 0.35);
}
.telemetria-kpi-val.pico {
  color: var(--amber);
  text-shadow: 0 0 10px rgba(245, 158, 11, 0.35);
}
.telemetria-kpi-sub {
  font-size: 10px;
  color: var(--text-muted);
}
.telemetria-secao-titulo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.telemetria-secao-titulo h4 {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
}
.telemetria-secao-desc {
  font-size: 10px;
  color: var(--text-muted);
}
.telemetria-tabela-wrap {
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 8px;
}
.telemetria-tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
.telemetria-tabela th {
  background: rgba(15, 23, 42, 0.8);
  padding: 7px 10px;
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.telemetria-tabela td {
  padding: 7px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-family: var(--font-mono);
  color: var(--text-secondary);
}
.telemetria-tabela tr:last-child td {
  border-bottom: none;
}
.telemetria-tabela tr:hover td {
  background: rgba(255, 255, 255, 0.02);
}
.telemetria-picos-log-lista {
  max-height: 140px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px;
  background: rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.telemetria-log-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 8px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
}
.telemetria-log-item-vazio {
  padding: 10px;
  text-align: center;
  color: var(--text-muted);
  font-size: 11px;
}

.side-clear-btn {
  margin-left: auto;
  grid-column: 3;
  justify-self: end;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  border: 1px solid gray;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  transition: all 0.2s;
  flex-shrink: 0;
}
.side-clear-btn:hover {
  color: var(--red);
  border-color: rgba(239, 68, 68, 0.4);
  background: var(--red-bg);
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.2);
}
.side-clear-btn:active {
  transform: scale(0.92);
}

.favoritos-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 12px 20px;
}

.popup-card-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1200;
}

.popup-card-window {
  position: absolute;
  width: min(390px, calc(100vw - 32px));
  background: rgba(11, 17, 29, 0.96);
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 12px;
  box-shadow: 0 18px 42px rgba(2, 6, 23, 0.6);
  overflow: hidden;
  pointer-events: auto;
  backdrop-filter: blur(8px);
}

.popup-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(15, 23, 42, 0.9);
  border-bottom: 1px solid var(--border);
  cursor: move;
  user-select: none;
}

.popup-card-title {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 700;
}

.popup-card-close {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(15, 23, 42, 0.9);
  color: var(--text-primary);
  cursor: pointer;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.popup-card-body {
  padding: 12px;
  max-height: 72vh;
  overflow: auto;
  background: rgba(15, 23, 42, 0.72);
}

.favorite-empty {
  padding: 20px 16px;
  color: var(--text-muted);
  font-size: 12px;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  margin: 12px;
}

.suggestion-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-surface);
  padding: 16px 14px;
  transition: background 0.2s;
}
.suggestion-card:hover {
  background: var(--bg-hover);
}

.league-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 11px;
  font-weight: 600;
  color: var(--amber);
  text-transform: uppercase;
  letter-spacing: 0.08em;

  width: 100%;
  flex-wrap: wrap;
  text-align: center;
}
.filtro-elegivel-tag {
  color: #ef4444;
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.league-dot {
  display: none;
}

.status-dots {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
}
.sdot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.sdot.green {
  background: var(--green);
  box-shadow: 0 0 8px rgba(0, 255, 136, 0.6);
}
.sdot.amber {
  background: var(--amber);
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.6);
}
.sdot.grey {
  background: var(--text-muted);
}

.match-score-display {
  display: flex;
  flex-direction: column;
  row-gap: 8px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px 14px;
  margin-bottom: 14px;
}

.score-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.team-side {
  flex: 1;
}
.team-side.right {
  text-align: right;
}
.team-side-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.team-side.right .team-side-name-row {
  justify-content: flex-end;
}
.team-side-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0;
}
.team-red-card-badge {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.7);
  flex-shrink: 0;
}
.team-side-odds {
  display: flex;
  justify-content: flex-start;
  margin-top: 4px;
}
.team-side-odds.right-odds {
  justify-content: flex-end;
}
.mini-odd-box {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  min-width: 64px;
  text-align: center;
  display: inline-block;
  box-sizing: border-box;
  transition:
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

/* Contornos em roxo (Casa) e ciano (Fora) - apenas contorno, sem cor de fundo */
.mini-odd-box.casa {
  border: 1px solid rgba(167, 139, 250, 0.5);
  box-shadow: 0 0 5px rgba(167, 139, 250, 0.2);
}

.mini-odd-box.fora {
  border: 1px solid rgba(6, 182, 212, 0.5);
  box-shadow: 0 0 5px rgba(6, 182, 212, 0.2);
}

/* Efeito: Acender a borda do mostrador de odd quando está vencendo (apenas contorno) */
.mini-odd-box.casa.vencendo {
  border-color: #c4b5fd;
  box-shadow: 0 0 14px rgba(167, 139, 250, 0.95);
}

.mini-odd-box.fora.vencendo {
  border-color: #67e8f9;
  box-shadow: 0 0 14px rgba(6, 182, 212, 0.95);
}

.mini-odd-box.casa.vencendo .mini-odd-label {
  color: #c4b5fd;
  font-weight: 700;
}

.mini-odd-box.fora.vencendo .mini-odd-label {
  color: #67e8f9;
  font-weight: 700;
}

.mini-odd-box.vencendo .mini-odd-val {
  color: #ffffff;
}

/* Efeito: Pulsar quando atingir as regras de pulsar (5+ scouts e não vencendo) */
.mini-odd-box.badge-pulsando {
  animation: badge-pulse 0.8s ease-in-out infinite;
}

.mini-odd-box.casa.badge-pulsando {
  box-shadow: 0 0 18px rgba(167, 139, 250, 1);
  border-color: #e9d5ff;
}

.mini-odd-box.fora.badge-pulsando {
  box-shadow: 0 0 18px rgba(6, 182, 212, 1);
  border-color: #a5f3fc;
}

.mini-odd-label {
  font-size: 9px;
  color: var(--text-muted);
  margin-bottom: 2px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: color 180ms ease;
}
.mini-odd-val {
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--text-primary);
  transition: color 180ms ease;
}
.mini-odd-val.odd-baixa {
  color: var(--red);
  text-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
}
.score-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0 16px;
}
.score-big {
  font-family: var(--font-display);
  font-size: 34px;
  color: var(--text-primary);
  line-height: 1;
  letter-spacing: 4px;
}
.score-time {
  font-size: 15px;
  color: var(--green);
  font-family: var(--font-mono);
  font-weight: 500;
}
.score-tug {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.score-tug-label {
  color: var(--text-muted, #94a3b8);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.score-tug-val {
  font-size: 11.5px;
  color: var(--amber, #f59e0b);
  font-weight: 700;
  text-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
}
.score-tug-val.tug-desconhecido,
.score-tug-val.desconhecido {
  color: var(--red, #ef4444);
  text-shadow: 0 0 8px rgba(239, 68, 68, 0.4);
}

/* momentum bars */
.momentum-row {
  margin-bottom: 14px;
}
.momentum-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.momentum-bar {
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}
.momentum-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(
    90deg,
    var(--green) 0%,
    rgba(0, 255, 136, 0.4) 100%
  );
  transition: width 0.6s ease;
}
.momentum-fill.away {
  position: absolute;
  right: 0;
  background: linear-gradient(
    270deg,
    var(--cyan) 0%,
    rgba(6, 182, 212, 0.4) 100%
  );
}

/* odds row */
.odds-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 6px;
  margin-bottom: 14px;
}
.odd-box {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
}
.odd-box:hover {
  border-color: var(--border-accent);
  background: var(--green-bg);
}
.odd-box.highlight-odd {
  border-color: var(--border-accent);
  background: var(--green-bg);
}
.odd-label {
  font-size: 10px;
  color: var(--text-muted);
  margin-bottom: 3px;
}
.odd-val {
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--text-primary);
}
.odd-box.highlight-odd .odd-val {
  color: var(--green);
}

/* suggestion footer */
.sug-footer {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 8px;
}
.sug-stat {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 5px 5px;
  text-align: center;
  transition: all 0.2s ease;
}
.sug-stat-val {
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--green);
}
.sug-stat-val.red {
  color: var(--red);
}

/* Badges acesos no card lateral */
.sug-stat.pre-live-ativo {
  background: rgba(0, 255, 136, 0.15);
  border-color: rgba(0, 255, 136, 0.6);
  box-shadow: 0 0 10px rgba(0, 255, 136, 0.3);
}
.sug-stat.pre-live-ativo .sug-stat-val {
  color: var(--green);
  text-shadow: 0 0 8px rgba(0, 255, 136, 0.6);
  font-weight: 800;
}
.sug-stat.hot-ativo {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.6);
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.3);
}
.sug-stat.hot-ativo .sug-stat-val {
  color: var(--red);
  text-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
  font-weight: 800;
}
.sug-stat.exg-ativo {
  background: rgba(6, 182, 212, 0.15);
  border-color: rgba(6, 182, 212, 0.6);
  box-shadow: 0 0 10px rgba(6, 182, 212, 0.3);
}
.sug-stat.exg-ativo .sug-stat-val {
  color: var(--cyan);
  text-shadow: 0 0 8px rgba(6, 182, 212, 0.6);
  font-weight: 800;
}
.sug-stat.liga-ativo {
  background: rgba(59, 130, 246, 0.16);
  border-color: rgba(59, 130, 246, 0.7);
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.3);
}
.sug-stat.liga-ativo .sug-stat-val {
  color: #60a5fa;
  text-shadow: 0 0 8px rgba(59, 130, 246, 0.7);
  font-weight: 800;
}

.entry-suggestion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--green-bg);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-bottom: 14px;
}
.entry-label {
  font-size: 11px;
  color: var(--green-dim);
}
.entry-val {
  font-size: 15px;
  font-weight: 700;
  color: var(--green);
}

/* ── GRÁFICO DE INTENSIDADE (roxo/cyan, 46 barras) ── */
.intensity-chart {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}
.intensity-team {
  display: flex;
  flex-direction: column;
}
.intensity-team-name {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.intensity-bars-area {
  height: 90px;
  display: flex;
  min-height: 0;
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius-sm);
  position: relative;
}
.intensity-bars-area::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 1px dashed rgba(255, 255, 255, 0.15);
  pointer-events: none;
}
.intensity-bars-area.casa {
  background: linear-gradient(
    to top,
    var(--bg-deep) 0%,
    rgba(124, 92, 212, 0.18) 100%
  );
}
.intensity-bars-area.fora {
  background: linear-gradient(
    to top,
    var(--bg-deep) 0%,
    rgba(6, 182, 212, 0.14) 100%
  );
}
.intensity-bar-slot {
  flex: 1;
  display: flex;
  align-items: flex-end;
}
.intensity-bar {
  width: 100%;

  border-right: 1px solid var(--bg-deep);
  opacity: 0;
  transform: scaleY(0.3);
  transform-origin: bottom;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}
.intensity-bar.visivel {
  opacity: 1;
  transform: scaleY(1);
}
.intensity-bar.piscando {
  animation: intensity-pisca 1s ease-in-out 5;
}
@keyframes intensity-pisca {
  0%,
  100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.6);
  }
}
.intensity-gap-ht {
  width: 6px;
  flex-shrink: 0;
  background: var(--bg-deep);
}
.intensity-eixo-tempo {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: var(--text-muted);
  padding-top: 3px;
  padding-right: 3.8%;
  border-top: 1px solid var(--border);
}
.eixo-tempo-2t {
  padding-left: 6%;
}

/* momentum chart canvas */
.momentum-chart-wrap {
  position: relative;
  margin-bottom: 14px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-surface);
}
.momentum-chart-wrap canvas {
  display: block;
  width: 100%;
  height: 72px;
}
.momentum-chart-labels {
  display: flex;
  justify-content: space-between;
  padding: 3px 6px 0;
  margin-bottom: 6px;
}
.mc-label {
  font-size: 10px;
  font-weight: 600;
}
.mc-label.home {
  color: var(--green);
}
.mc-label.away {
  color: var(--cyan);
}

/* scrollbar */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 255, 136, 0.3);
}

/* ── LIVE TICKER ── */
.live-ticker {
  background: linear-gradient(90deg, var(--green-bg), transparent);
  border-bottom: 1px solid var(--border-accent);
  padding: 6px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
}
.ticker-live-badge,
.ticker-live {
  color: var(--green);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.ticker-live-dot {
  color: var(--green);
  font-size: 10px;
  line-height: 1;
  animation: pulse-live-dot 1.5s infinite;
}
.ticker-live-text {
  font-size: 12px;
  text-shadow: 0 0 8px rgba(0, 255, 136, 0.35);
  line-height: 1;
}
.ticker-track {
  position: relative;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  /* Máscara: os jogos desaparecem gradualmente antes de encontrar o badge à esquerda */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0px,
    black 30px,
    black calc(100% - 25px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0px,
    black 30px,
    black calc(100% - 25px),
    transparent 100%
  );
}
.ticker-scroll {
  display: flex;
  align-items: center;
  gap: 24px;
  white-space: nowrap;
  will-change: transform;
  font-size: 12px;
}
.live-ticker:hover .ticker-scroll,
.ticker-track:hover .ticker-scroll,
.ticker-scroll:hover {
  animation-play-state: paused !important;
}
@keyframes tickerSlide {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}
.ticker-item {
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}
.ticker-score {
  color: var(--green);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 12px;
}
.ticker-score-red {
  color: var(--red) !important;
  text-shadow: 0 0 8px rgba(239, 68, 68, 0.7);
  font-weight: 700;
  font-size: 12px;
}
.ticker-sep {
  color: var(--text-muted);
  font-size: 12px;
}

/* ── PULSE ANIMATION ── */
@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}
.pulse {
  animation: pulse 2s ease-in-out infinite;
}

.match-card {
  animation: none;
}

.tag {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 4px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.tag.live {
  background: rgba(239, 68, 68, 0.15);
  color: var(--red);
  border: 1px solid rgba(239, 68, 68, 0.25);
}
.tag.fulltime {
  background: rgba(148, 163, 184, 0.15);
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.3);
}
.tag.ht {
  background: var(--amber-bg);
  color: var(--amber);
  border: 1px solid rgba(245, 158, 11, 0.3);
}
.tag.tendencia-25 {
  background: rgba(34, 197, 94, 0.15);
  color: var(--green);
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.badge-gols {
  font-size: 12px;
  font-weight: 700;
  padding: 2px 3px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap !important;
}

.badge-gols.badge-gols-inactive {
  background: rgba(100, 116, 139, 0.12);
  color: #64748b;
  border: 1px solid rgba(100, 116, 139, 0.3);
}

.badge-gols.badge-gols-active {
  background: rgba(245, 158, 11, 0.2);
  color: var(--amber);
  border: 1px solid rgba(245, 158, 11, 0.5);
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.3);
  font-weight: 800;
}

.badge-gols.badge-gols-odd-verde {
  background: rgba(34, 197, 94, 0.2);
  color: var(--green);
  border: 1px solid rgba(34, 197, 94, 0.6);
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.35);
  font-weight: 800;
}

.badge-gols.badge-gols-odd-amarelo {
  background: rgba(245, 158, 11, 0.2);
  color: var(--amber);
  border: 1px solid rgba(245, 158, 11, 0.6);
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.35);
  font-weight: 800;
}

.badge-gols.badge-gols-double-confirmed {
  background: rgba(0, 255, 136, 0.2);
  color: var(--green);
  border: 1px solid rgba(0, 255, 136, 0.55);
  box-shadow: 0 0 8px rgba(0, 255, 136, 0.35);
  font-weight: 800;
}

.badge-hot {
  font-size: 12px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: rgba(100, 116, 139, 0.12);
  color: #64748b;
  border: 1px solid rgba(100, 116, 139, 0.3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap !important;
  filter: grayscale(100%);
}

.badge-emoji {
  display: inline;
}

/* Remove os foguinhos e as bolinhas em vez de quebrar linha */
.stats-row .stat-cell:last-child {
  display: inline-block;
  container-name: stat-col;
  container-type: inline-size;
}

@container stat-col (max-width: 61px) {
  .badge-emoji {
    display: none !important;
  }
}

@container (max-width: 61px) {
  .badge-emoji {
    display: none !important;
  }
}

@container match-card (max-width: 960px) {
  .stats-row .badge-emoji {
    display: none !important;
  }
}

.badge-hot.active {
  background: rgba(239, 68, 68, 0.25);
  color: var(--red);
  border: 1px solid rgba(239, 68, 68, 0.6);
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.4);
  font-weight: 800;
  filter: none;
  animation: badge-hot-pulse 1s ease-in-out infinite;
}
@keyframes badge-hot-pulse {
  0%,
  100% {
    transform: scale(1);
    filter: brightness(1);
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.4);
  }
  50% {
    transform: scale(1.02);
    filter: brightness(1.6);
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.9);
  }
}

/* columns widths in stats-row */
/* .stats-row > :nth-child(1)  { grid-column: span 1; } */

/* ── COMPACTCARD (card lateral / popup) ── */
.suggestion-card-topbar {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  min-height: 22px;
}

/* Nome da liga centralizado na topbar do compactcard (amber) */
.compact-card-league {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--amber);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 96px);
  text-align: center;
  pointer-events: none;
  z-index: 1;
}

.compact-card-league .league-country-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--amber);
  margin: 0 5px;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

.compact-card-league .league-country-code {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  font-weight: 700;
  color: var(--amber);
  letter-spacing: 0.06em;
  display: inline-block;
  vertical-align: middle;
}

.suggestion-card.compacto .compact-card-league {
  display: inline-flex;
}

.suggestion-card-btn {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
  transition: all 0.2s;
}
.suggestion-card-btn:hover {
  color: var(--amber);
  border-color: rgba(245, 158, 11, 0.4);
  background: rgba(245, 158, 11, 0.08);
}
.suggestion-card-btn.fechar:hover {
  color: var(--red);
  border-color: rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.08);
}

/* Botão X de excluir card do feed (centralizado na mesma linha dos outros botões na Web) */
.card-btn-delete {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
  transition: all 0.2s;
  z-index: 2;
}

/* No modo mini / compacto, posiciona o botão de excluir no início da linha (todo à esquerda) */
.suggestion-card.compacto .card-btn-delete,
body.modo-cards-mini .card-btn-delete {
  left: 0;
  transform: none;
}

.card-btn-delete:hover,
.card-btn-delete:active {
  color: var(--red);
  border-color: rgba(239, 68, 68, 0.5);
  background: rgba(239, 68, 68, 0.12);
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.35);
}

.card-btn-delete.restaurar {
  color: var(--cyan);
  border-color: rgba(6, 182, 212, 0.5);
}

.card-btn-delete.restaurar:hover,
.card-btn-delete.restaurar:active {
  color: #fff;
  border-color: var(--cyan);
  background: rgba(6, 182, 212, 0.25);
  box-shadow: 0 0 8px rgba(6, 182, 212, 0.35);
}

/* No modo compacto, esconde cabeçalho e rodapé -- só o gráfico fica */
.suggestion-card.compacto .match-score-display,
.suggestion-card.compacto .sug-footer {
  display: none;
}
.suggestion-card.compacto .intensity-chart {
  margin-bottom: 0;
}

/* Badge + gols dentro do nome do time -- só aparecem no modo compacto */
.intensity-team-name {
  display: flex;
  align-items: center;
  gap: 6px;
}
.intensity-team-nome {
  flex: 1;
}
.intensity-team-badge {
  display: none;
  width: 28px;
  height: 18px;
  border-radius: 4px;
  flex-shrink: 0;
  font-family: var(--font-main), var(--font-mono), sans-serif;
  font-size: 9px;
  font-weight: 400;
  color: #ffffff;
  line-height: 1;
  text-align: center;
  letter-spacing: 0.5px;
  white-space: nowrap;
  overflow: hidden;
  user-select: none;
  box-sizing: border-box;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}
.intensity-team-badge.is-favorito {
  font-family: var(--font-mono), monospace;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: normal;
}
.intensity-team-badge.casa {
  background: rgba(167, 139, 250, 0.16);
  border: 1px solid rgba(167, 139, 250, 0.5);
  box-shadow: 0 0 5px rgba(167, 139, 250, 0.25);
}
.intensity-team-badge.fora {
  background: rgba(6, 182, 212, 0.16);
  border: 1px solid rgba(6, 182, 212, 0.5);
  box-shadow: 0 0 5px rgba(6, 182, 212, 0.25);
}
.intensity-team-gols {
  display: none;
  /* padding-top: 5px; */
  justify-content: start;
}
.suggestion-card.compacto .intensity-team-badge,
.suggestion-card.compacto .intensity-team-gols {
  display: flex;
  align-items: center;
  justify-content: center;
}
.suggestion-card.compacto .intensity-team-name {
  gap: 8px;
}
.suggestion-card.compacto .intensity-team-nome {
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 120px;
}
.compact-filtro-tag {
  display: none;
}
.suggestion-card.compacto .compact-filtro-tag {
  display: inline-flex;
  align-items: center;
  color: var(--red);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  flex-shrink: 0;
  white-space: nowrap;
}
.compact-status-badges {
  display: none;
  align-items: center;
  gap: 3px;
  margin-left: auto;
  flex-shrink: 0;
}
.suggestion-card.compacto .compact-status-badges {
  display: flex;
}
.compact-status-badge {
  width: 22px;
  height: 22px;
  border: 1px solid rgba(100, 116, 139, 0.35);
  border-radius: 4px;
  background: rgba(100, 116, 139, 0.12);
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}
.compact-status-badge.ativo {
  color: #fff;
  font-weight: 900;
}
.compact-status-p.ativo {
  background: rgba(0, 255, 136, 0.2);
  border-color: var(--green);
  box-shadow: 0 0 8px rgba(0, 255, 136, 0.45);
}
.compact-status-h {
  font-size: 11px;
  transition: all 0.2s ease;
}
.compact-hot-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
  filter: grayscale(1);
  opacity: 0.45;
  transition: all 0.2s ease;
}
.compact-status-h.ativo {
  background: rgba(239, 68, 68, 0.2);
  border-color: var(--red);
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.45);
  animation: compact-hot-glow-pulse 1.1s ease-in-out infinite;
}
.compact-status-h.ativo .compact-hot-icon {
  filter: none;
  opacity: 1;
  animation: compact-hot-icon-glow 1.1s ease-in-out infinite;
}
@keyframes compact-hot-glow-pulse {
  0%,
  100% {
    box-shadow: 0 0 6px rgba(239, 68, 68, 0.4);
    border-color: rgba(239, 68, 68, 0.6);
    background: rgba(239, 68, 68, 0.2);
  }
  50% {
    box-shadow:
      0 0 14px rgba(239, 68, 68, 0.9),
      inset 0 0 5px rgba(239, 68, 68, 0.35);
    border-color: #ff4d4d;
    background: rgba(239, 68, 68, 0.35);
  }
}
@keyframes compact-hot-icon-glow {
  0%,
  100% {
    filter: brightness(1) drop-shadow(0 0 1px rgba(239, 68, 68, 0.4));
  }
  50% {
    filter: brightness(1.6) drop-shadow(0 0 4px rgba(255, 100, 50, 0.9));
  }
}
.compact-status-e.ativo {
  background: rgba(6, 182, 212, 0.2);
  border-color: var(--cyan);
  box-shadow: 0 0 8px rgba(6, 182, 212, 0.45);
}
.compact-status-l.ativo {
  background: rgba(59, 130, 246, 0.2);
  border-color: var(--blue);
  box-shadow: 0 0 8px rgba(59, 130, 246, 0.45);
}
.intensity-team-name .team-red-card-badge {
  display: none;
}
.suggestion-card.compacto .intensity-team-name .team-red-card-badge {
  display: block;
}
.suggestion-card.compacto .intensity-team-gols {
  min-width: 14px;
  padding: 0 3px;
  border-width: 1px;
  border-radius: 4px;
  font-size: 12px;
  box-shadow: inset 0 0 5px rgba(14, 13, 13, 0.5);
}

/* Badge de Tempo e T-ug no Compact Card (Extrema Direita do time de fora) */
.compact-info-badge {
  display: none;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex-shrink: 0;
  height: 22px;
  padding: 0 8px;
  border-radius: 4px;
  background: rgba(100, 116, 139, 0.12);
  border: 1px solid rgba(100, 116, 139, 0.35);
  font-family: var(--font-mono);
  line-height: 1;
}

.suggestion-card.compacto .compact-info-badge {
  display: inline-flex;
}

.compact-info-tempo {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--green);
  font-size: 11px;
  font-weight: 800;
  text-shadow: 0 0 6px rgba(0, 255, 136, 0.35);
}

.compact-info-tempo.ft {
  color: var(--red) !important;
  text-shadow: 0 0 8px rgba(239, 68, 68, 0.5) !important;
  font-weight: 900;
}

.compact-info-icon {
  font-size: 10px;
  opacity: 0.85;
}

.compact-info-divider {
  width: 1px;
  height: 11px;
  background: rgba(100, 116, 139, 0.4);
}

.compact-info-tug {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.compact-info-tug-label {
  font-size: 9px;
  font-weight: 500;
  color: white;
  letter-spacing: 0.04em;
}

.compact-info-tug-val {
  font-size: 11px;
  font-weight: 800;
  color: var(--amber);
  text-shadow: 0 0 6px rgba(6, 182, 212, 0.35);
}

.compact-info-tug-val.desconhecido {
  color: red;
  text-shadow: none;
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════
   MODO CARDS (Ativado pelo botão CARDS no topo)
   ═══════════════════════════════════════════════════════════ */
body.modo-cards-ativo .layout {
  grid-template-columns: 1fr !important;
  height: calc(100vh - 70px) !important;
  min-height: calc(100vh - 70px) !important;
}

body.modo-cards-ativo .side-panel {
  display: none !important;
}

body.modo-cards-ativo .filter-bar {
  display: none !important;
}

body.modo-cards-ativo .main-panel {
  padding: 16px 20px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  height: 100% !important;
}

body.modo-cards-ativo #lista-jogos {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)) !important;
  gap: 16px !important;
  width: 100% !important;
  align-content: start !important;
  box-sizing: border-box !important;
  flex: 1 1 auto !important;
}

body.modo-cards-mini #lista-jogos {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
  gap: 12px !important;
}

/* Quando não há jogos no Modo Cards ou Mini: centralizar a mensagem perfeitamente no centro da tela */
body.modo-cards-ativo #lista-jogos.feed-vazio,
body.modo-cards-ativo #lista-jogos:has(.empty-state) {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 1 auto !important;
  min-height: calc(100vh - 180px) !important;
  width: 100% !important;
  margin: auto !important;
}

body.modo-cards-ativo #lista-jogos.feed-vazio .empty-state,
body.modo-cards-ativo #lista-jogos:has(.empty-state) .empty-state {
  grid-column: 1 / -1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  margin: auto !important;
  max-width: 500px !important;
  width: min(500px, calc(100% - 32px)) !important;
  padding: 24px 32px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  color: var(--text-secondary) !important;
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
}

body.modo-cards-ativo .suggestion-card {
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Card que furou a fila para o topo por estar elegível em filtros estratégicos ou favoritado */
.suggestion-card.elegivel-fura-fila {
  border-color: rgba(245, 158, 11, 0.75) !important;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.25) !important;
}

.suggestion-card-btn.card-btn-favorito {
  font-size: 13px;
  line-height: 1;
}

.suggestion-card-btn.card-btn-favorito.ativo {
  color: var(--amber) !important;
  border-color: rgba(245, 158, 11, 0.6) !important;
  background: rgba(245, 158, 11, 0.15) !important;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.3) !important;
}

.suggestion-card-btn.card-btn-favorito:hover {
  color: var(--amber);
  border-color: rgba(245, 158, 11, 0.5);
  background: rgba(245, 158, 11, 0.1);
}

/* ── AUTENTICAÇÃO & 2FA: Separado no arquivo golscanner_auth.css ── */

/* ── RESPONSIVIDADE & MOBILE: Separado no arquivo golscanner_responsive.css ── */

/* (Todos os breakpoints e regras de responsividade para desktop, tablet e celular agora estão centralizados em golscanner_responsive.css) */