/* La VARra Mundial - styles.css
   Paleta blanca + pastel: #FFFFFF como fondo principal, con #FFFDF4, #FFF2DE, #BFDDF0 y #8CC0EB como acentos.
   Generado desde el CSS actual cambiando solo colores; no se han tocado tamaños, layouts, grids, responsive ni JS/HTML. */

* {
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

body {
  margin: 0;
  line-height: 1.5;
  min-height: 100vh;
  background: #FFFFFF;
}

button, input {
  font: inherit;
}

button {
  cursor: pointer;
}

.hidden {
  display: none !important;
}

.container {
  width: min(100% - 32px, 1120px);
  margin: 0 auto;
}

.eyebrow {
  margin: 0 0 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.eyebrow.dark {
  opacity: 1;
}

.view {
  width: 100%;
}

.card {
  background: white;
  padding: 24px;
  margin-bottom: 20px;
}

.card h2, .card h3, .card h4 {
  margin-top: 0;
  margin-bottom: 12px;
}

.card h2 {
  font-size: 1.6rem;
}

.card h3 {
  font-size: 1.3rem;
}

.card h4 {
  font-size: 1.1rem;
}

.muted {
  color: #6C879A;
  margin-top: 0;
}

.auth-card {
  max-width: 480px;
  margin-inline: auto;
}

.login-logo-wrapper {
  display: flex;
  justify-content: center;
}

.login-logo {
  height: auto;
  display: block;
}

.form {
  display: grid;
  gap: 16px;
  margin-top: 24px;
}

.form-group {
  display: grid;
  gap: 8px;
}

label {
  font-weight: 700;
  color: #18364A;
}

input {
  width: 100%;
  min-height: 46px;
  padding: 12px 14px;
  border: 1px solid #BFDDF0;
  border-radius: 12px;
  background: white;
  color: #18364A;
  outline: none;
}

input:focus {
  border-color: #8CC0EB;
  box-shadow: 0 0 0 4px rgba(140, 192, 235, 0.12);
}

small {
  color: #6C879A;
}

.primary-button, .secondary-button, .nav-button {
  min-height: 46px;
  border: 0;
  font-weight: 800;
}

.primary-button {
  padding: 12px 18px;
}

.secondary-button {
  width: fit-content;
  border-radius: 999px;
  color: white;
  padding: 12px 18px;
  border: 1px solid rgba(255, 255, 255, 0.35);
}

.secondary-button:hover {
  background: rgba(255, 255, 255, 0.25);
}

.link-button {
  width: fit-content;
  border: 0;
  background: transparent;
  padding: 0;
  font-weight: 700;
  text-align: left;
}

.link-button:hover {
  text-decoration: underline;
}

.message {
  margin: 0;
  padding: 12px;
  font-weight: 700;
}

.app-shell {
  display: grid;
}

.app-topbar {
  border-radius: 22px;
  padding: 24px;
  box-shadow: 0 10px 25px rgba(24, 54, 74, 0.08);
}

.app-topbar h2 {
  margin: 0 0 8px;
}

.app-nav {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  box-shadow: 0 10px 25px rgba(24, 54, 74, 0.08);
}

.nav-button {
  flex: 0 0 auto;
  padding: 10px 16px;
  background: transparent;
}

.app-section {
  width: 100%;
}

.section-heading {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 16px;
}

.section-heading h3 {
  margin: 0 0 6px;
  font-size: 1.4rem;
}

.check-list {
  margin-bottom: 0;
}

.check-list li {
  margin-bottom: 8px;
}

.matches-list {
  display: grid;
}

.filters-card {
  display: grid;
  gap: 14px;
}

.filters-card h4 {
  margin-bottom: 0;
}

.matches-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.filter-button {
  border: 0;
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 800;
}

.empty-state-card {
  border: 1px dashed #BFDDF0;
  background: #FFFFFF;
}

.match-card {
  display: grid;
  gap: 16px;
}

.match-status {
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 800;
}

.table-card {
  overflow: hidden;
}

.table-wrapper {
  width: 100%;
  overflow-x: auto;
}

table {
  width: 100%;
  min-width: 560px;
}

th, td {
  padding: 14px 12px;
  border-bottom: 1px solid #BFDDF0;
  text-align: left;
}

th {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

tbody tr:last-child td {
  border-bottom: 0;
}

.profile-card {
  display: grid;
  gap: 14px;
}

.profile-row {
  display: grid;
  gap: 4px;
  padding: 14px;
  border: 1px solid #BFDDF0;
}

.profile-row span {
  font-weight: 700;
}

.profile-row strong {
  color: #18364A;
}

@media (min-width: 768px) {
  .main-content {
    padding: 40px 0 60px;
  }

  .card {
    padding: 32px;
  }

  .app-topbar {
    padding: 32px;
  }

  .profile-row {
    grid-template-columns: 220px 1fr;
    align-items: center;
  }
}

.prediction-form {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid #BFDDF0;
}

.prediction-title {
  margin: 0;
  font-weight: 800;
  color: #18364A;
}

.prediction-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.prediction-locked {
  padding: 14px;
  font-weight: 800;
}

.prediction-empty {
  padding: 14px;
  font-weight: 800;
}

.my-prediction-box {
  padding: 14px;
  font-weight: 800;
}

.public-predictions {
  display: grid;
  gap: 10px;
}

.public-prediction-row {
  display: grid;
  gap: 4px;
  padding: 12px;
  border-radius: 12px;
  background: #FFFFFF;
  border: 1px solid #BFDDF0;
}

.public-prediction-row strong {
  color: #18364A;
}

.public-prediction-row span {
  color: #4D7088;
}

.match-card-footer {
  display: grid;
  gap: 14px;
}

.match-result {
  padding: 14px;
  font-weight: 900;
}

@media (min-width: 768px) {
  .prediction-actions {
    flex-direction: row;
    align-items: center;
  }

  .prediction-actions .primary-button {
    width: fit-content;
  }

  .public-prediction-row {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
}

select {
  width: 100%;
  min-height: 46px;
  padding: 12px 14px;
  border: 1px solid #BFDDF0;
  border-radius: 12px;
  background: white;
  color: #18364A;
  outline: none;
  font: inherit;
}

select:focus {
  border-color: #8CC0EB;
  box-shadow: 0 0 0 4px rgba(140, 192, 235, 0.12);
}

.points-box {
  display: grid;
  gap: 8px;
  padding: 14px;
  font-weight: 800;
}

.points-breakdown {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
  color: #4F9BD2;
  font-weight: 700;
}

.public-prediction-details {
  display: grid;
  gap: 4px;
}

.public-prediction-points {
  font-weight: 900;
  color: #4F9BD2;
}

.match-extra-info {
  display: grid;
  gap: 6px;
  padding: 14px;
  border: 1px solid #BFDDF0;
  color: #4D7088;
}

#rankingSection td:nth-child(3), #rankingSection td:nth-child(4), #rankingSection td:nth-child(5), #rankingSection td:nth-child(6), #rankingSection td:nth-child(7), #rankingSection th:nth-child(3), #rankingSection th:nth-child(4), #rankingSection th:nth-child(5), #rankingSection th:nth-child(6), #rankingSection th:nth-child(7) {
  text-align: center;
}

.admin-grid {
  display: grid;
}

.admin-form-grid {
  display: grid;
  gap: 16px;
}

.checkbox-field {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 12px 14px;
  border: 1px solid #BFDDF0;
  font-weight: 800;
}

.checkbox-field input {
  width: auto;
  min-height: auto;
}

.admin-users-table {
  min-width: 980px;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 900;
  white-space: nowrap;
}

.status-yes {
  background: #BFDDF0;
  color: #4F9BD2;
}

.status-no {
  background: #FFF2DE;
  color: #7B3C3C;
}

.status-warning {
  background: #FFFFFF;
  color: #9B6A3C;
}

.admin-goals-editor {
  display: grid;
  gap: 10px;
  padding-top: 8px;
}

.admin-goals-editor h5 {
  margin: 0;
  font-size: 15px;
}

.admin-goal-selectors {
  display: grid;
  gap: 10px;
}

.admin-goal-field {
  display: grid;
  gap: 6px;
  font-weight: 700;
  color: #2F5E78;
}

.admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-action-button {
  border: 1px solid #BFDDF0;
  padding: 7px 10px;
  font-size: 0.85rem;
  font-weight: 800;
}

.admin-action-button:hover {
  filter: brightness(0.96);
}

@media (min-width: 900px) {
  .admin-grid {
    grid-template-columns: 2fr 1fr;
    align-items: start;
  }

  .admin-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.profile-layout {
  display: grid;
  gap: 20px;
}

.profile-edit-grid {
  display: grid;
  gap: 16px;
}

#profileUpdateMessage.success-message {
  background: #BFDDF0;
  color: #4F9BD2;
}

#profileUpdateMessage.error-message {
  background: #FFF2DE;
  color: #7B3C3C;
}

#profileSection .profile-layout,
#profileSection .card,
#profileSection .profile-card,
#profileSection .profile-row,
#profileSection .profile-edit-grid,
#profileSection .form-group,
#profileSection input {
  min-width: 0;
}

#profileSection .profile-row strong {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (min-width: 900px) and (max-width: 1199px) {
  .profile-layout {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .profile-edit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .profile-layout {
    grid-template-columns: minmax(360px, 0.9fr) minmax(0, 1.7fr);
    align-items: start;
  }

  .profile-edit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #profileSection .profile-row {
    grid-template-columns: minmax(150px, 0.85fr) minmax(0, 1fr);
  }
}

#adminSyncSelectedMatchButton {
  margin-top: 10px;
}

:root {
  --varra-bg: #FFFFFF;
  --varra-bg-soft: #FFFFFF;
  --varra-card: #FFFFFF;
  --varra-card-soft: #FFFDF4;
  --varra-green: #8CC0EB;
  --varra-green-dark: #4F8FC7;
  --varra-lime: #BFDDF0;
  --varra-yellow: #FFF2DE;
  --varra-red: #C65F5F;
  --varra-blue: #8CC0EB;
  --varra-ink: #18364A;
  --varra-muted: #6C879A;
  --varra-border: #BFDDF0;
  --varra-shadow: 0 20px 45px rgba(24, 54, 74, 0.12);
  --varra-shadow-soft: 0 12px 28px rgba(24, 54, 74, 0.07);
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    sans-serif;
  color: var(--varra-ink);
  background: #FFFFFF;
}

.eyebrow {
  color: var(--varra-lime);
  opacity: 1;
  font-size: 0.76rem;
}

.eyebrow.dark {
  color: var(--varra-green-dark);
}

.main-content {
  padding-top: 28px;
}

.card {
  border: 1px solid rgba(191, 221, 240, 0.85);
  border-radius: 26px;
  box-shadow: var(--varra-shadow-soft);
}

.card:hover {
  box-shadow: var(--varra-shadow);
}

.auth-card {
  position: relative;
  overflow: hidden;
}

.auth-card::before, .app-topbar::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: linear-gradient(90deg, #8CC0EB, #BFDDF0, #FFF2DE);
}

.auth-card h2 {
  font-size: clamp(1.8rem, 5vw, 2.5rem);
  letter-spacing: -0.04em;
}

label {
  font-size: 0.92rem;
}

input, select {
  min-height: 50px;
  border-radius: 16px;
  border-color: #BFDDF0;
  background: #FFFFFF;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

input:hover, select:hover {
  background: #FFFFFF;
  border-color: #8CC0EB;
}

input:focus, select:focus {
  border-color: var(--varra-green);
  box-shadow: 0 0 0 4px rgba(140, 192, 235, 0.15);
}

#adminSection select,
#adminSection .admin-goal-player-select {
  width: 100%;
  min-height: 50px;
  box-sizing: border-box;
  border: 1.5px solid #BFDDF0;
  border-radius: 16px;
  background: #FFFFFF;
  color: #18364A;
  font: inherit;
  font-weight: 800;
  padding: 0 12px;
  outline: none;
  box-shadow: inset 0 1px 2px rgba(24, 54, 74, 0.04);
}

#adminSection select:hover,
#adminSection .admin-goal-player-select:hover {
  background: #FFFFFF;
  border-color: #8CC0EB;
}

#adminSection select:focus,
#adminSection .admin-goal-player-select:focus {
  background: #FFFFFF;
  border-color: #8CC0EB;
  box-shadow:
    0 0 0 4px rgba(140, 192, 235, 0.16),
    inset 0 1px 2px rgba(24, 54, 74, 0.04);
}

#adminSection .admin-native-select {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 1px;
  opacity: 0;
  pointer-events: none;
}

#adminSection .admin-select-picker {
  position: relative;
  width: 100%;
}

#adminSection .admin-select-trigger {
  width: 100%;
  min-height: 50px;
  border: 1.5px solid #BFDDF0;
  border-radius: 16px;
  background: #FFFFFF;
  color: #18364A;
  font: inherit;
  font-weight: 800;
  padding: 0 12px;
  box-shadow: inset 0 1px 2px rgba(24, 54, 74, 0.04);
}

#adminSection .admin-select-picker.is-open .admin-select-trigger {
  background: #FFFFFF;
  border-color: #8CC0EB;
  box-shadow:
    0 0 0 4px rgba(140, 192, 235, 0.16),
    inset 0 1px 2px rgba(24, 54, 74, 0.04);
}

#adminSection .admin-select-dropdown {
  display: none;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid #BFDDF0;
  background: #FFF2DE;
  box-shadow: 0 18px 38px rgba(23, 51, 73, 0.16);
  overflow: hidden;
}

#adminSection .admin-select-picker.is-open .admin-select-dropdown {
  display: block;
}

#adminSection .admin-select-option-list {
  display: grid;
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px;
}

#adminSection .admin-select-option {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid #BFDDF0;
  border-radius: 14px;
  background: #FFFFFF;
  color: #18364A;
  font: inherit;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
  transition:
    background 0.16s ease,
    border-color 0.16s ease,
    transform 0.16s ease;
}

#adminSection .admin-select-option:hover,
#adminSection .admin-select-option.is-selected {
  background: #BFDDF0;
  border-color: #8CC0EB;
  color: #173349;
}

#adminSection .admin-select-option:active {
  transform: scale(0.99);
}

#adminSection .admin-select-option-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 999px;
  background: #8CC0EB;
}

#adminSection .admin-select-option-text {
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.25;
}

#adminSyncDate,
#adminManageKickoffAt {
  width: 100%;
  min-height: 50px;
  box-sizing: border-box;
  border: 1.5px solid #BFDDF0;
  border-radius: 16px;
  background: #FFFFFF;
  color: #18364A;
  font: inherit;
  font-weight: 800;
  padding: 0 12px;
  outline: none;
  box-shadow: inset 0 1px 2px rgba(24, 54, 74, 0.04);
  cursor: pointer;
}

#adminSyncDate.admin-native-date-input,
#adminManageKickoffAt.admin-native-date-input {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 1px;
  opacity: 0;
  pointer-events: none;
}

#adminSyncDate {
  margin-bottom: 12px;
}

#adminSection .admin-date-picker {
  position: relative;
  width: 100%;
}

#adminSection .admin-date-picker[data-admin-date-picker="adminSyncDate"] {
  margin-bottom: 12px;
}

#adminSection .admin-date-trigger {
  width: 100%;
  min-height: 50px;
  box-sizing: border-box;
  border: 1.5px solid #BFDDF0;
  border-radius: 16px;
  background: #FFFFFF;
  color: #18364A;
  font: inherit;
  font-weight: 800;
  padding: 0 12px;
  outline: none;
  box-shadow: inset 0 1px 2px rgba(24, 54, 74, 0.04);
  cursor: pointer;
}

#adminSection .admin-date-picker.is-open .admin-date-trigger {
  border-color: #8CC0EB;
  box-shadow:
    0 0 0 4px rgba(140, 192, 235, 0.16),
    inset 0 1px 2px rgba(24, 54, 74, 0.04);
}

#adminSection .admin-date-dropdown {
  display: none;
  padding: 14px;
  margin-top: 8px;
  border-radius: 18px;
  border: 1px solid #BFDDF0;
  background: #FFF2DE;
  box-shadow: 0 18px 38px rgba(23, 51, 73, 0.16);
  overflow: hidden;
  z-index: 20;
}

