/* --- ESTILOS GLOBAIS E VARIÁVEIS (BASE) --- */
		:root {
		  --primary-color: #0d6efd;
		  --primary-hover: #0b5ed7;
		  --success-color: #198754;
		  --danger-color: #dc3545;
		  --warning-color: #ffc107;
		  --info-color: #0dcaf0;
		  --bg-color: #f4f6f9;
		  --card-bg-color: #ffffff;
		  --header-bg-color: #ffffff;
		  --text-color: #212529;
		  --text-color-light: #6c757d;
		  --accent-color: #0056b3;
		  --border-color: #dee2e6;
		  --border-color-light: #f1f3f5;
		  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
		  --sidebar-bg: #1e2a3b;
		  --sidebar-text: #adb5bd;
		  --sidebar-text-hover: #ffffff;
		  --header-height: 60px;
		  --transition: all 0.3s ease;
		  --result-win: #198754;
		  --result-draw: #ffc107;
		  --result-loss: #dc3545;
		}
		
		html.dark {
		  --primary-color: #4dabf7;
		  --primary-hover: #74c0fc;
		  --success-color: #20c997;
		  --danger-color: #ff6b6b;
		  --warning-color: #ffd43b;
		  --info-color: #3bc9db;
		  --bg-color: #121212;
		  --card-bg-color: #1e1e1e;
		  --header-bg-color: #1e1e1e;
		  --text-color: #e9ecef;
		  --text-color-light: #b0b3b8;
		  --accent-color: #4dabf7;
		  --border-color: #495057;
		  --border-color-light: #2c2e33;
		  --sidebar-bg: #1c1f24;
		  --sidebar-text: #868e96;
		  --result-win: #20c997;
		  --result-draw: #ffd43b;
		  --result-loss: #ff6b6b;
		}
		
		*,
		*::before,
		*::after {
		  box-sizing: border-box;
		}
		
		body {
		  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
		  background-color: var(--bg-color);
		  color: var(--text-color);
		  transition: var(--transition);
		  min-height: 100vh;
		  display: flex;
		  flex-direction: column;
		  transition: background-color .3s, color .3s;
		}
		
		.main-content {
		  padding: 1.5rem;
		  flex: 1;
		  margin-top: 2rem;
		}
		
		h1 {
		  font-size: 15px;
		  text-align: center;
		  margin-top: 3.8rem;
		  margin-bottom: 1.5rem;
		}
		
		/* --- DROPDOWN E CONTROLES --- */
		.controls-container {
		  display: flex;
		  justify-content: space-between;
		  align-items: center;
		  margin-bottom: 2.5rem;
		  flex-wrap: wrap;
		  gap: 1rem;
		}
		
		.controls-left {
		  display: flex;
		  gap: 1rem;
		  align-items: center;
		  flex-wrap: wrap;
		}
		
		.dropdown-label {
		  display: block;
		  margin-bottom: 0.5rem;
		  font-weight: 600;
		  color: var(--text-color-light);
		  font-size: 0.9rem;
		}
		
		.season-dropdown {
		  position: relative;
		  display: inline-block;
		  width: 100%;
		  max-width: 400px;
		}
		
		.season-dropdown-toggle {
		  background-color: var(--card-bg-color);
		  border: 1px solid var(--border-color);
		  padding: 0.75rem 1.25rem;
		  border-radius: 8px;
		  font-weight: 600;
		  width: 100%;
		  text-align: left;
		  display: flex;
		  align-items: center;
		  gap: 0.75rem;
		  cursor: pointer;
		  transition: var(--transition);
		  color: var(--text-color);
		}
		
		.season-dropdown-toggle:hover {
		  border-color: var(--primary-color);
		}
		
		.season-dropdown-toggle img {
		  width: 24px;
		  height: 24px;
		  object-fit: contain;
		  border-radius: 4px;
		  flex-shrink: 0;
		}
		
		.dropdown-arrow {
		  margin-left: auto;
		  transition: var(--transition);
		}
		
		.season-dropdown.open .dropdown-arrow {
		  transform: rotate(180deg);
		}
		
		.season-dropdown-menu {
		  position: absolute;
		  top: calc(100% + 5px);
		  left: 0;
		  width: 100%;
		  background-color: var(--card-bg-color);
		  border: 1px solid var(--border-color);
		  border-radius: 8px;
		  box-shadow: 0 8px 10px rgba(0, 0, 0, 0.15);
		  list-style: none;
		  padding: 0.5rem;
		  z-index: 10;
		  opacity: 0;
		  visibility: hidden;
		  transform: translateY(-10px);
		  transition: var(--transition);
		  max-height: 300px;
		  overflow-y: auto;
		}
		
		.season-dropdown.open .season-dropdown-menu {
		  opacity: 1;
		  visibility: visible;
		  transform: translateY(0);
		}
		
		.season-dropdown-menu img {
		  width: 24px;
		  height: 24px;
		  object-fit: contain;
		  margin-right: 8px;
		  vertical-align: middle;
		  border-radius: 4px;
		}
		
		.season-dropdown-menu a {
		  display: flex;
		  align-items: center;
		  padding: 0.75rem 1rem;
		  color: var(--text-color);
		  text-decoration: none;
		  border-radius: 6px;
		  transition: var(--transition);
		}
		
		.season-dropdown-menu a:hover {
		  background-color: var(--border-color-light);
		}
		
		.search-box {
		  position: relative;
		  max-width: 250px;
		}
		
		.search-input {
		  width: 100%;
		  padding: 0.75rem 1.25rem 0.75rem 40px;
		  border: 1px solid var(--border-color);
		  border-radius: 8px;
		  background-color: var(--card-bg-color);
		  color: var(--text-color);
		  transition: var(--transition);
		}
		
		.search-input:focus {
		  outline: none;
		  border-color: var(--primary-color);
		  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25);
		}
		
		.search-icon {
		  position: absolute;
		  left: 12px;
		  top: 50%;
		  transform: translateY(-50%);
		  color: var(--text-color-light);
		}
		
		.export-btn {
		  background-color: var(--primary-color);
		  color: white;
		  border: none;
		  padding: 0.3rem 0.6rem;
		  border-radius: 6px;
		  cursor: pointer;
		  display: inline-flex;
		  align-items: center;
		  gap: 0.4rem;
		  transition: var(--transition);
		  white-space: nowrap;
		  font-size: 0.9rem;
		  width: auto !important;
		  max-width: fit-content;
		}
		
		.export-btn:hover {
		  background-color: var(--primary-hover);
		}
		
		/* --- LOADER --- */
		.loader {
		  position: fixed;
		  top: 50%;
		  left: 50%;
		  transform: translate(-50%, -50%);
		  border: 5px solid var(--border-color-light);
		  border-top: 5px solid var(--primary-color);
		  border-radius: 50%;
		  width: 50px;
		  height: 50px;
		  animation: spin 1s linear infinite;
		  z-index: 100;
		}
		
		@keyframes spin {
		  0% {
		    transform: translate(-50%, -50%) rotate(0deg);
		  }
		  
		  100% {
		    transform: translate(-50%, -50%) rotate(360deg);
		  }
		}
		
		/* --- DASHBOARD --- */
		.kpi-grid {
		  display: grid;
		  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
		  gap: 1.5rem;
		  margin-bottom: 2.5rem;
		  list-style: none;
		  padding: 0;
		}
		
		.kpi-card {
		  background-color: var(--card-bg-color);
		  padding: 1.5rem;
		  border-radius: 12px;
		  box-shadow: var(--shadow);
		  display: flex;
		  align-items: center;
		  gap: 1.5rem;
		  border-left: 4px solid var(--primary-color);
		  transition: var(--transition);
		}
		
		.kpi-card:hover {
		  transform: translateY(-5px);
		  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
		}
		
		.kpi-card-icon {
		  font-size: 2.5rem;
		  color: var(--primary-color);
		  opacity: 0.8;
		}
		
		.kpi-card-info .value {
		  font-size: 2rem;
		  font-weight: 700;
		  color: var(--text-color);
		  margin-bottom: 0.25rem;
		}
		
		.kpi-card-info .label {
		  font-size: 0.9rem;
		  color: var(--text-color-light);
		}
		
		.ranking-container {
		  background-color: var(--card-bg-color);
		  border-radius: 12px;
		  box-shadow: var(--shadow);
		  overflow: hidden;
		  margin-bottom: 2rem;
		}
		
		.ranking-header {
		  padding: 1rem;
		  display: flex;
		  justify-content: space-between;
		  align-items: center;
		  border-bottom: 1px solid var(--border-color-light);
		  flex-wrap: wrap;
		  gap: 1rem;
		}
		
		.ranking-title {
		  margin: 0;
		  font-size: 1.25rem;
		}
		
		.table-controls {
		  display: flex;
		  gap: 0.5rem;
		}
		
		.table-control-btn {
		  background: none;
		  border: 1px solid var(--border-color);
		  border-radius: 6px;
		  padding: 0.5rem;
		  cursor: pointer;
		  color: var(--text-color);
		  transition: var(--transition);
		}
		
		.table-control-btn:hover {
		  background-color: var(--border-color-light);
		}
		
		.ranking-table {
		  width: 100%;
		  border-collapse: collapse;
		}
		
		.ranking-table th,
		.ranking-table td {
		  padding: 1rem;
		  text-align: center;
		  border-bottom: 2px solid var(--border-color-light);
		  white-space: nowrap;
		}
		
		.table-wrapper {
		  overflow-x: auto;
		}
		
		.ranking-table thead th {
		  background-color: var(--border-color-light);
		  font-size: 0.8rem;
		  text-transform: uppercase;
		  font-weight: 600;
		  color: var(--text-color-light);
		  position: sticky;
		  top: 0;
		  user-select: none;
		}
		
		/* Linhas da tabela */
		.ranking-table tbody td {
		  border-right: 3px solid var(--border-color-light);
		}
		
		.ranking-table thead th:hover {
		  background-color: var(--border-color);
		}
		
		.ranking-table tbody tr {
		  transition: var(--transition);
		  cursor: pointer;
		}
		
		.ranking-table tbody tr.highlight,
		.ranking-table tbody tr:hover {
		  background-color: var(--border-color-light);
		}
		
		/* CÉLULA COMBINADA DE RANK E ESCUDO */
		/*.rank-crest-cell {
  display: flex;
  align-items: center;
  gap: 0.75rem; /* Espaçamento entre rank e escudo */
		/* padding-left: 0.75rem !important; /* Ajuste fino do padding */
		/* min-width: 100px;
} */
		
		
		.team-name-cell {
		  text-align: left !important;
		  font-weight: 600;
		}
		
		.team-crest {
		  width: 44px;
		  height: 44px;
		  object-fit: contain;
		  transition: var(--transition);
		}
		
		.rank-badge {
		  font-weight: 300;
		  font-size: 1.1rem;
		  text-align: center;
		  line-height: 1;
		}
		
		.progress-bar-container {
		  width: 100%;
		  min-width: 120px;
		  background-color: var(--border-color-light);
		  border-radius: 20px;
		  overflow: hidden;
		  height: 22px;
		  position: relative;
		}
		
		.progress-bar-fill {
		  height: 100%;
		  background-color: var(--success-color);
		  border-radius: 20px;
		  transition: width 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
		  width: 0%;
		}
		
		.progress-bar-label {
		  position: absolute;
		  top: 50%;
		  left: 50%;
		  transform: translate(-50%, -50%);
		  font-size: 0.8rem;
		  font-weight: 600;
		  color: white;
		  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
		}
		
		.stat-col {
		  text-align: center !important;
		}
		
		.form-guide {
		  display: flex;
		  gap: 4px;
		  justify-content: center;
		  align-items: center;
		}
		
		.form-guide .result {
		  width: 18px;
		  height: 18px;
		  border-radius: 50%;
		  display: inline-block;
		  font-size: 0.7rem;
		  line-height: 18px;
		  text-align: center;
		  font-weight: bold;
		  color: #fff;
		}
		
		.form-guide .result.win {
		  background-color: var(--result-win);
		}
		
		.form-guide .result.draw {
		  background-color: var(--result-draw);
		}
		
		.form-guide .result.loss {
		  background-color: var(--result-loss);
		}
		
		
		/* --- GRÁFICOS --- */
		.charts-container {
		  display: grid;
		  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
		  gap: 1.5rem;
		  margin-bottom: 2rem;
		  list-style: none;
		  padding: 0;
		}
		
		.chart-card {
		  background-color: var(--card-bg-color);
		  border-radius: 12px;
		  box-shadow: var(--shadow);
		  padding: 1.5rem;
		  display: flex;
		  flex-direction: column;
		}
		
		.chart-title {
		  margin-top: 0;
		  margin-bottom: 1rem;
		  font-size: 1.1rem;
		}
		
		.chart-placeholder {
		  flex: 1;
		  display: flex;
		  flex-direction: column;
		  align-items: center;
		  justify-content: center;
		  background-color: var(--border-color-light);
		  border-radius: 8px;
		  color: var(--text-color-light);
		  padding: 2rem;
		  text-align: center;
		  min-height: 250px;
		}
		
		.chart-icon {
		  font-size: 2rem;
		  margin-bottom: 1rem;
		  color: var(--primary-color);
		}
		
		.no-results {
		  text-align: center;
		  padding: 2rem;
		  color: var(--text-color-light);
		}
		
		/* --- RESPONSIVIDADE --- */
		@media (max-width: 768px) {
		  .controls-container {
		    flex-direction: column;
		    align-items: stretch;
		  }
		  
		  .controls-left {
		    width: 100%;
		  }
		  
		  .season-dropdown {
		    max-width: 100%;
		  }
		  
		  .search-box {
		    max-width: 100%;
		  }
		  
		  .kpi-grid {
		    grid-template-columns: 1fr;
		  }
		  
		  .charts-container {
		    grid-template-columns: 1fr;
		  }
		  
		  .ranking-header {
		    flex-direction: column;
		    align-items: flex-start;
		  }
		  
		  .table-controls {
		    width: 100%;
		    justify-content: space-between;
		  }
		}
		
		/* --- ANIMAÇÕES --- */
		@keyframes fadeIn {
		  from {
		    opacity: 0;
		    transform: translateY(10px);
		  }
		  
		  to {
		    opacity: 1;
		    transform: translateY(0);
		  }
		}
		
		.fade-in {
		  animation: fadeIn 0.5s ease forwards;
		}
		
		/* --- COLUNAS FIXAS (STICKY) --- */
		.ranking-table th:nth-child(1),
		.ranking-table td:nth-child(1) {
		  position: -webkit-sticky;
		  position: sticky;
		  z-index: 2;
		  left: 0;
		}
		
		.ranking-table td:nth-child(1) {
		  background-color: var(--card-bg-color);
		}
		
		.ranking-table thead th:nth-child(1) {
		  background-color: var(--border-color-light);
		}
		
		.ranking-table tbody tr:hover td:nth-child(1),
		.ranking-table tbody tr.highlight td:nth-child(1) {
		  background-color: var(--border-color-light);
		}
		
		/* --- SOMBRA ESTÁTICA --- */
		.ranking-container {
		  position: relative;
		}
		
		.ranking-container::after {
		  content: '';
		  position: absolute;
		  top: 59px;
		  bottom: 0;
		  left: 99px;
		  /* AJUSTADO PARA A NOVA LARGURA DA COLUNA */
		  width: 10px;
		  background: linear-gradient(to right, rgba(0, 0, 0, 0.2), transparent);
		  pointer-events: none;
		  opacity: 0;
		  transition: opacity 0.2s ease-in-out;
		  z-index: 3;
		  
		}
		
		.ranking-container.is-scrolled::after {
		  opacity: 1;
		}
		
		/* ============================================= */
		/*            ESTILOS DO MODAL                   */
		/* ============================================= */
		.modal-overlay {
		  position: fixed;
		  top: 0;
		  left: 0;
		  width: 100%;
		  height: 100%;
		  background-color: rgba(0, 0, 0, 0.6);
		  z-index: 1050;
		  display: none;
		  justify-content: center;
		  align-items: center;
		  opacity: 0;
		  transition: opacity 0.3s ease;
		}
		
		.modal-overlay.show {
		  display: flex;
		  opacity: 1;
		}
		
		.modal-content {
		  background-color: var(--card-bg-color);
		  color: var(--text-color);
		  border-radius: 12px;
		  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
		  width: 90%;
		  max-width: 600px;
		  max-height: 90vh;
		  display: flex;
		  flex-direction: column;
		  transform: scale(0.95);
		  transition: transform 0.3s ease;
		}
		
		.modal-overlay.show .modal-content {
		  transform: scale(1);
		}
		
		.modal-header {
		  display: flex;
		  justify-content: space-between;
		  align-items: center;
		  padding: 1rem 1.5rem;
		  border-bottom: 1px solid var(--border-color);
		}
		
		.modal-team-info {
		  display: flex;
		  align-items: center;
		  gap: 1rem;
		}
		
		.modal-team-crest {
		  width: 50px;
		  height: 50px;
		}
		
		.modal-team-name {
		  font-size: 1.5rem;
		  font-weight: bold;
		}
		
		.modal-close {
		  background: none;
		  border: none;
		  font-size: 2rem;
		  font-weight: 300;
		  color: var(--text-color);
		  cursor: pointer;
		}
		
		.modal-body {
		  padding: 1.5rem;
		  overflow-y: auto;
		}
		
		.modal-stats-grid {
		  display: grid;
		  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
		  gap: 1.5rem;
		  margin-bottom: 2rem;
		}
		
		.modal-stat {
		  text-align: center;
		  background-color: var(--border-color-light);
		  padding: 1rem;
		  border-radius: 8px;
		}
		
		.modal-stat-value {
		  font-size: 1.75rem;
		  font-weight: bold;
		  color: var(--primary-color);
		}
		
		.modal-stat-label {
		  font-size: 0.9rem;
		  color: var(--text-color-light);
		}
		
		.modal-matches-title {
		  margin-top: 0;
		  margin-bottom: 1rem;
		  border-bottom: 2px solid var(--primary-color);
		  padding-bottom: 0.5rem;
		  display: inline-block;
		}
		
		.modal-matches-list {
		  list-style: none;
		  padding: 0;
		  margin: 0;
		}
		
		.modal-match {
		  display: grid;
		  grid-template-columns: 1fr auto auto;
		  gap: 1rem;
		  align-items: center;
		  padding: 1rem;
		  border-bottom: 1px solid var(--border-color-light);
		}
		
		.modal-match:last-child {
		  border-bottom: none;
		}
		
		.match-teams {
		  font-weight: 600;
		  text-align: left;
		}
		
		.match-score {
		  font-weight: bold;
		  font-size: 1.1rem;
		  text-align: center;
		}
		
		.match-result-badge {
		  padding: 0.25rem 0.6rem;
		  border-radius: 15px;
		  font-size: 0.8rem;
		  font-weight: bold;
		  color: #fff;
		  min-width: 70px;
		  text-align: center;
		}
		
		.match-result-badge.win {
		  background-color: var(--result-win);
		}
		
		.match-result-badge.draw {
		  background-color: var(--result-draw);
		}
		
		.match-result-badge.loss {
		  background-color: var(--result-loss);
		}