:root{
  --primary:#0066b3;
  --secondary:#009639;
  --accent:#fed100;
  --light:#f5f5f5;
  --dark:#333;
  --danger:#dc3545;
  --success:#28a745;
  --warning:#ffc107;
  --info:#17a2b8;
}

*{box-sizing:border-box}
body{margin:0;background:var(--light);color:var(--dark);font-family:Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.5}
header{background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;padding:24px 0;border-radius:0 0 12px 12px;box-shadow:0 4px 12px rgba(0,0,0,.1);margin-bottom:6px}
@media (max-width: 768px) {
  .container {
  padding-left: 2px !important;
  padding-right: 2px !important;
}
}
h1{margin:0 0 6px;font-size:28px}
.subtitle{opacity:.9}

/* cards / buttons */
.card{background:#fff;border:1px solid #e9ecef;border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,.06);padding:18px}
.btn{padding:10px 18px;border:none;border-radius:6px;background:var(--primary);color:#fff;font-weight:600;cursor:pointer;transition:.2s}
.btn:hover{filter:brightness(.95);transform:translateY(-1px)}
.btn-success{background:var(--success)} .btn-danger{background:var(--danger)}
.btn-warning{background:var(--warning);color:var(--dark)} .btn-info{background:var(--info)}
.btn:disabled{opacity:.6;cursor:not-allowed;transform:none}

/* login layout improved */
.login-card{max-width:420px;margin:32px auto}
.auth-form{display:flex;flex-direction:column;gap:12px}
.form-group label{font-weight:600;margin-bottom:4px;display:block}
.form-group input,.form-group select{width:100%;padding:10px;border:1.8px solid #ddd;border-radius:6px;font-size:15px}
.form-row{display:flex;gap:12px;flex-wrap:wrap}
.form-row .form-group{flex:1}
.auth-divider{display:flex;justify-content:center;align-items:center;margin:12px 0;color:#777}
.auth-divider span{background:#fff;padding:0 8px}

/* tabs */
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px;border-bottom:1px solid #e5e5e5}
.tab{background:#fff;border:1px solid #ddd;border-bottom:none;border-radius:8px 8px 0 0;padding:10px 14px;font-weight:600;cursor:pointer}
.tab.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.tab-content{
  display:none;
  background:transparent;   /* 🔥 remove branco lateral */
  border:none;              /* 🔥 remove borda */
  border-radius:0;
  padding:8px 0px 16px 0px; /* 🔥 mínimo possível */
  box-shadow:none;
}
.tab-content.active{display:block}

/* matches */
.matches-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.match-card{border:1px solid #eaeaea;border-radius:8px;padding:12px;background:#fff}
.match-header{display:flex;justify-content:space-between;color:#666;font-size:13px;margin-bottom:8px}
.match-teams{display:flex;align-items:center;justify-content:space-between;margin:10px 0}
.team-name{font-weight:700}
.bet-options{display:flex;gap:8px}
.bet-option{flex:1;border:2px solid #ddd;border-radius:6px;padding:8px;font-weight:700;cursor:pointer;text-align:center}
.bet-option.selected{border-color:var(--primary);background:rgba(0,102,179,.08)}
.bet-option.team-a.selected{border-color:var(--success);background:rgba(40,167,69,.08)}
.bet-option.team-b.selected{border-color:var(--success);background:rgba(40,167,69,.08)}
.bet-option.draw.selected{border-color:var(--warning);background:rgba(255,193,7,.08)}

/* podium */
.podium-section{margin-top:16px;padding-top:8px;border-top:2px dashed #eee}
.podium-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.podium-card{border-top:5px solid #ddd}
.podium-card.first{border-color:gold}.podium-card.second{border-color:silver}.podium-card.third{border-color:#cd7f32}

/* ranking */
.ranking-table{width:100%;border-collapse:collapse}
.ranking-table th,.ranking-table td{padding:10px;border-bottom:1px solid #eee;text-align:left}
.ranking-table th{background:#fafafa}
.position{text-align:center;font-weight:700;width:48px}
.points{text-align:center;font-weight:700;color:var(--primary)}

/* center numeric columns in ranking (Pontos, Fase de grupos, Mata-mata, Pódio) */
.ranking-table th:nth-child(3),
.ranking-table th:nth-child(4),
.ranking-table th:nth-child(5),
.ranking-table th:nth-child(6),
.ranking-table td:nth-child(3),
.ranking-table td:nth-child(4),
.ranking-table td:nth-child(5),
.ranking-table td:nth-child(6){
  text-align:center;
}


/* my bets */
.bet-card{background:#fff;border:1px solid #e9ecef;border-radius:8px;padding:14px;margin-bottom:14px}
.bet-item{background:#f8f9fa;border-left:4px solid var(--primary);padding:10px;border-radius:6px;margin-bottom:10px}
.bet-header{display:flex;justify-content:space-between;font-weight:600}

/* all bets */
.filters .filters-actions{display:flex;gap:8px;margin-top:8px}
.user-bets-compact{border:1px solid #eee;border-radius:8px;margin-bottom:12px}
.user-bets-header{display:flex;justify-content:space-between;align-items:center;background:#fafafa;padding:10px;border-bottom:1px solid #eee}
.chips{display:flex;flex-wrap:wrap;gap:8px;padding:10px}
.chip{padding:6px 10px;border-radius:999px;border:1px solid #ddd;background:#fff;font-weight:600;font-size:13px}
.chip.win{background:rgba(40,167,69,.1);border-color:#bfe6c8}
.chip.lose{background:rgba(220,53,69,.1);border-color:#f0b7be}
.chip.pending{background:#f1f3f5;border-color:#e0e3e7}
.pagination{display:flex;gap:8px;justify-content:center;margin:12px 0}
.page-btn{padding:8px 12px;border:1px solid #ddd;background:#fff;border-radius:6px;cursor:pointer}
.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}

/* user info */
.user-info{background:var(--primary);color:#fff;border-radius:8px;padding:10px 14px;margin-bottom:12px}
.admin-badge{background:var(--warning);color:#222;padding:2px 8px;border-radius:12px;margin-left:8px;font-weight:700}

/* loading + messages */
.loading{color:#666;text-align:center}
#global-messages{position:fixed;right:12px;bottom:12px;display:flex;flex-direction:column;gap:8px;z-index:9999}
.toast{padding:10px 14px;border-radius:8px;color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.15);animation:slideIn .2s ease}
.toast.success{background:var(--success)} .toast.error{background:var(--danger)}
.toast.info{background:var(--info)} .toast.warning{background:var(--warning);color:#222}
@keyframes slideIn{from{transform:translateY(8px);opacity:0}to{transform:translateY(0);opacity:1}}

/* admin table */
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px;border-bottom:1px solid #eee;text-align:left}
.badge{padding:3px 8px;border-radius:999px;font-size:12px}
.badge.finished{background:rgba(40,167,69,.1)}
.badge.scheduled{background:rgba(23,162,184,.1)}
.badge.in_progress{background:rgba(255,193,7,.2)}

/* modal (generic) */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;z-index:1000}
.modal.active{display:flex}
.modal-content{background:#fff;max-width:640px;width:92%;border-radius:10px;padding:18px;box-shadow:0 10px 30px rgba(0,0,0,.3);max-height:90vh;overflow:auto}
.modal-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #eee;margin-bottom:12px;padding-bottom:8px}
.close-modal{border:none;background:transparent;font-size:22px;cursor:pointer;color:#666}



/* --- Responsive fixes for "Todas as Apostas" filters (mobile) --- */
/* Ensure filter form fields don't overflow and stack nicely on small screens */
.filters .form-row .form-group { min-width: 0; } /* allow flex items to shrink safely */
.filters .filters-actions { display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }

/* On narrow viewports, stack the filter inputs vertically and make action buttons more usable */
@media (max-width: 600px) {
  .filters .form-row { flex-direction: column; gap: 10px; }
  .filters .form-row .form-group { width: 100%; }
  .filters .filters-actions { justify-content: flex-start; gap:8px; }
  .filters .filters-actions .btn { width: 100%; display:block; }
  /* give some breathing room to the search input specifically */
  #filter-search { padding: 10px; font-size: 15px; }
}


/* knockout qualified prediction result */
.qualified-result {
  margin-left: 6px;
  font-weight: 700;
  font-size: 16px;
}
.qualified-correct {
  color: var(--success);
}
.qualified-wrong {
  color: var(--danger);
}



.bet-option span:first-child {
  font-size: 1.3em;
}




.bet-option span:first-child {
  font-size: 1.45em; /* bigger flag emoji */
}


/* Bet option visual emphasis:
   - Bigger flags always
   - Even bigger when selected
   - Slightly smaller team name text
*/
.bet-option {
  font-size: 0.94em; /* a bit smaller team name */
  line-height: 1.25;
}

.bet-option span:first-child {
  font-size: 1.55em; /* bigger flag emoji */
}

/* When selected, emphasize the flag even more */
.bet-option.selected span:first-child,
.bet-option.active span:first-child {
  font-size: 1.8em;
}
/* =====================================================
   🔴🟢🟡 AJUSTE DE CORES DAS OPÇÕES DE PALPITE
   - Time A / Time B  → VERDE
   - Empate           → AMARELO
   - Remove azul padrão
===================================================== */

/* remove azul padrão */
.bet-option.selected{
  border-color: transparent !important;
  background: transparent !important;
}

/* Time A selecionado */
.bet-option.selected[data-choice="A"]{
  border-color: var(--success) !important;
  background: rgba(40,167,69,.12) !important;
}

/* Time B selecionado */
.bet-option.selected[data-choice="B"]{
  border-color: var(--success) !important;
  background: rgba(40,167,69,.12) !important;
}

/* Empate selecionado */
.bet-option.selected[data-choice="draw"]{
  border-color: var(--warning) !important;
  background: rgba(255,193,7,.18) !important;
  color: #222 !important;
}
/* Pontos ganhos no card */
.match-card {
  position: relative; /* obrigatório para o badge */
}

.points-earned {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);

  font-size: 13px;        /* menor */
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 10px;

  background: #198754;   /* verde */
  color: #fff;

  line-height: 1;
  z-index: 5;
}

/* Caso queira diferenciar +2 (opcional) */
.points-earned.double {
  background: #0d6efd; /* azul */
}
.group-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  margin-bottom: 8px;
}

.group-points {
  background: #28a745;
  color: #fff;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.85rem;
}



/* =========================
   MOBILE - MEUS PALPITES
========================= */
@media (max-width: 768px) {

  /* Grid de grupos */
  .groups-grid {
    grid-template-columns: 1fr !important;
  }

  /* Card de cada grupo */
  .groups-grid .card {
    padding: 12px;
  }

  /* Chips dos palpites */
  .chips {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .chips .chip {
    width: 100%;
    min-width: unset !important;
    padding: 10px;
    text-align: left;
  }

  /* Texto interno do chip */
  .chip div {
    font-size: 0.9rem;
  }

  /* Resultado e status */
  .chip em {
    display: block;
    margin-top: 4px;
  }
}

.ranking-mobile-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ranking-mobile-points {
  font-weight: 700;
  color: var(--primary);
  cursor: pointer;
  white-space: nowrap;
}

.ranking-mobile-item {
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

.ranking-mobile-details {
  margin-top: 8px;
  background: #f8f9fa;
  border-radius: 8px;
  padding: 10px;
  font-size: 0.9rem;
}

/* =========================
   MOBILE - ADMINISTRAÇÃO
========================= */
@media (max-width: 768px) {

  /* Container geral da aba admin */
  #admin {
    padding: 12px;
  }

  /* =========================
     AÇÕES ADMIN (BOTÕES)
  ========================= */
  #admin .admin-actions {
    display: flex;
    flex-direction: row;          /* lado a lado */
    flex-wrap: wrap;              /* quebra linha se necessário */
    align-items: center;
    gap: 8px;
    justify-content: flex-start;
  }

  #admin .admin-actions .btn {
    position: relative;           /* necessário p/ tooltip */
    width: 44px;
    height: 44px;
    padding: 0;
    font-size: 0;                 /* esconde texto */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
  }

  /* =========================
     TOOLTIP (PADRÃO)
  ========================= */
  #admin .admin-actions .btn::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: #000;
    color: #fff;
    font-size: 11px;
    padding: 4px 6px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 10;
  }

  #admin .admin-actions .btn:hover::before {
    opacity: 1;
  }

  /* ===============================
     BOTÕES FIXOS (ÍCONE ÚNICO)
  =============================== */

  #btn-open-add-modal::after {
    content: "âž•";
    font-size: 22px;
  }

  #btn-open-finish-modal::after {
    content: "🏁";
    font-size: 20px;
  }

  #btn-open-podium-modal::after {
    content: "🏆";
    font-size: 20px;
  }

  #btn-recalc::after {
    content: "🧮";
    font-size: 20px;
  }

  #btn-integrity::after {
    content: "🛡️";
    font-size: 20px;
  }

  #admin .btn-danger::after {
    content: "🔥";
    font-size: 20px;
  }

  /* ===============================
     BOTÕES DINÂMICOS (ESTADO REAL)
     (JS CONTROLA AS CLASSES)
  =============================== */

  /* 🔒 Bloquear salvar palpites */
  #btn-toggle-save-bets.is-blocked::after {
    content: "🔒";
    font-size: 20px;
  }

  #btn-toggle-save-bets:not(.is-blocked)::after {
    content: "🔓";
    font-size: 20px;
  }

  /* 🔒 Bloquear salvar mata-mata */
  #btn-toggle-save-knockout.is-blocked::after {
    content: "🔒";
    font-size: 20px;
  }

  #btn-toggle-save-knockout:not(.is-blocked)::after {
    content: "🔓";
    font-size: 20px;
  }

  /* ☑️ Exigir todos os palpites */
  #btn-toggle-require-all-bets.is-active::after {
    content: "☑️";
    font-size: 20px;
  }

  #btn-toggle-require-all-bets:not(.is-active)::after {
    content: "⬜";
    font-size: 20px;
  }
}
/* =========================
   ADMIN MATCHES – CARDS (DESKTOP + MOBILE)
========================= */

/* Remove aparência de tabela */
#admin-matches-list table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

/* 🔥 DESKTOP: grid de cards */
#admin-matches-list tbody {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 16px;
}

/* Esconde cabeçalho da tabela (desktop também) */
#admin-matches-list thead {
  display: none;
}

/* TR não manda mais layout */
#admin-matches-list tr {
  display: block;
}

/* TD é o CARD real */
#admin-matches-list td.admin-card {
  display: block;
  width: 100%;
  box-sizing: border-box;

  padding: 14px;
  border-left: 6px solid transparent;
  border-radius: 14px;

  background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
}

/* =========================
   CARD CONTENT
========================= */

.admin-row-top {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 700;
  color: #666;
  margin-bottom: 6px;
}

.admin-row-match {
  font-size: 16px;
  font-weight: 800;
  color: #222;
  margin-bottom: 6px;
}

.admin-row-match .score {
  margin: 0 6px;
  font-weight: 900;
}

.admin-row-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  margin-bottom: 10px;
}

.admin-row-actions {
  display: flex;
  gap: 10px;
}

.admin-row-actions .btn {
  width: 44px;
  height: 44px;
  padding: 0;
  font-size: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}

.admin-row-actions .btn i {
  font-size: 18px;
}

/* =========================
   STATUS COLORS (GLOBAL)
========================= */

/* 🔵 Agendado */
#admin-matches-list td.admin-card-scheduled {
  background: #f0f7ff;
  border-left-color: #0d6efd;
}

/* 🟡 Em andamento */
#admin-matches-list td.admin-card-in-progress {
  background: #fff8e1;
  border-left-color: #ffc107;
}

/* ⚪ Encerrado */
#admin-matches-list td.admin-card-finished {
  background: #f6f6f6;
  border-left-color: #adb5bd;
}

/* =========================
   MOBILE – 1 CARD POR LINHA
========================= */
@media (max-width: 768px) {

  #admin-matches-list tbody {
    display: block;
  }

  #admin-matches-list tr {
    margin-bottom: 14px;
  }
}
/* =========================================
   NOVOS ELEMENTOS: PILLS E ACORDEÕES
   ========================================= */

/* CONTAINER DA LISTA */
#admin-matches-list {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-bottom: 100px; /* Respiro no final */
}

/* PILL CENTRALIZADA */
.segmented-control {
  display: flex;
  background: #eee;
  border-radius: 12px;
  padding: 4px;
  margin: 0 auto 20px auto !important; 
  width: 100%;
  max-width: 280px; 
  border: 1px solid #ddd;
}

.segment-btn {
  flex: 1;
  border: none;
  padding: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  border-radius: 9px;
  transition: all 0.2s ease;
  background: transparent;
  color: #666;
}

.segment-btn.active {
  background: #fff;
  color: #000;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* ACORDEÃO: OCUPANDO A LATERAL TODA (FECHADO) */
.admin-group-section {
  background: #fff;
  border-bottom: 1px solid #eee;
  border-top: 1px solid #eee;

  width: 100% !important;
  margin-left: 0 !important;

  overflow: hidden;
  border-radius: 0;
  box-sizing: border-box;
}

.group-header {
  background: #fff;
  padding: 18px 15px; /* Ajustado para a nova margem lateral */
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
  width: 100%;
  box-sizing: border-box;
}

.group-header span:first-child {
  font-weight: 800;
  color: #333;
  font-size: 14px;
}

/* CONTEÚDO ABERTO: CARDS OCUPANDO A LATERAL TODA */
#admin-matches-list .admin-group-section tbody {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 12px;
  padding: 15px; /* Padding interno equilibrado */
  background: #f8f9fa;
  width: 100%;
  box-sizing: border-box;
}

/* Ajuste específico para MOBILE (telas menores que 768px) */
@media (max-width: 768px) {
  .admin-group-section {
    width: 100% !important;
    margin-left: 0 !important;
  }

  #admin-matches-list .admin-group-section tbody {
    display: block;
    padding: 10px 15px;
  }
}
/* =========================
   MOBILE – LOGIN / REGISTER
========================= */
@media (max-width: 768px) {

  /* Header mais compacto */
  header {
    padding: 16px 0;
    text-align: center;
  }

  header h1 {
    font-size: 1.3rem;
  }

  header .subtitle {
    font-size: 0.95rem;
  }

  /* Esconde botão sair no login (mobile) */
  #btn-logout {
    display: none;
  }

  /* Container ocupa tela inteira */
  .container {
    padding: 12px;
  }

  /* Card de login */
  .login-card {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 16px;
    border-radius: 16px;
  }

  .login-card h2 {
    text-align: center;
    font-size: 1.2rem;
  }

  /* Forms */
  .auth-form {
    width: 100%;
  }

  .auth-form h3 {
    text-align: center;
    font-size: 1.05rem;
    margin-top: 10px;
  }

  /* Inputs maiores (mobile friendly) */
  .auth-form input {
    font-size: 16px; /* evita zoom iOS */
    padding: 14px;
    border-radius: 10px;
  }

  /* Botões full width */
  .auth-form .btn {
    width: 100%;
    padding: 14px;
    font-size: 1rem;
    border-radius: 12px;
    margin-top: 8px;
  }

  /* Divider "ou" */
  .auth-divider {
    margin: 18px 0;
  }

  .auth-divider span {
    font-size: 0.85rem;
  }

  /* Link esqueci senha */
  #open-forgot {
    display: inline-block;
    padding: 8px 0;
    font-size: 0.95rem;
  }
}
/* =========================
   MOBILE – LOGIN VISUAL APP
========================= */
@media (max-width: 768px) {

  /* Fundo geral tipo app */
  body {
    background: linear-gradient(180deg, #0066b3 0%, #009639 100%);
  }

  /* Header compacto */
  header {
    background: transparent;
    box-shadow: none;
    padding: 20px 0 10px;
  }

  header h1 {
    font-size: 1.4rem;
    color: #fff;
  }

  header .subtitle {
    color: rgba(255,255,255,.9);
    font-size: 0.95rem;
  }

  /* Container central */
  .container {
    padding: 12px;
  }

  /* Card principal (estilo app) */
  .login-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 20px 18px;
    margin-top: 14px;
    box-shadow: 0 12px 30px rgba(0,0,0,.18);
  }

  /* Títulos */
  .login-card h2 {
    text-align: center;
    font-size: 1.25rem;
    margin-bottom: 10px;
  }

  .auth-form h3 {
    text-align: center;
    font-size: 1rem;
    margin-bottom: 8px;
    color: #444;
  }

  /* Inputs estilo app */
  .auth-form input {
    width: 100%;
    padding: 15px;
    border-radius: 14px;
    border: 1.8px solid #e0e0e0;
    font-size: 16px; /* evita zoom iOS */
    background: #f8f9fa;
    transition: border .2s, box-shadow .2s;
  }

  .auth-form input:focus {
    outline: none;
    border-color: var(--primary);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(0,102,179,.15);
  }

  /* Botão principal – estilo APP */
  .auth-form .btn {
    width: 100%;
    padding: 7px;
    border-radius: 16px;
    font-size: 1.05rem;
    font-weight: 700;
    margin-top: 10px;
    box-shadow: 0 6px 16px rgba(0,102,179,.35);
  }

  /* Divider "ou" */
  .auth-divider {
    margin: 22px 0;
  }

  .auth-divider span {
    font-size: 0.85rem;
    color: #666;
  }

  /* Link esqueci senha */
  #open-forgot {
    display: block;
    text-align: center;
    margin-top: 6px;
    font-size: 0.95rem;
    color: var(--primary);
    font-weight: 600;
  }

  /* Remove botão sair no login */
  #btn-logout {
    display: none;
  }
}

/* =========================
   MOBILE – AUTH TABS (APP STYLE)
========================= */
@media (max-width: 768px) {

  /* Abas */
  .auth-tabs {
    display: flex;
    background: #f1f3f5;
    border-radius: 14px;
    padding: 4px;
    margin-bottom: 18px;
  }

  .auth-tab {
    flex: 1;
    border: none;
    background: transparent;
    padding: 12px 0;
    font-size: 0.95rem;
    font-weight: 700;
    border-radius: 12px;
    color: #666;
    transition: all .25s ease;
  }

  .auth-tab.active {
    background: #fff;
    color: var(--primary);
    box-shadow: 0 4px 10px rgba(0,0,0,.12);
  }

  /* Conteúdo */
  .auth-tab-content {
    display: none;
    animation: fadeIn .25s ease;
  }

  .auth-tab-content.active {
    display: block;
  }

  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
  }
}
/* =========================
   AUTH TABS (LOGIN / REGISTER)
========================= */

.auth-tab-content {
  display: none;
}

.auth-tab-content.active {
  display: block;
}

/* =====================
   Forgot password inline (App style)
===================== */

.password-group {
  position: relative;
}

.password-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.password-header label {
  margin: 0;
}

.forgot-inline {
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  font-weight: 600;
  color: #2b6cb0;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.forgot-inline:hover {
  opacity: 0.75;
}

.forgot-inline:active {
  opacity: 0.55;
}

/* =====================
   FORGOT PASSWORD - FULLSCREEN (FINAL CORRETO)
===================== */

#forgot-modal {
  position: fixed;
  inset: 0;
  background: #fff;
  z-index: 9999;

  /* 🔒 estado inicial (NÃO aparece ao carregar) */
  display: none;

  flex-direction: column;
  animation: slideUp .25s ease;
}

/* 🟢 visível SOMENTE quando JS adiciona .active */
#forgot-modal.active {
  display: flex;
}

/* =====================
   HEADER
===================== */
.forgot-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid #eee;
}

.forgot-header h3 {
  font-size: 18px;
  margin: 0;
}

.forgot-back {
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
}

/* =====================
   CONTENT
===================== */
.forgot-content {
  flex: 1;
  padding: 20px;
}

.forgot-text {
  font-size: 14px;
  color: #555;
  margin-bottom: 20px;
}

/* =====================
   STEPS
===================== */
.forgot-step {
  display: none;
}

.forgot-step.active {
  display: block;
}

/* =====================
   BOTÃO FULL
===================== */
.btn.full {
  width: 100%;
  padding: 14px;
  font-size: 16px;
  border-radius: 14px;
}

/* =====================
   ANIMAÇÃO
===================== */
@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

/* =====================================================
   FIX DEFINITIVO – FORGOT MODAL (DESKTOP + MOBILE)
   Garante que NUNCA entre no fluxo da página
===================================================== */

#forgot-modal {
  position: fixed !important;
  inset: 0;
  background: #fff;
  z-index: 99999;

  /* 🔒 estado inicial */
  display: none !important;

  flex-direction: column;
}

/* só aparece quando JS ativa */
#forgot-modal.active {
  display: flex !important;
}

/* =====================
   APP BOTTOM NAV (MOBILE FIXED)
===================== */

.app-nav {
  position: fixed;
  bottom: 0;
  /* Substituímos inset-inline por left/right 0 para garantir compatibilidade */
  left: 0;
  right: 0;
  /* Forçamos a largura a ser EXATAMENTE a da tela, sem estourar */
  width: 100%; 
  background: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 10px 0 8px;
  border-top: 1px solid #eee;
  z-index: 9999; /* Aumentado para garantir que fique acima de tudo */
  
  /* CRUCIAL: impede que paddings ou conteúdos internos empurrem a largura */
  box-sizing: border-box;
  overflow: hidden; 
}

.app-nav button {
  background: none;
  border: none;
  display: flex;
  flex: 1; /* Faz cada botão ocupar o mesmo espaço proporcional */
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #777;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent; /* Remove o brilho ao clicar no mobile */
}

.app-nav i {
  font-size: 18px;
}

.app-nav button.active {
  color: var(--primary);
  font-weight: 700;
}

/* AJUSTE GLOBAL: Evita que o conteúdo da página fique escondido atrás da nav */
body {
  padding-bottom: 70px !important;
  overflow-x: hidden !important; /* Mata o scroll lateral da página toda */
}

/* Se a aba admin tiver tabelas, force o scroll apenas na tabela */
#admin-matches-list {
    max-width: 100%;
    overflow-x: auto;
}


/* =====================
   HEADER - APP STYLE
===================== */

header {
    background: linear-gradient(180deg, var(--primary), #000000);
    border-radius: 0;
    padding: 6px 0 4px;
}

header .container {
  padding: 0 16px;
}

/* Título */
header h1 {
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Subtítulo menor */
header .subtitle {
  font-size: 0.85rem;
  margin-top: 2px;
}

/* =====================
   USER INFO (APP FEEL)
===================== */

.user-info {
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,.15);
  backdrop-filter: blur(6px);
}

/* Badge admin mais "app" */
.admin-badge {
  background: #ffc107;
  color: #222;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 999px;
}

/* =====================
   MOBILE FIRST
===================== */
@media (max-width: 768px) {

  header {
    padding: 0px 0 0px;
  }

  header h1 {
    font-size: 1.2rem;
  }

  header .subtitle {
    font-size: 0.8rem;
  }

  /* botão sair não polui header mobile */
  #btn-logout {
    display: none;
  }
}
/* =====================
   MOBILE - ESCONDER TABS ANTIGAS
===================== */
@media (max-width: 768px) {

  /* esconde as abas antigas */
  .tabs {
    display: none !important;
  }

  /* remove borda superior dos conteúdos */
  .tab-content {
    border-radius: 16px;
    margin-top: 12px;
  }
}
.header-divider-premium{
  position: relative;
  height: 14px;
  margin-top: 1px;
}

/* linha luminosa */
.header-divider-premium::before{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width:92%;
  height:1px;

  background:rgba(255,255,255,.45);
  box-shadow:
    0 0 6px rgba(255,255,255,.35),
    0 0 14px rgba(255,255,255,.15);
}

/* fade para o conteúdo */
.header-divider-premium::after{
  content:"";
  position:absolute;
  inset:0;

  background:linear-gradient(
    to bottom,
    rgba(255,255,255,.25),
    rgba(255,255,255,0)
  );

  pointer-events:none;
}

/* =====================
   MATCH CARD – APP STYLE
===================== */

.match-card {
  background: #fff;
  border-radius: 18px;
  padding: 14px 10px;
  border: none;
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
  transition: transform .15s ease, box-shadow .15s ease;
}

/* efeito toque / hover */
.match-card:active {
  transform: scale(.98);
}

@media (hover:hover) {
  .match-card:hover {
    box-shadow: 0 12px 28px rgba(0,0,0,.12);
  }
}

/* cabeçalho do card */
.match-header {
  font-size: 0.8rem;
  opacity: .7;
  margin-bottom: 8px;
}
/* =====================
   BET OPTIONS – APP FEEL
===================== */

.bet-options {
  gap: 10px;
  margin-top: 10px;
}

.bet-option {
  border-radius: 16px;
  padding: 14px 10px;
  font-size: 0.95rem;
  background: #f8f9fa;
  border: 2px solid transparent;
  transition: all .15s ease;
}

/* feedback de toque */
.bet-option:active {
  transform: scale(.95);
}

/* selecionado */
.bet-option.selected {
  box-shadow: 0 6px 14px rgba(0,0,0,.12);
}
.match-teams {
  margin: 12px 0;
}

.team-name {
  font-size: 1rem;
  font-weight: 700;
}
/* =====================
   POINTS BADGE – APP
===================== */

.points-earned {
  top: 8px;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
}
/* =====================
   ESPAÇAMENTO APP
===================== */

.matches-container {
  gap: 0pxx;
}

.match-card {
  margin-bottom: 6px;
}

/* =====================
   MORE MENU (APP) – FINAL
===================== */

.more-menu {
  position: fixed;
  bottom: 72px;
  right: 12px;
  min-width: 220px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 16px 32px rgba(0,0,0,.22);
  padding: 8px;

  z-index: 10001; /* 🔥 MAIOR QUE O #profile (9000) */

  display: flex;
  flex-direction: column;
  gap: 4px;
}

.more-menu button {
  background: none;
  border: none;
  padding: 14px 16px;        /* área de toque confortável */
  text-align: left;
  border-radius: 14px;
  font-size: 15px;
  line-height: 1.2;
  cursor: pointer;
}

.more-menu button:active {
  background: #f1f1f1;
}

/* =====================
   HIDDEN – GARANTIA VISUAL
===================== */
[hidden] {
  display: none !important;
}
.more-menu hr {
  border: none;
  border-top: 1px solid #eee;
  margin: 6px 0;
}

/* =====================
   USER RANKING SUMMARY (TOPO)
===================== */
.user-top-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}

.user-ranking-summary {
  display: flex;
  gap: 10px;
  align-items: center;
  cursor: pointer;
}

.user-ranking-summary span {
  background: rgba(255,255,255,0.18);
  color: #fff;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
}

/* Mobile topo */
@media (max-width: 768px) {
  .user-top-row {
    flex-wrap: wrap;
    justify-content: center;
  }
  .user-ranking-summary {
    justify-content: center;
  }
}

/* =====================
   RANKING — USUÁRIO
===================== */
.ranking-me {
  background: linear-gradient(90deg, #adca1c, #b0c50e);
  border-left: 4px solid #ccea0a;
  font-weight: 700;
}

/* Glow pulsante */
.ranking-me-glow {
  animation: glowPulse 1.6s ease-in-out infinite;
}

@keyframes glowPulse {
  0%   { box-shadow: inset 0 0 0 rgba(174, 197, 29, 0.824); }
  50%  { box-shadow: inset 0 0 14px rgba(189, 210, 25, 0.813); }
  100% { box-shadow: inset 0 0 0 rgba(201, 210, 25, 0.742); }
}

/* =====================
   POSIÇÃO / MEDALHAS
===================== */
.position {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  white-space: nowrap;
}

/* =====================
   VARIAÇÃO DE POSIÇÃO
===================== */
.ranking-move {
  font-size: 0.75rem;
  font-weight: 800;
}

.ranking-move.up   { color: #2e7d32; } /* verde */
.ranking-move.down { color: #c62828; } /* vermelho */
.ranking-move.new  { color: #1565c0; }
.ranking-move.same { display: none; }

/* oculto até animar */
.ranking-move-hidden {
  opacity: 0;
  transform: translateY(0);
}

/* anima seta */
.ranking-move-animate {
  animation: fadeSlide 0.6s ease-out forwards;
}

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

/* =====================
   🔥 LINHA INTEIRA — ANIMAÇÃO
===================== */
.rank-row-up {
  animation: rowUp 1.7s ease-out;
}

.rank-row-down {
  animation: rowDown 1.7s ease-out;
}

@keyframes rowUp {
  from {
    transform: translateY(16px);
    background-color: rgba(46,125,50,0.12);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes rowDown {
  from {
    transform: translateY(-16px);
    background-color: rgba(198,40,40,0.12);
  }
  to {
    transform: translateY(0);
  }
}

/* =====================
   TABELA DESKTOP
===================== */
.ranking-table tbody tr {
  transition: background 0.15s ease;
}

.ranking-table tbody tr:hover {
  background: #f5f7fa;
}

/* =====================
   MOBILE LIST (RANKING)
===================== */
.ranking-mobile-list {
  display: flex;
  flex-direction: column;
}

.ranking-mobile-item {
  padding: 14px 12px;
  border-bottom: 1px solid #eee;
}

.ranking-mobile-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ranking-mobile-name {
  font-weight: 600;
  font-size: 0.95rem;
}

.ranking-mobile-points {
  font-weight: 800;
  font-size: 0.95rem;
  color: #1976d2;
  cursor: pointer;
}

/* glow mobile */
.ranking-me-mobile.ranking-me-glow {
  animation: glowPulse 1.6s ease-in-out infinite;
}

/* =====================
   CARD DE DETALHES (MOBILE)
===================== */
.user-score-card {
  margin-top: 8px;                /* ↓ menos espaço externo */
  padding: 12px;                  /* ↓ padding menor */
  border-radius: 14px;            /* ↓ levemente menor */
  background: linear-gradient(135deg, #e3f2fd, #ffffff);
  box-shadow: 0 6px 16px rgba(0,0,0,0.08); /* ↓ sombra mais leve */
  animation: fadeUp 1s ease;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(6px);   /* ↓ menos deslocamento */
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.user-score-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  margin-bottom: 4px;             /* ↓ */
}

.user-score-title {
  font-size: 0.95rem;             /* ↓ */
}

.user-score-position {
  font-size: 0.8rem;              /* ↓ */
}

.user-score-points {
  font-size: 2rem;                /* 🔥 PRINCIPAL redução */
  font-weight: 800;
  text-align: center;
  margin: 6px 0 2px;              /* ↓ */
  color: #1976d2;
  line-height: 1.1;               /* ↓ compacta */
}

.user-score-label {
  text-align: center;
  font-size: 0.75rem;             /* ↓ */
  color: #666;
  margin-bottom: 8px;             /* ↓ */
}

.user-score-breakdown {
  display: flex;
  justify-content: space-around;
  text-align: center;
  margin-bottom: 6px;             /* ↓ */
}

.user-score-item strong {
  font-size: 0.9rem;              /* ↓ */
}

.user-score-item span {
  display: block;
  font-size: 0.7rem;              /* ↓ */
  color: #555;
}

/* =====================
   APROVEITAMENTO
===================== */
.user-score-accuracy {
  margin-top: 8px;                /* ↓ */
  padding-top: 6px;               /* ↓ */
  border-top: 1px dashed #ddd;
  display: flex;
  justify-content: space-between;
  gap: 8px;                       /* ↓ */
}

.accuracy-item {
  flex: 1;
  text-align: center;
}

.accuracy-label {
  font-size: 10px;                /* ↓ */
  color: #777;
  text-transform: uppercase;
}

.accuracy-value {
  display: block;
  font-size: 15px;                /* ↓ */
  font-weight: 700;
  color: #1976d2;
  margin: 1px 0;                  /* ↓ */
}

.accuracy-sub {
  font-size: 11px;                /* ↓ */
  color: #555;
}
/* =====================
   PROFILE – ESTRUTURA
===================== */
.profile-page {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.profile-title {
  text-align: center;
  font-weight: 800;
  margin-bottom: 4px;
}

/* cards do perfil */
.profile-card {
  background: #fff;
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.06);
}

/* =====================
   GRÁFICO
===================== */
.profile-chart-wrapper {
  width: 100%;
  height: 240px;
}

@media (max-width: 768px) {
  .profile-chart-wrapper {
    height: 220px;
  }
}

/* =====================
   HISTÓRICO
===================== */
.profile-table-wrapper {
  overflow-x: auto;
}

.profile-history-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
}

.profile-history-table th,
.profile-history-table td {
  padding: 8px;
  text-align: center;
  border-bottom: 1px solid #eee;
  font-size: 0.85rem;
}

/* =====================
   FIX NAVBAR MOBILE (FINAL)
===================== */
:root {
  --bottom-nav-height: 68px;
}

/* =====================
   CONTROLE DE VISIBILIDADE DAS TABS
===================== */
.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

/* =====================
   REGRAS GERAIS QUANDO APP-NAV EXISTE
===================== */
body.has-app-nav .tab-content {
  padding-bottom: calc(var(--bottom-nav-height) + 20px);
}

/* =====================
   FILTRO DO GRÁFICO
===================== */
.chart-filters {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 8px;
}

.chart-btn {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid #ddd;
  background: #fff;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}

.chart-btn.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

/* =====================
   HISTÓRICO DIÁRIO – GRID FINAL
===================== */

.history-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2px;
    margin-top: 8px;
}

/* card de cada dia */
.history-row {
  background: #16191b;
  border-radius: 12px;
  padding: 8px 6px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  font-size: 0.8rem;
  box-shadow: 0 3px 8px rgba(0,0,0,0.05);
}

/* data (05/12) */
.history-row .history-date {
  font-weight: 700;
  font-size: 0.75rem;
  color: #333;
  white-space: nowrap;
}

/* pontos (+5) */
.history-row .history-points {
  font-weight: 800;
  font-size: 0.9rem;
}

/* emoji */
.history-row .history-icon {
  font-size: 1rem;
}

/* =====================
   CORES POR RESULTADO
===================== */

.history-row.positive .history-points {
  color: #2e7d32;
}

.history-row.hot {
  background: #fff3e0;
}

.history-row.hot .history-points {
  color: #d84315;
}

.history-row.neutral .history-points {
  color: #777;
}

/* =====================
   DESKTOP – MAIS COLUNAS
===================== */
@media (min-width: 768px) {
  .history-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}


.history-toggle-btn {
  width: 100%;
  margin-top: 10px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid #ddd;
  background: #fff;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease;
}

.history-toggle-btn:hover {
  background: #f5f5f5;
}


.chart-compare {
  display: flex;
  justify-content: center;
  margin-bottom: 6px;
}

.chart-compare select {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid #ddd;
  font-size: 13px;
}




/* =====================
   PERFIL (MEU + PÚBLICO)
   👉 respeita o menu inferior
===================== */
body.has-app-nav #profile,
body.has-app-nav #user-profile {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;

  bottom: var(--bottom-nav-height);

  width: 100vw;
  background: #f5f5f5;

  z-index: 9000;

  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: black;
}
/* =====================
   APP NAV — CONTROLE REAL
===================== */

/* 🔒 ESCONDIDA POR PADRÃO (LOGIN, LOGOUT, REFRESH) */
.app-nav {
  display: none !important;
}

/* ✅ SÓ APARECE APÓS LOGIN */
body.has-app-nav .app-nav {
  display: flex !important;
}

/* =====================
   LOGIN – UX ENHANCEMENTS (FINAL)
   👉 Pode colar no FINAL do CSS
===================== */

/* erro inline no input (uso futuro via JS, não quebra nada) */
.input-error {
  border-color: var(--danger) !important;
  background: rgba(220,53,69,.06);
}

.input-error-msg {
  font-size: 12px;
  color: var(--danger);
  margin-top: 4px;
}

/* botão em estado de loading (uso futuro) */
.btn.loading {
  pointer-events: none;
  opacity: .85;
}

/* indicador simples e seguro */
.btn.loading::after {
  content: "...";
  margin-left: 6px;
}

/* animação suave do título no login */
header h1 {
  animation: fadeDown .6s ease;
}

@keyframes fadeDown {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* =====================
   NEWS TICKER (slide)
===================== */
#newsTicker {
  background: #000000;
  overflow: hidden;
  padding: 8px 12px;
  border-radius: 8px;
  margin-bottom: 12px;
}

#newsTrack {
  display: block;
  white-space: nowrap;
  font-weight: 500;
  color: #0d47a1;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .4s ease, transform .4s ease;
}

#newsTrack.show {
  opacity: 1;
  transform: translateY(0);
}
.news-input-wrapper {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.news-input-wrapper input {
  flex: 1;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #ddd;
  font-size: 0.95rem;
}

.news-input-wrapper button {
  white-space: nowrap;
}

.news-hint {
  display: block;
  margin-top: 6px;
  font-size: 0.75rem;
  opacity: 0.7;
}
/* =====================================================
   FIX DEFINITIVO – NEWS TICKER + USER INFO (LAYOUT)
   - Frase sempre em linha própria (acima)
   - Olá + Admin + Ranking + Pontos SEMPRE na mesma linha
===================================================== */

.user-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* 🔥 ticker ocupa linha inteira sozinho */
#newsTicker {
  width: 100%;
  order: 0;
  margin-bottom: 2px;
}

/* linha fixa do usuário */
.user-top-row {
  order: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;            /* 🔒 nunca quebra */
  gap: 4px;
}

/* Olá + Admin */
.user-info {
  white-space: nowrap;
  flex-shrink: 0;
}

/* Ranking + pontos */
.user-ranking-summary {
  display: flex;
  gap: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* spans internos não quebram */
.user-ranking-summary span {
  white-space: nowrap;
}

/* =====================
   MOBILE – AJUSTE FINO
===================== */
@media (max-width: 768px) {
  .user-top-row {
    justify-content: center;
    gap: 4px;
  }

  #newsTicker {
    text-align: center;
  }
}
/* =====================
   🔒 FIX DEFINITIVO — NEWS TICKER (ANTI-COLAPSO)
   Mantém altura estável mesmo após vários minutos
===================== */

#newsTicker {
  background: #000000;
  overflow: hidden;

  /* 🔒 altura fixa e segura */
  min-height: 40px;
  height: 40px;

  padding: 0 12px;
  border-radius: 8px;
  margin-bottom: 4px;

  display: flex;
  align-items: center;
}

/* texto interno */
#newsTrack {
  display: block;
  width: 100%;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  font-weight: 500;
  color: #0d47a1;

  /* animação */
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .4s ease, transform .4s ease;

  line-height: 1.2;
}

/* estado visível */
#newsTrack.show {
  opacity: 1;
  transform: translateY(0);
}