#adminSection .admin-date-picker.is-open .admin-date-dropdown {
  display: block;
}

#adminSection .admin-date-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

#adminSection .admin-date-month-label {
  color: #18364A;
  font-weight: 900;
  text-align: center;
}

#adminSection .admin-date-nav-button {
  width: 38px;
  height: 38px;
  border: 1px solid #BFDDF0;
  border-radius: 999px;
  background: #FFFFFF;
  color: #18364A;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

#adminSection .admin-date-nav-button:hover {
  background: #BFDDF0;
  border-color: #8CC0EB;
}

#adminSection .admin-date-weekdays,
#adminSection .admin-date-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

#adminSection .admin-date-weekday {
  color: #5E7588;
  font-size: 0.72rem;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
}

#adminSection .admin-date-day {
  min-height: 38px;
  border: 1px solid #BFDDF0;
  border-radius: 12px;
  background: #FFFFFF;
  color: #18364A;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 850;
  cursor: pointer;
}

#adminSection .admin-date-day:hover,
#adminSection .admin-date-day.is-selected {
  background: #BFDDF0;
  border-color: #8CC0EB;
}

#adminSection .admin-date-day.is-muted {
  opacity: 0.42;
}

#adminSection .admin-date-time-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #BFDDF0;
}

#adminSection .admin-date-time-row input {
  width: 100%;
  min-height: 42px;
  border: 1px solid #BFDDF0;
  border-radius: 14px;
  background: #FFFFFF;
  color: #18364A;
  font: inherit;
  font-weight: 850;
  text-align: center;
}

#adminSection .admin-date-time-separator {
  color: #18364A;
  font-weight: 900;
}

#adminSection .admin-date-apply-button {
  width: 100%;
  min-height: 42px;
  margin-top: 12px;
  border: 1px solid #BFDDF0;
  border-radius: 999px;
  background: #FFFFFF;
  color: #18364A;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

#adminSection .admin-date-apply-button:hover {
  background: #BFDDF0;
  border-color: #8CC0EB;
}

.primary-button {
  min-height: 50px;
  border-radius: 999px;
  background: linear-gradient(135deg, #8CC0EB, #BFDDF0 58%, #8CC0EB);
  color: #FFFFFF;
  box-shadow: 0 12px 24px rgba(140, 192, 235, 0.24);
  transition: transform 0.14s ease, box-shadow 0.14s ease, filter 0.14s ease;
}

.primary-button:hover {
  background: linear-gradient(135deg, #4F8FC7, #8CC0EB 58%, #BFDDF0);
  transform: translateY(-1px);
  box-shadow: 0 16px 30px rgba(140, 192, 235, 0.3);
}

.primary-button:active {
  transform: translateY(0);
}

.secondary-button {
  backdrop-filter: blur(12px);
  background: rgba(255, 255, 255, 0.1);
}

.link-button {
  color: var(--varra-green-dark);
}

.message {
  border-radius: 16px;
  border: 1px solid transparent;
}

.success-message {
  background: #FFFFFF;
  color: #4F9BD2;
  border-color: #BFDDF0;
}

.error-message {
  background: #FFF2DE;
  color: #C65F5F;
  border-color: #FFF2DE;
}

.app-shell {
  gap: 22px;
}

.app-topbar {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(191, 221, 240, 0.65);
  background: radial-gradient(circle at right top, rgba(191, 221, 240, 0.28), transparent 22rem),
    linear-gradient(135deg, #FFFFFF, #FFFDF4);
}

.app-topbar h2 {
  font-size: clamp(1.8rem, 4vw, 2.45rem);
  letter-spacing: -0.05em;
}

.app-nav {
  position: sticky;
  top: 10px;
  z-index: 20;
  border: 1px solid rgba(191, 221, 240, 0.72);
  border-radius: 24px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(16px);
}

.nav-button {
  border-radius: 18px;
  color: #4D7088;
  transition: transform 0.14s ease, background 0.14s ease, color 0.14s ease;
}

.nav-button:hover {
  background: #FFFFFF;
  color: var(--varra-green-dark);
}

.nav-button.active {
  background: #4F8FC7;
  color: #FFFFFF;
  box-shadow: inset 0 0 0 1px rgba(191, 221, 240, 0.22);
}

.check-list {
  list-style: none;
  padding-left: 0;
}

.check-list li {
  position: relative;
  padding-left: 30px;
}

.check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: -1px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #BFDDF0;
  color: #4F9BD2;
  font-size: 0.82rem;
  font-weight: 1000;
}

.filters-card {
  background: linear-gradient(135deg, rgba(24, 54, 74, 0.02), rgba(140, 192, 235, 0.05)),
    #FFFFFF;
}

.filter-button {
  min-height: 42px;
  background: #FFFFFF;
  color: #2F5E78;
}

.filter-button:hover {
  background: #BFDDF0;
  color: #4F9BD2;
}

.filter-button.active {
  background: #4F8FC7;
  color: #FFFFFF;
}

.matches-list {
  gap: 20px;
}

.match-card {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
}

.match-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: linear-gradient(90deg, #8CC0EB, #BFDDF0);
}

.match-status {
  border: 1px solid currentColor;
}

.status-open {
  background: #FFFFFF;
  color: #4F9BD2;
}

.status-closed {
  background: #FFFFFF;
  color: #9B6A3C;
}

.status-finished {
  background: #FFFFFF;
  color: #4F9BD2;
}

.match-extra-info {
  border-radius: 18px;
  background: #FFFFFF;
}

.prediction-form {
  border-radius: 22px;
  background: radial-gradient(circle at top right, rgba(191, 221, 240, 0.18), transparent 18rem),
    #FFFDF4;
}

.prediction-title {
  font-size: 1.08rem;
}

.points-box {
  border-radius: 18px;
  background: #FFFFFF;
  color: #4F9BD2;
  border: 1px solid #BFDDF0;
}

.prediction-locked {
  border-radius: 18px;
  background: #FFFFFF;
  color: #9B6A3C;
  border: 1px solid #FFFDF4;
}

.prediction-empty {
  border-radius: 18px;
  background: #FFF2DE;
  color: #C65F5F;
  border: 1px solid #FFF2DE;
}

.my-prediction-box {
  border-radius: 18px;
  background: #FFFFFF;
  color: #4F9BD2;
  border: 1px solid #BFDDF0;
}

.match-result {
  border-radius: 18px;
  background: #4F8FC7;
  color: #FFFFFF;
}

.table-card {
  border-radius: 28px;
}

table {
  border-collapse: separate;
  border-spacing: 0;
}

th {
  background: #FFFFFF;
  color: #4D7088;
  font-size: 0.78rem;
}

tbody tr {
  transition: background 0.12s ease;
}

tbody tr:hover {
  background: #FFFFFF;
}

#rankingSection tbody tr:nth-child(1) td:first-child::after {
  content: " 🏆";
}

#rankingSection tbody tr:nth-child(2) td:first-child::after {
  content: " 🥈";
}

#rankingSection tbody tr:nth-child(3) td:first-child::after {
  content: " 🥉";
}

#rankingSection td:nth-child(3) strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #4F8FC7;
  color: #FFFFFF;
}

.profile-row {
  border-radius: 18px;
  background: #FFFFFF;
}

.profile-row span {
  color: var(--varra-green-dark);
}

.admin-grid {
  gap: 22px;
}

#adminSection > .card, .admin-grid > .card {
  border-radius: 28px;
}

#adminSection .card h4 {
  letter-spacing: -0.02em;
}

.checkbox-field {
  border-radius: 16px;
  background: #FFFFFF;
}

.status-pill {
  border: 1px solid currentColor;
}

.admin-action-button {
  min-height: 38px;
  border-radius: 999px;
}

.admin-action-button.neutral {
  background: #FFFFFF;
  color: #4F9BD2;
}

.admin-action-button.warning {
  background: #FFFFFF;
  color: #9B6A3C;
}

@media (min-width: 768px) {
  .main-content {
    padding-top: 44px;
  }

  .auth-card {
    max-width: 580px;
  }
}

@media (max-width: 767px) {
  .container {
    width: min(100% - 22px, 1120px);
  }

  .card {
    padding: 20px;
    border-radius: 22px;
  }

  .app-nav {
    border-radius: 20px;
  }

  .nav-button {
    min-height: 42px;
    padding: 9px 13px;
  }

  .section-heading {
    display: block;
  }

  th, td {
    padding: 12px 10px;
  }
}

.home-menu-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.home-menu-panel {
  position: relative;
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: radial-gradient(circle at center 74px, rgba(140, 192, 235, 0.08) 0, rgba(140, 192, 235, 0.08) 44px, transparent 45px),
    #FFFFFF;
  color: #18364A;
  text-align: center;
  cursor: pointer;
  transition: transform 0.16s ease,
    box-shadow 0.16s ease,
    border-color 0.16s ease,
    background 0.16s ease;
}

.home-menu-panel::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid transparent;
  pointer-events: none;
  transition: border-color 0.16s ease;
}

.home-menu-panel:hover {
  background: radial-gradient(circle at center 74px, rgba(191, 221, 240, 0.24) 0, rgba(191, 221, 240, 0.24) 44px, transparent 45px),
    linear-gradient(180deg, #FFFFFF, #FFFDF4);
}

.home-menu-panel:hover::before {
  border-color: rgba(140, 192, 235, 0.16);
}

.home-panel-icon {
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(24, 54, 74, 0.08);
  line-height: 1;
}

.home-panel-title {
  display: block;
  margin-top: 4px;
  color: #4F9BD2;
  font-weight: 1000;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.home-panel-text {
  display: block;
  color: #6C879A;
}

.home-panel-stat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
  border-radius: 999px;
  background: #FFFFFF;
  color: #2F5E78;
  font-weight: 800;
}

.home-panel-stat strong {
  margin-right: 4px;
  color: #18364A;
}

.home-menu-panel.hidden {
  display: none;
}

@media (max-width: 767px) {
}

.matches-day-block {
  display: grid;
  gap: 14px;
  margin-bottom: 34px;
}

.matches-day-heading {
  position: sticky;
  top: 78px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 6px 0 4px;
  padding: 4px 0;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(10px);
}

.matches-day-heading span {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 16px;
  border-radius: 999px;
  background: #4F8FC7;
  color: #FFFFFF;
  font-size: 0.95rem;
  font-weight: 1000;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.matches-day-heading::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(24, 54, 74, 0.28), transparent);
}

.match-row-card {
  overflow: hidden;
  border: 2px solid #18364A;
  box-shadow: 0 14px 28px rgba(24, 54, 74, 0.12);
  transition: transform 0.16s ease,
    box-shadow 0.16s ease,
    border-color 0.16s ease;
}

.match-row-card:hover {
  transform: translateY(-2px);
  border-color: #4F9BD2;
  box-shadow: 0 20px 42px rgba(24, 54, 74, 0.18);
}

.match-row-summary {
  width: 100%;
  border: 0;
  background: linear-gradient(90deg, rgba(140, 192, 235, 0.05), transparent 28%, transparent 72%, rgba(140, 192, 235, 0.05)),
    #FFFFFF;
  color: #18364A;
  cursor: pointer;
  text-align: inherit;
}

.match-row-summary:hover {
  background: radial-gradient(circle at center, rgba(191, 221, 240, 0.18), transparent 18rem),
    #FFFFFF;
}

.match-row-flag {
  flex: 0 0 auto;
}

.match-row-details {
  display: none;
  padding: 22px 26px 26px;
  border-top: 1px solid #BFDDF0;
  background: radial-gradient(circle at top, rgba(191, 221, 240, 0.12), transparent 16rem),
    #FFFDF4;
}

.match-row-card.is-open .match-row-details {
  display: block;
}

.match-row-card.is-open .match-row-summary {
  background: radial-gradient(circle at center, rgba(191, 221, 240, 0.24), transparent 18rem),
    linear-gradient(180deg, #FFFFFF, #FFFDF4);
}

.match-row-details .match-extra-info {
  margin-top: 20px;
}

.match-row-details .match-card-footer {
  margin-top: 16px;
}

@media (max-width: 900px) {
  .match-row-summary {
    grid-template-columns: 1fr;
    gap: 20px;
    min-height: auto;
    padding: 24px 20px;
  }

  .match-row-center {
    order: 3;
  }

  .match-row-details {
    padding: 0 18px 22px;
  }

  .matches-day-heading {
    top: 70px;
  }
}

@media (max-width: 520px) {
  .match-row-card {
    border-width: 1px;
  }

  .match-row-flag {
    width: 58px;
    height: 58px;
  }

  .match-row-flag img {
    width: 38px;
    height: 38px;
  }

  .match-row-hour {
    font-size: 1.35rem;
  }
}

@media (max-width: 767px) {
  .matches-list {
    gap: 12px;
  }

  .matches-day-block {
    gap: 12px;
    margin-bottom: 26px;
  }

  .matches-day-heading {
    top: 66px;
    margin: 4px 0 2px;
  }

  .matches-day-heading span {
    min-height: 34px;
    padding: 7px 14px;
    font-size: 0.82rem;
  }

  .match-row-card {
    box-shadow: 0 10px 22px rgba(24, 54, 74, 0.1);
  }

  .match-row-card:hover {
    transform: none;
  }

  .match-row-details .match-extra-info {
    margin-top: 12px;
  }

  .match-row-details .match-card-footer {
    margin-top: 12px;
  }
}

@media (max-width: 430px) {
}

@media (max-width: 767px) {
  .match-row-summary {
    gap: 8px;
    align-items: center;
  }

  .match-row-flag {
    box-shadow: inset 0 0 0 3px #FFFFFF;
  }

  .match-row-center {
    order: 0;
    margin-top: 0;
  }

  .match-row-hour {
    line-height: 1;
  }

  .match-row-summary .match-status {
    min-height: 18px;
    padding: 2px 7px;
    font-size: 0.52rem;
    line-height: 1;
  }

  .match-row-details {
    padding: 0 10px 12px;
  }
}

@media (max-width: 430px) {
  .match-row-summary .match-status {
    font-size: 0.48rem;
    padding: 2px 6px;
  }
}

.match-row-card {
  border-width: 3px;
}

.match-row-card.status-open {
  border-color: #8CC0EB;
  box-shadow: 0 0 0 2px rgba(140, 192, 235, 0.14),
    0 12px 28px rgba(140, 192, 235, 0.22);
}

.match-row-card.status-closed {
  border-color: #8CC0EB;
  box-shadow: 0 0 0 2px rgba(140, 192, 235, 0.16),
    0 12px 28px rgba(140, 192, 235, 0.22);
}

.match-row-card.status-finished {
  border-color: #8CC0EB;
  box-shadow: 0 0 0 2px rgba(140, 192, 235, 0.15),
    0 12px 28px rgba(140, 192, 235, 0.22);
}

.match-row-card.is-toggle-disabled {
  cursor: not-allowed;
}

.match-row-card.is-toggle-disabled .match-row-summary {
  cursor: not-allowed;
}

.match-row-card.is-toggle-disabled:hover {
  transform: none;
}

.match-row-countdown {
  text-transform: uppercase;
}

@media (max-width: 767px) {
  .match-row-card {
    border-width: 2px;
  }

  .match-row-summary {
    grid-template-columns: minmax(0, 1fr) 82px minmax(0, 1fr);
    min-height: 74px;
    padding: 8px 8px;
  }

  .match-row-center .match-status {
    font-size: 0.46rem;
  }

  .match-row-hour {
    font-size: 0.74rem;
  }

  .match-row-countdown {
    min-height: 16px;
    padding: 2px 5px;
    font-size: 0.42rem;
    letter-spacing: 0.01em;
  }

  .match-row-flag {
    width: 24px;
    height: 24px;
  }

  .match-row-flag img {
    width: 16px;
    height: 16px;
  }
}

@media (max-width: 430px) {
  .match-row-flag {
    width: 22px;
    height: 22px;
  }

  .match-row-flag img {
    width: 14px;
    height: 14px;
  }
}

.match-row-summary {
  display: grid;
}

.match-row-side {
  display: flex;
  align-items: center;
}

.match-row-side-home {
  justify-content: flex-end;
  text-align: right;
}

.match-row-side-away {
  justify-content: flex-start;
  text-align: left;
}

.match-row-side-name {
  display: block;
  min-width: 0;
  color: #18364A;
  font-weight: 950;
  letter-spacing: -0.03em;
  word-break: break-word;
}

.match-row-flag {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 999px;
  background: #FFFFFF;
  border: 1px solid #BFDDF0;
  box-shadow: inset 0 0 0 3px #FFFFFF;
}

.match-row-flag img {
  display: block;
  width: 19px;
  height: 19px;
  object-fit: contain;
}

.match-row-goals {
  display: grid;
  place-items: center;
  min-height: 24px;
  color: #18364A;
  font-weight: 1000;
  line-height: 1;
  letter-spacing: -0.04em;
}

.match-row-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.match-row-center .match-status {
  border-radius: 999px;
}

.match-row-hour {
  color: #18364A;
  font-weight: 1000;
  letter-spacing: -0.03em;
}

.match-row-countdown {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #FFFFFF;
  color: #2F5E78;
  font-weight: 900;
  letter-spacing: 0.01em;
}

@media (min-width: 768px) {
  .match-row-flag {
    width: 44px;
    height: 44px;
  }

  .match-row-flag img {
    width: 28px;
    height: 28px;
  }

  .match-row-countdown {
    min-height: 17px;
    padding: 2px 7px;
  }
}

@media (max-width: 390px) {
  .match-row-summary {
    grid-template-columns: minmax(62px, 1fr)
      26px
      18px
      74px
      18px
      26px
      minmax(62px, 1fr);
    gap: 4px;
    min-height: 76px;
    padding: 7px 6px;
  }

  .match-row-side-name {
    font-size: 0.66rem;
  }

  .match-row-goals {
    font-size: 0.82rem;
  }

  .match-row-center .match-status {
    font-size: 0.4rem;
    padding: 1px 5px;
  }

  .match-row-hour {
    font-size: 0.66rem;
  }

  .match-row-countdown {
    font-size: 0.34rem;
    padding: 1px 4px;
  }
}

.match-row-summary {
  grid-template-columns: minmax(0, 1fr)
    30px
    24px
    88px
    24px
    30px
    minmax(0, 1fr);
  gap: 6px;
  align-items: center;
  min-height: 74px;
  padding: 8px 12px;
}

.match-row-side {
  min-width: 0;
}

.match-row-side-home, .match-row-side-away {
  justify-content: center;
  text-align: center;
}

.match-row-side-name {
  width: 100%;
  max-width: 100%;
  font-size: 0.72rem;
  line-height: 1;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}

.match-row-goals {
  font-size: 1rem;
}

.match-row-center {
  gap: 2px;
}

.match-row-center .match-status {
  font-size: 0.34rem;
  letter-spacing: 0;
}

.match-row-hour {
  font-size: 0.98rem;
  line-height: 1;
}

.match-row-countdown {
  min-height: 16px;
  padding: 2px 6px;
  font-size: 0.42rem;
  line-height: 1;
  white-space: nowrap;
}

.match-row-countdown.has-prediction {
  background: #BFDDF0;
  color: #4F9BD2;
}

@media (min-width: 768px) {
  .match-row-summary {
    grid-template-columns: minmax(0, 1fr)
      42px
      34px
      116px
      34px
      42px
      minmax(0, 1fr);
    gap: 8px;
    min-height: 88px;
    padding: 10px 16px;
  }

  .match-row-side-name {
    font-size: 0.92rem;
  }

  .match-row-goals {
    font-size: 1.28rem;
  }

  .match-row-center .match-status {
    min-height: 14px;
    padding: 1px 6px;
    font-size: 0.4rem;
  }

  .match-row-hour {
    font-size: 1.14rem;
  }

  .match-row-countdown {
    font-size: 0.48rem;
  }
}

@media (max-width: 430px) {
  .match-row-summary {
    grid-template-columns: minmax(0, 1fr)
      26px
      20px
      78px
      20px
      26px
      minmax(0, 1fr);
    gap: 4px;
    min-height: 68px;
    padding: 7px 8px;
  }

  .match-row-side-name {
    font-size: 0.64rem;
  }

  .match-row-goals {
    font-size: 0.88rem;
  }

  .match-row-center .match-status {
    font-size: 0.31rem;
  }

  .match-row-hour {
    font-size: 0.9rem;
  }

  .match-row-countdown {
    min-height: 14px;
    padding: 1px 4px;
    font-size: 0.36rem;
  }
}

.match-row-center .match-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 17px;
  padding: 2px 7px 3px;
  line-height: 1;
  text-align: center;
}