/* 🔒 garante estabilidade no mobile */
@media (max-width: 768px) {
  #newsTicker {
    min-height: 42px;
    height: 42px;
  }
}
/* =====================================================
   NEWS TICKER – FRASE + REAÇÃO (FINAL ESTÁVEL)
===================================================== */

/* linha inteira do ticker */
.ticker-row {
  position: relative;              /* referência do picker */
  display: flex;
  align-items: center;
  gap: 6px;

  overflow: visible;               /* 🔥 permite popup aparecer */
}

/* container do ticker */
#newsTicker {
  flex: 1;
  overflow: hidden;
}

/* texto da frase */
#newsTrack {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  white-space: nowrap;
  max-width: 100%;

  font-size: 0.95rem;
  font-weight: 500;
  color: #0d47a1;
}

/* nome do usuário */
#newsTrack strong {
  font-weight: 700;
}

/* =====================================================
   WRAPPER DO BOTÃO + PICKER
   🔥 âncora correta
===================================================== */
.react-wrapper {
  position: relative; /* ✅ referência do picker */
  display: flex;
  align-items: center;
}

/* =====================================================
   BOTÃO REAGIR (😎 COMPACTO)
===================================================== */
.react-emoji-btn {
  flex-shrink: 0;

  background: rgba(255,255,255,0.35);
  border: none;
  border-radius: 999px;

  font-size: 14px;
  line-height: 1;
  padding: 2px 6px;

  cursor: pointer;
  user-select: none;

  transition: background 0.15s ease, transform 0.1s ease;
}

.react-emoji-btn:hover {
  background: rgba(255,255,255,0.55);
  transform: scale(1.1);
}

.react-emoji-btn:active {
  transform: scale(0.95);
}

/* =====================================================
   PICKER DE EMOJIS
   ✔ aparece ABAIXO do botão
   ✔ não cobre a frase
===================================================== */
#reactionPicker {
  position: absolute;

  top: calc(100% + 6px);   /* 🔥 abaixo do botão */
  right: 0;                /* alinhado com o botão */

  display: flex;
  gap: 6px;

  background: #ffffff;
  border-radius: 999px;
  padding: 6px 8px;

  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
  z-index: 999;
}

/* botões do picker */
#reactionPicker button {
  background: transparent;
  border: none;

  font-size: 18px;
  line-height: 1;

  cursor: pointer;
  transition: transform 0.12s ease;
}

#reactionPicker button:hover {
  transform: scale(1.25);
}

/* =====================================================
   REAÇÕES INLINE NA FRASE
===================================================== */
.news-inline-reactions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  flex-shrink: 0;
}

/* reação com contador */
.news-react {
  display: inline-flex;
  align-items: center;
  gap: 3px;

  background: rgba(255,255,255,0.35);
  border: none;
  border-radius: 999px;

  padding: 1px 6px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;

  cursor: pointer;
  color: #0d47a1;

  transition: background 0.15s ease, transform 0.1s ease;
}

.news-react:hover {
  background: rgba(255,255,255,0.55);
  transform: translateY(-1px);
}

.news-react:active {
  transform: scale(0.94);
}

/* =====================================================
   MOBILE – AJUSTE FINO
===================================================== */
@media (max-width: 768px) {
  #newsTrack {
    font-size: 0.85rem;
    gap: 6px;
  }

  .react-emoji-btn {
    font-size: 13px;
    padding: 2px 5px;
  }

  #reactionPicker button {
    font-size: 17px;
  }
}
/* =====================================================
   STATS PREMIUM FINAL
   MOBILE FIRST + DONUT UI
   ISOLADO EM #stats
===================================================== */

/* =====================================================
   WRAPPER
===================================================== */

#stats .stats-wrapper{
    display:flex;
    flex-direction:column;
    gap:22px;

    padding:14px 0 120px;
}

/* =====================================================
   TITLES
===================================================== */

#stats .stats-section h3{
    display:flex;
    align-items:center;
    gap:10px;

    position:relative;

    margin:4px 0 8px;
    padding-left:14px;

    font-size:.95rem;
    font-weight:900;
    letter-spacing:.7px;
    text-transform:uppercase;

    color:#f5f7fa;
}

#stats .stats-section h3::before{
    content:"";

    position:absolute;
    left:0;

    width:4px;
    height:22px;

    border-radius:999px;

    background:
        linear-gradient(
            180deg,
            #6dff7a,
            #00c853
        );

    box-shadow:
        0 0 14px rgba(0,255,120,.5);
}

/* =====================================================
   FAVORITOS AO TITULO
===================================================== */

#stats .chart-card{
    position:relative;

    padding:14px !important;

    border-radius:24px;

    overflow:hidden;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.05),
            rgba(255,255,255,.015)
        );

    border:1px solid rgba(255,255,255,.06);

    backdrop-filter:blur(18px);

    box-shadow:
        0 12px 32px rgba(0,0,0,.32);
}

#stats .chart-card::before{
    content:"";

    position:absolute;
    inset:0;

    background:
        radial-gradient(
            circle at top left,
            rgba(0,255,120,.08),
            transparent 40%
        );

    pointer-events:none;
}

#stats .chart-wrapper{
    display:flex;
    align-items:center;
    gap:10px;

    min-height:170px;
}

#stats #chartChampions{
    max-height:170px !important;
    width:100% !important;

    background:transparent !important;
}

#stats .chart-side-logos{
    gap:8px !important;
    padding-left:8px !important;

    border-left:none !important;
}

#stats .chart-side-logos .flag-wrapper-stats{
    width:26px;
    height:26px;

    border-radius:10px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.08),
            rgba(255,255,255,.03)
        );

    padding:4px;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 4px 10px rgba(0,0,0,.25);
}

/* =====================================================
   TABS
===================================================== */

#stats .stats-tabs{
    display:flex;

    padding:5px;

    border-radius:18px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.07),
            rgba(255,255,255,.025)
        );

    border:1px solid rgba(255,255,255,.05);

    backdrop-filter:blur(14px);

    box-shadow:
        0 10px 28px rgba(0,0,0,.25),
        inset 0 1px 0 rgba(255,255,255,.04);
}

#stats .tab-btn{
    flex:1;

    height:48px;

    border:none;
    border-radius:14px;

    background:transparent;

    color:#8d939c;

    font-size:.9rem;
    font-weight:800;

    cursor:pointer;

    transition:.25s ease;
}

#stats .tab-btn.active{
    color:#7CFF8A;

    background:
        linear-gradient(
            180deg,
            rgba(60,255,120,.18),
            rgba(60,255,120,.08)
        );

    border:1px solid rgba(124,255,138,.18);

    box-shadow:
        0 0 18px rgba(0,255,120,.12),
        inset 0 1px 0 rgba(255,255,255,.05);
}

/* =====================================================
   FAVORITES GRID
===================================================== */

#stats .favorites-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);

    gap:14px;
}

#stats .fav-card{
    position:relative;

    padding:16px !important;

    border-radius:24px;

    overflow:hidden;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.018)
        );

    border:1px solid rgba(255,255,255,.06);

    backdrop-filter:blur(18px);

    box-shadow:
        0 12px 32px rgba(0,0,0,.28);

    transition:.25s ease;
}

#stats .fav-card:hover{
    transform:translateY(-2px);

    box-shadow:
        0 18px 40px rgba(0,0,0,.36);
}

#stats .fav-card::before{
    content:"";

    position:absolute;
    inset:0;

    background:
        radial-gradient(
            circle at top left,
            rgba(0,255,120,.10),
            transparent 40%
        );

    pointer-events:none;
}

#stats .fav-card strong{
    display:block;

    margin-bottom:12px;

    color:#72ff8f;

    font-size:.8rem;
    font-weight:900;

    letter-spacing:.5px;
    text-transform:uppercase;
}

#stats .fav-item{
    display:flex;
    justify-content:space-between;
    align-items:center;

    margin-bottom:12px;

    color:#f3f5f7;
}

#stats .fav-item:last-child{
    margin-bottom:0;
}

#stats .fav-item .badge{
    min-width:30px;
    height:30px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:10px;

    background:
        linear-gradient(
            180deg,
            #20242b,
            #15181e
        );

    border:1px solid rgba(255,255,255,.04);

    color:#fff;

    font-size:.78rem;
    font-weight:900;
}

/* =====================================================
   ACCORDION
===================================================== */

#stats .group-accordion{
    overflow:hidden;

    border-radius:28px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.05),
            rgba(255,255,255,.015)
        );

    border:1px solid rgba(255,255,255,.06);

    backdrop-filter:blur(18px);

    box-shadow:
        0 15px 38px rgba(0,0,0,.34);

    margin-bottom:18px;
}

#stats .accordion-header{
    padding:20px;

    display:flex;
    justify-content:space-between;
    align-items:center;

    cursor:pointer;

    color:#f3f5f7;

    font-size:1rem;
    font-weight:900;
}

#stats .accordion-header i{
    color:#8d939c;
}

#stats .accordion-content{
    display:grid;
    gap:16px;

    padding:16px !important;
}

/* =====================================================
   DONUT MATCH CARD - VERTICAL LAYOUT
===================================================== */

#stats .modern-match-card{
    position:relative;

    padding:16px;

    border-radius:24px;

    overflow:hidden;

    background:
        linear-gradient(
            180deg,
            rgba(28,32,40,.96),
            rgba(10,12,18,.96)
        );

    border:1px solid rgba(255,255,255,.07);

    backdrop-filter:blur(16px);

    box-shadow:
        0 12px 34px rgba(0,0,0,.42);

    transition:
        transform .22s ease,
        box-shadow .22s ease;
}

#stats .modern-match-card::before{
    content:"";

    position:absolute;
    inset:0;

    background:
        radial-gradient(
            circle at top left,
            rgba(0,255,120,.10),
            transparent 42%
        );

    pointer-events:none;
}

#stats .modern-match-card:hover{
    transform:translateY(-2px);

    box-shadow:
        0 18px 42px rgba(0,0,0,.48);
}

/* =====================================================
   MAIN LAYOUT
===================================================== */

#stats .match-layout{
    display:grid;

    grid-template-columns:
        1fr
        82px;

    gap:16px;

    align-items:center;
}

/* =====================================================
   INFO
===================================================== */

#stats .match-info{
    display:flex;
    flex-direction:column;

    gap:12px;
}

/* =====================================================
   ROWS
===================================================== */

#stats .stat-row{
    display:flex;
    justify-content:space-between;
    align-items:center;

    gap:12px;
}

/* =====================================================
   TEAM BLOCK
===================================================== */

#stats .stat-team{
    display:flex;
    align-items:center;

    gap:8px;

    min-width:0;
}

/* =====================================================
   TEAM NAMES
===================================================== */

#stats .stat-team span{
    font-size:.9rem;
    font-weight:800;
    line-height:1.15;

    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;

    color:#f5f7fa;

    text-shadow:
        0 1px 2px rgba(0,0,0,.4);
}

/* =====================================================
   DRAW LABEL
===================================================== */

#stats .draw-label{
    color:#ffd95b !important;
}

/* =====================================================
   PERCENTAGES
===================================================== */

#stats .stat-row strong{
    font-size:.92rem;
    font-weight:900;

    flex-shrink:0;
}

/* COLORS */

#stats .team-a-row strong{
    color:#72ff92;
}

#stats .draw-row strong{
    color:#ffd95b;
}

#stats .team-b-row strong{
    color:#7fb2ff;
}

/* =====================================================
   FLAGS
===================================================== */

#stats .flag-wrapper-stats{
    width:18px;
    height:18px;

    display:flex;
    align-items:center;
    justify-content:center;

    flex-shrink:0;
}

/* =====================================================
   DONUT
===================================================== */

#stats .match-donut-wrapper{
    position:relative;

    display:flex;
    align-items:center;
    justify-content:center;
}

#stats .match-donut{
    width:72px;
    height:72px;

    transform:rotate(-90deg);

    filter:
        drop-shadow(0 0 12px rgba(0,0,0,.55))
        drop-shadow(0 0 8px rgba(0,255,120,.06));
}

#stats .match-donut circle{
    transition:
        stroke-dasharray .5s ease,
        stroke-dashoffset .5s ease;

    stroke-linecap:round;
}

/* =====================================================
   DONUT CENTER
===================================================== */

#stats .donut-center{
    position:absolute;
    inset:0;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:.72rem;
    font-weight:900;

    color:#ffffff;

    pointer-events:none;
}

/* =====================================================
   WINNER
===================================================== */

#stats .winner-team{
    color:#ffe45f !important;

    text-shadow:
        0 0 14px rgba(255,225,90,.22);
}

/* =====================================================
   HR
===================================================== */

#stats hr{
    border:none;
    height:1px;

    margin:8px 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.12),
            transparent
        );
}

/* =====================================================
   MOBILE
===================================================== */

@media(max-width:600px){

    #stats .modern-match-card{
        padding:14px;
    }

    #stats .match-layout{
        grid-template-columns:
            1fr
            74px;

        gap:14px;
    }

    #stats .match-info{
        gap:10px;
    }

    #stats .stat-team{
        gap:6px;
    }

    #stats .stat-team span{
        font-size:.84rem;
    }

    #stats .stat-row strong{
        font-size:.84rem;
    }

    #stats .flag-wrapper-stats{
        width:16px;
        height:16px;
    }

    #stats .match-donut{
        width:64px;
        height:64px;
    }

    #stats .donut-center{
        font-size:.66rem;
    }
}
/* =====================================================
   DONUT NO FINAL DO CARD
===================================================== */

/* layout */

#stats .match-layout{

    display:grid !important;

    grid-template-columns:
        minmax(0,1fr)
        auto !important;

    align-items:center !important;

    width:100% !important;
}

/* info ocupa tudo */

#stats .match-info{
    min-width:0 !important;

    padding-right:8px !important;
}

/* donut */

#stats .match-donut-wrapper{

    width:72px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;

    margin-left:auto !important;
    margin-right:-2px !important;
}

/* svg */

#stats .match-donut{

    width:62px !important;
    height:62px !important;

    margin-left:auto !important;
}

/* mobile */

@media(max-width:600px){

    #stats .match-donut-wrapper{

        width:66px !important;

        margin-right:-4px !important;
    }

    #stats .match-donut{

        width:58px !important;
        height:58px !important;
    }
}
/* =====================================================
   ANIMATION
===================================================== */

@keyframes slideDown{
    from{
        opacity:0;
        transform:translateY(-8px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* =====================================================
   MOBILE
===================================================== */

@media(max-width:600px){

    #stats .favorites-grid{
        grid-template-columns:1fr 1fr;
        gap:10px;
    }

    #stats .fav-card{
        padding:14px !important;
    }

    #stats .modern-match-card{
        padding:14px;
    }

    #stats .match-row-top{
        grid-template-columns:
            minmax(0,1fr)
            62px
            minmax(0,1fr);

        gap:8px;
    }

    #stats .team-stat-info{
        gap:6px;
    }

    #stats .team-stat-info span{
        font-size:.82rem;
    }

    #stats .flag-wrapper-stats{
        width:18px;
        height:18px;
    }

    #stats .match-donut{
        width:52px;
        height:52px;
    }

    #stats .donut-center{
        font-size:.62rem;
    }

    #stats .match-percentages{
        margin-top:10px;
    }

    #stats .match-percentages span{
        font-size:.68rem;
    }

    #stats .chart-card{
        padding:12px !important;
        border-radius:22px;
    }

    #stats .chart-wrapper{
        min-height:150px;
    }

    #stats #chartChampions{
        max-height:150px !important;
    }

    #stats .chart-side-logos{
        gap:6px !important;
    }

    #stats .chart-side-logos .flag-wrapper-stats{
        width:22px;
        height:22px;
    }
}

/* =========================================
   CONTROLE DE NAVEGAÇÃO DEFINITIVO
   ========================================= */

/* 1. RESET: Esconde tudo por padrão e limpa tela de login */
.tabs, #app-nav {
    display: none !important;
}

/* 2. REGRAS PARA MOBILE (Telas até 768px) */
@media (max-width: 768px) {
    /* Bloqueia abas superiores no celular */
    .tabs {
        display: none !important;
    }
    /* Mostra barra inferior apenas se o app estiver ativo */
    body.has-app-nav #app-nav {
        display: flex !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 9999;
        background: white; /* Garanta que tenha fundo para aparecer sobre o conteúdo */
    }
}

/* 3. REGRAS PARA DESKTOP (Telas maiores que 768px) */
@media (min-width: 769px) {
    /* Mostra abas superiores no PC */
    body.has-app-nav .tabs {
        display: flex !important;
    }
    /* Esconde barra inferior no PC */
    #app-nav {
        display: none !important;
    }
}
/* ================================================= */
/* SISTEMA DE ACORDEÕES (GRUPOS E MATA-MATA)         */
/* ================================================= */

.accordion-item { 
  border: none;
  border-radius: 12px; 
  margin-bottom: 6px; 
  overflow: hidden; 
  background: #fff; 
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.accordion-header { 
  width: 100%; 
  padding: 12px 15px; 
  background: #f8f9fa; 
  border: none; 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  cursor: pointer;
  transition: background 0.2s;
}

.accordion-header:hover {
  background: #f0f1f2;
}

/* Container principal do header */
.accordion-info { 
  width: 100%;
  display: flex; 
  flex-direction: column; 
  align-items: flex-start; 
  text-align: left; 
}

/* Linha superior: título à esquerda, pts à direita */
.accordion-top {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.accordion-title {
    font-weight: bold;
    font-size: 1rem;
    color: #d5bebe;
}    

.accordion-pts { 
  font-size: 0.8rem; 
  color: #28a745; 
  font-weight: bold; 
}

/* Conteúdo interno do acordeão */
.accordion-content { 
  display: none; 
  padding: 0; 
  border-top: 1px solid #eee; 
  background: #fff;
}

/* Estado ativo */
.accordion-item.active .accordion-content { 
  display: block; 
}

.accordion-item.active .chevron { 
  transform: rotate(180deg); 
}

.chevron { 
  transition: transform 0.3s; 
  font-style: normal; 
  color: #666;
  font-size: 0.8rem;
}

/* ================================================= */
/* 🔥 PROGRESSO DO MATA-MATA                         */
/* ================================================= */

.phase-progress {
  margin-top: 6px;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Barra (fundo neutro) */
.progress-bar {
  flex: 1;
  height: 6px;
  background: #e6e6e6;
  border-radius: 999px;
  overflow: hidden;
}

/* ===================== */
/* MODO 1 — DECISÕES     */
/* ===================== */
.progress-fill.decisions {
  height: 100%;
  background: linear-gradient(90deg, #28a745, #5fd38d); /* verde */
  border-radius: 999px;
  transition: width 0.3s ease;
}

/* ===================== */
/* MODO 2 — JOGOS        */
/* ===================== */
.progress-fill.games {
  height: 100%;
  background: linear-gradient(90deg, #007bff, #4da3ff); /* azul */
  border-radius: 999px;
  transition: width 0.3s ease;
}

/* Texto 4 / 8 */
.progress-text {
    font-size: 0.75rem;
    color: #ab9b9b;
    min-width: 48px;
    text-align: right;
}


/* ================================================= */
/* FILTRO POR PILLS (GRUPO / DATA)                   */
/* ================================================= */

.filter-pills {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  justify-content: center;
  background: #e9ecef;
  padding: 5px;
  border-radius: 50px;
  max-width: fit-content;
  margin: 0 auto 20px auto;
}

.pill {
  border: none;
  padding: 8px 20px;
  border-radius: 25px;
  background: transparent;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  color: #666;
  transition: all 0.2s ease;
}

.pill.active {
  background: #fff;
  color: #007bff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* ================================================= */
/* GRID DE CARDS (DENTRO DO ACORDEÃO)                */
/* ================================================= */

.group-matches-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  margin-top: 8px;
  width: 100%;
  padding: 0;

}

/* Ajuste para Mobile */
@media (max-width: 600px) {
  .group-matches-grid {
    grid-template-columns: 1fr;
  }
  
  .accordion-header {
    padding: 10px;
  }
}
/* Container das mensagens */
#global-messages {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000; /* Garante que fique acima de tudo */
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 90%;
  max-width: 400px;
  pointer-events: none; /* Não bloqueia cliques no fundo */
}

/* Estilo individual de cada brinde */
.toast {
  pointer-events: auto;
  padding: 12px 20px;
  border-radius: 8px;
  color: white;
  font-weight: bold;
  text-align: center;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  transition: opacity 0.3s ease;
  animation: slideDown 0.4s ease-out;
}

/* Cores por tipo */
.toast.success { background-color: #28a745; }
.toast.error { background-color: #dc3545; }
.toast.info { background-color: #17a2b8; }
.toast.warning { background-color: #ffc107; color: #333; }

/* Animação de entrada */
@keyframes slideDown {
  from { transform: translateY(-100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
/* ============================================================
   ESTILOS DO DUELO - PERFIL (MODERNIZADO)
============================================================ */

/* Abas Principais com Sliding Indicator */
.profile-tabs {
    display: flex;
    justify-content: center;
    gap: 0;
    margin-bottom: 20px;
    background: #f0f2f5;
    padding: 5px;
    border-radius: 35px;
    position: relative;
    width: 280px; 
    margin-left: auto;
    margin-right: auto;
}

.tab-slider {
    position: absolute;
    top: 5px;
    left: 5px;
    height: calc(100% - 10px);
    width: calc(50% - 5px);
    background: rgba(25, 118, 210, 0.8);
    border-radius: 30px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
    box-shadow: 0 4px 12px rgba(25, 118, 210, 0.2);
}

.tab-pill {
    flex: 1;
    border: none;
    background: transparent !important;
    padding: 10px 0;
    border-radius: 30px;
    font-weight: 700;
    cursor: pointer;
    color: #666;
    transition: 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    z-index: 2;
}

.tab-pill.active {
    color: white !important;
}

.tab-pill span {
    font-size: 1.2rem;
    line-height: 1;
    display: flex;
    align-items: center;
}

/* Navegação de Fases */
.duel-phase-nav {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 15px;
}

.phase-btn {
    border: 1px solid #ddd;
    background: white;
    padding: 6px 15px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

.phase-btn.active {
    border-color: #1976d2;
    color: #1976d2;
    background: #e3f2fd;
}

/* Acordeão do Duelo */
.duel-accordion-item {
    background: white;
    border-radius: 12px;
    margin-bottom: 10px;
    border: 1px solid #eee;
    overflow: hidden;
}

.duel-accordion-header {
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-weight: 800;
    background: #fafafa;
}

.duel-accordion-header span {
    font-size: 0.85rem;
    letter-spacing: 0.5px;
}

.duel-accordion-body {
    display: none;
    padding: 10px;
}

.duel-accordion-item.open .duel-accordion-body {
    display: block;
}

.duel-accordion-item.open .duel-accordion-header i {
    transform: rotate(180deg);
}

/* Cards de Comparação (Chips) - COMPACTADO */
.chip {
    border-radius: 12px;
    padding: 8px 12px !important; /* Reduzido para diminuir a altura do card */
    margin-bottom: 8px;           /* Cards mais próximos um do outro */
    border-left: 5px solid #ccc;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}



/* Tipografia e Contraste nos Nomes das Seleções - COMPACTADO */
.match-main-info {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    font-weight: 900;
    margin-bottom: 4px; /* Reduzido para aproximar as informações */
    color: #222;
    white-space: nowrap;
}

/* Pill do Placar (Suavizado) */
.duel-score-pill {
    background: #f0f2f5; 
    color: #222;
    border: 1px solid #ddd;
    padding: 3px 12px;
    border-radius: 6px;
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-size: 1rem;
    font-weight: bold;
    min-width: 60px;
    text-align: center;
    letter-spacing: 1px;
}

.comparison-grid {
    display: grid;
    grid-template-columns: 1fr 60px 1fr;
    align-items: center;
    gap: 10px;
}

.user-bet {
    display: flex;
    flex-direction: column;
}

.label-side {
    font-size: 0.65rem;
    color: #999;
    font-weight: 800;
    text-transform: uppercase;
}

.user-bet strong {
    font-size: 0.9rem;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ÍCONES DE DUELO - COMPACTADO PARA DIMINUIR CARD */
.status-icon {
    text-align: center;
    font-size: 2.8rem !important; 
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px; /* Reduzido para achatar o card mantendo o ícone perfeito */
    margin: -2px 0;   /* Ajuste fino para economizar espaço vertical */
}


/* ============================================================
   DUELO — DROPDOWN DE USUÁRIOS (PERFIL PRIVADO)
   (NÃO AFETA PERFIL PÚBLICO)
============================================================ */

#profile-duel {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Wrapper do seletor */
.duel-user-select-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

/* Select estilizado */
#duelUserSelect {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    background: #000000;
    border: 1px solid #ddd;
    border-radius: 20px;
    padding: 8px 40px 8px 15px;

    font-size: 0.85rem;
    font-weight: 700;
    color: #333;

    cursor: pointer;
    min-width: 240px;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 14px;

    transition: all 0.2s ease;
}

#duelUserSelect:hover {
    border-color: #1976d2;
}

#duelUserSelect:focus {
    outline: none;
    border-color: #1976d2;
    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.15);
}

/* Mensagem placeholder dentro do container */
#profile-duel-container > p {
    text-align: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: #777;
    margin-top: 20px;
}

/* Responsivo */
@media (max-width: 480px) {
    #duelUserSelect {
        width: 100%;
        max-width: 100%;
    }
}
/* =========================
   FILTROS — ALL BETS (FINAL)
========================= */

/* Card de filtros */
#all-bets .filters.card {
  overflow: hidden;
}

/* Header clicável */
#all-bets .filters-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  cursor: pointer;
  font-weight: 600;
}

/* Ícone da seta */
#all-bets .filters-header .toggle-icon {
  transition: transform 0.3s ease;
}

/* Seta girada quando ativo */
#all-bets .filters-header.active .toggle-icon {
  transform: rotate(180deg);
}

/* Corpo do filtro */
#all-bets .filters-body {
  display: none;
  padding: 16px;
  border-top: 1px solid #eee;
}

/* Quando aberto */
#all-bets .filters-body.show {
  display: block;
}

/* Desktop: filtros sempre visíveis */
@media (min-width: 768px) {
  #all-bets .filters-body {
    display: block !important;
  }
}

/* =========================
   LAYOUT DOS CAMPOS (2 COLUNAS SEMPRE)
========================= */

#all-bets .filters-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Campos que ocupam a linha inteira */
#all-bets .filters-grid .full {
  grid-column: 1 / -1;
}

/* Garante que CSS antigo não quebre o grid */
#all-bets .filters-grid .form-group {
  width: auto !important;
  display: block;
}

/* =========================
   BOTÕES
========================= */

#all-bets .filters-actions {
  display: flex;
  gap: 12px;
  margin-top: 14px;
}

#all-bets .filters-actions .btn {
  flex: 1;
}

#all-bets .btn-export {
  width: 100%;
  margin-top: 12px;
}

/* =========================
   MOBILE (FORÇADO IGUAL AO DESKTOP)
========================= */
/* NÃO empilha campos no mobile */
/* Layout fica idêntico ao print */

/* =========================
   CLASSIFICADO — ALL BETS
========================= */

.qualifier-underline {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}

/* ACERTO */
.q-win {
  color: #198754;
}

.q-win::after {
  content: " ✓";
  font-weight: 900;
}

/* ERRO */
.q-lose {
  color: #dc3545;
}

.q-lose::after {
  content: " ✖";
  font-weight: 900;
}

/* PENDENTE */
.q-pending {
  color: #6c757d;
  text-decoration-style: dotted;
}

/* =========================
   🔘 Switch ON / OFF
========================= */
.switch {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 24px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: #777;
  transition: 0.3s;
  border-radius: 24px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #e74c3c; /* vermelho = bloqueado */
}

input:checked + .slider:before {
  transform: translateX(22px);
}

/* =========================
   MY BETS — BASE
========================= */
#user-bets-container {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ============================================================
   PÓDIO — PREMIUM DASHBOARD (ESTILO ATUALIZADO)
============================================================ */
.podium-modern {
    background: #f8f9fa;
    border-radius: 24px;
    padding: 20px 14px;
    margin-bottom: 20px;
}

.podium-header {
    font-size: 13px;
    font-weight: 800;
    color: #1a237e;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    text-align: center;
    margin-bottom: 18px;
    opacity: 0.7;
}

.podium-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.podium-item {
    background: #ffffff;
    border-radius: 18px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.02);
    border: 1px solid rgba(0,0,0,0.05);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
}

/* Badge do Rank (O círculo da esquerda) */
.rank-badge {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 13px;
    background: #f0f0f0;
    color: #888;
    flex-shrink: 0;
}

.podium-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