.match-row-hour {
  margin-top: 1px;
  margin-bottom: 1px;
}

.match-row-countdown {
  margin-top: 1px;
}

@media (max-width: 767px) {
  .match-row-center {
    gap: 4px;
  }

  .match-row-center .match-status {
    min-height: 15px;
    padding: 2px 6px 3px;
  }
}

@media (max-width: 430px) {
  .match-row-center .match-status {
    min-height: 14px;
    padding: 2px 5px 3px;
  }
}

@media (max-width: 767px) {
  .filters-card {
    padding: 18px 16px;
  }

  .filters-card h4 {
    margin-bottom: 12px;
    font-size: 1rem;
  }

  .filter-button {
    min-height: 34px;
    padding: 6px 8px;
    border-radius: 999px;
    font-size: 0.76rem;
    line-height: 1;
    white-space: nowrap;
  }

  .filter-button[data-match-filter="all"] {
    grid-column: span 2;
  }

  .filter-button[data-match-filter="open"] {
    grid-column: span 2;
  }

  .filter-button[data-match-filter="closed"] {
    grid-column: span 2;
  }

  .filter-button[data-match-filter="live"] {
    grid-column: span 2;
  }

  .filter-button[data-match-filter="finished"] {
    grid-column: span 2;
  }

  .filter-button[data-match-filter="withPrediction"] {
    grid-column: 1 / span 5;
  }

  .filter-button[data-match-filter="withoutPrediction"] {
    grid-column: 6 / span 5;
  }
}

@media (max-width: 390px) {
  .filters-card {
    padding: 16px 14px;
  }

  .filter-button {
    min-height: 32px;
    padding: 5px 6px;
    font-size: 0.68rem;
  }
}

@media (max-width: 767px) {
  .matches-filters {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 7px;
  }

  .matches-filters .filter-button {
    min-height: 31px;
    padding: 5px 5px;
    border-radius: 999px;
    font-size: 0.62rem;
    line-height: 1;
    white-space: nowrap;
  }

  .matches-filters .filter-button[data-match-filter="all"], .matches-filters .filter-button[data-match-filter="open"], .matches-filters .filter-button[data-match-filter="closed"], .matches-filters .filter-button[data-match-filter="live"], .matches-filters .filter-button[data-match-filter="finished"] {
    grid-column: span 2;
  }

  .matches-filters .filter-button[data-match-filter="with-prediction"] {
    grid-column: 1 / span 5;
  }

  .matches-filters .filter-button[data-match-filter="without-prediction"] {
    grid-column: 6 / span 5;
  }
}

@media (max-width: 390px) {
  .matches-filters {
    gap: 6px;
  }

  .matches-filters .filter-button {
    min-height: 29px;
    padding: 4px 4px;
    font-size: 0.57rem;
  }
}

#rankingSection tbody tr:nth-child(1) td:first-child::after, #rankingSection tbody tr:nth-child(2) td:first-child::after, #rankingSection tbody tr:nth-child(3) td:first-child::after {
  content: none;
}

#rankingSection td:nth-child(1), #rankingSection th:nth-child(1) {
  width: 42px;
  min-width: 42px;
  max-width: 42px;
  text-align: center;
}

#rankingSection td:nth-child(2), #rankingSection th:nth-child(2) {
  width: 118px;
  min-width: 118px;
  max-width: 118px;
}

#rankingSection td:nth-child(3), #rankingSection th:nth-child(3) {
  width: 68px;
  min-width: 68px;
  max-width: 68px;
}

#rankingSection td:nth-child(4), #rankingSection th:nth-child(4), #rankingSection td:nth-child(5), #rankingSection th:nth-child(5), #rankingSection td:nth-child(6), #rankingSection th:nth-child(6), #rankingSection td:nth-child(7), #rankingSection th:nth-child(7) {
  width: 44px;
  min-width: 44px;
  max-width: 44px;
  text-align: center;
}

#rankingSection td:nth-child(2) {
  font-weight: 900;
}

#rankingSection tbody tr.ranking-position-1 td {
  background: #FFFFFF;
}

#rankingSection tbody tr.ranking-position-2 td {
  background: #FFFFFF;
}

#rankingSection tbody tr.ranking-position-3 td {
  background: #FFF2DE;
}

#rankingSection tbody tr.ranking-position-1 td:first-child, #rankingSection tbody tr.ranking-position-1 td:nth-child(2) {
  color: #9B6A3C;
}

#rankingSection tbody tr.ranking-position-2 td:first-child, #rankingSection tbody tr.ranking-position-2 td:nth-child(2) {
  color: #2F5E78;
}

#rankingSection tbody tr.ranking-position-3 td:first-child, #rankingSection tbody tr.ranking-position-3 td:nth-child(2) {
  color: #9B6A3C;
}

@media (max-width: 767px) {
  #rankingSection .table-wrapper {
    position: relative;
  }

  #rankingSection table {
    min-width: 500px;
  }

  #rankingSection th, #rankingSection td {
    padding: 8px 6px;
    font-size: 0.72rem;
  }

  #rankingSection th {
    font-size: 0.56rem;
  }

  #rankingSection th:nth-child(1), #rankingSection td:nth-child(1) {
    width: 34px;
    min-width: 34px;
    max-width: 34px;
    text-align: center;
  }

  #rankingSection th:nth-child(2), #rankingSection td:nth-child(2) {
    width: 104px;
    min-width: 104px;
    max-width: 104px;
  }

  #rankingSection th:nth-child(1), #rankingSection th:nth-child(2) {
    background: #FFFFFF;
  }

  #rankingSection tbody td:nth-child(1), #rankingSection tbody td:nth-child(2) {
    background: #FFFFFF;
  }

  #rankingSection tbody tr.ranking-position-1 td:nth-child(1), #rankingSection tbody tr.ranking-position-1 td:nth-child(2) {
    background: #FFFFFF;
  }

  #rankingSection tbody tr.ranking-position-2 td:nth-child(1), #rankingSection tbody tr.ranking-position-2 td:nth-child(2) {
    background: #FFFFFF;
  }

  #rankingSection tbody tr.ranking-position-3 td:nth-child(1), #rankingSection tbody tr.ranking-position-3 td:nth-child(2) {
    background: #FFF2DE;
  }

  #rankingSection td:nth-child(3), #rankingSection th:nth-child(3) {
    width: 58px;
    min-width: 58px;
    max-width: 58px;
  }

  #rankingSection td:nth-child(4), #rankingSection th:nth-child(4), #rankingSection td:nth-child(5), #rankingSection th:nth-child(5), #rankingSection td:nth-child(6), #rankingSection th:nth-child(6), #rankingSection td:nth-child(7), #rankingSection th:nth-child(7) {
    width: 38px;
    min-width: 38px;
    max-width: 38px;
  }

  #rankingSection td:nth-child(3) strong {
    min-width: 30px;
    padding: 3px 7px;
    font-size: 0.68rem;
  }
}

#rankingSection .table-card {
  padding: 0;
}

#rankingSection th, #rankingSection td {
  padding: 8px 6px;
  font-size: 0.72rem;
  line-height: 1.05;
  white-space: nowrap;
}

#rankingSection th {
  font-size: 0.55rem;
  letter-spacing: 0.04em;
}

#rankingSection th:nth-child(1), #rankingSection td:nth-child(1) {
  text-align: center;
}

#rankingSection td:nth-child(2) {
  overflow: hidden;
  text-overflow: ellipsis;
}

#rankingSection td:nth-child(3) strong {
  min-width: 28px;
  padding: 3px 7px;
  font-size: 0.66rem;
}

@media (max-width: 767px) {
}

@media (max-width: 430px) {
  #rankingSection table {
    min-width: 410px;
  }

  #rankingSection th, #rankingSection td {
    padding: 7px 5px;
    font-size: 0.68rem;
  }

  #rankingSection th {
    font-size: 0.5rem;
  }

  #rankingSection th:nth-child(1), #rankingSection td:nth-child(1) {
    width: 32px;
    min-width: 32px;
    max-width: 32px;
  }

  #rankingSection th:nth-child(2), #rankingSection td:nth-child(2) {
    width: 88px;
    min-width: 88px;
    max-width: 88px;
  }

  #rankingSection th:nth-child(2), #rankingSection td:nth-child(2) {
    left: 32px;
  }

  #rankingSection th:nth-child(3), #rankingSection td:nth-child(3) {
    width: 50px;
    min-width: 50px;
    max-width: 50px;
  }

  #rankingSection th:nth-child(4), #rankingSection td:nth-child(4), #rankingSection th:nth-child(5), #rankingSection td:nth-child(5), #rankingSection th:nth-child(6), #rankingSection td:nth-child(6), #rankingSection th:nth-child(7), #rankingSection td:nth-child(7) {
    width: 32px;
    min-width: 32px;
    max-width: 32px;
  }
}

#rankingSection {
  max-width: 100%;
  overflow-x: hidden;
}

#rankingSection .table-card {
  max-width: 100%;
  overflow: hidden;
  border-radius: 12px;
}

#rankingSection .table-wrapper {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: scroll;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
}

#rankingSection table {
  width: 540px;
  min-width: 540px;
  max-width: none;
}

#rankingSection th:nth-child(3), #rankingSection td:nth-child(3) {
  width: 74px;
  min-width: 74px;
  max-width: 74px;
  text-align: center;
}

#rankingSection th:nth-child(4), #rankingSection td:nth-child(4), #rankingSection th:nth-child(5), #rankingSection td:nth-child(5), #rankingSection th:nth-child(6), #rankingSection td:nth-child(6), #rankingSection th:nth-child(7), #rankingSection td:nth-child(7) {
  width: 58px;
  min-width: 58px;
  max-width: 58px;
  text-align: center;
}

@media (max-width: 767px) {
  #rankingSection th:nth-child(1), #rankingSection td:nth-child(1) {
    position: sticky;
    left: 0;
    z-index: 6;
  }

  #rankingSection th:nth-child(2), #rankingSection td:nth-child(2) {
    position: sticky;
    left: 34px;
    z-index: 6;
  }

  #rankingSection thead th:nth-child(1), #rankingSection thead th:nth-child(2) {
    z-index: 9;
    background: #FFFFFF;
  }
}

#rankingSection table {
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}

#rankingSection th, #rankingSection td {
  box-sizing: border-box;
}

#rankingSection th:nth-child(1), #rankingSection td:nth-child(1) {
  position: sticky;
  left: 0;
  z-index: 10;
  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  overflow: hidden;
}

#rankingSection th:nth-child(2), #rankingSection td:nth-child(2) {
  position: sticky;
  left: 34px;
  z-index: 10;
  width: 96px !important;
  min-width: 96px !important;
  max-width: 96px !important;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#rankingSection thead th:nth-child(1), #rankingSection thead th:nth-child(2) {
  z-index: 20;
  background: #FFFFFF;
}

#rankingSection tbody td:nth-child(1), #rankingSection tbody td:nth-child(2) {
  background-clip: padding-box;
}

#rankingSection th:nth-child(2), #rankingSection td:nth-child(2) {
  box-shadow: 8px 0 12px -12px rgba(24, 54, 74, 0.55);
}

#rankingSection tbody tr.ranking-position-1 td:nth-child(1), #rankingSection tbody tr.ranking-position-1 td:nth-child(2) {
  background: #FFFFFF !important;
}

#rankingSection tbody tr.ranking-position-2 td:nth-child(1), #rankingSection tbody tr.ranking-position-2 td:nth-child(2) {
  background: #FFFFFF !important;
}

#rankingSection tbody tr.ranking-position-3 td:nth-child(1), #rankingSection tbody tr.ranking-position-3 td:nth-child(2) {
  background: #FFF2DE !important;
}

#rankingSection tbody tr:not(.ranking-position-1):not(.ranking-position-2):not(.ranking-position-3) td:nth-child(1), #rankingSection tbody tr:not(.ranking-position-1):not(.ranking-position-2):not(.ranking-position-3) td:nth-child(2) {
  background: #FFFFFF !important;
}