.podium-label {
    font-size: 9px;
    font-weight: 700;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.podium-team-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.podium-team-name {
    font-size: 14px;
    font-weight: 700;
    color: #222;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.podium-status {
    width: 22px;
    display: flex;
    justify-content: center;
    font-size: 14px;
}

/* ============================================================
   LÓGICA DE ACERTO (HIT) — CORES DOS METAIS
============================================================ */

/* 1º Lugar - Ouro */
.podium-item.rank-first.podium-hit {
    background: linear-gradient(90deg, #fffdf0 0%, #fff9c4 100%) !important;
    border: 2px solid #ffd700 !important;
    box-shadow: 0 8px 20px rgba(255, 215, 0, 0.25);
}
.rank-first.podium-hit .rank-badge { background: #ffd700; color: #7b6000; }

/* 2º Lugar - Prata */
.podium-item.rank-second.podium-hit {
    background: linear-gradient(90deg, #f5f7fa 0%, #e0e0e0 100%) !important;
    border: 2px solid #bdc3c7 !important;
    box-shadow: 0 8px 20px rgba(189, 195, 199, 0.2);
}
.rank-second.podium-hit .rank-badge { background: #bdc3c7; color: #2c3e50; }

/* 3º Lugar - Bronze */
.podium-item.rank-third.podium-hit {
    background: linear-gradient(90deg, #fff5f2 0%, #ffccbc 100%) !important;
    border: 2px solid #cd7f32 !important;
    box-shadow: 0 8px 20px rgba(205, 127, 50, 0.2);
}
.rank-third.podium-hit .rank-badge { background: #cd7f32; color: #fff; }

/* 4º Lugar - Cobre (Bronze Escuro) */
.podium-item.rank-fourth.podium-hit {
    background: linear-gradient(90deg, #fdf5f2 0%, #efe0d8 100%) !important;
    border: 2px solid #a0522d !important;
    box-shadow: 0 8px 20px rgba(160, 82, 45, 0.15);
}
.rank-fourth.podium-hit .rank-badge { background: #a0522d; color: #fff; }

/* Classes de apoio para o check/erro */
.qualified-correct { color: #2e7d32; font-weight: bold; }
.qualified-wrong { color: #d32f2f; opacity: 0.6; }
/* =========================
   NOVAS ABAS (ESTILO PROFILE)
========================= */
.profile-tabs {
    display: flex;
    justify-content: center;
    gap: 0;
    margin: 10px auto 20px auto;
    background: #f0f2f5;
    padding: 5px;
    border-radius: 35px;
    position: relative;
    width: 280px; 
}

.tab-slider {
    position: absolute;
    top: 5px;
    left: 5px;
    height: calc(100% - 10px);
    width: calc(50% - 5px);
    background: #1976d2; /* Cor azul do seu projeto */
    border-radius: 30px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
    box-shadow: 0 4px 12px rgba(25, 118, 210, 0.2);
}

.tab-pill {
    flex: 1;
    border: none;
    background: transparent !important;
    padding: 10px 0;
    border-radius: 30px;
    font-weight: 700;
    cursor: pointer;
    color: #666;
    transition: 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    font-size: 14px;
    outline: none;
}

.tab-pill.active {
    color: white !important;
}

/* =========================
   ACORDEÃO (MANTIDO ORIGINAL)
========================= */
.accordion-item {
  background: #fff;
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
}

.accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  cursor: pointer;
  color: beige;
}

.accordion-pts {
  color: #2e7d32;
  font-weight: 700;
}

.phase-progress {
  margin: 8px 0 12px;
}

.progress-bar {
  height: 6px;
  background: #e0e0e0;
  border-radius: 999px;
  overflow: hidden;
}

.progress-fill.games {
  height: 100%;
  background: linear-gradient(90deg, #007bff, #4da3ff);
  border-radius: 999px;
  transition: width 0.3s ease;
}

.progress-text {
  font-size: 12px;
  opacity: .7;
  margin-top: 4px;
  text-align: right;
}


/* Cards de Mata-Mata - Estilo My Bets */
.match-card.hit-full {
    background-color: #e8f5e9 !important; /* Verde suave */
    border-left: 5px solid #2e7d32;
}

.match-card.hit-partial {
    background-color: #fffde7 !important; /* Amarelo suave */
    border-left: 5px solid #fbc02d;
}

.match-card.hit-none {
    background-color: #ffeef0 !important; /* Vermelho suave */
    border-left: 5px solid #d32f2f;
}

/* Garante que o texto continue legível */
.match-card.hit-full .final-score, 
.match-card.hit-partial .final-score, 
.match-card.hit-none .final-score {
    font-weight: 600;
    margin-top: 8px;
}

/* Estilo Base do Card */
.match-card {
    background-color: #fff;
    border: 1px solid #eee;
    transition: all 0.3s ease;
    border-left: 5px solid transparent; /* Reserva o espaço da borda */
}

/* Acerto Total (Verde) - Grupos e Mata-Mata */
.match-card.hit-full {
    background-color: #e8f5e9 !important;
    border-left: 5px solid #2e7d32 !important;
    border-color: #c8e6c9;
}

/* Acerto Parcial (Amarelo) - Apenas Mata-Mata */
.match-card.hit-partial {
    background-color: #fffde7 !important;
    border-left: 5px solid #fbc02d !important;
    border-color: #fff9c4;
}

/* Erro (Vermelho) - Grupos e Mata-Mata */
.match-card.hit-none {
    background-color: #ffeef0 !important;
    border-left: 5px solid #d32f2f !important;
    border-color: #ffcdd2;
}

/* Destaque para os pontos ganhos */
.points-earned {
    font-weight: bold;
    color: #ffffff;
    margin-top: 5px;
    font-size: 0.9rem;
}
/* =========================================
   MODAL DETALHES – MODERNO (FINAL ALINHADO)
========================================= */

.details-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(8px);
  z-index: 10000;
  padding: 12px;
}

@media (min-width: 768px) {
  .details-modal {
    align-items: center;
  }
}

.details-modal-content {
  background: #ffffff;
  width: 100%;
  max-width: 680px;
  border-radius: 26px 26px 20px 20px;
  padding: 24px;
  box-shadow: 0 25px 60px rgba(0,0,0,0.35);
  animation: detailsSlideUp .25s ease;
  max-height: 90vh;
  overflow-y: auto;
}

@media (min-width: 768px) {
  .details-modal-content {
    border-radius: 22px;
  }
}

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

/* ================= HEADER ================= */

.details-header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}

.details-close {
  background: none;
  border: none;
  font-size: 1.6rem;
  cursor: pointer;
  opacity: 0.6;
  transition: 0.2s ease;
}

.details-close:hover {
  opacity: 1;
  transform: scale(1.15);
}

/* ================= SCORE CENTRALIZADO ================= */

.details-score {
  display: flex;
  justify-content: center;
  margin-bottom: 32px;
}

.details-score-teams {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-size: 1.05rem;
  font-weight: 700;
  text-align: center;
}

.details-score-number {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 1px;
}

/* ================= COLUNAS ================= */

.details-columns {
  display: grid;
  gap: 28px;
  align-items: stretch; /* 🔥 força todas as colunas mesma altura */
}

/* Desktop */
.details-columns.group {
  grid-template-columns: repeat(2, 1fr);
}

.details-columns.knockout {
  grid-template-columns: repeat(3, 1fr);
}

/* Mobile mantém layout em colunas */
@media (max-width: 700px) {
  .details-columns.group {
    grid-template-columns: repeat(2, 1fr);
  }

  .details-columns.knockout {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ================= COLUNA ================= */

.details-column {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  min-height: 100%;
}

/* ================= TÍTULO ================= */

.details-column-title {
  height: 52px; /* 🔥 altura fixa real */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.details-column-title.green {
  color: #1e7e34;
}

.details-column-title.yellow {
  color: #b8860b;
}

.details-column-title.red {
  color: #c0392b;
}

/* ================= CHIPS ================= */

.details-chip {
  width: 100%;
  background: #f5f6f8;
  padding: 10px 16px;
  border-radius: 50px;
  font-size: 0.85rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid rgba(0,0,0,0.06);
  transition: 0.2s ease;
}

.details-chip:hover {
  background: #eef1f5;
  transform: translateY(-2px);
}

/* ================= ESTADOS VAZIOS ================= */

.details-empty {
  text-align: center;
  padding: 40px 20px;
  color: #999;
  font-size: 0.9rem;
}

.details-empty-col {
  text-align: center;
  opacity: 0.35;
  font-size: 0.85rem;
  padding: 18px 0;
}

/* ================= CHIP CORES ================= */

.details-chip {
  width: 100%;
  padding: 10px 16px;
  border-radius: 50px;
  font-size: 0.85rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  border: 1px solid rgba(0,0,0,0.06);
  color: #222;
}

/* Acertou tudo */
.chip-full {
  background: #e8f7ee;
  color: #1e7e34;
}

/* Errou */
.chip-wrong {
  background: #fdeaea;
  color: #c0392b;
}

/* Parcial – acertou resultado */
.chip-partial-left {
  background: linear-gradient(
    to right,
    #e8f7ee 50%,
    #fdeaea 50%
  );
}

/* Parcial – acertou classificado */
.chip-partial-right {
  background: linear-gradient(
    to right,
    #fdeaea 50%,
    #e8f7ee 50%
  );
}
/* ============================================================
   ============================================================
        🟢 DUELO (MODELO SPLIT COM GRADIENTE)
   ============================================================
   ============================================================ */

/* Base SOMENTE do duelo */
.chip {
    display: flex;
    flex-direction: column;
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 12px;
    width: 100%;
    box-sizing: border-box;
    border: 2px solid rgba(0,0,0,0.08);
    background: #ffffff;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}

.chip:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* ============================================================
   PENDENTE (NUNCA COLORIDO)
   ============================================================ */

.chip.duel-pending {
    background: #f3f4f6 !important;
    border-color: rgba(0,0,0,0.08) !important;
}

/* ============================================================
   VARIÁVEIS CORES DUELO
   ============================================================ */

:root {
    --duel-green-bg: #ecfdf5;
    --duel-green-border: #22c55e;

    --duel-yellow-bg: #fefce8;
    --duel-yellow-border: #facc15;

    --duel-red-bg: #fef2f2;
    --duel-red-border: #ef4444;
}

/* ============================================================
   SPLIT COLORS (APENAS DUELO)
   ============================================================ */

/* iguais */

.chip.duel-split-green-green {
    background: linear-gradient(to right, var(--duel-green-bg) 50%, var(--duel-green-bg) 50%);
    border-color: var(--duel-green-border);
}

.chip.duel-split-red-red {
    background: linear-gradient(to right, var(--duel-red-bg) 50%, var(--duel-red-bg) 50%);
    border-color: var(--duel-red-border);
}

.chip.duel-split-yellow-yellow {
    background: linear-gradient(to right, var(--duel-yellow-bg) 50%, var(--duel-yellow-bg) 50%);
    border-color: var(--duel-yellow-border);
}

/* mistos */

.chip.duel-split-green-red {
    background: linear-gradient(to right, var(--duel-green-bg) 50%, var(--duel-red-bg) 50%);
    border-left-color: var(--duel-green-border);
    border-right-color: var(--duel-red-border);
}

.chip.duel-split-red-green {
    background: linear-gradient(to right, var(--duel-red-bg) 50%, var(--duel-green-bg) 50%);
    border-left-color: var(--duel-red-border);
    border-right-color: var(--duel-green-border);
}

.chip.duel-split-green-yellow {
    background: linear-gradient(to right, var(--duel-green-bg) 50%, var(--duel-yellow-bg) 50%);
    border-left-color: var(--duel-green-border);
    border-right-color: var(--duel-yellow-border);
}

.chip.duel-split-yellow-green {
    background: linear-gradient(to right, var(--duel-yellow-bg) 50%, var(--duel-green-bg) 50%);
    border-left-color: var(--duel-yellow-border);
    border-right-color: var(--duel-green-border);
}

.chip.duel-split-red-yellow {
    background: linear-gradient(to right, var(--duel-red-bg) 50%, var(--duel-yellow-bg) 50%);
    border-left-color: var(--duel-red-border);
    border-right-color: var(--duel-yellow-border);
}

.chip.duel-split-yellow-red {
    background: linear-gradient(to right, var(--duel-yellow-bg) 50%, var(--duel-red-bg) 50%);
    border-left-color: var(--duel-yellow-border);
    border-right-color: var(--duel-red-border);
}

/* ============================================================
   HEADER COMPARTILHADO (NÃO AFETA LÓGICA)
   ============================================================ */

.match-main-info {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-bottom: 12px;
}

.match-main-info strong {
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.match-main-info div:first-child {
    text-align: right;
    min-width: 0;
}

.match-main-info div:last-child {
    text-align: left;
    min-width: 0;
}

.duel-score-pill {
    background: rgba(0, 0, 0, 0.8);
    color: #fff !important;
    padding: 4px 10px;
    border-radius: 6px;
    font-weight: 800;
    font-size: 0.9rem;
    min-width: 42px;
    text-align: center;
}
.modal-content::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 10px;
}


/* Barra fixa no fim */
.save-bar {
  position: sticky;
  bottom: 0;
  background: #fff;
  border-top: 1px solid #eee;
  padding: 10px 0 12px;
  z-index: 50;

  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Botão */
.save-btn {
  width: min(420px, 95%);
}

/* Pendentes */
.pending-counter {
  margin-bottom: 6px;
  font-size: 0.8rem;
  color: #c0392b;
  display: none; /* JS controla */
}

/* Espaço para não cobrir conteúdo */
.tab-content {
  padding-bottom: 90px;
}

  /* ============================================================
   MY BETS (COM BORDA LATERAL ELEGANTE)
============================================================ */

.match-chip-2rows {
  position: relative;

  display: grid;
  grid-template-columns: auto auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 8px;

  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 10px;
  font-size: 13px;

  background: #fff;
  border: 1px solid #eee;

  align-items: center;
  transition: all 0.3s ease;
  overflow: hidden;
}

/* 🔥 FAIXA LATERAL PREMIUM */
.match-chip-2rows::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  border-radius: 14px 0 0 14px;
  background: #bdbdbd; /* padrão pendente */
}

/* =========================
   ESTADOS DO CARD
========================= */

/* 🟢 ACERTO TOTAL */
.match-chip-2rows.win {
  background: #e8f5e9;
}

.match-chip-2rows.win::before {
  background: #2e7d32;
}

/* 🟡 ACERTO PARCIAL */
.match-chip-2rows.partial {
  background: #fff9c4;
}

.match-chip-2rows.partial::before {
  background: #fbc02d;
}

/* 🔴 ERRO TOTAL */
.match-chip-2rows.loss {
  background: #ffebee;
}

.match-chip-2rows.loss::before {
  background: #ef5350;
}

/* ⚪ PENDENTE (nunca colorido) */
.match-chip-2rows.pending {
  background: #f5f5f5 !important;
}

.match-chip-2rows.pending::before {
  background: #bdbdbd;
}

/* ============================================================
   RESTO DO SEU LAYOUT (INALTERADO)
============================================================ */

.team-left {
  grid-column: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 8px;
  border-radius: 6px;
  max-width: 140px;
  transition: all 0.3s ease;
  justify-self: start;
  overflow: hidden;
}

.match-chip-2rows > div:nth-child(1) { grid-row: 1; }
.match-chip-2rows > div:nth-child(4) { grid-row: 2; }

.team-name {
  font-weight: 600;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.team-score {
  grid-column: 2;
  font-weight: 800;
  font-size: 15px;
  color: #222;
  text-align: left;
  padding-left: 4px;
  min-width: 20px;
  display: flex;
  align-items: center;
}

.match-chip-2rows > div:nth-child(2) { grid-row: 1; }
.match-chip-2rows > div:nth-child(5) { grid-row: 2; }

.points {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  font-weight: 800;
  font-size: 11px;
  padding: 2px 10px;
  border-radius: 20px;
  background: #2e7d32;
  color: #fff;
  box-shadow: 0 2px 4px rgba(46, 125, 50, 0.2);
}

.points:empty {
  display: none !important;
}

.pick-box {
  grid-column: 3;
  grid-row: 2;
  justify-self: end;
  font-size: 11px;
  color: #666;
  white-space: nowrap;
}

/* CLASSIFICADO */

.team-left.qualified.hit {
  background: #c8e6c9;
  border: 1px solid #4caf50;
  color: #1b5e20;
  box-shadow: 0 0 8px rgba(76, 175, 80, 0.2);
}

.team-left.qualified.miss {
  background: #ffcdd2;
  border: 1px solid #ef5350;
  color: #b71c1c;
}

.team-left.qualified:not(.hit):not(.miss) {
  background: #f1f1f1;
  border: 1px solid #ddd;
}

.flag {
  font-size: 16px;
  flex-shrink: 0;
}

@media (max-width: 400px) {
  .match-chip-2rows { column-gap: 8px; }
  .team-left { max-width: 100px; }
}

/* =========================================
   RANKING COMO CARD BRANCO DENTRO DO AZUL
========================================= */

#ranking.tab-content {
  background: #ffffff;
  border-radius: 22px;
  margin: 16px 12px 90px 12px; /* espaço lateral + espaço bottom nav */
  padding: 18px;
  box-shadow: 0 18px 45px rgba(0,0,0,0.15);
}

/* remove qualquer padding herdado */
#ranking {
  box-sizing: border-box;
}

/* mobile ajuste fino */
@media (max-width: 700px) {
  #ranking.tab-content {
    margin: 12px 10px 90px 10px;
    padding: 16px;
    border-radius: 18px;
  }
}
/* =========================================
   AJUSTE ESPECÍFICO: VOLTAR CARD NO RANKING
   ========================================= */

/* 1. Alvo: A aba de ranking (ajuste o ID #ranking se for diferente no seu HTML) */
#ranking.tab-content {
    background: #fff !important;    /* Devolve o fundo branco */
    border: 1px solid #e9ecef !important; /* Devolve a borda leve */
    border-radius: 12px !important;  /* Arredonda as pontas */
    box-shadow: 0 4px 12px rgba(0,0,0,.06) !important; /* Sombra sutil */
    margin-top: 16px;
    padding: 16px !important;
}

/* 2. Ajuste para o Mobile (Itens individuais) */
.ranking-mobile-item {
    background: #fff;
    margin-bottom: 8px;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid #eee;
}

/* 3. Garante que o cabeçalho da tabela de ranking fique visível */
.ranking-table th {
    background: #f8f9fa;
    border-radius: 4px;
}

/* =====================================================
   ESTILOS EXCLUSIVOS DO CONTAINER #all-bets-container
   ===================================================== */

/* Container de chips dentro do AllBets */
#all-bets-container .chips {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 10px;
}

/* O card de aposta gerado no allBets.js */
#all-bets-container .bet-card {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid rgba(0,0,0,0.1);
    background: #fdfdfd;
}

/* Sublinhado do palpite principal (Vencedor/Empate) */
#all-bets-container .pick-underline {
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 3px;
    padding: 0 2px;
}

/* Cores de acerto baseadas na lógica do JS */
#all-bets-container .pick-underline.win { text-decoration-color: #28a745; color: #155724; }
#all-bets-container .pick-underline.lose { text-decoration-color: #dc3545; color: #721c24; }

/* Cores do Card (Chip) - Lógica de cores do allBets.js */
#all-bets-container .bet-card.win { background: #e8f5e9; border-color: #28a745; color: #1b5e20; }
#all-bets-container .bet-card.lose { background: #ffebee; border-color: #dc3545; color: #b71c1c; }
#all-bets-container .bet-card.partial { background: #fff3e0; border-color: #ffb74d; color: #e65100; }
#all-bets-container .bet-card.pending { background: #f5f5f5; border-color: #bdbdbd; color: #616161; }

/* 🌟 Classificado (Glow) - Exclusivo para Mata-mata */
#all-bets-container .qualifier-glow {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    margin-left: 5px;
    text-transform: uppercase;
    color: #fff;
}

/* Acertou quem classifica (q-win no JS) */
#all-bets-container .qualifier-glow.q-win {
    background-color: #28a745;
    box-shadow: 0 0 8px rgba(40, 167, 69, 0.5);
}

/* Errou quem classifica (q-lose no JS) */
#all-bets-container .qualifier-glow.q-lose {
    background-color: #dc3545;
    box-shadow: 0 0 8px rgba(220, 53, 69, 0.4);
}

/* Aguardando (q-pending no JS) */
#all-bets-container .qualifier-glow.q-pending {
    background-color: #9e9e9e;
    box-shadow: none;
}

/* Ajuste para o conteúdo do matchDisplay */
#all-bets-container .match-content {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Estilo para padronizar os botões do painel Admin */
#btn-open-email-modal {
    width: 45px;          /* Ajuste para o tamanho dos seus outros ícones */
    height: 45px;
    border-radius: 10px;  /* Bordas arredondadas suaves */
    border: none;
    background-color: #5d5fef; /* Azul/Roxo do seu tema */
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 20px;      /* Tamanho do emoji ✉️ */
    transition: all 0.2s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

#btn-open-email-modal:hover {
    transform: scale(1.1);
    filter: brightness(1.2);
}

#btn-open-email-modal:active {
    transform: scale(0.95);
}


/* Estilo para o texto de "Bloqueado" nos palpites (Frontend) */
.locked-bet {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #999;
    font-style: italic;
    font-size: 0.9em;
}

.locked-bet i {
    font-size: 0.8em;
}

/* Ajuste de responsividade para os cards de duelo quando houver cadeado */
.chip.duel-split-pending-green, 
.chip.duel-split-pending-red {
    border-left: 5px solid #ccc; /* Lado do rival pendente/bloqueado */
}

/* ============================================================
   PAINEL ADMIN: CORREÇÃO DEFINITIVA DE LAYOUT MOBILE
   ============================================================ */

/* 1. Mantém o recuo para não sobrepor os botões de cima */
.admin-fases-drawer {
    margin-top: 15px !important; 
    margin-bottom: 10px !important;
    width: 100% !important;
}

/* 2. Grid de 4 colunas - BLINDAGEM CONTRA ESTOURO */
#admin-phase-controls .d-flex {
      display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important; 
    gap: 5px !important;
    
    /* CRUCIAL: Mudar para 100% e garantir que o padding não "empurre" para fora */
    width: 100% !important; 
    max-width: 100% !important;
    box-sizing: border-box !important; 
    
    padding: 10px 8px !important;
    background: rgba(0, 0, 0, 0.2) !important;
    border-radius: 8px !important;
    margin: 0 auto !important;
}

/* 3. Estilo dos Chips (Botões) */
#admin-phase-controls .btn {
    width: 100% !important;
    height: 32px !important; 
    font-size: 0.65rem !important; 
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 4px !important;
    border: none !important;
    padding: 0 2px !important;
    text-transform: capitalize !important;
    
    /* Impede que o texto force o botão a crescer além da coluna */
    min-width: 0 !important;
    overflow: hidden;
    white-space: nowrap;
}

/* 4. Cores de Status */
#admin-phase-controls .btn-success {
    background-color: #28a745 !important;
    color: #fff !important;
    font-weight: bold !important;
}

#admin-phase-controls .btn-outline-secondary {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.3) !important;
}

#admin-phase-controls .btn i {
    display: none !important;
}

/* 5. Proteção da Lista de Jogos */
#admin-matches-list {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important; 
    padding-bottom: 80px; /* Espaço para a barra de navegação */
}

/* 6. Tabela Admin com Scroll Interno Próprio */
.admin-card-table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important; 
    -webkit-overflow-scrolling: touch;
}

/* ============================================================
   NAV BOTTOM: FIXAÇÃO ABSOLUTA NO ECRÃ (VIEWPORT)
   ============================================================ */

.app-nav {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    
    /* FORÇA a largura a ser a do ecrã do telemóvel, ignorando erros do body */
    width: 100% !important; 
    max-width: 100% !important;
    
    background: #fff !important;
    display: flex !important;
    justify-content: space-around !important;
    align-items: center !important;
    padding: 10px 0 12px !important;
    border-top: 1px solid #ddd !important;
    z-index: 9999 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

/* 7. Blindagem Global (Mata o balanço lateral da página) */
html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
}
.container{
  width:100%;
  max-width:100%;
  padding:0 12px;
  box-sizing:border-box;
}
/* Container do Switch */
.switch {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 20px;
}

.switch input { opacity: 0; width: 0; height: 0; }

.slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .slider { background-color: #28a745; } /* Cor verde quando ativo */
input:checked + .slider:before { transform: translateX(18px); }
/* ==========================================
   PÓDIO ESPORTIVO (1º ao 4º Lugar)
   ========================================== */

/* Container Principal */
.podium-container {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: 24px;
  background: rgba(20, 24, 39, 0.7);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* Estrutura de Degraus (Top 3) */
.podium-wrapper {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 12px;
  height: 290px;
  margin-bottom: 30px;
}

.podium-track {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
  height: 100%;
}

.podium-selector {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

/* Pontuação dos Cards */
.podium-points {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
  font-weight: 500;
}

/* Estilização dos Selects */
.podium-select {
  width: 100%;
  padding: 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease;
}

.podium-select:focus {
  border-color: #00d2ff;
  background: rgba(255, 255, 255, 0.12);
  outline: none;
}

.podium-select option {
  background-color: #1a1e2e;
  color: #fff;
}

/* Badges de Posição */
.podium-badge {
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
  color: #fff;
}

.podium-badge.gold { background: linear-gradient(135deg, #ffd700, #ff8c00); color: #000; }
.podium-badge.silver { background: linear-gradient(135deg, #e2e8f0, #94a3b8); color: #000; }
.podium-badge.bronze { background: linear-gradient(135deg, #b87333, #8a4e1d); }
.podium-badge.leather { background: rgba(255,255,255,0.15); color: #fff; }

/* Indicadores de Acerto e Erro (JS) */
.podium-status {
  font-size: 14px;
  font-weight: bold;
  min-height: 16px;
}

/* Degraus Tridimensionais */
.podium-block {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 38px;
  border-radius: 12px 12px 0 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: none;
}

.position-1 .podium-block { 
  height: 120px; 
  background: linear-gradient(to bottom, rgba(255, 215, 0, 0.15), rgba(255, 255, 255, 0.02)); 
}
.position-2 .podium-block { 
  height: 80px; 
  background: linear-gradient(to bottom, rgba(226, 232, 240, 0.1), rgba(255, 255, 255, 0.02)); 
}
.position-3 .podium-block { 
  height: 50px; 
  background: linear-gradient(to bottom, rgba(184, 115, 51, 0.1), rgba(255, 255, 255, 0.02)); 
}

/* Estilização do 4º Lugar */
.podium-consolation {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 20px;
  display: flex;
  justify-content: center;
}

.consolation-item {
  display: flex;
  align-items: center;
  gap: 15px;
  background: rgba(0, 0, 0, 0.25);
  padding: 14px 20px;
  border-radius: 12px;
  width: 100%;
  max-width: 440px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.consolation-badge {
  display: flex;
  align-items: center;
}

.consolation-select-wrapper {
  flex: 1;
}
/* Container da Bandeira Estática do Pódio */
.big-flag-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 8px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  animation: popIn 0.3s ease-out;
}

.big-flag-display .flag-icon {
  font-size: 32px; /* Tamanho do emoji da bandeira */
  line-height: 1;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));
}

.big-flag-display .flag-team-name {
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
  text-align: center;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

@keyframes popIn {
  0% { transform: scale(0.8); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
/* ==========================================
   CARD DE JOGOS - LAYOUT VERTICAL
   ========================================== */

/* Container original das opções vira 3 colunas */
.bet-options {
  display: grid !important; 
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin: 15px 0;
  width: 100%;
}

/* O Botão original se adapta para empilhar os itens verticalmente */
.bet-option {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  padding: 12px 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #333;
  min-height: 105px; /* 🔥 Subi de 95px para 105px para dar respiro à bandeira maior */
  
  background: #ffffff !important; 
  border: 1.5px solid #d1d5db !important; 
  border-radius: 12px;
}

/* Hover apenas se não estiver desativado/finalizado */
.bet-option:not(:disabled):not(.selected):hover {
  background: #f3f4f6 !important;
  transform: translateY(-2px);
  border-color: #9ca3af !important;
}

/* Botão Selecionado NORMAL (Antes do jogo acabar) */
.bet-option.selected {
  background: #e0f2fe !important; 
  border-color: #0ea5e9 !important;
  color: #0369a1 !important;
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.2);
}

/* ==========================================
   🔥 CARD FINALIZADO (CORES OPACAS E BORDAS CLÁSSICAS)
   ========================================== */

/* --- SE ACERTOU O PALPITE (Verde) --- */
/* ============================================================
   ESTILIZAÇÃO MESTRE: METAL SOB VIDRO COLORIDO (HITS)
   ============================================================ */

/* 1. BASE DO CARD: MANTÉM O METAL E PREPARA PARA O VIDRO */
.match-card,
.match-card[class*="hit-"] {
    background: url('../img/card_grupos.webp') no-repeat center center !important;
    background-size: 100% 100% !important;
    background-color: #1a1a1a !important;
    border: none !important;
    position: relative !important;
    overflow: hidden !important; /* Garante que o efeito de vidro não escape */
    z-index: 1;
}

/* 2. CAMADA DE VIDRO COLORIDO (OVERLAY) */
/* Este pseudo-elemento cria a cor sem esconder a textura do metal */
.match-card[class*="hit-"]::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 2;
    mix-blend-mode: overlay !important; 
    opacity: 0.85 !important;
    transition: all 0.5s ease;
}

/* 3. CORES VIBRANTES DO VIDRO POR RESULTADO */

/* Vidro Verde (Acerto Total) */
.match-card.hit-full::before {
    background: linear-gradient(135deg, rgba(0, 255, 68, 0.5), rgba(0, 100, 30, 0.3)) !important;
    box-shadow: inset 0 0 60px rgba(0, 255, 68, 0.4) !important;
}

/* Vidro Amarelo/Ouro (Acerto Parcial) */
.match-card.hit-partial::before {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.5), rgba(184, 134, 11, 0.3)) !important;
    box-shadow: inset 0 0 60px rgba(255, 215, 0, 0.4) !important;
}

/* Vidro Vermelho Rubi (Erro Total) */
.match-card.hit-none::before {
    background: linear-gradient(135deg, rgba(255, 0, 0, 0.5), rgba(139, 0, 0, 0.3)) !important;
    box-shadow: inset 0 0 60px rgba(255, 0, 0, 0.4) !important;
}

/* 4. LIMPEZA DOS BOTÕES (MATA FUNDOS SÓLIDOS) */
div.match-card .bet-option,
div.match-card button.bet-option {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    z-index: 10 !important; /* Fica acima do vidro */
}

/* 5. DESTAQUE DO PALPITE (O QUE O USUÁRIO CLICOU) */
.match-card.hit-full .bet-option.selected .bet-team-vertical { 
    color: #00ff44 !important; -webkit-text-fill-color: #00ff44 !important; 
    text-shadow: 0 0 10px rgba(0, 255, 68, 0.8) !important; 
}
.match-card.hit-partial .bet-option.selected .bet-team-vertical { 
    color: #ffd700 !important; -webkit-text-fill-color: #ffd700 !important; 
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.8) !important; 
}
.match-card.hit-none .bet-option.selected .bet-team-vertical { 
    color: #ff3333 !important; -webkit-text-fill-color: #ff3333 !important; 
    text-shadow: 0 0 10px rgba(255, 0, 0, 0.8) !important; 
}

/* 6. ESCUDOS: COLORIDOS E VIBRANTES NO HIT */
.match-card[class*="hit-"] .bet-option.selected .team-logo-api {
    filter: grayscale(0%) brightness(1.2) contrast(1.1) !important;
    transform: scale(1.1) !important;
    z-index: 15 !important;
}

/* 7. RODAPÉ (MINI PLACAR NA FENDA) */
.match-card .knockout-footer-compact {
    position: absolute !important;
    bottom: 11px !important;
    width: 94% !important;
    left: 3% !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    z-index: 20 !important;
}

.match-card .match-score-wrapper img {
    filter: grayscale(0%) brightness(100%) !important;
    width: 18px !important;
    height: 18px !important;
}

/* ========================================== */

/* Estilo do Emoji e do Texto */
.bet-icon-vertical {
  font-size: 38px !important; /* 🔥 Aumentado com prioridade máxima */
  line-height: 1 !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15)) !important;
}

.bet-team-vertical {
  font-size: 12px !important;
  font-weight: 700 !important;
  text-align: center !important;
  white-space: normal !important;
  word-wrap: break-word !important;
  color: inherit !important;
}

/* Card cinza se ninguém foi clicado ainda (Pendente) */
.match-card:not(:has(.selected)):not(.hit-full):not(.hit-none) {
  background-color: #f4f4f5 !important;
  border: 1px solid #e4e4e7 !important;
}
/* Centraliza o texto do empate sozinho dentro do botão vertical */
.bet-option[data-choice="draw"] {
  justify-content: center !important; /* Centraliza verticalmente na altura de 105px */
}

/* Se quiser dar um leve destaque no tamanho da fonte do Empate para preencher o espaço */
.bet-option[data-choice="draw"] .bet-team-vertical {
  font-size: 14px !important;
  font-weight: 800 !important;
}
/* ==========================================
   📐 RODAPÉ ULTRA COMPACTO (MATA-MATA)
   ========================================== */

.knockout-footer-compact {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 15px;
  padding-top: 10px;
  
}

.qual-mini-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.qual-label {
  font-size: 13px;
  font-weight: 700;
  color: #333;
  white-space: nowrap;
}

/* Reduzido ao máximo e sem scroll */
.qual-mini-row select {
  padding: 4px 30px;
  border-radius: 6px;
  border: 1.5px solid #d1d5db;
  font-size: 13px;
  background-color: #fff;
  cursor: pointer;
  color: #333;
  width: 75px; /* Tamanho mini para caber apenas a sigla/emoji ou reticências */
}

.placar-mini {
  font-size: 13px;
  font-weight: 600;
  color: #fffbfb;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
}

.placar-mini span {
  font-weight: 800;
  color: #fff6f6;
}

.qualified-result {
  font-size: 14px;
  display: flex;
  align-items: center;
}
/* Efeito de Brilho para o Time Classificado no Mata-mata */
.team-glow-qualified {
  font-weight: bold;
  color: #ffffff; /* Garante que o texto fique legível */
  text-shadow: 
    0 0 5px #ffc107, 
    0 0 10px #ffc107, 
    0 0 15px #ff9800; /* Degradê de amarelo para laranja */
}
/* 🟢 Esquerda: Acertou Resultado | 🔴 Direita: Errou Classificado */
.chip-partial-left {
  background: linear-gradient(to right, #28a745 50%, #dc3545 50%) !important;
  color: #fff !important;
}

/* 🔴 Esquerda: Errou Resultado | 🟢 Direita: Acertou Classificado */
.chip-partial-right {
  background: linear-gradient(to right, #dc3545 50%, #28a745 50%) !important;
  color: #fff !important;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.paywall-container {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(10, 10, 10, 0.98);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999; /* Fica acima de tudo */
    padding: 20px;
}

.paywall-card {
    background: #1e1e1e;
    border: 2px solid #00ff00; /* Cor de destaque do bolão */
    padding: 40px;
    border-radius: 15px;
    max-width: 450px;
    text-align: center;
    box-shadow: 0 0 30px rgba(0, 255, 0, 0.2);
}

.pix-qr-container img {
    width: 200px;
    height: 200px;
    margin: 20px 0;
    border: 10px solid white;
    border-radius: 10px;
}

.pix-input-group {
    display: flex;
    margin-top: 15px;
    gap: 10px;
}

.pix-input-group input {
    flex: 1;
    background: #333;
    border: 1px solid #444;
    color: #00ff00;
    padding: 10px;
    border-radius: 5px;
    font-family: monospace;
}

.btn-refresh {
    margin-top: 25px;
    width: 100%;
    padding: 12px;
    background: #00ff00;
    color: black;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

/* Status dos jogos em andamento (Badges) */
.badge.in_progress, 
.badge.1_tempo, 
.badge.intervalo, 
.badge.2_tempo, 
.badge.prorrogacao,
.badge.1_tet,
.badge.2_tet, 
.badge.penaltis {
    background-color: #f39c12;
    color: white;
    font-weight: bold;
    padding: 2px 6px;
    font-size: 0.7rem;
}

/* ==========================================================================
   CARDS DE JOGO AO VIVO (LIVE)
   ========================================================================== */

/* --- ESTILO AO VIVO (Transmissão) --- */
.match-card.live-match-card:not(.match-finished) {
    background: linear-gradient(135deg, #bcdafc 0%, #c1ddfc 100%) !important;
    color: #fff !important;
    border: 1px solid #2f6e95 !important;
}

/* Bordas Live - Só aparecem se o card NÃO estiver finalizado */
.match-card.live-winning:not(.match-finished),
.match-card.live-winning-full:not(.match-finished) { border: 3px solid #2ecc71 !important; }
.match-card.live-winning-partial:not(.match-finished) { border: 3px solid #f1c40f !important; }
.match-card.live-losing:not(.match-finished) { border: 3px solid #e74c3c !important; }

/* --- ESTILO FINALIZADO (Fixo) --- */
.match-card.match-finished {
    background: #ffffff !important;
    color: #333 !important;
    border: 1px solid #eee !important;
}

.match-card.match-finished.hit-full {
    background-color: #e8f5e9 !important;
    border-left: 6px solid #2e7d32 !important;
}

.match-card.match-finished.hit-partial {
    background-color: #fffde7 !important;
    border-left: 6px solid #fbc02d !important;
}

.match-card.match-finished.hit-none {
    background-color: #ffeef0 !important;
    border-left: 6px solid #d32f2f !important;
}
/* ==========================================================================
   ELEMENTOS INTERNOS DOS CARDS
   ========================================================================== */

/* Header do horário agendado com o reloginho */
.scheduled-time-header {
    display: flex;
    justify-content: center;
    margin-bottom: 8px;
}

.time-wrapper {
   
    border-radius: 20px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    color: #2c3e50;
    font-size: 1.1rem;
}

.clock-icon {
    font-style: normal;
    font-size: 1rem;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.1));
}

/* Animação opcional para o minuto do jogo (piscar suave) */
.live-minute-inline {
    color: #e74c3c;
    font-weight: bold;
    animation: blink-live 1.5s infinite;
}

@keyframes blink-live {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

/* Ajuste para o placar grande no modo Live */
.score-container-header.big-score {
    padding: 5px 0;
    font-size: 1.2rem;
    font-weight: 900;
}

/* --- AJUSTE DE ALTURA ULTRA COMPACTO --- */

.match-card {
    padding: 6px 10px !important; /* Reduz o enchimento global do card */
    margin-bottom: 8px !important;
    margin-top: 55px;
}

.match-header.compact {
    min-height: 28px; /* Reduzi de 35px para 28px */
    padding: 0 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px;
}

.live-match-card .match-header.compact {
    min-height: 48px;
    padding: 2px 5px;
}

/* Badge de Pontuação (+1) - Ajuste para não empurrar o card */
.points-earned {
    margin: -10px auto 2px auto !important; /* Margem negativa sobe o badge */
    font-size: 0.75rem;
    padding: 1px 8px;
    display: table; /* Garante que ocupe apenas o espaço do texto */
}

/* Opções de Aposta mais achatadas */
.bet-options {
    padding: 2px 0 !important; 
    gap: 6px !important;
}

.bet-option {
    padding: 17px 12px !important; /* Menos espaço interno nos botões */
    min-height: 70px !important; /* Força o botão a ser mais baixo */
}

/* Placar Final (Rodapé) */
.final-score, .placar-mini {
    font-size: 0.9rem;
    margin-top: -5px !important;
    padding-top: 2px;
    border-top: 1px solid rgba(0,0,0,0.05); /* Linha sutil separando os botões */
}

#bets .final-score {
    margin-top: 174px !important;
}

/* --- ELEMENTOS DO PLACAR TURBINADO (LIVE) --- */

.score-container-header.big-score {
    
    padding: 1px 10px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    
}

.score-numbers-inline {
    display: flex;
    align-items: center;
    gap: 3px;
    line-height: 1;
}

.flag-big {
    font-size: 1.4rem;
    line-height: 1;
}

.score-val {
    font-size: 1.3rem;
    font-weight: 900;
    color: #003087;
}

.sep {
    font-size: 0.8rem;
    font-weight: bold;
    color: #ff0000;
}

.penalties-label-mini {
    font-size: 7px;
    font-weight: 800;
    color: #d63031;
    margin-top: -2px;
}

.live-minute-inline {
    color: #fff;
    background: rgba(255, 0, 0, 0.8);
    padding: 1px 3px;
    border-radius: 3px;
    font-size: 0.65rem;
    animation: blink 2s infinite;
}

@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0.6; }
    100% { opacity: 1; }
}

/* ============================================================
   ESTILOS EXCLUSIVOS DA ABA DE CLASSIFICAÇÃO (Fase de Grupos)
   Reforçado com ID #classificacao para isolamento total
   ============================================================ */

/* Container Principal */
#classificacao {
  padding: 0px 0px;
  max-width: 1200px; 
  margin: 0 auto;
  color: #fff;
  font-family: sans-serif;
}

/* 
   GRID DE GRUPOS 
   Forçamos 2 colunas EM TODAS AS TELAS para Grupo A e B ficarem lado a lado
*/
#classificacao .classificacao-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important; /* Força 2 colunas */
  gap: 8px; /* Espaço reduzido para caber no mobile */
  align-items: start;
}

@media (min-width: 768px) {
  #classificacao .classificacao-grid {
    gap: 20px;
  }
}

/* Card de cada Grupo */
#classificacao .group-container {
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  height: fit-content;
}

/* Cabeçalho do Grupo */
#classificacao .group-header {
  background: linear-gradient(90deg, #1e40af, #3b82f6);
  padding: 10px 5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.75rem;
  border-bottom: 2px solid #2563eb;
  text-align: center;
}

/* Tabela Interna */
#classificacao .standings-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.7rem; /* Fonte pequena para layout de 2 colunas */
}

#classificacao .standings-table th {
  background: #262626;
  color: #888;
  text-transform: uppercase;
  font-size: 0.55rem;
  padding: 8px 2px;
  text-align: center;
}

#classificacao .standings-table td {
  padding: 10px 2px;
  text-align: center;
  border-bottom: 1px solid #262626;
}

/* 
   LÓGICA DE VISIBILIDADE (NOME vs BANDEIRA)
*/
#classificacao .team-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

/* Estilo do FLAGEMOJI */
#classificacao .flag-emoji {
  display: inline-block !important;
  min-width: 20px;
  line-height: 1;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

/* MOBILE: Esconde o nome e destaca a bandeira */
@media (max-width: 767px) {
  #classificacao .team-name-table {
    display: none !important; /* Esconde o texto */
  }
  
  #classificacao .flag-emoji {
    font-size: 1.5rem !important; /* Aumenta o emoji no mobile */
    width: 100%;
    text-align: center;
  }

  #classificacao .team-cell {
    justify-content: center;
    padding-left: 0;
  }

  #classificacao .standings-table th.text-left, 
  #classificacao .standings-table td.text-left {
    text-align: center;
    padding-left: 0;
  }
}

/* DESKTOP: Mostra nome ao lado da bandeira */
@media (min-width: 768px) {
  #classificacao .standings-table {
    font-size: 0.82rem;
  }
  
  #classificacao .group-header {
    font-size: 0.9rem;
    padding: 12px 15px;
  }

  #classificacao .team-cell {
    justify-content: flex-start;
    padding-left: 10px;
  }

  #classificacao .flag-emoji {
    font-size: 1.2rem;
  }

  #classificacao .team-name-table {
    display: inline-block !important;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 85px;
    white-space: nowrap;
  }
}

/* --- CORES E DESTAQUES --- */

#classificacao .standings-table tr.qualified-row {
  background: rgba(34, 197, 94, 0.05);
}

#classificacao .standings-table tr.qualified-row td:first-child {
  border-left: 3px solid #22c55e;
  font-weight: bold;
}

/* Destaque para times em 3º que podem classificar */
#classificacao .standings-table tr:nth-child(3).qualified-row {
  background: rgba(59, 130, 246, 0.08);
}
#classificacao .standings-table tr:nth-child(3).qualified-row td:first-child {
  border-left-color: #3b82f6;
}

#classificacao .pts-column {
  color: #3b82f6;
  font-weight: 900;
}

#classificacao .sg-positive { color: #22c55e; font-weight: bold; }
#classificacao .sg-negative { color: #ef4444; font-weight: bold; }
#classificacao .sg-neutral { color: #666; }

/* Coluna GP (Gols Pró) */
#classificacao .standings-table td:last-child {
  font-weight: 700;
  color: #eee;
}

/* Rodapé e Legenda */
#classificacao .table-footer {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid #333;
}

#classificacao .footer-legend {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.7rem;
  color: #aaa;
}

#classificacao .indicator-green {
  width: 10px;
  height: 10px;
  background: #22c55e;
  border-radius: 2px;
}

#classificacao .live-update-notice {
  font-size: 0.65rem;
  color: #3b82f6;
  font-style: italic;
}

/* Estilos específicos para o funcionamento do Toggle */
.ranking-switch input:checked + .ranking-slider {
  background-color: #d93025;
}

.ranking-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 34px;
}

.ranking-slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

.ranking-switch input:checked + .ranking-slider:before {
  transform: translateX(20px);
}

.fa-fade {
  animation: fa-fade 2s infinite linear;
}

@keyframes fa-fade {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
.filter-container-tabela {
    display: flex;
    justify-content: center;
    padding: 10px 0;
    background: #f8f9fa;
    border-bottom: 1px solid #ddd;
    margin-bottom: 10px;
}

.toggle-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
}

.toggle-text {
    font-size: 0.85rem;
    font-weight: 700;
    color: #7f8c8d;
    text-transform: uppercase;
}

.text-live {
    color: #e67e22; /* Cor laranja para o texto Parcial */
}

/* Estrutura do Switch */
.switch-antenna {
    position: relative;
    display: inline-block;
    width: 54px;
    height: 28px;
}

.switch-antenna input { 
    opacity: 0;
    width: 0;
    height: 0;
}

.slider-antenna {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #bdc3c7;
    transition: .4s;
    border-radius: 34px;
    display: flex;
    align-items: center;
    padding: 0 6px;
}

.antenna-icon {
    color: white;
    font-size: 14px;
    transition: .4s;
    position: relative;
    z-index: 2;
}

/* Estado Ativo (Parcial) */
input:checked + .slider-antenna {
    background-color: #e67e22;
}

input:checked + .slider-antenna .antenna-icon {
    transform: translateX(26px);
    animation: pulse-antenna 1.5s infinite;
}

@keyframes pulse-antenna {
    0% { opacity: 1; transform: translateX(26px) scale(1); }
    50% { opacity: 0.4; transform: translateX(26px) scale(1.2); }
    100% { opacity: 1; transform: translateX(26px) scale(1); }
}
/* Garante que o mobile root não quebre o layout se estiver vazio */
#ranking-mobile-root:empty {
  display: none;
}

/* Aumenta a bandeira especificamente dentro da tabela de classificação */
.standings-table .flag {
    font-size: 1.6rem; /* Ajuste este valor (1.8rem, 2rem) até ficar do seu gosto */
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
    line-height: 1;
}

/* Força a renderização do emoji dentro dos botões de aposta */
.bet-option .flag {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
    font-style: normal !important;
    text-transform: none !important;
    display: inline-block !important;
}