#rankingSection th, #rankingSection td {
  position: static;
  left: auto;
}

#rankingSection .ranking-table-card {
  padding: 0;
  overflow: hidden;
  border-radius: 12px;
  max-width: 100%;
}

#rankingSection .ranking-table-wrapper {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

#rankingSection .ranking-table {
  width: 430px;
  min-width: 430px;
  max-width: 430px;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}

#rankingSection .ranking-table th,
#rankingSection .ranking-table td {
  box-sizing: border-box;
  height: 32px;
  padding: 6px 3px;
  border-bottom: 1px solid rgba(191, 221, 240, 0.72);
  font-size: 0.64rem;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background-clip: padding-box;
}

#rankingSection .ranking-table th {
  height: 30px;
  background: #FFFFFF;
  color: #4D7088;
  font-size: 0.5rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#rankingSection .ranking-table th:nth-child(1),
#rankingSection .ranking-table td:nth-child(1) {
  width: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  text-align: center;
}

#rankingSection .ranking-table th:nth-child(2),
#rankingSection .ranking-table td:nth-child(2) {
  width: 98px !important;
  min-width: 98px !important;
  max-width: 98px !important;
  text-align: left;
  font-weight: 900;
}

#rankingSection .ranking-table th:nth-child(3),
#rankingSection .ranking-table td:nth-child(3) {
  width: 58px !important;
  min-width: 58px !important;
  max-width: 58px !important;
  text-align: center;
}

#rankingSection .ranking-table th:nth-child(4),
#rankingSection .ranking-table td:nth-child(4),
#rankingSection .ranking-table th:nth-child(5),
#rankingSection .ranking-table td:nth-child(5),
#rankingSection .ranking-table th:nth-child(6),
#rankingSection .ranking-table td:nth-child(6),
#rankingSection .ranking-table th:nth-child(7),
#rankingSection .ranking-table td:nth-child(7),
#rankingSection .ranking-table th:nth-child(8),
#rankingSection .ranking-table td:nth-child(8) {
  width: 49px !important;
  min-width: 49px !important;
  max-width: 49px !important;
  text-align: center;
}

#rankingSection .ranking-table td:nth-child(3) strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  padding: 3px 7px;
  border-radius: 999px;
  background: #4F8FC7;
  color: #FFFFFF;
  font-size: 0.66rem;
}

#rankingSection tbody tr:nth-child(1) td:first-child::after,
#rankingSection tbody tr:nth-child(2) td:first-child::after,
#rankingSection tbody tr:nth-child(3) td:first-child::after {
  content: none !important;
}

#rankingSection .ranking-table tbody tr.ranking-position-1 td {
  background: #FFFFFF;
  color: #9B6A3C;
}

#rankingSection .ranking-table tbody tr.ranking-position-2 td {
  background: #FFFFFF;
  color: #2F5E78;
}

#rankingSection .ranking-table tbody tr.ranking-position-3 td {
  background: #FFF2DE;
  color: #9B6A3C;
}

@media (max-width: 767px) {
  #rankingSection .ranking-table th:nth-child(1),
  #rankingSection .ranking-table td:nth-child(1) {
    position: sticky !important;
    left: 0 !important;
    z-index: 20;
  }

  #rankingSection .ranking-table th:nth-child(2),
  #rankingSection .ranking-table td:nth-child(2) {
    position: sticky !important;
    left: 28px !important;
    z-index: 20;
    box-shadow: 10px 0 14px -16px rgba(24, 54, 74, 0.8);
  }

  #rankingSection .ranking-table thead th:nth-child(1),
  #rankingSection .ranking-table thead th:nth-child(2) {
    z-index: 40;
    background: #FFFFFF;
  }

  #rankingSection .ranking-table tbody tr:not(.ranking-position-1):not(.ranking-position-2):not(.ranking-position-3) td:nth-child(1),
  #rankingSection .ranking-table tbody tr:not(.ranking-position-1):not(.ranking-position-2):not(.ranking-position-3) td:nth-child(2) {
    background: #FFFFFF;
  }
}

@media (max-width: 767px) {
  #rankingSection .ranking-table th {
    font-size: 0.47rem;
    letter-spacing: 0.025em;
  }

  #rankingSection .ranking-table td:nth-child(3) strong {
    min-width: 24px;
    padding: 3px 5px;
    font-size: 0.62rem;
  }

  #rankingSection .ranking-user-cell {
    gap: 5px;
  }

  #rankingSection .ranking-user-avatar {
    width: 24px;
    height: 24px;
    font-size: 0.58rem;
  }
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

@media (min-width: 768px) {
  #rankingSection .ranking-table-wrapper {
    overflow-x: hidden;
  }

  #rankingSection .ranking-table {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    table-layout: fixed;
  }

  #rankingSection .ranking-table th:nth-child(1),
  #rankingSection .ranking-table td:nth-child(1) {
    width: 7% !important;
    min-width: 7% !important;
    max-width: 7% !important;
    text-align: center;
  }

  #rankingSection .ranking-table th:nth-child(2),
  #rankingSection .ranking-table td:nth-child(2) {
    width: 25% !important;
    min-width: 25% !important;
    max-width: 25% !important;
  }

  #rankingSection .ranking-table th:nth-child(3),
  #rankingSection .ranking-table td:nth-child(3) {
    width: 13% !important;
    min-width: 13% !important;
    max-width: 13% !important;
    text-align: center;
  }

  #rankingSection .ranking-table th:nth-child(4),
  #rankingSection .ranking-table td:nth-child(4),
  #rankingSection .ranking-table th:nth-child(5),
  #rankingSection .ranking-table td:nth-child(5),
  #rankingSection .ranking-table th:nth-child(6),
  #rankingSection .ranking-table td:nth-child(6),
  #rankingSection .ranking-table th:nth-child(7),
  #rankingSection .ranking-table td:nth-child(7),
  #rankingSection .ranking-table th:nth-child(8),
  #rankingSection .ranking-table td:nth-child(8) {
    width: 11% !important;
    min-width: 11% !important;
    max-width: 11% !important;
    text-align: center;
  }

  #rankingSection .ranking-table th,
  #rankingSection .ranking-table td {
    padding: 12px 10px;
    font-size: 0.82rem;
  }

  #rankingSection .ranking-table th {
    font-size: 0.66rem;
  }

  #rankingSection .ranking-table td:nth-child(3) strong {
    min-width: 36px;
    padding: 5px 10px;
    font-size: 0.78rem;
  }
}

#rankingSection .ranking-table-card, #rankingSection .ranking-table-card:hover, #rankingSection .table-card, #rankingSection .table-card:hover, #rankingSection .card, #rankingSection .card:hover {
  box-shadow: none !important;
  transform: none !important;
}

#rankingSection .ranking-table th:nth-child(2), #rankingSection .ranking-table td:nth-child(2) {
  box-shadow: none !important;
}

#rankingSection .ranking-table-wrapper, #rankingSection .ranking-table-wrapper:hover {
  box-shadow: none !important;
}

#homeSection {
  padding-top: 0;
}

.home-menu-grid {
  gap: 18px;
}

.home-menu-panel {
  min-height: 210px;
  padding: 24px 22px;
  border-radius: 22px;
  border: 1px solid rgba(191, 221, 240, 0.85);
  box-shadow: 0 12px 26px rgba(24, 54, 74, 0.08);
}

.home-menu-panel::before, .home-menu-panel:hover::before {
  display: none !important;
  content: none !important;
  border: 0 !important;
}

.home-menu-panel:hover {
  transform: translateY(-2px);
  border-color: rgba(140, 192, 235, 0.28);
  box-shadow: 0 14px 30px rgba(24, 54, 74, 0.1);
}

.home-panel-icon {
  width: 62px;
  height: 62px;
  font-size: 1.75rem;
}

.home-panel-title {
  font-size: 0.92rem;
}

.home-panel-text {
  max-width: 250px;
  font-size: 0.84rem;
  line-height: 1.4;
}

.home-panel-stat {
  min-height: 30px;
  padding: 5px 10px;
  font-size: 0.74rem;
}

@media (max-width: 767px) {
}

@media (max-width: 767px) {
  .home-menu-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .home-menu-panel {
    min-height: 150px;
    padding: 16px 12px;
    border-radius: 18px;
  }

  .home-panel-icon {
    width: 44px;
    height: 44px;
    font-size: 1.2rem;
  }

  .home-panel-title {
    font-size: 0.76rem;
    letter-spacing: 0.08em;
  }

  .home-panel-text {
    max-width: 100%;
    font-size: 0.68rem;
    line-height: 1.3;
  }

  .home-panel-stat {
    min-height: 24px;
    padding: 4px 8px;
    font-size: 0.62rem;
  }
}

@media (max-width: 430px) {
  .home-menu-grid {
    gap: 10px;
  }

  .home-menu-panel {
    min-height: 138px;
    padding: 14px 10px;
    border-radius: 16px;
  }

  .home-panel-icon {
    width: 40px;
    height: 40px;
    font-size: 1.05rem;
  }

  .home-panel-title {
    font-size: 0.7rem;
  }

  .home-panel-text {
    font-size: 0.62rem;
    line-height: 1.22;
  }

  .home-panel-stat {
    min-height: 22px;
    padding: 3px 7px;
    font-size: 0.58rem;
  }
}

body {
  background: #FFFFFF;
}

.app {
  min-height: 100vh;
}

.main-content {
  padding: 0;
}

#appView {
  padding: 22px 0 34px;
}

#appView .app-shell {
  padding: 0 0 10px;
}

@media (max-width: 767px) {
  #appView {
    padding: 14px 0 26px;
  }
}

#loginView {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 18px 0;
}

#loginView .auth-card {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
}

#loginView .card {
  padding: 22px 24px;
  margin-bottom: 0;
}

.login-logo-wrapper {
  margin-bottom: 14px;
}

.login-logo {
  width: min(200px, 72%);
}

#loginView h2 {
  margin-bottom: 8px;
  font-size: 1.55rem;
}

#loginView .muted {
  margin-bottom: 0;
}

#loginView .form {
  margin-top: 18px;
  gap: 13px;
}

#loginView input, #loginView .primary-button {
  min-height: 44px;
}

@media (max-width: 640px) {
  .container {
    width: min(100% - 24px, 1120px);
  }

  #loginView {
    min-height: 100svh;
    padding: 12px 0;
  }

  #loginView .card {
    padding: 18px;
    border-radius: 18px;
  }

  .login-logo {
    width: min(170px, 68%);
  }

  #loginView h2 {
    font-size: 1.35rem;
  }

  #loginView .form {
    margin-top: 16px;
    gap: 12px;
  }

  #loginView input, #loginView .primary-button {
    min-height: 42px;
  }
}

.app-topbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.app-logout-button {
  flex: 0 0 auto;
  background: #4F8FC7;
  color: white;
  border: 0;
}

.app-logout-button:hover {
  background: #2F5E78;
}

@media (max-width: 640px) {
  .app-topbar {
    flex-direction: column;
  }

  .app-logout-button {
    width: 100%;
  }
}

@media (max-width: 767px) {
  #adminSection, #adminSection * {
    max-width: 100%;
  }

  #adminSection {
    overflow-x: hidden;
  }

  #adminSection .card {
    width: 100%;
    min-width: 0;
    padding: 18px;
    border-radius: 20px;
  }

  #adminSection .admin-grid, #adminSection .admin-form-grid, #adminSection .form, #adminSection .form-group, #adminSection .admin-goals-editor, #adminSection .admin-goal-selectors, #adminSection .admin-goal-field {
    width: 100%;
    min-width: 0;
    grid-template-columns: 1fr;
  }

  #adminSection input, #adminSection select, #adminSection textarea, #adminSection button {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  #adminSection .primary-button, #adminSection .secondary-button {
    width: 100%;
  }

  #adminSection .checkbox-field {
    width: 100%;
    min-width: 0;
  }

  #adminSection .checkbox-field input {
    width: auto;
    flex: 0 0 auto;
  }

  #adminSection .admin-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
  }

  #adminSection .admin-action-button {
    width: 100%;
    white-space: normal;
  }

  #adminSection .table-wrapper {
    width: 100%;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 767px) {
  #adminSection .table-card {
    padding: 16px;
    overflow: hidden;
  }

  #adminSection .table-card h4 {
    margin-bottom: 14px;
  }

  #adminSection .table-wrapper {
    overflow-x: visible;
  }

  #adminSection .admin-users-table {
    width: 100%;
    min-width: 0;
    border-collapse: separate;
    border-spacing: 0;
  }

  #adminSection .admin-users-table thead {
    display: none;
  }

  #adminSection .admin-users-table, #adminSection .admin-users-table tbody, #adminSection .admin-users-table tr, #adminSection .admin-users-table td {
    display: block;
    width: 100%;
  }

  #adminSection .admin-users-table tbody {
    display: grid;
    gap: 14px;
  }

  #adminSection .admin-users-table tr {
    padding: 14px;
    border: 1px solid #BFDDF0;
    border-radius: 18px;
    background: #FFFFFF;
    box-shadow: 0 8px 18px rgba(24, 54, 74, 0.06);
  }

  #adminSection .admin-users-table tr:hover {
    background: #FFFFFF;
  }

  #adminSection .admin-users-table tr:hover td {
    background: #FFFFFF;
  }

  #adminSection .admin-users-table td {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #BFDDF0;
    background: #FFFFFF;
    font-size: 0.9rem;
    word-break: break-word;
  }

  #adminSection .admin-users-table td:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }

  #adminSection .admin-users-table td::before {
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6C879A;
  }

  #adminSection .admin-users-table td:nth-child(1)::before {
    content: "Nombre";
  }

  #adminSection .admin-users-table td:nth-child(2)::before {
    content: "Usuario";
  }

  #adminSection .admin-users-table td:nth-child(3)::before {
    content: "Email";
  }

  #adminSection .admin-users-table td:nth-child(4)::before {
    content: "Rol";
  }

  #adminSection .admin-users-table td:nth-child(5)::before {
    content: "Activo";
  }

  #adminSection .admin-users-table td:nth-child(6)::before {
    content: "Wizard";
  }

  #adminSection .admin-users-table td:nth-child(7)::before {
    content: "Acciones";
  }

  #adminSection .admin-users-table td[colspan] {
    display: block;
    text-align: center;
    padding: 16px;
    border-bottom: 0;
  }

  #adminSection .admin-users-table td[colspan]::before {
    content: none;
  }

  #adminSection .admin-users-table .status-pill {
    width: fit-content;
    max-width: 100%;
    justify-self: start;
    padding: 5px 9px;
    font-size: 0.75rem;
  }

  #adminSection .admin-users-table .admin-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    width: 100%;
  }

  #adminSection .admin-users-table .admin-action-button {
    width: 100%;
    min-height: 38px;
    padding: 9px 10px;
    font-size: 0.82rem;
    line-height: 1.15;
    white-space: normal;
  }
}

.admin-action-button.danger {
  background: #C65F5F;
  color: #FFFFFF;
  border-color: #C65F5F;
}

.admin-action-button.danger:hover {
  background: #7B3C3C;
  border-color: #7B3C3C;
}

.admin-action-button[data-admin-action="edit-user"] {
  background: #BFDDF0;
  color: #4F9BD2;
  border-color: #BFDDF0;
}

.admin-action-button[data-admin-action="edit-user"]:hover {
  background: #BFDDF0;
  color: #4F9BD2;
}

.admin-action-button[data-admin-action="toggle-active"] {
  background: #FFF2DE;
  color: #C65F5F;
  border-color: #BFDDF0;
}

.admin-action-button[data-admin-action="toggle-active"]:hover {
  background: #FFF2DE;
  color: #7B3C3C;
  border-color: #8CC0EB;
}

.admin-action-button[data-admin-action="force-wizard"] {
  background: #FFFFFF;
  color: #6EAEDD;
  border-color: #BFDDF0;
}

.admin-action-button[data-admin-action="force-wizard"]:hover {
  background: #BFDDF0;
  color: #4F9BD2;
  border-color: #8CC0EB;
}

.admin-action-button[data-admin-action="reset-password"] {
  background: #FFF2DE;
  color: #C65F5F;
  border-color: #BFDDF0;
}

.admin-action-button[data-admin-action="reset-password"]:hover {
  background: #FFF2DE;
  color: #9B6A3C;
  border-color: #8CC0EB;
}