/* Garante que o botão não herde estilos que quebrem o emoji */
.bet-option {
    text-transform: none !important; /* Evita que o CSS transforme tudo em Maiúsculo, o que quebra bandeiras no Windows */
}

/* Aumenta o tamanho da bandeira especificamente nos botões de aposta */
.bet-option .flag {
    font-size: 3rem !important; /* Ajuste este valor conforme desejar */
    line-height: 1;
    display: block; /* Garante que ela ocupe o espaço superior */
    margin-bottom: 2px; /* Pequeno ajuste para não colar no texto */
}

/* Garante que o botão tenha espaço para a bandeira maior */
.bet-option {
    padding: 19px 0px !important;
    min-height: 60px;
}
/* CSS Necessário para as cores do Gol */
.toast.success { background-color: #2ecc71 !important; } /* Verde para gol a favor */
.toast.error, .toast.danger { background-color: #e74c3c !important; } /* Vermelho para gol contra */
.toast.info { background-color: #3498db !important; } /* Azul para neutro */

/* --- Estilos para corrigir o Admin (Substitua ou adicione estes) --- */

/* Padronização dos botões de ação */
.admin-row-actions {
  display: flex;
  gap: 8px; /* Espaço entre os botões */
  margin-top: 12px;
  justify-content: flex-start; /* Alinha à esquerda */
}

/* Garante que todos os botões de ação tenham o mesmo tamanho */
.admin-row-actions .btn {
  flex: 0 0 auto; /* Não estica, não encolhe */
  width: 40px;    /* Largura fixa igual para todos */
  height: 40px;   /* Altura fixa igual para todos */
  padding: 0;     /* Remove padding interno */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 16px;
}

/* Estilo específico para o bloco do placar normal (Corrige o fundo preto) */
.admin-row-match .score-box {
  background-color: #f0f0f0; /* Fundo cinza claro para destacar */
  color: #333;               /* Texto escuro (números) */
  padding: 6px 14px;
  border-radius: 6px;
  font-weight: bold;
  min-width: 70px;
  text-align: center;
  border: 1px solid #ddd;
}

/* Estilo para o placar de pênaltis (Mata-mata) */
.penalty-score-box {
  background-color: #222;    /* Fundo escuro */
  color: #ff9f43;            /* Texto laranja vibrante */
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: bold;
  margin-top: -5px;
  border: 1px solid #444;
}

/* Ajustes no layout do card para acomodar os botões menores */
.admin-row-match {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  margin: 15px 0;
  font-size: 1.1rem;
}

.admin-row-match div {
  flex: 1; /* Times ocupam espaço igual */
}

.admin-row-match div:first-child { text-align: right; } /* Time A */
.admin-row-match div:last-child { text-align: left; }   /* Time B */
/* Container principal que envolve as duas linhas */
.admin-actions {
  display: grid !important;
  gap: 6px !important;
  width: 100%;
  margin-bottom: 8px;
}

/* Configuração específica para a linha de 7 botões */
.admin-actions[style*="repeat(7"] {
  grid-template-columns: repeat(7, 1fr) !important;
}

/* Configuração específica para a linha de 6 botões */
.admin-actions[style*="repeat(6"] {
  grid-template-columns: repeat(6, 1fr) !important;
}

/* Estilo unificado para todos os botões do painel admin */
.admin-actions .btn, 
.admin-actions button,
.admin-btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 40px; /* Altura ideal para 2 linhas */
  padding: 0 2px !important;
  font-size: 20px !important; /* Tamanho para caber 7 botões lado a lado */
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  color: white !important;
}

/* Ajuste dos ícones e emojis */
.admin-actions i, 
.admin-actions span {
  font-size: 13px !important;
  flex-shrink: 0;
}

/* Ajuste para Mobile (Celulares pequenos) */
@media (max-width: 600px) {
  .admin-actions {
    gap: 4px !important;
  }
  
  .admin-actions .btn span,
  .admin-actions button span {
    font-size: 10px !important;
    letter-spacing: -0.5px; /* Comprime levemente as letras se necessário */
  }
}

/* Cores específicas caso não estejam no seu CSS principal */
.btn-primary { background-color: #007bff !important; }
.btn-success { background-color: #28a745 !important; }
.btn-info    { background-color: #17a2b8 !important; }
.btn-warning { background-color: #ffc107 !important; color: #000 !important; }
.btn-danger  { background-color: #dc3545 !important; }
.btn-secondary { background-color: #6c757d !important; }


/* --- ESTILO DAS ABAS DO ROBÔ (MODAL) --- */
.robot-modal-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    border-bottom: 1px solid #333;
    padding-bottom: 10px;
}

.robot-tab-btn {
    background: #222;
    border: 1px solid #444;
    color: #888;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.3s;
}

.robot-tab-btn.active {
    background: #5d5fef;
    color: white;
    border-color: #5d5fef;
}

.robot-tab-btn:hover:not(.active) {
    background: #333;
}

.robot-tab-pane {
    display: none;
}

.robot-tab-pane.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

/* --- SELECT MÚLTIPLO E INPUTS DARK --- */
.select-multiple-dark {
    background: #111 !important;
    color: #eee !important;
    border: 1px solid #444 !important;
    border-radius: 4px;
    padding: 8px;
    width: 100%;
    scrollbar-width: thin;
    scrollbar-color: #5d5fef #111;
}

.select-multiple-dark option {
    padding: 6px;
    border-bottom: 1px solid #222;
}

.select-multiple-dark option:checked {
    background: #5d5fef linear-gradient(0deg, #5d5fef 0%, #5d5fef 100%);
    color: white;
}

/* --- INDICADOR DE STATUS E LOADERS --- */
.status-indicator {
    margin-top: 15px;
    padding: 10px;
    background: #1a1a1a;
    border-left: 3px solid #00ff00;
    border-radius: 4px;
}

.sync-status {
    margin-top: 10px;
    text-align: center;
    color: #5d5fef;
    font-weight: bold;
    font-size: 12px;
}

/* --- AJUSTE DOS BOTÕES DE AÇÃO (GRID) --- */
.admin-actions .btn i {
    font-size: 16px;
}

.admin-actions .btn span {
    font-weight: bold;
    text-transform: uppercase;
}

/* Tooltip customizado para os botões */
[data-tooltip] {
    position: relative;
}

[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 110%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: #fff;
    padding: 4px 8px;
    font-size: 10px;
    border-radius: 4px;
    white-space: nowrap;
    z-index: 100;
    border: 1px solid #555;
}

/* Animação simples */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Responsividade para o grid de botões */
@media (max-width: 600px) {
    .admin-actions {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}
/* ==================================================
   SISTEMA DE LOGOS E EMOJIS (PRIORIDADE)
   ================================================== */

/* Container Base */
.logo-wrapper {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    flex-shrink: 0;
}

/* Logo vinda da API */
.team-logo-api {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
    z-index: 2;
    background-color: transparent;
    transition: opacity 0.3s ease-in-out;
}

/* Emoji / Bandeira Local */
.team-emoji {
    /* Pilha de fontes para renderização correta de bandeiras no Chrome/Windows */
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", "Android Emoji", EmojiSymbols, sans-serif !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    z-index: 1;
    line-height: 1 !important;
    text-rendering: optimizeLegibility;
}

/* 1. BOTÕES DE SELEÇÃO (40px - Emoji ou Logo) */
.bet-option .logo-wrapper {
    width: 40px !important;
    height: 40px !important;
}

.bet-option .team-emoji {
    font-size: 50px !important;
    width: 40px !important;
    height: 40px !important;
}

/* 2. PLACAR FINAL / RESUMO (20px e Linha Única) */
.final-score, .placar-mini, .knockout-footer-compact {
    display: flex !important;
    flex-direction: row !important; /* Força horizontal */
    align-items: center !important;
    justify-content: center;
    gap: 5px;
    white-space: nowrap !important; /* Impede quebra de linha */
    flex-wrap: nowrap !important;
    color: white;
}

.final-score .logo-wrapper, 
.placar-mini .logo-wrapper {
    width: 20px !important;
    height: 20px !important;
}

.final-score .team-emoji, 
.placar-mini .team-emoji {
    font-size: 20px !important;
    width: 20px !important;
    height: 20px !important;
}

/* 3. PLACAR AO VIVO / HEADERS (35px) */
.score-numbers-inline .logo-wrapper {
    width: 35px !important;
    height: 35px !important;
    margin: 0 5px;
}

.score-numbers-inline .team-emoji {
    font-size: 35px !important;
}

/* Ajustes de layout dos botões */
.bet-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 8px 4px;
}

.bet-team-vertical {
    font-size: 0.85rem;
    text-align: center;
    word-break: break-word;
}



.league-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    padding: 20px 0;
}

.league-card {
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s, border-color 0.2s;
}

.league-card:hover {
    transform: translateY(-5px);
    border-color: #00ff00;
}

.league-card-icon {
    font-size: 40px;
    margin-bottom: 15px;
}
/* ==================================
   🎨 ESTILOS PARA TOASTS (NOTIFICAÇÕES)
   ================================== */

/* Container que segura os toasts (deve ter id="global-messages") */
#global-messages {
    position: fixed;
    top: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 9999;
}

/* Base do Toast */
.toast {
    min-width: 250px;
    padding: 12px 20px;
    border-radius: 8px;
    color: #ffffff;
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: opacity 0.3s ease, transform 0.3s ease;
    animation: slideIn 0.3s ease-out;
}

/* Variação: SUCESSO (Verde) - Usado quando você acerta o time do gol */
.toast.success {
    background-color: #28a745 !important;
    border-left: 5px solid #1e7e34;
}

/* Variação: PERIGO/ERRO (Vermelho) - Usado quando o rival faz gol */
.toast.danger {
    background-color: #dc3545 !important;
    border-left: 5px solid #bd2130;
}

/* Variação: INFORMAÇÃO (Azul) - Padrão ou Empate */
.toast.info {
    background-color: #17a2b8 !important;
    border-left: 5px solid #117a8b;
}

/* Animação de entrada */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
/* Botões Ultra-Minimalistas Admin */
.league-actions .btn, 
.group-actions .btn {
    width: 18px !important;      /* Ainda menor */
    height: 18px !important;     /* Ainda menor */
    padding: 0 !important;
    font-size: 8px !important;    /* Ícone bem discreto */
    display: flex;
    align-items: center;
    justify-content: center;
    border: none !important;     /* Remove bordas para ficar mais limpo */
    border-radius: 3px;          /* Arredondamento suave */
    transition: all 0.2s ease;
    cursor: pointer;
    color: white !important;     /* Ícone sempre branco */
    opacity: 0.6;                /* Quase transparente por padrão */
}

/* Botão Reabrir (Azul Elegante) */
.btn-outline-light, .btn-outline-warning, .btn-warning {
    background-color: #3498db !important; /* Azul Flat */
}

/* Botão Excluir (Vermelho Elegante) */
.btn-danger {
    background-color: #e74c3c !important; /* Vermelho Flat */
}

/* Efeito Hover: Ganha vida ao passar o mouse */
.league-actions .btn:hover, 
.group-actions .btn:hover {
    opacity: 1;
    transform: scale(1.1);       /* Leve pulo ao interagir */
}

/* Organização dos containers */
.league-actions, .group-actions {
    display: flex;
    gap: 4px;
    align-items: center;
}

/* Remove sombras indesejadas */
.league-actions .btn:focus, .group-actions .btn:focus {
    box-shadow: none !important;
    outline: none !important;
}
/* Container da mídia no Pódio */
.flag-wrapper-podium {
  width: 40px !important;
  height: 40px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background-color: rgba(0,0,0,0.05); /* Opcional: fundo leve para logos brancos */
  border-radius: 4px;
  overflow: hidden;
}

/* Forçar a imagem da API a preencher os 40px */
.flag-wrapper-podium .team-logo-api {
  width: 100% !important;
  height: 100% !important;
  max-width: 40px !important;
  max-height: 40px !important;
  object-fit: contain !important;
  position: static !important; /* Remove posicionamentos absolutos herdados */
}

/* Forçar o Emoji a crescer proporcionalmente */
.flag-wrapper-podium .team-emoji {
  font-size: 32px !important; /* Ajustado para preencher bem os 40px */
  line-height: 40px !important;
  display: block !important;
}

/* Wrapper interno caso o renderTeamMedia use .logo-wrapper */
.flag-wrapper-podium .logo-wrapper {
  width: 100% !important;
  height: 100% !important;
}
/* ============================================================
   🎯 ESTILOS DA ABA DE ESTRATÉGIA (CAMINHO DA LIDERANÇA)
   ============================================================ */

.strategy-container {
    padding: 1rem;
    animation: fadeIn 0.3s ease-in-out;
    max-width: 800px;
    margin: 0 auto;
}

/* Card de Resumo do Topo */
.strategy-summary-card {
    background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
    color: white;
    padding: 1.5rem;
    border-radius: 15px;
    text-align: center;
    margin-bottom: 2rem;
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
    transition: transform 0.3s ease;
}

.strategy-summary-card:hover {
    transform: translateY(-5px);
}

.summary-top {
    font-size: 0.8rem;
    letter-spacing: 1px;
    opacity: 0.9;
    font-weight: 700;
}

.summary-main {
    font-size: 2.5rem;
    font-weight: 900;
    margin: 0.5rem 0;
}

.strategy-summary-card p {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.strategy-summary-card small {
    font-style: italic;
    opacity: 0.8;
}

/* Container da Probabilidade e Barra */
.probability-box {
    margin: 15px 0 10px 0;
    background: rgba(255,255,255,0.1);
    padding: 12px;
    border-radius: 10px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}

.probability-box i {
    transition: all 0.2s ease;
    color: #fff;
    cursor: help;
    vertical-align: middle;
}

.probability-box i:hover {
    color: #ffda44;
    transform: scale(1.2);
}

/* Secção de Secagem */
.secagem-section h4 {
    margin-bottom: 0.5rem;
    color: #2c3e50;
    font-size: 1.2rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 8px;
}

.secagem-desc {
    color: #666;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

/* Grelha de Cards */
.secagem-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 15px;
}

.secagem-card {
    background: #fff;
    border-radius: 12px;
    padding: 1.2rem;
    border: 1px solid #eef0f2;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: all 0.2s ease;
}

.secagem-card:hover {
    transform: scale(1.01);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.secagem-card.is-locked {
    filter: grayscale(0.5);
    opacity: 0.7;
    border-left-color: #95a5a6 !important;
    overflow: hidden;
}

.secagem-card.is-locked .secagem-opponents {
    filter: blur(2px);
}

.secagem-header {
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 8px;
    font-size: 1.1rem;
    color: #2d3436;
    font-weight: 800;
}

.secagem-my-pick {
    font-size: 0.95rem;
    color: #2d3436;
}

.secagem-my-pick span {
    color: #27ae60;
    font-weight: 800;
}

/* Lista de Rivais (Tags) */
.secagem-opponents small {
    display: block;
    color: #7f8c8d;
    margin-bottom: 8px;
    font-weight: 600;
}

.names-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.rival-tag, .secagem-opponents span {
    background: #fff5f5;
    color: #c0392b;
    border: 1px solid #ffdada;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    display: inline-block;
    transition: all 0.2s ease;
}

.secagem-opponents span:hover {
    background: #c0392b !important;
    color: #fff !important;
}

/* Overlay de Cadeado */
.lock-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(255,255,255,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #2d3436;
    border-radius: 12px;
    z-index: 2;
}

/* Ajustes Desktop Wrapper */
#strategy-desktop-wrapper {
    max-width: 1000px;
    margin: 0 auto;
}

/* =====================
    🎨 Efeito Glow no Ranking
   ===================== */
.ranking-me-glow {
    animation: meGlow 2s infinite alternate;
}

@keyframes meGlow {
    from { background-color: rgba(0, 123, 255, 0.05); }
    to { background-color: rgba(0, 123, 255, 0.15); }
}

/* Estilo das Abas no Ranking */
.ranking-tabs-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}

.rank-tab {
    padding: 10px 20px;
    border: none;
    background: #f0f2f5;
    border-radius: 25px;
    cursor: pointer;
    font-weight: 600;
    color: #65676b;
    transition: all 0.2s;
}

.rank-tab.active {
    background: #007bff;
    color: white;
    box-shadow: 0 4px 12px rgba(0,123,255,0.3);
}

/* =====================
    📱 Responsividade
   ===================== */
@media (max-width: 768px) {
    .secagem-grid {
        grid-template-columns: 1fr;
    }
    
    .summary-main {
        font-size: 2rem;
    }

    .desktop-only-view {
        display: none !important;
    }
    .mobile-only-view {
        display: block !important;
    }
}

@media (min-width: 769px) {
    .mobile-only-view {
        display: none !important;
    }
    .desktop-only-view {
        display: table !important; 
    }
}

@media (max-width: 480px) {
    .strategy-summary-card div[style*="font-size: 2.8rem"],
    .strategy-summary-card div[style*="font-size: 2.5rem"] {
        font-size: 1.8rem !important;
    }
    
    .secagem-header {
        font-size: 0.85rem;
    }
}

/* Container de Ligas do Robô - Alinhamento e Scroll */
#robot-leagues-container {
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
}

#robot-leagues-container .form-check {
    /* padding-left removido para usar o grid do bootstrap */
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    min-height: 24px;
}

#robot-leagues-container .form-check-input {
    margin: 0; 
    cursor: pointer;
    width: 16px;
    height: 16px;
    flex-shrink: 0; /* Impede o checkbox de achatar em nomes longos */
}

#robot-leagues-container .form-check-label {
    font-size: 0.85rem;
    color: #ddd;
    cursor: pointer;
    margin-left: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1;
}

/* Hover para facilitar a seleção */
#robot-leagues-container .form-check:hover {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

/* Scrollbar Personalizada (Dark Theme) */
#robot-leagues-container::-webkit-scrollbar {
    width: 6px;
}

#robot-leagues-container::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
}

#robot-leagues-container::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 10px;
}

#robot-leagues-container::-webkit-scrollbar-thumb:hover {
    background: #555;
}
/* Container de Gols - Posicionamento flutuante sobre o botão */
.gols-container-a, .gols-container-b {
    position: absolute;
    top: -33px;
    left: -21px; /* Ajuste aqui para subir ou descer em relação ao status do jogo */
    width: 100%;
    z-index: 10;
    pointer-events: none; /* Garante que o clique passe para o botão de bet */
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 15px; /* Mantém um espaço mínimo visual se necessário */
}

/* Estilo individual de cada linha de gol */
.goal-entry-card {
    font-size: 0.62rem;
    color: #ffca28;
    font-weight: bold;
    text-shadow: 1px 1px 2px #000; /* Sombra para legibilidade sobre o botão */
    line-height: 1.1;
    margin-bottom: 2px;
    text-align: center;
    animation: fadeIn 0.5s ease-out;
}

/* Animação para o gol aparecer suavemente */
@keyframes fadeIn {
    from { 
        opacity: 0; 
        transform: translateY(-5px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

/* --- Sistema de Abas do Modal --- */
.modal-tabs {
    display: flex !important; /* Garante que o container apareça */
    justify-content: center;
    gap: 15px;
    margin: 10px 20px 20px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 10px;
}

.tab-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5) !important; /* Cor cinza para abas inativas */
    padding: 8px 15px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: bold;
    transition: all 0.2s;
    outline: none;
}

.tab-btn:hover {
    color: rgba(255, 255, 255, 0.8) !important;
}

.tab-btn.active {
    color: #ffca28 !important; /* Amarelo Vibrante para aba ativa */
    border-bottom: 2px solid #ffca28;
    background: rgba(255, 202, 40, 0.05);
}

/* --- Controle de Exibição das Abas --- */
.tab-content {
    display: none; /* Esconde por padrão */
}

.tab-content.active {
    display: block !important; /* Mostra apenas a ativa */
}

/* --- Aba: Detalhes da Partida (Marcadores) --- */
.live-details-container {
    padding: 15px 25px;
}

.match-time-info {
    text-align: center;
    color: #ffca28 !important;
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 20px;
    background: rgba(0, 0, 0, 0.2);
    padding: 5px;
    border-radius: 4px;
}

.live-goals-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* Garante que o nome do marcador seja visível (Branco) */
.goal-item {
    font-size: 0.9rem;
    color: #ffffff !important; 
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8); /* Melhora leitura em fundos claros */
}

.goal-item span {
    color: #ffca28; /* Cor do minuto do gol */
    font-size: 0.75rem;
}

/* --- Chips de Usuários (Aba Parcial) --- */
.details-chip {
    padding: 6px 12px;
    border-radius: 6px;
    margin-bottom: 6px;
    font-size: 0.85rem;
    color: #fff !important;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.chip-full { background: #2ecc71 !important; color: #fff !important; }
.chip-wrong { background: #e74c3c !important; color: #fff !important; }

/* Parciais Mata-Mata */
.chip-partial-left {
    background: linear-gradient(90deg, #2ecc71 50%, #e74c3c 50%) !important;
}
.chip-partial-right {
    background: linear-gradient(90deg, #e74c3c 50%, #2ecc71 50%) !important;
}

/* --- Responsividade --- */
@media (max-width: 480px) {
    .live-goals-grid {
        grid-template-columns: 1fr; /* Em telas pequenas, gols um abaixo do outro */
        gap: 10px;
    }
}
/* --- SCOPED MODAL DETALHES --- */

/* Nome de animação único para evitar conflito */
@keyframes matchModalFadeIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Seletor Raiz: Tudo aqui só funciona dentro do ID #modal-detalhes */
#modal-detalhes.modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

#modal-detalhes .modal-container {
    background: #ffffff;
    width: 95%;
    max-width: 550px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    position: relative;
    color: #333;
    animation: matchModalFadeIn 0.3s ease;
}

/* Header e Títulos */
#modal-detalhes .modal-header {
    padding: 1px 0px;
    border-bottom: 0px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #e8ebed;
}

#modal-detalhes .modal-title {
    margin: 0;
    font-size: 0.9rem;
    color: #000;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

#modal-detalhes .btn-close-modal {
    background: #333;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    cursor: pointer;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Body e Placar */
#modal-detalhes .modal-body { padding: 20px; }



#modal-detalhes .team-box { text-align: center; flex: 1; }
#modal-detalhes .team-name { font-weight: 800; font-size: 0.9rem; color: #000; text-transform: uppercase; display: block; margin-top: 8px; }

#modal-detalhes .score-center { flex: 1.2; text-align: center; }
#modal-detalhes .score-numbers { font-size: 2.2rem; font-weight: 900; color: #000; letter-spacing: -1px; }
#modal-detalhes .score-divider { color: #ccc; }
#modal-detalhes .vs-label { font-size: 1.2rem; color: #999; }

/* Status */
#modal-detalhes .status-badge { font-size: 0.7rem; font-weight: bold; margin-top: 5px; text-transform: uppercase; }
#modal-detalhes .status-live { color: #e74c3c; }
#modal-detalhes .status-finished { color: #777; }

/* Bandeiras Controladas */
#modal-detalhes .modal-flag-container {
    width: 50px; height: 50px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
#modal-detalhes .modal-flag-container img { width: 50px !important; height: 50px !important; object-fit: contain !important; }

/* Barra de Posse */
#modal-detalhes .possession-container { margin-bottom: 25px; }
#modal-detalhes .possession-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.65rem;
    font-weight: 900;
    color: #444;
    margin-bottom: 5px;
    text-transform: uppercase;
}
#modal-detalhes .possession-bar-bg { width: 100%; height: 8px; background: #eee; border-radius: 10px; overflow: hidden; display: flex; }
#modal-detalhes .bar-home { background: #1a1a1a; height: 100%; transition: width 0.8s ease; }
#modal-detalhes .bar-away { background: #c62828; height: 100%; transition: width 0.8s ease; }

/* Timeline e Eventos */
#modal-detalhes .section-title {
    font-size: 0.75rem;
    font-weight: 900;
    color: #999;
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
    text-transform: uppercase;
}

#modal-detalhes .timeline-content { max-height: 250px; overflow-y: auto; padding-right: 5px; }
#modal-detalhes .timeline-item { display: flex; align-items: center; margin-bottom: 10px; width: 100%; }
#modal-detalhes .timeline-item.home { justify-content: flex-start; }
#modal-detalhes .timeline-item.away { justify-content: flex-end; flex-direction: row-reverse; }

#modal-detalhes .event-min { font-size: 0.8rem; font-weight: 900; color: #ffca28; min-width: 30px; text-align: center; }
#modal-detalhes .event-box {
    display: flex;
    align-items: center;
    gap: 5px;
    background: #f8f9fa;
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid #eee;
}

/* Grid de Palpites */
#modal-detalhes .bet-grid { display: grid; gap: 12px; }
#modal-detalhes .grid-2 { grid-template-columns: 1fr 1fr; }
#modal-detalhes .grid-3 { grid-template-columns: 1fr 1fr 1fr; }

#modal-detalhes .bet-column-title { font-size: 0.65rem; font-weight: 900; text-align: center; margin-bottom: 10px; text-transform: uppercase; }
#modal-detalhes .bet-user-card {
    background: #fff;
    padding: 6px 10px;
    border-radius: 10px;
    margin-bottom: 8px;
    font-size: 0.8rem;
    font-weight: 800;
    color: #333;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    border: 2px solid #eee;
}
#modal-detalhes .bet-full { border-color: #27ae60; }
#modal-detalhes .bet-partial { border-color: #f39c12; }
#modal-detalhes .bet-wrong { border-color: #e74c3c; }

#modal-detalhes .bet-locked { text-align: center; padding: 25px; color: #999; font-weight: bold; font-size: 0.9rem; }
/* --- POSICIONAMENTO DA TIMELINE (HOME vs AWAY) --- */

/* Container de cada linha do evento */
#modal-detalhes .timeline-item {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    width: 100%;
    transition: all 0.2s ease;
}

/* Quando o evento é do TIME DA CASA (Esquerda) */
#modal-detalhes .timeline-item.home {
    flex-direction: row; /* Minuto à esquerda, Box à direita */
    justify-content: flex-start;
}

/* Quando o evento é do TIME VISITANTE (Direita) */
#modal-detalhes .timeline-item.away {
    flex-direction: row-reverse; /* Box à esquerda do minuto, mas no lado direito da tela */
    justify-content: flex-start; /* Alinha o conjunto ao início da linha invertida (que é a direita) */
}

/* Ajuste de margem do minuto para não grudar no box */
#modal-detalhes .timeline-item.home .event-min {
    margin-right: 8px;
}

#modal-detalhes .timeline-item.away .event-min {
    margin-left: 8px;
}

/* Ajuste visual do Box de evento */
#modal-detalhes .event-box {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f8f9fa;
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px solid #eee;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

/* Opcional: Alinhamento de texto dentro do box para o visitante */
#modal-detalhes .timeline-item.away .event-box {
    flex-direction: row-reverse;
}

#modal-detalhes .modal-body {
    max-height: 95vh; /* Ocupa no máximo 70% da altura da tela */
    overflow-y: auto;  /* Ativa o scroll vertical */
    padding-right: 10px;
}

/* Deixa a barra de scroll mais discreta */
#modal-detalhes .modal-body::-webkit-scrollbar { width: 6px; }
#modal-detalhes .modal-body::-webkit-scrollbar-thumb { background: #ccc; border-radius: 10px; }
/* 1. CONTAINER DOS LOGOS (CORRIGE DESALINHAMENTO) */
/* 
   ================================================================
   AJUSTE DE LOGOS E LAYOUT DO MODAL DE DETALHES
   ================================================================ 
*/

/* 1. CONTAINER DO LOGO (O WRAPPER GERADO PELA FUNÇÃO) */
#modal-detalhes .logo-wrapper {
    /* Forçamos o box a crescer para acomodar os 50px */
    width: 60px !important; 
    height: 60px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px; /* Espaço entre logo e nome */
    background: transparent;
}

/* 2. A IMAGEM DO LOGO (SOBREPÕE OS 22PX DA FUNÇÃO) */
#modal-detalhes .team-logo-api {
    /* O !important é obrigatório para ignorar o style inline do JS */
    width: 50px !important;
    height: 50px !important;
    max-width: 50px !important;
    max-height: 50px !important;
    object-fit: contain !important;
    display: block !important;
}

/* 3. CONTAINER PRINCIPAL (SCORE CARD) */
#modal-detalhes .score-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
    background: #fff;
    padding: 2px;
    border-radius: 21px;
    border: 1px solid #f0f0f0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
    gap: 5px;
}

/* 4. CAIXA DE CADA TIME (ESCUDO + NOME) */
#modal-detalhes .team-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0; 
    text-align: center;
}

/* 5. NOME DO TIME (AJUSTE PARA NOMES LONGOS) */
#modal-detalhes .team-name {
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.1;
    word-wrap: break-word;
    white-space: normal; /* Permite quebrar linha para não atropelar o placar */
    display: block;
    width: 100%;
    margin-top: 5px;
}

/* 6. PLACAR CENTRAL */
#modal-detalhes .score-center {
    min-width: 80px; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 10px 0 10px;
}

#modal-detalhes .score-numbers {
    font-size: 1.8rem;
    font-weight: 900;
    white-space: nowrap;
    letter-spacing: 2px;
}

/* 7. CONTROLE DE SCROLL DO CORPO (EVITA VAZAR DA TELA) */
#modal-detalhes .modal-body {
    max-height: 98vh; 
    overflow-y: auto;
    padding-right: 10px;
    scrollbar-width: thin;
}

/* Customização da barra de scroll (Chrome/Safari) */
#modal-detalhes .modal-body::-webkit-scrollbar { 
    width: 6px; 
}
#modal-detalhes .modal-body::-webkit-scrollbar-thumb { 
    background: #ccc; 
    border-radius: 10px; 
}
/* 1. CONTAINER DAS ABAS */
#modal-detalhes .tabs-container {
    display: flex !important;
    background-color: #f0f2f5 !important; 
    border-radius: 12px !important;
    padding: 4px !important;
    margin: 15px 10px !important;
    gap: 4px !important;
    border: 1px solid #e4e6eb !important;
}

/* 2. ESTILO DO BOTÃO (FORÇANDO SOBRE O ESTILO INLINE) */
#modal-detalhes .tab-btn {
    flex: 1 !important;
    padding: 10px 5px !important;
    
    /* Zera os estilos herdados que você mandou */
    border: none !important;
    background: transparent !important;
    outline: none !important;
    
    /* Aplica o novo visual */
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    color: #65676b !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* 3. ABA ATIVA (DESTAQUE) */
#modal-detalhes .tab-btn.active {
    background-color: #ffffff !important; 
    color: #f1b40c !important; 
    box-shadow: 0 2px 6px rgba(0,0,0,0.12) !important;
}

/* 4. HOVER */
#modal-detalhes .tab-btn:hover:not(.active) {
    background-color: rgba(255, 255, 255, 0.6) !important;
    color: #1c1e21 !important;
}
/* Escopo específico para a timeline dentro do modal */
#modal-detalhes .timeline-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 15px;
    background-color: #fff; /* Garante fundo limpo */
}

/* Base do item - o JS controlará o alinhamento via style inline */
#modal-detalhes .timeline-item {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 4px; /* Espaçamento extra de segurança */
}

/* Minutagem: fixamos a largura para os ícones ficarem alinhados verticalmente */
#modal-detalhes .event-min {
    font-weight: bold;
    color: #666;
    font-size: 0.85rem;
    min-width: 50px; 
    flex-shrink: 0;
}

/* Ícone do evento (Gol, Card, etc) */
#modal-detalhes .event-icon {
    font-size: 1.1rem;
    min-width: 30px;
    text-align: center;
    flex-shrink: 0;
}

/* Conteúdo: Nome do jogador e detalhes do VAR/Substituição */
#modal-detalhes .event-content {
    flex-grow: 1;
    font-size: 0.9rem;
    line-height: 1.3;
    /* Evita que nomes muito longos quebrem o layout */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Classes auxiliares para cores específicas (Opcional) */
#modal-detalhes .home-event .event-content {
    color: #333;
}

#modal-detalhes .away-event .event-content {
    color: #444;
}
/* Ajuste específico para o modal de detalhes */
#modal-detalhes .modal-body {
    padding: 10px 5px !important; /* Reduz o padding lateral do modal pai */
    overflow-x: hidden !important;
}

/* Ajuste do container de grid da escalação */
#modal-detalhes [style*="display:grid"] {
    width: 100% !important;
    max-width: 100% !important;
    gap: 6px !important; /* Reduz o espaço entre as colunas */
    box-sizing: border-box !important;
}

/* Ajuste das colunas (Casa e Fora) */
#modal-detalhes [style*="flex:1"], 
#modal-detalhes [style*="min-width: 0"] {
    min-width: 0 !important; /* Permite que o flex-item encolha abaixo do tamanho do conteúdo */
    overflow: hidden !important;
}

/* Força o nome do jogador a cortar com reticências em vez de empurrar a borda */
#modal-detalhes [style*="white-space:nowrap"] {
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 0.7rem !important; /* Ajuste fino na fonte para mobile */
}

/* Ajuste de margens dos ícones para ganhar espaço */
#modal-detalhes span[style*="margin-left"] {
    margin-left: 2px !important;
}
/* Opcional: Remove a linha vertical da timeline atrás dos eventos centralizados */
.system-event {
    position: relative;
    z-index: 2;
}

/* Garante que o texto em negrito não quebre em telas muito pequenas */
.system-event strong {
    white-space: nowrap;
}
/* 1. Remove o alinhamento central do overlay para permitir que o modal encoste no topo */
#modal-detalhes.modal-overlay {
    display: block !important; /* Muda de flex para block */
    padding: 0 !important;
    overflow-y: auto !important;
}

/* 2. Faz o container branco ocupar 100% de tudo */
#modal-detalhes .modal-container {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100vh !important;
    margin: 0 !important;
    border-radius: 0 !important; /* Remove as bordas arredondadas das quinas */
    display: flex !important;
    flex-direction: column !important;
}

/* 3. Garante que o corpo do modal ocupe o espaço restante e tenha scroll */
#modal-detalhes .modal-content, 
#modal-detalhes .modal-body {
    flex: 1 !important;
    height: 100% !important;
    border-radius: 0 !important;
}
/* Estilização Moderna para o Modal de Escalação */

/* Container Geral do Modal */
#modal-detalhes {
    box-sizing: border-box !important;
    font-family: sans-serif !important;
}

/* Ajuste fino nos paddings das colunas para encostar o número na borda */
#modal-detalhes > div:first-child {
    padding-left: 2px !important; 
    border-right: 1px solid #eee;
}

#modal-detalhes > div:last-child {
    padding-right: 2px !important;
}

/* Container da Linha do Jogador */
#modal-detalhes .player-row {
    transition: background 0.2s ease !important;
    padding: 4px 0 !important;
    margin-bottom: 2px !important;
    border-bottom: 1px solid #f8f8f8 !important;
    min-height: 32px !important;
    display: flex !important;
    align-items: center !important;
}

#modal-detalhes .player-row:hover {
    background-color: #fcfcfc !important;
}

/* Número do Jogador (Círculo Estilizado) - Colado na borda lateral */
#modal-detalhes .player-number {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(198, 40, 40, 0.06) !important;
    color: #c62828 !important;
    border-radius: 50% !important;
    min-width: 24px !important;
    height: 24px !important;
    font-size: 0.75rem !important;
    font-weight: bold !important;
    margin: 0 !important; /* Totalmente colado */
    flex-shrink: 0 !important;
}

/* Badge de Posição (Pill Estilizada) - Praticamente colada no número */
#modal-detalhes .position-badge {
    min-width: 20px !important;
    height: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.55rem !important;
    letter-spacing: 0.5px !important;
    font-weight: 800 !important;
    border-radius: 3px !important;
    border: 1px solid transparent !important;
    text-transform: uppercase !important;
    margin: 0 !important; /* Redução de distância do número */
    flex-shrink: 0 !important;
}

/* Cores Dinâmicas por Posição */
#modal-detalhes .pos-G { background: #fff9db !important; color: #f59f00 !important; border-color: #ffe066 !important; }
#modal-detalhes .pos-D { background: #e7f5ff !important; color: #1c7ed6 !important; border-color: #a5d8ff !important; }
#modal-detalhes .pos-M { background: #ebfbee !important; color: #2b8a3e !important; border-color: #b2f2bb !important; }
#modal-detalhes .pos-F { background: #fff5f5 !important; color: #e03131 !important; border-color: #ffc9c9 !important; }

/* Nome do Jogador e Container de Texto */
#modal-detalhes span[style*="white-space:nowrap"] {
    font-weight: 500 !important;
    color: #2d3436 !important;
    font-size: 0.8rem !important;
    padding: 0 4px !important;
}

/* Cabeçalhos de Seção (TITULARES/RESERVAS) */
#modal-detalhes .section-header {
    letter-spacing: 0.5px !important;
    border-left: 3px solid #c62828 !important;
    padding-left: 8px !important;
    margin-bottom: 12px !important;
    display: flex !important;
    align-items: center !important;
    height: 24px !important;
}

#modal-detalhes .section-header span {
    font-size: 0.65rem !important;
    font-weight: 800 !important;
    color: #555 !important;
    text-transform: uppercase !important;
}

/* Badge da Formação Tática (ex: 4-3-3) */
#modal-detalhes .formation-badge {
    background: #fff5f5 !important;
    color: #c62828 !important;
    padding: 1px 6px !important;
    border-radius: 4px !important;
    border: 1px solid #ffc9c9 !important;
    font-weight: 700 !important;
    font-size: 0.65rem !important;
}

/* Ícones de Eventos (Substituição, Gols, Cartões) - Mais compactos */
#modal-detalhes .sub-icon {
    background: rgba(0,0,0,0.04) !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
    border-radius: 3px !important;
    padding: 1px 2px !important;
    font-size: 0.65rem !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Ajuste de Opacidade para Jogadores Substituídos */
#modal-detalhes span[style*="opacity:0.7"] {
    font-style: italic !important;
    opacity: 0.7 !important;
}
/* Container Geral da Timeline dentro do Modal */
#modal-detalhes #match-timeline-content {
    padding: 15px !important;
    background-color: #ffffff !important;
    border-radius: 8px !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}

/* Itens de Eventos */
#modal-detalhes .timeline-item {
    position: relative !important;
    padding: 4px 0 !important;
    transition: background-color 0.2s ease !important;
}

/* Eventos de Sistema (Centralizados) */
#modal-detalhes .system-event {
    border-top: 1px dashed #ddd !important;
    border-bottom: 1px dashed #ddd !important;
    margin: 15px 0 !important;
    background: #fcfcfc !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* Estilização dos Minutos */
#modal-detalhes .event-min {
    font-variant-numeric: tabular-nums !important;
    text-align: center !important;
    background: #f0f0f0 !important;
    border-radius: 4px !important;
    padding: 2px 0 !important;
    font-weight: bold !important;
    color: #666 !important;
}

/* Bordas laterais para diferenciar Home/Away */
#modal-detalhes .home-event .event-min {
    border-left: 3px solid #3498db !important;
}
#modal-detalhes .away-event .event-min {
    border-right: 3px solid #e67e22 !important;
}

/* Conteúdo do Evento */
#modal-detalhes .event-content {
    color: #333 !important;
    line-height: 1.4 !important;
    font-size: 0.9rem !important;
}

/* Contadores de Apostas (🎯, 🌓, ❌) */
#modal-detalhes .timeline-counters {
    background: #f1f2f6 !important;
    padding: 2px 8px !important;
    border-radius: 12px !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05) !important;
    display: inline-flex !important;
    gap: 8px !important;
    margin-left: 8px !important;
}

/* --- ISOLAMENTO PARA O MODAL DE DETALHES --- */

/* 1. Efeito de Piscar (Blink) para o usuário logado (Rafael) */
#modal-detalhes .blink-me {
    animation: timeline-blinker 1.5s linear infinite !important;
    background: rgba(46, 204, 113, 0.1) !important; /* Leve fundo verde para destaque */
    border: 1px solid rgba(46, 204, 113, 0.5) !important;
    border-radius: 4px !important;
}

@keyframes timeline-blinker {
    0% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.01); }
    100% { opacity: 1; transform: scale(1); }
}

/* 2. Brilho no Nome (Rafael) */
#modal-detalhes .user-name-glow {
    color: #2ecc71 !important;
    text-shadow: 0 0 10px rgba(46, 204, 113, 0.8);
    font-weight: 800 !important;
}

/* 3. Destaque do Líder (Texto em Dourado) */
#modal-detalhes .leader-gold-shadow {
    color: #f1c40f !important;
    text-shadow: 0 0 8px rgba(241, 196, 15, 0.6);
    font-weight: bold !important;
}

/* 4. Card do Líder com Aura de Pódio */
/* O seletor :has garante que o card brilhe apenas se o líder estiver dentro dele */
#modal-detalhes .bet-user-card:has(.leader-gold-shadow) {
    box-shadow: 0 0 10px #ffd700, 0 0 5px #ffa500 !important;
    border: 1px solid #ffd700 !important;
    animation: gold-glow 2s infinite alternate !important;
}

@keyframes gold-glow {
    from { box-shadow: 0 0 5px #ffd700; }
    to { box-shadow: 0 0 15px #ffcc00, 0 0 20px #ff9900; }
}

/* 5. Ajuste de espaçamento para os contadores da Timeline */
#modal-detalhes .timeline-counters span {
    padding: 2px 4px;
    border-radius: 3px;
    background: rgba(0,0,0,0.03);
}
/* Quando o Rafael (blink-me) também for o Líder (leader-gold-shadow) */
#modal-detalhes .bet-user-card.blink-me:has(.leader-gold-shadow) {
    background: rgba(255, 215, 0, 0.2) !important; /* Fundo levemente dourado */
    border: 2px solid #ffd700 !important;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.6) !important;
    animation: gold-glow-blink 1.5s linear infinite !important;
}

/* Animação que une o pulso do seu blink com o brilho do ouro */
@keyframes gold-glow-blink {
    0% { transform: scale(1); box-shadow: 0 0 5px #ffd700; }
    50% { transform: scale(1.02); box-shadow: 0 0 20px #ffcc00; opacity: 0.8; }
    100% { transform: scale(1); box-shadow: 0 0 5px #ffd700; }
}
/* Ajuste universal para bandeiras no Modal de Detalhes */

/* 1. Quando for IMAGEM (Bandeiras da Copa/Logos) */
#modal-detalhes .modal-flag-container img {
    width: 55px !important;
    height: auto !important;
    max-width: none !important;
    display: block !important;
    margin: 0 auto !important;
}

/* 2. Quando for EMOJI (Fallback de texto) */
#modal-detalhes .modal-flag-container {
    font-size: 50px !important;
    line-height: 1 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 55px !important; /* Mantém o alinhamento visual com a imagem */
}

/* Ajuste fino para o nome do time não ficar colado */
#modal-detalhes .team-box .team-name {
    margin-top: 10px !important;
    font-weight: 700 !important;
}
/* ISOLAMENTO: Seleção de Liga - Versão Adaptativa */

/* ISOLAMENTO: Seleção de Liga - Versão Final para index.html */

/* 1. O OVERLAY PRINCIPAL */
/* Ele é configurado como fixed para cobrir a tela sem empurrar o conteúdo do site */
#league-selection-section {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 9999 !important; /* Fica acima do Header e do Login */
    
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 20px 15px !important;
    font-family: 'Inter', sans-serif !important;
    color: #ffffff !important;
    
    overflow-y: auto !important; /* Scroll apenas interno se houver muitas ligas */
    background: #000 !important; /* Fundo base para garantir opacidade total */
}

/* 2. REGRA DE SEGURANÇA (BLOQUEIO DE VAZAMENTO) */
/* Se o elemento tiver o atributo 'hidden' (como no seu index.html), ele some totalmente */
#league-selection-section[hidden] {
    display: none !important;
    visibility: hidden !important;
    z-index: -1000 !important;
    opacity: 0 !important;
}

/* 3. CAMADA DE FUNDO (ESTÁDIO) */
/* O estádio só é renderizado se a seção NÃO estiver escondida */
#league-selection-section:not([hidden])::before {
    content: "" !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(rgba(0,0,0,0.75), rgba(0,0,0,0.75)), 
                url('../img/Stadium.jpg') no-repeat center center !important;
    background-size: cover !important;
    z-index: -1 !important;
}

/* ============================================================
   ISOLAMENTO: Cabeçalho, Busca e Cards (Estética Foto 2)
   ============================================================ */

/* 1. CABEÇALHO DA SELEÇÃO (FOTO 2) */
#league-selection-section .league-selection-title {
    width: 100% !important;
    max-width: 380px !important; /* Alinhado com a largura dos cards */
    font-size: 1.6rem !important;
    margin-bottom: 20px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    text-align: left !important;
    color: #ffffff !important;
    letter-spacing: -0.5px !important;
}

/* 2. BARRA DE BUSCA (ESTILO FOTO 2) */
#league-selection-section .search-container {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-radius: 10px !important;
    padding: 12px 15px !important;
    margin-bottom: 30px !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    width: 100% !important;
    max-width: 380px !important;
    display: flex !important;
    align-items: center !important;
}

#league-selection-section .search-container input {
    background: transparent !important;
    border: none !important;
    color: white !important;
    outline: none !important;
    width: 100% !important;
    font-size: 0.95rem !important;
}

#league-selection-section .search-container input::placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* 3. CONTAINER DE CARDS */
#league-selection-section #leagues-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
    width: 100% !important;
    max-width: 380px !important; /* Tamanho compacto da Foto 2 */
    margin-bottom: 40px !important;
}

/* 4. ESTILO DO CARD (FOTO 2 - GLASSMORPHISM) */
#league-selection-section .league-card-glass {
    background: linear-gradient(237deg, #7acfd9 0%, #bfc9cd 45%, #38bdf8 100%) !important;
    border-radius: 54px !important;
    padding: 19px !important;
    text-align: center !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    color: #23304e !important;
}

/* 5. LOGO DA LIGA */
#league-selection-section .league-logo-img {
    height: 100px !important;
    width: auto !important;
    object-fit: contain !important;
    margin-bottom: -20px !important;
    margin-top: -14px;
    filter: drop-shadow(0 13px 3px rgba(1, 1, 1, 0.2)) !important;
}

/* 6. TEXTOS INTERNOS DO CARD */
#league-selection-section .league-title {
    color: #0f172a !important;
    font-size: 1.35rem !important;
    font-weight: 900 !important;
    margin: 8px 0 4px 0 !important;
}

#league-selection-section .league-info-text {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: #334155 !important;
    margin-bottom: 12px !important;
}

/* 7. ÁREA DE AÇÕES (BOTÃO + LINK) */
#league-selection-section .league-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 15px !important;
    gap: 15px !important;
}

/* BOTÃO ENTRAR (ESTILO PÍLULA) */
#league-selection-section .btn-modern-primary {
    background: linear-gradient(180deg, #1e3a8a 0%, #1e40af 100%) !important; /* Azul Marinho Profundo */
    color: #ffffff !important;
    border: none !important;
    border-radius: 30px !important;
    padding: 10px 40px !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    box-shadow: 0 4px 12px rgba(30, 58, 138, 0.4) !important;
    cursor: pointer !important;
}

/* Link Ver Ranking */
#league-selection-section .ver-mais-link {
    font-size: 0.85rem !important;
    color: #1e3a8a !important;
    text-decoration: underline !important;
    font-weight: 700 !important;
    cursor: pointer !important;
}

/* 8. FOOTER DO CARD (TEMPO) */
#league-selection-section .league-footer-info {
    margin-top: 15px !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    color: #334155 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 5px !important;
}

#league-selection-section .league-footer-info i {
    font-size: 0.85rem !important;
}

/* 9. LOADING / SPINNER */
#league-selection-section .loading {
    color: #ffffff !important;
    text-align: center !important;
    font-weight: 600 !important;
    padding: 40px !important;
}
/* Estilização do Slider para parecer com o da imagem */
  .strategy-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  }

  input:checked + .strategy-slider {
    background-color: #28a745; /* Verde para o modo Live */
  }

  input:checked + .strategy-slider:before {
    transform: translateX(24px);
  }

  /* Feedback visual nas labels do toggle */
  .mode-active {
    color: #1a2a6c !important;
    opacity: 1;
  }
  .mode-inactive {
    color: #ccc !important;
  }

  /* Estilo para os novos cards de secagem (JS deve injetar essa estrutura) */
  .secagem-card {
    border-left: 4px solid #d93025;
    background: #fff;
    padding: 15px;
    border-radius: 0 12px 12px 0;
    margin-bottom: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  }
  /* --- CONTAINER E CARDS PRINCIPAIS --- */
.strategy-container {
    max-width: 100%;
    margin: 0 auto;
}

.strategy-summary-card {
    position: relative;
    overflow: hidden;
}

.secagem-section {
    margin-top: 25px;
}

/* --- CARDS DE SECAGEM --- */
.secagem-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.secagem-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* --- ANIMAÇÕES E BADGES LIVE --- */
.badge-live-pulse {
    display: inline-block;
    box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.7);
}

@keyframes pulseRed {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(231, 76, 60, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(231, 76, 60, 0);
    }
}

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

/* --- ESTILOS DO TOGGLE (SWITCH) --- */
.strategy-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
}

.strategy-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #1a2a6c;
    transition: .4s;
    border-radius: 34px;
}

.strategy-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .strategy-slider {
    background-color: #28a745;
}

input:checked + .strategy-slider:before {
    transform: translateX(24px);
}

/* --- RESPONSIVIDADE --- */
@media (max-width: 768px) {
    .secagem-grid {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    
    .strategy-summary-card {
        padding: 15px;
    }
}
/* =========================================
   BOTTOM NAV - ESTILO GLASSMORPHISM SLIM
   ========================================= */

.app-nav {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    
    /* Altura reduzida conforme solicitado */
    height: 60px !important; 
    
    display: flex !important;
    justify-content: space-around !important;
    align-items: center !important;
    
    /* Efeito Vidro Cinza (Melhora legibilidade em fundo branco) */
    background: rgba(25, 25, 30, 0.5) !important; 
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    
    /* Colagem total no fundo da tela */
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    
    /* Arredonda apenas as quinas de cima */
    border-radius: 12px 12px 0 0 !important; 
    
    z-index: 9999 !important;
    
    /* Garante que não apareça a borda arredondada de baixo */
    transform: translateY(1px) !important;
    
    /* Suporte para notch de iPhones modernos */
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}

/* Estilização dos Botões Originais */
.app-nav button {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    opacity: 0.6 !important; 
    transition: all 0.2s ease !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    flex: 1 !important;
    padding: 5px 0 !important;
}

/* Ajuste dos ícones que você já usa */
.app-nav button i, 
.app-nav button svg {
    font-size: 18px !important;
    margin-bottom: 2px !important;
    display: block !important;
    fill: currentColor !important;
}

/* ESTADO ATIVO - O brilho Ciano da referência */
.app-nav button.active {
    opacity: 1 !important;
    color: #00e5ff !important; /* Cor Aqua/Ciano */
    text-shadow: 0 0 8px rgba(0, 229, 255, 0.5) !important;
}

.app-nav button.active i, 
.app-nav button.active svg {
    filter: drop-shadow(0 0 5px rgba(0, 229, 255, 0.6)) !important;
}

/* Ajuste de respiro para o conteúdo do app não ficar escondido */
#app-section, .tab-content {
    padding-bottom: 0px !important;
}
/* =========================================
   MENU "MAIS" - GLASSMORPHISM CLARO (DEFINITIVO)
   ========================================= */

#more-menu {
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    
    /* Alinhamento total à direita e base */
    bottom: 60px !important; 
    right: 0 !important;
    
    /* Largura Ultra-Slim para evitar vácuo lateral */
    width: 150px !important; 
    min-width: 150px !important;
    
    /* Altura automática para eliminar scroll */
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    
    /* Efeito Vidro Clareado (Igual ao Bottom Nav) */
    background: rgba(35, 35, 40, 0.5) !important; 
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    
    /* Bordas Assimétricas (Reto na direita, redondo na esquerda) */
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-right: none !important; 
    border-radius: 15px 0 0 15px !important; 
    
    /* Sombra sutil para profundidade */
    box-shadow: -5px 5px 20px rgba(0, 0, 0, 0.3) !important;
    z-index: 10000 !important;
    padding: 8px 5px !important;
    
    /* Transição suave (respeita o seu JS) */
    transition: opacity 0.2s ease !important;
}

/* Garante que o menu respeite o toggleAttribute('hidden') do App.js */
#more-menu[hidden] {
    display: none !important;
}

/* Estilização dos itens internos com espaçamento para toque */
#more-menu button {
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    
    /* Padding vertical para manuseio confortável */
    padding: 13px 12px !important; 
    
    display: flex !important;
    align-items: center !important;
    gap: 10px !important; 
    
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: all 0.2s ease !important;
}

/* Efeito ao tocar/hover */
#more-menu button:active,
#more-menu button:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #00e5ff !important; /* Ciano Neon */
    transform: scale(0.97) !important;
}

/* Ícones do menu */
#more-menu button i, 
#more-menu button svg {
    font-size: 17px !important;
    width: 20px !important;
    text-align: center !important;
    color: inherit !important;
}

/* Botão Sair com divisor mais claro */
#more-menu button[data-action="logout"] {
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
    margin-top: 6px !important;
    padding-top: 14px !important;
    color: #ff5252 !important;
}
/* ============================================================
   ESTILO CYBER-GRASS: COMPACTO & ALINHADO (#ranking)
   ============================================================ */

/* Container Principal - Fundo Verde do Site */
#ranking {
    background: #1b4d3e !important; 
    padding: 10px 5px !important; /* Reduzido para ganhar espaço */
    min-height: 100vh !important;
}

/* Força transparência caso o container tenha a classe .tab-content global */
#ranking.tab-content {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Título da Seção - Compacto */
#ranking h2 {
    color: #ffffff !important;
    text-align: center !important;
    font-weight: 800 !important;
    margin-bottom: 15px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-size: 1.1rem !important;
}

/* ============================================================
   ABAS DE NAVEGAÇÃO
   ============================================================ */
#ranking .ranking-tabs-container {
    background: rgba(0, 0, 0, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    padding: 3px !important;
    display: flex !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    margin-bottom: 35px !important;
    margin-top: -22px;
}

#ranking .rank-tab {
    background: transparent !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.4) !important;
    font-weight: 700 !important;
    flex: 1 !important;
    padding: 7px !important; /* Mais apertado */
    font-size: 0.8rem !important;
    transition: 0.3s !important;
}

#ranking .rank-tab.active {
    background: #2563eb !important; 
    color: #ffffff !important;
    border-radius: 9px !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4) !important;
}

/* ============================================================
   CARDS DOS USUÁRIOS (RANKING ITEM)
   ============================================================ */
#ranking .ranking-item {
    background: rgba(255, 255, 255, 0.07) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 8px !important;
    padding: 6px 12px !important; /* Compacto verticalmente */
    margin-bottom: 5px !important;  /* Espaço mínimo entre usuários */
    display: flex !important;
    flex-direction: column !important; /* Permite o card de detalhes expandir abaixo */
    transition: transform 0.2s !important;
}

/* CORREÇÃO DE ALINHAMENTO: Nome e Pontos lado a lado */
#ranking .ranking-main-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important; /* Nome esquerda, Pontos direita */
    width: 100% !important;
}

/* DESTAQUE DO USUÁRIO LOGADO (Neon) */
#ranking .ranking-item.is-me {
    border: 1px solid #00ffff !important; 
    background: rgba(0, 255, 255, 0.05) !important;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.2) !important;
}

/* ALINHAMENTO INTERNO (MEDALHA + NOME) */
#ranking .user-info-flex { 
    display: flex !important; 
    align-items: center !important; 
    gap: 10px !important; 
}

#ranking .medal-icon {
    font-size: 1.3rem !important; /* Reduzido */
    min-width: 30px !important;   /* Ocupa menos espaço horizontal */
    text-align: left !important;
    display: inline-block !important;
}

#ranking .user-name-text { 
    font-weight: 600 !important; 
    color: #ffffff !important; 
    font-size: 0.9rem !important; /* Fonte otimizada */
    letter-spacing: 0.3px !important;
    text-decoration: none !important;
}

/* PONTUAÇÃO - AZUL NEON COMPACTO */
#ranking .pts-neon { 
    font-weight: 800 !important; 
    color: #00ffff !important; 
    font-size: 1.05rem !important; 
    text-shadow: 0 0 8px rgba(0, 255, 255, 0.6) !important;
    letter-spacing: 0.3px !important;
    cursor: pointer;
    white-space: nowrap !important;
}

/* ============================================================
   CARD DE DETALHES (EXPANDIDO COMPACTO)
   ============================================================ */
#ranking .user-score-card {
    background: rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 6px !important;
    margin-top: 6px !important;
    padding: 6px !important;
    width: 100% !important;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2) !important;
    animation: slideDown 0.3s ease-out !important;
}

#ranking .user-score-breakdown {
    display: flex !important;
    justify-content: space-around !important;
    align-items: center !important;
}

#ranking .user-score-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    flex: 1 !important;
}

#ranking .user-score-item strong {
    color: #00ffff !important; 
    font-size: 0.95rem !important;
    font-weight: 900 !important;
    margin-bottom: 1px !important;
}

#ranking .user-score-item span {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 0.5rem !important; /* Legenda bem pequena */
    font-weight: 700 !important;
    text-transform: uppercase !important;
}

/* Efeito no detalhe do usuário logado */
#ranking .is-me .user-score-card {
    border: 1px solid rgba(0, 255, 255, 0.2) !important;
}

/* ============================================================
   ANIMAÇÕES E LIMPEZA
   ============================================================ */
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

#ranking .ranking-mobile-item, 
#ranking .ranking-mobile-row, 
#ranking .ranking-mobile-list {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}
/* ============================================================
   CONTROLE DE ROLAGEM E RESPIRO FINAL (ABAS DE JOGO)
   ============================================================ */

/* 1. LIBERAÇÃO DE SCROLL GLOBAL */
body, html {
    height: auto !important;
    overflow-y: auto !important;
    background-attachment: fixed !important;
}

/* 2. RESPIRO DE 70PX NAS ÁREAS DE APOSTA */
/* O min-height garante que a página tenha corpo para rolar */
#bets-container, 
#knockout-container,
.tab-bets,
.tab-knockout {
    padding-bottom: 70px !important; 
    display: block !important;
    height: auto !important;
    min-height: 100vh !important;
    overflow: visible !important;
}

/* 3. PROTEÇÃO DO PERFIL (MODAL) */
/* Isola o perfil para não ser afetado pelo respiro das abas */
.modal-profile, 
.user-profile-container,
#profile-modal {
    padding-bottom: 20px !important;
    height: auto !important;
    position: relative !important;
    z-index: 10001 !important;
}

/* 4. AJUSTE DOS BOTÕES DE SALVAR */
/* Garante que o botão apareça logo após o último card com margem segura */
#save-bets, 
#save-knockout-bets,
.btn-save-bets {
    margin: 20px auto 50px auto !important;
    display: block !important;
    position: relative !important;
    z-index: 99 !important;
    clear: both !important;
}

/* ============================================================
   ESTILO ESTRATÉGIA - HUD GLASS (VERSÃO FINAL OTIMIZADA)
   ============================================================ */

/* Container Principal */
#ranking .strategy-container {
    padding: 15px !important;
    color: white !important;
}

/* Container do Seletor e Toggle */
#ranking #strategy-selector-container {
    background: rgba(255, 255, 255, 0.03) !important;
    backdrop-filter: blur(10px);
    padding: 20px !important;
    border-radius: 20px;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Dropdown Customizado (Visual de Vidro Claro) */
#strategy-user-select {
    appearance: none;
    -webkit-appearance: none;
    background: rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 12px !important;
    color: white !important;
    padding: 12px 15px !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    width: 100% !important;
    outline: none !important;
    cursor: pointer;
}

/* Correção de leitura das opções do Dropdown */
#strategy-user-select option {
    background-color: #1b2a41 !important; /* Fundo escuro sólido para contraste ao abrir */
    color: white !important;
}

/* Labels Modo Oficial / Live */
#ranking .mode-label {
    font-size: 0.75rem !important;
    font-weight: 900 !important;
    letter-spacing: 1px;
}

#ranking .mode-off { color: rgba(255, 255, 255, 0.4); }
#ranking .mode-live { 
    color: #00ff88 !important; 
    text-shadow: 0 0 10px rgba(0, 255, 136, 0.5); 
}

/* Card de Resumo (Pontos e Posição) */
#ranking .strategy-glass-card {
    background: rgba(0, 0, 0, 0.5) !important; /* Opacidade 50% para leitura perfeita */
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 24px !important;
    padding: 25px !important;
    margin-bottom: 25px !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4) !important;
}

/* Título de Seções (Foco na Secagem) */
#ranking .secagem-section h4 {
    color: white;
    font-size: 0.8rem;
    font-weight: 800;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding-left: 10px;
    border-left: 3px solid #ff6b6b;
}

/* Cards de Secagem (Lista de Jogos) */
#ranking .secagem-card {
    background: rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 15px !important;
    padding: 15px !important;
    margin-bottom: 12px !important;
    border-left: 4px solid #ff6b6b !important;
}

/* Palpites (Vence/Classifica) */
#ranking .pred-label {
    font-size: 0.55rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
}

#ranking .pred-value.win { 
    color: #00ffff !important; 
    text-shadow: 0 0 8px rgba(0, 255, 255, 0.3);
}

#ranking .pred-value.class { 
    color: #ffda44 !important; 
    text-shadow: 0 0 8px rgba(255, 218, 68, 0.3);
}

/* Pills de Rivais */
#ranking .rival-pill {
    background: rgba(231, 76, 60, 0.2) !important;
    color: #ff6b6b !important;
    border: 1px solid rgba(231, 76, 60, 0.3) !important;
    padding: 3px 10px !important;
    border-radius: 6px !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
}

/* Ajuste na barra de probabilidade */
#ranking .prob-bar-fill {
    background: linear-gradient(90deg, #27ae60, #2ecc71) !important;
    box-shadow: 0 0 15px rgba(46, 204, 113, 0.8) !important;
}
/* Bloqueia a exibição de botões admin para quem não tem permissão */
#more-menu button[data-admin-only][hidden] {
    display: none !important;
}

/* Garante que o atributo hidden nativo também seja respeitado */
[hidden] {
    display: none !important;
}
/* ============================================================
   ESTILIZAÇÃO COMPLETA: CARDS METÁLICOS + LÓGICA DE HITS
   ============================================================ */

/* 1. O CARD E A MIRA (CONFIGURAÇÃO 43% / 49%) */
.match-card {
    background: url('../img/card_grupos.webp') no-repeat center center !important;
    background-size: 100% 100% !important;
    width: 100% !important;
    max-width: 500px !important; 
    height: 250px !important; 
    position: relative !important;
    overflow: visible !important;
    background-color: transparent !important;
    border: none !important;
}

   .match-card .bet-options, .match-card .bet-container {
    position: absolute !important;
    top: 46% !important;
    left: 48% !important;
    transform: translate(-50%, -50%) !important;
    width: 89% !important;
    height: 130px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 7px !important;
    z-index: 5 !important;
}

.match-card .option-wrapper:nth-child(2) .bet-team-vertical {
    position: relative !important;
    bottom: 10px !important;
    left: 6px !important;
    transform: none !important;
    display: block !important;
}

/* 2. NOMES DOS TIMES (FORA DO METAL - EXCETO EMPATE) */
.match-card .bet-option:not([data-type="draw"]):not(:nth-child(2)) .bet-team-vertical {
    position: absolute !important;
    bottom: -32px !important; 
    width: 140% !important;
    text-align: center !important;
    font-weight: 900 !important;
    font-size: 8.5px !important;
    text-transform: uppercase !important;
    color: #1a1a1a !important;
    text-shadow: 0.5px 0.5px 0px rgba(255,255,255,0.5) !important;
    z-index: 10 !important;
}

/* 3. LÓGICA DE CORES PÓS-FINALIZADO (HITS) */

/* ACERTO CHEIO (Hit Full) - Brilho Verde */
.match-card.hit-full .bet-option.selected {
    filter: drop-shadow(0 0 8px rgba(40, 167, 69, 0.8)) !important;
}
.match-card.hit-full .bet-option.selected .bet-team-vertical {
    color: #28a745 !important;
    text-shadow: none !important;
}

/* ACERTO PARCIAL (Hit Parcial) - Brilho Amarelo/Dourado */
.match-card.hit-parcial .bet-option.selected {
    filter: drop-shadow(0 0 8px rgba(255, 193, 7, 0.8)) !important;
}
.match-card.hit-parcial .bet-option.selected .bet-team-vertical {
    color: #b8860b !important;
    text-shadow: none !important;
}

/* ERRO (Hit None) - Brilho Vermelho */
.match-card.hit-none .bet-option.selected {
    filter: drop-shadow(0 0 5px rgba(220, 53, 69, 0.6)) !important;
}
.match-card.hit-none .bet-option.selected .bet-team-vertical {
    color: #dc3545 !important;
    text-shadow: none !important;
}

/* 4. REGRAS DE ESCUDOS (P&B VS SELECIONADO) */
.match-card[data-status="finished"] .team-logo-api,
.match-card[data-status="encerrado"] .team-logo-api,
.match-card[data-status="scheduled"] .team-logo-api {
    filter: grayscale(100%) brightness(80%) !important;
    width: 45px !important;
    height: 45px !important;
}

.match-card .bet-option.selected .team-logo-api,
.match-card .bet-option.active .team-logo-api {
    filter: grayscale(0%) brightness(100%) !important;
}

/* 5. CORREÇÃO DO EMPATE (TRAVADO NO CENTRO) */
.match-card .bet-option[data-type="draw"] .bet-team-vertical, 
.match-card .bet-option:nth-child(2) .bet-team-vertical {
    position: relative !important;
    bottom: 0 !important;
    font-weight: 900 !important;
    font-size: 11px !important;
    color: black !important;
    text-shadow: 0.5px 0.5px 0px rgba(255,255,255,0.5) !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 6. REGRA DE OURO: BANDEIRAS DO RODAPÉ (SEMPRE COLORIDAS) */
.match-card .knockout-footer-compact img,
.match-card .match-score-wrapper img,
.match-card .match-score-wrapper .team-logo-api {
    filter: grayscale(0%) !important; 
    width: 18px !important;
    height: 18px !important;
}

/* 7. LIMPEZA FINAL */
.match-card .bet-option, .logo-wrapper, .bet-option-wrapper {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.knockout-footer-compact {
    position: absolute !important;
    bottom: 13px !important;
    width: 94% !important;
    left: 3% !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}
/* ============================================================
   ESTILIZAÇÃO MESTRE: CARDS METÁLICOS (COMPLETO)
   ============================================================ */

/* 1. ESTRUTURA DO CARD E MIRA (43% / 49%) */
.match-card {
    background: url('../img/card_grupos.webp') no-repeat center center !important;
    background-size: 100% 100% !important;
    width: 100% !important;
    max-width: 500px !important; 
    height: 250px !important; 
    position: relative !important;
    overflow: visible !important;
    border: none !important;
}

.match-card .bet-options, 
.match-card .bet-container {
    position: absolute !important;
    top: 43% !important;
    left: 49% !important;
    transform: translate(-50%, -50%) !important;
    width: 93% !important;
    height: 130px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 7px !important;
    z-index: 5 !important;
}

/* 2. LIMPEZA TOTAL DE FUNDOS E BORDAS (MESMO AO CLICAR/SELECIONAR) */
.match-card .bet-option, 
.match-card button.bet-option {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* 3. NOMES DOS TIMES (EXPULSOS PARA FORA - EXCETO EMPATE) */
.match-card .bet-option:not([data-type="draw"]):not(:nth-child(2)) .bet-team-vertical {
    position: absolute !important;
    bottom: -32px !important; 
    width: 140% !important;
    text-align: center !important;
    font-weight: 900 !important;
    font-size: 8.5px !important;
    text-transform: uppercase !important;
    color: #1a1a1a !important; 
    z-index: 10 !important;
    transition: color 0.2s ease !important;
}

/* 4. LÓGICA DO VERDE FORÇADO (QUANDO SELECIONADO) */
.match-card .bet-option.selected .bet-team-vertical,
.match-card .bet-option.active .bet-team-vertical {
    color: #28a745 !important; 
    text-shadow: none !important;
    -webkit-text-fill-color: #28a745 !important;
}

/* 5. ESCUDOS (P&B -> COLORIDO SELECIONADO) */
.match-card .team-logo-api {
    width: 45px !important;
    height: 45px !important;
    filter: grayscale(100%) brightness(90%) !important;
    transition: all 0.3s ease !important;
}

.match-card .bet-option.selected .team-logo-api,
.match-card .bet-option.active .team-logo-api {
    filter: grayscale(0%) brightness(100%) !important;
}

/* 6. CORREÇÃO DO EMPATE (TRAVADO NO CENTRO DO METAL) */
.match-card .bet-option[data-type="draw"] .bet-team-vertical,
.match-card .bet-option:nth-child(2) .bet-team-vertical {
    position: relative !important;
    bottom: 0 !important;
    font-weight: 900 !important;
    font-size: 13px !important;
    color: black !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
}

/* 7. RODAPÉ E PLACAR (FENDA INFERIOR) */
.match-card .knockout-footer-compact {
    position: absolute !important;
    bottom: 13px !important;
    width: 94% !important;
    left: 6% !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}


.match-card .match-score-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.match-card .match-score-wrapper img {
    width: 18px !important;
    height: 18px !important;
    filter: grayscale(0%) !important;
}
/* ============================================================
   BETS + KNOCKOUT ONLY
   ESTILIZAÇÃO MESTRE METÁLICA
============================================================ */

/* ============================================================
   ESCOPO TOTAL
   EVITA VAZAMENTO PARA OUTRAS ABAS
============================================================ */

#matches-container .match-card,
#knockout-container .match-card {
    position: relative !important;
}

/* ============================================================
   ANULA FUNDOS SÓLIDOS DOS BOTÕES
============================================================ */

#matches-container .match-card .bet-option,
#matches-container .match-card button.bet-option,
#matches-container .match-card.hit-full div.option-wrapper button.bet-option.selected,
#matches-container .match-card.hit-full .bet-option,
#matches-container .match-card[class*="hit-"] .bet-option,
#matches-container .match-card button.bet-option:focus,
#matches-container .match-card button.bet-option:active,
#matches-container .match-card button.bet-option.selected,
#matches-container .match-card button.bet-option.active,

#knockout-container .match-card .bet-option,
#knockout-container .match-card button.bet-option,
#knockout-container .match-card.hit-full div.option-wrapper button.bet-option.selected,
#knockout-container .match-card.hit-full .bet-option,
#knockout-container .match-card[class*="hit-"] .bet-option,
#knockout-container .match-card button.bet-option:focus,
#knockout-container .match-card button.bet-option:active,
#knockout-container .match-card button.bet-option.selected,
#knockout-container .match-card button.bet-option.active {

    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    border: none !important;
    box-shadow: none !important;
    outline: none !important;

    -webkit-tap-highlight-color: transparent !important;
}

/* ============================================================
   TEXTURA METÁLICA
============================================================ */

#matches-container .match-card,
#matches-container .match-card.hit-full,
#matches-container .match-card.hit-parcial,
#matches-container .match-card.hit-none,
#matches-container .match-card[data-status="encerrado"],
#matches-container .match-card[data-status="finished"],

#knockout-container .match-card,
#knockout-container .match-card.hit-full,
#knockout-container .match-card.hit-parcial,
#knockout-container .match-card.hit-none,
#knockout-container .match-card[data-status="encerrado"],
#knockout-container .match-card[data-status="finished"] {

   background: url(../img/card_grupos.webp) no-repeat center center !important;
    background-size: 107% 121% !important;
    background-color: transparent !important;
  }

/* ============================================================
   GLOW DOS ACERTOS
============================================================ */

#matches-container .match-card.hit-full .bet-option.selected,
#knockout-container .match-card.hit-full .bet-option.selected {

    filter: drop-shadow(0 0 15px rgba(40, 167, 69, 0.9)) !important;
}

#matches-container .match-card .bet-option.selected .bet-team-vertical,
#matches-container .match-card .bet-option.active .bet-team-vertical,

#knockout-container .match-card .bet-option.selected .bet-team-vertical,
#knockout-container .match-card .bet-option.active .bet-team-vertical {

    color: #28a745 !important;
    -webkit-text-fill-color: #00ff3a !important;

    text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5) !important;

    font-weight: 900 !important;
}

/* ============================================================
   RESET GLOBAL DOS LOGOS
============================================================ */

#matches-container .team-logo-api,
#knockout-container .team-logo-api {

    object-fit: contain !important;
    vertical-align: middle !important;
}

/* ============================================================
   ESCUDOS DAS APOSTAS
============================================================ */

#matches-container .bet-options .bet-option .team-logo-api,
#knockout-container .bet-options .bet-option .team-logo-api {

    width: 50px !important;
    height: 50px !important;

    filter: grayscale(100%) brightness(90%) !important;

    transition:
        filter 0.25s ease,
        transform 0.25s ease !important;
}

/* COLORIDO SOMENTE SELECIONADO */

#matches-container .bet-options .bet-option.selected .team-logo-api,
#matches-container .bet-options .bet-option.active .team-logo-api,

#knockout-container .bet-options .bet-option.selected .team-logo-api,
#knockout-container .bet-options .bet-option.active .team-logo-api {

    filter: grayscale(0%) brightness(100%) !important;

    transform: scale(1.9) !important;
}

/* ============================================================
   PLACAR AO VIVO
============================================================ */

#matches-container .score-container-header .team-logo-api,
#matches-container .score-numbers-inline .team-logo-api,

#knockout-container .score-container-header .team-logo-api,
#knockout-container .score-numbers-inline .team-logo-api {

    width: 28px !important;
    height: 28px !important;

    min-width: 28px !important;
    max-width: 28px !important;

    filter: none !important;
    -webkit-filter: none !important;

    opacity: 1 !important;

    transform: none !important;

    position: relative !important;
    top: -1px !important;

    margin: 0 6px !important;
}

/* ============================================================
   PLACAR FINAL / FOOTER
============================================================ */

#matches-container .final-score img,
#matches-container .final-score .team-logo-api,
#matches-container .final-score .logo-wrapper img,
#matches-container .final-score .logo-wrapper .team-logo-api,

#matches-container .placar-mini .team-logo-api,
#matches-container .match-score-wrapper .team-logo-api,
#matches-container .knockout-footer-compact .team-logo-api,

#knockout-container .final-score img,
#knockout-container .final-score .team-logo-api,
#knockout-container .final-score .logo-wrapper img,
#knockout-container .final-score .logo-wrapper .team-logo-api,

#knockout-container .placar-mini .team-logo-api,
#knockout-container .match-score-wrapper .team-logo-api,
#knockout-container .knockout-footer-compact .team-logo-api {

    width: 18px !important;
    height: 18px !important;

    min-width: 18px !important;
    max-width: 18px !important;

    filter: grayscale(0%) !important;
    -webkit-filter: grayscale(0%) !important;

    opacity: 1 !important;

    object-fit: contain !important;

    transform: none !important;

    margin: 0 4px !important;

    position: relative !important;
    top: -1px !important;

    display: inline-block !important;
    vertical-align: middle !important;
}

/* BLOQUEIA HERANÇA */

#matches-container .final-score *,
#matches-container .placar-mini *,
#matches-container .match-score-wrapper *,
#matches-container .knockout-footer-compact *,

#knockout-container .final-score *,
#knockout-container .placar-mini *,
#knockout-container .match-score-wrapper *,
#knockout-container .knockout-footer-compact * {

    filter: none !important;
    -webkit-filter: none !important;
}

/* ============================================================
   FOOTER
============================================================ */

#knockout-container .match-card .knockout-footer-compact {

    position: absolute !important;

    bottom: 15px !important;

    width: 87% !important;
    left: 7% !important;

    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;

    z-index: 50 !important;
}

#knockout-container .match-card .match-score-wrapper {

    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

/* ============================================================
   EMPATE CENTRALIZADO
============================================================ */

#matches-container .match-card .bet-option[data-type="draw"] .bet-team-vertical,
#matches-container .match-card .bet-option:nth-child(2) .bet-team-vertical,

#knockout-container .match-card .bet-option[data-type="draw"] .bet-team-vertical,
#knockout-container .match-card .bet-option:nth-child(2) .bet-team-vertical {

    position: relative !important;

    

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    height: 100% !important;

    font-size: 14px !important;
}

/* ============================================================
   EMOJIS
============================================================ */

#matches-container .bet-options .bet-option .team-emoji,
#knockout-container .bet-options .bet-option .team-emoji {

    filter: grayscale(100%) opacity(0.6) !important;

    transition:
        filter 0.3s ease,
        transform 0.3s ease !important;

    display: inline-block !important;
}

/* COLORIDO SOMENTE SELECIONADO */

#matches-container .bet-options .bet-option.selected .team-emoji,
#matches-container .bet-options .bet-option.active .team-emoji,

#knockout-container .bet-options .bet-option.selected .team-emoji,
#knockout-container .bet-options .bet-option.active .team-emoji {

    filter: grayscale(0%) opacity(1) !important;

    transform: scale(1.9) !important;
}

/* ============================================================
   LIMPEZA DE FUNDO
============================================================ */

#matches-container .match-card .bet-option,
#knockout-container .match-card .bet-option {

    background: transparent !important;
    background-color: transparent !important;

    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* ============================================================
   BANDEIRA ENCRAVADA
============================================================ */

#knockout-container .match-card .qual-mini-row {
    position: relative !important;
}

/* SELECT */

#knockout-container .match-card select[data-q] {

    appearance: none !important;
    -webkit-appearance: none !important;

    width: 26px !important;
    height: 26px !important;

    background: rgb(255 255 255 / 40%) !important;

    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 50% !important;

    box-shadow: inset 2px 2px 4px rgba(0,0,0,0.8) !important;

    color:  #000000 !important;

    cursor: pointer !important;

    vertical-align: middle !important;

    position: relative !important;
    z-index: 2 !important;
}

/* CONTAINER DA BANDEIRA */

#knockout-container .engraved-real-flag {

    position: absolute !important;

    z-index: 5 !important;

    pointer-events: none !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 26px !important;
    height: 26px !important;

    top: 50% !important;

    transform: translateY(-50%) !important;
}

/* IMAGEM DENTRO */

#knockout-container .engraved-real-flag img,
#knockout-container .engraved-real-flag .team-emoji,
#knockout-container .engraved-real-flag span {

    width: 17px !important;
    height: 17px !important;

    object-fit: contain !important;

    filter: brightness(1.1) !important;
}

/* ============================================================
   TEXTO CLASSIFICADO
============================================================ */

#knockout-container .match-card .qual-label {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #fffefe !important;
    margin-right: 5px !important;
    vertical-align: middle !important;
}
/* ============================================================
   CONFIGURAÇÃO DE BACKGROUNDS (HEADER + ITEM + CONTEÚDO)
   ============================================================ */