.admin-action-button[data-admin-action="delete-user"] {
  background: #7B3C3C;
  color: #FFFFFF;
  border-color: #7B3C3C;
}

.admin-action-button[data-admin-action="delete-user"]:hover {
  background: #7B3C3C;
  color: #FFFFFF;
  border-color: #7B3C3C;
}

.prediction-form-redesign {
  gap: 18px;
  padding: 20px;
}

.prediction-layout {
  display: grid;
  gap: 14px;
}

.prediction-team-score-row {
  display: grid;
}

.prediction-team-name {
  font-size: 1.05rem;
}

.prediction-team-name-home {
  text-align: left;
}

.prediction-team-name-away {
  text-align: right;
}

.prediction-score-box {
  width: 100%;
  min-width: 0;
  padding: 10px;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 900;
  outline: none;
}

.prediction-score-dash {
  text-align: center;
  font-size: 1.3rem;
}

.prediction-divider {
  border-radius: 999px;
}

.prediction-form-row {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}

.prediction-row-label {
  margin: 0;
  font-size: 1rem;
}

.prediction-row-control {
  width: 100%;
  min-width: 0;
  padding: 12px 14px;
  font: inherit;
  outline: none;
}

@media (max-width: 767px) {
  .prediction-form-redesign {
    padding: 16px;
  }

  .prediction-team-name {
    font-size: 0.92rem;
  }

  .prediction-score-box {
    font-size: 1.2rem;
    padding: 8px;
  }

  .prediction-form-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .prediction-row-label {
    font-size: 0.95rem;
  }
}

@media (max-width: 520px) {
  .prediction-team-name {
    font-size: 0.84rem;
  }

  .prediction-score-box {
    font-size: 1.05rem;
  }
}

.prediction-form-redesign {
  background: radial-gradient(circle at top right, rgba(255, 235, 204, 0.18), transparent 18rem),
    #FFFDF4;
  border: 1px solid #BFDDF0;
  box-shadow: 0 14px 32px rgba(24, 54, 74, 0.06);
}

.prediction-team-score-row {
  padding: 4px 0;
}

.prediction-team-name {
  color: #18364A;
  font-weight: 850;
}

.prediction-score-box {
  min-height: 54px;
  border: 1.5px solid #BFDDF0;
  border-radius: 16px;
  background: #FFFFFF;
  color: #18364A;
  box-shadow: inset 0 1px 2px rgba(24, 54, 74, 0.04);
}

.prediction-score-box:hover {
  border-color: #8CC0EB;
  background: #FFFFFF;
}

.prediction-score-box:focus {
  border-color: #8CC0EB;
  background: #FFFFFF;
  box-shadow: 0 0 0 4px rgba(140, 192, 235, 0.16),
    inset 0 1px 2px rgba(24, 54, 74, 0.04);
}

.prediction-score-dash {
  color: #6C879A;
  font-weight: 800;
}

.prediction-divider {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(191, 221, 240, 0.9),
    transparent
  );
  opacity: 1;
}

.prediction-row-label {
  color: #18364A;
  font-weight: 850;
}

.prediction-row-control {
  min-height: 50px;
  border: 1.5px solid #BFDDF0;
  border-radius: 16px;
  background: #FFFFFF;
  color: #18364A;
  box-shadow: inset 0 1px 2px rgba(24, 54, 74, 0.04);
}

.prediction-row-control:hover {
  border-color: #8AA7BA;
  background: #FFFFFF;
}

.prediction-row-control:focus {
  border-color: #8CC0EB;
  background: #FFFFFF;
  box-shadow: 0 0 0 4px rgba(140, 192, 235, 0.12),
    inset 0 1px 2px rgba(24, 54, 74, 0.04);
}

@media (max-width: 767px) {
  .prediction-score-box {
    min-height: 48px;
    border-width: 1.5px;
  }

  .prediction-row-control {
    min-height: 46px;
    border-width: 1.5px;
  }

  .prediction-divider {
    margin: 2px 0;
  }
}

.prediction-team-score-row {
  grid-template-columns: minmax(100px, 1fr) minmax(86px, auto) 24px minmax(86px, auto) minmax(100px, 1fr);
  gap: 14px;
  align-items: center;
}

.prediction-team-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

.prediction-score-cluster {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.prediction-score-cluster-home {
  justify-content: flex-start;
}

.prediction-score-cluster-away {
  justify-content: flex-end;
}

.prediction-score-cluster .prediction-score-box {
  width: 74px;
  flex: 0 0 74px;
}

.prediction-team-color-stack {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 0 0 8px;
}

.prediction-team-color-chip {
  display: block;
  width: 8px;
  height: 14px;
  border-radius: 999px;
  background: var(--team-color);
  border: 1px solid rgba(24, 54, 74, 0.75);
  box-sizing: border-box;
  box-shadow: 0 1px 2px rgba(24, 54, 74, 0.08);
}

@media (max-width: 767px) {
  .prediction-team-score-row {
    grid-template-columns: minmax(74px, 1fr) auto 16px auto minmax(74px, 1fr);
    gap: 8px;
  }

  .prediction-score-cluster {
    gap: 6px;
  }

  .prediction-score-cluster .prediction-score-box {
    width: 58px;
    flex: 0 0 58px;
  }

  .prediction-team-color-stack {
    flex-basis: 6px;
  }

  .prediction-team-color-chip {
    width: 6px;
    height: 12px;
    border-width: 1px;
  }
}

@media (max-width: 520px) {
  .prediction-team-score-row {
    grid-template-columns: minmax(62px, 1fr) auto 14px auto minmax(62px, 1fr);
    gap: 6px;
  }
}

.prediction-form-row-scorer {
  align-items: start;
}

.custom-scorer-picker {
  width: 100%;
}

.custom-scorer-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
  cursor: pointer;
}

.custom-scorer-trigger-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.custom-scorer-trigger-icon {
  flex: 0 0 auto;
  color: #6C879A;
  font-size: 0.9rem;
  transition: transform 0.18s ease;
}

.custom-scorer-picker.is-open .custom-scorer-trigger {
  background: #FFFFFF;
  border-color: #8CC0EB;
  box-shadow: 0 0 0 4px rgba(140, 192, 235, 0.12),
    inset 0 1px 2px rgba(24, 54, 74, 0.04);
}

.custom-scorer-picker.is-open .custom-scorer-trigger-icon {
  transform: rotate(180deg);
}

.custom-scorer-dropdown {
  display: none;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid #FFF2DE;
  background: #FFFFFF;
  box-shadow: 0 22px 50px rgba(24, 54, 74, 0.24);
  overflow: hidden;
}

.custom-scorer-picker.is-open .custom-scorer-dropdown {
  display: block;
}

.custom-scorer-teams {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}

.custom-scorer-team-button {
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid #FFF2DE;
  border-radius: 14px;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.16s ease;
}

.custom-scorer-panels {
  display: block;
}

.custom-scorer-players {
  display: none;
  gap: 8px;
  padding-right: 2px;
}

.custom-scorer-players.is-active {
  display: grid;
}

.custom-scorer-player-option {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #FFF2DE;
  border-radius: 14px;
  background: #FFFFFF;
  color: #18364A;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: all 0.16s ease;
}

.custom-scorer-player-option:hover {
  background: #FFFFFF;
  border-color: #BFDDF0;
}

.custom-scorer-player-option.is-selected {
  background: #FFFFFF;
  border-color: #BFDDF0;
  color: #4F9BD2;
}

.custom-scorer-player-dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #8CC0EB;
  box-shadow: 0 0 0 1px rgba(24, 54, 74, 0.12);
}

.custom-scorer-player-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

.custom-scorer-empty {
  padding: 14px;
  border-radius: 14px;
  background: #FFFFFF;
  border: 1px dashed #FFF2DE;
  color: #6C879A;
  font-size: 0.95rem;
}

@media (max-width: 767px) {
  .custom-scorer-dropdown {
    padding: 12px;
    border-radius: 16px;
  }

  .custom-scorer-teams {
    gap: 8px;
  }

  .custom-scorer-team-button {
    min-height: 40px;
    padding: 9px 10px;
    font-size: 0.92rem;
  }

  .custom-scorer-player-option {
    padding: 10px;
  }
}

.match-card, .match-card-footer, .prediction-form, .prediction-form-redesign, .prediction-layout, .prediction-form-row, .prediction-form-row-scorer {
  overflow: visible;
}

.prediction-form-redesign {
  position: relative;
  z-index: 1;
}

.prediction-form-row-scorer {
  position: relative;
}

.custom-scorer-picker {
  z-index: 20;
}

.custom-scorer-dropdown {
  right: auto;
}

@media (max-width: 767px) {
}

.custom-scorer-team-button {
  position: relative;
  overflow: hidden;
  padding-bottom: 14px;
}

.custom-scorer-team-button::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 6px;
  height: 4px;
  border-radius: 999px;
  background: var(--team-color-line, linear-gradient(90deg, #BFDDF0, #8AA7BA));
  border: 1px solid rgba(24, 54, 74, 0.45);
  box-sizing: border-box;
}

.custom-scorer-team-button.is-active::after {
  height: 5px;
  bottom: 5px;
  border-color: rgba(24, 54, 74, 0.7);
}

.custom-scorer-team-button.is-active {
  transform: translateY(-1px);
}

.match-row-card.is-open, .match-row-card.is-open .match-row-details, .match-row-card.is-open .match-card-footer, .match-row-card.is-open .prediction-form, .match-row-card.is-open .prediction-form-redesign, .match-row-card.is-open .prediction-layout, .match-row-card.is-open .prediction-form-row, .match-row-card.is-open .prediction-form-row-scorer, .match-row-card.is-open .custom-scorer-picker {
  overflow: visible !important;
}

.match-row-card.is-open {
  position: relative;
  z-index: 20;
}

.match-row-card.is-open:has(.custom-scorer-picker.is-open) {
  z-index: 999;
}

.custom-scorer-picker {
  position: relative;
}

.custom-scorer-picker.is-open {
  z-index: 1000;
}

.custom-scorer-dropdown {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  left: 0 !important;
  width: min(100%, 520px) !important;
  max-height: none !important;
  z-index: 99999 !important;
  transform: none !important;
}

.custom-scorer-players {
  max-height: 340px !important;
  overflow-y: auto;
}

@media (max-width: 767px) {
  .match-row-card.is-open {
    z-index: 50;
  }

  .match-row-card.is-open:has(.custom-scorer-picker.is-open) {
    z-index: 999;
  }

  .custom-scorer-dropdown {
    width: 100% !important;
    left: 0 !important;
    right: auto !important;
  }

  .custom-scorer-players {
    max-height: 260px !important;
  }
}

.custom-scorer-team-button {
  background: #FFFFFF;
  color: #2F5E78;
  border-color: #BFDDF0;
  box-shadow: none;
}

.custom-scorer-team-button:hover {
  background: #FFFFFF;
  border-color: #FFF2DE;
  color: #18364A;
}

.custom-scorer-team-button.is-active {
  background: #FFF2DE;
  border-color: #FFF2DE;
  color: #18364A;
  box-shadow: 0 6px 14px rgba(140, 192, 235, 0.16),
    inset 0 0 0 1px rgba(140, 192, 235, 0.18);
}

.custom-scorer-team-button::after {
  opacity: 0.45;
}

.custom-scorer-team-button.is-active::after {
  opacity: 1;
}

.match-row-card {
  border-radius: 28px;
  background: #FFFFFF;
}

.match-row-card.is-open {
  overflow: hidden;
}

.match-row-card.is-open .match-row-summary {
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  overflow: hidden;
}

.match-row-card.is-open .match-row-details {
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
  overflow: hidden;
}

.match-row-card.status-open.is-open .match-row-summary {
  background: radial-gradient(circle at center, rgba(191, 221, 240, 0.24), transparent 18rem),
    linear-gradient(180deg, #FFFFFF, #FFFDF4);
}

@media (max-width: 767px) {
  .match-row-card {
    border-radius: 22px;
  }

  .match-row-card.is-open {
    overflow: hidden;
  }

  .match-row-card.is-open .match-row-summary {
    border-top-left-radius: 19px;
    border-top-right-radius: 19px;
  }

  .match-row-card.is-open .match-row-details {
    border-bottom-left-radius: 19px;
    border-bottom-right-radius: 19px;
    overflow: hidden;
  }
}

.finished-summary-card {
  display: grid;
  gap: 28px;
  padding: 26px;
  border-radius: 24px;
  background: #FFFFFF;
  border: 1px solid #FFF2DE;
}

.finished-summary-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: stretch;
}

.finished-summary-panel {
  display: grid;
  align-content: start;
  gap: 8px;
  text-align: center;
}

.finished-summary-panel h4, .finished-summary-others h4 {
  margin: 0 0 14px;
  font-size: 1.2rem;
  color: #18364A;
}

.finished-summary-real {
  padding-right: 28px;
  border-right: 2px solid rgba(24, 54, 74, 0.18);
}

.finished-total-points {
  width: fit-content;
  margin: 14px auto 0;
  padding: 7px 12px;
  border-radius: 999px;
  background: #FFFFFF;
  color: #4F9BD2;
  border: 1px solid #BFDDF0;
  font-weight: 900;
}

.finished-summary-separator {
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(24, 54, 74, 0.28),
    transparent
  );
}

.finished-summary-others {
  display: grid;
  gap: 16px;
  text-align: center;
}

.finished-summary-others h4 {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  margin-bottom: 4px;
}

.finished-public-card > div {
  display: grid;
  gap: 4px;
}

.finished-public-card span {
  color: #4D7088;
}

.finished-summary-empty {
  padding: 14px;
  border-radius: 16px;
  background: #FFFFFF;
  color: #6C879A;
  font-weight: 800;
}

@media (max-width: 767px) {
  .finished-summary-card {
    padding: 18px;
    gap: 22px;
    border-radius: 20px;
  }

  .finished-summary-top {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .finished-summary-real {
    padding-right: 0;
    padding-bottom: 22px;
    border-right: 0;
    border-bottom: 2px solid rgba(24, 54, 74, 0.16);
  }

  .finished-prediction-points {
    text-align: center;
  }

  .finished-public-points {
    width: fit-content;
  }
}

.finished-summary-panel h4, .finished-summary-others h4 {
  font-weight: 850;
  letter-spacing: -0.02em;
}

.finished-summary-user {
  text-align: left;
}

.finished-summary-user h4 {
  text-align: center;
}

.finished-prediction-list {
  display: grid;
  gap: 9px;
  width: min(100%, 520px);
  margin: 0 auto;
}

.finished-prediction-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 14px;
  background: #FFFFFF;
  border: 1px solid #FFF2DE;
}

.finished-prediction-label {
  min-width: 0;
  color: #24495F;
  font-weight: 650;
  line-height: 1.25;
}

.finished-prediction-points-badge {
  padding: 5px 9px;
  border-radius: 999px;
  background: #FFFFFF;
  color: #2F5E78;
  border: 1px solid #BFDDF0;
  font-size: 0.82rem;
  font-weight: 850;
  white-space: nowrap;
}

.finished-prediction-row:first-child {
  background: #FFFFFF;
  border-color: #FFF2DE;
}

.finished-prediction-row:first-child .finished-prediction-label {
  font-weight: 850;
  color: #18364A;
}

.finished-prediction-row:first-child .finished-prediction-points-badge {
  background: #FFFFFF;
  color: #9B6A3C;
  border-color: #FFFDF4;
}

.finished-total-points {
  margin-top: 14px;
  font-size: 0.95rem;
}

.finished-public-card span {
  font-weight: 600;
}

@media (max-width: 767px) {
  .finished-summary-user {
    text-align: initial;
  }

  .finished-prediction-list {
    width: 100%;
  }

  .finished-prediction-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 9px 10px;
  }

  .finished-prediction-label {
    font-size: 0.9rem;
  }

  .finished-prediction-points-badge {
    padding: 4px 8px;
    font-size: 0.76rem;
  }
}

.finished-summary-real {
  text-align: left;
}

.finished-summary-real h4 {
  text-align: center;
}

.finished-real-list {
  display: grid;
  gap: 9px;
  width: min(100%, 520px);
  margin: 0 auto;
}

.finished-real-row {
  display: grid;
  align-items: center;
  min-height: 46px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #FFFFFF;
  border: 1px solid #FFF2DE;
}

.finished-real-label {
  min-width: 0;
  color: #24495F;
  font-weight: 650;
  line-height: 1.25;
  text-align: left;
}

.finished-real-row-main {
  background: #FFFFFF;
  border-color: #FFF2DE;
}

.finished-real-row-main .finished-real-label {
  font-weight: 850;
  color: #18364A;
}

@media (max-width: 767px) {
  .finished-real-list {
    width: 100%;
  }

  .finished-real-row {
    min-height: 42px;
    padding: 9px 10px;
  }

  .finished-real-label {
    font-size: 0.9rem;
  }
}

.finished-summary-real {
  border-right-color: rgba(191, 221, 240, 0.22);
}

@media (max-width: 767px) {
  .finished-summary-real {
    border-bottom-color: rgba(191, 221, 240, 0.22);
  }
}

.groups-intro-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  background: radial-gradient(circle at top right, rgba(255, 235, 204, 0.18), transparent 18rem),
    #FFFDF4;
  border-color: #FFF2DE;
}

.groups-intro-card h4 {
  margin-bottom: 6px;
}

#groupsMessage {
  grid-column: 1 / -1;
  margin: 0;
}

.groups-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
}

.group-prediction-card {
  display: grid;
  gap: 16px;
  background: #FFFFFF;
  border: 1px solid #BFDDF0;
}

.group-prediction-header {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
}

.group-prediction-header h4 {
  margin: 0;
  font-size: 1.35rem;
}

.group-saved-pill, .group-pending-pill {
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 900;
}

.group-saved-pill {
  background: #FFFFFF;
  color: #4F9BD2;
  border: 1px solid #BFDDF0;
}

.group-pending-pill {
  background: #FFF2DE;
  color: #C65F5F;
  border: 1px solid #BFDDF0;
}

.group-prediction-list {
  display: grid;
  gap: 10px;
}

.group-prediction-team {
  display: grid;
  gap: 10px;
  align-items: center;
  min-height: 54px;
  padding: 10px;
  border-radius: 16px;
  background: #FFFFFF;
  border: 1px solid #BFDDF0;
  box-shadow: 0 6px 14px rgba(24, 54, 74, 0.04);
}

.group-prediction-team[draggable="true"]:active {
  cursor: grabbing;
}

.group-prediction-team.is-dragging {
  opacity: 0.55;
  transform: scale(0.98);
}

.group-position-number {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #FFF2DE;
  color: #9B6A3C;
  border: 1px solid #FFFDF4;
  font-weight: 900;
  font-size: 0.85rem;
}

.group-team-logo {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.group-prediction-team strong {
  min-width: 0;
  color: #18364A;
  overflow-wrap: anywhere;
}

.group-drag-handle {
  color: #8AA7BA;
  font-weight: 900;
  letter-spacing: -0.08em;
}

@media (max-width: 900px) {
  .groups-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .groups-intro-card {
    grid-template-columns: 1fr;
  }

  #groupsSaveButton {
    width: 100%;
  }

  .group-prediction-card {
    padding: 18px;
    border-radius: 20px;
  }

  .group-prediction-team {
    gap: 8px;
  }

  .group-prediction-team strong {
    font-size: 0.94rem;
  }
}

.group-wizard-shell {
  min-height: 100vh;
  padding: 26px 0 40px;
}

.group-wizard-header {
  max-width: 760px;
  margin: 0 auto 22px;
  text-align: center;
}

.group-wizard-header h2 {
  margin-bottom: 8px;
  font-size: clamp(2rem, 5vw, 3rem);
}

.group-wizard-logo {
  width: min(190px, 70%);
}

.group-wizard-actions {
  max-width: 760px;
  margin: 24px auto 0;
  padding: 14px;
  border-radius: 22px;
  background: radial-gradient(circle at top right, rgba(255, 235, 204, 0.16), transparent 14rem),
    rgba(255, 255, 255, 0.96);
  border: 1px solid #FFF2DE;
  box-shadow: 0 14px 32px rgba(24, 54, 74, 0.08);
}

.group-wizard-actions .primary-button {
  width: 100%;
}

.group-wizard-actions .message {
  margin: 12px 0 0;
}

.group-wizard-list {
  padding-bottom: 0;
}

.group-prediction-team.is-touch-dragging {
  opacity: 0.72;
  transform: scale(0.985);
  box-shadow: 0 16px 34px rgba(24, 54, 74, 0.18);
  border-color: #FFF2DE;
  background: #FFFFFF;
}

@media (max-width: 767px) {
  .group-wizard-shell {
    padding: 18px 0 30px;
  }

  .group-wizard-header {
    margin-bottom: 16px;
  }

  .group-wizard-actions {
    border-radius: 18px;
    margin-top: 18px;
    margin-bottom: 0;
  }

  .group-wizard-logo {
    width: min(150px, 64%);
  }

  .group-prediction-team {
    cursor: grab;
  }

  .group-prediction-team:active {
    cursor: grabbing;
  }
}

.group-prediction-team {
  grid-template-columns: 34px 34px minmax(0, 1fr) auto;
}

.group-prediction-team[draggable="true"] {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}

@media (max-width: 767px) {
  .group-prediction-team {
    grid-template-columns: 30px 32px minmax(0, 1fr) auto;
  }

  .group-drag-handle {
    display: inline-flex !important;
    color: #8AA7BA;
  }
}

.global-player-prediction-card {
  grid-column: 1 / -1;
  display: grid;
  gap: 18px;
  background: radial-gradient(circle at top right, rgba(255, 235, 204, 0.18), transparent 18rem),
    #FFFDF4;
  border: 1px solid #BFDDF0;
}

.global-player-picks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.global-player-pick {
  display: grid;
  gap: 14px;
  padding: 16px;
  border-radius: 20px;
  background: #FFFFFF;
  border: 1px solid #BFDDF0;
}

.global-player-pick .eyebrow {
  margin-bottom: 4px;
}

.global-player-select-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.global-player-select-grid select {
  width: 100%;
  min-height: 44px;
  border-radius: 14px;
  border: 1px solid #BFDDF0;
  background: #FFFFFF;
  color: #18364A;
  font: inherit;
  font-weight: 800;
  padding: 0 12px;
}

.global-player-select-grid select:disabled {
  opacity: 0.75;
  cursor: not-allowed;
}