/* 1. ITEM PAI (BASE DO ACORDEÃO) */
.accordion-item {
    /* Puxa o background principal */
    background: url('../img/ac_bg.webp') no-repeat center center !important;
    background-size: 100% 100% !important;
    border: none !important;
    overflow: visible !important;
    padding: 4px !important;
    margin-bottom: 20px !important;
    
}

/* 2. BACKGROUND DO HEADER (CABEÇALHO) */
.accordion-header {
    /* Puxa o background do header */
    background: url('../img/ac_header.webp') no-repeat center center !important;
    background-size: 100% 100% !important;
    border: none !important;
    padding: 46px !important; 
    display: flex !important;
    justify-content: space-between;
    align-items: center;
}

/* 3. FUNDO DO CONTEÚDO (A FENDA ONDE FICAM OS CARDS) */
.accordion-content {
    background: rgba(0, 0, 0, 0.4) !important;
    margin: 10px !important;
    margin-top: 0 !important; /* Cola no header como no seu teste */
    border: none !important;
    border-radius: 24px !important;
    box-shadow: inset 0 4px 15px rgba(0, 0, 0, 0.9) !important;
    
   
}
/* ============================================================
   SISTEMA DE SELETORES ULTRA-ISOLADO - INOX ESCURO & NEON
   ============================================================ */

/* 1. MOLDURA DE METAL (CONTAINERS ESPECÍFICOS) */
.filter-container-tabela,
.profile-tabs,
.stats-tabs,
.filter-pills, 
.knockout-pills,
.bets-pills {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: fit-content !important;
    min-width: 320px !important; /* Impede que o seletor fique minúsculo em Profile/My Bets */
    margin: 25px auto !important; /* Centralização horizontal absoluta na página */
    
    background: linear-gradient(180deg, 
        #3a3e45 0%, 
        #25282d 45%, 
        #1a1c1f 50%, 
        #212429 55%, 
        #32363d 100%) !important;
    
    border: 1px solid #0b0b0b !important;
    border-radius: 50px !important;
    padding: 4px !important;
    box-shadow: inset 0 1px 0px rgba(255,255,255,0.05), 0 4px 15px rgba(0,0,0,0.7) !important;
    list-style: none !important;
    text-decoration: none !important;
}

/* 2. BOTÕES INTERNOS (ISOLAMENTO POR HIERARQUIA) */
/* O estilo só aplica se o botão for FILHO direto dos containers listados acima */
.filter-container-tabela .pill, 
.profile-tabs .pill,
.stats-tabs .pill,
.filter-pills .pill, 
.knockout-pills .pill,
.bets-pills .pill,
.profile-tabs .nav-link,
.stats-tabs .nav-link {
    background: transparent !important;
    color: #8a94a1 !important;
    border: none !important;
    border-right: 1px solid rgba(0, 0, 0, 0.5) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.02) !important;
    padding: 10px 35px !important; /* Área de clique robusta e visual equilibrado */
    font-weight: 700 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    position: relative !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 0 auto !important; /* Garante que as abas distribuam o espaço e não encolham */
    text-decoration: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

/* 3. AJUSTE DE BORDAS NAS EXTREMIDADES (BLINDAGEM CONTRA VAZAMENTO) */
.filter-container-tabela .pill:first-child, .profile-tabs .pill:first-child, .profile-tabs .nav-link:first-child,
.stats-tabs .pill:first-child, .stats-tabs .nav-link:first-child, .filter-pills .pill:first-child,
.knockout-pills .pill:first-child, .bets-pills .pill:first-child { 
    border-left: none !important; 
    border-radius: 40px 0 0 40px !important; 
}

.filter-container-tabela .pill:last-child, .profile-tabs .pill:last-child, .profile-tabs .nav-link:last-child,
.stats-tabs .pill:last-child, .stats-tabs .nav-link:last-child, .filter-pills .pill:last-child,
.knockout-pills .pill:last-child, .bets-pills .pill:last-child { 
    border-right: none !important; 
    border-radius: 0 40px 40px 0 !important; 
}

/* 4. ESTADO ATIVO E LED AZUL NEON (RESTRITO AOS CONTAINERS LISTADOS) */
.filter-container-tabela .pill.active, 
.profile-tabs .pill.active, .profile-tabs .nav-link.active,
.stats-tabs .pill.active, .stats-tabs .nav-link.active,
.filter-pills .pill.active,
.knockout-pills .pill.active,
.bets-pills .pill.active {
    color: #ffffff !important;
    background: rgba(0, 0, 0, 0.3) !important;
    text-shadow: 0 0 8px rgba(74, 158, 255, 0.8) !important;
}

/* O LED AZUL */
.filter-container-tabela .pill.active::before, 
.profile-tabs .pill.active::before, .profile-tabs .nav-link.active::before,
.stats-tabs .pill.active::before, .stats-tabs .nav-link.active::before,
.filter-pills .pill.active::before,
.knockout-pills .pill.active::before,
.bets-pills .pill.active::before {
    content: '' !important;
    position: absolute !important;
    top: 2px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 35px !important;
    height: 3px !important;
    background: #00d2ff !important;
    border-radius: 2px !important;
    box-shadow: 0 0 10px #00d2ff, 0 0 20px #4facfe !important;
    z-index: 5 !important;
}

/* 5. HOVER (SOMENTE PARA ITENS DENTRO DO SISTEMA INOX) */
.filter-container-tabela .pill:hover:not(.active),
.profile-tabs .nav-link:hover:not(.active),
.stats-tabs .nav-link:hover:not(.active),
.filter-pills .pill:hover:not(.active),
.bets-pills .pill:hover:not(.active) {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.03) !important;
}
/* ============================================================
   CORREÇÃO DE ROLAGEM E VISIBILIDADE - MY BETS
   ============================================================ */

/* 1. LIBERA O CONTAINER PRINCIPAL */
#my-bets-container, 
.my-bets-section, 
.my-bets-content {
    height: auto !important;
    min-height: 100vh !important; /* Força o container a ter o tamanho da tela */
    overflow: visible !important;  /* Impede que o conteúdo seja escondido */
    display: block !important;
    padding-bottom: 60px !important; /* Respiro no final para evitar cortes */
}

/* 2. REMOVE TRAVAS DE TABELAS OU WRAPPERS INTERNOS */
.my-bets-list, 
.my-bets-table-wrapper,
.table-responsive {
    overflow-y: visible !important;
    overflow-x: auto !important; /* Mantém scroll horizontal se a tabela for larga */
    height: auto !important;
    max-height: none !important; /* Remove limites de altura fixa */
}

/* 3. AJUSTE GLOBAL PARA GARANTIR ROLAGEM DO BROWSER */
body.modal-open, .modal-open .content-wrapper {
    overflow: visible !important;
}

/* 4. GARANTE QUE O RODAPÉ NÃO SOBREPONHA O CONTEÚDO */
main, .main-content {
    padding-bottom: 80px !important;
}





/* 1. MOLDURA EXTERNA (A CHAPA DE METAL) */
.ticker-wrapper {
    background: #1a1c1f !important;
    border: 1px solid #000 !important;
    border-top: 0px solid #0c0101 !important;
    border-radius: 12px !important;
    padding: 1px !important;
    margin-bottom: -8px !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.8) !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    z-index: 100 !important;
}

/* 1. CONTAINER DA FENDA (ESTRUTURA DE ANCORAGEM) */
    .ticker-wrapper > .ticker-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    overflow: visible !important;
    position: relative !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 1px 0px !important;
}

    /* 2. O TEXTO (ESTRUTURA ANTI-EMPURRÃO) */
    #newsTrack {
    color: #4f69b0 !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
    text-shadow: 0 0 10px rgb(0 0 0 / 70%) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex: 1 !important;
    min-width: 0 !important;
    margin-right: 15px !important;
}

    /* 3. O BOTÃO DE REAÇÃO (ESTILO BLINDADO E TRAVADO) */
    .ticker-wrapper .react-emoji-btn {
    background: radial-gradient(circle, #3a3e45 0%, #111 100%) !important;
    border: 2px solid #000 !important;
    border-top: 2px solid #666 !important;
    border-radius: 50% !important;
    width: 45px !important;
    height: 44px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 101 !important;
    margin-left: auto !important; /* Força ancoragem na direita */
    }

    /* 4. BLINDAGEM DO MENU DE REAÇÕES */
    .ticker-wrapper [class*="emoji-picker"], 
    .ticker-wrapper [class*="reactions-menu"] {
        position: absolute !important;
        bottom: 55px !important;
        right: 0 !important;
        z-index: 9999 !important;
        display: block !important;
    }

    /* ============================================================
   BACKGROUND TÉCNICO - INOX & BLUEPRINT
   ============================================================ */

body {
    /* Cor base profunda */
    background-color: #0b0e11 !important;
    
    /* Camada 1: Brilho Central (Vignette) 
       Camada 2: Linhas Horizontais da Grade
       Camada 3: Linhas Verticais da Grade */
    background-image: 
        radial-gradient(circle at center, rgba(30, 45, 60, 0.4) 0%, rgba(10, 12, 15, 1) 85%),
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px) !important;
    
    /* Define o tamanho dos quadrados da grade (40px) */
    background-size: 100% 100%, 40px 40px, 40px 40px !important;
    
    /* Mantém o fundo fixo ao rolar a página */
    background-attachment: fixed !important;
    
    margin: 0;
    padding: 0;
}

/* 1. GARANTE QUE OS CONTAINERS PAI NÃO SOBREPONHAM O FUNDO */
.main-wrapper, 
.app-container, 
#app, 
.content-wrapper {
    background: transparent !important;
}

/* 2. PROTEÇÃO DE VISIBILIDADE */
/* Isso garante que o fundo não tente "entrar" nos seus componentes metalizados */
.card, 
.accordion-item, 
.match-card, 
.modal-content {
    /* Mantém o que você já tem neles (carbono/metal) */
    backdrop-filter: blur(2px); /* Opcional: dá um leve toque de vidro ao fundo */
}

/* 3. VINHETA DE BORDA (OPCIONAL - PARA MAIOR FOCO NO CENTRO) */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, transparent 60%, rgba(0,0,0,0.4) 100%) !important;
    pointer-events: none;
    z-index: -1;
}
/* =========================================================
   PROFILE PREMIUM — FINAL VERSION
   ISOLADO APENAS NA ABA PROFILE
========================================================= */

:root {
  --neon-cyan: #00d2ff;
  --neon-glow: rgba(0, 210, 255, 0.6);

  --bg-dark-app: #0a0c10;

  --glass-bg: rgba(255, 255, 255, 0.04);

  --glass-border: rgba(255, 255, 255, 0.08);
}

/* =========================================================
   BACKGROUND FORÇADO
========================================================= */

#profile,
#profile-main,
#profile .profile-tab-section {

    background:
        radial-gradient(
            circle at top left,
            rgba(0,120,255,.16),
            transparent 28%
        ),

        radial-gradient(
            circle at top right,
            rgba(0,180,255,.10),
            transparent 30%
        ),

        linear-gradient(
            180deg,
            #05080f 0%,
            #081018 45%,
            #05080f 100%
        ) !important;

    min-height:
        100vh !important;

    color:
        #fff !important;

    position:
        relative !important;

    overflow-x:
        hidden !important;

    padding-bottom:
        120px !important;
}

/* =========================================================
   TÍTULO
========================================================= */

#profile .profile-title {

    font-weight: 900 !important;

    text-transform: lowercase !important;

    letter-spacing: -1.5px !important;

    text-align: center !important;

    font-size: 2.2rem !important;

    margin-bottom: 20px !important;

    background:
        linear-gradient(
            90deg,
            #ffffff,
            #7fdcff,
            #00d2ff
        );

    -webkit-background-clip: text !important;

    -webkit-text-fill-color: transparent !important;

    text-shadow:
        0 0 18px rgba(0,210,255,.18);
}

/* =========================================================
   CARDS BASE
========================================================= */

#profile #profileScoreCard > div,
#profile .profile-card,
#profile .user-score-card {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.05),
            rgba(255,255,255,.025)
        ) !important;

    border:
        1px solid rgba(255,255,255,.06) !important;

    backdrop-filter:
        blur(20px) !important;

    border-radius:
        22px !important;

    box-shadow:
        0 10px 30px rgba(0,0,0,.45),
        0 0 14px rgba(0,120,255,.04) !important;
}

/* =========================================================
   PROFILE PREMIUM CARD
========================================================= */

#profile-main .profile-premium-card {
    position: relative !important;
    overflow: hidden !important;
    padding: 14px !important;
    border-radius: 24px !important;
    background:
        radial-gradient(
            circle at top left,
            rgba(0,120,255,.12),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            rgba(7,12,20,.96),
            rgba(4,8,16,.98)
        ) !important;

    border:
        1px solid rgba(80,130,255,.10) !important;

    box-shadow:
        inset 0 0 30px rgba(0,120,255,.03),
        0 10px 25px rgba(0,0,0,.45),
        0 0 14px rgba(0,120,255,.05) !important;
}

/* =========================================================
   ACCURACY SECTION (AJUSTES PARA O DONUT)
========================================================= */

/* Container que envolve o valor e o gráfico */
.accuracy-card {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px;
    padding: 4px 8px;
}

/* Agrupamento do texto (Percentual + Legenda) */
.accuracy-text-group {
    display: flex;
    flex-direction: column;
}

/* Gráfico Donut */
.accuracy-donut-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.donut-fill {
    transition: stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Cores específicas dos caminhos (strokes) */
.donut-fill.blue {
    stroke: #0080ff !important;
    filter: drop-shadow(0 0 5px rgba(0, 128, 255, 0.3));
}

.donut-fill.purple {
    stroke: #a044ff !important;
    filter: drop-shadow(0 0 5px rgba(160, 68, 255, 0.3));
}

/* Divider vertical entre os cards de aproveitamento */
.accuracy-divider {
    width: 1px;
    height: 40px;
    background: rgba(255, 255, 255, 0.08);
    margin: 0 5px;
}

/* Estilo dos títulos de aproveitamento */
.profile-accuracy-title {
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    opacity: 0.5;
    text-align: center;
    margin-bottom: 15px;
}  /* =========================================================
     HEADER
  ========================================================= */

  #profile-main .profile-premium-header {

      display: flex !important;

      justify-content: space-between !important;

      align-items: center !important;

      margin-bottom: 14px !important;
  }

  #profile-main .profile-user-left {

      display: flex !important;

      align-items: center !important;

      gap: 10px !important;
  }

  /* =========================================================
     AVATAR
  ========================================================= */

  #profile-main .profile-avatar-ring {

      width: 56px !important;
      height: 56px !important;

      border-radius: 50% !important;

      padding: 3px !important;

      background:
          linear-gradient(
              180deg,
              #3b82ff,
              #005eff
          ) !important;

      box-shadow:
          0 0 18px rgba(0,120,255,.25) !important;
  }

  #profile-main .profile-avatar-letter {

      width: 100% !important;
      height: 100% !important;

      border-radius: 50% !important;

      background:
          #071019 !important;

      display: flex !important;

      align-items: center !important;

      justify-content: center !important;

      font-size: 2rem !important;

      font-weight: 900 !important;

      color:
          #fff !important;
  }

  /* =========================================================
     USER
  ========================================================= */

  #profile-main .profile-user-meta {

      display: flex !important;

      flex-direction: column !important;

      justify-content: center !important;

      gap: 4px !important;
  }

  #profile-main .profile-user-name {

      font-size: 1.1rem !important;

      font-weight: 900 !important;

      color:
          #fff !important;

      line-height: 1 !important;
  }

  #profile-main .profile-rank-badge {

      display: inline-flex !important;

      align-items: center !important;

      justify-content: center !important;

      width: fit-content !important;

      padding: 4px 10px !important;

      border-radius: 10px !important;

      background:
          rgba(30,70,180,.45) !important;

      border:
          1px solid rgba(80,130,255,.25) !important;

      color:
          #fff !important;

      font-size: .75rem !important;

      font-weight: 800 !important;
  }

  /* =========================================================
     TOTAL
  ========================================================= */

  #profile-main .profile-total-side {

      display: flex !important;

      flex-direction: column !important;

      align-items: center !important;

      justify-content: center !important;
  }

  #profile-main .profile-total-points {

      font-size: 3.4rem !important;

      line-height: .9 !important;

      font-weight: 900 !important;

      background:
          linear-gradient(
              180deg,
              #6bb6ff,
              #005eff
          );

      -webkit-background-clip: text !important;

      -webkit-text-fill-color: transparent !important;

      text-shadow:
          0 0 18px rgba(0,120,255,.20) !important;
  }

  #profile-main .profile-total-label {

      font-size: .68rem !important;

      font-weight: 700 !important;

      letter-spacing: .6px !important;

      color:
          rgba(255,255,255,.55) !important;

      text-align: center !important;
  }

  /* =========================================================
     BREAKDOWN
  ========================================================= */

  #profile-main .profile-breakdown-grid {

      display: grid !important;

      grid-template-columns:
          1fr 1px 1fr 1px 1fr !important;

      align-items: center !important;

      margin-top: 8px !important;

      padding-top: 14px !important;

      border-top:
          1px solid rgba(255,255,255,.06) !important;
  }

  #profile-main .profile-stat-divider {

      width: 1px !important;

      height: 54px !important;

      background:
          rgba(255,255,255,.06) !important;
  }

  #profile-main .profile-stat-box {

      display: flex !important;

      flex-direction: column !important;

      align-items: center !important;

      justify-content: center !important;

      gap: 4px !important;
  }

  #profile-main .profile-stat-value {

      font-size: 2rem !important;

      line-height: 1 !important;

      font-weight: 900 !important;

      color:
          #fff !important;
  }

  #profile-main .profile-stat-label {

      font-size: .72rem !important;

      font-weight: 700 !important;

      text-transform: uppercase !important;

      color:
          rgba(255,255,255,.58) !important;
  }

  #profile-main .profile-stat-icon {

      font-size: 1.1rem !important;

      line-height: 1 !important;
  }

  /* =========================================================
     ACCURACY
  ========================================================= */

  #profile-main .profile-accuracy-wrapper {

      margin-top: 14px !important;

      border-radius: 18px !important;

      overflow: hidden !important;

      border:
          1px solid rgba(255,255,255,.05) !important;

      background:
          rgba(255,255,255,.02) !important;
  }

  #profile-main .profile-accuracy-title {

      text-align: center !important;

      font-size: .64rem !important;

      font-weight: 700 !important;

      letter-spacing: .7px !important;

      color:
          rgba(255,255,255,.42) !important;

      padding: 8px 0 !important;

      text-transform: uppercase !important;
  }

  #profile-main .profile-accuracy-grid {

      display: grid !important;

      grid-template-columns:
          1fr 1px 1fr !important;

      align-items: stretch !important;
  }

  #profile-main .accuracy-divider {

      width: 1px !important;

      background:
          rgba(255,255,255,.06) !important;
  }

  
/* =========================================================
   INPUT ZOAÇÃO — NEON
========================================================= */

#profile-main #newsInput {

    background:
        rgba(0,0,0,.42) !important;

    border:
        2px solid #00bfff !important;

    border-radius:
        16px !important;

    color:
        #fff !important;

    box-shadow:
        0 0 6px rgba(0,191,255,.55),
        0 0 14px rgba(0,191,255,.22),
        inset 0 0 8px rgba(0,191,255,.12) !important;

    transition:
        .25s ease !important;
}

#profile-main #newsInput:focus {

    border-color:
        #35d1ff !important;

    box-shadow:
        0 0 8px rgba(0,191,255,.8),
        0 0 22px rgba(0,191,255,.35),
        inset 0 0 10px rgba(0,191,255,.18) !important;

    outline:
        none !important;
}

/* =========================================================
   SELECT PREMIUM
========================================================= */

#profile-main #compareUserSelect {

    width: 100% !important;

    background:
        linear-gradient(
            180deg,
            rgba(18,25,40,.95),
            rgba(8,12,20,.98)
        ) !important;

    color:
        #fff !important;

    border:
        1px solid rgba(70,130,255,.22) !important;

    border-radius:
        18px !important;

    padding:
        14px 18px !important;

    font-size:
        1rem !important;

    font-weight:
        600 !important;

    box-shadow:
        inset 0 0 12px rgba(0,120,255,.04),
        0 0 14px rgba(0,120,255,.06) !important;

    outline:
        none !important;

    appearance:
        none !important;

    -webkit-appearance:
        none !important;
}

#profile-main #compareUserSelect option {

    background:
        #0b1118 !important;

    color:
        #fff !important;
}

/* =========================================================
   CHARTS
========================================================= */

#profile-main .profile-chart-wrapper canvas,
#profile-main .ranking-timeline-wrapper canvas {

    filter:
        drop-shadow(0 0 8px var(--neon-glow)) !important;
}

/* =========================================================
   FILTROS
========================================================= */

#profile-main .chart-filters {

    background:
        rgba(0, 0, 0, 0.3) !important;

    border-radius:
        50px !important;

    padding:
        4px !important;

    border:
        1px solid var(--glass-border) !important;
}

#profile-main .chart-btn {

    background:
        transparent !important;

    border:
        none !important;

    color:
        #94a3b8 !important;

    font-weight:
        700 !important;

    border-radius:
        50px !important;
}

#profile-main .chart-btn.active {

    background:
        var(--neon-cyan) !important;

    color:
        #fff !important;

    box-shadow:
        0 0 15px var(--neon-glow) !important;
}

/* =========================================================
   HISTÓRICO DIÁRIO
========================================================= */

#profile-main .history-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    min-height: 64px !important;
    padding: 0px 0px !important;
}

/* DATA */

#profile-main .history-date {

    font-size: .72rem !important;

    font-weight: 700 !important;

    line-height: 1 !important;

    color:
        rgba(255,255,255,.58) !important;
}

/* LINHA INFERIOR */

#profile-main .history-bottom {

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 6px !important;
}

/* BOLINHA NEON */

#profile-main .history-icon {

    width: 10px !important;
    height: 10px !important;

    min-width: 10px !important;

    border-radius: 50% !important;

    background:
        #7dff9b !important;

    box-shadow:
        0 0 8px rgba(125,255,155,.9),
        0 0 14px rgba(125,255,155,.45) !important;

    flex-shrink: 0 !important;
}

/* PONTOS */

#profile-main .history-points {

    font-size: 1rem !important;

    font-weight: 900 !important;

    line-height: 1 !important;

    color:
        #7dff9b !important;
}

 /* =========================================================
     REFERÊNCIA
  ========================================================= */

  .match-card .option-wrapper {

      position: relative !important;

      overflow: visible !important;
  }

  /* =========================================================
     MOVE APENAS TIME A
  ========================================================= */

  .match-card .option-wrapper:first-child .bet-team-vertical {
    position: absolute !important;
    left: 63% !important;
    bottom: -43px !important;
    transform: translateX(-50%) !important;
    width: 120% !important;
    text-align: center !important;
    z-index: 50 !important;
}

  /* =========================================================
     MOVE APENAS TIME B
  ========================================================= */
.match-card .option-wrapper:last-child .bet-team-vertical {
    position: absolute !important;
    left: 56% !important;
    bottom: -43px !important;
    transform: translateX(-50%) !important;
    width: 120% !important;
    text-align: center !important;
    z-index: 50 !important;
}
.match-card .option-wrapper:last-child .team-logo-api, .match-card .option-wrapper:last-child .team-emoji {
    position: relative !important;
    top: 11px !important;
    left: -4px !important;
}
.match-card .option-wrapper:last-child .team-logo-api, .match-card .option-wrapper:last-child .team-emoji {
    position: relative !important;
    top: 11px !important;
    left: -4px !important;
}

  /* =========================================================
     EMPATE FICA ORIGINAL
  ========================================================= */

  .match-card .option-wrapper:nth-child(2) .bet-team-vertical {
    position: relative !important;
    left: 3px !important;
    bottom: 4px !important;
    transform: none !important;
    width: auto !important;
}

 /* =========================================================
     BANDEIRA API — ESQUERDA
  ========================================================= */

  .match-card .option-wrapper:first-child .team-logo-api {

      position: relative !important;

      top: 17px !important;

      left: 7px !important;
  }

  /* =========================================================
     EMOJI — ESQUERDA
  ========================================================= */

  .match-card .option-wrapper:first-child .team-emoji {

      position: relative !important;

      top: 8px !important;

      left: 1px !important;
  }

  /* =========================================================
     BANDEIRA API — DIREITA
  ========================================================= */

  .match-card .option-wrapper:last-child .team-logo-api {

      position: relative !important;

      top: 17px !important;

      left: -2px !important;
  }

  /* =========================================================
     EMOJI — DIREITA
  ========================================================= */

  .match-card .option-wrapper:last-child .team-emoji {

      position: relative !important;

      top: 11px !important;

      left: -4px !important;
  }
/* =========================================================
   MY BETS - MODERN COMPACT UI
   versão compacta mobile otimizada
========================================================= */

#user-bets-container {
  position: relative;

  padding: 10px 10px 110px;

  min-height: 100vh;

  overflow-x: hidden;

  background:
    radial-gradient(circle at top, rgba(20,45,120,.28) 0%, transparent 35%),
    linear-gradient(180deg, #02040b 0%, #040816 35%, #02050f 100%);
}

#user-bets-container::before {
  content: '';

  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    radial-gradient(circle at 20% 0%, rgba(0,140,255,.08), transparent 28%),
    radial-gradient(circle at 100% 10%, rgba(0,90,255,.10), transparent 32%);
}

/* =========================================================
   PODIUM
========================================================= */

.modern-podium {
  position: relative;

  padding: 14px;

  border-radius: 22px;

  margin-bottom: 14px;

  background:
    linear-gradient(
      180deg,
      rgba(10,16,34,.95),
      rgba(5,10,25,.92)
    );

  border: 1px solid rgba(60,120,255,.14);

  backdrop-filter: blur(14px);

  box-shadow:
    0 0 24px rgba(0,110,255,.08),
    inset 0 0 18px rgba(255,255,255,.02);
}

.modern-podium-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 12px;
}

.modern-podium-header h2 {
  margin: 0;

  color: #fff;

  font-size: 15px;
  font-weight: 800;

  letter-spacing: .3px;
}

.modern-podium-header p {
  margin-top: 4px;

  color: rgba(255,255,255,.55);

  font-size: 10px;
}

.trophy-glow {
  width: 42px;
  height: 42px;

  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 18px;

  background:
    radial-gradient(circle, rgba(0,140,255,.22), rgba(0,80,255,.05));

  border: 1px solid rgba(0,120,255,.20);

  box-shadow:
    0 0 14px rgba(0,140,255,.18);
}

/* =========================================================
   RANK CARD
========================================================= */

.modern-podium-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.modern-rank-card {
  display: flex;
  align-items: center;

  gap: 10px;

  padding: 10px;

  min-height: 58px;

  border-radius: 14px;

  background:
    linear-gradient(
      90deg,
      rgba(14,20,38,.96),
      rgba(7,11,24,.88)
    );

  border: 1px solid rgba(255,255,255,.04);
}

.modern-rank-card.gold {
  border-color: rgba(255,215,0,.18);
}

.modern-rank-card.silver {
  border-color: rgba(140,170,255,.12);
}

.modern-rank-card.green {
  border-color: rgba(0,255,110,.10);
}

.modern-rank-card.purple {
  border-color: rgba(180,100,255,.12);
}

.rank-badge-modern {
  min-width: 42px;

  width: 42px;
  height: 42px;

  border-radius: 10px;

  display: flex;
  align-items: center;
  justify-content: center;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.08),
      rgba(255,255,255,.03)
    );

  color: #fff;

  font-size: 16px;
  font-weight: 800;
}

.team-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flag-wrapper-podium {
  width: 30px;
  height: 30px;

  border-radius: 8px;

  overflow: hidden;

  background: rgba(255,255,255,.05);

  display: flex;
  align-items: center;
  justify-content: center;
}

.flag-wrapper-podium img,
.flag-wrapper-podium .fi,
.flag-wrapper-podium .emoji-flag {
  width: 100%;
  height: 100%;

  object-fit: cover;
}

.rank-content {
  display: flex;
  flex-direction: column;

  gap: 2px;

  min-width: 0;
}

.rank-label-modern {
  color: rgba(255,255,255,.55);

  font-size: 8px;
  font-weight: 700;

  letter-spacing: .4px;
}

.rank-team-modern {
  color: #fff;

  font-size: 14px;
  font-weight: 800;

  line-height: 1;
}

/* =========================================================
   TABS
========================================================= */

.modern-tabs {
  position: relative;

  display: flex;

  margin-bottom: 10px;

  padding: 4px;

  border-radius: 999px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.05),
      rgba(255,255,255,.02)
    );

  border: 1px solid rgba(255,255,255,.04);

  overflow: hidden;
}

.modern-tab-slider {
  position: absolute;

  top: 4px;
  left: 4px;

  width: calc(50% - 4px);
  height: calc(100% - 8px);

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      #285eff,
      #2f93ff
    );

  box-shadow:
    0 0 16px rgba(30,120,255,.22);

  transition: transform .28s ease;
}

.modern-tab-slider.right {
  transform: translateX(100%);
}

.modern-tab {
  position: relative;
  z-index: 2;

  flex: 1;

  height: 36px;

  border: none;
  background: transparent;

  color: rgba(255,255,255,.58);

  font-size: 12px;
  font-weight: 700;
}

.modern-tab.active {
  color: #fff;
}

/* =========================================================
   ACCORDION
========================================================= */

.accordion-item {
  margin-bottom: 10px;
}

.accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 10px 12px;

  border-radius: 14px 14px 0 0;

  background:
    linear-gradient(
      90deg,
      rgba(18,25,45,.95),
      rgba(9,12,24,.9)
    );

  border:
    1px solid rgba(255,255,255,.05);

  color: #fff;

  font-size: 12px;
  font-weight: 700;
}

.accordion-pts {
  color: #39ff82;

  font-size: 11px;
}

.accordion-content {
  padding: 10px;

  border:
    1px solid rgba(255,255,255,.05);

  border-top: none;

  border-radius: 0 0 14px 14px;

  background:
    linear-gradient(
      180deg,
      rgba(8,12,24,.96),
      rgba(5,8,18,.96)
    );
}

/* =========================================================
   PROGRESS
========================================================= */

.phase-progress {
  display: flex;
  align-items: center;

  gap: 8px;

  padding:
    6px 4px 10px;
}

.progress-bar {
  flex: 1;

  height: 5px;

  border-radius: 999px;

  overflow: hidden;

  background: rgba(255,255,255,.06);
}

.progress-fill.games {
  height: 100%;

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      #2b69ff,
      #31a8ff
    );

  box-shadow:
    0 0 10px rgba(50,140,255,.28);
}

.progress-text {
  color: rgba(255,255,255,.45);

  font-size: 10px;
}

/* =========================================================
   MATCH CARD
========================================================= */

.modern-match-card {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 8px;

  padding: 8px;

  min-height: 58px;

  margin-bottom: 8px;

  border-radius: 12px;

  background:
    linear-gradient(
      90deg,
      rgba(10,18,38,.96),
      rgba(5,10,24,.92)
    );

  border:
    1px solid rgba(255,255,255,.04);

  transition:
    transform .18s ease,
    border .18s ease;
}

.modern-match-card:hover {
  border-color: rgba(50,130,255,.14);
}

.modern-match-card.win,
.modern-match-card.hit-full {
  border-color: rgba(0,255,120,.18);

  box-shadow:
    0 0 12px rgba(0,255,120,.06);
}

.modern-match-card.partial,
.modern-match-card.hit-partial {
  border-color: rgba(255,200,0,.16);

  box-shadow:
    0 0 10px rgba(255,200,0,.05);
}

.modern-match-card.loss,
.modern-match-card.hit-none {
  border-color: rgba(255,70,70,.12);
}

.match-left {
  flex: 1;

  display: flex;
  flex-direction: column;

  gap: 6px;

  min-width: 0;
}

.team-left {
  display: flex;
  align-items: center;

  gap: 6px;

  min-width: 0;
}

.flag-wrapper-list {
  width: 22px;
  height: 22px;

  border-radius: 7px;

  overflow: hidden;

  background: rgba(255,255,255,.05);

  display: flex;
  align-items: center;
  justify-content: center;

  flex-shrink: 0;
}

.flag-wrapper-list img,
.flag-wrapper-list .fi,
.flag-wrapper-list .emoji-flag {
  width: 100%;
  height: 100%;

  object-fit: cover;
}

.team-name {
  color: #fff;

  font-size: 10px;
  font-weight: 600;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-divider {
  width: 100%;
  height: 1px;

  background: rgba(255,255,255,.05);
}

.match-center {
  min-width: 42px;

  display: flex;
  align-items: center;
  justify-content: center;
}

.score {
  color: #fff;

  font-size: 13px;
  font-weight: 800;
}

.match-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;

  gap: 5px;
}

.pick-box-modern {
  min-width: 50px;

  padding: 4px;

  border-radius: 9px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.05),
      rgba(255,255,255,.02)
    );

  border:
    1px solid rgba(255,255,255,.04);

  text-align: center;
}

.pick-box-modern span {
  display: block;

  margin-bottom: 2px;

  color: rgba(255,255,255,.48);

  font-size: 7px;
}

.points-modern {
  color: #39ff82;

  font-size: 11px;
  font-weight: 800;
}

/* =========================================================
   BOTTOM
========================================================= */

#mybets-list-root {
  padding-bottom: 100px;
}
/* ==============================================
   ALL BETS — UI PREMIUM DARK
   ============================================== */

/* =====================================================
   CONTAINER
===================================================== */

#all-bets .results-grid-container{
    display:flex;
    flex-direction:column;
    gap:14px;
    margin-top:14px;
}

/* =====================================================
   GLASS CARD BASE
===================================================== */

#all-bets .glass-card{
    background:
        linear-gradient(
            145deg,
            rgba(14,14,18,.96),
            rgba(8,8,12,.98)
        );

    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);

    border:
        1px solid rgba(255,255,255,.05);

    border-radius:24px;

    box-shadow:
        0 10px 35px rgba(0,0,0,.35);

    overflow:hidden;
}

/* =====================================================
   SISTEMA DE BUSCA
===================================================== */

#all-bets .filters.card{
    padding:14px;
}

/* header */

#all-bets .filters-header{
    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:2px 2px 12px;

    border-bottom:
        1px solid rgba(255,255,255,.06);

    margin-bottom:14px;

    cursor:pointer;
}

#all-bets .filters-header span{
    display:flex;
    align-items:center;
    gap:10px;

    color:#fff;

    font-size:15px;
    font-weight:700;
}

#all-bets .filters-header span i{
    color:#67ffb8;
    font-size:14px;
}

#all-bets .toggle-icon{
    color:rgba(255,255,255,.45);

    font-size:14px;

    transition:.25s ease;
}

#all-bets .filters-header.active .toggle-icon{
    transform:rotate(180deg);
}

/* grid */

#all-bets .filters-grid{
    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:12px;
}

#all-bets .form-group.full{
    grid-column:1 / -1;
}

/* labels */

#all-bets .form-group label{
    display:block;

    margin-bottom:6px;

    color:rgba(255,255,255,.48);

    font-size:11px;
    font-weight:700;

    letter-spacing:.6px;

    text-transform:uppercase;
}

/* inputs */

#all-bets .form-group input,
#all-bets .form-group select{

    width:100%;
    height:46px;

    border:none;
    outline:none;

    border-radius:16px;

    padding:0 14px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.06),
            rgba(255,255,255,.03)
        );

    border:
        1px solid rgba(255,255,255,.05);

    color:#fff;

    font-size:14px;
    font-weight:600;

    transition:.22s ease;

    box-shadow:none;
}

/* placeholder */

#all-bets .form-group input::placeholder{
    color:rgba(255,255,255,.30);
}

/* focus */

#all-bets .form-group input:focus,
#all-bets .form-group select:focus{

    border-color:
        rgba(0,214,143,.35);

    box-shadow:
        0 0 0 3px rgba(0,214,143,.10);

    transform:
        translateY(-1px);
}

/* =====================================================
   ACTIONS
===================================================== */

#all-bets .filters-actions{
    display:flex;
    gap:10px;

    margin-top:14px;
}

/* buttons */

#all-bets .filters-actions .btn,
#all-bets .btn-export{

    border:none;

    height:44px;

    border-radius:16px;

    font-size:13px;
    font-weight:800;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    transition:.22s ease;
}

/* aplicar */

#all-bets #btn-search{

    flex:1;

    background:
        linear-gradient(
            135deg,
            #00d68f,
            #00b574
        );

    color:#07110c;

    box-shadow:
        0 8px 20px rgba(0,214,143,.18);
}

/* limpar */

#all-bets #btn-clear{

    flex:1;

    background:
        rgba(255,255,255,.06);

    border:
        1px solid rgba(255,255,255,.06);

    color:#fff;
}

/* export */

#all-bets .btn-export{

    width:100%;

    margin-top:10px;

    background:
        linear-gradient(
            135deg,
            #3478ff,
            #245fff
        );

    color:#fff;

    box-shadow:
        0 8px 20px rgba(52,120,255,.18);
}

/* hover */

#all-bets .filters-actions .btn:hover,
#all-bets .btn-export:hover{

    transform:
        translateY(-2px);
}

/* =====================================================
   CARD USUÁRIO
===================================================== */

#all-bets .user-bets-compact{
    padding:10px;
}

/* header */

#all-bets .user-bets-header{

    display:flex;
    align-items:center;
    justify-content:space-between;

    margin-bottom:8px;
}

/* info user */

#all-bets .user-main-info{

    display:flex;
    align-items:center;
    gap:8px;

    font-size:14px;
    font-weight:700;

    color:#fff;
}

#all-bets .user-main-info i{

    font-size:18px;

    color:#67ffb8;
}

/* badge total */

#all-bets .user-points-badge{

    height:30px;

    padding:0 12px;

    border-radius:999px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:
        rgba(0,214,143,.12);

    border:
        1px solid rgba(0,214,143,.18);

    color:#8fffd1;

    font-size:12px;
    font-weight:700;
}

/* =====================================================
   LISTA
===================================================== */

#all-bets .user-bets-list{
    display:flex;
    flex-direction:column;
    gap:8px;
}

/* =====================================================
   CARD BET
===================================================== */

#all-bets .bet-item-row{

    position:relative;

    display:flex;
    flex-direction:column;

    gap:10px;

    padding:12px;

    padding-bottom:18px;

    border-radius:22px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.035),
            rgba(255,255,255,.015)
        );

    border:
        1px solid rgba(255,255,255,.05);

    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        transform .2s ease;
}

/* hover */

#all-bets .bet-item-row:hover{
    transform:translateY(-2px);
}

/* =====================================================
   BORDA POR STATUS
===================================================== */

/* WIN */

#all-bets .bet-item-row:has(.status-badge.win){

    border-color:
        rgba(0,214,143,.35);

    box-shadow:
        0 0 0 1px rgba(0,214,143,.08),
        0 8px 28px rgba(0,214,143,.08);
}

/* PARTIAL */

#all-bets .bet-item-row:has(.status-badge.partial){

    border-color:
        rgba(255,193,7,.30);

    box-shadow:
        0 0 0 1px rgba(255,193,7,.05),
        0 8px 24px rgba(255,193,7,.05);
}

/* LOSE */

#all-bets .bet-item-row:has(.status-badge.lose){

    border-color:
        rgba(255,70,70,.30);

    box-shadow:
        0 0 0 1px rgba(255,70,70,.06),
        0 8px 24px rgba(255,70,70,.06);
}

/* =====================================================
   MATCH
===================================================== */