@media (max-width: 900px) {
  .global-player-picks {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .global-player-prediction-card {
    padding: 18px;
    border-radius: 20px;
  }

  .global-player-select-grid {
    grid-template-columns: 1fr;
  }
}

.rules-wizard-shell {
  min-height: 100vh;
  padding: 26px 0 40px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.rules-wizard-card {
  width: min(920px, 100%);
  display: grid;
  gap: 18px;
  background: radial-gradient(circle at top right, rgba(255, 235, 204, 0.2), transparent 18rem),
    #FFFDF4;
  border: 1px solid #FFF2DE;
}

.rules-wizard-logo {
  width: min(180px, 70%);
}

.rules-wizard-card h2 {
  margin-bottom: 4px;
  font-size: clamp(2rem, 5vw, 3rem);
}

.rules-content {
  display: grid;
  gap: 16px;
}

.rules-hero, .rules-block {
  padding: 18px;
  border-radius: 20px;
  background: #FFFFFF;
  border: 1px solid #FFF2DE;
}

.rules-hero h4, .rules-block h5 {
  margin-bottom: 8px;
  color: #18364A;
}

.rules-hero h4 {
  font-size: 1.25rem;
}

.rules-hero p, .rules-block p, .rules-block li {
  color: #4D7088;
  line-height: 1.65;
}

.rules-block ul {
  margin: 0;
  padding-left: 20px;
}

.rules-block li + li {
  margin-top: 8px;
}

.rules-block strong {
  color: #18364A;
}

.rules-warning {
  background: radial-gradient(circle at top right, rgba(255, 235, 204, 0.2), transparent 12rem),
    #FFF2DE;
  border-color: #FFF2DE;
}

.rules-wizard-actions {
  display: grid;
  gap: 12px;
  padding-top: 4px;
}

.rules-page-card {
  display: grid;
  gap: 16px;
  background: radial-gradient(circle at top right, rgba(255, 235, 204, 0.1), transparent 18rem),
    #FFFDF4;
  border: 1px solid #FFF2DE;
}

@media (max-width: 767px) {
  .rules-wizard-shell {
    padding: 18px 0 30px;
  }

  .rules-wizard-card, .rules-page-card {
    padding: 18px;
    border-radius: 20px;
  }

  .rules-hero, .rules-block {
    padding: 15px;
    border-radius: 16px;
  }

  .rules-wizard-logo {
    width: min(150px, 64%);
  }
}

.global-player-prediction-card, .global-player-pick, .groups-list {
  overflow: visible;
}

.global-player-picker {
  width: 100%;
  position: relative;
  z-index: 10;
}

.global-player-picker.is-open {
  z-index: 999;
}

.global-player-trigger {
  width: 100%;
  min-height: 48px;
}

.global-player-trigger:disabled {
  opacity: 0.75;
  cursor: not-allowed;
}

.global-player-team-flag {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  object-fit: contain;
  border-radius: 999px;
  background: #FFFFFF;
  border: 1px solid rgba(24, 54, 74, 0.12);
}

.global-player-list {
  min-height: 180px;
}

.global-player-picker.is-locked .custom-scorer-dropdown {
  display: none !important;
}

@media (max-width: 900px) {
  .global-player-dropdown {
    width: 100% !important;
  }
}

@media (max-width: 767px) {
  .global-player-dropdown {
    max-height: 70vh !important;
  }

  .global-player-team-flag {
    width: 22px;
    height: 22px;
    flex-basis: 22px;
  }

  .global-player-list {
    max-height: calc(70vh - 245px) !important;
    min-height: 160px;
  }
}

.global-team-picker, .global-player-picker {
  position: relative;
  width: 100%;
  z-index: 10;
}

.global-team-picker.is-open, .global-player-picker.is-open {
  z-index: 999;
}

.global-team-trigger, .global-player-trigger {
  width: 100%;
  min-height: 48px;
}

.global-team-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
}

.global-team-trigger .custom-scorer-trigger-text, .global-player-trigger .custom-scorer-trigger-text {
  min-width: 0;
  flex: 1;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.global-team-dropdown {
  width: 100% !important;
  max-height: 320px !important;
  overflow: hidden !important;
}

@media (min-width: 768px) {
  .global-team-dropdown {
    width: min(360px, calc(100vw - 48px)) !important;
    max-width: calc(100vw - 48px) !important;
  }
}

.global-team-option-list {
  display: grid;
  gap: 6px;
  max-height: 290px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px;
}

.global-team-option {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  border: 1px solid #BFDDF0;
  border-radius: 14px;
  background: #FFFFFF;
  color: #18364A;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 11px;
  font: inherit;
  font-weight: 800;
  text-align: left;
  transition: background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.global-team-option:hover, .global-team-option.is-selected {
  background: #BFDDF0;
  border-color: #8CC0EB;
}

.global-team-option:active {
  transform: scale(0.99);
}

.global-team-option span {
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  line-height: 1.25;
}

.global-player-dropdown {
  width: 100% !important;
  max-height: 360px !important;
  overflow: hidden !important;
}

.global-player-list {
  display: grid;
  gap: 6px;
  max-height: 320px !important;
  overflow-y: auto;
  padding: 4px;
}

.global-team-picker.is-locked .custom-scorer-dropdown, .global-player-picker.is-locked .custom-scorer-dropdown {
  display: none !important;
}

.global-player-select-grid {
  align-items: start;
}

@media (max-width: 767px) {
  .global-team-dropdown, .global-player-dropdown {
    max-height: 300px !important;
  }

  .global-team-option-list, .global-player-list {
    max-height: 260px !important;
  }
}

.user-wizard-shell {
  min-height: 100vh;
  padding: 26px 0 40px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.user-wizard-card {
  width: min(720px, 100%);
  display: grid;
  gap: 18px;
  background: radial-gradient(circle at top right, rgba(255, 235, 204, 0.2), transparent 18rem),
    #FFFDF4;
  border: 1px solid #BFDDF0;
}

.user-wizard-logo {
  width: min(180px, 70%);
}

.user-wizard-header {
  text-align: center;
  display: grid;
  gap: 8px;
}

.user-wizard-header h2 {
  margin-bottom: 0;
  font-size: clamp(2rem, 5vw, 3rem);
}

.user-wizard-header .muted {
  max-width: 560px;
  margin: 0 auto;
}

.user-wizard-form {
  display: grid;
  gap: 16px;
}

.user-wizard-form .form-group {
  padding: 14px;
  border-radius: 18px;
  background: #FFFFFF;
  border: 1px solid #BFDDF0;
}

.user-wizard-form input {
  border-color: #BFDDF0;
}

.user-wizard-form input:hover {
  border-color: #8CC0EB;
}

.user-wizard-form label {
  color: #18364A;
}

.user-wizard-form small {
  color: #6C879A;
  font-weight: 700;
}

.user-wizard-actions {
  display: grid;
  gap: 12px;
  padding-top: 4px;
}

.user-wizard-actions .primary-button {
  width: 100%;
}

.user-wizard-actions .message {
  margin: 0;
}

@media (max-width: 767px) {
  .user-wizard-shell {
    padding: 18px 0 30px;
  }

  .user-wizard-card {
    padding: 18px;
    border-radius: 20px;
  }

  .user-wizard-logo {
    width: min(150px, 64%);
  }

  .user-wizard-form .form-group {
    padding: 13px;
    border-radius: 16px;
  }
}

.rules-prizes {
  background: radial-gradient(circle at top right, rgba(255, 235, 204, 0.16), transparent 13rem),
    #FFFDF4;
  border-color: #FFF2DE;
}

.rules-prizes-note {
  margin-top: 14px;
  padding: 14px 15px;
  border-radius: 16px;
  background: #FFF2DE;
  border: 1px solid rgba(255, 235, 204, 0.75);
  font-weight: 800;
}

.user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 999px;
  background: #BFDDF0;
  color: #2F5E78;
  font-weight: 1000;
  letter-spacing: 0.02em;
  border: 2px solid #FFFFFF;
  box-shadow: 0 8px 18px rgba(24, 54, 74, 0.12);
  flex: 0 0 auto;
}

.user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.app-user-heading {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.app-topbar-avatar {
  width: 86px;
  height: 86px;
  font-size: 1.6rem;
}

.ranking-user-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.ranking-user-cell span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ranking-user-avatar {
  width: 34px;
  height: 34px;
  font-size: 0.78rem;
}

.profile-avatar-block h4 {
  margin-bottom: 4px;
  color: #18364A;
}

@media (max-width: 767px) {
  .app-user-heading {
    align-items: flex-start;
    gap: 12px;
  }

  .app-topbar-avatar {
    width: 68px;
    height: 68px;
    font-size: 1.25rem;
  }

  .ranking-user-avatar {
    width: 30px;
    height: 30px;
    font-size: 0.72rem;
  }

  .profile-avatar-block {
    align-items: flex-start;
  }
}

.avatar-upload-field {
  overflow: hidden;
}

.avatar-upload-centered {
  display: grid;
  justify-items: center;
  gap: 12px;
  text-align: center;
}

.avatar-upload-centered > label:first-child {
  color: #18364A;
  font-weight: 1000;
}

.avatar-upload-preview {
  width: 82px;
  height: 82px;
  border-radius: 999px;
  overflow: hidden;
  background: #BFDDF0;
  color: #2F5E78;
  border: 2px solid #FFFFFF;
  box-shadow: 0 10px 22px rgba(24, 54, 74, 0.14);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 1000;
  letter-spacing: 0.02em;
}

.avatar-upload-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-upload-preview .user-avatar, .wizard-preview-avatar {
  width: 100%;
  height: 100%;
  box-shadow: none;
  border: 0;
}

.avatar-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.avatar-upload-centered small {
  display: block;
  max-width: 360px;
  color: #6C879A;
  font-weight: 800;
  line-height: 1.45;
}

@media (max-width: 767px) {
  .avatar-upload-preview {
    width: 76px;
    height: 76px;
  }

  .avatar-upload-centered small {
    max-width: 260px;
  }
}

.avatar-upload-clickable, .profile-avatar-picker {
  cursor: pointer;
  transition: transform 0.2s ease,
    box-shadow 0.2s ease;
}

.avatar-upload-clickable:hover, .profile-avatar-picker:hover .user-avatar, .profile-avatar-picker:hover {
  transform: translateY(-1px);
}

.avatar-upload-clickable:hover, .profile-avatar-picker:hover .user-avatar {
  box-shadow: 0 14px 26px rgba(24, 54, 74, 0.18);
}

.profile-avatar-block {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  padding: 18px;
  margin-bottom: 18px;
  border-radius: 22px;
  background: radial-gradient(circle at top right, rgba(255, 235, 204, 0.08), transparent 12rem),
    #FFFDF4;
  border: 1px solid #BFDDF0;
}

.profile-avatar-picker {
  display: inline-flex;
  border-radius: 999px;
  flex: 0 0 auto;
}

.profile-user-avatar {
  width: 88px;
  height: 88px;
  font-size: 1.7rem;
}

.profile-avatar-info {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.profile-avatar-info h4 {
  margin: 0;
  color: #18364A;
}

.profile-avatar-info .muted {
  margin: 0;
  color: #6C879A;
  font-weight: 750;
}

.profile-avatar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.profile-avatar-save-button, .profile-avatar-remove-button {
  min-height: 40px;
  border: 0;
  border-radius: 999px;
  padding: 0 16px;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 950;
  cursor: pointer;
  transition: transform 0.2s ease,
    filter 0.2s ease,
    opacity 0.2s ease;
}

.profile-avatar-save-button {
  background: linear-gradient(135deg, #8CC0EB, #4F8FC7);
  color: #FFFFFF;
  box-shadow: 0 10px 18px rgba(24, 54, 74, 0.15);
}

.profile-avatar-remove-button {
  background: #FFF2DE;
  color: #C65F5F;
  border: 1px solid #FFF2DE;
}

.profile-avatar-save-button:hover:not(:disabled), .profile-avatar-remove-button:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(0.98);
}

.profile-avatar-save-button:disabled, .profile-avatar-remove-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.finished-public-details strong, .finished-public-details span {
  min-width: 0;
}

.admin-user-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.admin-user-cell > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.admin-user-cell strong {
  color: #18364A;
  line-height: 1.2;
}

.admin-user-cell span {
  color: #6C879A;
  font-size: 0.82rem;
  font-weight: 800;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-user-avatar {
  width: 38px;
  height: 38px;
  font-size: 0.82rem;
}

@media (max-width: 767px) {
  .profile-avatar-block {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    padding: 18px;
  }

  .profile-user-avatar {
    width: 82px;
    height: 82px;
    font-size: 1.55rem;
  }

  .profile-avatar-actions {
    width: 100%;
    justify-content: center;
  }

  .profile-avatar-save-button, .profile-avatar-remove-button {
    flex: 1;
    min-width: 130px;
  }

  .finished-public-card {
    align-items: start;
  }

  .admin-user-avatar {
    width: 34px;
    height: 34px;
    font-size: 0.75rem;
  }
}

.finished-public-predictions {
  display: grid;
  gap: 14px;
}

.finished-public-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  padding: 18px 20px;
  border-radius: 24px;
  background: radial-gradient(circle at top left, rgba(255, 235, 204, 0.08), transparent 13rem),
    #FFFDF4;
  border: 1px solid #FFF2DE;
  box-shadow: 0 16px 34px rgba(24, 54, 74, 0.06);
  text-align: left;
}

.finished-public-user {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.finished-public-avatar {
  width: 52px;
  height: 52px;
  font-size: 1rem;
}

.finished-public-details {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.finished-public-details strong {
  color: #4F9BD2;
  font-size: 1rem;
  line-height: 1.2;
}

.finished-public-details span {
  color: #4D7088;
  font-weight: 750;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.finished-public-points {
  justify-self: end;
  align-self: center;
  padding: 9px 14px;
  border-radius: 999px;
  background: #FFFFFF;
  color: #4F9BD2;
  font-weight: 1000;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(140, 192, 235, 0.08);
}

@media (max-width: 767px) {
  .finished-public-card {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 14px;
    padding: 20px 16px;
    text-align: center;
  }

  .finished-public-user {
    display: grid;
    justify-items: center;
    gap: 12px;
    width: 100%;
  }

  .finished-public-avatar {
    width: 58px;
    height: 58px;
    font-size: 1.08rem;
    margin: 0 auto;
  }

  .finished-public-details {
    justify-items: center;
    text-align: center;
    width: 100%;
  }

  .finished-public-details strong {
    font-size: 1.02rem;
  }

  .finished-public-details span {
    font-size: 0.94rem;
  }

  .finished-public-points {
    justify-self: center;
    margin: 2px auto 0;
    padding: 9px 15px;
  }
}

.chat-home-panel {
  position: relative;
}

.home-panel-alert {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 26px;
  padding: 0 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, #FFFDF4, #8CC0EB);
  color: #18364A;
  font-size: 1rem;
  font-weight: 1000;
  line-height: 1;
  box-shadow: 0 10px 22px rgba(140, 192, 235, 0.28);
  border: 2px solid #FFFFFF;
}

.home-panel-alert.hidden {
  display: none;
}

.chat-section-heading {
  gap: 18px;
}

.chat-refresh-button {
  background: #FFFFFF;
  color: #4F9BD2;
  border: 1px solid rgba(140, 192, 235, 0.22);
  box-shadow: 0 10px 22px rgba(24, 54, 74, 0.06);
}

.chat-refresh-button:hover {
  background: #FFFFFF;
  color: #18364A;
}

.chat-card {
  display: grid;
  gap: 16px;
  overflow: hidden;
  padding: 0;
  border-radius: 28px;
  background: radial-gradient(circle at top left, rgba(255, 235, 204, 0.18), transparent 16rem),
    radial-gradient(circle at bottom right, rgba(140, 192, 235, 0.1), transparent 18rem),
    #FFFDF4;
}

.chat-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 24px 0;
}

.chat-card-header h4 {
  margin: 0 0 4px;
  color: #18364A;
  font-size: 1.15rem;
  font-weight: 1000;
  letter-spacing: -0.02em;
}

.chat-message-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 999px;
  background: #FFFFFF;
  color: #2F5E78;
  font-size: 0.82rem;
  font-weight: 900;
  white-space: nowrap;
}

.chat-load-more-wrap {
  display: flex;
  justify-content: center;
  padding: 0 24px;
}

.chat-load-more-button {
  min-height: 38px;
  background: rgba(255, 255, 255, 0.88);
  color: #4F9BD2;
  border: 1px solid rgba(140, 192, 235, 0.18);
  box-shadow: 0 8px 18px rgba(24, 54, 74, 0.05);
}

.chat-load-more-button:hover {
  background: #FFFFFF;
  color: #18364A;
}

.chat-messages-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 360px;
  max-height: 560px;
  overflow-y: auto;
  padding: 16px 24px 20px;
  scroll-behavior: smooth;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.78)),
    repeating-linear-gradient(
      135deg,
      rgba(140, 192, 235, 0.025) 0,
      rgba(140, 192, 235, 0.025) 8px,
      transparent 8px,
      transparent 18px
    );
  border-top: 1px solid rgba(191, 221, 240, 0.72);
  border-bottom: 1px solid rgba(191, 221, 240, 0.72);
}

.chat-empty-state {
  margin: auto;
  max-width: 420px;
  padding: 22px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.86);
  color: #6C879A;
  text-align: center;
  font-weight: 850;
  border: 1px solid rgba(191, 221, 240, 0.72);
}

.chat-message-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  max-width: 82%;
}

.chat-message-row.is-own {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.chat-message-row.is-deleted {
  opacity: 0.82;
}

.chat-message-avatar {
  width: 34px;
  height: 34px;
  font-size: 0.72rem;
}

.chat-message-bubble {
  position: relative;
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 11px 13px;
  border-radius: 18px 18px 18px 5px;
  background: #FFFFFF;
  color: #18364A;
  border: 1px solid rgba(191, 221, 240, 0.85);
  box-shadow: 0 10px 22px rgba(24, 54, 74, 0.06);
}

.chat-message-row.is-own .chat-message-bubble {
  border-radius: 18px 18px 5px 18px;
  background: linear-gradient(180deg, #FFFDF4, #BFDDF0);
  border-color: rgba(140, 192, 235, 0.22);
}

.chat-message-row.is-deleted .chat-message-bubble {
  background: #FFFFFF;
  color: #6C879A;
  border-style: dashed;
}

.chat-message-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.chat-message-name {
  min-width: 0;
  overflow: hidden;
  color: #4F9BD2;
  font-size: 0.78rem;
  font-weight: 1000;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-message-time {
  flex: 0 0 auto;
  color: #8AA7BA;
  font-size: 0.68rem;
  font-weight: 850;
  line-height: 1.2;
  white-space: nowrap;
}

.chat-message-text {
  color: #18364A;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.38;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.chat-message-row.is-deleted .chat-message-text {
  color: #6C879A;
  font-style: italic;
}

.chat-delete-button {
  justify-self: end;
  min-height: 0;
  margin-top: 2px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #C65F5F;
  font-size: 0.72rem;
  font-weight: 900;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.chat-delete-button:hover {
  color: #C65F5F;
}

.chat-form {
  display: grid;
  gap: 10px;
  padding: 0 24px 24px;
}

.chat-form-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #18364A;
  font-size: 0.82rem;
  font-weight: 1000;
}

#chatCharactersCounter {
  color: #6C879A;
  font-size: 0.78rem;
  font-weight: 900;
}

.chat-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
}

#chatMessageInput {
  width: 100%;
  min-height: 54px;
  max-height: 140px;
  resize: vertical;
  border: 1px solid rgba(140, 192, 235, 0.18);
  border-radius: 18px;
  background: #FFFFFF;
  color: #18364A;
  padding: 13px 14px;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 750;
  line-height: 1.35;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(24, 54, 74, 0.03);
}

#chatMessageInput:focus {
  border-color: rgba(140, 192, 235, 0.55);
  box-shadow: 0 0 0 4px rgba(140, 192, 235, 0.12),
    inset 0 1px 0 rgba(24, 54, 74, 0.03);
}

.chat-send-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  min-width: 54px;
  height: 54px;
  min-height: 54px;
  padding: 0;
  border-radius: 999px;
  font-size: 1.2rem;
  line-height: 1;
}

.chat-send-button:disabled,
.chat-refresh-button:disabled,
.chat-load-more-button:disabled,
.chat-delete-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

#chatMessageFeedback {
  margin: 0;
}

@media (max-width: 767px) {
  .home-panel-alert {
    top: 10px;
    right: 12px;
    min-width: 30px;
    height: 24px;
    padding: 0 10px;
    font-size: 0.9rem;
  }

  .chat-section-heading {
    display: grid;
    gap: 14px;
  }

  .chat-refresh-button {
    width: 100%;
  }

  .chat-card {
    border-radius: 22px;
  }

  .chat-card-header {
    display: grid;
    gap: 10px;
    padding: 18px 16px 0;
  }

  .chat-message-count {
    justify-self: start;
    min-height: 30px;
    font-size: 0.76rem;
  }

  .chat-load-more-wrap {
    padding: 0 16px;
  }

  .chat-load-more-button {
    width: 100%;
  }

  .chat-messages-list {
    min-height: 420px;
    max-height: 58vh;
    gap: 10px;
    padding: 14px 12px 16px;
  }

  .chat-message-row {
    max-width: 92%;
    gap: 8px;
  }

  .chat-message-avatar {
    width: 30px;
    height: 30px;
    font-size: 0.66rem;
  }

  .chat-message-bubble {
    padding: 10px 11px;
    border-radius: 16px 16px 16px 5px;
  }

  .chat-message-row.is-own .chat-message-bubble {
    border-radius: 16px 16px 5px 16px;
  }

  .chat-message-name {
    font-size: 0.74rem;
  }

  .chat-message-time {
    font-size: 0.64rem;
  }

  .chat-message-text {
    font-size: 0.88rem;
    line-height: 1.36;
  }

  .chat-form {
    padding: 0 16px 18px;
  }

  .chat-input-row {
    grid-template-columns: minmax(0, 1fr) 46px;
    gap: 8px;
    align-items: end;
  }

  #chatMessageInput {
    min-height: 48px;
    max-height: 110px;
    border-radius: 18px;
    font-size: 0.92rem;
    padding: 12px 13px;
  }

  .chat-send-button {
    width: 46px;
    min-width: 46px;
    height: 46px;
    min-height: 46px;
    padding: 0;
    border-radius: 999px;
    font-size: 1.05rem;
  }
}

.nav-chat-button {
  position: relative;
}

.nav-chat-alert {
  position: absolute;
  top: -7px;
  right: -5px;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, #FFFDF4, #8CC0EB);
  color: #18364A;
  font-size: 0.78rem;
  font-weight: 1000;
  line-height: 1;
  box-shadow: 0 8px 18px rgba(140, 192, 235, 0.28);
  border: 2px solid #FFFFFF;
}

.nav-chat-alert.hidden {
  display: none;
}

.nav-button.active .nav-chat-alert {
  border-color: #FFFFFF;
}

@media (max-width: 767px) {
  .nav-chat-alert {
    top: -6px;
    right: -4px;
    min-width: 22px;
    height: 19px;
    padding: 0 7px;
    font-size: 0.72rem;
  }
}


/* Ajuste final de paleta blanca: solo colores */
body,
.view,
.app-section,
.main-content {
  background: #FFFFFF;
}

.card,
.auth-card,
.table-card,
.filters-card,
.profile-card,
.match-card,
.match-row-card,
.home-menu-panel,
.chat-card,
.global-predictions-card,
.rules-card,
.admin-card {
  background: #FFFFFF;
  border-color: #BFDDF0;
}

.app-topbar {
  background: radial-gradient(circle at right top, rgba(140, 192, 235, 0.20), transparent 22rem),
    linear-gradient(135deg, #FFFFFF, #FFFFFF 48%, rgba(191, 221, 240, 0.42));
  border-color: #BFDDF0;
}

.app-nav {
  background: rgba(255, 255, 255, 0.92);
  border-color: #BFDDF0;
}

.home-menu-panel::before,
.match-card::before,
.auth-card::before,
.app-topbar::before {
  background: linear-gradient(90deg, #8CC0EB, #BFDDF0, #FFF2DE, #FFFDF4);
}

.filter-button,
.status-pill,
.match-status,
.home-panel-stat,
.points-box,
.prediction-locked,
.prediction-empty,
.my-prediction-box,
.empty-state-card {
  background: #FFFDF4;
  border-color: #BFDDF0;
}

.filter-button.active,
.nav-button.active,
.primary-button,
.chat-send-button {
  background: linear-gradient(135deg, #8CC0EB, #4F8FC7);
  color: #FFFFFF;
}

.filter-button:hover,
.nav-button:hover,
.link-button:hover {
  background: #BFDDF0;
  color: #18364A;
}

input,
select,
textarea {
  background: #FFFFFF;
  border-color: #BFDDF0;
  color: #18364A;
}

input:focus,
select:focus,
textarea:focus {
  border-color: #8CC0EB;
  box-shadow: 0 0 0 4px rgba(140, 192, 235, 0.18);
}

thead th,
.chat-date-separator span {
  background: #BFDDF0;
  color: #18364A;
}

tbody tr:hover,
.match-row-summary:hover {
  background: #FFFDF4;
}

.success-message,
.status-open {
  background: #BFDDF0;
  color: #18364A;
}

.error-message,
.status-closed,
.status-finished,
.status-no,
.status-warning {
  background: #FFF2DE;
  color: #7B3C3C;
}

/* ==========================================================
   PALETA PASTEL CON FONDO BLANCO
   Cambio SOLO visual de colores. No modifica tamaños, grids,
   responsive, posiciones ni comportamiento.
   ========================================================== */

:root {
  --varra-bg: #FFFFFF;
  --varra-bg-soft: #FFFDF4;
  --varra-card: #FFFDF4;
  --varra-card-soft: #FFF2DE;
  --varra-green: #8CC0EB;
  --varra-green-dark: #4F8FC7;
  --varra-lime: #BFDDF0;
  --varra-yellow: #FFF2DE;
  --varra-red: #D95C5C;
  --varra-blue: #8CC0EB;
  --varra-ink: #173349;
  --varra-muted: #607B90;
  --varra-border: #BFDDF0;
  --varra-shadow: 0 20px 45px rgba(23, 51, 73, 0.15);
  --varra-shadow-soft: 0 12px 28px rgba(23, 51, 73, 0.09);
}

html,
body {
  background: #FFFFFF;
  color: #173349;
}

.view,
.app-section,
.main-content,
.auth-view,
.app-view {
  background: transparent;
  color: #173349;
}

body {
  background:
    radial-gradient(circle at 8% 0%, rgba(191, 221, 240, 0.34), transparent 28rem),
    radial-gradient(circle at 92% 10%, rgba(255, 235, 204, 0.46), transparent 26rem),
    #FFFFFF;
}

.card,
.auth-card,
.table-card,
.filters-card,
.profile-card,
.match-card,
.match-row-card,
.home-menu-panel,
.chat-card,
.global-predictions-card,
.rules-card,
.admin-card,
.wizard-card,
.prediction-card,
.empty-state-card,
.admin-form-card,
.admin-users-card,
.ranking-table-card,
#rankingSection .ranking-table-card,
#rankingSection .table-card,
#rankingSection .card {
  background: #FFFDF4;
  border-color: rgba(191, 221, 240, 0.95);
  box-shadow: 0 14px 32px rgba(23, 51, 73, 0.10);
  color: #173349;
}

.card:hover,
.home-menu-panel:hover,
.match-row-card:hover,
.match-card:hover,
.chat-card:hover,
.profile-card:hover,
#rankingSection .ranking-table-card:hover,
#rankingSection .table-card:hover,
#rankingSection .card:hover {
  box-shadow: 0 20px 46px rgba(23, 51, 73, 0.15);
}

.app-topbar,
.auth-card,
.chat-card,
.profile-card,
.rules-card,
.global-predictions-card,
.admin-card {
  background:
    radial-gradient(circle at top right, rgba(140, 192, 235, 0.24), transparent 18rem),
    linear-gradient(135deg, #FFFDF4 0%, #FFFDF4 48%, #FFF2DE 100%);
  border-color: #BFDDF0;
}

.app-nav,
.matches-filters,
.filters-card,
.chat-form,
.chat-input-area,
.profile-edit-card,
.rules-hero,
.rules-block,
.global-step-card,
.prediction-form,
.prediction-form-redesign,
.prediction-layout,
.prediction-form-row,
.prediction-form-row-scorer,
.match-row-details,
.match-card-footer,
.admin-panel,
.admin-section-card,
.modal-card {
  background: #FFF2DE;
  border-color: rgba(191, 221, 240, 0.95);
  color: #173349;
}

.home-menu-panel::before,
.match-card::before,
.auth-card::before,
.app-topbar::before,
.card::before {
  background: linear-gradient(90deg, #8CC0EB, #BFDDF0, #FFF2DE, #FFFDF4);
}

h1,
h2,
h3,
h4,
.section-title,
.card-title,
.home-panel-title,
.match-team-name,
.ranking-user-cell,
.profile-row strong,
strong {
  color: #173349;
}

p,
small,
.help-text,
.section-subtitle,
.card-subtitle,
.home-panel-description,
.profile-row span,
.match-meta,
.muted,
.feedback-text {
  color: #607B90;
}

.eyebrow,
.eyebrow.dark,
a,
.link-button {
  color: #4F8FC7;
}

input,
select,
textarea,
.chat-message-input,
.custom-scorer-search,
.global-player-search,
.global-team-search {
  background: #FFFFFF;
  border-color: #BFDDF0;
  color: #173349;
}

input:hover,
select:hover,
textarea:hover,
.chat-message-input:hover {
  background: #FFFFFF;
  border-color: #8CC0EB;
}

input:focus,
select:focus,
textarea:focus,
.chat-message-input:focus {
  background: #FFFFFF;
  border-color: #8CC0EB;
  box-shadow: 0 0 0 4px rgba(140, 192, 235, 0.24);
}

.primary-button,
.filter-button.active,
.nav-button.active,
.chat-send-button,
.admin-primary-button,
.wizard-next-button,
.wizard-finish-button {
  background: linear-gradient(135deg, #8CC0EB 0%, #4F8FC7 100%);
  border-color: #8CC0EB;
  color: #FFFFFF;
  box-shadow: 0 12px 24px rgba(79, 143, 199, 0.24);
}

.primary-button:hover,
.filter-button.active:hover,
.nav-button.active:hover,
.chat-send-button:hover,
.admin-primary-button:hover,
.wizard-next-button:hover,
.wizard-finish-button:hover {
  background: linear-gradient(135deg, #4F8FC7 0%, #8CC0EB 100%);
  color: #FFFFFF;
  box-shadow: 0 16px 32px rgba(79, 143, 199, 0.30);
}

.secondary-button,
.filter-button,
.nav-button,
.ghost-button,
.chat-load-more-button,
.admin-secondary-button,
.wizard-back-button,
.custom-scorer-team-button,
.global-team-option,
.global-player-option {
  background: #FFFFFF;
  border-color: #BFDDF0;
  color: #173349;
}

.app-logout-button {
  background: linear-gradient(135deg, #8CC0EB 0%, #4F8FC7 100%) !important;
  border-color: #8CC0EB !important;
  color: #FFFFFF !important;
  box-shadow: 0 12px 24px rgba(79, 143, 199, 0.24);
}

.app-logout-button:hover {
  background: linear-gradient(135deg, #4F8FC7 0%, #8CC0EB 100%) !important;
  border-color: #4F8FC7 !important;
  color: #FFFFFF !important;
  box-shadow: 0 16px 32px rgba(79, 143, 199, 0.30);
}

.secondary-button:hover,
.filter-button:hover,
.nav-button:hover,
.ghost-button:hover,
.chat-load-more-button:hover,
.admin-secondary-button:hover,
.wizard-back-button:hover,
.custom-scorer-team-button:hover,
.global-team-option:hover,
.global-player-option:hover {
  background: #BFDDF0;
  border-color: #8CC0EB;
  color: #173349;
}

.danger-button,
.delete-button,
.admin-danger-button {
  background: #FFE0D8;
  border-color: rgba(217, 92, 92, 0.45);
  color: #9A3434;
}

.danger-button:hover,
.delete-button:hover,
.admin-danger-button:hover {
  background: #D95C5C;
  border-color: #D95C5C;
  color: #FFFFFF;
}

.status-pill,
.match-status,
.home-panel-stat,
.points-box,
.prediction-locked,
.prediction-empty,
.my-prediction-box,
.empty-state-card,
.chat-date-separator span,
.badge,
.home-panel-alert,
.nav-chat-alert {
  background: #BFDDF0;
  border-color: #8CC0EB;
  color: #173349;
}

.status-open,
.success-message,
.status-yes {
  background: #DDF3E5;
  border-color: #58A86F;
  color: #245B35;
}

.status-closed,
.status-no {
  background: #FFE0D8;
  border-color: #D95C5C;
  color: #8F3030;
}

.status-finished,
.status-warning {
  background: #BFDDF0;
  border-color: #4F8FC7;
  color: #173349;
}

.error-message {
  background: #FFE0D8;
  border-color: #D95C5C;
  color: #8F3030;
}

.warning-message,
.info-message {
  background: #FFF2DE;
  border-color: #E5A93A;
  color: #7A5520;
}

table,
.ranking-table,
.admin-users-table {
  background: #FFFDF4;
  color: #173349;
}

thead th,
#rankingSection .ranking-table th,
#rankingSection .ranking-table thead th:nth-child(1),
#rankingSection .ranking-table thead th:nth-child(2),
#rankingSection thead th:nth-child(1),
#rankingSection thead th:nth-child(2),
.admin-users-table th {
  background: #BFDDF0 !important;
  color: #173349;
  border-color: rgba(140, 192, 235, 0.65);
}

tbody td,
#rankingSection .ranking-table td,
.admin-users-table td {
  background: #FFFDF4;
  border-color: rgba(191, 221, 240, 0.76);
  color: #173349;
}

tbody tr:hover td,
.match-row-summary:hover {
  background: #FFF2DE;
}

#rankingSection .ranking-table td:nth-child(3) strong {
  background: #4F8FC7;
  color: #FFFFFF;
}

/* Mantener SIEMPRE podio oro / plata / bronce */
#rankingSection .ranking-table-card,
#rankingSection .table-card,
#rankingSection .card {
  box-shadow: none !important;
}

#rankingSection .ranking-table th,
#rankingSection .ranking-table td {
  box-shadow: none !important;
}

#rankingSection .ranking-table tbody tr.ranking-position-1 td,
#rankingSection tbody tr.ranking-position-1 td {
  background: #FFE8A3 !important;
  color: #5F4300 !important;
  border-color: rgba(199, 143, 28, 0.42) !important;
}

#rankingSection .ranking-table tbody tr.ranking-position-2 td,
#rankingSection tbody tr.ranking-position-2 td {
  background: #E8EEF3 !important;
  color: #304654 !important;
  border-color: rgba(128, 143, 156, 0.42) !important;
}

#rankingSection .ranking-table tbody tr.ranking-position-3 td,
#rankingSection tbody tr.ranking-position-3 td {
  background: #F0C39A !important;
  color: #5A3313 !important;
  border-color: rgba(161, 94, 42, 0.42) !important;
}

#rankingSection .ranking-table tbody tr.ranking-position-1 td:nth-child(3) strong,
#rankingSection tbody tr.ranking-position-1 td:nth-child(3) strong {
  background: rgba(95, 67, 0, 0.14);
  color: #4E3900;
}

#rankingSection .ranking-table tbody tr.ranking-position-2 td:nth-child(3) strong,
#rankingSection tbody tr.ranking-position-2 td:nth-child(3) strong {
  background: rgba(48, 70, 84, 0.12);
  color: #263744;
}

#rankingSection .ranking-table tbody tr.ranking-position-3 td:nth-child(3) strong,
#rankingSection tbody tr.ranking-position-3 td:nth-child(3) strong {
  background: rgba(90, 51, 19, 0.14);
  color: #4C2B10;
}

/* Mantener SIEMPRE partidos con borde/sombra según estado */
.match-row-card {
  background: #FFFFFF;
  border-color: #BFDDF0;
}

.match-row-card.status-open {
  border-color: #3FA463 !important;
  box-shadow:
    0 0 0 3px rgba(63, 164, 99, 0.28),
    0 18px 42px rgba(63, 164, 99, 0.26) !important;
}

.match-row-card.status-closed {
  border-color: #D95C5C !important;
  box-shadow:
    0 0 0 3px rgba(217, 92, 92, 0.28),
    0 18px 42px rgba(217, 92, 92, 0.24) !important;
}

.match-row-card.status-finished {
  border-color: #4F8FC7 !important;
  box-shadow:
    0 0 0 3px rgba(79, 143, 199, 0.30),
    0 18px 42px rgba(79, 143, 199, 0.26) !important;
}

.match-row-card.status-open .match-row-summary {
  background: linear-gradient(135deg, rgba(63, 164, 99, 0.08), rgba(255, 255, 255, 0.98));
}

.match-row-card.status-closed .match-row-summary {
  background: linear-gradient(135deg, rgba(217, 92, 92, 0.08), rgba(255, 255, 255, 0.98));
}

.match-row-card.status-finished .match-row-summary {
  background: linear-gradient(135deg, rgba(140, 192, 235, 0.16), rgba(255, 255, 255, 0.98));
}

/* Al abrir partido: el desplegable grande toma el color del estado */
.match-row-card.status-open.is-open .match-row-details {
  background: linear-gradient(135deg, rgba(63, 164, 99, 0.16), rgba(221, 243, 229, 0.94));
  border-color: rgba(63, 164, 99, 0.34);
}

.match-row-card.status-closed.is-open .match-row-details {
  background: linear-gradient(135deg, rgba(217, 92, 92, 0.14), rgba(255, 224, 216, 0.94));
  border-color: rgba(217, 92, 92, 0.34);
}

.match-row-card.status-finished.is-open .match-row-details {
  background: linear-gradient(135deg, rgba(140, 192, 235, 0.24), rgba(191, 221, 240, 0.94));
  border-color: rgba(79, 143, 199, 0.34);
}

/* Dentro del desplegable: SOLO las cajas visuales reales van en crema */
.match-row-card.is-open .prediction-form,
.match-row-card.is-open .prediction-form-redesign,
.match-row-card.is-open .custom-scorer-picker,
.match-row-card.is-open .match-extra-info,
.match-row-card.is-open .match-result,
.match-row-card.is-open .my-prediction-box,
.match-row-card.is-open .prediction-locked,
.match-row-card.is-open .prediction-empty,
.match-row-card.is-open .points-box,
.match-row-card.is-open .public-prediction-row,
.match-row-card.is-open .finished-summary-card {
  background: #FFF2DE;
  border-color: #BFDDF0;
  background-clip: padding-box;
}

/* Este es el wrapper exterior: no debe pintar crema porque provoca esquinas cuadradas */
.match-row-card.is-open .match-card-footer {
  background: transparent !important;
  border-color: transparent !important;
}

/* Los wrappers internos tampoco deben pintar fondo */
.match-row-card.is-open .prediction-layout,
.match-row-card.is-open .prediction-form-row,
.match-row-card.is-open .prediction-form-row-scorer,
.match-row-card.is-open .finished-summary-panel,
.match-row-card.is-open .finished-summary-others {
  background: transparent !important;
  border-color: transparent !important;
}

/* Filas internas del resultado final y del pronóstico: blancas con borde azul para contrastar sobre crema */
.match-row-card.is-open .finished-real-row,
.match-row-card.is-open .finished-real-row-main,
.match-row-card.is-open .finished-prediction-row,
.match-row-card.is-open .finished-prediction-row:first-child,
.match-row-card.is-open .finished-summary-empty {
  background: #FFFFFF;
  border-color: #BFDDF0;
}

/* Evita que se vea una esquina rara del fondo azul/verde detrás del contenedor redondeado */
.match-row-card.is-open .finished-summary-card {
  overflow: hidden;
  box-shadow: none;
  background-clip: padding-box;
}

/* Tarjetas de otros jugadores dentro del resultado final */
.match-row-card.is-open .finished-public-card {
  background: #FFFFFF;
  border-color: #BFDDF0;
}

/* Badges de puntos dentro del partido finalizado */
.match-row-card.is-open .finished-prediction-points-badge,
.match-row-card.is-open .finished-public-points,
.match-row-card.is-open .finished-total-points {
  background: #FFFFFF;
  border: 1px solid #BFDDF0;
  color: #2F5E78;
}

.chat-message-bubble,
.chat-message-content,
.chat-message.is-own .chat-message-bubble,
.chat-message-own .chat-message-bubble {
  background: #FFFFFF;
  border-color: #BFDDF0;
  color: #173349;
}

.chat-message.is-own .chat-message-bubble,
.chat-message-own .chat-message-bubble {
  background: #BFDDF0;
}

.custom-scorer-dropdown,
.global-team-dropdown,
.global-player-dropdown,
.dropdown-menu {
  background: #FFF2DE;
  border-color: #BFDDF0;
  box-shadow: 0 18px 38px rgba(23, 51, 73, 0.16);
}

.custom-cards-picker.is-open .custom-cards-dropdown {
  display: block;
}

.custom-cards-options {
  display: grid;
  gap: 8px;
}

.custom-scorer-team-button,
.custom-scorer-player-option,
.custom-cards-option,
.custom-scorer-empty,
.global-team-option,
.global-player-option {
  border: 1px solid #BFDDF0 !important;
}

.custom-scorer-player-option,
.custom-cards-option,
.global-team-option,
.global-player-option {
  background: #FFFFFF;
}

.custom-scorer-player-option:hover,
.custom-scorer-player-option.is-selected,
.custom-cards-option:hover,
.custom-cards-option.is-selected,
.custom-scorer-option:hover,
.custom-scorer-option.is-active,
.global-team-option:hover,
.global-player-option:hover,
.global-team-option.is-selected,
.global-player-option.is-selected {
  background: #BFDDF0;
  border-color: #8CC0EB !important;
  color: #173349;
}

hr,
.divider {
  border-color: rgba(191, 221, 240, 0.85);
}

::selection {
  background: #8CC0EB;
  color: #FFFFFF;
}