#all-bets .match-teams{
    text-align:center;
}

#all-bets .match-teams small{

    display:block;

    font-size:10px;

    letter-spacing:.5px;

    text-transform:uppercase;

    color:
        rgba(255,255,255,.45);

    margin-bottom:6px;
}

#all-bets .match-teams strong{

    font-size:16px;
    font-weight:800;

    line-height:1.25;

    color:#fff;
}

/* =====================================================
   INFO
===================================================== */

#all-bets .bet-info{

    width:100%;

    display:flex;
    justify-content:center;

    text-align:center;
}

/* =====================================================
   SPLIT
===================================================== */

#all-bets .bet-info-split{

    width:100%;

    display:grid;

    grid-template-columns:
        1fr 1fr;

    align-items:center;

    gap:40px;
}

/* =====================================================
   ITEM BASE
===================================================== */

#all-bets .bet-sub-item{

    display:flex;
    flex-direction:column;

    gap:4px;
}

/* =====================================================
   ESQUERDA
===================================================== */

#all-bets .bet-sub-item:first-child{

    align-items:flex-start;

    text-align:left;
}

/* =====================================================
   DIREITA
===================================================== */

#all-bets .bet-sub-item:last-child{

    align-items:flex-end;

    text-align:right;

    border-left:
        1px solid rgba(255,255,255,.08);

    padding-left:18px;
}

/* =====================================================
   TEXTOS
===================================================== */

#all-bets .bet-sub-item small{

    font-size:10px;

    text-transform:uppercase;

    color:
        rgba(255,255,255,.42);
}

#all-bets .bet-sub-item strong{

    font-size:13px;
    font-weight:700;

    color:#fff;
}

/* =====================================================
   GLOW
===================================================== */

#all-bets .team-glow-qualified{

    color:#67f4ff !important;

    text-shadow:
        0 0 10px rgba(103,244,255,.45);
}

/* =====================================================
   STATUS CENTRAL
===================================================== */

#all-bets .status-info{

    position:absolute;

    left:50%;
    bottom:10px;

    transform:translateX(-50%);

    margin:0;

    width:auto;

    z-index:5;

    pointer-events:none;
}

/* badge */

#all-bets .status-badge{

    width:auto;
    min-width:auto;

    height:26px;

    padding:0 12px;

    border-radius:999px;

    font-size:11px;
    font-weight:800;

    display:flex;
    align-items:center;
    justify-content:center;

    backdrop-filter:blur(10px);

    box-shadow:
        0 4px 14px rgba(0,0,0,.25);
}

/* WIN */

#all-bets .status-badge.win{

    background:
        rgba(0,214,143,.14);

    border:
        1px solid rgba(0,214,143,.20);

    color:#8fffd1;
}

/* PARTIAL */

#all-bets .status-badge.partial{

    background:
        rgba(255,193,7,.14);

    border:
        1px solid rgba(255,193,7,.18);

    color:#ffd65c;
}

/* LOSE */

#all-bets .status-badge.lose{

    background:
        rgba(255,70,70,.12);

    border:
        1px solid rgba(255,70,70,.18);

    color:#ff8b8b;
}

/* PENDING */

#all-bets .status-badge.pending{

    background:
        rgba(255,255,255,.05);

    border:
        1px solid rgba(255,255,255,.06);

    color:#bbb;
}

/* LOCKED */

#all-bets .status-badge.locked{

    background:
        rgba(255,255,255,.04);

    border:
        1px solid rgba(255,255,255,.05);

    color:#888;
}

/* =====================================================
   LOCKED
===================================================== */

#all-bets .bet-item-row.is-locked{
    opacity:.6;
    filter:grayscale(.5);
}

/* =====================================================
   RESPONSIVO
===================================================== */

@media(max-width:640px){

    #all-bets .filters.card{
        padding:12px;
        border-radius:22px;
    }

    #all-bets .filters-grid{
        grid-template-columns:1fr;
        gap:10px;
    }

    #all-bets .filters-actions{
        flex-direction:row;
    }

    #all-bets .filters-actions .btn{
        flex:1;
    }

    #all-bets .form-group input,
    #all-bets .form-group select{

        height:44px;
        font-size:13px;
    }

    #all-bets .user-bets-header{
        flex-direction:column;
        align-items:flex-start;
        gap:8px;
        background: #141418;
        padding: 10px;
        border-bottom: 1px solid #eee;
        border-radius: 54px
    }

    #all-bets .match-teams strong{
        font-size:15px;
    }
}
/* =====================================================
   SOMENTE PARTIDAS NORMAIS
===================================================== */

#all-bets .bet-info:not(:has(.bet-info-split)){

    position:relative !important;

    top:-10px !important;

    display:flex !important;

    flex-direction:column !important;

    align-items:baseline !important;

    justify-content:center !important;
}

/* =====================================================
   MATA-MATA NÃO ALTERA
===================================================== */

#all-bets .bet-info:has(.bet-info-split){

    top:0 !important;
}
/* =====================================================
   SELECT DARK MODE
===================================================== */

#all-bets select{

    background-color:#11141b !important;

    color:#fff !important;
}

/* =====================================================
   OPTIONS
===================================================== */

#all-bets select option{

    background:#0b0d12 !important;

    color:rgba(255,255,255,.92) !important;
}

/* hover visual (alguns navegadores ignoram) */

#all-bets select option:hover{

    background:#151922 !important;
}

/* selected */

#all-bets select option:checked{

    background:#1c2330 !important;

    color:#67ffb8 !important;
}
/* Container para alinhar título e botão */
.ranking-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 15px 15px 0 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Botão de Compartilhar */
.btn-share-ranking {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.2), rgba(0, 82, 212, 0.2));
    border: 1px solid rgba(0, 212, 255, 0.3);
    backdrop-filter: blur(10px);
    color: #00d4ff;
    padding: 7px 14px;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.btn-share-ranking:hover {
    background: rgba(0, 212, 255, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 212, 255, 0.2);
}

.btn-share-ranking i {
    font-size: 0.9rem;
}
/* =====================================================
   LOGIN GLASS MODERNO + PREMIUM ULTRA-MODERNO
   ARQUIVO COMPLETO E 100% ISOLADO CONTRA VAZAMENTOS
===================================================== */

/* =====================================================
   FUNDO APENAS LOGIN (Ativado via pseudo-classe :has)
===================================================== */
body:has(#login-section:not([hidden])){
    background:
        linear-gradient(
            rgba(0,0,0,.22),
            rgba(0,0,0,.52)
        ),
        url('../img/loginbg.webp')
        center top / cover no-repeat fixed !important;

    overflow-x:hidden !important;
}

/* =====================================================
   REMOVE FUNDOS ANTIGOS (Restrito ao escopo do login)
===================================================== */
#login-section .container,
#login-section.card,
#login-section.login-card{
    background:transparent !important;
}

/* Remove pseudos antigos do container do login */
#login-section::before,
#login-section::after{
    display:none !important;
    content:none !important;
}

/* =====================================================
   CARD GLASS PRINCIPAL
===================================================== */
#login-section {
    position: relative !important;
    width: calc(100vw - 56px) !important;
    max-width: 301px !important;
    margin: 62px auto 0 auto !important;
    padding: 20px 18px 18px !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    background: linear-gradient(180deg, rgba(0, 18, 28, .40), rgba(0, 10, 18, .58)) !important;
    backdrop-filter: blur(18px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
    border: 1px solid rgba(255, 255, 255, .06) !important;
    box-shadow: 0 14px 45px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .04) !important;
}

/* =====================================================
   TÍTULO DO FORMULÁRIO
===================================================== */
#login-section h2{
    margin:0 0 12px 0 !important;
    text-align:center !important;
    color:#e8c7a3 !important;
    font-size:28px !important;
    font-weight:900 !important;
    letter-spacing:.3px !important;
    text-shadow: 0 2px 8px rgba(0,0,0,.35) !important;
}

/* =====================================================
   TABS SUPERIORES (Apenas as contidas no Login)
===================================================== */
#login-section .auth-tabs{
    display:flex !important;
    margin-bottom:18px !important;
    border-radius:12px !important;
    overflow:hidden !important;
    background: rgba(0, 0, 0, 0.25) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

#login-section .auth-tab{
    flex:1 !important;
    height:42px !important;
    border:none !important;
    color: rgba(255, 255, 255, 0.4) !important;
    font-size:13px !important;
    font-weight:700 !important;
    background:transparent !important;
    transition:.2s ease !important;
    cursor: pointer !important;
}

#login-section .auth-tab.active{
    color:#fff !important;
    background: rgba(255, 255, 255, 0.06) !important;
    box-shadow: inset 0 -2px 0px rgba(232, 199, 163, 0.7) !important;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.3) !important;
}

/* =====================================================
   FORM GROUPS E LABELS (Escopo Fechado)
===================================================== */
#login-section .form-group{
    margin-bottom:12px !important;
}

#login-section .form-group label{
    display:block !important;
    margin-bottom:5px !important;
    color: rgba(236, 236, 236, 0.9) !important;
    font-size:11px !important;
    font-weight:600 !important;
    letter-spacing: 0.3px !important;
}

/* =====================================================
   HEADER SENHA E LINK "ESQUECI MINHA SENHA"
===================================================== */
#login-section .password-header{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    margin-bottom:5px !important;
}

#login-section .forgot-inline{
    border:none !important;
    background:none !important;
    color:#79bcff !important;
    font-size:10px !important;
    font-weight:600 !important;
    opacity: 0.85 !important;
    cursor: pointer !important;
    transition: opacity 0.2s, text-decoration 0.2s !important;
}

#login-section .forgot-inline:hover {
    opacity: 1 !important;
    text-decoration: underline !important;
}

/* =====================================================
   INPUTS (Aprimorados apenas dentro do Login)
===================================================== */
#login-section .form-group input{
    width:100% !important;
    height:42px !important;
    padding:0 13px !important;
    box-sizing:border-box !important;
    border-radius:13px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    outline:none !important;
    color:#fff !important;
    font-size:14px !important;
    font-weight:500 !important;
    background: rgba(0, 0, 0, 0.3) !important;
    backdrop-filter:blur(10px) !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2) !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
}

#login-section .form-group input:focus {
    border-color: rgba(90, 168, 56, 0.6) !important;
    box-shadow: 0 0 8px rgba(90, 168, 56, 0.2), inset 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

#login-section .form-group input::placeholder{
    color: rgba(184, 192, 198, 0.6) !important;
}

/* =====================================================
   BOTÃO ENTRAR PREMIUM (Totalmente Amarrado ao Container Pai)
===================================================== */
#login-section .btn-primary {
    position: relative !important;
    width: 100% !important;
    height: 46px !important;
    margin-top: 14px !important;
    border: none !important;
    border-radius: 16px !important;
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    letter-spacing: .5px !important;
    cursor: pointer !important;
    overflow: hidden !important;
    z-index: 1 !important;
    background-image: linear-gradient(180deg, #4d9330 0%, #224b13 100%) !important;
    box-shadow: 
        0 0 0 1px rgba(232, 199, 163, 0.18),
        0 6px 16px rgba(0, 0, 0, 0.5),
        inset 0 -3px 6px rgba(0, 0, 0, 0.3) !important;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.7) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Padrão da Bola de Futebol restrito ao botão do Login */
#login-section .btn-primary::before {
    content: "" !important;
    position: absolute !important;
    top: -10px !important;
    right: -10px !important;
    width: 70px !important;
    height: 70px !important;
    opacity: 0.16 !important;
    mix-blend-mode: overlay !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='46' fill='none' stroke='%23fff' stroke-width='2'/%3E%3Cpolygon points='50,35 63,44 58,59 42,59 37,44' fill='%23fff'/%3E%3Cline x1='50' y1='35' x2='50' y2='15' stroke='%23fff' stroke-width='2'/%3E%3Cline x1='63' y1='44' x2='81' y2='34' stroke='%23fff' stroke-width='2'/%3E%3Cline x1='58' y1='59' x2='72' y2='76' stroke='%23fff' stroke-width='2'/%3E%3Cline x1='42' y1='59' x2='28' y2='76' stroke='%23fff' stroke-width='2'/%3E%3Cline x1='37' y1='44' x2='19' y2='34' stroke='%23fff' stroke-width='2'/%3E%3Cpolygon points='50,15 59,4 41,4' fill='none' stroke='%23fff' stroke-width='2'/%3E%3Cpolygon points='81,34 93,25 86,43' fill='none' stroke='%23fff' stroke-width='2'/%3E%3Cpolygon points='72,76 81,89 62,87' fill='none' stroke='%23fff' stroke-width='2'/%3E%3Cpolygon points='28,76 38,87 19,89' fill='none' stroke='%23fff' stroke-width='2'/%3E%3Cpolygon points='19,34 14,43 7,25' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

/* Camada Glossy restrita ao botão do Login */
#login-section .btn-primary::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 50% !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
    pointer-events: none !important;
    z-index: 3 !important;
}

/* Estados Dinâmicos restritos ao botão do Login */
#login-section .btn-primary:hover {
    transform: translateY(-1px) !important;
    background-image: linear-gradient(180deg, #5aa838 0%, #2a5a17 100%) !important;
    box-shadow: 
        0 0 0 1px rgba(232, 199, 163, 0.3), 
        0 8px 22px rgba(0, 0, 0, 0.6),
        0 0 15px rgba(88, 175, 52, 0.3),
        inset 0 -3px 6px rgba(0, 0, 0, 0.2) !important;
}

#login-section .btn-primary:active {
    transform: translateY(1px) !important;
    background-image: linear-gradient(180deg, #3d7926 0%, #1c3f10 100%) !important;
    box-shadow: 
        0 0 0 1px rgba(232, 199, 163, 0.15), 
        0 3px 8px rgba(0, 0, 0, 0.6),
        inset 0 2px 4px rgba(0, 0, 0, 0.4) !important;
}
/* ==========================================================================
   MODAL DE DETALHES DA PARTIDA - MODO ESCURO PREMIUM (GLASSMORPHISM)
   ========================================================================== */

/* 1. OVERLAY E CONTÊINER PRINCIPAL DO MODAL */
#modal-detalhes.modal-overlay {
    background: rgba(0, 0, 0, 0.75) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

#modal-detalhes .modal-container {
    background: linear-gradient(180deg, rgba(13, 22, 31, 0.96) 0%, rgba(6, 11, 16, 0.99) 100%) !important;
    backdrop-filter: blur(20px) saturate(130%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.75) !important;
    color: #e2e8f0 !important;
}

#modal-detalhes .modal-title { color: #e8c7a3 !important; }
#modal-detalhes #modal-status-label { color: #ffffff !important; }
#modal-detalhes .btn-close-modal { color: rgba(255, 255, 255, 0.5) !important; }
#modal-detalhes .btn-close-modal:hover { color: #f87171 !important; }

/* 2. CARD DO PLACAR SUPERIOR (CABECALHO) */
#modal-detalhes .score-card,
#modal-detalhes div[style*="justify-content: space-between"][style*="padding: 15px 0"] {
    background: rgba(255, 255, 255, 0.03) !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.02), 0 4px 20px rgba(0,0,0,0.2) !important;
    padding: 16px 12px !important;
}
#modal-detalhes .team-name, #modal-detalhes .score-numbers { color: #ffffff !important; }
#modal-detalhes #modal-placar-tempo { color: #94a3b8 !important; font-weight: 700 !important; }

/* 3. MENU DE ABAS DE NAVEGAÇÃO */
#modal-detalhes .modal-tabs-nav { border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; }
#modal-detalhes .tab-btn { color: rgba(255, 255, 255, 0.4) !important; border-bottom: 2px solid transparent !important; }
#modal-detalhes .tab-btn.active {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border-bottom: 2px solid #e8c7a3 !important; /* Friso ouro idêntico ao login */
}

/* 4. ABA 1: TIMELINE (Eventos de Período, Substituições e Gols) */
#modal-detalhes .timeline-counters,
#modal-detalhes div[style*="display:inline-flex"][style*="gap:8px"],
#modal-detalhes div[style*="display: inline-flex"] {
    background: transparent !important;
}

/* Mini-badges de variação delta (🎯 🌓 ❌) */
#modal-detalhes .timeline-counters span,
#modal-detalhes div[style*="display:inline-flex"] span,
#modal-detalhes div[style*="display: inline-flex"] span {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 2px 6px !important;
    border-radius: 6px !important;
    display: inline-block !important;
}

/* Cores lógicas dos deltas e substituições */
#modal-detalhes span[style*="color:#27ae60"], #modal-detalhes span[style*="color: rgb(39, 174, 96)"] { color: #4ade80 !important; }
#modal-detalhes span[style*="color:#f39c12"], #modal-detalhes span[style*="color: rgb(243, 156, 18)"] { color: #fbbf24 !important; }
#modal-detalhes span[style*="color:#e74c3c"], #modal-detalhes span[style*="color: rgb(231, 76, 60)"] { color: #f87171 !important; }

/* Minutos e cronômetros fixos do JS */
#modal-detalhes .event-min,
#modal-detalhes .timeline-content div[style*="color: #666"],
#modal-detalhes .timeline-content div[style*="color: rgb(102, 102, 102)"],
#modal-detalhes .system-event div:first-child {
    color: #94a3b8 !important;
    background: transparent !important;
    border: none !important;
}

/* Cards horizontais (Acréscimos / Fim de Período) */
#modal-detalhes .system-event,
#modal-detalhes div[style*="background: #fafafa"],
#modal-detalhes div[style*="background: rgb(250, 250, 250)"] {
    background: rgba(255, 255, 255, 0.03) !important;
    border-top: 1px dashed rgba(255, 255, 255, 0.1) !important;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
}
#modal-detalhes .system-event div[style*="color: #333"] { color: #ffffff !important; }
#modal-detalhes .system-event span, #modal-detalhes .system-event strong { color: #ffffff !important; }
#modal-detalhes .event-content, #modal-detalhes .event-content div, #modal-detalhes .event-content strong { color: #f1f5f9 !important; }

/* Cards de Usuários na lista de palpites inferior (.bet-user-card) */
#modal-detalhes .bet-user-card {
    background: rgba(255, 255, 255, 0.03) !important;
    color: #cbd5e1 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px !important;
    padding: 8px 12px !important;
    margin-bottom: 6px !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    text-align: center !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important;
}
#modal-detalhes .bet-column-title { font-weight: 800 !important; font-size: 0.85rem !important; text-transform: uppercase !important; margin-bottom: 10px !important; }
#modal-detalhes .user-name-glow { color: #58af34 !important; text-shadow: 0 0 10px rgba(88, 175, 52, 0.4) !important; }
#modal-detalhes .leader-gold-shadow { color: #e8c7a3 !important; text-shadow: 0 0 10px rgba(232, 199, 163, 0.4) !important; }
#modal-detalhes .bets-container > div { border-color: rgba(255, 255, 255, 0.06) !important; }

/* 5. ABA 2: ESTATÍSTICAS (Ajuste de Contrastes e Degradê) */
#modal-detalhes #stats-render-target div,
#modal-detalhes #aba-estatisticas div,
#modal-detalhes #aba-estatisticas span,
#modal-detalhes div[style*="width: 100%"] > span,
#modal-detalhes div[style*="display: flex"] > b {
    color: #ffffff !important;
}
#modal-detalhes #aba-estatisticas div[style*="color: gray"],
#modal-detalhes #aba-estatisticas span[style*="color: gray"],
#modal-detalhes #stats-render-target div[style*="font-size"] {
    color: #94a3b8 !important;
}
#modal-detalhes .progress,
#modal-detalhes div[style*="background-color: rgb(240, 240, 240)"] {
    background: rgba(255, 255, 255, 0.08) !important;
}
/* Cores das barras de progresso (Casa vs Visitante) */
#modal-detalhes div[style*="background-color: rgb(50, 50, 50)"] {
    background: linear-gradient(90deg, #1d4ed8, #3b82f6) !important;
}
#modal-detalhes div[style*="background-color: rgb(198, 40, 40)"],
#modal-detalhes div[style*="background-color: #c62828"] {
    background: linear-gradient(90deg, #ef4444, #b91c1c) !important;
}

/* 6. ABA 3: ESCALAÇÃO (Controle por classes nativas) */
/* Neutraliza o ID duplicado aninhado gerado pelo JS da escalação */
#modal-lineups-content #modal-detalhes {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}
/* Força nomes de jogadores para Branco Puro */
#modal-lineups-content .player-row span[style*="color:#333"],
#modal-lineups-content .player-row span[style*="color: #333"] {
    color: #ffffff !important;
}
#modal-lineups-content .player-number { color: #cbd5e1 !important; font-weight: 700 !important; }
#modal-lineups-content .section-header span, #modal-lineups-content .section-header { color: #e8c7a3 !important; }

/* Badges estruturais das Posições (G, D, M, F) e Formações Táticas */
#modal-lineups-content .formation-badge,
#modal-lineups-content .position-badge {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #cbd5e1 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
}
#modal-lineups-content .player-row { border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important; }
#modal-lineups-content div[style*="border-right: 1px solid #eee"] { border-right: 1px solid rgba(255, 255, 255, 0.08) !important; }
#modal-lineups-content span[style*="opacity:0.7"] { opacity: 0.5 !important; color: #94a3b8 !important; }

/* ============================================================
   PACOTE COMPLETO DE ESTILOS: CARD DE PARTIDAS ADMIN
   ============================================================ */

/* 1. Configurações base do Card */
#admin-matches-list .admin-card {
  cursor: pointer !important;
  transition: background-color 0.2s ease, border-right 0.2s ease;
}

#admin-matches-list .admin-card:hover {
  background-color: #fafafa;
}

/* 2. Gaveta Retrátil de Ações (Escondida por padrão) */
#admin-matches-list .admin-row-actions {
  display: none !important;
  margin-top: 0px !important;
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.2s ease-in-out;
}

/* Quando o card recebe o clique e fica ativo, expande e mostra as ações */
#admin-matches-list .admin-card.active-actions {
  background-color: #fdfdfd !important;
  border-right: 4px solid #3498db !important; /* Destaque azul na lateral direita */
}

#admin-matches-list .admin-card.active-actions .admin-row-actions {
  display: flex !important;
  margin-top: 15px !important;
  opacity: 1;
  transform: translateY(0);
}

/* 3. Alinhamento Simétrico Perfeito */
#admin-matches-list .admin-row-match {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  gap: 12px !important;
}

/* Divs dos times ganham pesos idênticos e se distribuem igualmente */
#admin-matches-list .admin-row-match > div {
  flex: 1 1 0% !important;
  width: 0 !important;
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
}

/* Alinha o Time A (Esquerda) em direção ao placar */
#admin-matches-list .admin-row-match > div:first-of-type {
  justify-content: flex-end !important;
  text-align: right !important;
}

/* Alinha o Time B (Direita) em direção ao placar */
#admin-matches-list .admin-row-match > div:last-of-type {
  justify-content: flex-start !important;
  text-align: left !important;
}

/* Ajuste uniforme e centralizado do tamanho das bandeiras/logos */
#admin-matches-list .admin-row-match img,
#admin-matches-list .admin-row-match .team-logo {
  width: 32px !important;
  height: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;
  object-fit: contain !important;
  border-radius: 4px !important;
  left: 40px;
  top: -6px;
}

/* Estilo limpo do Placar */
#admin-matches-list .score-box {
  flex: 0 0 auto !important;
  text-align: center !important;
  font-weight: bold !important;
  background: #f8f9fa !important;
  border: 1px solid #ddd !important;
  border-radius: 6px !important;
  padding: 4px 12px !important;
  min-width: 55px !important;
}

/* 4. Responsividade Avançada para Celular */
@media (max-width: 575.98px) {
  #admin-matches-list .admin-row-match span:not(.score-box) {
    display: none !important; /* Esconde os nomes compridos */
  }
  #admin-matches-list .admin-row-match > div {
    justify-content: center !important; /* Centraliza a logo no bloco */
  }
}
/* ==========================================================================
   ARQUIVO DE ESTILOS ISOLADO: PAINEL ADMIN (TEMA GLASS DARK - FULL WIDTH)
   ========================================================================== */

/* --- 1. BASE DO CONTAINER ADMIN (Largura Otimizada) --- */
#admin-matches-list {
  background: #0d1117 !important;
  color: #f1f5f9 !important;
  padding: 16px 6px !important; /* Reduzido drasticamente nas laterais */
  border-radius: 16px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

/* Limpeza absoluta de tabelas/linhas nativas herdadas */
#admin-matches-list table, 
#admin-matches-list tbody, 
#admin-matches-list tr, 
#admin-matches-list td {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important; /* Remove espaçamento invisível das tabelas */
}

/* --- 2. CONTROLES GLOBAIS, ABAS (PILLS) E UTILIÁRIOS --- */
#admin-matches-list .admin-nav-tabs,
#admin-matches-list .nav-pills {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 12px;
  padding-left: 6px;
  padding-right: 6px;
}

#admin-matches-list .nav-link,
#admin-matches-list .admin-tab-btn {
  background: rgba(255, 255, 255, 0.03) !important;
  color: #94a3b8 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.2s ease;
  cursor: pointer;
}

#admin-matches-list .nav-link.active,
#admin-matches-list .admin-tab-btn.active,
#admin-matches-list .nav-link:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

#admin-matches-list .admin-utility-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
  padding: 0 6px;
}

#admin-matches-list .btn-admin-tools {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 13px;
  transition: all 0.2s;
}

#admin-matches-list .btn-admin-tools:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
}

/* --- 3. ESTRUTURA DE LIGAS (LARGURA MAXIMIZADA) --- */
#admin-matches-list .league-accordion-wrapper {
  background: rgba(255, 255, 255, 0.01) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4) !important;
  border-radius: 12px !important;
  margin-bottom: 16px;
  overflow: hidden;
  width: 100% !important;
}

#admin-matches-list .league-header-main {
  background: rgba(0, 0, 0, 0.3) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #f8fafc !important;
  padding: 14px 16px;
  font-weight: 600;
  font-size: 15px;
}

#admin-matches-list .league-content-area {
  background: transparent !important;
  padding: 10px 6px !important; /* Garante que os cards cheguem bem perto da borda */
}

/* --- 4. SEÇÕES INTERNAS DE GRUPOS / RODADAS --- */
#admin-matches-list .admin-group-section {
  background: rgba(0, 0, 0, 0.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
  border-radius: 8px !important;
  margin-bottom: 12px;
  overflow: hidden;
  padding: 0 !important; /* Removido recuo lateral interno */
}

#admin-matches-list .group-header {
  background: rgba(255, 255, 255, 0.02) !important;
  color: #cbd5e1 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* --- 5. CARDS DE PARTIDA (OCUPANDO ESPAÇO LATERAL TOTAL) --- */
#admin-matches-list .admin-card,
#admin-matches-list .admin-card-finished,
#admin-matches-list .admin-card-live,
#admin-matches-list .admin-card-scheduled {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 8px !important;
  color: #f1f5f9 !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05) !important;
  transition: all 0.2s ease-in-out !important;
  display: block !important;
  width: 100% !important; /* O card agora domina a largura completa */
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 8px !important;
  padding: 14px 16px;
  box-sizing: border-box !important;
  cursor: pointer;
}

#admin-matches-list .admin-card-finished { border-left: 4px solid rgba(148, 163, 184, 0.5) !important; }
#admin-matches-list .admin-card-live { border-left: 4px solid #22c55e !important; }
#admin-matches-list .admin-card-scheduled { border-left: 4px solid #3b82f6 !important; }

#admin-matches-list .admin-card:hover,
#admin-matches-list .admin-card-finished:hover,
#admin-matches-list .admin-card-live:hover,
#admin-matches-list .admin-card-scheduled:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.1) !important;
}

/* --- 6. ELEMENTOS INTERNOS DOS CARDS --- */
#admin-matches-list .admin-row-top {
  color: #94a3b8 !important;
  font-size: 11px;
  margin-bottom: 8px;
}

#admin-matches-list .admin-row-match {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100% !important;
}

#admin-matches-list .admin-row-match span {
  color: #f8fafc !important;
  font-weight: 500 !important;
  font-size: 14px;
}

#admin-matches-list .team-logo,
#admin-matches-list .admin-row-match img {
  max-height: 24px;
  width: auto;
  object-fit: contain;
  vertical-align: middle;
}

#admin-matches-list .score-box {
  background: rgba(34, 211, 238, 0.07) !important;
  border: 1px solid rgba(34, 211, 238, 0.3) !important;
  color: #22d3ee !important;
  text-shadow: 0 0 10px rgba(34, 211, 238, 0.4) !important;
  border-radius: 6px !important;
  padding: 4px 14px !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: 1px;
}

#admin-matches-list .badge.bg-dark {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: #dbf1ff !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  font-weight: 500;
  font-size: 11px;
  padding: 4px 8px;
}

/* --- 7. GAVETA DE AÇÕES (EXPANSÍVEL DE LADO A LADO) --- */
#admin-matches-list .admin-row-actions {
  border-top: 1px dashed rgba(255, 255, 255, 0.08) !important;
  margin-top: 12px !important;
  background: rgba(0, 0, 0, 0.2) !important;
  padding: 12px !important;
  border-radius: 0 0 7px 7px !important;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  width: 100% !important;
}

#admin-matches-list .admin-row-actions .btn {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 6px;
  transition: all 0.15s ease;
}

#admin-matches-list .btn-outline-warning {
  border-color: rgba(245, 158, 11, 0.4) !important;
  color: #f59e0b !important;
  background: transparent !important;
}
#admin-matches-list .btn-outline-warning:hover { background: rgba(245, 158, 11, 0.15) !important; }

#admin-matches-list .btn-outline-danger {
  border-color: rgba(239, 68, 68, 0.4) !important;
  color: #ef4444 !important;
  background: transparent !important;
}
#admin-matches-list .btn-outline-danger:hover { background: rgba(239, 68, 68, 0.15) !important; }

#admin-matches-list .btn-outline-success {
  border-color: rgba(34, 197, 94, 0.4) !important;
  color: #22c55e !important;
  background: transparent !important;
}
#admin-matches-list .btn-outline-success:hover { background: rgba(34, 197, 94, 0.15) !important; }

.qual-mini-row select {
            width: 60px !important;
            min-width: 60px !important;
            max-width: 60px !important;
            height: 24px !important;
            padding: 2px 6px !important;
            background-color: rgba(255, 255, 255, 0.08) !important;
            color: rgba(255, 255, 255, 0.8) !important;
            border: 1px solid rgba(255, 255, 255, 0.15) !important;
            border-radius: 4px !important;
            transition: opacity 0.1s ease !important;
            cursor: pointer !important;
        }

        /* 2. APÓS SELECIONAR: Fica invisível mas MANTÉM o tamanho de 60px */
        /* Isso serve como um 'escudo' para a bandeira não ir para cima do texto */
        .qual-mini-row select:has(option:not([value=""]):checked) {
            opacity: 0 !important;
            background: transparent !important;
            border-color: transparent !important;
            color: transparent !important;
            box-shadow: none !important;
        }

        /* ============================================================
   TEMA DARK & GLASSMORPHISM — ABA DE DUELOS (TOTALMENTE ISOLADO)
   ============================================================ */

/* 0. Aba / Container Principal da Seção de Duelos */
#profile-duel.profile-tab-section {
  background: transparent !important; /* Neutraliza fundos brancos herdados */
  color: #ffffff !important;
  padding: 15px 5px !important;
  box-shadow: none !important;
  border: none !important;
}

/* 1. Container da Fase / Abas de Navegação Interna (Grupos / Mata-mata) */
#profile-duel .duel-phase-nav {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  background: rgba(15, 23, 42, 0.4) !important;
  padding: 6px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

#profile-duel .duel-phase-nav .phase-btn {
  flex: 1;
  background: transparent !important;
  border: none !important;
  color: #94a3b8 !important;
  padding: 10px;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

#profile-duel .duel-phase-nav .phase-btn.active {
  background: #3b82f6 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
}

/* 2. O Bloco Principal da Rodada (Antigo Bloco Branco -> Agora Vidro Escuro) */
#profile-duel .duel-accordion-item {
  background: rgba(15, 23, 42, 0.45) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 24px !important;
  margin-bottom: 18px !important;
  overflow: hidden !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
}

/* Cabeçalho do Accordion (Ex: "RODADA 15") */
#profile-duel .duel-accordion-header {
  background: rgba(255, 255, 255, 0.02) !important;
  padding: 16px 20px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  color: #94a3b8 !important;
}

#profile-duel .duel-accordion-header span {
  color: #e2e8f0 !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
}

#profile-duel .duel-accordion-header i {
  color: #64748b !important;
}

#profile-duel .duel-accordion-body {
  background: transparent !important;
  padding: 16px !important;
}

/* 3. Cards de Confronto Individual (Chips) - PROTEGIDO CONTRA VAZAMENTOS */
#profile-duel .chip {
  background: rgba(30, 41, 59, 0.45) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 18px !important;
  padding: 14px !important;
  color: #ffffff !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
  transition: transform 0.2s, background 0.2s !important;
}

#profile-duel .chip:hover {
  transform: translateY(-1px) !important;
  background: rgba(30, 41, 59, 0.55) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Nomes dos times */
#profile-duel .chip strong {
  color: #f8fafc !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
}

/* Escudos dos times */
#profile-duel .flag-mini, 
#profile-duel .flag-mini img, 
#profile-duel .flag-mini svg {
  width: 24px !important;
  height: 24px !important;
  object-fit: contain;
}

/* Pílula central de Placar Oficial / "VS" */
#profile-duel .duel-score-pill {
  background: rgba(15, 23, 42, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  padding: 4px 14px !important;
  border-radius: 8px !important;
  font-family: 'Courier New', Courier, monospace !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.5px;
}

/* 4. Caixa de Comparação Inferior (Onde aparecem os palpites salvos) */
#profile-duel .comparison-grid {
  background: rgba(15, 23, 42, 0.3) !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.03) !important;
  margin-top: 10px !important;
}

/* Rótulos secundários ("RAFAEL:", "VOCÊ:") */
#profile-duel .label-side {
  color: #64748b !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 3px !important;
}

/* Conteúdo real do palpite */
#profile-duel .val-content {
  color: #f1f5f9 !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
}

/* Placar palpado em texto puro */
#profile-duel .score-bet-label {
  color: #3b82f6 !important;
  font-weight: 700 !important;
}

/* Ícone central de Status (Espadas ⚔️, Apertos de mão 🤝 ou Cadeados 🔒) */
#profile-duel .status-icon {
  color: #94a3b8 !important;
  font-size: 1rem !important;
}

/* Tamanho dos escudos nos palpites simples (Lado A ou B) */
#profile-duel .duel-bet-logo-only img, 
#profile-duel .duel-bet-logo-only svg {
  width: 20px !important;
  height: 20px !important;
  object-fit: contain;
}

/* 5. Bordas de Status do Confronto (Lógica de cores baseada no acerto) */
#profile-duel .chip[class*="duel-split-green-green"] { border-left: 4px solid #10b981 !important; } 
#profile-duel .chip[class*="duel-split-red-red"]     { border-left: 4px solid #ef4444 !important; } 
#profile-duel .chip[class*="duel-split-green-red"]   { border-left: 4px solid #f59e0b !important; } 
#profile-duel .chip[class*="duel-split-red-green"]   { border-left: 4px solid #3b82f6 !important; } 

/* Mantem o tema glass, mas recupera a leitura de cores original dos cards */
#profile-duel .chip.duel-split-green-green {
  background: linear-gradient(to right, var(--duel-green-bg) 50%, var(--duel-green-bg) 50%) !important;
  border-color: var(--duel-green-border) !important;
}

#profile-duel .chip.duel-split-red-red {
  background: linear-gradient(to right, var(--duel-red-bg) 50%, var(--duel-red-bg) 50%) !important;
  border-color: var(--duel-red-border) !important;
}

#profile-duel .chip.duel-split-yellow-yellow {
  background: linear-gradient(to right, var(--duel-yellow-bg) 50%, var(--duel-yellow-bg) 50%) !important;
  border-color: var(--duel-yellow-border) !important;
}

#profile-duel .chip.duel-split-green-red {
  background: linear-gradient(to right, var(--duel-green-bg) 50%, var(--duel-red-bg) 50%) !important;
  border-left-color: var(--duel-green-border) !important;
  border-right-color: var(--duel-red-border) !important;
}

#profile-duel .chip.duel-split-red-green {
  background: linear-gradient(to right, var(--duel-red-bg) 50%, var(--duel-green-bg) 50%) !important;
  border-left-color: var(--duel-red-border) !important;
  border-right-color: var(--duel-green-border) !important;
}

#profile-duel .chip.duel-split-green-yellow {
  background: linear-gradient(to right, var(--duel-green-bg) 50%, var(--duel-yellow-bg) 50%) !important;
  border-left-color: var(--duel-green-border) !important;
  border-right-color: var(--duel-yellow-border) !important;
}

#profile-duel .chip.duel-split-yellow-green {
  background: linear-gradient(to right, var(--duel-yellow-bg) 50%, var(--duel-green-bg) 50%) !important;
  border-left-color: var(--duel-yellow-border) !important;
  border-right-color: var(--duel-green-border) !important;
}

#profile-duel .chip.duel-split-red-yellow {
  background: linear-gradient(to right, var(--duel-red-bg) 50%, var(--duel-yellow-bg) 50%) !important;
  border-left-color: var(--duel-red-border) !important;
  border-right-color: var(--duel-yellow-border) !important;
}

#profile-duel .chip.duel-split-yellow-red {
  background: linear-gradient(to right, var(--duel-yellow-bg) 50%, var(--duel-red-bg) 50%) !important;
  border-left-color: var(--duel-yellow-border) !important;
  border-right-color: var(--duel-red-border) !important;
}

#profile-duel .chip[class*="duel-split-"],
#profile-duel .chip[class*="duel-split-"]:hover {
  color: #111827 !important;
}

#profile-duel .chip[class*="duel-split-"] strong,
#profile-duel .chip[class*="duel-split-"] .val-content {
  color: #111827 !important;
}

#profile-duel .chip[class*="duel-split-"] .label-side,
#profile-duel .chip[class*="duel-split-"] .status-icon {
  color: #475569 !important;
}

#profile-duel .chip[class*="duel-split-"] .comparison-grid {
  background: rgba(255, 255, 255, 0.42) !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
}

/* Duelos de Concordância (Mesmo palpite cravado) */
#profile-duel .match-concordance {
  box-shadow:
    0 4px 15px rgba(0, 0, 0, 0.1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.35) !important;
}

/* Refinamento final: cards de duelo em glass dark com reflexo da cor do resultado */
#profile-duel .chip[class*="duel-split-"] {
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #f8fafc !important;
  backdrop-filter: blur(18px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(135%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -18px 36px rgba(15, 23, 42, 0.28),
    0 12px 28px rgba(0, 0, 0, 0.26) !important;
}

#profile-duel .chip.duel-split-green-green {
  background:
    linear-gradient(135deg, rgba(16, 185, 129, 0.32), rgba(16, 185, 129, 0.12)),
    rgba(15, 23, 42, 0.72) !important;
  border-color: rgba(16, 185, 129, 0.48) !important;
}

#profile-duel .chip.duel-split-red-red {
  background:
    linear-gradient(135deg, rgba(239, 68, 68, 0.34), rgba(239, 68, 68, 0.12)),
    rgba(15, 23, 42, 0.72) !important;
  border-color: rgba(239, 68, 68, 0.5) !important;
}

#profile-duel .chip.duel-split-yellow-yellow {
  background:
    linear-gradient(135deg, rgba(250, 204, 21, 0.3), rgba(250, 204, 21, 0.1)),
    rgba(15, 23, 42, 0.72) !important;
  border-color: rgba(250, 204, 21, 0.48) !important;
}

#profile-duel .chip.duel-split-green-red {
  background:
    linear-gradient(to right, rgba(16, 185, 129, 0.28) 0 50%, rgba(239, 68, 68, 0.26) 50% 100%),
    rgba(15, 23, 42, 0.74) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}

#profile-duel .chip.duel-split-red-green {
  background:
    linear-gradient(to right, rgba(239, 68, 68, 0.26) 0 50%, rgba(16, 185, 129, 0.28) 50% 100%),
    rgba(15, 23, 42, 0.74) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}

#profile-duel .chip.duel-split-green-yellow {
  background:
    linear-gradient(to right, rgba(16, 185, 129, 0.28) 0 50%, rgba(250, 204, 21, 0.24) 50% 100%),
    rgba(15, 23, 42, 0.74) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}

#profile-duel .chip.duel-split-yellow-green {
  background:
    linear-gradient(to right, rgba(250, 204, 21, 0.24) 0 50%, rgba(16, 185, 129, 0.28) 50% 100%),
    rgba(15, 23, 42, 0.74) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}

#profile-duel .chip.duel-split-red-yellow {
  background:
    linear-gradient(to right, rgba(239, 68, 68, 0.26) 0 50%, rgba(250, 204, 21, 0.24) 50% 100%),
    rgba(15, 23, 42, 0.74) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}

#profile-duel .chip.duel-split-yellow-red {
  background:
    linear-gradient(to right, rgba(250, 204, 21, 0.24) 0 50%, rgba(239, 68, 68, 0.26) 50% 100%),
    rgba(15, 23, 42, 0.74) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}

#profile-duel .chip[class*="duel-split-"]:hover {
  filter: brightness(1.06);
  transform: translateY(-1px) !important;
}

#profile-duel .chip[class*="duel-split-"] strong,
#profile-duel .chip[class*="duel-split-"] .val-content {
  color: #f8fafc !important;
}

#profile-duel .chip[class*="duel-split-"] .label-side,
#profile-duel .chip[class*="duel-split-"] .status-icon {
  color: #cbd5e1 !important;
}

#profile-duel .chip[class*="duel-split-"] .comparison-grid {
  background: rgba(15, 23, 42, 0.34) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

/* Estilização para o modo Mata-mata (Vencedor e Classificado) */
#profile-duel .knockout-bet-detail-mini {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#profile-duel .mini-row {
  font-size: 0.75rem !important;
  color: #cbd5e1 !important;
}
/* =========================================================
   ESPELHAMENTO COMPLETO: PERFIL PÚBLICO (#user-profile)
   REPLICANDO FIELMENTE A IDENTIDADE DO PERFIL PRINCIPAL
========================================================= */

/* BACKGROUND FORÇADO NA ABA PÚBLICA */
#user-profile {
    background:
        radial-gradient(
            circle at top left,
            rgba(0,120,255,.16),
            transparent 28%
        ),
        radial-gradient(
            circle at top right,
            rgba(0,180,255,.10),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #05080f 0%,
            #081018 45%,
            #05080f 100%
        ) !important;
    min-height: 100vh !important;
    color: #fff !important;
    position: relative !important;
    overflow-x: hidden !important;
    padding-bottom: 120px !important;
}

/* TÍTULO COM GRADIENTE NEON */
#user-profile .profile-title {
    font-weight: 900 !important;
    text-transform: lowercase !important;
    letter-spacing: -1.5px !important;
    text-align: center !important;
    font-size: 2.2rem !important;
    margin-bottom: 20px !important;
    background:
        linear-gradient(
            90deg,
            #ffffff,
            #7fdcff,
            #00d2ff
        );
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: 0 0 18px rgba(0,210,255,.18) !important;
}

/* CARDS BASE GLASSMORPHISM */
#user-profile #userProfileScoreCard > div,
#user-profile .profile-card,
#user-profile .user-score-card {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.05),
            rgba(255,255,255,.025)
        ) !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-radius: 22px !important;
    box-shadow:
        0 10px 30px rgba(0,0,0,.45),
        0 0 14px rgba(0,120,255,.04) !important;
}

/* PROFILE PREMIUM CARD (DENTRO DO CARD DE SCORE) */
#user-profile .profile-premium-card {
    position: relative !important;
    overflow: hidden !important;
    padding: 14px !important;
    border-radius: 24px !important;
    background:
        radial-gradient(
            circle at top left,
            rgba(0,120,255,.12),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            rgba(7,12,20,.96),
            rgba(4,8,16,.98)
        ) !important;
    border: 1px solid rgba(80,130,255,.10) !important;
    box-shadow:
        inset 0 0 30px rgba(0,120,255,.03),
        0 10px 25px rgba(0,0,0,.45),
        0 0 14px rgba(0,120,255,.05) !important;
}

/* HEADER DO CARD */
#user-profile .profile-premium-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 14px !important;
}

#user-profile .profile-user-left {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

/* AVATAR COM ANEL LUMINOSO */
#user-profile .profile-avatar-ring {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    padding: 3px !important;
    background: linear-gradient(180deg, #3b82ff, #005eff) !important;
    box-shadow: 0 0 18px rgba(0,120,255,.25) !important;
}

#user-profile .profile-avatar-letter {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    background: #071019 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 2rem !important;
    font-weight: 900 !important;
    color: #fff !important;
}

/* META USER & BADGE DE RANKING */
#user-profile .profile-user-meta {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 4px !important;
}

#user-profile .profile-user-name {
    font-size: 1.1rem !important;
    font-weight: 900 !important;
    color: #fff !important;
    line-height: 1 !important;
}

#user-profile .profile-rank-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: fit-content !important;
    padding: 4px 10px !important;
    border-radius: 10px !important;
    background: rgba(30,70,180,.45) !important;
    border: 1px solid rgba(80,130,255,.25) !important;
    color: #fff !important;
    font-size: .75rem !important;
    font-weight: 800 !important;
}

/* LADO DOS PONTOS TOTAIS */
#user-profile .profile-total-side {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

#user-profile .profile-total-points {
    font-size: 3.4rem !important;
    line-height: .9 !important;
    font-weight: 900 !important;
    background: linear-gradient(180deg, #6bb6ff, #005eff);
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: 0 0 18px rgba(0,120,255,.20) !important;
}

#user-profile .profile-total-label {
    font-size: .68rem !important;
    font-weight: 700 !important;
    letter-spacing: .6px !important;
    color: rgba(255,255,255,.55) !important;
    text-align: center !important;
}

/* GRID DE MEDALHAS/PÓDIOS */
#user-profile .profile-breakdown-grid {
    display: grid !important;
    grid-template-columns: 1fr 1px 1fr 1px 1fr !important;
    align-items: center !important;
    margin-top: 8px !important;
    padding-top: 14px !important;
    border-top: 1px solid rgba(255,255,255,.06) !important;
}

#user-profile .profile-stat-divider {
    width: 1px !important;
    height: 54px !important;
    background: rgba(255,255,255,.06) !important;
}

#user-profile .profile-stat-box {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
}

#user-profile .profile-stat-value {
    font-size: 2rem !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    color: #fff !important;
}

#user-profile .profile-stat-label {
    font-size: .72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: rgba(255,255,255,.58) !important;
}

#user-profile .profile-stat-icon {
    font-size: 1.1rem !important;
    line-height: 1 !important;
}

/* SEÇÃO DE APROVEITAMENTO DO SCORECARD */
#user-profile .profile-accuracy-wrapper {
    margin-top: 14px !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255,255,255,.05) !important;
    background: rgba(255,255,255,.02) !important;
}

#user-profile .profile-accuracy-title {
    text-align: center !important;
    font-size: .64rem !important;
    font-weight: 700 !important;
    letter-spacing: .7px !important;
    color: rgba(255,255,255,.42) !important;
    padding: 8px 0 !important;
    text-transform: uppercase !important;
}

#user-profile .profile-accuracy-grid {
    display: grid !important;
    grid-template-columns: 1fr 1px 1fr !important;
    align-items: stretch !important;
}

#user-profile .accuracy-divider {
    width: 1px !important;
    background: rgba(255,255,255,.06) !important;
}

/* FILTROS INTEGRADOS ESTILO CÁPSULA (7d, 15d, Tudo) */
#user-profile .chart-filters {
    background: rgba(0, 0, 0, 0.3) !important;
    border-radius: 50px !important;
    padding: 4px !important;
    border: 1px solid var(--glass-border) !important;
}

#user-profile .chart-btn {
    background: transparent !important;
    border: none !important;
    color: #94a3b8 !important;
    font-weight: 700 !important;
    border-radius: 50px !important;
}

#user-profile .chart-btn.active {
    background: var(--neon-cyan) !important;
    color: #fff !important;
    box-shadow: 0 0 15px var(--neon-glow) !important;
}

/* GLOW NEON NOS CANVASES DOS GRÁFICOS */
#user-profile .profile-chart-wrapper canvas,
#user-profile .ranking-timeline-wrapper canvas {
    filter: drop-shadow(0 0 8px var(--neon-glow)) !important;
}

/* HISTÓRICO DIÁRIO CONFIGURADO EM COLUNAS VERTICAIS */
#user-profile .history-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    min-height: 64px !important;
    padding: 0px 0px !important;
}

#user-profile .history-date {
    font-size: .72rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    color: rgba(255,255,255,.58) !important;
}

#user-profile .history-bottom {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
}

/* BOLINHA GLOW NEON NO HISTÓRICO */
#user-profile .history-icon {
    width: 10px !important;
    height: 10px !important;
    min-width: 10px !important;
    border-radius: 50% !important;
    background: #7dff9b !important;
    box-shadow:
        0 0 8px rgba(125,255,155,.9),
        0 0 14px rgba(125,255,155,.45) !important;
    flex-shrink: 0 !important;
}

#user-profile .history-points {
    font-size: 1rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    color: #7dff9b !important;
}

/* =========================================================
   DUELOS DO PERFIL PUBLICO (#user-profile)
   Espelha o visual dark/glass do #profile-duel sem vazar.
========================================================= */

#user-profile #duel-section-wrapper {
    background: transparent !important;
    color: #ffffff !important;
    padding: 15px 5px !important;
    box-shadow: none !important;
    border: none !important;
}

#user-profile #duel-section-wrapper .profile-card {
    background: rgba(15, 23, 42, 0.45) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 24px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
}

#user-profile #duel-section-wrapper .duel-header-main h3 {
    color: #f8fafc !important;
}

#user-profile #duel-section-wrapper .duel-subtitle {
    color: #94a3b8 !important;
}

#user-profile #duel-section-wrapper .duel-phase-nav {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    background: rgba(15, 23, 42, 0.4) !important;
    padding: 6px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

#user-profile #duel-section-wrapper .duel-phase-nav .phase-btn {
    flex: 1;
    background: transparent !important;
    border: none !important;
    color: #94a3b8 !important;
    padding: 10px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

#user-profile #duel-section-wrapper .duel-phase-nav .phase-btn.active {
    background: #3b82f6 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
}

#user-profile #duel-section-wrapper .duel-accordion-item {
    background: rgba(15, 23, 42, 0.45) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 24px !important;
    margin-bottom: 18px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
}

#user-profile #duel-section-wrapper .duel-accordion-header {
    background: rgba(255, 255, 255, 0.02) !important;
    padding: 16px 20px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    color: #94a3b8 !important;
}

#user-profile #duel-section-wrapper .duel-accordion-header span {
    color: #e2e8f0 !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
}

#user-profile #duel-section-wrapper .duel-accordion-header i {
    color: #64748b !important;
}

#user-profile #duel-section-wrapper .duel-accordion-body {
    background: transparent !important;
    padding: 16px !important;
}

#user-profile #duel-section-wrapper .chip {
    background: rgba(30, 41, 59, 0.45) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 18px !important;
    padding: 14px !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
    transition: transform 0.2s, background 0.2s !important;
}

#user-profile #duel-section-wrapper .chip:hover {
    transform: translateY(-1px) !important;
    background: rgba(30, 41, 59, 0.55) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

#user-profile #duel-section-wrapper .chip strong {
    color: #f8fafc !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
}

#user-profile #duel-section-wrapper .flag-mini,
#user-profile #duel-section-wrapper .flag-mini img,
#user-profile #duel-section-wrapper .flag-mini svg {
    width: 24px !important;
    height: 24px !important;
    object-fit: contain;
}

#user-profile #duel-section-wrapper .duel-score-pill {
    background: rgba(15, 23, 42, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    padding: 4px 14px !important;
    border-radius: 8px !important;
    font-family: 'Courier New', Courier, monospace !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    letter-spacing: 0.5px;
}

#user-profile #duel-section-wrapper .comparison-grid {
    background: rgba(15, 23, 42, 0.3) !important;
    border-radius: 12px !important;
    padding: 10px 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.03) !important;
    margin-top: 10px !important;
}

#user-profile #duel-section-wrapper .label-side {
    color: #64748b !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 3px !important;
}

#user-profile #duel-section-wrapper .val-content {
    color: #f1f5f9 !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
}

#user-profile #duel-section-wrapper .score-bet-label {
    color: #3b82f6 !important;
    font-weight: 700 !important;
}

#user-profile #duel-section-wrapper .status-icon {
    color: #94a3b8 !important;
    font-size: 1rem !important;
}

#user-profile #duel-section-wrapper .duel-bet-logo-only img,
#user-profile #duel-section-wrapper .duel-bet-logo-only svg {
    width: 20px !important;
    height: 20px !important;
    object-fit: contain;
}

#user-profile #duel-section-wrapper .chip[class*="duel-split-"] {
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #f8fafc !important;
    backdrop-filter: blur(18px) saturate(135%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(135%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        inset 0 -18px 36px rgba(15, 23, 42, 0.28),
        0 12px 28px rgba(0, 0, 0, 0.26) !important;
}

#user-profile #duel-section-wrapper .chip.duel-pending {
    background: rgba(30, 41, 59, 0.45) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

#user-profile #duel-section-wrapper .chip.duel-split-green-green {
    background:
        linear-gradient(135deg, rgba(16, 185, 129, 0.32), rgba(16, 185, 129, 0.12)),
        rgba(15, 23, 42, 0.72) !important;
    border-color: rgba(16, 185, 129, 0.48) !important;
}

#user-profile #duel-section-wrapper .chip.duel-split-red-red {
    background:
        linear-gradient(135deg, rgba(239, 68, 68, 0.34), rgba(239, 68, 68, 0.12)),
        rgba(15, 23, 42, 0.72) !important;
    border-color: rgba(239, 68, 68, 0.5) !important;
}

#user-profile #duel-section-wrapper .chip.duel-split-yellow-yellow {
    background:
        linear-gradient(135deg, rgba(250, 204, 21, 0.3), rgba(250, 204, 21, 0.1)),
        rgba(15, 23, 42, 0.72) !important;
    border-color: rgba(250, 204, 21, 0.48) !important;
}

#user-profile #duel-section-wrapper .chip.duel-split-green-red {
    background:
        linear-gradient(to right, rgba(16, 185, 129, 0.28) 0 50%, rgba(239, 68, 68, 0.26) 50% 100%),
        rgba(15, 23, 42, 0.74) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
}

#user-profile #duel-section-wrapper .chip.duel-split-red-green {
    background:
        linear-gradient(to right, rgba(239, 68, 68, 0.26) 0 50%, rgba(16, 185, 129, 0.28) 50% 100%),
        rgba(15, 23, 42, 0.74) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
}

#user-profile #duel-section-wrapper .chip.duel-split-green-yellow {
    background:
        linear-gradient(to right, rgba(16, 185, 129, 0.28) 0 50%, rgba(250, 204, 21, 0.24) 50% 100%),
        rgba(15, 23, 42, 0.74) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
}

#user-profile #duel-section-wrapper .chip.duel-split-yellow-green {
    background:
        linear-gradient(to right, rgba(250, 204, 21, 0.24) 0 50%, rgba(16, 185, 129, 0.28) 50% 100%),
        rgba(15, 23, 42, 0.74) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
}

#user-profile #duel-section-wrapper .chip.duel-split-red-yellow {
    background:
        linear-gradient(to right, rgba(239, 68, 68, 0.26) 0 50%, rgba(250, 204, 21, 0.24) 50% 100%),
        rgba(15, 23, 42, 0.74) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
}

#user-profile #duel-section-wrapper .chip.duel-split-yellow-red {
    background:
        linear-gradient(to right, rgba(250, 204, 21, 0.24) 0 50%, rgba(239, 68, 68, 0.26) 50% 100%),
        rgba(15, 23, 42, 0.74) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
}

#user-profile #duel-section-wrapper .chip[class*="duel-split-"]:hover {
    filter: brightness(1.06);
    transform: translateY(-1px) !important;
}

#user-profile #duel-section-wrapper .chip[class*="duel-split-"] strong,
#user-profile #duel-section-wrapper .chip[class*="duel-split-"] .val-content {
    color: #f8fafc !important;
}

#user-profile #duel-section-wrapper .chip[class*="duel-split-"] .label-side,
#user-profile #duel-section-wrapper .chip[class*="duel-split-"] .status-icon {
    color: #cbd5e1 !important;
}

#user-profile #duel-section-wrapper .chip[class*="duel-split-"] .comparison-grid {
    background: rgba(15, 23, 42, 0.34) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

#user-profile #duel-section-wrapper .match-concordance {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        inset 0 0 0 1px rgba(255, 255, 255, 0.16),
        0 12px 28px rgba(0, 0, 0, 0.26) !important;
}

#user-profile #duel-section-wrapper .knockout-bet-detail-mini {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

#user-profile #duel-section-wrapper .mini-row {
    font-size: 0.75rem !important;
    color: #cbd5e1 !important;
}

/* =========================================================
   REFINO FINAL DO LOGIN
   Escopo fechado na tela de login para nao vazar no app.
========================================================= */

#login-section.login-card {
    margin-top: 74px !important;
    padding: 18px 18px 16px !important;
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.08), transparent 34%),
        linear-gradient(180deg, rgba(4, 19, 29, 0.54), rgba(6, 12, 18, 0.7)) !important;
    border-color: rgba(255, 255, 255, 0.09) !important;
    box-shadow:
        0 18px 46px rgba(0, 0, 0, 0.48),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -18px 38px rgba(255, 255, 255, 0.035) !important;
}

#login-section .auth-tabs {
    margin-bottom: 20px !important;
    border-radius: 14px !important;
    background: rgba(0, 0, 0, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

#login-section .auth-tab {
    height: 40px !important;
    color: rgba(226, 232, 240, 0.72) !important;
}

#login-section .auth-tab:not(.active):hover {
    color: rgba(255, 255, 255, 0.9) !important;
    background: rgba(255, 255, 255, 0.035) !important;
}

#login-section .auth-tab.active {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.035)) !important;
    box-shadow:
        inset 0 -2px 0 rgba(232, 199, 163, 0.72),
        0 8px 18px rgba(0, 0, 0, 0.22) !important;
}

#login-section .form-group {
    margin-bottom: 15px !important;
}

#login-section .form-group input {
    height: 40px !important;
    border-radius: 14px !important;
    background: rgba(0, 0, 0, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
}

#login-section #login-password::placeholder {
    color: transparent !important;
}

#login-section .forgot-inline {
    color: #8fc4ff !important;
    opacity: 0.95 !important;
}

#login-section .btn-primary {
    height: 42px !important;
    margin-top: 12px !important;
    border-radius: 15px !important;
    font-size: 17px !important;
    background-image: linear-gradient(180deg, #5f9b43 0%, #2b5a1a 100%) !important;
    box-shadow:
        0 0 0 1px rgba(232, 199, 163, 0.2),
        0 7px 16px rgba(0, 0, 0, 0.44),
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        inset 0 -3px 8px rgba(0, 0, 0, 0.26) !important;
}

#login-section .btn-primary::before {
    width: 62px !important;
    height: 62px !important;
    top: -8px !important;
    right: -8px !important;
    opacity: 0.12 !important;
}

/* =========================================================
   REFINO FINAL DA SELECAO DE LIGAS
   Escopo fechado em #league-selection-section.
========================================================= */

#league-selection-section {
    background: #020617 !important;
    padding: 18px 14px 28px !important;
}

#league-selection-section:not([hidden])::before {
    background:
        linear-gradient(180deg, rgba(2, 6, 23, 0.5), rgba(2, 6, 23, 0.68)),
        radial-gradient(circle at 50% 8%, rgba(59, 130, 246, 0.14), transparent 34%),
        url('../img/Stadium.jpg') no-repeat center center !important;
    background-size: cover !important;
    filter: saturate(1.08) contrast(1.02) brightness(1.08) !important;
}

#league-selection-section .league-selection-title {
    max-width: 360px !important;
    margin: 4px auto 18px !important;
    color: #f8fafc !important;
    font-size: 1.35rem !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    text-shadow: 0 3px 14px rgba(0, 0, 0, 0.5) !important;
}

#league-selection-section #leagues-container {
    max-width: 360px !important;
    gap: 16px !important;
    margin-bottom: 28px !important;
}

#league-selection-section .league-card-modern {
    width: 100% !important;
}

#league-selection-section .league-card-glass {
    position: relative !important;
    overflow: hidden !important;
    min-height: auto !important;
    border-radius: 24px !important;
    padding: 18px 18px 16px !important;
    color: #f8fafc !important;
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.14), transparent 38%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.42), rgba(2, 6, 23, 0.54)) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    backdrop-filter: blur(20px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
    box-shadow:
        0 16px 34px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 -20px 40px rgba(0, 0, 0, 0.12) !important;
}

#league-selection-section .league-card-glass::before {
    content: "" !important;
    position: absolute !important;
    inset: -35% -20% auto -20% !important;
    height: 150px !important;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.22), transparent 62%) !important;
    pointer-events: none !important;
}

#league-selection-section .league-card-modern:nth-child(2n) .league-card-glass::before {
    background: radial-gradient(circle, rgba(250, 204, 21, 0.2), transparent 62%) !important;
}

#league-selection-section .league-card-modern:nth-child(3n) .league-card-glass::before {
    background: radial-gradient(circle, rgba(34, 197, 94, 0.2), transparent 62%) !important;
}

#league-selection-section .league-card-modern:nth-child(4n) .league-card-glass::before {
    background: radial-gradient(circle, rgba(99, 102, 241, 0.22), transparent 62%) !important;
}

#league-selection-section .league-logo-container,
#league-selection-section .league-info,
#league-selection-section .league-actions,
#league-selection-section .league-footer-info {
    position: relative !important;
    z-index: 1 !important;
}

#league-selection-section .league-logo-img {
    height: 70px !important;
    max-width: 112px !important;
    margin: -4px auto 8px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.38)) !important;
}

#league-selection-section .league-title {
    color: #f8fafc !important;
    font-size: 1.24rem !important;
    line-height: 1.12 !important;
    font-weight: 900 !important;
    margin: 4px 0 10px !important;
    letter-spacing: 0 !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45) !important;
}

#league-selection-section .league-info-text {
    color: #cbd5e1 !important;
    font-size: 0.86rem !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
    margin: 8px 0 !important;
}

#league-selection-section .league-info-text strong {
    color: #f8fafc !important;
    font-weight: 900 !important;
}

#league-selection-section .league-info-text span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
    background: rgba(250, 204, 21, 0.14) !important;
    border: 1px solid rgba(250, 204, 21, 0.34) !important;
    color: #facc15 !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.02em !important;
}

#league-selection-section .league-actions {
    gap: 10px !important;
    margin-top: 16px !important;
    flex-wrap: nowrap !important;
}

#league-selection-section .btn-modern-primary {
    min-width: 138px !important;
    height: 42px !important;
    padding: 0 22px !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, #2563eb 0%, #1e40af 100%) !important;
    box-shadow:
        0 10px 20px rgba(37, 99, 235, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
    font-size: 0.95rem !important;
    font-weight: 900 !important;
}

#league-selection-section .league-readonly .btn-modern-primary {
    background: linear-gradient(180deg, #16a34a 0%, #166534 100%) !important;
    box-shadow:
        0 10px 20px rgba(22, 163, 74, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

#league-selection-section .ver-mais-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 116px !important;
    height: 42px !important;
    padding: 0 16px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.055) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #dbeafe !important;
    text-decoration: none !important;
    font-size: 0.86rem !important;
    font-weight: 900 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

#league-selection-section .ver-mais-link:hover {
    background: rgba(255, 255, 255, 0.09) !important;
    color: #ffffff !important;
}

#league-selection-section .league-footer-info {
    margin-top: 14px !important;
    color: #cbd5e1 !important;
    font-size: 0.8rem !important;
    font-weight: 800 !important;
    opacity: 0.92 !important;
}

#league-selection-section .league-footer-info i {
    color: #93c5fd !important;
}

/* =========================================================
   REFINO FINAL DO CABECALHO SOCIAL DO APP
   Escopo fechado em #app-section .user-header.
========================================================= */

#app-section .user-header {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 8px 8px 10px !important;
    margin: 0 0 10px !important;
    box-sizing: border-box !important;
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.14), transparent 34%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.62), rgba(2, 6, 23, 0.72)) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 0 0 18px 18px !important;
    backdrop-filter: blur(16px) saturate(135%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(135%) !important;
    box-shadow:
        0 12px 26px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

#app-section .ticker-wrapper {
    width: 100% !important;
    margin: 0 !important;
    padding: 3px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: rgba(2, 6, 23, 0.46) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 6px 14px rgba(0, 0, 0, 0.22) !important;
}

#app-section .ticker-wrapper > .ticker-row {
    gap: 8px !important;
    padding: 0 !important;
}

#app-section #newsTicker {
    min-height: 34px !important;
    height: 34px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    border-radius: 13px !important;
    background:
        linear-gradient(90deg, rgba(15, 23, 42, 0.72), rgba(15, 23, 42, 0.4)) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

#app-section #newsTrack {
    color: #dbeafe !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    text-shadow: none !important;
    margin-right: 0 !important;
}

#app-section #newsTrack strong {
    color: #ffffff !important;
    font-weight: 900 !important;
}

#app-section .news-inline-reactions {
    gap: 4px !important;
    margin-left: 6px !important;
}

#app-section .news-react {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #e0f2fe !important;
}

#app-section .ticker-wrapper .react-emoji-btn,
#app-section .react-emoji-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background:
        radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.18), transparent 32%),
        linear-gradient(180deg, rgba(51, 65, 85, 0.82), rgba(15, 23, 42, 0.92)) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    box-shadow:
        0 8px 16px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
    font-size: 16px !important;
    line-height: 1 !important;
}

#app-section #reactionPicker {
    top: calc(100% + 8px) !important;
    right: 0 !important;
    padding: 7px 9px !important;
    border-radius: 999px !important;
    background: rgba(15, 23, 42, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(14px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.38) !important;
}

#app-section #reactionPicker button {
    color: #ffffff !important;
}

#app-section .user-top-row {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
}

#app-section .user-info {
    min-width: 0 !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    border-radius: 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(255, 255, 255, 0.075) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(14px) saturate(130%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(130%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    color: #f8fafc !important;
    overflow: hidden !important;
}

#app-section .user-info span:first-child,
#app-section .user-info strong,
#app-section .user-info b {
    color: #f8fafc !important;
}

#app-section .user-info span[style*="selectedLeagueName"],
#app-section .user-info span[style*="uppercase"],
#app-section .user-info > span:first-child {
    color: #fb7185 !important;
}

#app-section .admin-badge {
    background: linear-gradient(180deg, #f87171, #dc2626) !important;
    color: #ffffff !important;
    border-radius: 9px !important;
    padding: 4px 8px !important;
    font-size: 0.68rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.02em !important;
    box-shadow: 0 6px 12px rgba(220, 38, 38, 0.22) !important;
}

#app-section .user-ranking-summary {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: max-content !important;
    flex-shrink: 0 !important;
}

#app-section .user-ranking-summary span {
    height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.075)) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #f8fafc !important;
    font-size: 0.8rem !important;
    font-weight: 900 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

@media (max-width: 420px) {
    #app-section .user-header {
        padding: 7px 6px 9px !important;
    }

    #app-section .user-top-row {
        grid-template-columns: 1fr !important;
    }

    #app-section .user-ranking-summary {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
    }

    #app-section .user-ranking-summary span {
        width: 100% !important;
    }
}

/* =========================================================
   Alternador de estilo dos cards de partidas
   O JS apenas alterna .match-card-style-arena no <html>.
========================================================= */

.match-style-toolbar {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    margin: 0 0 12px !important;
}

.match-style-toggle {
    min-height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 13px !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06)) !important;
    color: #f8fafc !important;
    font-size: .82rem !important;
    font-weight: 900 !important;
    cursor: pointer !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 10px 24px rgba(0,0,0,.22) !important;
    backdrop-filter: blur(12px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
}

.match-style-toggle.is-arena {
    border-color: rgba(96,165,250,.42) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 0 18px rgba(96,165,250,.22) !important;
}

.match-style-toggle-icon {
    width: 22px !important;
    height: 22px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: rgba(125,211,252,.18) !important;
    color: #7dd3fc !important;
    line-height: 1 !important;
}

.match-card-style-arena #matches-container .group-matches-grid {
    gap: 24px !important;
}

.match-card-style-arena #matches-container .match-card,
.match-card-style-arena #matches-container .match-card.hit-none,
.match-card-style-arena #matches-container .match-card[data-status="finished"],
.match-card-style-arena #matches-container .match-card[data-status="encerrado"] {
    width: 100% !important;
    max-width: 650px !important;
    height: clamp(330px, 56vw, 410px) !important;
    margin: 28px auto 18px !important;
    padding: 24px 32px !important;
    overflow: visible !important;
    border: 1px solid rgba(248,113,113,.78) !important;
    border-radius: 26px !important;
    background:
        linear-gradient(180deg, rgba(248,113,113,.16), transparent 16%),
        radial-gradient(circle at 50% 118%, rgba(148,163,184,.20), transparent 38%),
        linear-gradient(90deg, rgba(15,23,42,.92), rgba(2,6,23,.94)),
        #020617 !important;
    background-size: auto !important;
    color: #f8fafc !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        inset 0 -42px 58px rgba(15,23,42,.82),
        0 0 18px rgba(248,113,113,.20),
        0 18px 38px rgba(0,0,0,.36) !important;
}

.match-card-style-arena #matches-container .match-card::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 25% !important;
    right: 25% !important;
    height: 4px !important;
    border-radius: 0 0 999px 999px !important;
    background: #f87171 !important;
    box-shadow: 0 0 18px rgba(248,113,113,.72) !important;
    pointer-events: none !important;
}

.match-card-style-arena #matches-container .match-card::after {
    content: "" !important;
    position: absolute !important;
    inset: 32% 0 72px !important;
    z-index: 0 !important;
    pointer-events: none !important;
    background:
        radial-gradient(ellipse at center, rgba(148,163,184,.18), transparent 55%),
        linear-gradient(180deg, transparent, rgba(148,163,184,.08) 54%, transparent),
        repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 34px) !important;
    opacity: .95 !important;
}

.match-card-style-arena #matches-container .match-card.hit-full {
    border-color: rgba(74,222,128,.84) !important;
    background:
        linear-gradient(180deg, rgba(74,222,128,.16), transparent 16%),
        radial-gradient(circle at 50% 118%, rgba(74,222,128,.16), transparent 38%),
        linear-gradient(90deg, rgba(15,23,42,.92), rgba(2,6,23,.94)),
        #020617 !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        inset 0 -42px 58px rgba(15,23,42,.82),
        0 0 18px rgba(74,222,128,.24),
        0 18px 38px rgba(0,0,0,.36) !important;
}

.match-card-style-arena #matches-container .match-card.hit-full::before {
    background: #4ade80 !important;
    box-shadow: 0 0 18px rgba(74,222,128,.72) !important;
}

.match-card-style-arena #matches-container .match-header.compact {
    position: relative !important;
    z-index: 3 !important;
    min-height: 52px !important;
    padding: 0 !important;
    margin: 0 !important;
    color: #f8fafc !important;
}

.match-card-style-arena #matches-container .group-label {
    font-size: 1.18rem !important;
    font-weight: 900 !important;
    color: #f8fafc !important;
}

.match-card-style-arena #matches-container .status-wrapper .badge {
    background: transparent !important;
    padding: 0 !important;
    color: #fb7185 !important;
    font-size: 1.05rem !important;
    font-weight: 800 !important;
}

.match-card-style-arena #matches-container .match-card.hit-full .status-wrapper .badge {
    color: #4ade80 !important;
}

.match-card-style-arena #matches-container .status-wrapper::after {
    content: "-" !important;
    width: 22px !important;
    height: 22px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    margin-left: 8px !important;
    background: #fb7185 !important;
    color: #111827 !important;
    font-size: 1.1rem !important;
    font-weight: 1000 !important;
    line-height: 1 !important;
}

.match-card-style-arena #matches-container .match-card.hit-full .status-wrapper::after {
    background: #4ade80 !important;
}

.match-card-style-arena #matches-container .bet-options {
    position: absolute !important;
    z-index: 2 !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: calc(100% - 64px) !important;
    height: 150px !important;
    display: grid !important;
    grid-template-columns: 1fr .62fr 1fr !important;
    align-items: center !important;
    gap: 28px !important;
    padding: 0 !important;
}

.match-card-style-arena #matches-container .match-card .option-wrapper {
    height: 100% !important;
    min-width: 0 !important;
}

.match-card-style-arena #matches-container .match-card .bet-option,
.match-card-style-arena #matches-container .match-card button.bet-option,
.match-card-style-arena #matches-container .match-card button.bet-option.selected,
.match-card-style-arena #matches-container .match-card button.bet-option.active {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 16px 12px !important;
    border: 1px solid rgba(148,163,184,.62) !important;
    border-radius: 18px !important;
    background:
        radial-gradient(circle at 50% 105%, rgba(148,163,184,.22), transparent 52%),
        linear-gradient(180deg, rgba(30,41,59,.78), rgba(2,6,23,.72)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.14),
        inset 0 -18px 32px rgba(15,23,42,.82),
        0 8px 20px rgba(0,0,0,.28) !important;
    color: #f8fafc !important;
    filter: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

.match-card-style-arena #matches-container .match-card .option-wrapper:nth-child(2) .bet-option {
    height: 76px !important;
    border-radius: 14px !important;
    padding: 0 !important;
}

.match-card-style-arena #matches-container .bet-options .team-logo-api,
.match-card-style-arena #matches-container .bet-options .team-emoji,
.match-card-style-arena #matches-container .bet-options .bet-option.selected .team-logo-api,
.match-card-style-arena #matches-container .bet-options .bet-option.active .team-logo-api,
.match-card-style-arena #matches-container .bet-options .bet-option.selected .team-emoji,
.match-card-style-arena #matches-container .bet-options .bet-option.active .team-emoji {
    position: static !important;
    width: 82px !important;
    height: 82px !important;
    max-width: 82px !important;
    min-width: 82px !important;
    margin: 0 0 12px !important;
    filter: none !important;
    -webkit-filter: none !important;
    transform: none !important;
    opacity: 1 !important;
    object-fit: contain !important;
}

.match-card-style-arena #matches-container .bet-options .team-emoji {
    font-size: 4.2rem !important;
    line-height: 1 !important;
}

.match-card-style-arena #matches-container .match-card .bet-team-vertical,
.match-card-style-arena #matches-container .match-card .option-wrapper:first-child .bet-team-vertical,
.match-card-style-arena #matches-container .match-card .option-wrapper:last-child .bet-team-vertical,
.match-card-style-arena #matches-container .match-card .option-wrapper:nth-child(2) .bet-team-vertical {
    position: static !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100% !important;
    margin: 0 !important;
    display: block !important;
    text-align: center !important;
    color: #f8fafc !important;
    -webkit-text-fill-color: #f8fafc !important;
    font-size: clamp(.92rem, 2.3vw, 1.28rem) !important;
    font-weight: 900 !important;
    line-height: 1.08 !important;
    text-transform: none !important;
    text-shadow: 0 2px 8px rgba(0,0,0,.68) !important;
}

.match-card-style-arena #matches-container .match-card .bet-option.selected .bet-team-vertical,
.match-card-style-arena #matches-container .match-card .bet-option.active .bet-team-vertical {
    color: #5dff78 !important;
    -webkit-text-fill-color: #5dff78 !important;
}

.match-card-style-arena #matches-container .match-card .option-wrapper:nth-child(2) .bet-team-vertical {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    font-size: clamp(1rem, 2.5vw, 1.35rem) !important;
}

.match-card-style-arena #matches-container .final-score {
    position: absolute !important;
    z-index: 3 !important;
    left: 32px !important;
    right: 32px !important;
    bottom: 24px !important;
    height: 64px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(148,163,184,.55) !important;
    border-radius: 16px !important;
    background: rgba(2,6,23,.72) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 8px 18px rgba(0,0,0,.25) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 18px !important;
    color: #ffffff !important;
    font-size: clamp(1.55rem, 4.5vw, 2.1rem) !important;
    font-weight: 1000 !important;
    line-height: 1 !important;
}

.match-card-style-arena #matches-container .final-score .team-logo-api,
.match-card-style-arena #matches-container .final-score .logo-wrapper img,
.match-card-style-arena #matches-container .final-score .team-emoji {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    margin: 0 !important;
    filter: none !important;
    transform: none !important;
    opacity: 1 !important;
}

.match-card-style-arena #matches-container .goal-entry-card {
    color: #fde047 !important;
    font-size: .78rem !important;
    text-shadow: 0 2px 6px rgba(0,0,0,.85) !important;
}

.match-card-style-arena #matches-container .gols-indicator-container {
    top: -58px !important;
    left: 0 !important;
    align-items: flex-start !important;
}

.match-card-style-arena #matches-container .option-wrapper:last-child .gols-indicator-container {
    align-items: flex-end !important;
}

.match-card-style-arena #matches-container .points-earned {
    top: -14px !important;
    margin: 0 !important;
    padding: 4px 16px !important;
    border: 1px solid rgba(134,239,172,.34) !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg, rgba(34,197,94,.82), rgba(21,128,61,.82)) !important;
    color: #ffffff !important;
    font-size: 1rem !important;
    box-shadow: 0 0 18px rgba(74,222,128,.38) !important;
}

@media (max-width: 560px) {
    .match-card-style-arena #matches-container .match-card,
    .match-card-style-arena #matches-container .match-card.hit-none,
    .match-card-style-arena #matches-container .match-card.hit-full,
    .match-card-style-arena #matches-container .match-card[data-status="finished"],
    .match-card-style-arena #matches-container .match-card[data-status="encerrado"] {
        height: 326px !important;
        padding: 18px 20px !important;
        border-radius: 22px !important;
    }

    .match-card-style-arena #matches-container .bet-options {
        width: calc(100% - 40px) !important;
        height: 132px !important;
        gap: 14px !important;
    }

    .match-card-style-arena #matches-container .bet-options .team-logo-api,
    .match-card-style-arena #matches-container .bet-options .team-emoji,
    .match-card-style-arena #matches-container .bet-options .bet-option.selected .team-logo-api,
    .match-card-style-arena #matches-container .bet-options .bet-option.active .team-logo-api {
        width: 62px !important;
        height: 62px !important;
        max-width: 62px !important;
        min-width: 62px !important;
    }

    .match-card-style-arena #matches-container .match-card .option-wrapper:nth-child(2) .bet-option {
        height: 66px !important;
    }

    .match-card-style-arena #matches-container .final-score {
        left: 20px !important;
        right: 20px !important;
        bottom: 18px !important;
        height: 54px !important;
        gap: 12px !important;
    }
}