/* =========================================================
   GLOBAL / COMMON STYLES
   ========================================================= */
:root {
  --bg: #f6f7f9;
  --bg2: #ffffff;
  --panel: rgba(0, 0, 0, .03);
  --panel2: rgba(0, 0, 0, .05);
  --line: rgba(0, 0, 0, .10);
  --text: rgba(0, 0, 0, .92);
  --muted: rgba(0, 0, 0, .62);
  --muted2: rgba(0, 0, 0, .48);
  --accent: #1f8f2a;
  --accent2: rgba(31, 143, 42, .12);
  --danger: #d62525;
  --danger2: rgba(214, 37, 37, .12);
  --shadow: 0 12px 30px rgba(0, 0, 0, .10);
  --rad: 18px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --tagH: 44px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--text);
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
  color-scheme: light;
}

/* BUTTONS */
button {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
  white-space: nowrap;
}

button.primary {
  border-color: var(--accent);
  background: rgba(31, 143, 42, .08);
  color: var(--accent);
}

button.danger {
  border-color: rgba(214, 37, 37, .30);
  background: rgba(214, 37, 37, .06);
  color: red;
}

button[disabled] {
  opacity: .45;
  cursor: not-allowed;
  filter: grayscale(40%);
  box-shadow: none;
}

/* HEADER */
.siteHeader {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}

.headerTop {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 12px 0;
  width: 95%;
  margin: 0 auto;
}

.logoWrap {
  grid-column: 2;
  justify-self: center;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.logoWrap img {
  width: min(420px, 60vw);
  height: auto;
  display: block;
  opacity: .98;
}

.headerActions {
  grid-column: 3;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.loginStatus {
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* HAMBURGER */
.hamburgerBtn {
  grid-column: 1;
  justify-self: start;
  align-self: center;
  position: static;
  transform: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, .04);
  border: 1px solid var(--line);
  box-shadow: none;
  font-size: 22px;
  color: var(--text);
}

/* SIDE MENU */
.sideMenuOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  z-index: 9000;
}

.sideMenuOverlay.open {
  opacity: 1;
  pointer-events: auto;
}

.sideMenu {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(280px, 82vw);
  min-height: 100vh;
  background: #0a0f1a;
  color: #fff;
  z-index: 9001;
  transform: translateX(-100%);
  transition: transform .24s ease;
  display: flex;
  flex-direction: column;
}

.sideMenu.open {
  transform: translateX(0);
}

.sideMenuHeader {
  height: 64px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  background: #080d15;
}

.sideMenuHeader strong {
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .04em;
}

#closeSideMenuBtn {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 999px;
  background: transparent !important;
  border: 0 !important;
  color: #fff !important;
  box-shadow: none !important;
}

.sideMenuContent {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #0a0f1a;
  flex: 1;
}

.sideMenuContent button {
  width: 100%;
  padding: 14px 16px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: rgba(255, 255, 255, .10) !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  color: #fff !important;
  box-shadow: none !important;
  text-align: left;
}

.sideMenuContent button.active {
  background: rgba(31, 143, 42, .22) !important;
  border-color: rgba(31, 143, 42, .62) !important;
  color: #9cff8d !important;
  box-shadow: 0 0 0 1px rgba(31, 143, 42, .22) inset !important;
}

#authMenuBtn.logout {
  background: rgba(214, 37, 37, .18) !important;
  border-color: rgba(214, 37, 37, .45) !important;
  color: #ff7b7b !important;
}

#authMenuBtn.login {
  background: rgba(31, 143, 42, .16) !important;
  border-color: rgba(31, 143, 42, .40) !important;
  color: #7cff6b !important;
}

/* FOOTER */
.siteFooter {
  margin-top: 40px;
  background: var(--panel);
  border-top: 1px solid var(--line);
  padding: 20px;
  text-align: center;
}

.footerSocials {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.footerSocials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.footerSocials img {
  height: 22px;
  width: auto;
  object-fit: contain;
  display: block;
  opacity: .9;
  transition: opacity .12s ease, transform .12s ease;
}

.footerSocials a:hover img {
  opacity: 1;
  transform: translateY(-1px);
}

.footerDisclaimer {
  font-size: 11px;
  color: var(--muted2);
  margin-top: 6px;
  line-height: 1.4;
}

/* LOGIN / FORMS COMMON */
.loginForm {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.loginHelp {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.formGroup {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.formGroup label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}

/* RESPONSIVE COMMON */
@media (max-width: 760px) {
  .headerTop {
    grid-template-columns: 1fr auto 1fr;
    padding: 10px 12px;
  }

  .logoWrap {
    grid-column: 2;
    justify-self: center;
    padding-left: 0;
  }

  .logoWrap img {
    width: min(320px, 64vw);
  }

  .headerActions {
    grid-column: 3;
    justify-self: end;
  }

  .loginBtn {
    min-width: auto;
    padding: 8px 12px;
    font-size: 12px;
  }
}

.modalOverlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0, 0, 0, .55);
  z-index: 9999;
}

.modalOverlay.open {
  display: flex;
}

.modal {
  width: min(520px, 92vw);
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--bg2);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.modalHead {
  position: relative;
  padding: 14px 56px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.modalTitle {
  font-weight: 950;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 13px;
  text-align: center;
  min-width: 0;
}

.modalX {
  appearance: none;
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
}

.modalX:hover {
  border-color: var(--line);
  background: rgba(0, 0, 0, .04);
  color: var(--text);
}

.modalBody {
  padding: 16px;
}

.modalActions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
  padding: 14px 16px;
  border-top: 1px solid var(--line);
  background: var(--panel);
}

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

.loginActions #loginSubmit {
  grid-column: 1 / -1;
  width: 100%;
}

.loginActions #loginForgotPassword,
.loginActions #loginRequestUser {
  width: 100%;
  white-space: normal;
  line-height: 1.2;
}

@media (max-width: 380px) {
  .loginActions {
    grid-template-columns: 1fr;
  }
}

.appNotification {
  max-width: 440px;
}

.appNotificationBox {
  display: flex;
  align-items: center;
  gap: 14px;
}

.appNotificationIcon {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-weight: 950;
  font-size: 20px;
}

.appNotification--error .appNotificationIcon {
  color: #b42318;
  background: rgba(180, 35, 24, .12);
}

.appNotification--success .appNotificationIcon {
  color: #1f8f2a;
  background: rgba(31, 143, 42, .12);
}

.appNotificationMsg {
  color: var(--text);
  font-size: 15px;
  font-weight: 750;
  line-height: 1.45;
}

#profileSuccessModal .successBox {
  display: flex;
  align-items: center;
  gap: 12px;
}

#profileSuccessModal .profileSuccessIcon {
  width: 42px !important;
  height: 42px !important;
  border-radius: 999px;
  background: rgba(31, 143, 42, .12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 42px;
}

#profileSuccessModal .profileSuccessIcon svg {
  width: 22px !important;
  height: 22px !important;
  display: block;
  overflow: visible;
  transform: none !important;
}

#profileSuccessModal .profileSuccessIcon path {
  fill: none !important;
  stroke: #1f8f2a !important;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: none !important;
}

.modalInput {
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .75);
  color: var(--text);
  font-weight: 850;
  outline: none;
}

.modalInput:focus {
  border-color: rgba(31, 143, 42, .45);
  box-shadow: 0 0 0 3px rgba(31, 143, 42, .12);
}

.loginForm {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.formGroup {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.formGroup label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}

#loginRequestUser {
  border-color: rgba(37, 99, 235, .30);
  background: rgba(37, 99, 235, .06);
  color: #2563eb;
}

/* =========================================================
   PAGE: administration.html scoped with body:has(#gateBack)
   ========================================================= */
body:has(#gateBack) {
  height: 100%;
}

body:has(#gateBack) {
  margin: 0;
  font-family: var(--sans);
  color: var(--text);
  color-scheme: light;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: transparent;
}

body:has(#gateBack) .wrap {
  width: 95%;
  margin: 10px auto 25px;
  flex: 1;
}

body:has(#gateBack) .siteHeader {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}

body:has(#gateBack) .headerTop {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 12px 20px;
}

body:has(#gateBack) .logoWrap {
  grid-column: 2;
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  padding-left: 7px;
  cursor: pointer;
}

body:has(#gateBack) .logoWrap img {
  width: min(420px, 60vw);
  height: auto;
  display: block;
  opacity: .98;
}

body:has(#gateBack) .siteFooter {
  margin-top: auto;
  background: var(--panel);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 20px rgba(0, 0, 0, .08);
}

body:has(#gateBack) .footerInner {
  max-width: 70%;
  margin: 0 auto;
  padding: 10px 0 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

body:has(#gateBack) .footerTop {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  font-size: 13px;
}

body:has(#gateBack) .footerAuthor {
  justify-self: start;
  white-space: nowrap;
}

body:has(#gateBack) .footerInvite {
  justify-self: end;
  white-space: nowrap;
}

body:has(#gateBack) .footerInvite a {
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
}

body:has(#gateBack) .footerInvite a:hover {
  text-decoration: underline;
}

body:has(#gateBack) .footerDisclaimer {
  font-size: 11px;
  color: var(--muted2);
  text-align: center;
  opacity: 0.6;
}

body:has(#gateBack) .footerSocials {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-self: center;
}

body:has(#gateBack) .footerSocials img {
  height: 22px;
  object-fit: contain;
  opacity: .9;
  transition: opacity .12s ease, transform .12s ease;
}

body:has(#gateBack) .footerSocials a:hover img {
  opacity: 1;
  transform: translateY(-1px);
}

@media (max-width: 760px) {
  body:has(#gateBack) .footerTop {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
  }

  body:has(#gateBack) .footerAuthor {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: normal;
    text-align: center;
  }

  body:has(#gateBack) .footerInvite {
    white-space: normal;
    text-align: center;
  }

  body:has(#gateBack) .footerDisclaimer {
    margin-top: 6px;
    font-size: 10px;
    text-align: center;
  }
}

body:has(#gateBack) .card {
  border-radius: var(--rad);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .72);
  box-shadow: var(--shadow);
  overflow: hidden;
}

body:has(#gateBack) .cardHead {
  padding: 14px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

body:has(#gateBack) .cardTitle {
  display: none !important;
  margin: 0;
  font-size: 16px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
  display: inline-flex;
  gap: 10px;
  align-items: center;
}

body:has(#gateBack) .toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
  width: 100%;
}

body:has(#gateBack) .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .65);
  cursor: pointer;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--text);
  box-shadow: 0 10px 18px rgba(0, 0, 0, .08);
  transition: transform .12s ease, background .12s ease, border-color .12s ease, opacity .12s ease;
  user-select: none;
}

body:has(#gateBack) .btn:hover {
  transform: translateY(-1px);
  background: var(--panel2);
}

body:has(#gateBack) .btn:disabled {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
}

body:has(#gateBack) .btnPrimary {
  border-color: rgba(31, 143, 42, .35);
  background: rgba(31, 143, 42, .12);
}

body:has(#gateBack) .btnDanger {
  border-color: rgba(210, 37, 37, .35);
  background: rgba(210, 37, 37, .10);
}

body:has(#gateBack) .btnGhost {
  background: transparent;
  box-shadow: none;
}

body:has(#gateBack) .modeTabs {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .55);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: 0 10px 18px rgba(0, 0, 0, .06);
}

body:has(#gateBack) .tabBtn {
  border: 0;
  background: transparent;
  padding: 10px 12px;
  cursor: pointer;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}

body:has(#gateBack) .tabBtn:hover {
  background: var(--panel2);
  color: var(--text);
}

body:has(#gateBack) .tabBtn.active {
  background: rgba(31, 143, 42, .12);
  color: var(--text);
  border-left: 1px solid rgba(31, 143, 42, .30);
  border-right: 1px solid rgba(31, 143, 42, .30);
}

body:has(#gateBack) .tabBtn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

body:has(#gateBack) .layout {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 14px;
  padding: 14px;
}

body:has(#gateBack) .panel {
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255, 255, 255, .55);
}

body:has(#gateBack) .panelHead {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: rgba(0, 0, 0, .01);
  flex-wrap: wrap;
}

body:has(#gateBack) .panelTitle {
  margin: 0;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

body:has(#gateBack) .search {
  width: 100%;
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: rgba(0, 0, 0, .01);
}

body:has(#gateBack) .input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, .70);
  color: var(--text);
  outline: none;
  font-weight: 700;
}

body:has(#gateBack) .list {
  display: flex;
  flex-direction: column;
  max-height: 70vh;
  overflow: auto;
}

body:has(#gateBack) .row {
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  cursor: pointer;
  background: rgba(0, 0, 0, 0);
  transition: background .12s ease;
}

body:has(#gateBack) .row:hover {
  background: rgba(0, 0, 0, .03);
}

body:has(#gateBack) .row.active {
  background: rgba(31, 143, 42, .10);
  border-left: 4px solid var(--accent);
  padding-left: 8px;
}

body:has(#gateBack) .rowTitle {
  font-weight: 950;
  letter-spacing: .02em;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body:has(#gateBack) .badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .65);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

body:has(#gateBack) .hint {
  padding: 12px;
  color: var(--muted);
  font-size: 12px;
}

body:has(#gateBack) .right {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

body:has(#gateBack) .detail {
  padding: 12px;
  background: var(--panel);
}

body:has(#gateBack) .detailGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px 12px;
}

@media (max-width: 760px) {
  body:has(#gateBack) .detailGrid {
    grid-template-columns: 1fr;
  }

  body:has(#gateBack) .fightInlineResultSelect {
    min-width: 0;
  }
}

body:has(#gateBack) .kv {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, .65);
  min-height: 54px;
}

body:has(#gateBack) .k {
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}

body:has(#gateBack) .v {
  font-weight: 900;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body:has(#gateBack) .v.mono {
  font-family: var(--mono);
  color: var(--muted);
}

body:has(#gateBack) .imgPreview {
  display: block;
  width: min(720px, 100%);
  max-height: 260px;
  margin: 0 auto;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--panel);
}

body:has(#gateBack) .fightTable {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

body:has(#gateBack) .fightTable th,
body:has(#gateBack) .fightTable td {
  border-top: 1px solid var(--line);
  padding: 10px 10px;
  text-align: left;
  vertical-align: top;
  font-size: 13px;
}

body:has(#gateBack) .fightTable thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg2);
  box-shadow: 0 1px 0 var(--line);
}

body:has(#gateBack) .fightActions {
  display: inline-flex;
  gap: 8px;
  flex-wrap: nowrap;
  justify-content: flex-end;
  white-space: nowrap;
}

body:has(#gateBack) .fightActions .btn {
  padding: 9px 10px;
  gap: 6px;
}

body:has(#gateBack) .fightInlineResultSelect {
  min-width: 180px;
  width: 100%;
  font-size: 12px;
  font-weight: 900;
}

body:has(#gateBack) .muted {
  color: var(--muted);
}

@media (max-width: 760px) {
  body:has(#gateBack) .wrap {
    width: 92vw;
  }

  body:has(#gateBack) .layout {
    grid-template-columns: 1fr;
  }

  body:has(#gateBack) .list {
    max-height: 40vh;
  }

  body:has(#gateBack) .detailGrid {
    grid-template-columns: 1fr;
  }
}

body:has(#gateBack) .modalBack {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .50);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 2000;
}

body:has(#gateBack) .modalBack.open {
  display: flex;
}

body:has(#gateBack) .modal {
  width: min(980px, 96vw);
  max-height: 90vh;
  overflow: auto;
  background: rgb(245, 245, 245);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
}

body:has(#gateBack) .modalHead {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 3;
}

body:has(#gateBack) .modalTitle {
  margin: 0;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--muted);
}

body:has(#gateBack) .modalBody {
  padding: 14px;
}

body:has(#gateBack) .formGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 12px;
}

body:has(#gateBack) .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

body:has(#gateBack) .label {
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

body:has(#gateBack) .control,
body:has(#gateBack) select.control,
body:has(#gateBack) textarea.control {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, .70);
  color: var(--text);
  outline: none;
  font-weight: 750;
}

body:has(#gateBack) textarea.control {
  min-height: 84px;
  resize: vertical;
}

body:has(#gateBack) .fieldRow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 12px;
}

body:has(#gateBack) .fieldRow.fightTopRow {
  align-items: end;
}

body:has(#gateBack) .fieldRow.fightTopRow .control {
  width: 100%;
}

body:has(#gateBack) .modalFoot {
  padding: 12px 14px;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
  background: #fff;
}

body:has(#gateBack) .sepTitle {
  grid-column: 1 / -1;
  margin: 6px 0 0;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
  color: var(--muted);
  font-weight: 950;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: 11px;
}

body:has(#gateBack) .toast {
  position: fixed;
  right: 14px;
  bottom: 14px;
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: var(--shadow);
  color: var(--text);
  display: none;
  max-width: min(520px, 92vw);
  z-index: 3000;
}

body:has(#gateBack) .toast.open {
  display: block;
}

body:has(#gateBack) .toastTitle {
  font-weight: 950;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 4px;
}

body:has(#gateBack) .toastMsg {
  font-weight: 750;
  font-size: 13px;
}

body:has(#gateBack) .eventsGroups {
  display: flex;
  flex-direction: column;
}

body:has(#gateBack) .group {
  border-top: 1px solid var(--line);
}

body:has(#gateBack) .group:first-child {
  border-top: 0;
}

body:has(#gateBack) .groupSummary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, .01);
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--muted);
}

body:has(#gateBack) .groupSummary::-webkit-details-marker {
  display: none;
}

body:has(#gateBack) .groupSummary::after {
  content: "▾";
  opacity: .7;
  transform: translateY(-1px);
}

body:has(#gateBack) .group[open] .groupSummary::after {
  content: "▴";
}

body:has(#gateBack) .group .list {
  max-height: 34vh;
}

@media (max-width: 760px) {
  body:has(#gateBack) .group .list {
    max-height: 28vh;
  }
}

body:has(#gateBack) .gateBack {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 5000;
}

body:has(#gateBack) .gateBack.open {
  display: flex;
}

body:has(#gateBack) .gate {
  width: min(520px, 94vw);
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .92);
  box-shadow: var(--shadow);
  overflow: hidden;
}

body:has(#gateBack) .gateHead {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

body:has(#gateBack) .gateTitle {
  margin: 0;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--muted);
}

body:has(#gateBack) .gateBody {
  padding: 14px;
}

body:has(#gateBack) .gateHint {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}

body:has(#gateBack) .gateRow {
  display: flex;
  gap: 10px;
  align-items: center;
}

body:has(#gateBack) .gateRow .control {
  flex: 1;
}

body:has(#gateBack) .gateError {
  margin-top: 10px;
  color: rgba(210, 37, 37, .95);
  font-weight: 850;
  font-size: 13px;
  display: none;
}

body:has(#gateBack) .gateError.open {
  display: block;
}

body:has(#gateBack) .green {
  color: green !important;
}

body:has(#gateBack) .red {
  color: red !important;
}

body:has(#gateBack) .count {
  color: green;
  font-weight: 900;
  font-size: 12px;
}

body:has(#gateBack) .imgRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

body:has(#gateBack) .imgMeta {
  min-width: 0;
  flex: 1;
}

body:has(#gateBack) .imgName {
  font-weight: 950;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body:has(#gateBack) .imgPath {
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body:has(#gateBack) .imgThumb {
  width: 160px;
  height: 90px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--panel);
  flex: 0 0 auto;
}

body:has(#gateBack) .imgInputRow {
  display: flex;
  align-items: top;
  gap: 10px;
}

body:has(#gateBack) .imgInputRow .control {
  flex: 1;
  min-width: 0;
}

body:has(#gateBack) .imgInputThumb {
  width: 46px;
  height: 46px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--panel);
  flex: 0 0 auto;
  display: none;
  object-position: 100% 0%;
}

body:has(#gateBack) .fighterSide {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

body:has(#gateBack) .fighterName {
  font-weight: 950;
  letter-spacing: .02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1 1 auto;
}

body:has(#gateBack) .fighterAvatar {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid var(--line);
  background: var(--panel);
  flex: 0 0 auto;
  object-position: 100% 0%;
}

body:has(#gateBack) input[type="file"].control {
  padding: 8px 12px;
}

body:has(#gateBack) input[type="file"].control::file-selector-button {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .65);
  border-radius: 999px;
  padding: 11px 10px;
  margin-right: 10px;
  cursor: pointer;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 12px;
}

body:has(#gateBack) .miniSelect {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, .70);
  color: var(--text);
  outline: none;
  font-weight: 850;
  font-size: 12px;
  font-family: var(--mono);
  max-width: min(520px, 100%);
}

body:has(#gateBack) .predTable {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

body:has(#gateBack) .predTable th,
body:has(#gateBack) .predTable td {
  border-top: 1px solid var(--line);
  padding: 10px 10px;
  text-align: left;
  vertical-align: middle;
  font-size: 13px;
}

body:has(#gateBack) .predTable thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg2);
  box-shadow: 0 1px 0 var(--line);
}

body:has(#gateBack) .predChoice {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, .75);
  font-weight: 900;
  outline: none;
  font-family: var(--mono);
  font-size: 12px;
}

body:has(#gateBack) .predActions {
  display: inline-flex;
  gap: 8px;
  justify-content: flex-end;
  width: 100%;
  white-space: nowrap;
}

body:has(#gateBack) tr.predPending {
  background: rgba(255, 237, 167, .60);
}

body:has(#gateBack) tr.predCorrect {
  background: rgba(199, 255, 212, .55);
}

body:has(#gateBack) tr.predWrong {
  background: rgba(255, 201, 201, .55);
}

body:has(#gateBack) .hidden {
  display: none !important;
}

body:has(#gateBack) .footerInner {
  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;

  gap: 10px;
}

body:has(#gateBack) .footerTop {
  display: flex;
  justify-content: center;
}

body:has(#gateBack) .footerSocials {
  display: flex;
  gap: 12px;
  justify-content: center;
}

body:has(#gateBack) .headerTop {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
}

body:has(#gateBack) .logoWrap {
  grid-column: auto;
  justify-self: auto;
  justify-content: center;
  padding-left: 0;
  width: 100%;
}

body:has(#gateBack) .cardHead {
  align-items: stretch;
}

body:has(#gateBack) .modeTabs {
  max-width: 100%;
}

body:has(#gateBack) .toolbar {
  align-items: stretch;
}

body:has(#gateBack) .toolbar .btn,
body:has(#gateBack) .fightActions .btn,
body:has(#gateBack) .predActions .btn {
  min-height: 42px;
}

body:has(#gateBack) .detailGrid {
  align-items: start;
}

body:has(#gateBack) .v {
  white-space: normal;
  word-break: break-word;
}

body:has(#gateBack) .imgRow {
  align-items: center;
}

body:has(#gateBack) .fightTableWrap,
body:has(#gateBack) .predTableWrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 980px) {
  body:has(#gateBack) .wrap {
    width: min(100%, 1180px);
    padding: 0 12px;
    margin: 10px auto 20px;
  }

  body:has(#gateBack) .list {
    max-height: 36vh;
  }

  body:has(#gateBack) .cardHead {
    gap: 14px;
  }

  body:has(#gateBack) .modeTabs,
  body:has(#gateBack) .toolbar {
    width: 100%;
  }

  body:has(#gateBack) .toolbar {
    justify-content: stretch;
  }

  body:has(#gateBack) .toolbar .btn {
    flex: 1 1 220px;
  }

  body:has(#gateBack) .detailGrid,
  body:has(#gateBack) .formGrid,
  body:has(#gateBack) .fieldRow,
  body:has(#gateBack) .fieldRow.fightTopRow {
    grid-template-columns: 1fr !important;
  }

  body:has(#gateBack) .imgRow {
    flex-direction: column;
    align-items: stretch;
  }

  body:has(#gateBack) .imgThumb {
    width: 100%;
    max-width: 320px;
    height: auto;
    aspect-ratio: 16 / 9;
    align-self: center;
  }

  body:has(#gateBack) .gateRow {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (max-width: 760px) {
  body:has(#gateBack) .siteHeader {
    position: sticky;
  }

  body:has(#gateBack) .headerTop {
    padding: 10px 12px;
  }

  body:has(#gateBack) .logoWrap img {
    width: min(320px, 82vw);
  }

  body:has(#gateBack) .wrap {
    width: 100%;
    padding: 0 8px;
    margin: 8px auto 16px;
  }

  body:has(#gateBack) .card,
  body:has(#gateBack) .panel,
  body:has(#gateBack) .modal,
  body:has(#gateBack) .gate {
    border-radius: 14px;
  }

  body:has(#gateBack) .cardHead,
  body:has(#gateBack) .panelHead,
  body:has(#gateBack) .detail,
  body:has(#gateBack) .modalBody,
  body:has(#gateBack) .modalFoot,
  body:has(#gateBack) .gateBody {
    padding-left: 12px;
    padding-right: 12px;
  }

  body:has(#gateBack) .modeTabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  body:has(#gateBack) .tabBtn {
    justify-content: center;
    padding: 11px 8px;
    font-size: 11px;
  }

  body:has(#gateBack) .toolbar {
    display: grid;
    grid-template-columns: 1fr;
  }

  body:has(#gateBack) .toolbar .btn,
  body:has(#gateBack) .fightActions,
  body:has(#gateBack) .predActions {
    width: 100%;
  }

  body:has(#gateBack) .fightActions,
  body:has(#gateBack) .predActions {
    justify-content: stretch;
    flex-wrap: wrap;
  }

  body:has(#gateBack) .fightActions .btn,
  body:has(#gateBack) .predActions .btn {
    flex: 1 1 auto;
  }

  body:has(#gateBack) .search {
    padding: 10px;
  }

  body:has(#gateBack) .input,
  body:has(#gateBack) .control,
  body:has(#gateBack) .miniSelect,
  body:has(#gateBack) .predChoice,
  body:has(#gateBack) .btn {
    font-size: 16px;
  }

  body:has(#gateBack) .list {
    max-height: 32vh;
  }

  body:has(#gateBack) .group .list {
    max-height: 24vh;
  }

  body:has(#gateBack) .modalBack,
  body:has(#gateBack) .gateBack {
    padding: 8px;
  }

  body:has(#gateBack) .modal {
    width: 100%;
    max-height: 92vh;
  }

  body:has(#gateBack) .modalHead,
  body:has(#gateBack) .modalFoot {
    position: sticky;
    background: #fff;
  }

  body:has(#gateBack) .modalFoot {
    bottom: 0;
  }

  body:has(#gateBack) .modalFoot .btn {
    flex: 1 1 100%;
  }

  body:has(#gateBack) .fightTable,
  body:has(#gateBack) .predTable,
  body:has(#gateBack) .fightTable tbody,
  body:has(#gateBack) .predTable tbody,
  body:has(#gateBack) .fightTable tr,
  body:has(#gateBack) .predTable tr,
  body:has(#gateBack) .fightTable td,
  body:has(#gateBack) .predTable td {
    display: block;
    width: 100%;
  }

  body:has(#gateBack) .fightTable thead,
  body:has(#gateBack) .predTable thead {
    display: none;
  }

  body:has(#gateBack) .fightTable tr,
  body:has(#gateBack) .predTable tr {
    border-top: 1px solid var(--line);
    padding: 10px 0;
  }

  body:has(#gateBack) .fightTable tbody tr:first-child,
  body:has(#gateBack) .predTable tbody tr:first-child {
    border-top: 0;
  }

  body:has(#gateBack) .fightTable td,
  body:has(#gateBack) .predTable td {
    border-top: 0;
    padding: 8px 10px;
    text-align: left !important;
  }

  body:has(#gateBack) .fightTable td::before,
  body:has(#gateBack) .predTable td::before {
    display: block;
    margin-bottom: 6px;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
  }

  body:has(#gateBack) .fightTable td:nth-child(1)::before {
    content: "Orden";
  }

  body:has(#gateBack) .fightTable td:nth-child(2)::before {
    content: "Peleador 1";
  }

  body:has(#gateBack) .fightTable td:nth-child(3)::before {
    content: "Peleador 2";
  }

  body:has(#gateBack) .fightTable td:nth-child(4)::before {
    content: "Peso";
  }

  body:has(#gateBack) .fightTable td:nth-child(5)::before {
    content: "Sección";
  }

  body:has(#gateBack) .fightTable td:nth-child(6)::before {
    content: "Resultado";
  }

  body:has(#gateBack) .fightTable td:nth-child(7)::before {
    content: "Acciones";
  }

  body:has(#gateBack) .predTable td:nth-child(1)::before {
    content: "Peleador 1";
  }

  body:has(#gateBack) .predTable td:nth-child(2)::before {
    content: "Peleador 2";
  }

  body:has(#gateBack) .predTable td:nth-child(3)::before {
    content: "Pronóstico";
  }

  body:has(#gateBack) .predTable td:nth-child(4)::before {
    content: "Acciones";
  }

  body:has(#gateBack) .fightTable td[colspan],
  body:has(#gateBack) .predTable td[colspan] {
    padding: 12px 10px;
  }

  body:has(#gateBack) .fightTable td[colspan]::before,
  body:has(#gateBack) .predTable td[colspan]::before {
    content: none;
  }

  body:has(#gateBack) .fighterSide {
    align-items: center;
  }

  body:has(#gateBack) .fighterAvatar {
    width: 42px;
    height: 42px;
  }

  body:has(#gateBack) .detailGrid {
    gap: 8px;
  }

  body:has(#gateBack) .kv {
    min-height: auto;
    padding: 12px;
    border-radius: 12px;
  }

  body:has(#gateBack) .k {
    font-size: 10px;
    margin-bottom: 6px;
  }

  body:has(#gateBack) .v,
  body:has(#gateBack) .v.mono,
  body:has(#gateBack) .imgName,
  body:has(#gateBack) .imgPath,
  body:has(#gateBack) .rowTitle,
  body:has(#gateBack) .fighterName {
    white-space: normal;
    overflow: visible;
    text-overflow: initial;
    word-break: break-word;
    overflow-wrap: anywhere;
    line-height: 1.35;
  }

  body:has(#gateBack) .v {
    font-size: 15px;
  }

  body:has(#gateBack) .v.mono,
  body:has(#gateBack) .imgPath {
    font-size: 13px;
  }

  body:has(#gateBack) .imgRow {
    gap: 10px;
  }

  body:has(#gateBack) .imgThumb {
    max-width: 100%;
  }

  body:has(#gateBack) .fightTable tbody,
  body:has(#gateBack) .predTable tbody {
    display: block;
  }

  body:has(#gateBack) .fightTable tr,
  body:has(#gateBack) .predTable tr {
    border: 1px solid var(--line);
    border-radius: 14px;
    margin-bottom: 10px;
    padding: 6px 0;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .04);
    overflow: hidden;
  }

  body:has(#gateBack) .fightTable tr {
    background: rgba(255, 255, 255, .78);
  }

  body:has(#gateBack) .predTable tr {
    background: rgba(255, 255, 255, .78);
  }

  body:has(#gateBack) .predTable tr.predPending {
    background: rgba(255, 237, 167, .60);
  }

  body:has(#gateBack) .predTable tr.predCorrect {
    background: rgba(199, 255, 212, .55);
  }

  body:has(#gateBack) .predTable tr.predWrong {
    background: rgba(255, 201, 201, .55);
  }

  body:has(#gateBack) .fightTable td,
  body:has(#gateBack) .predTable td {
    padding: 8px 12px 10px;
  }

  body:has(#gateBack) .fightTable td:first-child,
  body:has(#gateBack) .predTable td:first-child {
    padding-top: 12px;
  }

  body:has(#gateBack) .fightTable td:last-child,
  body:has(#gateBack) .predTable td:last-child {
    padding-bottom: 12px;
  }

  body:has(#gateBack) .fightTable td+td,
  body:has(#gateBack) .predTable td+td {
    border-top: 1px dashed rgba(0, 0, 0, .08);
  }

  body:has(#gateBack) .fighterSide {
    align-items: flex-start;
  }

  body:has(#gateBack) .fighterAvatar {
    flex: 0 0 42px;
  }

  body:has(#gateBack) .fightTable td:last-child .fightActions,
  body:has(#gateBack) .predTable td:last-child .predActions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }

  body:has(#gateBack) .fightTable td:last-child .btn,
  body:has(#gateBack) .predTable td:last-child .btn,
  body:has(#gateBack) .fightTable td:last-child .predChoice,
  body:has(#gateBack) .predTable td:last-child .predChoice {
    width: 100%;
  }

  body:has(#gateBack) .modalBody,
  body:has(#gateBack) .modalForm,
  body:has(#gateBack) .formGrid,
  body:has(#gateBack) .fieldRow,
  body:has(#gateBack) .field,
  body:has(#gateBack) .formGrid>*,
  body:has(#gateBack) .fieldRow>* {
    min-width: 0;
  }

  body:has(#gateBack) .control,
  body:has(#gateBack) select.control,
  body:has(#gateBack) textarea.control,
  body:has(#gateBack) input.control {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  @media (max-width: 760px) {
    body:has(#gateBack) .modal {
      overflow-x: hidden;
    }

    body:has(#gateBack) .modalBody {
      overflow-x: hidden;
      padding-bottom: 96px;
    }

    body:has(#gateBack) .modalTitle {
      max-width: calc(100% - 56px);
      line-height: 1.25;
    }

    body:has(#gateBack) .label {
      line-height: 1.35;
    }

    body:has(#gateBack) .control,
    body:has(#gateBack) select.control,
    body:has(#gateBack) textarea.control,
    body:has(#gateBack) input.control {
      padding: 12px;
      border-radius: 12px;
      line-height: 1.3;
      word-break: break-word;
      overflow-wrap: anywhere;
    }

    body:has(#gateBack) select.control {
      white-space: normal;
    }

    body:has(#gateBack) input[type="file"].control {
      padding: 10px;
      font-size: 14px;
    }

    body:has(#gateBack) input[type="file"].control::file-selector-button {
      display: block;
      margin: 0 0 10px 0;
      width: 100%;
      max-width: 100%;
      font-size: 11px;
      padding: 10px 12px;
    }

    body:has(#gateBack) .imgInputRow {
      flex-direction: column;
      align-items: stretch;
    }

    body:has(#gateBack) .imgInputThumb {
      width: 100%;
      max-width: 120px;
      height: auto;
      aspect-ratio: 1 / 1;
      object-fit: cover;
      align-self: flex-start;
    }

    body:has(#gateBack) .modalHead {
      padding-right: 10px;
    }

    body:has(#gateBack) .modalFoot {
      gap: 10px;
      padding-top: 10px;
      box-shadow: 0 -8px 18px rgba(0, 0, 0, .06);
    }
  }

  body:has(#gateBack) .layout>*,
  body:has(#gateBack) .right,
  body:has(#gateBack) #detailPanel,
  body:has(#gateBack) #primaryDetail,
  body:has(#gateBack) .detail,
  body:has(#gateBack) .detailGrid,
  body:has(#gateBack) .userDetailGrid,
  body:has(#gateBack) .countryDetailGrid {
    min-width: 0;
    max-width: 100%;
  }

  body:has(#gateBack) .detail {
    overflow-x: hidden;
  }

  body:has(#gateBack) .detailGrid,
  body:has(#gateBack) .userDetailGrid,
  body:has(#gateBack) .countryDetailGrid {
    width: 100%;
  }

  body:has(#gateBack) .kv {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }

  body:has(#gateBack) .kv *,
  body:has(#gateBack) .imgMeta,
  body:has(#gateBack) .userDetailImageMeta {
    min-width: 0;
    max-width: 100%;
  }

  body:has(#gateBack) .imgRow,
  body:has(#gateBack) .userDetailImageBox {
    width: 100%;
    min-width: 0;
  }

  body:has(#gateBack) .imgThumb,
  body:has(#gateBack) .userDetailThumb {
    display: block;
    max-width: 100%;
    height: auto;
  }

  @media (max-width: 980px) {

    body:has(#gateBack) .layout,
    body:has(#gateBack) .right,
    body:has(#gateBack) #detailPanel,
    body:has(#gateBack) #primaryDetail,
    body:has(#gateBack) .detail,
    body:has(#gateBack) .detailGrid,
    body:has(#gateBack) .userDetailGrid,
    body:has(#gateBack) .countryDetailGrid,
    body:has(#gateBack) .kv {
      min-width: 0;
      max-width: 100%;
    }
  }

  @media (max-width: 760px) {
    body:has(#gateBack) .layout {
      padding: 10px;
    }

    body:has(#gateBack) .right,
    body:has(#gateBack) #detailPanel,
    body:has(#gateBack) #primaryDetail,
    body:has(#gateBack) .detail {
      width: 100%;
      min-width: 0;
      max-width: 100%;
    }

    body:has(#gateBack) .detailGrid,
    body:has(#gateBack) .userDetailGrid,
    body:has(#gateBack) .countryDetailGrid {
      grid-template-columns: minmax(0, 1fr) !important;
      width: 100%;
      max-width: 100%;
      gap: 8px;
    }

    body:has(#gateBack) .v,
    body:has(#gateBack) .v.mono,
    body:has(#gateBack) .imgName,
    body:has(#gateBack) .imgPath,
    body:has(#gateBack) .rowTitle,
    body:has(#gateBack) .fighterName {
      display: block;
      width: 100%;
      max-width: 100%;
      white-space: normal !important;
      overflow: visible !important;
      text-overflow: initial !important;
      word-break: break-word;
      overflow-wrap: anywhere;
    }

    body:has(#gateBack) .imgRow,
    body:has(#gateBack) .userDetailImageBox {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 10px;
      width: 100%;
      min-width: 0;
    }

    body:has(#gateBack) .imgMeta,
    body:has(#gateBack) .userDetailImageMeta {
      width: 100%;
      min-width: 0;
    }

    body:has(#gateBack) .imgThumb,
    body:has(#gateBack) .userDetailThumb {
      width: 100%;
      max-width: 100%;
      height: auto;
      max-height: none;
      object-fit: contain;
      object-position: center;
      align-self: stretch;
    }
  }
}

/* =========================================================
   PAGE: index.html scoped with body:has(#grid)
   ========================================================= */
body:has(#grid) .wrap {
  width: 95%;
  margin: 10px auto 25px;
}

@media (max-width: 760px) {
  body:has(#grid) .wrap {
    width: 90%;
  }
}

body:has(#grid) .headerMain {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

body:has(#grid) .eventTabs {
  display: inline-flex;
  gap: 8px;
  padding: 6px;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--line);
  width: fit-content;
}

body:has(#grid) .eventTabs .tab {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--muted);
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12px;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}

body:has(#grid) .eventTabs .tab:hover {
  color: var(--text);
}

body:has(#grid) .eventTabs .tab.active {
  background: var(--accent2);
  color: var(--accent);
  box-shadow: 0 0 0 1px rgba(31, 143, 42, .30) inset;
}

body:has(#grid) .eventTopRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

body:has(#grid) h1 {
  margin: 0;
  font-size: 38px;
  letter-spacing: .02em;
}

body:has(#grid) .sub {
  color: var(--muted);
  font-size: 14px;
}

body:has(#grid) .topRow {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

body:has(#grid) .eventSelect {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
}

body:has(#grid) .eventSelect label {
  font-weight: 850;
  color: var(--text);
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 12px;
  user-select: none;
  opacity: .9;
}

body:has(#grid) .selectWrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

body:has(#grid) select {
  appearance: none;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .70);
  color: var(--text);
  padding: 10px 36px 10px 12px;
  border-radius: 999px;
  font-weight: 800;
  cursor: pointer;
  outline: none;
  min-width: 340px;
}

body:has(#grid) select:focus {
  border-color: rgba(31, 143, 42, .45);
  box-shadow: 0 0 0 3px rgba(31, 143, 42, .12);
}

body:has(#grid) select option {
  background: #ffffff !important;
  color: #111 !important;
}

body:has(#grid) .selectWrap::after {
  content: "▾";
  position: absolute;
  right: 14px;
  pointer-events: none;
  color: var(--muted);
  font-weight: 900;
}

body:has(#grid) .grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

body:has(#grid) .bout {
  border-radius: var(--rad);
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  overflow: hidden;
}

body:has(#grid) .boutTop {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  padding: 8px 14px 8px 14px;
  background:
    radial-gradient(600px 140px at 20% 0%, rgba(31, 143, 42, .07), transparent 60%),
    radial-gradient(600px 140px at 80% 0%, rgba(31, 143, 42, .05), transparent 60%),
    rgba(0, 0, 0, .02);
  border-bottom: 1px solid var(--line);
  align-items: start;
}

body:has(#grid) .weight {
  grid-column: 1 / -1;
  text-align: center;
  font-family: var(--mono);
  letter-spacing: .22em;
  font-size: 16px;
  text-transform: uppercase;
  font-weight: 900;

  padding: 10px 14px;

  background: rgba(0, 0, 0, .06);
  color: rgba(0, 0, 0, .68);

  position: relative;
  z-index: 2;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.15);
}

body:has(#grid) .side {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  height: auto;
  position: relative;
}

body:has(#grid) .sideCard {
  min-width: 0;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 16px 16px 0 0;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, .02);
  position: relative;
  cursor: pointer;
}

body:has(#grid) .vs {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  height: 100px;
  padding-top: 0;
}

body:has(#grid) .vs span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  font-weight: 900;
  opacity: 0.7;
  letter-spacing: .08em;
}

body:has(#grid) .avatar {
  width: 92px;
  height: 92px;
  overflow: hidden;
  flex: 0 0 auto;
}

body:has(#grid) .avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0%;
  transform-origin: center top;
  display: block;
}

body:has(#grid) .meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

body:has(#grid) .rank {
  font-size: 14px;
  color: var(--muted2);
  font-weight: 800;
  letter-spacing: .08em;
}

body:has(#grid) .champion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-weight: 950;
  font-size: 14px;
  letter-spacing: .05em;
  color: #fff;
  background: #bb9f56;
}

body:has(#grid) .name {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: .02em;
  line-height: 1.05;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body:has(#grid) .record {
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.1;
}

body:has(#grid) .predictionShare {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid hsl(var(--pctHue, 120), 65%, 78%);
  background: hsla(var(--pctHue, 120), 65%, 92%, .9);
  color: hsl(var(--pctHue, 120), 65%, 34%);
  font-weight: 950;
  line-height: 1;
}

body:has(#grid) .predictionShareValue {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .02em;
}

body:has(#grid) .predictionShareLabel {
  font-size: 10px;
  letter-spacing: .10em;
  text-transform: uppercase;
}

body:has(#grid) .side.right .predictionShare {
  align-self: flex-end;
}

body:has(#grid) .countryInline {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-weight: 850;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-size: 12px;
  min-width: 0;
  opacity: .92;
}

body:has(#grid) .flagImg {
  width: 24px;
  height: 16px;
  overflow: hidden;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .12);
}

body:has(#grid) .flagImg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

body:has(#grid) .countryInline span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body:has(#grid) .resultBar {
  position: relative;
  width: 100%;
  display: none;
  overflow: hidden;
}

body:has(#grid) .resultPill {
  width: 100%;
  height: calc(var(--tagH) - 8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border-radius: 0 0 16px 16px;
  border: 1px solid var(--line);
  border-top: none;
  background: rgba(0, 0, 0, .06);
  max-width: 100%;
  animation: dropIn .18s ease-out;
}

body:has(#grid) .resultLeft {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 950;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(255, 255, 255, .95);
  white-space: nowrap;
}

body:has(#grid) .resultLeft {
  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
}

body:has(#grid) .resultPct {
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .10em;
  opacity: .92;
}

body:has(#grid) .resultLeft {
  color: rgba(0, 0, 0, .78);
}

body:has(#grid) .pickBtn {
  pointer-events: auto;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  border-radius: 16px;
  cursor: pointer;
  outline: none;
}

body:has(#grid) .pickBtn:focus-visible {
  outline: 2px solid rgba(31, 143, 42, .55);
  outline-offset: 2px;
}

body:has(#grid) .bout[data-picked="left"] .side.left .sideCard,
body:has(#grid) .bout[data-picked="right"] .side.right .sideCard {
  border-color: rgba(31, 143, 42, .55);
  background: radial-gradient(700px 240px at 10% 20%, rgba(31, 143, 42, .16), transparent 55%),
    rgba(0, 0, 0, .02);
}

body:has(#grid) .bout[data-picked="left"] .side.right .sideCard,
body:has(#grid) .bout[data-picked="right"] .side.left .sideCard {
  border-color: rgba(214, 37, 37, .55);
  background: radial-gradient(700px 240px at 90% 20%, rgba(214, 37, 37, .16), transparent 55%),
    rgba(0, 0, 0, .02);
  opacity: .96;
}

body:has(#grid) .bout:not([data-picked]) .resultBar {
  display: block;
}

body:has(#grid) .bout:not([data-picked]) .resultPill {
  background: rgba(160, 160, 160, .28);
}

body:has(#grid) .bout:not([data-picked]) .resultText::after {
  content: "PENDIENTE";
}

body:has(#grid) .bout[data-picked="left"] .side.left .resultBar,
body:has(#grid) .bout[data-picked="right"] .side.right .resultBar {
  display: block;
}

body:has(#grid) .bout[data-picked="left"] .side.left .resultPill,
body:has(#grid) .bout[data-picked="right"] .side.right .resultPill {
  background: rgba(124, 255, 107, .55);
}

body:has(#grid) .bout[data-picked="left"] .side.left .resultText::after,
body:has(#grid) .bout[data-picked="right"] .side.right .resultText::after {
  content: "GANADOR";
}

body:has(#grid) .bout[data-picked="left"] .side.right .resultBar,
body:has(#grid) .bout[data-picked="right"] .side.left .resultBar {
  display: block;
}

body:has(#grid) .bout[data-picked="left"] .side.right .resultPill,
body:has(#grid) .bout[data-picked="right"] .side.left .resultPill {
  background: rgba(255, 59, 59, .55);
}

body:has(#grid) .bout[data-picked="left"] .side.right .resultText::after,
body:has(#grid) .bout[data-picked="right"] .side.left .resultText::after {
  content: "PERDEDOR";
}

body:has(#grid) .bout[data-result="draw"] .side .resultBar,
body:has(#grid) .bout[data-result="nc"] .side .resultBar {
  display: block !important;
}

body:has(#grid) .bout[data-result="draw"] .side .resultText::after {
  content: "EMPATE" !important;
}

body:has(#grid) .bout[data-result="nc"] .side .resultText::after {
  content: "NO CONTEST" !important;
}

body:has(#grid) .bout[data-result="draw"] .side .resultPill,
body:has(#grid) .bout[data-result="nc"] .side .resultPill {
  background: rgba(120, 120, 120, .55);
}

body:has(#grid) .bout[data-result="draw"] .side .sideCard,
body:has(#grid) .bout[data-result="nc"] .side .sideCard {
  border-color: rgba(0, 0, 0, .20);
  background: radial-gradient(700px 240px at 50% 20%, rgba(0, 0, 0, .10), transparent 55%),
    rgba(0, 0, 0, .03);
}

body:has(#grid) .side.right .sideCard {
  justify-content: flex-end;
}

body:has(#grid) .side.right .meta {
  text-align: right;
  align-items: flex-end;
}

@keyframes dropIn {
  from {
    transform: translateY(-6px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

body:has(#grid) .footerBar {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--muted);
  font-size: 13px;
  box-shadow: var(--shadow);
}

@media (max-width: 760px) {
  body:has(#grid) select {
    min-width: 260px;
  }

  body:has(#grid) .boutTop {
    grid-template-columns: 1fr 50px 1fr;
  }

  body:has(#grid) .vs span {
    width: 40px;
    height: 40px;
  }

  body:has(#grid) .name {
    font-size: 18px;
  }

  body:has(#grid) .vs {
    height: 124px;
  }

  body:has(#grid) .avatar {
    width: 78px;
    height: 78px;
    border-radius: 16px;
  }
}

body:has(#grid) .footerBarTop {
  margin-top: 0px;
  margin-bottom: 0px;
}

body:has(#grid) .modalX {
  appearance: none;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  width: 36px;
  height: 36px;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: none;
}

body:has(#grid) .modalBody {
  padding: 16px;
}

body:has(#grid) .modalHint {
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 10px;
}

body:has(#grid) .modalInput:focus {
  border-color: rgba(31, 143, 42, .45);
  box-shadow: 0 0 0 3px rgba(31, 143, 42, .12);
}

body:has(#grid) .modalError .modalHead {
  background: rgba(255, 59, 59, .10);
}

body:has(#grid) .errorBox {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 59, 59, .30);
  background: rgba(255, 59, 59, .08);
}

body:has(#grid) .errorIcon {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 950;
  color: white;
  background: rgba(255, 59, 59, .85);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .18);
}

body:has(#grid) .errorMsg {
  font-weight: 900;
  color: var(--text);
  margin-bottom: 4px;
}

body:has(#grid) .errorHint {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.3;
}

body:has(#grid) .modalSuccess .modalHead {
  background: rgba(124, 255, 107, .14);
}

body:has(#grid) .successBox {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(124, 255, 107, .35);
  background: rgba(124, 255, 107, .10);
}

body:has(#grid) .successIcon {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 950;
  font-size: 18px;
  color: #0b2b10;
  background: #7cff6b;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .18);
}

body:has(#grid) .successMsg {
  font-weight: 900;
  color: var(--text);
  margin-bottom: 4px;
}

body:has(#grid) .successHint {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.3;
}

body:has(#grid) .vs {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  height: 120px;
  padding-top: 0;
}

body:has(#grid) .vsSide {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  max-width: 52px;

  pointer-events: none;
}

body:has(#grid) .vsSide.left {
  right: calc(50% + 28px);
  justify-content: flex-end;
}

body:has(#grid) .vsSide.right {
  left: calc(50% + 28px);
  justify-content: flex-start;
}

body:has(#grid) .userDot {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  overflow: visible;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 0 10px 18px rgba(0, 0, 0, .12);
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body:has(#grid) .userDot img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  display: block;
}

.isVerifiedCreator,
.verifiedAvatarInline {
  position: relative;
  overflow: visible !important;
}

.verifiedAvatarInline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.verifiedAvatarInline img {
  display: block;
}

.isVerifiedCreator:not(.userDot)::after,
.verifiedAvatarInline.isVerifiedCreator::after {
  content: "\2713";
  position: absolute;
  right: -4px;
  bottom: -4px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border-radius: 999px;
  border: 2px solid #fff;
  background: #1d9bf0;
  color: #fff;
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  box-shadow: 0 2px 7px rgba(0, 0, 0, .22);
}

.verifiedBadge {
  position: absolute;
  right: -4px;
  bottom: -4px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border-radius: 999px;
  border: 2px solid #fff;
  background: #1d9bf0;
  box-shadow: 0 2px 7px rgba(0, 0, 0, .22);
}

.verifiedBadge::before {
  content: "\2713";
  color: #fff;
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
}

body:has(#grid) .userDot .verifiedBadge {
  right: -4px;
  bottom: -4px;
  width: 14px;
  height: 14px;
  border-width: 2px;
  box-shadow: 0 2px 7px rgba(0, 0, 0, .22);
}

body:has(#grid) .userDot .verifiedBadge::before {
  font-size: 9px;
}

body:has(#grid) .userDot:hover .verifiedBadge {
  opacity: 1;
  transform: none;
}

@media (max-width: 760px) {
  body:has(#grid) .userDot .verifiedBadge {
    right: -2px;
    bottom: -2px;
    width: 9px;
    height: 9px;
    border-width: 1px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .22);
  }

  body:has(#grid) .userDot .verifiedBadge::before {
    font-size: 6px;
  }
}

body:has(#userAvatar) .avatar.isVerifiedCreator::after,
body:has(#rankList) .rankEventDetail .img-usuario.isVerifiedCreator::after {
  width: 20px;
  height: 20px;
  right: 2px;
  bottom: 2px;
  font-size: 13px;
}

body:has(#grid) .userMore {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  font-weight: 950;
  font-size: 11px;
  letter-spacing: .02em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 760px) {

  body:has(#grid) .userDot,
  body:has(#grid) .userMore {
    width: 22px;
    height: 22px;
    font-size: 10px;
  }

  body:has(#grid) .vsSide.left {
    right: calc(50% + 22px);
  }

  body:has(#grid) .vsSide.right {
    left: calc(50% + 22px);
  }
}

body:has(#grid) .sideCard {
  position: relative;
}

body:has(#grid) .cardPreds {
  position: absolute;
  top: 5%;
  z-index: 3;

  display: flex;

  flex-wrap: wrap;

  gap: 5px;

  width: calc(30px * 2 + 5px);
}

body:has(#grid) .side.left .cardPreds {
  right: 10px;
  justify-content: flex-end;
}

body:has(#grid) .side.right .cardPreds {
  left: 10px;
  justify-content: flex-start;
}

body:has(#grid) .userDot {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  overflow: visible;
  border: 2px solid rgba(31, 143, 42, .55);
  background: var(--panel);
  box-shadow: 0 10px 18px rgba(0, 0, 0, .12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

body:has(#grid) .userDot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 999px;
}

body:has(#grid) .userMore {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  font-weight: 950;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body:has(#grid) .side.left .meta {
  padding-right: 36px;
}

body:has(#grid) .side.right .meta {
  padding-left: 36px;
}

@media (max-width: 760px) {
  body:has(#grid) .side.left .meta {
    padding-right: 32px;
  }

  body:has(#grid) .side.right .meta {
    padding-left: 32px;
  }

  body:has(#grid) .userDot,
  body:has(#grid) .userMore {
    width: 20px;
    height: 20px;
  }

  body:has(#grid) .predictionShare {
    padding: 4px 7px;
    gap: 4px;
  }

  body:has(#grid) .predictionShareValue {
    font-size: 11px;
  }

  body:has(#grid) .predictionShareLabel {
    font-size: 8px;
    letter-spacing: .08em;
  }
}

body:has(#grid) .tip {
  font-style: italic;
  display: none;
}

body:has(#grid) .userDot,
body:has(#grid) .userMore {
  position: relative;
}

body:has(#grid) .userDot::after,
body:has(#grid) .userMore::after {
  content: attr(data-tooltip);
  position: absolute;
  top: 50%;
  left: calc(100% + 10px);
  transform: translateY(-50%) translateX(-4px);
  white-space: nowrap;

  background: rgba(20, 20, 20, 0.95);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 8px;

  opacity: 0;
  pointer-events: none;

  transition: opacity .18s ease, transform .18s ease;
  z-index: 999;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}

body:has(#grid) .userDot::before,
body:has(#grid) .userMore::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(100% + 4px);
  transform: translateY(-50%);
  border: 6px solid transparent;

  transition: opacity .18s ease;
  z-index: 998;
}

body:has(#grid) .userDot:hover::after,
body:has(#grid) .userDot:hover::before,
body:has(#grid) .userDot:hover img+*,
body:has(#grid) .userMore:hover::after,
body:has(#grid) .userMore:hover::before {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

body:has(#grid) .userDot img {
  pointer-events: none;
}

body:has(#grid) body[data-view="past"] .bout:not([data-picked]) .resultText::after {
  content: "";
}

body:has(#grid) body[data-view="past"] .bout:not([data-picked]) .resultBar {
  display: none;
}

body:has(#grid) .bout[data-result="draw"] .sideCard,
body:has(#grid) .bout[data-result="nc"] .sideCard {
  border-color: rgba(140, 140, 140, .55);
  background: rgba(140, 140, 140, .18);
  opacity: .96;
}

body:has(#grid) .bout[data-result="draw"] .resultBar,
body:has(#grid) .bout[data-result="nc"] .resultBar {
  display: block;
}

body:has(#grid) .bout[data-result="draw"] .resultPill,
body:has(#grid) .bout[data-result="nc"] .resultPill {
  background: rgba(120, 120, 120, .35);
}

body:has(#grid) .bout[data-result="draw"] .resultText::after {
  content: "EMPATE";
}

body:has(#grid) .bout[data-result="nc"] .resultText::after {
  content: "NC";
}

body:has(#grid) body[data-view="past"] .bout:not([data-picked]):not([data-result]) .resultBar {
  display: none;
}

body:has(#grid) .actionsBar {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 2000;

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

  margin: 0;

  padding: 12px 14px;
  border-radius: 14px;

  background: white;
  border: 1px solid #0a0f1a;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

body:has(#grid) .actionsLeft {
  display: flex;
  gap: 10px;
  align-items: center;
}

body:has(#grid) .actionsRight {
  display: flex;
  gap: 14px;
  align-items: center;
  font-size: 13px;
  color: var(--muted);
  text-align: right;
}

body:has(#grid) .actionsRight .count {
  font-weight: 900;
  color: var(--text);
}

body:has(#grid) .actionsRight .tip {
  font-style: italic;
  white-space: nowrap;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

body:has(#grid) .bout {
  animation: fadeInUp .16s ease-out;
}

body:has(#grid) .skelList {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

body:has(#grid) .skel {
  border-radius: var(--rad);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  box-shadow: var(--shadow);
  overflow: hidden;
  padding: 14px;
}

body:has(#grid) .skelRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

body:has(#grid) .skelBlock {
  border-radius: 12px;
  background: rgba(0, 0, 0, .06);
  position: relative;
  overflow: hidden;
}

body:has(#grid) .skelBlock::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-60%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .18), transparent);
  animation: shimmer 1.15s ease-in-out infinite;
}

@keyframes shimmer {
  0% {
    transform: translateX(-60%);
  }

  100% {
    transform: translateX(160%);
  }
}

body:has(#grid) .skelAvatar {
  width: 92px;
  height: 92px;
}

body:has(#grid) .skelName {
  width: 260px;
  height: 18px;
  border-radius: 10px;
}

body:has(#grid) .skelSub {
  width: 180px;
  height: 12px;
  border-radius: 10px;
  opacity: .75;
}

body:has(#grid) .skelPill {
  width: 100%;
  height: 34px;
  border-radius: 0 0 16px 16px;
  margin-top: 10px;
}

body:has(#grid) .eventHero {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .18);
}

body:has(#grid) .eventHero img {
  width: 100%;
  max-height: 360px;
  object-fit: cover;
  object-position: 50% 12%;
  display: block;
}

@media (min-width: 1024px) {
  body:has(#grid) .eventHero img {
    max-height: 340px;
    object-fit: cover;
  }
}

body:has(#grid) .eventHero {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .18);
}

body:has(#grid) .eventHeroTitle {
  position: absolute;
  left: 0;
  right: 0;
  top: 18px;

  text-align: center;
  color: #fff;

  font-weight: 950;
  font-size: clamp(22px, 3.5vw, 40px);
  letter-spacing: .14em;
  text-transform: uppercase;

  text-shadow:
    0 3px 12px rgba(0, 0, 0, .85),
    0 0 22px rgba(0, 0, 0, .55);

  pointer-events: none;
  z-index: 2;
}

body:has(#grid) .eventHero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
      rgba(0, 0, 0, .55),
      rgba(0, 0, 0, .15) 35%,
      transparent 70%);
  z-index: 1;
}

body:has(#grid) .eventHero {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .18);
}

body:has(#grid) .eventHero img {
  width: 100%;
  max-height: 360px;
  display: block;
  object-fit: cover;
  object-position: 50% 12%;
}

body:has(#grid) .eventHeroOverlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, .50), rgba(0, 0, 0, .15) 40%, rgba(0, 0, 0, .30)),
    radial-gradient(900px 400px at 15% 50%, rgba(0, 0, 0, .35), transparent 60%),
    radial-gradient(900px 400px at 85% 50%, rgba(0, 0, 0, .35), transparent 60%);
  z-index: 1;
}

body:has(#grid) .eventHeroTitle {
  position: absolute;
  top: 16px;
  left: 0;
  right: 0;
  text-align: center;

  color: #fff;
  font-weight: 950;
  font-size: clamp(18px, 3.2vw, 38px);
  letter-spacing: .14em;
  text-transform: uppercase;

  text-shadow: 0 3px 12px rgba(0, 0, 0, .85);
  z-index: 2;
  pointer-events: none;
}

body:has(#grid) .eventHeroFighters {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;

  justify-content: space-between;
  padding: 0 28px;

  z-index: 2;
  pointer-events: none;
}

body:has(#grid) .eventHeroFighter {
  max-width: 45%;
  color: #fff;
  font-weight: 950;
  text-transform: uppercase;
  font-size: clamp(18px, 3.0vw, 34px);
  letter-spacing: .08em;
  line-height: 1.05;

  text-shadow:
    0 4px 14px rgba(0, 0, 0, .85),
    0 0 18px rgba(0, 0, 0, .55);
}

body:has(#grid) .eventHeroFighter.left {
  text-align: left;
}

body:has(#grid) .eventHeroFighter.right {
  text-align: right;
}

@media (max-width: 760px) {
  body:has(#grid) .eventHero img {
    max-height: 260px;
  }

  body:has(#grid) .eventHeroFighters {
    padding: 0 16px;
  }

  body:has(#grid) .eventHeroFighter {
    max-width: 48%;
    letter-spacing: .06em;
  }
}

body:has(#grid) .eventHeroMeta {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 14px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  z-index: 2;
  pointer-events: none;
}

body:has(#grid) .eventHeroDate,
body:has(#grid) .eventHeroLoc {
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, .92);

  max-width: 48%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body:has(#grid) .eventHeroLoc {
  text-align: right;
}

body:has(#grid) .predictionUnavailableNotice {
  margin: 12px 0 16px;
  padding: 14px 16px;
  border: 1px solid rgba(218, 165, 32, .55);
  border-radius: 14px;
  background: rgba(255, 247, 222, .95);
  color: #6f4c00;
  font-size: 15px;
  font-weight: 850;
  line-height: 1.35;
  text-align: center;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .08);
}

body:has(#grid) .predictionUnavailableNotice[hidden] {
  display: none;
}

body:has(#grid) .eventTopBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

body:has(#grid) .topUsersBtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 8px 14px;
  border-radius: 999px;

  background: rgba(0, 0, 0, .04);
  border: 1px solid rgba(0, 0, 0, .12);

  font-size: 12px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;

  color: #1f8f2a;
  text-decoration: none;

  transition:
    background .2s ease,
    box-shadow .2s ease,
    transform .15s ease;
}

body:has(#grid) .topUsersBtn:hover {
  background: rgba(31, 143, 42, .10);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
  transform: translateY(-1px);
}

body:has(#grid) .topIcon {
  font-size: 14px;
  line-height: 1;
}

@media (max-width:720px) {
  body:has(#grid) .topUsersBtn {
    padding: 8px 10px;
  }
}

@media (max-width: 760px) {
  body:has(#grid) .eventTopRow {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  body:has(#grid) .eventTabs {
    width: 100%;
    justify-content: center;
  }

  body:has(#grid) .topUsersBtn {
    width: 100%;
    justify-content: center;
  }

  body:has(#grid) .topText {
    display: inline;
  }
}

@media (max-width: 760px) {
  @media (max-width: 760px) {
    body:has(#grid) .actionsBar {
      left: 10px;
      right: 10px;
      bottom: 10px;
      flex-direction: column;
      align-items: stretch;
      gap: 10px;
    }

    body:has(#grid) .actionsLeft {
      width: 100%;
      display: flex;
      gap: 10px;
    }

    body:has(#grid) .actionsLeft button {
      flex: 1;
    }

    body:has(#grid) .actionsRight {
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 6px;
    }

    body:has(#grid) .actionsRight .tip {
      white-space: normal;
    }
  }
}

@media (max-width: 760px) {
  body:has(#grid) .sideCard {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px;
  }

  body:has(#grid) .avatar {
    width: 72px;
    height: 72px;
  }

  body:has(#grid) .meta {
    align-items: center;
    text-align: center;
    padding: 0 !important;
    gap: 2px;
  }

  body:has(#grid) .meta .record,
  body:has(#grid) .meta .countryInline {
    display: none;
  }

  body:has(#grid) .meta .rank {
    display: block !important;
  }

  body:has(#grid) .name {
    font-size: 14px;
    font-weight: 900;
    letter-spacing: .04em;
    line-height: 1.1;
    white-space: normal;
    text-align: center;
  }

  body:has(#grid) .sideCard {
    min-width: 0;
  }

  body:has(#grid) .meta {
    min-width: 0;
  }

  body:has(#grid) .name {
    font-size: 14px;

    white-space: nowrap;

    overflow: hidden;
    text-overflow: ellipsis;

    max-width: 100%;
  }

  body:has(#grid) .side.right .sideCard {
    flex-direction: column-reverse;
  }
}

@media (max-width: 760px) {
  body:has(#grid) .sideCard {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px;
    min-width: 0;
  }

  body:has(#grid) .meta {
    width: 100%;
    min-width: 0;
    align-items: center;
    text-align: center;
    padding: 0 !important;
    gap: 2px;
  }

  body:has(#grid) .name {
    width: 100%;
    max-width: 100%;
    overflow: hidden;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

    white-space: normal;

    font-size: 14px;
    line-height: 1.1;
  }

  body:has(#grid) .side.right .sideCard {
    flex-direction: column-reverse;
  }

  body:has(#grid) .eventSelect label {
    font-size: 10px;
    letter-spacing: .06em;
  }

  body:has(#grid) .eventSelect select {
    font-size: 11px;
    padding: 9px 32px 9px 10px;
  }
}

.sectionSep {
  text-align: center;
}

body:has(#grid) .sectionSep {
  margin: 5px 0 5px;
  padding: 16px 18px;
  border-radius: 18px;

  background:
    radial-gradient(700px 120px at 20% 0%, rgba(255, 255, 255, .12), transparent 60%),
    radial-gradient(700px 120px at 80% 0%, rgba(255, 255, 255, .08), transparent 60%),
    linear-gradient(180deg, #121722, #0a0f1a);

  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow:
    0 14px 34px rgba(0, 0, 0, .35),
    inset 0 0 0 1px rgba(255, 255, 255, .04);

  font-family: var(--mono);
  font-weight: 950;
  letter-spacing: .26em;
  text-transform: uppercase;

  color: rgba(255, 255, 255, .92);

  position: relative;
  overflow: hidden;
}

body:has(#grid) .resultPill {
  flex-direction: column;

  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  height: auto;
}

body:has(#grid) .resultLeft {
  letter-spacing: .16em;
}

body:has(#grid) .accBar {
  display: none !important;
  width: 90%;

  height: 20px;

  border-radius: 999px;
  overflow: hidden;

  background: rgba(255, 255, 255, .45);
  border: 1px solid rgba(0, 0, 0, .18);

  position: relative;
}

body:has(#grid) .accFill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  transition: width .35s ease;

  background:
    linear-gradient(180deg,
      rgba(0, 0, 0, .75),
      rgba(0, 0, 0, .55));
}

body:has(#grid) .accLabel {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 13px;
  font-weight: 1000;
  letter-spacing: .12em;
  text-transform: uppercase;

  color: #fff;

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

body:has(#grid) .accLabel {
  -webkit-text-stroke: 1px rgba(0, 0, 0, .65);
  text-shadow:
    0 2px 6px rgba(0, 0, 0, .45),
    1px 0 0 rgba(0, 0, 0, .45),
    -1px 0 0 rgba(0, 0, 0, .45),
    0 1px 0 rgba(0, 0, 0, .45),
    0 -1px 0 rgba(0, 0, 0, .45);
}

body:has(#grid) .resultPill {
  gap: 8px;

  padding: 10px 12px;
}

body:has(#grid) .bout[data-picked="left"] .side.left .accFill,
body:has(#grid) .bout[data-picked="right"] .side.right .accFill {
  background: rgba(0, 0, 0, .55);
}

body:has(#grid) .bout[data-picked="left"] .side.right .accFill,
body:has(#grid) .bout[data-picked="right"] .side.left .accFill {
  background: rgba(0, 0, 0, .55);
}

body:has(#grid) .bout[data-result="draw"] .accFill,
body:has(#grid) .bout[data-result="nc"] .accFill {
  background: rgba(0, 0, 0, .45);
}

body:has(#grid) .accBar[data-empty="1"] .accFill {
  width: 0% !important;
}

body:has(#grid) .accBar[data-empty="1"] .accLabel {
  opacity: .75;
}

body:has(#grid):not([data-view="past"]) .accBar {
  display: none !important;
}

body:has(#grid):not([data-view="past"]) .resultPill {
  flex-direction: row;
  height: calc(var(--tagH) - 8px);
  padding: 0 12px;
  gap: 0;
}

@media (max-width: 760px) {
  body:has(#grid) .accBar {
    width: 95%;
    height: 16px;
  }

  body:has(#grid) .accLabel {
    font-size: 11px;

    letter-spacing: .08em;

    font-weight: 900;
  }

  body:has(#grid) .resultPill {
    gap: 5px;
    padding: 8px 8px;
  }

  body:has(#grid) .resultLeft {
    font-size: 10px;
    letter-spacing: .14em;
  }
}

@media (max-width: 760px) {
  body:has(#grid) .accBar {
    height: 20px;
  }

  body:has(#grid) .accLabel {
    white-space: normal;

    text-align: center;
    line-height: 1.05;

    padding: 0 6px;
  }
}

@media (max-width: 760px) {
  body:has(#grid) .resultPill {
    gap: 7px;

    padding-top: 9px;
    padding-bottom: 9px;
  }

  body:has(#grid) .resultLeft {
    margin-bottom: 2px;
  }

  body:has(#grid) .accBar {
    margin-top: 2px;
    margin-bottom: 2px;
  }

  body:has(#grid) .accLabel {
    padding-top: 1px;
    padding-bottom: 1px;
  }
}

@media (max-width: 760px) {
  body:has(#grid) .accLabel br {
    line-height: 1.2;
  }
}

@media (max-width: 760px) {
  body:has(#grid) .accLabel {
    padding-top: 3px;
    padding-bottom: 3px;
  }
}

@media (max-width: 760px) {
  body:has(#grid) .accBar {
    height: auto !important;
    min-height: 26px !important;

    padding: 3px 0 !important;

    position: relative !important;
    overflow: hidden;
  }

  body:has(#grid) .accFill {
    position: absolute !important;
    inset: 0 !important;
    height: 100% !important;
    z-index: 1;
  }

  body:has(#grid) .accLabel {
    position: relative !important;

    z-index: 2;

    display: block !important;
    white-space: normal !important;
    text-align: center !important;

    line-height: 1.05 !important;
    padding: 2px 6px !important;

    margin: 0 !important;

    font-size: 11px !important;
    letter-spacing: .08em !important;
    font-weight: 900 !important;
  }
}

@media (max-width: 760px) {
  body:has(#grid) .cardPreds>.userDot {
    display: none;
  }

  body:has(#grid) .cardPreds>.userDot:nth-of-type(1) {
    display: inline-flex;
  }

  body:has(#grid) .cardPreds>.userMore {
    display: none;
  }
}

body:has(#grid) .bestForecasterBtn {
  display: none;
  align-items: center;
  gap: 8px;
  border-color: rgba(31, 143, 42, .30);
  background: rgba(31, 143, 42, .08);
  color: var(--accent);
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

body:has(#grid) .badgeNew {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: #e32020;
  color: #fff;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .06em;
}

body:has(#grid) .bestForecasterBtn.active {
  background: rgba(31, 143, 42, .16);
  box-shadow: 0 0 0 1px rgba(31, 143, 42, .20) inset;
}

body:has(#grid) .forecastView {
  margin-top: 5px !important;
  display: none;
  margin: 0 auto;
  overflow: hidden;
  color: #111;
}

body:has(#grid) .forecastView.show {
  display: block;
}

body:has(#grid) .forecastView .logo-full {
  width: calc(100% + 56px);
  margin-left: -28px;
  margin-right: -28px;
  background: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 0;
  margin-bottom: 18px;
  border-bottom: 1px solid #e5e7eb;
}

body:has(#grid) .forecastView .logo-full img {
  width: 670px;
  max-width: 94%;
}

body:has(#grid) .forecastView .titulo-wrap {
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  margin-bottom: 8px;
}

body:has(#grid) .forecastView .event-title {
  text-align: center;
  font-weight: 900;
  text-transform: uppercase;
  color: #111111;
  font-size: 1.95rem;
  padding: 0 0 8px 0;
}

body:has(#grid) .forecastView .event-title .prefix {
  color: #e32020;
}

body:has(#grid) .forecastView .cabecera {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 0.5fr);
  gap: 14px;
  margin-bottom: 18px;
  align-items: stretch;
}

body:has(#grid) .forecastView .usuario-card {
  display: grid;
  grid-template-columns: 80px 1fr;
  align-items: center;
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(135deg, #eef1f5, #e3e8ee);
  border: 1px solid #cfd6de;
  min-height: 72px;
}

body:has(#grid) .forecastView .img-usuario {
  width: 80px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-right: 1px solid #cfd6de;
}

body:has(#grid) .forecastView .img-usuario img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

body:has(#grid) .forecastView .nombre-usuario {
  padding: 12px 18px;
  display: flex;
  align-items: center;
}

body:has(#grid) .forecastView .nombre-usuario .nombre {
  font-size: 1.25rem;
  font-weight: 900;
  color: #111827;
}

body:has(#grid) .forecastView .stat-box {
  min-height: 72px;
  border-radius: 20px;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: white;
}

body:has(#grid) .forecastView .stat-box.azul {
  background: linear-gradient(135deg, #2563eb, #60a5fa);
}

body:has(#grid) .forecastView .stat-box.verde {
  background: linear-gradient(135deg, #15803d, #4ade80);
}

body:has(#grid) .forecastView .stat-box.rojo {
  background: linear-gradient(135deg, #b91c1c, #f87171);
}

body:has(#grid) .forecastView .stat-box.morado {
  background: linear-gradient(135deg, #6d28d9, #c4b5fd);
}

body:has(#grid) .forecastView .stat-titulo {
  font-size: 0.8rem;
  font-weight: 900;
  margin-bottom: 6px;
}

body:has(#grid) .forecastView .stat-valor {
  font-size: 1.8rem;
  font-weight: 900;
  line-height: 1;
}

body:has(#grid) .forecastView .fight-headings {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 220px;
  gap: 12px;
  margin-bottom: 10px;
}

body:has(#grid) .forecastView .fight-heading {
  text-align: center;
  font-size: 16px;
  font-weight: 900;
  color: black;
}

body:has(#grid) .forecastView .lista-combates {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

body:has(#grid) .forecastView .combate {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 220px;
  gap: 12px;
}

body:has(#grid) .forecastView .peleador-card,
body:has(#grid) .forecastView .pronostico-card {
  display: grid;
  grid-template-columns: 74px 1fr;
  align-items: center;
  min-height: 78px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(17, 24, 39, 0.10);
}

body:has(#grid) .forecastView .peleador-card {
  background: #eef1f5;
  border: 1px solid #d2d8e0;
}

body:has(#grid) .forecastView .pronostico-card {
  background: #f6edc8;
  border: 1px solid #d8ceb2;
}

body:has(#grid) .forecastView .img-peleador,
body:has(#grid) .forecastView .img-pronostico {
  width: 74px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

body:has(#grid) .forecastView .img-peleador img,
body:has(#grid) .forecastView .img-pronostico img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

body:has(#grid) .forecastView .nombre-peleador,
body:has(#grid) .forecastView .nombre-pronostico {
  text-align: center;
  font-weight: 800;
  color: #1f2937;
  padding: 10px 14px;
}

body:has(#grid) .forecastView .estado-card {
  min-height: 78px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  color: #fff;
}

body:has(#grid) .forecastView .estado-card.acierto {
  background: linear-gradient(135deg, #1f9d49, #4ade80);
}

body:has(#grid) .forecastView .estado-card.fallo {
  background: linear-gradient(135deg, #cf2020, #f87171);
}

body:has(#grid) .forecastView .empty-state,
body:has(#grid) .forecastView .error-state {
  padding: 20px;
  text-align: center;
  font-weight: 700;
  color: #4b5563;
}

@media (max-width: 980px) {
  body:has(#grid) .forecastView .cabecera {
    grid-template-columns: 1fr;
  }

  body:has(#grid) .forecastView .fight-headings {
    display: none;
  }

  body:has(#grid) .forecastView .combate {
    grid-template-columns: 1fr;
  }
}

body:has(#grid) .disabled {
  pointer-events: none;
}

body:has(#grid) .actionsLeft {
  width: 100%;
  justify-content: center;
}

body:has(#grid) .actionsLeft button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

body:has(#grid) #logoutMenuBtn {
  background: rgba(214, 37, 37, .18) !important;
  border-color: rgba(214, 37, 37, .45) !important;
  color: #ff7b7b !important;
}

body:has(#grid) .vs {
  position: relative;
  flex-direction: column;
  gap: 6px;
}

body:has(#grid) .fighterInfoBox {
  display: none;
  position: absolute;
  top: calc(50% + 28px);
  left: 50%;
  transform: translateX(-50%);
  width: min(260px, 80vw);
  z-index: 20;
  padding: 10px;
  border-radius: 14px;
  background: #0a0f1a;
  color: #fff;
  box-shadow: 0 14px 32px rgba(0, 0, 0, .28);
}

body:has(#grid) .fighterInfoBox.open {
  display: grid;
  gap: 8px;
}

body:has(#grid) .fighterInfoBox strong {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
}

body:has(#grid) .fighterInfoBox small {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: rgba(255, 255, 255, .72);
}

@media (max-width: 760px) {
  body:has(#grid) .meta .record {
    display: none !important;
  }

  body:has(#grid) .bout.show-fighter-info .meta .record {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 2px;
  }

  body:has(#grid) .bout.show-fighter-info .flagInline {
    display: inline-flex !important;
    width: 18px;
    height: 12px;
  }

  body:has(#grid) .bout.show-fighter-info .flagInline img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

@media (max-width: 760px) {
  body:has(#grid) .bout.show-fighter-info .meta .countryInline {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 2px;
  }

  body:has(#grid) .bout.show-fighter-info .meta .flagImg {
    width: 18px;
    height: 12px;
  }
}

@media (max-width: 760px) {
  body:has(#grid) .bout.show-fighter-info .meta .countryInline span {
    white-space: normal !important;

    text-align: center;
    line-height: 1.1;
  }
}

body:has(#grid) .fighterInfoBtn {
  margin-top: 6px;

  width: 26px;
  height: 26px;
  padding: 0;

  border-radius: 999px;
  border: 1px solid var(--line);

  background: rgba(0, 0, 0, .04);

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

  cursor: pointer;
  transition: all .15s ease;
}

body:has(#grid) .fighterInfoBtn img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

body:has(#grid) .fighterInfoBtn:hover {
  background: rgba(0, 0, 0, .08);
  transform: translateY(-1px);
}

@media (max-width: 760px) {
  body:has(#grid) .fighterInfoBtn {
    width: 24px;
    height: 24px;
  }
}

body:has(#grid) .fighterInfoBtn {
  display: none !important;
}

@media (max-width: 760px) {
  body:has(#grid) .fighterInfoBtn {
    display: inline-flex !important;
  }
}

@media (max-width: 760px) {
  body:has(#grid) .meta {
    align-items: center !important;
    text-align: center !important;
  }

  body:has(#grid) .record {
    display: flex !important;
    justify-content: center !important;
    align-items: center;
    width: 100%;
    text-align: center !important;
  }
}

@media (max-width: 760px) {
  body:has(#grid) .rank {
    position: absolute;
    top: 3px;
    font-size: 12px;
    font-weight: 900;

    padding: 2px 6px;
    z-index: 5;
  }

  body:has(#grid) .side.left .rank {
    left: 3px;
  }

  body:has(#grid) .side.right .rank {
    right: 3px;
  }

  body:has(#grid) .sideCard {
    position: relative;
  }
}

@media (max-width: 760px) {
  body:has(#grid) .name {
    white-space: normal !important;

    word-break: break-word;

    line-height: 1.1;
    text-align: center;

    display: -webkit-box;
    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

@media (max-width: 760px) {
  body:has(#grid) .side .meta .name {
    width: 100% !important;
    max-width: 100% !important;

    display: block !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;

    word-break: normal !important;
    overflow-wrap: normal !important;

    line-height: 1.05 !important;
    text-align: center !important;
  }

  body:has(#grid) .boutTop {
    align-items: stretch;
  }

  body:has(#grid) .side {
    display: flex;
  }

  body:has(#grid) .sideCard {
    flex: 1;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}

@media (max-width: 760px) {

  body:has(#grid) .eventCard .fighters,
  body:has(#grid) .eventCard .eventInfo {
    white-space: normal !important;

    overflow: visible !important;
    text-overflow: unset !important;
  }
}

@media (max-width: 760px) {
  body:has(#grid) .eventCard .fighters {
    display: block;
    text-align: center;
    line-height: 1.2;
  }

  body:has(#grid) .eventCard .eventInfo {
    display: block;
    text-align: center;
    line-height: 1.2;
  }
}

@media (max-width: 760px) {
  body:has(#grid) .eventHeroMeta {
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }

  body:has(#grid) .eventHeroDate,
  body:has(#grid) .eventHeroLoc {
    white-space: normal !important;

    overflow: visible !important;
    text-overflow: unset !important;

    display: block;
    width: 100%;
    max-width: 100%;

    text-align: center;
  }
}

/* =========================================================
   PAGE: ranking.html scoped with body:has(#rankList)
   ========================================================= */
body:has(#rankList) .wrap {
  width: 95%;
  margin: 10px auto 25px;
  flex: 1;
}

body:has(#rankList) .card {
  border-radius: var(--rad);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .72);
  box-shadow: var(--shadow);
  overflow: hidden;
}

body:has(#rankList) .cardHead {
  padding: 14px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

body:has(#rankList) .cardHead[hidden] {
  display: none !important;
}

body:has(#rankList) .cardTitle {
  margin: 0;
  font-size: 16px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body:has(#rankList) .rankingModeTabs {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  margin: 4px 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .08);
}

body:has(#rankList) .rankingModeTab {
  min-height: 34px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  box-shadow: none;
  color: rgba(0, 0, 0, .72);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body:has(#rankList) .rankingModeTab.active {
  border-color: rgba(31, 143, 42, .45);
  background: rgba(31, 143, 42, .12);
  color: var(--accent);
  cursor: default;
}

body:has(#rankList) .rankList {
  display: flex;
  flex-direction: column;
}

body:has(#rankList) .rankRow {
  display: grid;
  grid-template-columns: 56px 52px 1fr 120px 120px minmax(180px, 360px);
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  background: rgba(0, 0, 0, .00);
}

body:has(#rankList) .rankRow[data-profile-banner]:not([data-profile-banner="default"]) {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: transparent;
}

body:has(#rankList) .rankBannerPanel {
  display: none;
}

body:has(#rankList) .rankRow[data-profile-banner]:not([data-profile-banner="default"]) .rankBannerPanel {
  content: "";
  display: block;
  grid-column: 1 / -1;
  grid-row: 1;
  align-self: stretch;
  margin: -12px -16px -12px -16px;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .46), rgba(0, 0, 0, .08) 52%, rgba(0, 0, 0, .36)),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .08) 0 1px, transparent 1px 11px),
    var(--profile-banner-image);
  background-size: auto, auto, cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
}

body:has(#rankList) .rankRow[data-profile-banner]:not([data-profile-banner="default"]) > * {
  position: relative;
  z-index: 1;
}

body:has(#rankList) .rankRow:first-child {
  border-top: none;
}

body:has(#rankList) .rankHeader {
  display: grid;
  grid-template-columns: 56px 52px 1fr 120px 120px minmax(180px, 360px);
  gap: 12px;
  align-items: center;
  padding: 10px 16px;
  border-top: 1px solid var(--line);
  background: rgba(0, 0, 0, .02);
  color: var(--muted);
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12px;
}

body:has(#rankList) .rankHeader .rightCols {
  grid-column: 4 / 7;
  display: grid;
  grid-template-columns: 120px 120px 1fr;
  gap: 10px;
  align-items: center;
  justify-items: center;
}

body:has(#rankList) .rankPctWrap {
  display: contents;
}

body:has(#rankList) .rankHeader .rightCols>div {
  text-align: center;
}

body:has(#rankList) .rankPctWrap .rankKpi {
  grid-column: 6;
  grid-row: 1;
  width: 100%;
  justify-self: stretch;
}

body:has(#rankList) .rankPctWrap .rankStat:nth-child(1) {
  grid-column: 4;
  justify-self: center;
}

body:has(#rankList) .rankPctWrap .rankStat:nth-child(2) {
  grid-column: 5;
  justify-self: center;
}

body:has(#rankList) .rankStat {
  grid-row: 1;
  position: relative;
  z-index: 2;
  font-family: var(--mono);
  font-weight: 950;
  font-size: 15px;
  color: var(--muted);
  white-space: nowrap;
}

body:has(#rankList) .rankRow[data-profile-banner]:not([data-profile-banner="default"]) .rankStat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, .12);
  background: #fff !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .14);
  color: #111;
  text-align: center;
}

body:has(#rankList) .rankRow[data-profile-banner]:not([data-profile-banner="default"]) .rankName,
body:has(#rankList) .rankRow[data-profile-banner]:not([data-profile-banner="default"]) .rankPos {
  color: rgba(255, 255, 255, .96);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
}

body:has(#rankList) .rankRow[data-profile-banner]:not([data-profile-banner="default"]) .profileBadge {
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .16);
}

body:has(#rankList) .rankRow[data-profile-banner]:not([data-profile-banner="default"]) .rankKpi {
  background: #e6e6e6;
  border-color: rgba(0, 0, 0, .24);
  outline: 6px solid #fff;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .14);
}

body:has(#rankList) .rankRow[data-profile-banner]:not([data-profile-banner="default"]) .rankKpiText {
  color: #111 !important;
  font-weight: 1000;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, .95),
    0 0 3px rgba(255, 255, 255, .95);
}

@media (max-width: 760px) {
  body:has(#rankList) .rankHeader .rightCols {
    grid-template-columns: 52px 52px 52px 1fr;
    gap: 8px;
  }
}

body:has(#rankList) .rankPos {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--mono);
  font-weight: 950;
  letter-spacing: .08em;
  color: var(--muted);
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

body:has(#rankList) .rankAvatar {
  grid-column: 2;
  grid-row: 1;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 0 10px 18px rgba(0, 0, 0, .10);
}

body:has(#rankList) .rankAvatar img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  display: block;
}

body:has(#rankList) .rankName {
  font-weight: 950;
  letter-spacing: .02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body:has(#rankList) .rankNameRow {
  grid-column: 3;
  grid-row: 1;
}

body:has(#rankList) .rankPct {
  font-family: var(--mono);
  font-weight: 950;
  letter-spacing: .04em;
  min-width: 70px;
  text-align: right;
}

body:has(#rankList) .pctPill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .70);
  font-family: var(--mono);
  font-weight: 950;
  letter-spacing: .04em;
  min-width: 78px;
}

body:has(#rankList) .note {
  padding: 12px 16px 14px;
  color: var(--muted);
  font-size: 12px;
  border-top: 1px solid var(--line);
  background: rgba(0, 0, 0, .01);
}

body:has(#rankList) .rankEventList {
  display: flex;
  flex-direction: column;
}

body:has(#rankList) .rankAchievementsList {
  padding: 14px;
}

body:has(#rankList) .rankEventList[hidden],
body:has(#rankList) .rankAchievementsList[hidden],
body:has(#rankList) .rankList[hidden],
body:has(#rankList) .cardFilters[hidden],
body:has(#rankList) .note[hidden] {
  display: none !important;
}

body:has(#rankList) .rankAchievementsGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

body:has(#rankList) .rankAchievementPanel {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, .72);
  overflow: hidden;
}

body:has(#rankList) .rankAchievementPanelHead {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border-bottom: 1px solid var(--line);
  background: rgba(31, 143, 42, .07);
}

body:has(#rankList) .rankAchievementIcon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(31, 143, 42, .22);
  background: rgba(255, 255, 255, .78);
  flex: 0 0 auto;
}

body:has(#rankList) .rankAchievementTitle {
  font-size: 13px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body:has(#rankList) .rankAchievementSub {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

body:has(#rankList) .rankAchievementRows {
  display: flex;
  flex-direction: column;
}

body:has(#rankList) .rankAchievementRow {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  grid-template-areas:
    "pos user"
    "pos level"
    "pos value";
  gap: 4px 10px;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: left;
  white-space: normal;
}

body:has(#rankList) .rankAchievementRow:last-child {
  border-bottom: 0;
}

body:has(#rankList) .rankAchievementRow:hover {
  background: rgba(31, 143, 42, .06);
}

body:has(#rankList) .rankAchievementPos {
  grid-area: pos;
  align-self: center;
  color: var(--muted);
  font-family: var(--mono);
  font-weight: 950;
}

body:has(#rankList) .rankAchievementUser {
  grid-area: user;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

body:has(#rankList) .rankAchievementUser img {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, .05);
  flex: 0 0 auto;
}

body:has(#rankList) .rankAchievementUser strong {
  overflow: hidden;
  text-overflow: ellipsis;
}

body:has(#rankList) .rankAchievementLevel {
  grid-area: level;
  display: flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
}

body:has(#rankList) .rankAchievementLevel strong {
  font-size: 13px;
  font-weight: 950;
  overflow-wrap: anywhere;
}

body:has(#rankList) .rankAchievementLevel small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

body:has(#rankList) .rankAchievementValue {
  grid-area: value;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 950;
}

body:has(#rankList) .rankEventHeader,
body:has(#rankList) .rankEventRow {
  display: grid;
  grid-template-columns: minmax(260px, 1.5fr) minmax(210px, 1.1fr) 120px 100px 90px 120px;
  align-items: center;
  gap: 12px;
}

body:has(#rankList) .rankEventHeader {
  padding: 11px 16px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(0, 0, 0, .025);
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body:has(#rankList) .rankEventItem {
  border-bottom: 1px solid var(--line);
}

body:has(#rankList) .rankEventRow {
  width: 100%;
  min-height: 66px;
  padding: 12px 16px;
  border: 0;
  border-radius: 0;
  background: rgba(255, 255, 255, .35);
  box-shadow: none;
  text-align: left;
  font-size: 13px;
  white-space: normal;
  transition: background .12s ease;
}

body:has(#rankList) .rankEventRow:hover,
body:has(#rankList) .rankEventRow.open {
  background: rgba(31, 143, 42, .07);
}

body:has(#rankList) .rankEventName {
  font-weight: 950;
  letter-spacing: .02em;
  overflow-wrap: anywhere;
}

body:has(#rankList) .rankEventUser {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

body:has(#rankList) .rankEventUser img {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, .05);
  flex: 0 0 auto;
}

body:has(#rankList) .rankEventUser strong {
  overflow: hidden;
  text-overflow: ellipsis;
}

body:has(#rankList) .rankEventRow > span:not(.rankEventName):not(.rankEventUser) {
  font-family: var(--mono);
  font-weight: 950;
  text-align: center;
}

body:has(#rankList) .rankEventPct {
  justify-self: center;
  min-width: 78px;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
}

body:has(#rankList) .rankEventEmpty {
  padding: 22px 16px;
  color: var(--muted);
  font-weight: 850;
}

body:has(#rankList) .rankEventDetail {
  padding: 14px;
  background: rgba(0, 0, 0, .025);
}

body:has(#rankList) .rankEventDetail .forecastView {
  display: block;
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, .76);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .08);
}

body:has(#rankList) .rankEventDetail .titulo-wrap {
  margin-bottom: 12px;
  text-align: center;
}

body:has(#rankList) .rankEventDetail .event-title {
  font-size: clamp(20px, 3vw, 34px);
  font-weight: 950;
  letter-spacing: .03em;
}

body:has(#rankList) .rankEventDetail .event-title .prefix {
  color: var(--danger);
}

body:has(#rankList) .rankEventDetail .cabecera {
  display: grid;
  grid-template-columns: minmax(240px, 1.4fr) repeat(4, minmax(100px, .7fr));
  gap: 10px;
  align-items: stretch;
}

body:has(#rankList) .rankEventDetail .usuario-card,
body:has(#rankList) .rankEventDetail .stat-box,
body:has(#rankList) .rankEventDetail .peleador-card,
body:has(#rankList) .rankEventDetail .pronostico-card,
body:has(#rankList) .rankEventDetail .estado-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .72);
}

body:has(#rankList) .rankEventDetail .usuario-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
}

body:has(#rankList) .rankEventDetail .img-usuario {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--line);
  flex: 0 0 auto;
}

body:has(#rankList) .rankEventDetail .img-usuario img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

body:has(#rankList) .rankEventDetail .nombre-usuario {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

body:has(#rankList) .rankEventDetail .nombre-usuario .label,
body:has(#rankList) .rankEventDetail .stat-titulo,
body:has(#rankList) .rankEventDetail .fight-heading {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
}

body:has(#rankList) .rankEventDetail .nombre-usuario .nombre {
  font-size: 18px;
  font-weight: 950;
  overflow-wrap: anywhere;
}

body:has(#rankList) .rankEventDetail .stat-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  text-align: center;
}

body:has(#rankList) .rankEventDetail .stat-valor {
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 950;
}

body:has(#rankList) .rankEventDetail .stat-box.verde .stat-valor {
  color: var(--accent);
}

body:has(#rankList) .rankEventDetail .stat-box.rojo .stat-valor {
  color: var(--danger);
}

body:has(#rankList) .rankEventDetail .stat-box.morado .stat-valor {
  color: #6d28d9;
}

body:has(#rankList) .rankEventDetail .fight-headings,
body:has(#rankList) .rankEventDetail .combate {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 120px;
  gap: 10px;
  align-items: stretch;
}

body:has(#rankList) .rankEventDetail .fight-headings {
  margin-top: 14px;
  padding: 0 4px;
}

body:has(#rankList) .rankEventDetail .lista-combates {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body:has(#rankList) .rankEventDetail .combate {
  min-height: 82px;
}

body:has(#rankList) .rankEventDetail .peleador-card,
body:has(#rankList) .rankEventDetail .pronostico-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
}

body:has(#rankList) .rankEventDetail .pronostico-card {
  background: rgba(31, 143, 42, .08);
}

body:has(#rankList) .rankEventDetail .img-peleador,
body:has(#rankList) .rankEventDetail .img-pronostico {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--line);
  flex: 0 0 auto;
}

body:has(#rankList) .rankEventDetail .img-peleador img,
body:has(#rankList) .rankEventDetail .img-pronostico img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0%;
}

body:has(#rankList) .rankEventDetail .nombre-peleador,
body:has(#rankList) .rankEventDetail .nombre-pronostico {
  font-size: 13px;
  font-weight: 950;
  overflow-wrap: anywhere;
}

body:has(#rankList) .rankEventDetail .estado-card {
  display: grid;
  place-items: center;
  padding: 8px;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .08em;
}

body:has(#rankList) .rankEventDetail .estado-card.acierto {
  border-color: rgba(31, 143, 42, .35);
  background: rgba(31, 143, 42, .12);
  color: var(--accent);
}

body:has(#rankList) .rankEventDetail .estado-card.fallo {
  border-color: rgba(214, 37, 37, .30);
  background: rgba(214, 37, 37, .10);
  color: var(--danger);
}

body:has(#rankList) .rankEventDetail .empty-state,
body:has(#rankList) .rankEventDetail .error-state {
  padding: 18px;
  color: var(--muted);
  font-weight: 850;
}

@media (max-width: 760px) {
  body:has(#rankList) .wrap {
    width: 92vw;
  }

  body:has(#rankList) .rankRow {
    padding: 10px 12px;
  }

  body:has(#rankList) .rankAvatar {
    width: 38px;
    height: 38px;
  }

  body:has(#rankList) .pctPill {
    min-width: 72px;
    padding: 6px 8px;
  }

  body:has(#rankList) .rankingModeTabs {
    width: 100%;
  }

  body:has(#rankList) .rankingModeTab {
    flex: 1;
    padding: 8px 10px;
    font-size: 11px;
  }

  body:has(#rankList) .rankEventHeader {
    display: none;
  }

  body:has(#rankList) .rankEventRow {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    align-items: center;
    padding: 14px 12px;
  }

  body:has(#rankList) .rankEventName,
  body:has(#rankList) .rankEventUser {
    grid-column: 1 / -1;
  }

  body:has(#rankList) .rankEventName {
    font-size: 14px;
    line-height: 1.25;
  }

  body:has(#rankList) .rankEventUser {
    gap: 9px;
  }

  body:has(#rankList) .rankEventRow > span:not(.rankEventName):not(.rankEventUser) {
    justify-self: center;
  }

  body:has(#rankList) .rankEventStat,
  body:has(#rankList) .rankEventPct {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-width: 0;
    width: 100%;
    min-height: 48px;
    padding: 5px 7px;
    border-radius: 18px;
    border: 1px solid rgba(0, 0, 0, .10);
    background: #fff;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .08);
    color: #111 !important;
    text-align: center;
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 950;
    white-space: nowrap;
  }

  body:has(#rankList) .rankEventStat::before,
  body:has(#rankList) .rankEventPct::before {
    display: block;
    margin-bottom: 2px;
    color: #111;
    font-family: var(--font);
    font-size: 9px;
    font-weight: 950;
    letter-spacing: .07em;
    line-height: 1.15;
    text-transform: uppercase;
    opacity: .72;
  }

  body:has(#rankList) .rankEventStat::before {
    content: attr(data-label);
  }

  body:has(#rankList) .rankEventPct::before {
    content: "% acierto";
  }

  body:has(#rankList) .rankEventPct {
    min-width: 0;
    border-color: rgba(0, 0, 0, .10) !important;
  }

  body:has(#rankList) .rankEventDetail .cabecera,
  body:has(#rankList) .rankEventDetail .fight-headings,
  body:has(#rankList) .rankEventDetail .combate {
    grid-template-columns: 1fr;
  }

  body:has(#rankList) .rankEventDetail .fight-headings {
    display: none;
  }

  body:has(#rankList) .rankAchievementsGrid {
    grid-template-columns: 1fr;
  }
}

body:has(#rankList) .rankPos img.trophy {
  width: 28px;
  height: auto;
  display: block;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .18));
  transform: translateZ(0);
}

@keyframes trophyGlow {
  0% {
    filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0)) drop-shadow(0 0 0 rgba(0, 0, 0, 0));
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-1px) scale(1.03);
  }

  100% {
    filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0)) drop-shadow(0 0 0 rgba(0, 0, 0, 0));
    transform: translateY(0) scale(1);
  }
}

body:has(#rankList) .rankRow.top1 .rankPos img.trophy {
  animation: trophyGlow 1.9s ease-in-out infinite;
  filter:
    drop-shadow(0 0 10px rgba(255, 204, 0, .55)) drop-shadow(0 0 22px rgba(255, 204, 0, .25));
}

body:has(#rankList) .rankRow.top2 .rankPos img.trophy {
  animation: trophyGlow 2.2s ease-in-out infinite;
  filter:
    drop-shadow(0 0 10px rgba(210, 220, 230, .55)) drop-shadow(0 0 22px rgba(210, 220, 230, .25));
}

body:has(#rankList) .rankRow.top3 .rankPos img.trophy {
  animation: trophyGlow 2.5s ease-in-out infinite;
  filter:
    drop-shadow(0 0 10px rgba(205, 127, 50, .55)) drop-shadow(0 0 22px rgba(205, 127, 50, .25));
}

body:has(#rankList) .rankRow.top1,
body:has(#rankList) .rankRow.top2,
body:has(#rankList) .rankRow.top3 {
  background: linear-gradient(90deg, rgba(0, 0, 0, .03), rgba(0, 0, 0, .00) 70%);
}

@media (prefers-reduced-motion: reduce) {

  body:has(#rankList) .rankRow.top1 .rankPos img.trophy,
  body:has(#rankList) .rankRow.top2 .rankPos img.trophy,
  body:has(#rankList) .rankRow.top3 .rankPos img.trophy {
    animation: none;
  }
}

@media (max-width:760px) {
  body:has(#rankList) .rankPos img.trophy {
    width: 24px;
  }
}

@media (max-width: 760px) {
  body:has(#rankList) .backRow {
    align-items: stretch;
  }

  body:has(#rankList) .backBtn {
    justify-content: center;
  }
}

body:has(#rankList) .backRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 6px 0 12px;
}

body:has(#rankList) .backBtn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);
  color: var(--text);
  text-decoration: none;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 12px;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

body:has(#rankList) .backBtn:hover {
  transform: translateY(-1px);
  background: var(--panel2);
}

body:has(#rankList) .backIcon {
  font-size: 14px;
  line-height: 1;
  opacity: .9;
}

body:has(#rankList) .rankKpi {
  position: relative;
  width: 200px;
  height: 30px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .10);
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, .08);
}

body:has(#rankList) .rankKpiFill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  border-radius: 999px;
  transition: width .6s ease, background-color .4s ease;
}

body:has(#rankList) .rankKpiText {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-weight: 950;
  font-size: 15px;
  letter-spacing: .02em;
  pointer-events: none;
  color: black;
}

@media (max-width:760px) {
  body:has(#rankList) .rankKpi {
    width: 150px;
    height: 20px;
  }
}

body:has(#rankList) .rankNameRow {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

body:has(#rankList) .rankNameRow .rankName {
  min-width: 0;
}

body:has(#rankList) .rankSocial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  text-decoration: none;
}

body:has(#rankList) .rankSocial img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  opacity: .9;
  border-radius: 4px;
}

body:has(#rankList) .rankSocial:hover img {
  opacity: 1;
  transform: translateY(-1px);
}

@media (max-width: 760px) {
  body:has(#rankList) .rankPctWrap .rankKpi {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100% !important;
    height: 26px;
    justify-self: stretch !important;
  }

  body:has(#rankList) .rankPctWrap .rankStat {
    grid-row: 2;
  }

  body:has(#rankList) .rankPctWrap {
    grid-area: pct;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 8px 10px;
    width: 100%;
    align-items: center;
    justify-items: center;
  }

  body:has(#rankList) .rankPctWrap .rankKpi {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100% !important;
    height: 26px;
    justify-self: stretch !important;
  }

  body:has(#rankList) .rankPctWrap .rankStat {
    display: block;
    grid-row: 2;
    font-size: 13px;
    color: var(--muted);
    text-align: center;
  }

  body:has(#rankList) .rankPctWrap .rankStat::before {
    display: block;
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .65;
    margin-bottom: 2px;
  }

  body:has(#rankList) .rankPctWrap .rankStat:nth-child(1)::before {
    content: "Pronósticos";
  }

  body:has(#rankList) .rankPctWrap .rankStat:nth-child(2)::before {
    content: "Aciertos";
  }

  body:has(#rankList) .rankKpiText {
    font-size: 13px;
  }

  body:has(#rankList) .rankHeader {
    display: none;
  }
}

@media (max-width: 760px) {
  body:has(#rankList) .rankRow {
    grid-template-columns: 40px 44px 1fr;
    grid-template-areas:
      "pos avatar name"
      "pct pct pct";
    gap: 10px 10px;
    padding: 10px 12px;
    align-items: center;
  }

  body:has(#rankList) .rankRow[data-profile-banner]:not([data-profile-banner="default"]) .rankBannerPanel {
    grid-column: 1 / -1;
    grid-row: 1;
    margin: -10px -12px 0 -12px;
  }

  body:has(#rankList) .rankPos {
    grid-area: pos;
  }

  body:has(#rankList) .rankAvatar {
    grid-area: avatar;
  }

  body:has(#rankList) .rankNameRow {
    grid-area: name;
  }

  body:has(#rankList) .rankPctWrap {
    grid-area: pct;
  }

  body:has(#rankList) .rankPctWrap {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 8px 10px;
    width: 100%;
    align-items: center;
    justify-items: center;
  }

  body:has(#rankList) .rankPctWrap .rankStat {
    display: block;
    grid-row: 2;
    font-size: 13px;
    text-align: center;
    white-space: nowrap;
  }

  @media (max-width: 760px) {
    body:has(#rankList) .rankPctWrap::before {
      content: "Porcentaje acierto";
      display: block;
      grid-column: 1 / -1;
      margin-bottom: 6px;
      text-align: center;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--muted);
      opacity: .75;
    }
  }

  @media (max-width: 760px) {
    body:has(#rankList) .rankPctWrap {
      grid-area: pct;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: auto auto auto;
      gap: 8px 10px;
      width: 100%;
      align-items: center;
      justify-items: center;
    }

    body:has(#rankList) .rankPctWrap::before {
      content: "Porcentaje acierto";
      grid-column: 1 / -1;
      grid-row: 1;
      margin-bottom: 2px;
      text-align: center;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--muted);
      opacity: .75;
    }

    body:has(#rankList) .rankPctWrap .rankKpi {
      grid-column: 1 / -1;
      grid-row: 2;
      width: 100% !important;
      height: 26px;
      justify-self: stretch !important;
    }

    body:has(#rankList) .rankPctWrap .rankStat {
      display: block;
      grid-row: 3;
      font-size: 13px;
      text-align: center;
      white-space: nowrap;
    }

    body:has(#rankList) .rankHeader {
      display: none;
    }

    body:has(#rankList) .rankRow {
      grid-template-columns: 40px 44px 1fr;
      grid-template-areas:
        "pos avatar name"
        "pct pct pct";
      gap: 10px 10px;
      padding: 10px 12px;
      align-items: center;
    }

    body:has(#rankList) .rankPctWrap {
      grid-area: pct;
    }
  }

  body:has(#rankList) .cardFilters {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  body:has(#rankList) .filterField {
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .65);
    position: relative;
  }

  body:has(#rankList) .filterLabel {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
  }

  body:has(#rankList) .filterSelect {
    border: 0;
    outline: none;
    background: transparent;
    color: var(--text);
    font-weight: 900;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    padding: 10px 36px 10px 12px;
    position: relative;
    letter-spacing: .02em;
  }

  body:has(#rankList) .filterField::after {
    content: "▾";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    pointer-events: none;
  }

  @media (max-width:760px) {
    body:has(#rankList) .cardFilters {
      width: 100%;
      justify-content: flex-start;
    }

    body:has(#rankList) .filterField {
      width: 100%;
      justify-content: space-between;
    }

    body:has(#rankList) .filterSelect {
      width: 100%;
      text-align: left;
    }
  }

  /* =========================================================
   PAGE: profile.html scoped with body:has(#save)
   ========================================================= */
  body:has(#save) .wrap {
    width: min(760px, 95%);
    margin: 20px auto 25px;
  }

  body:has(#save) .card {
    border-radius: var(--rad);
    background: var(--panel);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
  }

  body:has(#save) .cardHead {
    padding: 16px;
    border-bottom: 1px solid var(--line);
    font-weight: 700;
  }

  body:has(#save) .profileMain {
    padding: 16px;
  }

  body:has(#save) .field {
    margin-bottom: 18px;
  }

  body:has(#save) .fieldLabel {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 6px;
    display: block;
  }

  body:has(#save) .inputRow {
    display: flex;
    align-items: stretch;
    gap: 10px;
  }

  body:has(#save) .input {
    width: 100%;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: #fff;
    min-width: 0;
  }

  body:has(#save) .input[readonly] {
    background: rgba(0, 0, 0, .04);
    color: var(--muted);
  }

  body:has(#save) .linkBtn {
    flex: 0 0 46px;
    width: 46px;
    min-width: 46px;
    height: 46px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  }

  body:has(#save) .linkBtn:hover {
    background: var(--accent2);
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-1px);
  }

  body:has(#save) .linkBtn:disabled {
    opacity: .45;
    cursor: not-allowed;
    transform: none;
  }

  body:has(#save) .linkBtn svg {
    width: 18px;
    height: 18px;
    display: block;
  }

  body:has(#save) .imageField {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  body:has(#save) .avatarWrap {
    width: 220px;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--line);
    background: #fff;
  }

  body:has(#save) .avatarWrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  body:has(#save) .fileBtn {
    display: inline-flex;
    justify-content: center;
    padding: 10px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--panel);
    cursor: pointer;
    width: 100%;
  }

  body:has(#save) .fileBtn input {
    display: none;
  }

  @media (max-width: 640px) {
    body:has(#save) .wrap {
      width: calc(100% - 24px);
    }

    body:has(#save) .avatarWrap {
      width: 100%;
      aspect-ratio: 1/1;
      border-radius: 999px;
    }

    body:has(#save) .input {
      font-size: 16px;
    }

    body:has(#save) #profileSuccessModal {
      align-items: flex-start;
      padding: 70px 12px 12px;
    }

    body:has(#save) #profileSuccessModal .modal {
      width: min(360px, 100%);
      border-radius: 12px;
    }

    body:has(#save) #profileSuccessModal .modalHead {
      padding: 12px 14px;
    }

    body:has(#save) #profileSuccessModal .modalBody {
      padding: 14px;
    }

    body:has(#save) #profileSuccessModal .modalActions {
      padding: 12px 14px;
    }

    body:has(#save) #profileSuccessModal .successBox {
      align-items: flex-start;
      gap: 10px;
    }

    body:has(#save) #profileSuccessModal .profileSuccessIcon {
      width: 36px !important;
      height: 36px !important;
      flex-basis: 36px;
    }
  }

  body:has(#save) .passwordSection {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
  }

  body:has(#save) .sectionTitle {
    font-size: 15px;
    font-weight: 900;
    margin-bottom: 14px;
    color: var(--text);
  }

  body:has(#save) .secondaryProfileAction {
    width: 100%;
    margin-top: 12px;
    padding: 12px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--text);
    font-weight: 800;
    cursor: pointer;
  }

  body:has(#save) .secondaryProfileAction:disabled {
    opacity: .65;
    cursor: not-allowed;
  }

  body:has(#save) .primaryProfileAction,
  body:has(#save) #save {
    width: 100%;
    padding: 12px;
    border-radius: 999px;
    border: 1px solid var(--accent);
    background: var(--accent2);
    color: var(--accent);
    font-weight: 800;
    cursor: pointer;
  }

  body:has(#save) .successBox {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  body:has(#save) .profileSuccessIcon {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    background: rgba(31, 143, 42, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  body:has(#save) .profileSuccessIcon svg {
    width: 22px;
    height: 22px;
    display: block;
    overflow: visible;
    transform: none;
  }

  body:has(#save) .profileSuccessIcon path {
    stroke: #1f8f2a;
    stroke-width: 3;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    transform: none;
  }

  body:has(#save) .successMsg {
    font-weight: 800;
    font-size: 15px;
    color: var(--text);
  }

  body:has(#save) .successHint {
    font-size: 13px;
    color: var(--muted);
  }

  body:has(#save) .profileSuccessIcon path {
    stroke-dasharray: 30;
    stroke-dashoffset: 30;
    animation: drawCheck .4s ease forwards;
  }

  @keyframes drawCheck {
    to {
      stroke-dashoffset: 0;
    }
  }

  /* =========================================================
   PAGE: user.html scoped with body:has(#userAvatar)
   ========================================================= */
  body:has(#userAvatar) {
    height: 100%;
  }

  body:has(#userAvatar) {
    margin: 0;
    font-family: var(--sans);
    color: var(--text);
    color-scheme: light;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: transparent;
  }

  body:has(#userAvatar) .siteHeader {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--line);
  }

  body:has(#userAvatar) .headerTop {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 12px 20px;
  }

  body:has(#userAvatar) .logoWrap {
    grid-column: 2;
    justify-self: center;
    display: flex;
    align-items: center;
    cursor: pointer;
  }

  body:has(#userAvatar) .logoWrap img {
    width: min(420px, 60vw);
    height: auto;
    display: block;
    opacity: .98;
  }

  body:has(#userAvatar) .wrap {
    width: 95%;
    margin: 10px auto 25px;
    flex: 1;
  }

  body:has(#userAvatar) .card {
    border-radius: var(--rad);
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .72);
    box-shadow: var(--shadow);
    overflow: hidden;
  }

  body:has(#userAvatar) .topBar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    background: var(--panel);
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
  }

  body:has(#userAvatar) .userRow {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 260px;
  }

  body:has(#userAvatar) .avatar {
    width: 100px;
    height: 100px;
    border-radius: 999px;
    overflow: hidden;
    flex: 0 0 auto;
    border: 1px solid var(--line);
    background: rgba(0, 0, 0, .03);
    box-shadow: var(--shadow);
  }

  body:has(#userAvatar) .avatar img {
    width: 100%;
    height: 100%;
    border-radius: 999px !important;
    object-fit: cover;
    display: block;
  }

  body:has(#userAvatar) .userMeta {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
  }

  body:has(#userAvatar) .userNameRow {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }

  body:has(#userAvatar) .userName {
    font-weight: 950;
    letter-spacing: .02em;
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 420px;
  }

  body:has(#userAvatar) .socialLinks {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-left: 12px;
  }

  body:has(#userAvatar) .socialLink {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
  }

  body:has(#userAvatar) .socialLink img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    opacity: .9;
    border-radius: 4px;
    transition: opacity .12s ease, transform .12s ease;
  }

  body:has(#userAvatar) .socialLink:hover img {
    opacity: 1;
    transform: translateY(-1px);
  }

  body:has(#userAvatar) .userStats {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }

body:has(#userAvatar) .statBox {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: #fff;
    color: #111;
    box-shadow: 0 5px 5px rgba(17, 24, 39, .16), 0 2px 6px rgba(17, 24, 39, .08);
  }

  body:has(#userAvatar) .statNum {
    font-family: var(--mono);
    font-weight: 950;
    font-size: 13px;
    letter-spacing: .02em;
  }

  body:has(#userAvatar) .statLabel {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #111;
  }

  body:has(#userAvatar) .userAcc {
    display: flex;
    align-items: center;
    gap: 14px;
  }

  body:has(#userAvatar) .accLabel {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
  }

  body:has(#userAvatar) .kpiBar {
    position: relative;
    width: 220px;
    height: 18px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .10);
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, .08);
  }

  body:has(#userAvatar) .kpiFill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0%;
    border-radius: 999px;
    background: var(--accent);
    transition: width .6s ease, background-color .4s ease;
  }

  body:has(#userAvatar) .kpiText {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-family: var(--mono);
    font-weight: 950;
    font-size: 12px;
    letter-spacing: .02em;
    color: rgba(0, 0, 0, .85);
  }

  body:has(#userAvatar) .filters {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
  }

  body:has(#userAvatar) .chartFilters {
    display: flex;
    justify-content: flex-start;
    padding: 12px 16px 0;
    background: rgba(255, 255, 255, .72);
  }

  body:has(#userAvatar) .chartFilters .filters {
    margin-left: 0;
  }

  body:has(#userAvatar) .selectWrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 100%;
  }

  body:has(#userAvatar) select {
    appearance: none;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .80);
    color: var(--text);
    padding: 10px 36px 10px 12px;
    border-radius: 999px;
    font-weight: 900;
    letter-spacing: .02em;
    cursor: pointer;
    outline: none;
    width: 190px;
  }

  body:has(#userAvatar) select option {
    background: #ffffff !important;
    color: #111 !important;
  }

  body:has(#userAvatar) .selectWrap::after {
    content: "▾";
    position: absolute;
    right: 12px;
    pointer-events: none;
    color: var(--muted);
    font-weight: 900;
  }

  body:has(#userAvatar) .chartWrap {
    padding: 12px 14px 16px;
  }

  body:has(#userAvatar) #chart {
    width: 100%;
    min-height: 360px;
  }

  body:has(#userAvatar) .note {
    padding: 0 16px 14px;
    color: var(--muted);
    font-size: 12px;
  }

  body:has(#userAvatar) .backRow {
    display: flex;
    justify-content: flex-start;
    margin: 6px 0 12px;
  }

  body:has(#userAvatar) .backBtn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--panel);
    box-shadow: var(--shadow);
    color: var(--text);
    text-decoration: none;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: 12px;
    transition: transform .12s ease, background .12s ease, border-color .12s ease;
  }

  body:has(#userAvatar) .backBtn:hover {
    transform: translateY(-1px);
  }

  body:has(#userAvatar) .backIcon {
    font-size: 14px;
    line-height: 1;
    opacity: .9;
  }

  body:has(#userAvatar) #pastEventsSelect {
    width: 360px;
    max-width: 100%;
  }

  @media (max-width: 760px) {
    body:has(#userAvatar) #pastEventsSelect {
      width: 100%;
    }
  }

  body:has(#userAvatar) .predTable {
    display: flex;
    flex-direction: column;
  }

  body:has(#userAvatar) .predTableRow {
    display: grid;
    grid-template-columns: 2.8fr 1fr 1fr;
    align-items: center;
    gap: 16px;
  }

  body:has(#userAvatar) .fightCol {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    padding-right: 18px;
    margin-right: 10px;
  }

  @media (max-width: 760px) {
    body:has(#userAvatar) .fightCol {
      border-right: 0;
      padding-right: 0;
      margin-right: 0;
    }
  }

  body:has(#userAvatar) .vsCol {
    font-weight: 900;
    font-size: 11px;
    letter-spacing: .14em;
    user-select: none;
  }

  body:has(#userAvatar) .predLabel {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    margin-right: 8px;
    white-space: nowrap;
    flex: 0 0 auto;
  }

  body:has(#userAvatar) .predTableHeader {
    padding: 10px 14px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    border-bottom: 1px solid var(--line);
    background: rgba(0, 0, 0, .02);
  }

  body:has(#userAvatar) .predTableRow {
    padding: 12px 14px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
    transition: filter .12s ease;
  }

  body:has(#userAvatar) .predTableRow:hover {
    filter: brightness(1.02);
  }

  body:has(#userAvatar) .predTableRow:last-child {
    border-bottom: 0;
    padding-bottom: 10px;
  }

  body:has(#userAvatar) .predSummaryRow {
    background: var(--panel);
    border-top: 1px solid var(--line);
    border-bottom: 0;
    padding: 14px;
    padding-bottom: 2px;
    font-weight: 900;
  }

  body:has(#userAvatar) .predTableRow {
    position: relative;
  }

  body:has(#userAvatar) .predTableRow.row-pending {
    background:
      linear-gradient(180deg, rgba(120, 140, 180, .10), rgba(0, 0, 0, .02));
    border-left: 3px solid rgba(120, 140, 180, .55);
  }

  body:has(#userAvatar) .predTableRow::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0));
    pointer-events: none;
  }

  body:has(#userAvatar) .predTableRow:hover {
    filter: saturate(1.05);
  }

  body:has(#userAvatar) .predPick.neutral .txt {
    color: var(--muted);
    font-weight: 900;
    letter-spacing: .02em;
  }

  body:has(#userAvatar) .predTableRow.row-win {
    background:
      linear-gradient(180deg,
        rgba(31, 143, 42, .22) 0%,
        rgba(31, 143, 42, .08) 35%,
        rgba(0, 0, 0, .02) 100%);
    border-left: 3px solid rgba(31, 143, 42, .55);
  }

  body:has(#userAvatar) .predTableRow.row-lose {
    background:
      linear-gradient(180deg,
        rgba(214, 37, 37, .22) 0%,
        rgba(214, 37, 37, .08) 35%,
        rgba(0, 0, 0, .02) 100%);
    border-left: 3px solid rgba(214, 37, 37, .55);
  }

  body:has(#userAvatar) .predTableRow.row-draw,
  body:has(#userAvatar) .predTableRow.row-pending {
    background: rgba(0, 0, 0, .015);
    border-left: 3px solid rgba(160, 160, 160, .45);
  }

  body:has(#userAvatar) .predTableRow.row-draw {
    opacity: .45;
    filter: grayscale(.25);
  }

  body:has(#userAvatar) .predFighter {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }

  body:has(#userAvatar) .predFighter img {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    object-fit: cover;
    object-position: 50% 0%;
    border: 1px solid var(--line);
    background: rgba(0, 0, 0, .05);
    flex: 0 0 auto;
  }

  body:has(#userAvatar) .predFighter span {
    font-weight: 900;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body:has(#userAvatar) .predCenter {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
  }

  body:has(#userAvatar) .predStatus {
    font-size: 18px;
    font-weight: 900;
    text-align: center;
  }

  body:has(#userAvatar) .predStatus.na {
    color: rgba(120, 120, 120, .9);
  }

  body:has(#userAvatar) .predPick {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: 0;
    max-width: 320px;
  }

  body:has(#userAvatar) .predPick.neutral {
    border: 0;
    background: transparent;
  }

  body:has(#userAvatar) .predPick img {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    object-fit: cover;
    object-position: 50% 0%;
    border: 1px solid var(--line);
    flex: 0 0 auto;
  }

  body:has(#userAvatar) .predPick .txt {
    font-weight: 900;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  @media (max-width: 760px) {
    body:has(#userAvatar) .predTableHeader {
      display: none;
    }

    body:has(#userAvatar) .predTableRow {
      grid-template-columns: 1fr;
      gap: 10px;
    }

    body:has(#userAvatar) .predStatus {
      text-align: left;
    }
  }

  body:has(#userAvatar) .siteFooter {
    margin-top: auto;
    background: var(--panel);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 20px rgba(0, 0, 0, .08);
  }

  body:has(#userAvatar) .footerInner {
    max-width: 70%;
    margin: 0 auto;
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  body:has(#userAvatar) .footerTop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: nowrap;
    font-size: 13px;
  }

  body:has(#userAvatar) .footerTop>.footerAuthor {
    flex: 1;
    text-align: left;
    white-space: nowrap;
  }

  body:has(#userAvatar) .footerTop>.linkedinLink {
    flex: 0 0 auto;
    margin: 0 auto;
  }

  body:has(#userAvatar) .footerTop>.footerInvite {
    flex: 1;
    text-align: right;
    white-space: nowrap;
  }

  body:has(#userAvatar) .footerInvite a {
    color: var(--accent);
    font-weight: 700;
    text-decoration: none;
  }

  body:has(#userAvatar) .footerInvite a:hover {
    text-decoration: underline;
  }

  body:has(#userAvatar) .linkedinLink img {
    width: 72px;
    height: 17px;
    display: block;
    opacity: .9;
  }

  body:has(#userAvatar) .footerSocials {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  body:has(#userAvatar) .footerSocials img {
    height: 22px;
    object-fit: contain;
    opacity: .9;
    transition: opacity .12s ease, transform .12s ease;
  }

  body:has(#userAvatar) .footerSocials a:hover img {
    opacity: 1;
    transform: translateY(-1px);
  }

  body:has(#userAvatar) .linkedinLink:hover img {
    opacity: 1;
    transform: translateY(-1px);
  }

  body:has(#userAvatar) .footerDisclaimer {
    font-size: 11px;
    color: var(--muted2);
    text-align: center;
    opacity: .6;
  }

  @media (max-width: 760px) {
    body:has(#userAvatar) .wrap {
      width: 92vw;
    }

    body:has(#userAvatar) .userName {
      max-width: 280px;
    }

    body:has(#userAvatar) #chart {
      min-height: 360px;
    }

    body:has(#userAvatar) .kpiBar {
      width: 100%;
      max-width: 320px;
    }

    body:has(#userAvatar) .logoWrap img {
      width: min(320px, 64vw);
    }

    body:has(#userAvatar) .headerTop {
      padding: 10px 12px;
    }

    body:has(#userAvatar) .topBar {
      flex-direction: column;
      align-items: stretch;
      gap: 12px;
    }

    body:has(#userAvatar) .userRow {
      width: 100%;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }

    body:has(#userAvatar) .avatar {
      margin: 0 auto;
    }

    body:has(#userAvatar) .userMeta {
      width: 100%;
      align-items: center;
      text-align: center;
    }

    body:has(#userAvatar) .userAcc {
      width: 100%;
      justify-content: center;
      flex-wrap: wrap;
      gap: 8px;
    }

    body:has(#userAvatar) .filters {
      width: 100%;
      margin-left: 0;
      justify-content: flex-start;
    }

    body:has(#userAvatar) .chartFilters {
      padding: 12px 12px 0;
    }

    body:has(#userAvatar) .filters .selectWrap {
      width: 100%;
    }

    body:has(#userAvatar) #eventFilter {
      width: 100%;
      max-width: none;
    }

    body:has(#userAvatar) .footerTop {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      text-align: center;
    }

    body:has(#userAvatar) .footerAuthor {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      white-space: normal;
      text-align: center;
    }

    body:has(#userAvatar) .linkedinLink {
      margin: 0;
    }

    body:has(#userAvatar) .footerInvite {
      white-space: normal;
      text-align: center;
    }

    body:has(#userAvatar) .linkedinLink img {
      width: 64px;
      height: auto;
    }

    body:has(#userAvatar) .footerDisclaimer {
      margin-top: 6px;
      font-size: 10px;
      text-align: center;
    }
  }

  body:has(#userAvatar) .predTableHeader {
    position: sticky;
    top: 64px;
    z-index: 5;
    background: rgba(255, 255, 255, .85);
    backdrop-filter: blur(6px);
  }

  body:has(#userAvatar) .predSummaryRow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }

  @media (max-width: 760px) {
    body:has(#userAvatar) .predSummaryRow {
      grid-template-columns: 1fr;
      gap: 6px;
    }

    body:has(#userAvatar) .predSummaryRow .summary-left {
      white-space: nowrap;
    }

    body:has(#userAvatar) .predSummaryRow .summary-right {
      text-align: left;
    }
  }

  body:has(#userAvatar) .footerInner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
  }

  body:has(#userAvatar) .footerTop {
    display: flex;
    justify-content: center;
  }

  body:has(#userAvatar) .footerSocials {
    display: flex;
    gap: 12px;
    justify-content: center;
  }

  /* =========================================================
   PAGE: progress.html scoped with body:has(#container)
   ========================================================= */
  body:has(#container) {
    font-family: var(--sans);
    margin: 0;
    background: linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  body:has(#container) #controls {
    width: 1080px;
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    padding-left: 28px;
  }

  body:has(#container) .post-square {
    background: #fff;
    box-sizing: border-box;
    padding: 28px 28px 20px 28px;
    overflow: hidden;
  }

  body:has(#container) .bar-right-accuracy {
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .28);
  }

  body:has(#container) #container {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    border: 1px solid #d6d0d0;
  }

  body:has(#container) button {
    padding: 8px 14px;
    border: 1px solid #d1d5db;
    background: white;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
  }

  body:has(#container) button:hover {
    background: #f9fafb;
  }

  body:has(#container) .bar-label {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
  }

  body:has(#container) .bar-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, .92);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .22);
    flex: 0 0 30px;
    background: #eee;
  }

  body:has(#container) .bar-avatar img {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
    display: block;
  }

  body:has(#container) .bar-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.08;
  }

  body:has(#container) .bar-name {
    font-size: 16px;
    font-weight: 800;
    color: #fff;
  }

  body:has(#container) .bar-accuracy {
    font-size: 11px;
    color: rgba(255, 255, 255, .98);
    margin-top: 2px;
    font-weight: 600;
  }

  body:has(#container) .rank-left-label {
    font-size: 20px;
    font-weight: 800;
    color: #222;
    line-height: 1;
  }

  body:has(#container) .siteHeader {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--line);
  }

  body:has(#container) .headerTop {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 12px 20px;
  }

  body:has(#container) .logoWrap {
    grid-column: 2;
    justify-self: center;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
    cursor: pointer;
  }

  body:has(#container) .logoWrap img {
    width: min(420px, 60vw);
    height: auto;
    display: block;
    opacity: .98;
  }

  body:has(#container) .siteFooter {
    position: relative;
    bottom: 0;
    left: 0;
    right: 0;

    background: var(--panel);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 20px rgba(0, 0, 0, .08);
    z-index: 999;
  }

  body:has(#container) .footerInner {
    max-width: 70%;
    margin: 0 auto;
    padding: 10px 0px 10px 0px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  body:has(#container) .footerTop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: nowrap;
    font-size: 13px;
  }

  body:has(#container) .footerTop>.footerAuthor {
    flex: 1;

    text-align: left;
  }

  body:has(#container) .footerTop>.linkedinLink {
    flex: 0 0 auto;

    margin: 0 auto;
  }

  body:has(#container) .footerTop>.footerInvite {
    flex: 1;

    text-align: right;
    white-space: nowrap;
  }

  body:has(#container) .footerAuthor,
  body:has(#container) .footerInvite {
    white-space: nowrap;
  }

  body:has(#container) .footerInvite a {
    color: var(--accent);
    font-weight: 700;
    text-decoration: none;
  }

  body:has(#container) .footerInvite a:hover {
    text-decoration: underline;
  }

  body:has(#container) .linkedinLink img {
    width: 72px;
    height: 17px;
    display: block;
    opacity: .9;
  }

  body:has(#container) .linkedinLink:hover img {
    opacity: 1;
    transform: translateY(-1px);
  }

  body:has(#container) .footerDisclaimer {
    font-size: 11px;
    color: var(--muted2);
    text-align: center;
    opacity: 0.6;
  }

  @media (max-width: 760px) {
    body:has(#container) .footerTop {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      text-align: center;
    }

    body:has(#container) .footerAuthor {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      white-space: normal;
      text-align: center;
    }

    body:has(#container) .linkedinLink {
      margin: 0;
    }

    body:has(#container) .footerInvite {
      white-space: normal;
      text-align: center;
    }

    body:has(#container) .linkedinLink img {
      width: 64px;
      height: auto;
    }

    body:has(#container) .footerDisclaimer {
      margin-top: 6px;
      font-size: 10px;
      text-align: center;
    }
  }

  body:has(#container) .footerSocials {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  body:has(#container) .footerSocials img {
    height: 22px;
    object-fit: contain;
    opacity: .9;
    transition: opacity .12s ease, transform .12s ease;
  }

  body:has(#container) .footerSocials a:hover img {
    opacity: 1;
    transform: translateY(-1px);
  }

  body:has(#container) .chart {
    margin: 0 auto;
    display: table;
    margin-top: 20px;
  }

  body:has(#container) .footerInner {
    display: flex;
    flex-direction: column;
    align-items: center;

    body:has(#container) .footerTop {
      display: flex;
      justify-content: center;
    }

    body:has(#container) .footerSocials {
      display: flex;
      gap: 12px;
      justify-content: center;
    }
  }
}

/* RESPONSIVE COMMON */
@media (max-width: 760px) {

  .eventSelect,
  .selectWrap,
  #eventSelect {
    width: 100%;
  }
}

.bar-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, .92);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .22);
  flex: 0 0 30px;
  background: #eee;
}

.bar-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

body:has(.post-square) #container {
  height: 100%;
}

body:has(.post-square) .highcharts-point {
  min-height: 44px;
}

body:has(.post-square) .bar-label {
  min-height: 42px;
  align-items: center;
}

body:has(.post-square) .bar-avatar {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
}

body:has(.post-square) .bar-name {
  font-size: 15px;
  line-height: 1.15;
}

body:has(.post-square) .bar-accuracy {
  font-size: 12px;
  line-height: 1.15;
}

.progress-square {
  height: 680px;
}

.progress-square #container {
  height: 620px;
}

.progress-square .bar-label {
  height: 42px;
  align-items: center;
  overflow: visible;
}

.progress-square .bar-avatar {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
}

.progress-square .bar-meta {
  justify-content: center;
}

.progress-square .bar-name {
  font-size: 14px;
  line-height: 1.1;
}

.progress-square .bar-accuracy {
  font-size: 11px;
  line-height: 1.1;
}

.bar-avatar {
  display: inline-block;
  vertical-align: middle;
}

.bar-meta {
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
}

.user-page .backRow {
  display: none !important;
}

@media (min-width: 761px) {
  .user-page .wrap {
    width: 95%;
    max-width: none;
    margin: 20px auto 25px;
  }

  .user-page .card {
    border-radius: var(--rad);
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .72);
    box-shadow: var(--shadow);
    overflow: hidden;
  }

  .user-page .topBar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    background: var(--panel);
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
  }

  .user-page .userRow {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .user-page .avatar {
    width: 100px;
    height: 100px;
    flex: 0 0 100px;
    border-radius: 999px;
    overflow: hidden;
  }

  .user-page .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .user-page .userMeta {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .user-page .userNameRow,
  .user-page .userStats,
  .user-page .userAcc {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .user-page .filters {
    margin-left: auto;
  }

  .user-page #chart {
    width: 100%;
    min-height: 360px;
  }

  .user-page .predTableRow {
    display: grid;
    grid-template-columns: 1.6fr .8fr .8fr;
    align-items: center;
    gap: 20px;
    padding: 12px 14px;
  }

  .user-page .fightCol {
    display: grid;
    grid-template-columns: 1fr 40px 1fr;
    align-items: center;
    gap: 12px;
  }

  .user-page .predFighter,
  .user-page .predPick {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }

  .user-page .predFighter img,
  .user-page .predPick img {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    object-fit: cover;
    flex: 0 0 34px;
  }

  .user-page .predFighter span,
  .user-page .predPick .txt {
    font-weight: 900;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .user-page .predCenter {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .user-page .predLabel {
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .12em;
    color: var(--muted);
  }

  .user-page .predSummaryRow {
    grid-template-columns: 1fr 1fr;
    font-size: 18px;
    font-weight: 950;
  }
}

.socialLink img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  opacity: .9;
  border-radius: 4px;
  transition: opacity .12s ease, transform .12s ease;
}

.backRow {
  display: flex;
  justify-content: flex-start;
  margin: 6px 0 12px;
}

.backBtn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);
  color: var(--text);
  text-decoration: none;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 12px;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

.backIcon {
  font-size: 14px;
  line-height: 1;
  opacity: .9;
}

.userName {
  font-weight: 950;
  letter-spacing: .02em;
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 420px;
}

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

.statBox {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: #111;
  box-shadow: 0 5px 5px rgba(17, 24, 39, .16), 0 2px 6px rgba(17, 24, 39, .08);
}

.statNum {
  font-family: var(--mono);
  font-weight: 950;
  font-size: 13px;
  letter-spacing: .02em;
}

.statLabel {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #111;
}

.accLabel {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.userAcc {
  display: flex;
  align-items: center;
  gap: 14px;
}

.user-page .userAcc {
  display: none !important;
}

.kpiBar {
  position: relative;
  width: 220px;
  height: 18px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .10);
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, .08);
}

.kpiFill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  border-radius: 999px;
  background: var(--accent);
  transition: width .6s ease, background-color .4s ease;
}

.kpiText {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-weight: 950;
  font-size: 12px;
  letter-spacing: .02em;
  color: rgba(0, 0, 0, .85);
}

.chartWrap {
  padding: 12px 14px 16px;
}

.user-page .profilePrivateNotice {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  font-weight: 850;
  text-align: center;
}

.user-page .chartEventLabel {
  display: block;
  width: 220px;
  white-space: normal;
  overflow: hidden;
  overflow-wrap: anywhere;
  text-align: right;
  line-height: 1.15;
}

@media (max-width: 760px) {
  .user-page .chartEventLabel {
    width: 132px;
    max-height: 3.45em;
  }
}

.user-page .chartFilters {
  display: flex;
  justify-content: flex-start;
  padding: 12px 16px 0;
  background: rgba(255, 255, 255, .72);
}

.user-page .chartFilters .filters {
  margin-left: 0;
}

.user-page .chartFilters .selectWrap {
  width: auto;
}

.user-page .chartFilters select {
  width: 190px !important;
}

.note {
  padding: 0 16px 14px;
  color: var(--muted);
  font-size: 12px;
}

.predTable {
  display: flex;
  flex-direction: column;
}

.predTableRow.row-win {
  background: linear-gradient(180deg, rgba(31, 143, 42, .22) 0%, rgba(31, 143, 42, .08) 35%, rgba(0, 0, 0, .02) 100%);
  border-left: 3px solid rgba(31, 143, 42, .55);
}

.predTableRow.row-lose {
  background: linear-gradient(180deg, rgba(214, 37, 37, .22) 0%, rgba(214, 37, 37, .08) 35%, rgba(0, 0, 0, .02) 100%);
  border-left: 3px solid rgba(214, 37, 37, .55);
}

.predTableRow {
  position: relative;
}

.predTableRow {
  padding: 12px 14px;
  background: transparent;
  border: 0;
  border-bottom-width: 0px;
  border-bottom-style: none;
  border-bottom-color: currentcolor;
  border-left-width: 0px;
  border-left-style: none;
  border-left-color: currentcolor;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  transition: filter .12s ease;
}

.predTableRow {
  display: grid;
  grid-template-columns: 2.8fr 1fr 1fr;
  align-items: center;
  gap: 16px;
}

.fightCol {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding-right: 18px;
  margin-right: 10px;
}

.predFighter {
  display: flex;
  align-items: center;
  gap: 10px;

  min-width: 0;
}

.predFighter img {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  object-fit: cover;
  object-position: 50% 0%;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, .05);
  flex: 0 0 auto;
}

.predFighter span {
  font-weight: 900;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =========================================================
   USER ACHIEVEMENTS
   ========================================================= */
.achievementsCard {
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .08);
  overflow: hidden;
  margin-bottom: 14px;
}

.achievementsCard:empty {
  display: none;
}

.userAchievementsInline {
  width: 100%;
  margin: 4px 0 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.userAchievementsInline .achievementsHead {
  display: none;
}

.userAchievementsInline .achievementsGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 0;
  padding-right: 5px;
  padding-bottom: 5px;
  overflow: visible;
}

.userAchievementsInline .achievementGroupCompact {
  min-height: 58px;
  padding: 7px 10px;
  border-radius: 12px;
  background: #fff;
  border-color: transparent;
  color: #111;
  text-align: left;
  box-shadow: 0 5px 5px rgba(17, 24, 39, .16), 0 2px 6px rgba(17, 24, 39, .08);
}

.userAchievementsInline .achievementIcon {
  width: 26px;
  height: 26px;
  font-size: 14px;
}

.userAchievementsInline .achievementGroupTitle {
  display: none;
}

.userAchievementsInline .achievementCurrent {
  color: #111;
  font-size: 12px;
}

.userAchievementsInline .achievementRequirement {
  color: #111;
  font-size: 9px;
  text-align: left;
}

.achievementsHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .72);
}

.achievementsTitle {
  font-size: 14px;
  font-weight: 950;
  letter-spacing: .10em;
  text-transform: uppercase;
}

.achievementsSub {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.achievementsGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 14px 12px;
}

.achievementGroup {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 14px 12px;
  border: 1px solid rgba(31, 143, 42, .22);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(246, 248, 250, .92));
}

.achievementsGridCompact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.achievementGroupCompact {
  min-height: 92px;
  justify-content: center;
}

.achievementTop {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.achievementIcon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(31, 143, 42, .22);
  background: rgba(255, 255, 255, .78);
  flex: 0 0 auto;
  font-size: 16px;
}

.achievementGroupTitle {
  color: rgba(28, 35, 45, .74);
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.achievementCurrent {
  margin-top: 2px;
  font-size: 15px;
  font-weight: 950;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.achievementRequirement {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.achievementProgress {
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, .06);
}

.achievementProgress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #249742, #6fc77a);
}

.achievementNextGoal {
  padding: 10px;
  border: 1px solid rgba(31, 143, 42, .20);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(31, 143, 42, .08), rgba(31, 143, 42, .04));
}

.achievementNextGoal span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.achievementNextGoal strong {
  display: block;
  margin-top: 0;
  font-size: 14px;
  line-height: 1.1;
}

.achievementMeta,
.achievementNext {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 950;
}

.achievementTimeline {
  position: relative;
  display: grid;
  gap: 9px;
  margin-top: 2px;
  padding: 4px 0 0 14px;
}

.achievementTimeline::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 5px;
  width: 2px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .18);
}

.achievementTimelineItem {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.achievementTimelineDot {
  width: 10px;
  height: 10px;
  margin-left: -14px;
  margin-top: 3px;
  border-radius: 999px;
  border: 2px solid #fff;
  background: rgba(0, 0, 0, .26);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .10);
  z-index: 1;
}

.achievementTimelineItem.done .achievementTimelineDot {
  background: #2f9b45;
}

.achievementTimelineItem.current .achievementTimelineDot {
  background: #f2b705;
  box-shadow: 0 0 0 3px rgba(242, 183, 5, .22);
}

.achievementTimelineItem strong {
  display: inline-block;
  font-size: 11px;
  line-height: 1.15;
}

.achievementTimelineItem small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  line-height: 1.1;
}

.achievementTimelineItem.current strong {
  padding: 4px 7px;
  border-radius: 8px;
  background: linear-gradient(135deg, #ffe88a, #f2b705);
  color: #111;
  font-size: 12px;
  box-shadow: 0 5px 12px rgba(242, 183, 5, .20);
}

.achievementTimelineItem.current small {
  margin-left: 7px;
  color: rgba(17, 17, 17, .62);
}

.achievementTimelineItem.done strong {
  color: rgba(28, 35, 45, .86);
}

.achievementTimelineItem.future {
  opacity: .48;
}

.achievementNext {
  display: block;
  text-align: center;
  font-size: 11px;
  font-weight: 850;
}

.achievementBadges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.achievementBadge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, .035);
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  line-height: 1.1;
}

.achievementBadge.done {
  border-color: rgba(31, 143, 42, .32);
  background: rgba(31, 143, 42, .11);
  color: var(--accent);
}

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

  .achievementsGridCompact {
    grid-template-columns: 1fr;
  }

  .userAchievementsInline .achievementsGrid {
    grid-template-columns: 1fr;
    gap: 12px;
    overflow: visible;
  }

  .userAchievementsInline .achievementGroupCompact {
    box-shadow: 0 8px 18px rgba(17, 24, 39, .13), 0 1px 4px rgba(17, 24, 39, .07);
  }
}

@media (max-width: 760px) {
  .user-page .chartFilters {
    justify-content: stretch;
    padding: 12px 12px 0;
  }

  .user-page .chartFilters .filters,
  .user-page .chartFilters .selectWrap {
    width: 100%;
  }

  .user-page .chartFilters select {
    width: 100% !important;
  }
}

.vsCol {
  font-weight: 900;
  font-size: 11px;
  letter-spacing: .14em;
  user-select: none;
}

.predCenter {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
}

.predLabel {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 8px;
  white-space: nowrap;
  flex: 0 0 auto;
}

.predPick img {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  object-fit: cover;
  object-position: 50% 0%;
  border: 1px solid var(--line);
  flex: 0 0 auto;
}

.predTableRow:last-child {
  border-bottom: 0;
  padding-bottom: 10px;
}

.predSummaryRow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}

.predSummaryRow {
  background: var(--panel);
  border-top: 1px solid var(--line);
  border-bottom: 0;
  padding: 14px;
  padding-bottom: 14px;
  padding-bottom: 2px;
  font-weight: 900;
}

.predSummaryRow {
  font-weight: 900;
}


select {
  appearance: none;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .80);
  color: var(--text);
  padding: 10px 36px 10px 12px;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: .02em;
  cursor: pointer;
  outline: none;
  width: 100% !important;
}

.selectWrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 100%;
}

.selectWrap::after {
  content: "▾";
  position: absolute;
  right: 12px;
  pointer-events: none;
  color: var(--muted);
  font-weight: 900;
}

.profile-page .wrap {
  width: min(760px, 95%);
  margin: 20px auto 25px;
}

.profile-page .card {
  border-radius: var(--rad);
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.profile-page .cardHead {
  padding: 16px;
  border-bottom: 1px solid var(--line);
  font-weight: 700;
}

.profile-page .profilePreviewBanner {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 122px;
  color: var(--text);
  background: var(--panel);
  position: relative;
  overflow: hidden;
}

.profile-page .profilePreviewBanner[data-profile-banner]:not([data-profile-banner="default"]) {
  color: #fff;
}

.profile-page .profilePreviewBanner[data-profile-banner]:not([data-profile-banner="default"])::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .48), rgba(0, 0, 0, .10) 56%, rgba(0, 0, 0, .42)),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .10) 0 1px, transparent 1px 11px);
  pointer-events: none;
}

.profile-page .profilePreviewBanner > * {
  position: relative;
  z-index: 1;
}

.profile-page .profilePreviewAvatar.avatarWrap {
  width: 92px;
  height: 92px;
  flex: 0 0 92px;
  margin: 0;
}

.profile-page .profilePreviewAvatar.isVerifiedCreator::after {
  right: -2px;
  bottom: -2px;
  width: 18px;
  height: 18px;
  font-size: 11px;
}

.profile-page .profilePreviewText {
  min-width: 0;
}

.profile-page .profilePreviewTitle {
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .78;
}

.profile-page .profilePreviewName {
  margin-top: 4px;
  font-size: 18px;
  font-weight: 950;
  line-height: 1.2;
}

.profile-page .profileMain {
  padding: 16px;
}

.profile-page .field {
  margin-bottom: 18px;
}

.profile-page .fieldLabel {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 6px;
  display: block;
}

.profile-page .input {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;
  min-width: 0;
}

.profile-page .input[readonly] {
  background: rgba(0, 0, 0, .04);
  color: var(--muted);
}

.profile-page .privacyField .fieldLabel {
  display: none;
}

.profile-page .privacyToggle {
  display: inline-grid;
  grid-template-columns: auto minmax(0, auto);
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  width: auto;
  max-width: 100%;
}

.profile-page .privacyToggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.profile-page .privacyToggleTrack {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 58px;
  height: 30px;
  border-radius: 999px;
  background: #f41452;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
  transition: background .18s ease;
}

.profile-page .privacyToggleKnob {
  position: absolute;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .20);
  transition: transform .18s ease;
}

.profile-page .privacyToggleKnob::before {
  content: "\00d7";
  display: flex;
  align-items: center;
  justify-content: center;
  place-items: center;
  width: 100%;
  height: 100%;
  color: #f41452;
  font-size: 23px;
  font-weight: 950;
  line-height: 24px;
  transform: translateY(-1px);
}

.profile-page .privacyToggle input:checked + .privacyToggleTrack {
  background: #1fd87a;
}

.profile-page .privacyToggle input:checked + .privacyToggleTrack .privacyToggleKnob {
  transform: translateX(28px);
}

.profile-page .privacyToggle input:checked + .privacyToggleTrack .privacyToggleKnob::before {
  content: "\2713";
  color: #1fd87a;
  font-size: 17px;
  line-height: 1;
  transform: none;
}

.profile-page .emailNotificationsToggle .privacyToggleTrack {
  background: #f41452;
}

.profile-page .emailNotificationsToggle .privacyToggleKnob::before {
  content: "\00d7";
  color: #f41452;
  font-size: 23px;
  line-height: 24px;
  transform: translateY(-1px);
}

.profile-page .emailNotificationsToggle input:checked + .privacyToggleTrack {
  background: #1fd87a;
}

.profile-page .emailNotificationsToggle input:checked + .privacyToggleTrack .privacyToggleKnob {
  transform: translateX(28px);
}

.profile-page .emailNotificationsToggle input:checked + .privacyToggleTrack .privacyToggleKnob::before {
  content: "\2713";
  color: #1fd87a;
  font-size: 17px;
  line-height: 1;
  transform: none;
}

.profile-page .privacyToggleText {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.profile-page .privacyToggleText strong {
  font-size: 14px;
  font-weight: 950;
}

.profile-page .privacyToggleText span {
  display: none;
}

.profile-page .imageField {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.profile-page .avatarWrap {
  width: 140px;
  height: 140px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #fff;
  flex: 0 0 auto;
}

.profile-page .avatarWrap img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  display: block;
}

.profile-page .fileBtn {
  display: inline-flex;
  justify-content: center;
  padding: 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel);
  cursor: pointer;
  width: min(100%, 240px);
}

.profile-page .fileBtn input {
  display: none;
}

.profile-page .profileBannerPicker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 10px;
}

.profile-page .profileBannerOption {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 76px;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  overflow: hidden;
}

.profile-page .profileBannerPicker:not(.profileFramePicker) .profileBannerOption[data-profile-banner]:not([data-profile-banner="default"]) {
  background-color: #111827;
  background-image: var(--profile-banner-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
  isolation: isolate;
}

.profile-page .profileBannerPicker:not(.profileFramePicker) .profileBannerOption[data-profile-banner="default"] {
  background:
    radial-gradient(circle at 16% 18%, rgba(255, 255, 255, .80), transparent 24%),
    linear-gradient(135deg, #f8fafc, #dfe5ec 56%, #ffffff);
  color: var(--text);
}

.profile-page .profileBannerPicker:not(.profileFramePicker) .profileBannerOption[data-profile-banner="default"] .profileBannerSwatch {
  display: none;
}

.profile-page .profileBannerPicker:not(.profileFramePicker) .profileBannerOption[data-profile-banner]:not([data-profile-banner="default"])::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(0, 0, 0, .66), rgba(0, 0, 0, .36));
}

.profile-page .profileBannerPicker:not(.profileFramePicker) .profileBannerOption.locked[data-profile-banner]:not([data-profile-banner="default"])::before {
  background: linear-gradient(90deg, rgba(72, 76, 84, .78), rgba(72, 76, 84, .58));
}

.profile-page .profileBannerPicker:not(.profileFramePicker) .profileBannerOption[data-profile-banner]:not([data-profile-banner="default"]) .profileBannerText strong,
.profile-page .profileBannerPicker:not(.profileFramePicker) .profileBannerOption[data-profile-banner]:not([data-profile-banner="default"]) .profileBannerText span {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}

.profile-page .profileBannerPicker:not(.profileFramePicker) .profileBannerOption[data-profile-banner]:not([data-profile-banner="default"]) .profileBannerSwatch {
  display: none;
}

.profile-page .profileBannerOption.selected {
  border-color: var(--accent);
  box-shadow:
    0 0 0 2px rgba(31, 143, 42, .34),
    0 10px 22px rgba(31, 143, 42, .16);
}

.profile-page .profileSelectedIcon {
  position: absolute;
  right: 14px;
  top: 50%;
  z-index: 2;
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  transform: translateY(-50%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .24);
}

.profile-page .profileSelectedIcon iconify-icon {
  font-size: 20px;
}

.profile-page .profileBannerPicker:not(.profileFramePicker) .profileBannerOption.selected .profileBannerText {
  padding-right: 52px;
}

.profile-page .profileBannerOption.locked {
  opacity: 1;
  filter: none;
  cursor: not-allowed;
}

.profile-page .profileBannerOption.locked .profileBannerText {
  opacity: .82;
}

.profile-page .profileBannerPicker:not(.profileFramePicker) .profileBannerOption.locked[data-profile-banner]:not([data-profile-banner="default"]) .profileBannerText {
  padding-right: 48px;
}

.profile-page .profileBannerOption.locked .profileFrameSwatch,
.profile-page .profileBannerOption.locked .profileBadgeSwatch {
  opacity: 1;
  filter: none;
}

.profile-page .profileFrameOption.locked {
  background: #fff;
  color: #fff;
  isolation: isolate;
}

.profile-page .profileFrameOption.locked::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(90deg, rgba(72, 76, 84, .56), rgba(72, 76, 84, .38));
  pointer-events: none;
}

.profile-page .profileFrameOption.locked .profileFrameSwatch,
.profile-page .profileFrameOption.locked .profileBannerText {
  position: relative;
  z-index: 1;
}

.profile-page .profileFrameOption.locked .profileFrameSwatch {
  filter: grayscale(.35) opacity(.82);
}

.profile-page .profileFrameOption.locked .profileFrameSwatch::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 999px;
  background: rgba(72, 76, 84, .34);
  pointer-events: none;
}

.profile-page .profileFrameOption.locked .profileFrameLockIcon {
  z-index: 2;
}

.profile-page .profileFrameOption.locked .profileBannerText {
  padding-right: 48px;
}

.profile-page .profileFrameOption.locked .profileBannerText strong,
.profile-page .profileFrameOption.locked .profileBannerText span {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}

.profile-page .profileBannerLockIcon {
  position: absolute;
  top: 50%;
  right: 16px;
  z-index: 2;
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, .52);
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  transform: translateY(-50%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .20);
}

.profile-page .profileBannerLockIcon iconify-icon {
  font-size: 19px;
}

.profile-page .profileFrameLockIcon {
  position: absolute;
  top: 50%;
  right: 16px;
  border-color: rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .14);
  color: #fff;
  transform: translateY(-50%);
}

.profile-page .profileFrameOption.selected .profileBannerText {
  padding-right: 52px;
}

.profile-page .profileBadgeOption.locked {
  background: #fff;
  color: #fff;
  isolation: isolate;
}

.profile-page .profileBadgeOption.locked::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(90deg, rgba(72, 76, 84, .56), rgba(72, 76, 84, .38));
  pointer-events: none;
}

.profile-page .profileBadgeOption.locked .profileBadgeSwatch,
.profile-page .profileBadgeOption.locked .profileBannerText {
  position: relative;
  z-index: 1;
}

.profile-page .profileBadgeOption.locked .profileBadgeSwatch {
  filter: grayscale(.25) opacity(.84);
}

.profile-page .profileBadgeOption.locked .profileBadgeSwatch::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(72, 76, 84, .28);
  pointer-events: none;
}

.profile-page .profileBadgeOption.locked .profileBannerText {
  padding-right: 48px;
}

.profile-page .profileBadgeOption.locked .profileBannerText strong,
.profile-page .profileBadgeOption.locked .profileBannerText span {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}

.profile-page .profileBadgeLockIcon {
  position: absolute;
  top: 50%;
  right: 16px;
  border-color: rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .14);
  color: #fff;
  transform: translateY(-50%);
  z-index: 2;
}

.profile-page .profileBadgeOption.selected .profileBannerText {
  padding-right: 52px;
}

.profile-page .profileBannerSwatch {
  position: relative;
  width: 58px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .55);
  background: linear-gradient(135deg, #f6f7f9, #dfe3e8);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
  overflow: hidden;
}

.profile-page .profileBannerOption[data-profile-banner]:not([data-profile-banner="default"]) .profileBannerSwatch {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #f4f6f8;
}

.profile-page .profileBannerOption.locked:not(.profileFrameOption):not(.profileBadgeOption) .profileBannerSwatch::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 14px;
  border-radius: 4px;
  background:
    radial-gradient(circle at 50% 62%, rgba(255, 255, 255, .95) 0 2px, transparent 2px),
    rgba(17, 24, 39, .86);
  transform: translate(-50%, -34%);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .22);
}

.profile-page .profileBannerOption.locked:not(.profileFrameOption):not(.profileBadgeOption) .profileBannerSwatch::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 14px;
  border: 3px solid rgba(17, 24, 39, .86);
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
  background: rgba(255, 255, 255, .26);
  transform: translate(-50%, -82%);
}

.profile-page .profileFrameSwatch {
  position: relative;
  display: block;
  width: 58px;
  height: 58px;
  flex: 0 0 auto;
  border-radius: 999px;
  border: 4px solid #dfe3e8;
  background: #fff;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, .08),
    0 8px 18px rgba(0, 0, 0, .10);
}

.profile-page .profileFrameOption[data-profile-frame-theme="default"] .profileFrameSwatch {
  border-color: transparent;
  box-shadow: none;
}

.profile-page .profileFrameSwatch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

.profile-page .profileBadgeSwatch {
  display: grid;
  place-items: center;
  width: 58px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: linear-gradient(135deg, #f6f7f9, #dfe3e8);
  color: var(--profile-badge-color, #697383);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
}

.profile-page .profileBadgeSwatch iconify-icon {
  font-size: 27px;
}

.profile-page .profileBannerOption[data-profile-banner-theme="iron"] .profileBannerSwatch {
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, .24), transparent 22%),
    linear-gradient(135deg, #111827, #3f4652 58%, #a7adb8);
}

.profile-page .profileBannerOption[data-profile-banner-theme="bronze"] .profileBannerSwatch {
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, .32), transparent 22%),
    linear-gradient(135deg, #2b180b, #7a4218 56%, #d09a61);
}

.profile-page .profileBannerOption[data-profile-banner-theme="red"] .profileBannerSwatch,
.profile-page .profilePreviewBanner[data-profile-banner-theme="red"],
.user-page .topBar:not(.userProfileTopBar)[data-profile-banner-theme="red"],
.compareUserCard[data-profile-banner-theme="red"] {
  background:
    radial-gradient(circle at 16% 20%, rgba(255, 255, 255, .28), transparent 24%),
    linear-gradient(135deg, #4b0712, #c5162f 58%, #1b1b1f);
}

.profile-page .profileBannerOption[data-profile-banner-theme="silver"] .profileBannerSwatch,
.profile-page .profilePreviewBanner[data-profile-banner-theme="silver"],
.user-page .topBar:not(.userProfileTopBar)[data-profile-banner-theme="silver"],
.compareUserCard[data-profile-banner-theme="silver"] {
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, .55), transparent 24%),
    linear-gradient(135deg, #eef1f5, #aab3bf 56%, #f9fafb);
}

.profile-page .profileBannerOption[data-profile-banner-theme="gold"] .profileBannerSwatch,
.profile-page .profilePreviewBanner[data-profile-banner-theme="gold"],
.user-page .topBar:not(.userProfileTopBar)[data-profile-banner-theme="gold"],
.compareUserCard[data-profile-banner-theme="gold"] {
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, .45), transparent 22%),
    linear-gradient(135deg, #2b2110, #c8922f 55%, #fff0a8);
}

.profile-page .profileBannerOption[data-profile-banner-theme="platinum"] .profileBannerSwatch {
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, .52), transparent 22%),
    linear-gradient(135deg, #d9e0e6, #8b98a6 56%, #ffffff);
}

.profile-page .profileBannerOption[data-profile-banner-theme="emerald"] .profileBannerSwatch {
  background:
    radial-gradient(circle at 14% 18%, rgba(255, 255, 255, .30), transparent 22%),
    linear-gradient(135deg, #03251b, #0e7b58 56%, #98f0c9);
}

.profile-page .profileBannerOption[data-profile-banner-theme="diamond"] .profileBannerSwatch {
  background:
    radial-gradient(circle at 18% 16%, rgba(255, 255, 255, .38), transparent 22%),
    linear-gradient(135deg, #031629, #0c5fae 56%, #bcecff);
}

.profile-page .profileBannerOption[data-profile-banner-theme="ruby"] .profileBannerSwatch {
  background:
    radial-gradient(circle at 16% 18%, rgba(255, 255, 255, .32), transparent 22%),
    linear-gradient(135deg, #220206, #920d18 56%, #ff6b6b);
}

.profile-page .profileBannerOption[data-profile-banner-theme="ambar"] .profileBannerSwatch {
  background:
    radial-gradient(circle at 18% 16%, rgba(255, 255, 255, .34), transparent 22%),
    linear-gradient(135deg, #281203, #a84b09 56%, #ffbd5a);
}

.profile-page .profileBannerOption[data-profile-banner-theme="god"] .profileBannerSwatch {
  background:
    radial-gradient(circle at 22% 22%, rgba(255, 255, 255, .55), transparent 18%),
    linear-gradient(135deg, #020617, #0e7490 24%, #16a34a 44%, #d7a536 64%, #c5162f 82%, #1d0b38);
}

.profile-page .profileBannerOption[data-profile-banner-theme="green"] .profileBannerSwatch,
.profile-page .profilePreviewBanner[data-profile-banner-theme="green"],
.user-page .topBar:not(.userProfileTopBar)[data-profile-banner-theme="green"],
.compareUserCard[data-profile-banner-theme="green"] {
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 255, 255, .30), transparent 22%),
    linear-gradient(135deg, #062f25, #178a63 56%, #d7f7df);
}

.profile-page .profileBannerOption[data-profile-banner-theme="blue"] .profileBannerSwatch,
.profile-page .profilePreviewBanner[data-profile-banner-theme="blue"],
.user-page .topBar:not(.userProfileTopBar)[data-profile-banner-theme="blue"],
.compareUserCard[data-profile-banner-theme="blue"] {
  background:
    radial-gradient(circle at 18% 16%, rgba(255, 255, 255, .32), transparent 22%),
    linear-gradient(135deg, #071b33, #1e74b7 58%, #d5edf8);
}

.profile-page .profileBannerOption[data-profile-banner-theme="steel"] .profileBannerSwatch,
.profile-page .profilePreviewBanner[data-profile-banner-theme="steel"],
.user-page .topBar:not(.userProfileTopBar)[data-profile-banner-theme="steel"],
.compareUserCard[data-profile-banner-theme="steel"] {
  background:
    radial-gradient(circle at 15% 18%, rgba(255, 255, 255, .26), transparent 24%),
    linear-gradient(135deg, #111318, #4d5968 56%, #cdd4dc);
}

.profile-page .profileBannerOption[data-profile-banner-theme="purple"] .profileBannerSwatch,
.profile-page .profilePreviewBanner[data-profile-banner-theme="purple"],
.user-page .topBar:not(.userProfileTopBar)[data-profile-banner-theme="purple"],
.compareUserCard[data-profile-banner-theme="purple"] {
  background:
    radial-gradient(circle at 15% 18%, rgba(255, 255, 255, .32), transparent 24%),
    linear-gradient(135deg, #211336, #6941a5 56%, #e9d8fd);
}

.profile-page .profileBannerOption[data-profile-banner-theme="legend"] .profileBannerSwatch,
.profile-page .profilePreviewBanner[data-profile-banner-theme="legend"],
.user-page .topBar:not(.userProfileTopBar)[data-profile-banner-theme="legend"],
.compareUserCard[data-profile-banner-theme="legend"] {
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, .52), transparent 20%),
    linear-gradient(135deg, #08090d, #7d182f 28%, #d7a536 56%, #fff2a6);
}

.profile-page .profileFrameOption[data-profile-frame-theme="silver"] .profileFrameSwatch,
[data-profile-frame-theme="silver"] {
  --profile-frame-color: #aab3bf;
  --profile-frame-glow: rgba(170, 179, 191, .42);
}

.profile-page .profileBadgeOption[data-profile-badge-theme="silver"] .profileBadgeSwatch,
.profileBadge-silver {
  --profile-badge-color: #8f9aaa;
}

.profile-page .profileFrameOption[data-profile-frame-theme="red"] .profileFrameSwatch,
[data-profile-frame-theme="red"] {
  --profile-frame-color: #c5162f;
  --profile-frame-glow: rgba(197, 22, 47, .42);
}

.profile-page .profileBadgeOption[data-profile-badge-theme="red"] .profileBadgeSwatch,
.profileBadge-red {
  --profile-badge-color: #c5162f;
}

.profile-page .profileFrameOption[data-profile-frame-theme="green"] .profileFrameSwatch,
[data-profile-frame-theme="green"] {
  --profile-frame-color: #178a63;
  --profile-frame-glow: rgba(23, 138, 99, .42);
}

.profile-page .profileBadgeOption[data-profile-badge-theme="green"] .profileBadgeSwatch,
.profileBadge-green {
  --profile-badge-color: #178a63;
}

.profile-page .profileFrameOption[data-profile-frame-theme="gold"] .profileFrameSwatch,
[data-profile-frame-theme="gold"] {
  --profile-frame-color: #c8922f;
  --profile-frame-glow: rgba(200, 146, 47, .46);
}

.profile-page .profileBadgeOption[data-profile-badge-theme="gold"] .profileBadgeSwatch,
.profileBadge-gold {
  --profile-badge-color: #c8922f;
}

.profile-page .profileFrameOption[data-profile-frame-theme="blue"] .profileFrameSwatch,
[data-profile-frame-theme="blue"] {
  --profile-frame-color: #1e74b7;
  --profile-frame-glow: rgba(30, 116, 183, .42);
}

.profile-page .profileBadgeOption[data-profile-badge-theme="blue"] .profileBadgeSwatch,
.profileBadge-blue {
  --profile-badge-color: #1e74b7;
}

.profile-page .profileFrameOption[data-profile-frame-theme="purple"] .profileFrameSwatch,
[data-profile-frame-theme="purple"] {
  --profile-frame-color: #6941a5;
  --profile-frame-glow: rgba(105, 65, 165, .42);
}

.profile-page .profileBadgeOption[data-profile-badge-theme="purple"] .profileBadgeSwatch,
.profileBadge-purple {
  --profile-badge-color: #6941a5;
}

.profile-page .profileFrameOption[data-profile-frame-theme="legend"] .profileFrameSwatch,
[data-profile-frame-theme="legend"] {
  --profile-frame-color: #d7a536;
  --profile-frame-glow: rgba(215, 165, 54, .50);
}

.profile-page .profileBadgeOption[data-profile-badge-theme="legend"] .profileBadgeSwatch,
.profileBadge-legend {
  --profile-badge-color: #d7a536;
}

.profile-page .profileBadgeOption[data-profile-badge-theme="perfect"] .profileBadgeSwatch,
.profileBadge-perfect {
  --profile-badge-color: #00a8ff;
}

.profileBadge {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-left: 6px;
  border-radius: 999px;
  color: var(--profile-badge-color, #697383);
  vertical-align: -4px;
}

.profileBadge iconify-icon {
  font-size: 19px;
}

.profile-page .profileFrameOption[data-profile-frame-theme] .profileFrameSwatch {
  border-color: var(--profile-frame-color);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, .08),
    0 0 0 2px var(--profile-frame-glow);
}

[data-profile-frame]:not([data-profile-frame="default"]) {
  position: relative;
  overflow: visible !important;
  border-radius: 999px !important;
  border-color: var(--profile-frame-color) !important;
  box-shadow:
    0 0 0 2px var(--profile-frame-color),
    0 0 0 5px var(--profile-frame-glow),
    0 10px 22px rgba(0, 0, 0, .16) !important;
}

[data-profile-frame]:not([data-profile-frame="default"]) > img {
  border-radius: 999px !important;
  overflow: hidden;
}

.verifiedAvatarInline[data-profile-frame]:not([data-profile-frame="default"]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

body:has(#rankList) .rankAchievementUser .verifiedAvatarInline {
  width: 30px;
  height: 30px;
}

body:has(#rankList) .rankEventUser .verifiedAvatarInline {
  width: 38px;
  height: 38px;
}

body:has(#rankList) .rankAchievementUser .verifiedAvatarInline img,
body:has(#rankList) .rankEventUser .verifiedAvatarInline img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}

body:has(#userAvatar) .avatar[data-profile-frame]:not([data-profile-frame="default"]) img,
body:has(#rankList) .rankAvatar[data-profile-frame]:not([data-profile-frame="default"]) img,
body:has(#rankList) .rankEventDetail .img-usuario[data-profile-frame]:not([data-profile-frame="default"]) img,
body:has(#container) .bar-avatar[data-profile-frame]:not([data-profile-frame="default"]) img {
  border-radius: 999px !important;
}

.profile-page .avatarWrap[data-profile-frame]:not([data-profile-frame="default"]) {
  margin: 6px;
}

[data-profile-frame="hits_1000"] {
  box-shadow:
    0 0 0 2px #d7a536,
    0 0 0 5px rgba(215, 165, 54, .42),
    0 0 20px rgba(197, 22, 47, .34),
    0 10px 22px rgba(0, 0, 0, .18) !important;
}

.profile-page .profileBannerText {
  display: grid;
  gap: 4px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.profile-page .profileBannerText strong {
  font-size: 13px;
  line-height: 1.2;
  white-space: normal;
}

.profile-page .profileBannerText span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
  white-space: normal;
}

.profile-page .profileSaveAfterBanners {
  margin-top: 12px;
}

.user-page .topBar:not(.userProfileTopBar)[data-profile-banner]:not([data-profile-banner="default"]) {
  color: #fff;
  position: relative;
}

.user-page .topBar:not(.userProfileTopBar)[data-profile-banner]:not([data-profile-banner="default"])::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .52), rgba(0, 0, 0, .12) 52%, rgba(0, 0, 0, .48)),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .10) 0 1px, transparent 1px 11px);
  pointer-events: none;
}

.user-page .topBar:not(.userProfileTopBar)[data-profile-banner]:not([data-profile-banner="default"]) > * {
  position: relative;
  z-index: 1;
}

.user-page .topBar:not(.userProfileTopBar)[data-profile-banner]:not([data-profile-banner="default"]) .userName,
.user-page .topBar:not(.userProfileTopBar)[data-profile-banner]:not([data-profile-banner="default"]) .accLabel,
.user-page .topBar:not(.userProfileTopBar)[data-profile-banner]:not([data-profile-banner="default"]) .statLabel,
.user-page .topBar:not(.userProfileTopBar)[data-profile-banner]:not([data-profile-banner="default"]) .achievementsTitle,
.user-page .topBar:not(.userProfileTopBar)[data-profile-banner]:not([data-profile-banner="default"]) .achievementsSub,
.user-page .topBar:not(.userProfileTopBar)[data-profile-banner]:not([data-profile-banner="default"]) .achievementGroupTitle,
.user-page .topBar:not(.userProfileTopBar)[data-profile-banner]:not([data-profile-banner="default"]) .achievementCurrent,
.user-page .topBar:not(.userProfileTopBar)[data-profile-banner]:not([data-profile-banner="default"]) .achievementRequirement {
  color: rgba(255, 255, 255, .94);
}

.user-page .topBar:not(.userProfileTopBar)[data-profile-banner]:not([data-profile-banner="default"]) .statBox,
.user-page .topBar:not(.userProfileTopBar)[data-profile-banner]:not([data-profile-banner="default"]) .achievementGroupCompact {
  background: #fff;
  border-color: rgba(0, 0, 0, .12);
  color: #111;
}

.user-page .topBar:not(.userProfileTopBar)[data-profile-banner]:not([data-profile-banner="default"]) .statNum,
.user-page .topBar:not(.userProfileTopBar)[data-profile-banner]:not([data-profile-banner="default"]) .statLabel,
.user-page .topBar:not(.userProfileTopBar)[data-profile-banner]:not([data-profile-banner="default"]) .achievementGroupTitle,
.user-page .topBar:not(.userProfileTopBar)[data-profile-banner]:not([data-profile-banner="default"]) .achievementCurrent,
.user-page .topBar:not(.userProfileTopBar)[data-profile-banner]:not([data-profile-banner="default"]) .achievementRequirement {
  color: #111;
}

.user-page .topBar:not(.userProfileTopBar)[data-profile-banner]:not([data-profile-banner="default"]) .selectWrap select {
  background: #fff;
  border-color: rgba(0, 0, 0, .12);
  color: #111;
}

.user-page .topBar:not(.userProfileTopBar)[data-profile-banner]:not([data-profile-banner="default"]) .selectWrap::after {
  color: #111;
}

@media (max-width: 760px) {
  .user-page .topBar:not(.userProfileTopBar)[data-profile-banner]:not([data-profile-banner="default"])::before {
    background:
      linear-gradient(180deg, rgba(0, 0, 0, .18), rgba(0, 0, 0, .36)),
      repeating-linear-gradient(135deg, rgba(255, 255, 255, .10) 0 1px, transparent 1px 12px);
  }

  .user-page .topBar:not(.userProfileTopBar)[data-profile-banner-theme="red"] {
    background:
      radial-gradient(circle at 50% 8%, rgba(255, 255, 255, .22), transparent 30%),
      linear-gradient(160deg, #2b050b 0%, #c5162f 54%, #390711 100%);
  }

  .user-page .topBar:not(.userProfileTopBar)[data-profile-banner-theme="silver"] {
    background:
      radial-gradient(circle at 50% 8%, rgba(255, 255, 255, .70), transparent 32%),
      linear-gradient(160deg, #6f7782 0%, #d8dde4 52%, #8b949f 100%);
  }

  .user-page .topBar:not(.userProfileTopBar)[data-profile-banner-theme="gold"] {
    background:
      radial-gradient(circle at 50% 8%, rgba(255, 255, 255, .34), transparent 30%),
      linear-gradient(160deg, #3a2508 0%, #c8922f 54%, #7c520d 100%);
  }

  .user-page .topBar:not(.userProfileTopBar)[data-profile-banner-theme="green"] {
    background:
      radial-gradient(circle at 50% 8%, rgba(255, 255, 255, .24), transparent 30%),
      linear-gradient(160deg, #06261f 0%, #178a63 54%, #0b4d35 100%);
  }

  .user-page .topBar:not(.userProfileTopBar)[data-profile-banner-theme="blue"] {
    background:
      radial-gradient(circle at 50% 8%, rgba(255, 255, 255, .24), transparent 30%),
      linear-gradient(160deg, #071a31 0%, #1e74b7 54%, #0d385c 100%);
  }

  .user-page .topBar:not(.userProfileTopBar)[data-profile-banner-theme="steel"] {
    background:
      radial-gradient(circle at 50% 8%, rgba(255, 255, 255, .20), transparent 30%),
      linear-gradient(160deg, #111318 0%, #4d5968 54%, #242b34 100%);
  }

  .user-page .topBar:not(.userProfileTopBar)[data-profile-banner-theme="purple"] {
    background:
      radial-gradient(circle at 50% 8%, rgba(255, 255, 255, .24), transparent 30%),
      linear-gradient(160deg, #211336 0%, #6941a5 54%, #362056 100%);
  }

  .user-page .topBar:not(.userProfileTopBar)[data-profile-banner-theme="legend"] {
    background:
      radial-gradient(circle at 50% 8%, rgba(255, 255, 255, .34), transparent 28%),
      linear-gradient(160deg, #08090d 0%, #7d182f 35%, #d7a536 68%, #5a3305 100%);
  }
}

.profile-page .passwordSection {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.profile-page .sectionTitle {
  font-size: 15px;
  font-weight: 900;
  margin-bottom: 14px;
}

.profile-page .secondaryProfileAction {
  width: 100%;
  margin-top: 12px;
  padding: 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
  font-weight: 800;
  cursor: pointer;
}

.profile-page .secondaryProfileAction:disabled {
  opacity: .65;
  cursor: not-allowed;
}

.profile-page .primaryProfileAction,
.profile-page #save {
  width: 100%;
  padding: 12px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: var(--accent2);
  color: var(--accent);
  font-weight: 800;
  cursor: pointer;
}

@media (max-width: 640px) {
  .profile-page .wrap {
    width: calc(100% - 24px);
  }

  .profile-page .profilePreviewBanner {
    align-items: center;
    min-height: 112px;
  }

  .profile-page .profilePreviewAvatar.avatarWrap {
    width: 78px;
    height: 78px;
    flex-basis: 78px;
  }

  .profile-page .input {
    font-size: 16px;
  }
}

@media (min-width: 761px) {
  body:has(#rankList) .cardHead {
    align-items: center;
    flex-wrap: nowrap;
  }

  body:has(#rankList) .cardFilters {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 12px;
    margin-left: 0;
    margin-right: auto;
  }

  body:has(#rankList) .filterField {
    flex: 0 0 auto;
    height: 40px;
  }

  body:has(#rankList) .filterSelect {
    height: 38px;
    min-width: 0;
    max-width: none;
    width: 190px;
    padding: 0 36px 0 14px;
  }

  body:has(#rankList) #filterEvents {
    width: 190px;
  }

  body:has(#rankList) #filterFights {
    width: 190px;
  }

  body:has(#rankList) #filterUserType {
    width: 240px;
  }
}

.filterField {
  position: relative;
}

.filterField::after {
  content: "▼";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  color: var(--muted);
  pointer-events: none;
  opacity: .9;
}

.filterSelect {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 36px;
  cursor: pointer;
}

.toastLogin {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
  display: none;
  align-items: center;
  gap: 12px;
  max-width: min(420px, calc(100vw - 32px));
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--shadow);
  color: var(--text);
}

.toastLogin.open {
  display: flex;
}

.toastLoginIcon {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--accent2);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 950;
  flex: 0 0 auto;
}

.toastLoginTitle {
  font-weight: 950;
  font-size: 13px;
}

.toastLoginText {
  font-size: 12px;
  color: var(--muted);
}

/* =========================================================
   MY PREDICTIONS
   ========================================================= */
.my-predictions-page .wrap {
  width: min(1180px, 95%);
  margin: 14px auto 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.my-predictions-page .card {
  border-radius: var(--rad);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .72);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.myPredictionsHead {
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.my-predictions-page .cardHead {
  font-weight: 950;
  font-size: 18px;
  letter-spacing: .02em;
}

.myPredictionsSub {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

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

.my-predictions-page .topBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}

.my-predictions-page .eventTabs {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.my-predictions-page .eventTabs .tab {
  box-shadow: none;
}

.my-predictions-page .eventTabs .tab.active {
  border-color: var(--accent);
  background: rgba(31, 143, 42, .10);
  color: var(--accent);
}

.my-predictions-page .eventTabs .tab.active[disabled] {
  opacity: 1;
  cursor: default;
  filter: none;
}

.my-predictions-page .filters {
  margin-left: auto;
}

.my-predictions-page #eventSelect {
  width: 390px;
  max-width: 100%;
}

.selectedEvent {
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line);
}

.selectedEvent .eventName {
  font-weight: 950;
  letter-spacing: .02em;
}

.selectedEvent .eventMeta {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.editPredictionsBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: rgba(31, 143, 42, .08);
  color: var(--accent);
  text-decoration: none;
  font-weight: 900;
  font-size: 13px;
  white-space: nowrap;
}

.myPredictionsEmpty {
  padding: 22px 16px;
  color: var(--muted);
  font-weight: 800;
}

.my-predictions-page .predPick {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.my-predictions-page .predPick .txt {
  font-weight: 900;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.my-predictions-page .predPick.neutral .txt {
  color: var(--muted);
}

.my-predictions-page .predTableRow.row-pending,
.my-predictions-page .predTableRow.row-draw {
  background: rgba(0, 0, 0, .015);
  border-left: 3px solid rgba(160, 160, 160, .45);
}

.my-predictions-page .summary-right {
  text-align: right;
}

/* =========================================================
   COMPARE USERS
   ========================================================= */
.compare-page .wrap {
  width: min(1180px, 95%);
  margin: 14px auto 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.compare-page .card {
  border-radius: var(--rad);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .72);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.compareHead {
  padding: 16px;
}

.compare-page .cardHead {
  font-weight: 950;
  font-size: 20px;
  letter-spacing: .02em;
}

.compareSub {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}

.compareControls {
  padding: 14px 16px;
}

.compareGrid {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(190px, 1fr) minmax(140px, .65fr) minmax(210px, 1fr) auto;
  align-items: end;
  gap: 12px;
}

.compareField {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.compareField span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.compareControls .primary {
  min-height: 42px;
  box-shadow: none;
}

.compareResults {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.compareEmpty,
.compareEmptyInline {
  padding: 22px 16px;
  color: var(--muted);
  font-weight: 850;
}

.compareOverview {
  padding: 16px;
}

.compareScopeLabel {
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .18em;
  text-align: center;
  text-transform: uppercase;
}

.compareVersus {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: 14px;
}

.compareUserCard {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(0, 0, 0, .025));
  position: relative;
  overflow: hidden;
}

.compareUserCard.b {
  flex-direction: row-reverse;
  text-align: right;
}

.compareUserCard[data-profile-banner]:not([data-profile-banner="default"]) {
  color: #fff;
}

.compareUserCard[data-profile-banner]:not([data-profile-banner="default"])::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .50), rgba(0, 0, 0, .10) 58%, rgba(0, 0, 0, .42)),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .10) 0 1px, transparent 1px 11px);
  pointer-events: none;
}

.compareUserCard > * {
  position: relative;
  z-index: 1;
}

.compareUserAvatar {
  width: 62px;
  height: 62px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, .05);
  flex: 0 0 auto;
  overflow: hidden;
}

.compareUserAvatar img {
  width: 62px;
  height: 62px;
  border-radius: 999px;
  object-fit: cover;
  display: block;
}

.compareUserInfo {
  min-width: 0;
}

.compareUserLabel {
  color: var(--muted2);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.compareUserCard[data-profile-banner]:not([data-profile-banner="default"]) .compareUserLabel,
.compareUserCard[data-profile-banner]:not([data-profile-banner="default"]) .compareUserName {
  color: #fff;
}

.compareUserName {
  margin-top: 3px;
  font-size: 21px;
  font-weight: 950;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.compareUserStats {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.compareUserCard.b .compareUserStats {
  justify-content: flex-end;
}

.compareUserStats span,
.comparePct {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .62);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .03em;
  white-space: nowrap;
}

.compareUserCard[data-profile-banner]:not([data-profile-banner="default"]) .compareUserStats span,
.compareUserCard[data-profile-banner]:not([data-profile-banner="default"]) .comparePct {
  background: #fff;
  color: #111;
  border-color: rgba(0, 0, 0, .12);
}

.compareUserCard[data-profile-banner]:not([data-profile-banner="default"]) .comparePct.is-good {
  color: #1f8f2a;
}

.compareUserCard[data-profile-banner]:not([data-profile-banner="default"]) .comparePct.is-mid {
  color: #9a8621;
}

.compareUserCard[data-profile-banner]:not([data-profile-banner="default"]) .comparePct.is-low {
  color: #b33232;
}

.comparePct.is-good {
  border-color: rgba(31, 143, 42, .35);
  background: rgba(31, 143, 42, .12);
  color: #1f8f2a;
}

.comparePct.is-mid {
  border-color: rgba(171, 151, 42, .35);
  background: rgba(211, 197, 72, .14);
  color: #9a8621;
}

.comparePct.is-low {
  border-color: rgba(214, 37, 37, .30);
  background: rgba(214, 37, 37, .10);
  color: #b33232;
}

.compareVs {
  display: grid;
  place-items: center;
  min-width: 64px;
  color: rgba(0, 0, 0, .72);
  font-size: 30px;
  font-weight: 950;
  letter-spacing: .04em;
}

.compareStatsGrid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.compareMetric {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .62);
}

.compareMetric span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.compareMetric strong {
  display: block;
  margin-top: 6px;
  font-size: 18px;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.compareMetric.tone-a strong,
.compareFightRow.a > :nth-child(2) {
  color: #1f8f2a;
}

.compareMetric.tone-b strong,
.compareFightRow.b > :nth-child(3) {
  color: #1f8f2a;
}

.compareMetric.tone-good strong {
  color: #1f8f2a;
}

.compareDetail {
  overflow-x: auto;
}

.compareTableHead,
.compareFightRow,
.compareEventRow {
  display: grid;
  grid-template-columns: minmax(250px, 1.7fr) minmax(150px, 1fr) minmax(150px, 1fr) minmax(120px, .8fr);
  align-items: center;
  gap: 12px;
  min-width: 760px;
}

.compareTableHead {
  padding: 12px 14px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.compareFightRow,
.compareEventRow {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  font-weight: 850;
}

.compareFightRow:last-child,
.compareEventRow:last-child {
  border-bottom: 0;
}

.compareFightRow.a {
  background: linear-gradient(90deg, rgba(31, 143, 42, .10), transparent 38%);
}

.compareFightRow.b {
  background: linear-gradient(270deg, rgba(31, 143, 42, .10), transparent 38%);
}

.compareFightRow.pending {
  color: var(--muted);
}

.compareFightName {
  font-weight: 950;
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .my-predictions-page .topBar,
  .selectedEvent {
    align-items: stretch;
  }

  .my-predictions-page .filters,
  .my-predictions-page #eventSelect {
    width: 100%;
  }

  .editPredictionsBtn {
    width: auto;
    min-width: 132px;
    min-height: 44px;
    padding: 10px 16px;
    align-self: flex-start;
  }

  .my-predictions-page .predTableRow {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  .my-predictions-page .predTable {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
  }

  .my-predictions-page .fightCol {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding-right: 0 !important;
    margin-right: 0 !important;
  }

  .my-predictions-page .predTableRow:not(.predSummaryRow) {
    position: relative;
    display: grid !important;
    align-content: start;
    min-height: 0;
    padding: 42px 14px 14px !important;
    border: 1px solid rgba(0, 0, 0, .10) !important;
    border-top: 4px solid rgba(140, 150, 165, .60) !important;
    border-left: 1px solid rgba(0, 0, 0, .10) !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .07) !important;
    overflow: hidden;
  }

  .my-predictions-page .predTableRow:not(.predSummaryRow)::after {
    content: none !important;
  }

  .my-predictions-page .predTableRow:not(.predSummaryRow)::before {
    content: "Pendiente";
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 1;
    padding: 5px 9px;
    border-radius: 999px;
    background: #f3f4f6;
    color: #4b5563;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .my-predictions-page .predTableRow.row-win:not(.predSummaryRow) {
    border-top-color: rgba(31, 143, 42, .72) !important;
    background: linear-gradient(180deg, rgba(31, 143, 42, .08), #fff 44%) !important;
  }

  .my-predictions-page .predTableRow.row-win:not(.predSummaryRow)::before {
    content: "Acierto";
    background: rgba(31, 143, 42, .12);
    color: #1f8f2a;
  }

  .my-predictions-page .predTableRow.row-lose:not(.predSummaryRow) {
    border-top-color: rgba(214, 37, 37, .70) !important;
    background: linear-gradient(180deg, rgba(214, 37, 37, .08), #fff 44%) !important;
  }

  .my-predictions-page .predTableRow.row-lose:not(.predSummaryRow)::before {
    content: "Fallo";
    background: rgba(214, 37, 37, .12);
    color: #b42318;
  }

  .my-predictions-page .predTableRow.row-draw:not(.predSummaryRow)::before {
    content: "Empate";
  }

  .my-predictions-page .predCenter {
    display: flex !important;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 10px;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 8px;
    background: rgba(246, 247, 249, .82);
  }

  .my-predictions-page .predLabel {
    min-width: 34px;
    margin: 0 !important;
    color: rgba(0, 0, 0, .56) !important;
  }

  .my-predictions-page .predFighter,
  .my-predictions-page .predPick {
    align-items: center;
    min-width: 0;
  }

  .my-predictions-page .fightCol .predFighter:last-child {
    justify-content: flex-end;
    text-align: right;
  }

  .my-predictions-page .predFighter span,
  .my-predictions-page .predPick .txt {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere;
    word-break: normal;
    line-height: 1.18;
  }

  .my-predictions-page .fightCol .predFighter:last-child span {
    text-align: right;
  }

  .my-predictions-page .predSummaryRow {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .my-predictions-page .summary-right {
    text-align: left;
  }
}

@media (max-width: 900px) {
  .compareGrid,
  .compareStatsGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .compareControls .primary {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .compare-page .wrap {
    width: min(430px, calc(100% - 20px));
  }

  .compareGrid,
  .compareStatsGrid,
  .compareVersus {
    grid-template-columns: 1fr;
  }

  .compareVs {
    min-height: 34px;
    font-size: 22px;
  }

  .compareUserCard,
  .compareUserCard.b {
    flex-direction: row;
    text-align: left;
  }

  .compareUserCard.b .compareUserStats {
    justify-content: flex-start;
  }

  .compareUserName {
    font-size: 18px;
  }

  .compareTableHead,
  .compareFightRow,
  .compareEventRow {
    min-width: 0;
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .compareTableHead {
    display: none;
  }

  .compareFightRow,
  .compareEventRow {
    padding: 14px;
  }
}

@media (max-width: 760px) {
  body:has(#grid) .side .countryInline,
  body:has(#grid) .bout.show-fighter-info .meta .countryInline {
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 31px;
    z-index: 5;
    width: 22px;
    height: 15px;
    margin: 0;
    opacity: 1;
    min-width: 0;
  }

  body:has(#grid) .side.left .countryInline,
  body:has(#grid) .bout.show-fighter-info .side.left .meta .countryInline {
    left: 9px;
  }

  body:has(#grid) .side.right .countryInline,
  body:has(#grid) .bout.show-fighter-info .side.right .meta .countryInline {
    right: 9px;
  }

  body:has(#grid) .side .countryInline span:not(.flagImg),
  body:has(#grid) .bout.show-fighter-info .meta .countryInline span:not(.flagImg) {
    display: none !important;
  }

  body:has(#grid) .side .countryInline .flagImg,
  body:has(#grid) .bout.show-fighter-info .meta .flagImg {
    display: block !important;
    width: 22px;
    height: 15px;
    border-radius: 2px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, .12);
  }

  body:has(#grid) .side .countryInline .flagImg img,
  body:has(#grid) .bout.show-fighter-info .meta .flagImg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  body:has(#grid) .side .meta .rank {
    display: block !important;
    position: absolute;
    top: 8px;
    z-index: 5;
    width: 22px;
    min-width: 22px;
    min-height: 18px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 18px;
    font-size: 11px;
    font-weight: 950;
  }

  body:has(#grid) .side.left .meta .rank {
    left: 9px;
  }

  body:has(#grid) .side.right .meta .rank {
    right: 9px;
  }

  body:has(#grid) .side .meta .rank:empty {
    display: none !important;
  }

  body:has(#grid) .side .meta .champion {
    width: 22px;
    height: 18px;
    font-size: 12px;
  }
}


/* =========================================================
   ADMINISTRATION PAGE
   Extracted from administration.html and scoped to avoid bleed.
   ========================================================= */
body.admin-page /* =========================
     THEME TOKENS (LIGHT por defecto)
     ========================= */
        :root {
            --bg: #f6f7f9;
            --bg2: #ffffff;
            --panel: rgba(0, 0, 0, .03);
            --panel2: rgba(0, 0, 0, .05);
            --line: rgba(0, 0, 0, .10);

            --text: rgba(0, 0, 0, .92);
            --muted: rgba(0, 0, 0, .62);
            --muted2: rgba(0, 0, 0, .48);

            --accent: #1f8f2a;
            --accent2: rgba(31, 143, 42, .12);

            --shadow: 0 12px 30px rgba(0, 0, 0, .10);

            --rad: 18px;
            --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
            --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
        }

body.admin-page /* =========================
     DARK MODE
     ========================= */

        * {
            box-sizing: border-box;
        }

body.admin-page,
body.admin-page {
            height: 100%;
        }

body.admin-page {
            min-height: 100%;
            background: linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
            background-attachment: fixed;
        }

body.admin-page {
            margin: 0;
            font-family: var(--sans);
            color: var(--text);
            color-scheme: light;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            background: transparent;
        }

body.admin-page .wrap {
            width: 95%;
            margin: 10px auto 25px;
            flex: 1;
        }

body.admin-page /* =========================
     HEADER (igual que index)
     ========================= */
        .siteHeader {
            position: sticky;
            top: 0;
            z-index: 1000;
            background: linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            border-bottom: 1px solid var(--line);
        }

body.admin-page .headerTop {
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            align-items: center;
            padding: 12px 20px;
        }

body.admin-page .logoWrap {
            grid-column: 2;
            justify-self: center;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            min-width: 0;
            padding-left: 7px;
            cursor: pointer;
        }

body.admin-page .logoWrap img {
            width: min(420px, 60vw);
            height: auto;
            display: block;
            opacity: .98;
        }

body.admin-page .hamburgerBtn {
            grid-column: 1;
            justify-self: start;
            align-self: center;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            padding: 0;
            border-radius: 999px;
            background: rgba(0, 0, 0, .04);
            border: 1px solid var(--line);
            box-shadow: none;
            font-size: 22px;
            color: var(--text);
            cursor: pointer;
        }

body.admin-page .headerActions {
            grid-column: 3;
            justify-self: end;
            display: inline-flex;
            align-items: center;
            gap: 10px;
        }

body.admin-page .loginStatus {
            font-size: 12px;
            font-weight: 800;
            color: var(--muted);
            text-transform: uppercase;
            letter-spacing: .06em;
        }

body.admin-page .sideMenuOverlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, .55);
            opacity: 0;
            pointer-events: none;
            transition: opacity .2s ease;
            z-index: 9000;
        }

body.admin-page .sideMenuOverlay.open {
            opacity: 1;
            pointer-events: auto;
        }

body.admin-page .sideMenu {
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            width: min(280px, 82vw);
            min-height: 100vh;
            background: #0a0f1a;
            color: #fff;
            z-index: 9001;
            transform: translateX(-100%);
            transition: transform .24s ease;
            display: flex;
            flex-direction: column;
        }

body.admin-page .sideMenu.open {
            transform: translateX(0);
        }

body.admin-page .sideMenuHeader {
            height: 64px;
            padding: 0 18px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid rgba(255, 255, 255, .12);
            background: #080d15;
        }

body.admin-page .sideMenuHeader strong {
            color: #fff;
            font-size: 14px;
            font-weight: 900;
            letter-spacing: .04em;
        }

body.admin-page #closeSideMenuBtn {
            width: 36px;
            height: 36px;
            padding: 0;
            border-radius: 999px;
            background: transparent !important;
            border: 0 !important;
            color: #fff !important;
            box-shadow: none !important;
            cursor: pointer;
        }

body.admin-page .sideMenuContent {
            padding: 18px;
            display: flex;
            flex-direction: column;
            gap: 12px;
            background: #0a0f1a;
            flex: 1;
        }

body.admin-page .sideMenuContent button {
            width: 100%;
            padding: 14px 16px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            background: rgba(255, 255, 255, .10) !important;
            border: 1px solid rgba(255, 255, 255, .18) !important;
            color: #fff !important;
            box-shadow: none !important;
            text-align: left;
            font-weight: 800;
            cursor: pointer;
}

body.admin-page .sideMenuContent button.active {
            background: rgba(31, 143, 42, .22) !important;
            border-color: rgba(31, 143, 42, .62) !important;
            color: #9cff8d !important;
            box-shadow: 0 0 0 1px rgba(31, 143, 42, .22) inset !important;
}

body.admin-page #authMenuBtn.logout {
            background: rgba(214, 37, 37, .18) !important;
            border-color: rgba(214, 37, 37, .45) !important;
            color: #ff7b7b !important;
        }

body.admin-page #authMenuBtn.login {
            background: rgba(31, 143, 42, .16) !important;
            border-color: rgba(31, 143, 42, .40) !important;
            color: #7cff6b !important;
        }

body.admin-page /* =========================
     FOOTER (igual que index)
     ========================= */
        .siteFooter {
            margin-top: auto;
            background: var(--panel);
            border-top: 1px solid var(--line);
            box-shadow: 0 -6px 20px rgba(0, 0, 0, .08);
        }

body.admin-page .footerInner {
            max-width: 70%;
            margin: 0 auto;
            padding: 10px 0 12px;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

body.admin-page .footerTop {
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            align-items: center;
            gap: 14px;
            font-size: 13px;
        }

body.admin-page .footerAuthor {
            justify-self: start;
            white-space: nowrap;
        }

body.admin-page .footerInvite {
            justify-self: end;
            white-space: nowrap;
        }

body.admin-page .footerInvite a {
            color: var(--accent);
            font-weight: 700;
            text-decoration: none;
        }

body.admin-page .footerInvite a:hover {
            text-decoration: underline;
        }

body.admin-page .footerDisclaimer {
            font-size: 11px;
            color: var(--muted2);
            text-align: center;
            opacity: 0.6;
        }

body.admin-page .footerSocials {
            display: flex;
            align-items: center;
            gap: 12px;
            justify-self: center;
        }

body.admin-page .footerSocials img {
            height: 22px;
            object-fit: contain;
            opacity: .9;
            transition: opacity .12s ease, transform .12s ease;
        }

body.admin-page .footerSocials a:hover img {
            opacity: 1;
            transform: translateY(-1px);
        }

@media (max-width: 760px) {
body.admin-page .footerTop {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 8px;
                text-align: center;
            }

body.admin-page .cardHead {
            padding: 14px 16px;
            background: var(--panel);
            border-bottom: 1px solid var(--line);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            flex-wrap: wrap;
        }

body.admin-page .cardTitle {
            display: none !important;
            margin: 0;
            font-size: 16px;
            font-weight: 950;
            letter-spacing: .08em;
            text-transform: uppercase;
            display: inline-flex;
            gap: 10px;
            align-items: center;
        }

body.admin-page .toolbar {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            justify-content: flex-end;
            width: 100%;
        }

body.admin-page .toolbar[hidden] {
            display: none !important;
        }

body.admin-page .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 10px 12px;
            border-radius: 999px;
            border: 1px solid var(--line);
            background: rgba(255, 255, 255, .65);
            cursor: pointer;
            font-weight: 900;
            letter-spacing: .06em;
            text-transform: uppercase;
            font-size: 12px;
            color: var(--text);
            box-shadow: 0 10px 18px rgba(0, 0, 0, .08);
            transition: transform .12s ease, background .12s ease, border-color .12s ease, opacity .12s ease;
            user-select: none;
        }

body.admin-page .btn:hover {
            transform: translateY(-1px);
            background: var(--panel2);
        }

body.admin-page .btn:disabled {
            opacity: .5;
            cursor: not-allowed;
            transform: none;
        }

body.admin-page .btnPrimary {
            border-color: rgba(31, 143, 42, .35);
            background: rgba(31, 143, 42, .12);
        }

body.admin-page .btnDanger {
            border-color: rgba(210, 37, 37, .35);
            background: rgba(210, 37, 37, .10);
        }

body.admin-page .btnGhost {
            background: transparent;
            box-shadow: none;
        }

body.admin-page /* =========================
     NEW: MODE TABS (Eventos / Usuarios)
     ========================= */
        .modeTabs {
            display: inline-flex;
            align-items: center;
            gap: 0;
            border: 1px solid var(--line);
            background: rgba(255, 255, 255, .55);
            border-radius: 999px;
            overflow: hidden;
            box-shadow: 0 10px 18px rgba(0, 0, 0, .06);
        }

body.admin-page .tabBtn {
            border: 0;
            background: transparent;
            padding: 10px 12px;
            cursor: pointer;
            font-weight: 950;
            letter-spacing: .08em;
            text-transform: uppercase;
            font-size: 12px;
            color: var(--muted);
            display: inline-flex;
            align-items: center;
            gap: 8px;
            user-select: none;
        }

body.admin-page .tabBtn:hover {
            background: var(--panel2);
            color: var(--text);
        }

body.admin-page .tabBtn.active {
            background: rgba(31, 143, 42, .12);
            color: var(--text);
            border-left: 1px solid rgba(31, 143, 42, .30);
            border-right: 1px solid rgba(31, 143, 42, .30);
        }

body.admin-page .tabBtn:disabled {
            opacity: .5;
            cursor: not-allowed;
        }

body.admin-page .layout {
            display: grid;
            grid-template-columns: 360px 1fr;
            gap: 14px;
            padding: 14px;
        }

body.admin-page .panel {
            border: 1px solid var(--line);
            border-radius: 16px;
            overflow: hidden;
            background: rgba(255, 255, 255, .55);
        }

body.admin-page .panelHead {
            padding: 10px 12px;
            border-bottom: 1px solid var(--line);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            background: rgba(0, 0, 0, .01);
            flex-wrap: wrap;
        }

body.admin-page .panelTitle {
            margin: 0;
            font-size: 12px;
            font-weight: 950;
            letter-spacing: .08em;
            text-transform: uppercase;
            color: var(--muted);
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

body.admin-page .search {
            width: 100%;
            display: flex;
            gap: 10px;
            padding: 10px 12px;
            border-bottom: 1px solid var(--line);
            background: rgba(0, 0, 0, .01);
        }

body.admin-page .input {
            width: 100%;
            border: 1px solid var(--line);
            border-radius: 999px;
            padding: 10px 12px;
            background: rgba(255, 255, 255, .70);
            color: var(--text);
            outline: none;
            font-weight: 700;
        }

body.admin-page .list {
            display: flex;
            flex-direction: column;
            max-height: 70vh;
            overflow: auto;
        }

body.admin-page .row {
            padding: 10px 12px;
            border-top: 1px solid var(--line);
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 10px;
            cursor: pointer;
            background: rgba(0, 0, 0, 0);
            transition: background .12s ease;
        }

body.admin-page .row:hover {
            background: rgba(0, 0, 0, .03);
        }

body.admin-page .row.active {
            background: rgba(31, 143, 42, .10);
            border-left: 4px solid var(--accent);
            padding-left: 8px;
        }

body.admin-page .rowTitle {
            font-weight: 950;
            letter-spacing: .02em;
            line-height: 1.2;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

body.admin-page .badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 4px 8px;
            border-radius: 999px;
            border: 1px solid var(--line);
            background: rgba(255, 255, 255, .65);
            font-size: 11px;
            font-weight: 900;
            letter-spacing: .06em;
            text-transform: uppercase;
            color: var(--muted);
            white-space: nowrap;
        }

body.admin-page .hint {
            padding: 12px;
            color: var(--muted);
            font-size: 12px;
        }

body.admin-page .right {
            display: flex;
            flex-direction: column;
            gap: 14px;
        }

body.admin-page .detail {
            padding: 12px;
            background: var(--panel);
        }

body.admin-page .detailGrid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px 12px;
        }

@media (max-width: 760px) {
body.admin-page .detailGrid {
                grid-template-columns: 1fr;
            }

body.admin-page .fightInlineResultSelect {
                min-width: 0;
            }
}

body.admin-page .kv {
            border: 1px solid var(--line);
            border-radius: 14px;
            padding: 10px 12px;
            background: rgba(255, 255, 255, .65);
            min-height: 54px;
        }

body.admin-page .k {
            font-size: 10px;
            font-weight: 950;
            letter-spacing: .08em;
            text-transform: uppercase;
            color: var(--muted);
            margin-bottom: 4px;
        }

body.admin-page .v {
            font-weight: 900;
            color: var(--text);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

body.admin-page .v.mono {
            font-family: var(--mono);
            color: var(--muted);
        }

body.admin-page .imgPreview {
            display: block;
            width: min(720px, 100%);
            max-height: 260px;
            margin: 0 auto;
            object-fit: cover;
            border-radius: 14px;
            border: 1px solid var(--line);
            background: var(--panel);
        }

body.admin-page .fightTable {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
        }

body.admin-page .fightTable th,
body.admin-page .fightTable td {
            border-top: 1px solid var(--line);
            padding: 10px 10px;
            text-align: left;
            vertical-align: top;
            font-size: 13px;
        }

body.admin-page .fightTable thead th {
            position: sticky;
            top: 0;
            z-index: 5;
            background: var(--bg2);
            box-shadow: 0 1px 0 var(--line);
        }

body.admin-page .fightActions {
            display: inline-flex;
            gap: 8px;
            flex-wrap: nowrap;
            justify-content: flex-end;
            white-space: nowrap;
        }

body.admin-page .fightActions .btn {
            padding: 9px 10px;
            gap: 6px;
        }

body.admin-page .fightInlineResultSelect {
            min-width: 180px;
            width: 100%;
            font-size: 12px;
            font-weight: 900;
        }

body.admin-page .muted {
            color: var(--muted);
        }

@media (max-width: 760px) {
body.admin-page .wrap {
                width: 92vw;
            }

body.admin-page .layout {
                grid-template-columns: 1fr;
            }

body.admin-page .list {
                max-height: 40vh;
            }

body.admin-page .detailGrid {
                grid-template-columns: 1fr;
            }
}

body.admin-page /* =========================
     MODAL
     ========================= */
        .modalBack {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, .50);
            display: none;
            align-items: center;
            justify-content: center;
            padding: 18px;
            z-index: 2000;
        }

body.admin-page .modalBack.open {
            display: flex;
        }

body.admin-page .modal {
            width: min(980px, 96vw);
            max-height: 90vh;
            overflow: auto;
            background: rgb(245, 245, 245);
            border: 1px solid var(--line);
            border-radius: 18px;
            box-shadow: var(--shadow);
        }

body.admin-page .modalHead {
            padding: 12px 14px;
            border-bottom: 1px solid var(--line);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            background: #fff;
            position: sticky;
            top: 0;
            z-index: 3;
        }

body.admin-page .modalTitle {
            margin: 0;
            font-size: 12px;
            font-weight: 950;
            letter-spacing: .10em;
            text-transform: uppercase;
            color: var(--muted);
        }

body.admin-page .modalBody {
            padding: 14px;
        }

body.admin-page .formGrid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px 12px;
        }

body.admin-page .field {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

body.admin-page .label {
            font-size: 10px;
            font-weight: 950;
            letter-spacing: .08em;
            text-transform: uppercase;
            color: var(--muted);
        }

body.admin-page .control,
body.admin-page select.control,
body.admin-page textarea.control {
            border: 1px solid var(--line);
            border-radius: 14px;
            padding: 10px 12px;
            background: rgba(255, 255, 255, .70);
            color: var(--text);
            outline: none;
            font-weight: 750;
        }

body.admin-page textarea.control {
            min-height: 84px;
            resize: vertical;
        }

body.admin-page .fieldRow {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px 12px;
        }

body.admin-page /* Solo la primera fila del modal de combate */
        .fieldRow.fightTopRow {
            /* Peso | Título | Orden | Resultado | Sección */
            align-items: end;
        }

body.admin-page /* Para que el input number no “crezca raro” */
        .fieldRow.fightTopRow .control {
            width: 100%;
        }

body.admin-page .modalFoot {
            padding: 12px 14px;
            border-top: 1px solid var(--line);
            display: flex;
            gap: 10px;
            justify-content: flex-end;
            flex-wrap: wrap;
            background: #fff;
        }

body.admin-page .sepTitle {
            grid-column: 1 / -1;
            margin: 6px 0 0;
            padding-top: 8px;
            border-top: 1px dashed var(--line);
            color: var(--muted);
            font-weight: 950;
            letter-spacing: .10em;
            text-transform: uppercase;
            font-size: 11px;
        }

body.admin-page .toast {
            position: fixed;
            right: 14px;
            bottom: 14px;
            background: rgba(255, 255, 255, .92);
            border: 1px solid var(--line);
            border-radius: 14px;
            padding: 10px 12px;
            box-shadow: var(--shadow);
            color: var(--text);
            display: none;
            max-width: min(520px, 92vw);
            z-index: 3000;
        }

body.admin-page .toast.open {
            display: block;
        }

body.admin-page .toastTitle {
            font-weight: 950;
            letter-spacing: .06em;
            text-transform: uppercase;
            font-size: 11px;
            color: var(--muted);
            margin-bottom: 4px;
        }

body.admin-page .toastMsg {
            font-weight: 750;
            font-size: 13px;
        }

body.admin-page /* =========================
     EVENTS GROUPS (accordion)
     ========================= */
        .eventsGroups {
            display: flex;
            flex-direction: column;
        }

body.admin-page .group {
            border-top: 1px solid var(--line);
        }

body.admin-page .group:first-child {
            border-top: 0;
        }

body.admin-page .groupSummary {
            list-style: none;
            cursor: pointer;
            user-select: none;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding: 10px 12px;
            background: rgba(0, 0, 0, .01);
            font-weight: 950;
            letter-spacing: .08em;
            text-transform: uppercase;
            font-size: 12px;
            color: var(--muted);
        }

body.admin-page .groupSummary::-webkit-details-marker {
            display: none;
        }

body.admin-page .groupSummary::after {
            content: "▾";
            opacity: .7;
            transform: translateY(-1px);
        }

body.admin-page .group[open] .groupSummary::after {
            content: "▴";
        }

body.admin-page .group .list {
            max-height: 34vh;
        }

@media (max-width: 760px) {
body.admin-page .group .list {
                max-height: 28vh;
            }
}

body.admin-page /* =========================
     ADMIN LOGIN GATE
     ========================= */
        .gateBack {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, .55);
            display: none;
            align-items: center;
            justify-content: center;
            padding: 18px;
            z-index: 5000;
        }

body.admin-page .gateBack.open {
            display: flex;
        }

body.admin-page .gate {
            width: min(520px, 94vw);
            border-radius: 18px;
            border: 1px solid var(--line);
            background: rgba(255, 255, 255, .92);
            box-shadow: var(--shadow);
            overflow: hidden;
        }

body.admin-page .gateHead {
            padding: 12px 14px;
            border-bottom: 1px solid var(--line);
            background: var(--panel);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
        }

body.admin-page .gateTitle {
            margin: 0;
            font-size: 12px;
            font-weight: 950;
            letter-spacing: .10em;
            text-transform: uppercase;
            color: var(--muted);
        }

body.admin-page .gateBody {
            padding: 14px;
        }

body.admin-page .gateHint {
            margin: 0 0 10px;
            color: var(--muted);
            font-size: 13px;
            font-weight: 750;
        }

body.admin-page .gateRow {
            display: flex;
            gap: 10px;
            align-items: center;
        }

body.admin-page .gateRow .control {
            flex: 1;
        }

body.admin-page .gateError {
            margin-top: 10px;
            color: rgba(210, 37, 37, .95);
            font-weight: 850;
            font-size: 13px;
            display: none;
        }

body.admin-page .gateError.open {
            display: block;
        }

body.admin-page .green {
            color: green !important;
        }

body.admin-page .red {
            color: red !important;
        }

body.admin-page .count {
            color: green;
            font-weight: 900;
            font-size: 12px;
        }

body.admin-page .imgRow {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 14px;
        }

body.admin-page .imgMeta {
            min-width: 0;
            flex: 1;
        }

body.admin-page .imgName {
            font-weight: 950;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

body.admin-page .imgPath {
            margin-top: 4px;
            font-size: 12px;
            color: var(--muted);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

body.admin-page .imgThumb {
            width: 160px;
            height: 90px;
            object-fit: cover;
            border-radius: 12px;
            border: 1px solid var(--line);
            background: var(--panel);
            flex: 0 0 auto;
        }

body.admin-page .imgInputRow {
            display: flex;
            align-items: top;
            gap: 10px;
        }

body.admin-page .imgInputRow .control {
            flex: 1;
            min-width: 0;
        }

body.admin-page .imgInputThumb {
            width: 46px;
            height: 46px;
            object-fit: cover;
            border-radius: 10px;
            border: 1px solid var(--line);
            background: var(--panel);
            flex: 0 0 auto;
            display: none;
            object-position: 100% 0%;
        }

body.admin-page /* --- FIGHT LIST: avatares --- */
        .fighterSide {
            display: flex;
            align-items: center;
            gap: 8px;
            min-width: 0;
        }

body.admin-page .fighterName {
            font-weight: 950;
            letter-spacing: .02em;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            min-width: 0;
            flex: 1 1 auto;
        }

body.admin-page .fighterAvatar {
            width: 50px;
            height: 50px;
            border-radius: 10px;
            object-fit: cover;
            border: 1px solid var(--line);
            background: var(--panel);
            flex: 0 0 auto;
            object-position: 100% 0%;
        }

body.admin-page /* mejora visual input file */
        input[type="file"].control {
            padding: 8px 12px;
        }

body.admin-page input[type="file"].control::file-selector-button {
            border: 1px solid var(--line);
            background: rgba(255, 255, 255, .65);
            border-radius: 999px;
            padding: 11px 10px;
            margin-right: 10px;
            cursor: pointer;
            font-weight: 900;
            letter-spacing: .06em;
            text-transform: uppercase;
            font-size: 12px;
        }

body.admin-page /* =========================
     NEW: USER PREDICTIONS SECTION
     ========================= */
        .miniSelect {
            border: 1px solid var(--line);
            border-radius: 999px;
            padding: 8px 10px;
            background: rgba(255, 255, 255, .70);
            color: var(--text);
            outline: none;
            font-weight: 850;
            font-size: 12px;
            font-family: var(--mono);
            max-width: min(520px, 100%);
        }

body.admin-page .predTable {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
        }

body.admin-page .predTable th,
body.admin-page .predTable td {
            border-top: 1px solid var(--line);
            padding: 10px 10px;
            text-align: left;
            vertical-align: middle;
            font-size: 13px;
        }

body.admin-page .predTable thead th {
            position: sticky;
            top: 0;
            z-index: 5;
            background: var(--bg2);
            box-shadow: 0 1px 0 var(--line);
        }

body.admin-page .predChoice {
            width: 100%;
            border: 1px solid var(--line);
            border-radius: 999px;
            padding: 8px 10px;
            background: rgba(255, 255, 255, .75);
            font-weight: 900;
            outline: none;
            font-family: var(--mono);
            font-size: 12px;
        }

body.admin-page .predActions {
            display: inline-flex;
            gap: 8px;
            justify-content: flex-end;
            width: 100%;
            white-space: nowrap;
        }

body.admin-page /* estados de línea (muy claritos) */
        tr.predPending {
            background: rgba(255, 237, 167, .60);
        }

body.admin-page /* amarillo clarito */
        tr.predCorrect {
            background: rgba(199, 255, 212, .55);
        }

body.admin-page /* verde clarito */
        tr.predWrong {
            background: rgba(255, 201, 201, .55);
        }

body.admin-page /* rojo clarito */

        /* =========================
     VIEW HELPERS
     ========================= */
        .hidden {
            display: none !important;
        }

body.admin-page .footerInner {
            display: flex;
            flex-direction: column;
            align-items: center;
            /* centra horizontalmente */
            text-align: center;
            /* centra texto */
            gap: 10px;
        }

body.admin-page .footerTop {
            display: flex;
            justify-content: center;
            /* centra iconos */
        }

body.admin-page .footerSocials {
            display: flex;
            gap: 12px;
            justify-content: center;
        }

body.admin-page /* =========================
     RESPONSIVE IMPROVEMENTS
     ========================= */
        .headerTop {
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            align-items: center;
            justify-content: initial;
            padding: 12px 20px;
        }

body.admin-page .logoWrap {
            grid-column: 2;
            justify-self: center;
            justify-content: center;
            padding-left: 0;
            width: auto;
        }

body.admin-page .cardHead {
            align-items: stretch;
        }

body.admin-page .modeTabs {
            max-width: 100%;
        }

body.admin-page .toolbar {
            align-items: stretch;
        }

body.admin-page .toolbar .btn,
body.admin-page .fightActions .btn,
body.admin-page .predActions .btn {
            min-height: 42px;
        }

body.admin-page .detailGrid {
            align-items: start;
        }

body.admin-page .v {
            white-space: normal;
            word-break: break-word;
        }

body.admin-page .imgRow {
            align-items: center;
        }

body.admin-page .fightTableWrap,
body.admin-page .predTableWrap {
            width: 100%;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

body.admin-page #userPredTable {
            display: table;
            width: 100%;
            min-width: 100%;
            table-layout: fixed;
        }

body.admin-page #userPredTable thead {
            display: table-header-group;
        }

body.admin-page #userPredTable tbody {
            display: table-row-group;
        }

body.admin-page #userPredTable tr {
            display: table-row;
        }

body.admin-page #userPredTable th,
body.admin-page #userPredTable td {
            display: table-cell;
        }

body.admin-page #userPredTable th:nth-child(1),
body.admin-page #userPredTable td:nth-child(1),
body.admin-page #userPredTable th:nth-child(2),
body.admin-page #userPredTable td:nth-child(2) {
            width: 31%;
        }

body.admin-page #userPredTable th:nth-child(3),
body.admin-page #userPredTable td:nth-child(3) {
            width: 220px;
        }

body.admin-page #userPredTable th:nth-child(4),
body.admin-page #userPredTable td:nth-child(4) {
            width: 240px;
        }

@media (max-width: 760px) {
body.admin-page #userPredTable,
body.admin-page #userPredTable tbody,
body.admin-page #userPredTable tr,
body.admin-page #userPredTable td {
            display: block;
            width: 100%;
        }

body.admin-page #userPredTable {
            table-layout: auto;
        }

body.admin-page #userPredTable thead {
            display: none;
        }

body.admin-page #userPredTable th,
body.admin-page #userPredTable td {
            width: 100%;
        }
        }

@media (max-width: 980px) {
body.admin-page .wrap {
                width: min(100%, 1180px);
                padding: 0 12px;
                margin: 10px auto 20px;
            }

body.admin-page .layout {
                grid-template-columns: 1fr;
            }

body.admin-page .list {
                max-height: 36vh;
            }

body.admin-page .cardHead {
                gap: 14px;
            }

body.admin-page .modeTabs,
body.admin-page .toolbar {
                width: 100%;
            }

body.admin-page .toolbar {
                justify-content: stretch;
            }

body.admin-page .toolbar .btn {
                flex: 1 1 220px;
            }

body.admin-page .detailGrid,
body.admin-page .formGrid,
body.admin-page .fieldRow,
body.admin-page .fieldRow.fightTopRow {
                grid-template-columns: 1fr !important;
            }

body.admin-page .imgRow {
                flex-direction: column;
                align-items: stretch;
            }

body.admin-page .imgThumb {
                width: 100%;
                max-width: 320px;
                height: auto;
                aspect-ratio: 16 / 9;
                align-self: center;
            }

body.admin-page .gateRow {
                flex-direction: column;
                align-items: stretch;
            }
}

@media (max-width: 760px) {
            .siteHeader {
                position: sticky;
            }

            .headerTop {
                padding: 10px 12px;
            }

            .logoWrap img {
                width: min(320px, 82vw);
            }

            .wrap {
                width: 100%;
                padding: 0 8px;
                margin: 8px auto 16px;
            }

            .card,
            .panel,
            .modal,
            .gate {
                border-radius: 14px;
            }

            .cardHead,
            .panelHead,
            .detail,
            .modalBody,
            .modalFoot,
            .gateBody {
                padding-left: 12px;
                padding-right: 12px;
            }

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

            .tabBtn {
                justify-content: center;
                padding: 11px 8px;
                font-size: 11px;
            }

            .toolbar {
                display: grid;
                grid-template-columns: 1fr;
            }

            .toolbar .btn,
            .fightActions,
            .predActions {
                width: 100%;
            }

            .fightActions,
            .predActions {
                justify-content: stretch;
                flex-wrap: wrap;
            }

            .fightActions .btn,
            .predActions .btn {
                flex: 1 1 auto;
            }

            .search {
                padding: 10px;
            }

            .input,
            .control,
            .miniSelect,
            .predChoice,
            .btn {
                font-size: 16px;
            }

            .list {
                max-height: 32vh;
            }

            .group .list {
                max-height: 24vh;
            }

            .modalBack,
            .gateBack {
                padding: 8px;
            }

            .modal {
                width: 100%;
                max-height: 92vh;
            }

            .modalHead,
            .modalFoot {
                position: sticky;
                background: #fff;
            }

            .modalFoot {
                bottom: 0;
            }

            .modalFoot .btn {
                flex: 1 1 100%;
            }

            .fightTable,
            .predTable,
            .fightTable tbody,
            .predTable tbody,
            .fightTable tr,
            .predTable tr,
            .fightTable td,
            .predTable td {
                display: block;
                width: 100%;
            }

            .fightTable thead,
            .predTable thead {
                display: none;
            }

            .fightTable tr,
            .predTable tr {
                border-top: 1px solid var(--line);
                padding: 10px 0;
            }

            .fightTable tbody tr:first-child,
            .predTable tbody tr:first-child {
                border-top: 0;
            }

            .fightTable td,
            .predTable td {
                border-top: 0;
                padding: 8px 10px;
                text-align: left !important;
            }

            .fightTable td::before,
            .predTable td::before {
                display: block;
                margin-bottom: 6px;
                font-size: 10px;
                font-weight: 950;
                letter-spacing: .08em;
                text-transform: uppercase;
                color: var(--muted);
            }

            .fightTable td:nth-child(1)::before {
                content: "Orden";
            }

            .fightTable td:nth-child(2)::before {
                content: "Peleador 1";
            }

            .fightTable td:nth-child(3)::before {
                content: "Peleador 2";
            }

            .fightTable td:nth-child(4)::before {
                content: "Peso";
            }

            .fightTable td:nth-child(5)::before {
                content: "Sección";
            }

            .fightTable td:nth-child(6)::before {
                content: "Resultado";
            }

            .fightTable td:nth-child(7)::before {
                content: "Acciones";
            }

            .predTable td:nth-child(1)::before {
                content: "Peleador 1";
            }

            .predTable td:nth-child(2)::before {
                content: "Peleador 2";
            }

            .predTable td:nth-child(3)::before {
                content: "Pronóstico";
            }

            .predTable td:nth-child(4)::before {
                content: "Acciones";
            }

            .fightTable td[colspan],
            .predTable td[colspan] {
                padding: 12px 10px;
            }

            .fightTable td[colspan]::before,
            .predTable td[colspan]::before {
                content: none;
            }

            .fighterSide {
                align-items: center;
            }

            .fighterAvatar {
                width: 42px;
                height: 42px;
            }


            .detailGrid {
                gap: 8px;
            }

            .kv {
                min-height: auto;
                padding: 12px;
                border-radius: 12px;
            }

            .k {
                font-size: 10px;
                margin-bottom: 6px;
            }

            .v,
            .v.mono,
            .imgName,
            .imgPath,
            .rowTitle,
            .fighterName {
                white-space: normal;
                overflow: visible;
                text-overflow: initial;
                word-break: break-word;
                overflow-wrap: anywhere;
                line-height: 1.35;
            }

            .v {
                font-size: 15px;
            }

            .v.mono,
            .imgPath {
                font-size: 13px;
            }

            .imgRow {
                gap: 10px;
            }

            .imgThumb {
                max-width: 100%;
            }

            .fightTable tbody,
            .predTable tbody {
                display: block;
            }

            .fightTable tr,
            .predTable tr {
                border: 1px solid var(--line);
                border-radius: 14px;
                margin-bottom: 10px;
                padding: 6px 0;
                box-shadow: 0 6px 16px rgba(0, 0, 0, .04);
                overflow: hidden;
            }

            .fightTable tr {
                background: rgba(255, 255, 255, .78);
            }

            .predTable tr {
                background: rgba(255, 255, 255, .78);
            }

            .predTable tr.predPending {
                background: rgba(255, 237, 167, .60);
            }

            .predTable tr.predCorrect {
                background: rgba(199, 255, 212, .55);
            }

            .predTable tr.predWrong {
                background: rgba(255, 201, 201, .55);
            }

            .fightTable td,
            .predTable td {
                padding: 8px 12px 10px;
            }

            .fightTable td:first-child,
            .predTable td:first-child {
                padding-top: 12px;
            }

            .fightTable td:last-child,
            .predTable td:last-child {
                padding-bottom: 12px;
            }

            .fightTable td+td,
            .predTable td+td {
                border-top: 1px dashed rgba(0, 0, 0, .08);
            }

            .fighterSide {
                align-items: flex-start;
            }

            .fighterAvatar {
                flex: 0 0 42px;
            }

            .fightTable td:last-child .fightActions,
            .predTable td:last-child .predActions {
                display: flex;
                flex-direction: column;
                gap: 8px;
                width: 100%;
            }

            .fightTable td:last-child .btn,
            .predTable td:last-child .btn,
            .fightTable td:last-child .predChoice,
            .predTable td:last-child .predChoice {
                width: 100%;
            }


            /* Ajustes extra para modales en móvil */
            .modalBody,
            .modalForm,
            .formGrid,
            .fieldRow,
            .field,
            .formGrid>*,
            .fieldRow>* {
                min-width: 0;
            }

            .control,
            select.control,
            textarea.control,
            input.control {
                width: 100%;
                max-width: 100%;
                min-width: 0;
            }

            @media (max-width: 760px) {
                .modal {
                    overflow-x: hidden;
                }

                .modalBody {
                    overflow-x: hidden;
                    padding-bottom: 96px;
                }

                .modalTitle {
                    max-width: calc(100% - 56px);
                    line-height: 1.25;
                }

                .label {
                    line-height: 1.35;
                }

                .control,
                select.control,
                textarea.control,
                input.control {
                    padding: 12px;
                    border-radius: 12px;
                    line-height: 1.3;
                    word-break: break-word;
                    overflow-wrap: anywhere;
                }

                select.control {
                    white-space: normal;
                }

                input[type="file"].control {
                    padding: 10px;
                    font-size: 14px;
                }

                input[type="file"].control::file-selector-button {
                    display: block;
                    margin: 0 0 10px 0;
                    width: 100%;
                    max-width: 100%;
                    font-size: 11px;
                    padding: 10px 12px;
                }

                .imgInputRow {
                    flex-direction: column;
                    align-items: stretch;
                }

                .imgInputThumb {
                    width: 100%;
                    max-width: 120px;
                    height: auto;
                    aspect-ratio: 1 / 1;
                    object-fit: cover;
                    align-self: flex-start;
                }

                .modalHead {
                    padding-right: 10px;
                }

                .modalFoot {
                    gap: 10px;
                    padding-top: 10px;
                    box-shadow: 0 -8px 18px rgba(0, 0, 0, .06);
                }
            }


            /* =========================
     DETAIL OVERFLOW FIXES
     ========================= */
            .layout>*,
            .right,
            #detailPanel,
            #primaryDetail,
            .detail,
            .detailGrid,
            .userDetailGrid,
            .countryDetailGrid {
                min-width: 0;
                max-width: 100%;
            }

            .detail {
                overflow-x: hidden;
            }

            .detailGrid,
            .userDetailGrid,
            .countryDetailGrid {
                width: 100%;
            }

            .kv {
                width: 100%;
                min-width: 0;
                max-width: 100%;
                overflow: hidden;
            }

            .kv *,
            .imgMeta,
            .userDetailImageMeta {
                min-width: 0;
                max-width: 100%;
            }

            .imgRow,
            .userDetailImageBox {
                width: 100%;
                min-width: 0;
            }

            .imgThumb,
            .userDetailThumb {
                display: block;
                max-width: 100%;
                height: auto;
            }

            @media (max-width: 980px) {

                .layout,
                .right,
                #detailPanel,
                #primaryDetail,
                .detail,
                .detailGrid,
                .userDetailGrid,
                .countryDetailGrid,
                .kv {
                    min-width: 0;
                    max-width: 100%;
                }
            }

            @media (max-width: 760px) {
                .layout {
                    padding: 10px;
                }

                .right,
                #detailPanel,
                #primaryDetail,
                .detail {
                    width: 100%;
                    min-width: 0;
                    max-width: 100%;
                }

                .detail {
                    overflow-x: hidden;
                }

                .detailGrid,
                .userDetailGrid,
                .countryDetailGrid {
                    grid-template-columns: minmax(0, 1fr) !important;
                    width: 100%;
                    max-width: 100%;
                    gap: 8px;
                }

                .kv {
                    width: 100%;
                    min-width: 0;
                    max-width: 100%;
                    overflow: hidden;
                }

                .v,
                .v.mono,
                .imgName,
                .imgPath,
                .rowTitle,
                .fighterName {
                    display: block;
                    width: 100%;
                    max-width: 100%;
                    white-space: normal !important;
                    overflow: visible !important;
                    text-overflow: initial !important;
                    word-break: break-word;
                    overflow-wrap: anywhere;
                }

                .imgRow,
                .userDetailImageBox {
                    display: flex;
                    flex-direction: column;
                    align-items: stretch;
                    gap: 10px;
                    width: 100%;
                    min-width: 0;
                }

                .imgMeta,
                .userDetailImageMeta {
                    width: 100%;
                    min-width: 0;
                }

                .imgThumb,
                .userDetailThumb {
                    width: 100%;
                    max-width: 100%;
                    height: auto;
                    max-height: none;
                    object-fit: contain;
                    object-position: center;
                    align-self: stretch;
                }
            }

/* Keep administration chrome aligned with the shared site chrome. */
body.admin-page .siteHeader {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}

body.admin-page .headerTop {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 12px 0;
  width: 95%;
  margin: 0 auto;
}

body.admin-page .logoWrap {
  grid-column: 2;
  justify-self: center;
  display: flex;
  align-items: center;
  width: auto;
  padding-left: 0;
  cursor: pointer;
}

body.admin-page .headerActions {
  grid-column: 3;
  justify-self: end;
}

body.admin-page .siteFooter {
  margin-top: 40px;
  background: var(--panel);
  border-top: 1px solid var(--line);
  padding: 20px;
  text-align: center;
  box-shadow: none;
}

body.admin-page .footerInner {
  max-width: none;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

body.admin-page .footerTop {
  display: flex;
  justify-content: center;
  align-items: center;
}

body.admin-page .footerAuthor {
  justify-self: auto;
  white-space: normal;
}

/* Public users directory. */
.users-page .usersWrap {
  width: min(1180px, 95%);
  margin: 20px auto 28px;
}

.users-page .usersCard {
  border-radius: var(--rad);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .78);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.users-page .usersHead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .70);
}

.users-page .usersTitle {
  margin: 0;
  font-size: 20px;
  font-weight: 950;
  letter-spacing: .02em;
}

.users-page .usersSubtitle {
  display: none;
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}

.users-page .usersSearch {
  width: 100%;
  padding: 12px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: #111;
  font-weight: 850;
  outline: none;
}

.users-page .usersSearch:focus {
  border-color: rgba(31, 143, 42, .45);
  box-shadow: 0 0 0 3px rgba(31, 143, 42, .12);
}

.users-page .usersCount {
  padding: 12px 16px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.users-page .usersList {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
  gap: 12px;
  padding: 0 16px 16px;
}

.users-page .usersItem {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, .10);
  background: #fff;
  color: #111;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .05);
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
  position: relative;
  overflow: hidden;
}

.users-page .usersItem:hover {
  transform: translateY(-1px);
  border-color: rgba(31, 143, 42, .30);
  box-shadow: 0 12px 24px rgba(0, 0, 0, .08);
}

.users-page .usersItem[data-profile-banner]:not([data-profile-banner="default"]) {
  color: #fff;
}

.users-page .usersItem[data-profile-banner]:not([data-profile-banner="default"])::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .50), rgba(0, 0, 0, .12) 58%, rgba(0, 0, 0, .35)),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .10) 0 1px, transparent 1px 11px);
  pointer-events: none;
}

.users-page .usersItem > * {
  position: relative;
  z-index: 1;
}

.users-page .usersAvatar {
  width: 54px;
  height: 54px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, .03);
  overflow: hidden;
  flex: 0 0 auto;
}

.users-page .usersAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

.users-page .usersInfo {
  display: grid;
  min-width: 0;
}

.users-page .usersInfo strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 950;
}

.users-page .usersInfo > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.users-page .usersItem[data-profile-banner]:not([data-profile-banner="default"]) .usersInfo strong {
  color: #fff;
}

.users-page .usersItem[data-profile-banner-theme="red"] {
  background:
    radial-gradient(circle at 16% 20%, rgba(255, 255, 255, .28), transparent 24%),
    linear-gradient(135deg, #4b0712, #c5162f 58%, #1b1b1f);
}

.users-page .usersItem[data-profile-banner-theme="silver"] {
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, .55), transparent 24%),
    linear-gradient(135deg, #eef1f5, #aab3bf 56%, #f9fafb);
}

.users-page .usersItem[data-profile-banner-theme="gold"] {
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, .45), transparent 22%),
    linear-gradient(135deg, #2b2110, #c8922f 55%, #fff0a8);
}

.users-page .usersItem[data-profile-banner-theme="green"] {
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 255, 255, .30), transparent 22%),
    linear-gradient(135deg, #062f25, #178a63 56%, #d7f7df);
}

.users-page .usersItem[data-profile-banner-theme="blue"] {
  background:
    radial-gradient(circle at 18% 16%, rgba(255, 255, 255, .32), transparent 22%),
    linear-gradient(135deg, #071b33, #1e74b7 58%, #d5edf8);
}

.users-page .usersItem[data-profile-banner-theme="steel"] {
  background:
    radial-gradient(circle at 15% 18%, rgba(255, 255, 255, .26), transparent 24%),
    linear-gradient(135deg, #111318, #4d5968 56%, #cdd4dc);
}

.users-page .usersItem[data-profile-banner-theme="purple"] {
  background:
    radial-gradient(circle at 15% 18%, rgba(255, 255, 255, .32), transparent 24%),
    linear-gradient(135deg, #211336, #6941a5 56%, #e9d8fd);
}

.users-page .usersItem[data-profile-banner-theme="legend"] {
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, .52), transparent 20%),
    linear-gradient(135deg, #08090d, #7d182f 28%, #d7a536 56%, #fff2a6);
}

.users-page .usersStats {
  display: none;
  flex-wrap: wrap;
  gap: 6px;
}

.users-page .usersStats span {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .04);
  color: rgba(0, 0, 0, .72);
  font-size: 11px;
  font-weight: 850;
}

.users-page .usersStats b {
  color: #111;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 950;
}

.users-page .usersEmpty {
  grid-column: 1 / -1;
  padding: 18px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
  font-weight: 850;
  text-align: center;
}

@media (max-width: 760px) {
  .users-page .usersWrap {
    width: calc(100% - 24px);
    margin-top: 12px;
  }

  .users-page .usersHead {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px;
  }

  .users-page .usersList {
    grid-template-columns: 1fr;
    padding: 0 12px 12px;
  }
}

/* User profile banner: mobile contrast and readable chips. */
.user-page .card > .topBar .statBox,
.user-page .card > .topBar .achievementGroupCompact {
  background: #fff !important;
  border-color: rgba(0, 0, 0, .12) !important;
  color: #111 !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .10) !important;
}

.user-page .card > .topBar .statNum,
.user-page .card > .topBar .statLabel,
.user-page .card > .topBar .achievementGroupTitle,
.user-page .card > .topBar .achievementCurrent,
.user-page .card > .topBar .achievementRequirement {
  color: #111 !important;
}

.user-page .card > .topBar .achievementIcon {
  background: #f6f7f9 !important;
  border-color: rgba(0, 0, 0, .12) !important;
  color: #111 !important;
}

.user-page .card > .topBar .selectWrap select {
  background: #fff !important;
  border-color: rgba(0, 0, 0, .12) !important;
  color: #111 !important;
}

.user-page .card > .topBar .selectWrap::after {
  color: #111 !important;
}

.user-page .topBar[data-profile-banner]:not([data-profile-banner="default"]) .statBox,
.user-page .topBar[data-profile-banner]:not([data-profile-banner="default"]) .achievementGroupCompact,
.user-page .topBar[data-profile-banner-theme]:not([data-profile-banner-theme="default"]) .statBox,
.user-page .topBar[data-profile-banner-theme]:not([data-profile-banner-theme="default"]) .achievementGroupCompact {
  background: #fff !important;
  border-color: rgba(0, 0, 0, .12) !important;
  color: #111 !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .10) !important;
}

.user-page .topBar[data-profile-banner]:not([data-profile-banner="default"]) .statNum,
.user-page .topBar[data-profile-banner]:not([data-profile-banner="default"]) .statLabel,
.user-page .topBar[data-profile-banner]:not([data-profile-banner="default"]) .achievementGroupTitle,
.user-page .topBar[data-profile-banner]:not([data-profile-banner="default"]) .achievementCurrent,
.user-page .topBar[data-profile-banner]:not([data-profile-banner="default"]) .achievementRequirement,
.user-page .topBar[data-profile-banner-theme]:not([data-profile-banner-theme="default"]) .statNum,
.user-page .topBar[data-profile-banner-theme]:not([data-profile-banner-theme="default"]) .statLabel,
.user-page .topBar[data-profile-banner-theme]:not([data-profile-banner-theme="default"]) .achievementGroupTitle,
.user-page .topBar[data-profile-banner-theme]:not([data-profile-banner-theme="default"]) .achievementCurrent,
.user-page .topBar[data-profile-banner-theme]:not([data-profile-banner-theme="default"]) .achievementRequirement {
  color: #111 !important;
}

.user-page .topBar[data-profile-banner]:not([data-profile-banner="default"]) .achievementIcon,
.user-page .topBar[data-profile-banner-theme]:not([data-profile-banner-theme="default"]) .achievementIcon {
  background: #f6f7f9 !important;
  border-color: rgba(0, 0, 0, .12) !important;
  color: #111 !important;
}

@media (max-width: 760px) {
  body.user-page:has(#userAvatar) .card > .topBar:not(.userProfileTopBar)[data-profile-banner]:not([data-profile-banner="default"]) {
    background-size: cover !important;
    background-position: center !important;
  }

  body.user-page:has(#userAvatar) .card > .topBar:not(.userProfileTopBar)[data-profile-banner]:not([data-profile-banner="default"])::before {
    background:
      linear-gradient(180deg, rgba(0, 0, 0, .04), rgba(0, 0, 0, .30)),
      repeating-linear-gradient(135deg, rgba(255, 255, 255, .09) 0 1px, transparent 1px 12px) !important;
  }

  body.user-page:has(#userAvatar) .card > .topBar:not(.userProfileTopBar)[data-profile-banner-theme="red"] {
    background:
      radial-gradient(circle at 50% 7%, rgba(255, 255, 255, .20), transparent 30%),
      linear-gradient(160deg, #2b050b 0%, #c5162f 52%, #410712 100%) !important;
  }

  body.user-page:has(#userAvatar) .card > .topBar:not(.userProfileTopBar)[data-profile-banner-theme="silver"] {
    background:
      radial-gradient(circle at 50% 7%, rgba(255, 255, 255, .70), transparent 30%),
      linear-gradient(160deg, #6f7782 0%, #d8dde4 52%, #818a95 100%) !important;
  }

  body.user-page:has(#userAvatar) .card > .topBar:not(.userProfileTopBar)[data-profile-banner-theme="gold"] {
    background:
      radial-gradient(circle at 50% 7%, rgba(255, 255, 255, .26), transparent 30%),
      linear-gradient(160deg, #352105 0%, #c8922f 52%, #704506 100%) !important;
  }

  body.user-page:has(#userAvatar) .card > .topBar:not(.userProfileTopBar)[data-profile-banner-theme="green"] {
    background:
      radial-gradient(circle at 50% 7%, rgba(255, 255, 255, .20), transparent 30%),
      linear-gradient(160deg, #06261f 0%, #178a63 52%, #0a4631 100%) !important;
  }

  body.user-page:has(#userAvatar) .card > .topBar:not(.userProfileTopBar)[data-profile-banner-theme="blue"] {
    background:
      radial-gradient(circle at 50% 7%, rgba(255, 255, 255, .20), transparent 30%),
      linear-gradient(160deg, #071a31 0%, #1e74b7 52%, #0c3152 100%) !important;
  }

  body.user-page:has(#userAvatar) .card > .topBar:not(.userProfileTopBar)[data-profile-banner-theme="steel"] {
    background:
      radial-gradient(circle at 50% 7%, rgba(255, 255, 255, .18), transparent 30%),
      linear-gradient(160deg, #111318 0%, #4d5968 52%, #242b34 100%) !important;
  }

  body.user-page:has(#userAvatar) .card > .topBar:not(.userProfileTopBar)[data-profile-banner-theme="purple"] {
    background:
      radial-gradient(circle at 50% 7%, rgba(255, 255, 255, .20), transparent 30%),
      linear-gradient(160deg, #211336 0%, #6941a5 52%, #321d50 100%) !important;
  }

  body.user-page:has(#userAvatar) .card > .topBar:not(.userProfileTopBar)[data-profile-banner-theme="legend"] {
    background:
      radial-gradient(circle at 50% 7%, rgba(255, 255, 255, .28), transparent 28%),
      linear-gradient(160deg, #08090d 0%, #7d182f 34%, #d7a536 68%, #593205 100%) !important;
  }
}

/* User event predictions as responsive fight cards. */
.user-page #eventPredictions.predTable {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
  background: rgba(255, 255, 255, .72);
}

.user-page #eventPredictions .predTableRow:not(.predSummaryRow) {
  position: relative;
  display: grid !important;
  grid-template-columns: 1fr;
  align-content: start;
  gap: 12px;
  min-height: 206px;
  padding: 42px 14px 14px !important;
  border: 1px solid rgba(0, 0, 0, .10) !important;
  border-top: 4px solid rgba(140, 150, 165, .60) !important;
  border-left: 1px solid rgba(0, 0, 0, .10) !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .07) !important;
  overflow: hidden;
}

.user-page #eventPredictions .predTableRow:not(.predSummaryRow)::after {
  content: none !important;
}

.user-page #eventPredictions .predTableRow:not(.predSummaryRow)::before {
  content: "Pendiente";
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 1;
  padding: 5px 9px;
  border-radius: 999px;
  background: #f3f4f6;
  color: #4b5563;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.user-page #eventPredictions .predTableRow.row-win:not(.predSummaryRow) {
  border-top-color: rgba(31, 143, 42, .72) !important;
  background: linear-gradient(180deg, rgba(31, 143, 42, .08), #fff 44%) !important;
}

.user-page #eventPredictions .predTableRow.row-win:not(.predSummaryRow)::before {
  content: "Acierto";
  background: rgba(31, 143, 42, .12);
  color: #1f8f2a;
}

.user-page #eventPredictions .predTableRow.row-lose:not(.predSummaryRow) {
  border-top-color: rgba(214, 37, 37, .70) !important;
  background: linear-gradient(180deg, rgba(214, 37, 37, .08), #fff 44%) !important;
}

.user-page #eventPredictions .predTableRow.row-lose:not(.predSummaryRow)::before {
  content: "Fallo";
  background: rgba(214, 37, 37, .12);
  color: #b42318;
}

.user-page #eventPredictions .predTableRow.row-draw:not(.predSummaryRow)::before {
  content: "Empate";
}

.user-page #eventPredictions .fightCol {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 0 !important;
  margin: 0 !important;
}

.user-page #eventPredictions .fightCol .predFighter {
  min-width: 0;
}

.user-page #eventPredictions .fightCol .predFighter:last-child {
  justify-content: flex-end;
  text-align: right;
}

.user-page #eventPredictions .predCenter {
  display: flex !important;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 8px;
  background: rgba(246, 247, 249, .82);
}

.user-page #eventPredictions .predLabel {
  min-width: 34px;
  margin: 0 !important;
  color: rgba(0, 0, 0, .56) !important;
}

.user-page #eventPredictions .predPick {
  min-width: 0;
  max-width: 100% !important;
}

.user-page #eventPredictions .predPick .txt,
.user-page #eventPredictions .predFighter span {
  min-width: 0;
  color: #111;
}

.user-page #eventPredictions .predSummaryRow {
  display: flex !important;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px !important;
  border: 1px solid rgba(0, 0, 0, .10) !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .05);
}

@media (max-width: 760px) {
  .user-page #eventPredictions .predFighter,
  .user-page #eventPredictions .predPick {
    align-items: center;
    min-width: 0;
  }

  .user-page #eventPredictions .predFighter span,
  .user-page #eventPredictions .predPick .txt {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere;
    word-break: normal;
    line-height: 1.18;
  }

  .user-page #eventPredictions .fightCol .predFighter:last-child span {
    text-align: right;
  }
}

@media (max-width: 1180px) {
  .user-page #eventPredictions.predTable {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .user-page #eventPredictions.predTable {
    grid-template-columns: 1fr;
    padding: 12px;
  }

  .user-page #eventPredictions .predTableRow:not(.predSummaryRow) {
    min-height: 0;
  }

  .user-page #eventPredictions .predSummaryRow {
    align-items: flex-start;
    flex-direction: column;
  }
}

.profile-page .profilePreviewBanner[data-profile-banner]:not([data-profile-banner="default"]),
.user-page .topBar[data-profile-banner]:not([data-profile-banner="default"]),
.compareUserCard[data-profile-banner]:not([data-profile-banner="default"]),
.users-page .usersItem[data-profile-banner]:not([data-profile-banner="default"]) {
  background-image: var(--profile-banner-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.user-page .userProfileTopBar[data-profile-banner]:not([data-profile-banner="default"]) {
  background-color: transparent !important;
  background-image: var(--profile-banner-image) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  border-bottom: 0 !important;
  isolation: isolate;
  overflow: hidden;
}

.user-page .topBar[data-profile-banner]:not([data-profile-banner="default"]) {
  background-color: transparent !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

body.user-page:has(#userAvatar) .card > .userProfileTopBar[data-profile-banner]:not([data-profile-banner="default"]) {
  background-color: transparent !important;
  background-image: var(--profile-banner-image) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.user-page .topBar[data-profile-banner="predictions_10"],
.user-page .userProfileTopBar[data-profile-banner="predictions_10"] {
  background-image: url("/images/banners/01_iron_flat.png") !important;
}

.user-page .topBar[data-profile-banner="predictions_25"],
.user-page .userProfileTopBar[data-profile-banner="predictions_25"] {
  background-image: url("/images/banners/02_bronze_flat.png") !important;
}

.user-page .topBar[data-profile-banner="predictions_50"],
.user-page .userProfileTopBar[data-profile-banner="predictions_50"] {
  background-image: url("/images/banners/03_silver_flat.png") !important;
}

.user-page .topBar[data-profile-banner="predictions_100"],
.user-page .userProfileTopBar[data-profile-banner="predictions_100"] {
  background-image: url("/images/banners/04_gold_flat.png") !important;
}

.user-page .topBar[data-profile-banner="predictions_250"],
.user-page .userProfileTopBar[data-profile-banner="predictions_250"] {
  background-image: url("/images/banners/05_platinum_flat.png") !important;
}

.user-page .topBar[data-profile-banner="predictions_500"],
.user-page .userProfileTopBar[data-profile-banner="predictions_500"] {
  background-image: url("/images/banners/06_esmerald_flat.png") !important;
}

.user-page .topBar[data-profile-banner="predictions_1000"],
.user-page .userProfileTopBar[data-profile-banner="predictions_1000"] {
  background-image: url("/images/banners/07_diamond_flat.png") !important;
}

.user-page .topBar[data-profile-banner="predictions_1500"],
.user-page .userProfileTopBar[data-profile-banner="predictions_1500"] {
  background-image: url("/images/banners/08_ruby_flat.png") !important;
}

.user-page .topBar[data-profile-banner="predictions_2000"],
.user-page .userProfileTopBar[data-profile-banner="predictions_2000"] {
  background-image: url("/images/banners/09_ambar_flat.png") !important;
}

.user-page .topBar[data-profile-banner="predictions_2500"],
.user-page .userProfileTopBar[data-profile-banner="predictions_2500"] {
  background-image: url("/images/banners/10_god_flat.png") !important;
}

.user-page .userProfileTopBar[data-profile-banner]:not([data-profile-banner="default"])::before {
  content: none !important;
  display: none !important;
  background: none !important;
}

.user-page .userProfileTopBar[data-profile-banner]:not([data-profile-banner="default"]) > * {
  position: relative;
  z-index: 1;
}

.user-page .userProfileTopBar[data-profile-banner]:not([data-profile-banner="default"]) .userName {
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

body.user-page:has(#userAvatar) .card > .userProfileTopBar[data-profile-banner]:not([data-profile-banner="default"]) .userName,
body.user-page:has(#userAvatar) .card > .userProfileTopBar[data-profile-banner]:not([data-profile-banner="default"]) .profileBadge {
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

.user-page .userProfileTopBar[data-profile-banner]:not([data-profile-banner="default"]) .statBox,
.user-page .userProfileTopBar[data-profile-banner]:not([data-profile-banner="default"]) .achievementGroupCompact {
  background: rgba(255, 255, 255, .94) !important;
  border-color: transparent !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .12) !important;
}

.user-page .userProfileTopBar[data-profile-banner]:not([data-profile-banner="default"]) .avatar {
  box-shadow: 0 12px 28px rgba(0, 0, 0, .24) !important;
}

@media (max-width: 760px) {
  .user-page .userProfileTopBar[data-profile-banner]:not([data-profile-banner="default"])::before {
    content: none !important;
    display: none !important;
    background: none !important;
  }
}

body.user-page:has(#userAvatar) .card > .userProfileTopBar[data-profile-banner]:not([data-profile-banner="default"])::before {
  content: none !important;
  display: none !important;
  background: none !important;
}

body:has(#rankList) .rankRow[data-profile-banner]:not([data-profile-banner="default"]) .rankStat,
body:has(#rankList) .rankRow[data-profile-banner]:not([data-profile-banner="default"]) .rankPctWrap .rankStat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  min-width: 56px;
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 999px;
  background: #fff !important;
  border-color: rgba(0, 0, 0, .12);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .14);
  color: #111;
}

body:has(#rankList) .rankRow[data-profile-banner]:not([data-profile-banner="default"]) .rankPctWrap::before {
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
}

@media (max-width: 760px) {
  body:has(#rankList) .rankRow {
    grid-template-columns: 42px 52px minmax(0, 1fr) !important;
    grid-template-areas:
      "pos avatar name"
      "pct pct pct" !important;
    gap: 8px 10px !important;
    padding: 10px 12px !important;
  }

  body:has(#rankList) .rankPos {
    grid-area: pos !important;
    grid-column: auto !important;
    grid-row: auto !important;
    align-self: center;
  }

  body:has(#rankList) .rankAvatar {
    grid-area: avatar !important;
    grid-column: auto !important;
    grid-row: auto !important;
  }

  body:has(#rankList) .rankNameRow {
    grid-area: name !important;
    grid-column: auto !important;
    grid-row: auto !important;
  }

  body:has(#rankList) .rankPctWrap {
    grid-area: pct !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-areas:
      "s1 s2 kpi" !important;
    gap: 6px 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    align-items: center !important;
    justify-items: stretch !important;
  }

  body:has(#rankList) .rankPctWrap::before {
    content: none !important;
    display: none !important;
  }

  body:has(#rankList) .rankPctWrap .rankKpi {
    grid-area: kpi !important;
    grid-column: auto !important;
    grid-row: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    width: auto !important;
    max-width: none !important;
    min-width: 74px !important;
    min-height: 44px !important;
    height: auto !important;
    padding: 5px 8px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(0, 0, 0, .10) !important;
    background: #fff !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .08) !important;
    overflow: visible !important;
    justify-self: center !important;
  }

  body:has(#rankList) .rankPctWrap .rankKpi::before {
    content: "% acierto";
    display: block;
    margin-bottom: 2px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #111;
    opacity: .72;
  }

  body:has(#rankList) .rankPctWrap .rankKpiFill {
    display: none !important;
  }

  body:has(#rankList) .rankPctWrap .rankKpiText {
    position: static !important;
    inset: auto !important;
    display: block !important;
    color: var(--rank-pct-color, var(--accent)) !important;
    font-size: 13px !important;
    font-weight: 1000 !important;
    line-height: 1.15 !important;
    text-shadow: none !important;
  }

  body:has(#rankList) .rankPctWrap .rankStat {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    grid-column: auto !important;
    grid-row: auto !important;
    min-width: 74px !important;
    min-height: 44px !important;
    padding: 5px 8px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(0, 0, 0, .10) !important;
    background: #fff !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .08) !important;
    color: #111 !important;
    font-size: 13px !important;
    text-align: center !important;
    white-space: nowrap !important;
    justify-self: center !important;
  }

  body:has(#rankList) .rankPctWrap .rankStat:nth-child(1) {
    grid-area: s1 !important;
  }

  body:has(#rankList) .rankPctWrap .rankStat:nth-child(2) {
    grid-area: s2 !important;
  }

  body:has(#rankList) .rankPctWrap .rankStat::before {
    display: block;
    margin-bottom: 2px;
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #111;
    opacity: .72;
  }

  body:has(#rankList) .rankRow[data-profile-banner]:not([data-profile-banner="default"]) .rankBannerPanel {
    grid-column: 1 / -1 !important;
    grid-row: 1 / 3 !important;
    margin: -12px -12px -12px -12px !important;
    min-height: 122px !important;
    z-index: 0 !important;
  }

  body:has(#rankList) .rankRow[data-profile-banner]:not([data-profile-banner="default"]) .rankPos,
  body:has(#rankList) .rankRow[data-profile-banner]:not([data-profile-banner="default"]) .rankAvatar,
  body:has(#rankList) .rankRow[data-profile-banner]:not([data-profile-banner="default"]) .rankNameRow {
    align-self: center !important;
    grid-row: 1 !important;
    z-index: 2 !important;
  }

  body:has(#rankList) .rankRow[data-profile-banner]:not([data-profile-banner="default"]) .rankPos {
    grid-column: 1 !important;
  }

  body:has(#rankList) .rankRow[data-profile-banner]:not([data-profile-banner="default"]) .rankAvatar {
    grid-column: 2 !important;
  }

  body:has(#rankList) .rankRow[data-profile-banner]:not([data-profile-banner="default"]) .rankNameRow {
    grid-column: 3 !important;
  }

  body:has(#rankList) .rankRow[data-profile-banner]:not([data-profile-banner="default"]) .rankPctWrap {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    background: transparent !important;
    z-index: 2 !important;
  }

  body:has(#rankList) .rankRow[data-profile-banner]:not([data-profile-banner="default"]) .rankPctWrap .rankKpi {
    background: #fff !important;
    border-color: rgba(0, 0, 0, .10) !important;
    outline: 0 !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .14) !important;
  }

  body:has(#rankList) .rankRow[data-profile-banner]:not([data-profile-banner="default"]) .rankPctWrap .rankKpiText {
    color: var(--rank-pct-color, var(--accent)) !important;
    text-shadow: none !important;
  }

  body:has(#rankList) .rankRow[data-profile-banner]:not([data-profile-banner="default"]) .rankPctWrap .rankStat {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 74px !important;
    min-height: 48px !important;
    padding: 5px 8px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(0, 0, 0, .10) !important;
    background: #fff !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .14) !important;
    color: #111 !important;
    flex-direction: column !important;
  }

  body:has(#rankList) .rankRow[data-profile-banner]:not([data-profile-banner="default"]) .rankPctWrap .rankStat::before {
    color: var(--muted) !important;
    opacity: .75 !important;
  }
}

body.user-page:has(#userAvatar) #userAvatar,
body.user-page:has(#userAvatar) #userAvatar img {
  border-radius: 999px !important;
}

body.user-page:has(#userAvatar) #userAvatar img {
  clip-path: circle(50% at 50% 50%);
}

body.user-page:has(#userAvatar) #userAvatar {
  overflow: visible;
}

body.user-page:has(#userAvatar) .userProfileTopBar .userAchievementsInline .achievementGroupCompact {
  border-color: transparent !important;
  outline: 0 !important;
  box-shadow: 0 12px 24px rgba(17, 24, 39, .16), 0 2px 6px rgba(17, 24, 39, .08) !important;
}

@media (max-width: 760px) {
  body.admin-page .cardHead {
    align-items: stretch !important;
    gap: 12px !important;
  }

  body.admin-page .modeTabs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    gap: 6px !important;
    padding: 6px !important;
    border-radius: 18px !important;
    overflow: visible !important;
  }

  body.admin-page .tabBtn {
    justify-content: center !important;
    min-height: 40px !important;
    padding: 9px 8px !important;
    border-radius: 999px !important;
    border: 1px solid transparent !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
    text-align: center !important;
    white-space: normal !important;
  }

  body.admin-page .tabBtn.active {
    border-color: rgba(31, 143, 42, .35) !important;
  }
}

}
}

/* Administration user predictions table must remain a real full-width table on desktop.
   Shared prediction styles later/elsewhere turn .predTable into flex for other pages. */
@media (min-width: 761px) {
  body.admin-page #userPredictionsPanel,
  body.admin-page #userPredictionsPanel .predTableWrap {
    width: 100% !important;
    max-width: none !important;
  }

  body.admin-page #userPredTable.predTable {
    display: table !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    table-layout: fixed !important;
  }

  body.admin-page #userPredTable thead {
    display: table-header-group !important;
  }

  body.admin-page #userPredTable tbody {
    display: table-row-group !important;
  }

  body.admin-page #userPredTable tr {
    display: table-row !important;
    width: auto !important;
  }

  body.admin-page #userPredTable th,
  body.admin-page #userPredTable td {
    display: table-cell !important;
  }

  body.admin-page #userPredTable th:nth-child(1),
  body.admin-page #userPredTable td:nth-child(1),
  body.admin-page #userPredTable th:nth-child(2),
  body.admin-page #userPredTable td:nth-child(2) {
    width: auto !important;
  }

  body.admin-page #userPredTable th:nth-child(3),
  body.admin-page #userPredTable td:nth-child(3) {
    width: 220px !important;
  }

  body.admin-page #userPredTable th:nth-child(4),
  body.admin-page #userPredTable td:nth-child(4) {
    width: 260px !important;
  }
}

@media (min-width: 761px) {
  body.admin-page #userPredTable.predTable {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    table-layout: auto !important;
  }

  body.admin-page #userPredTable thead,
  body.admin-page #userPredTable tbody {
    display: block !important;
    width: 100% !important;
  }

  body.admin-page #userPredTable tr {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(180px, 220px) minmax(220px, 260px) !important;
    align-items: center !important;
    width: 100% !important;
  }

  body.admin-page #userPredTable th,
  body.admin-page #userPredTable td {
    display: block !important;
    min-width: 0 !important;
    width: auto !important;
  }

  body.admin-page #userPredTable th:nth-child(4),
  body.admin-page #userPredTable td:nth-child(4) {
    text-align: right !important;
  }
}

body.admin-page .adminUserPredTable {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  min-width: 100% !important;
}

body.admin-page .adminPredBody {
  display: flex;
  flex-direction: column;
  width: 100%;
}

body.admin-page .adminPredRow {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(180px, 220px) minmax(220px, 260px);
  align-items: center;
  width: 100%;
}

body.admin-page .adminPredHead {
  background: var(--bg2);
  box-shadow: 0 1px 0 var(--line);
}

body.admin-page .adminPredRow.predPending {
  background: rgba(255, 237, 167, .60);
}

body.admin-page .adminPredRow.predCorrect {
  background: rgba(199, 255, 212, .55);
}

body.admin-page .adminPredRow.predWrong {
  background: rgba(255, 201, 201, .55);
}

body.admin-page .adminPredCell {
  min-width: 0;
  padding: 10px;
  text-align: left;
  vertical-align: middle;
  font-size: 13px;
}

body.admin-page .adminPredHead .adminPredCell {
  font-weight: 950;
}

body.admin-page .adminPredActionsCell {
  text-align: right;
}

body.admin-page .adminPredEmpty {
  width: 100%;
  padding: 12px;
  border-top: 1px solid var(--line);
}

@media (max-width: 760px) {
  body.admin-page .adminPredRow {
    display: block !important;
    border: 1px solid var(--line);
    border-radius: 14px;
    margin-bottom: 10px;
    padding: 6px 0;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .04);
    overflow: hidden;
  }

  body.admin-page .adminPredHead {
    display: none !important;
  }

  body.admin-page .adminPredCell {
    display: block;
    width: 100%;
    padding: 8px 12px 10px;
  }

  body.admin-page .adminPredCell + .adminPredCell {
    border-top: 1px dashed rgba(0, 0, 0, .08);
  }

  body.admin-page .adminPredActionsCell {
    text-align: left;
  }
}

@media (min-width: 761px) {
  body.admin-page .adminUserPredTable,
  body.admin-page .adminPredBody {
    width: 100% !important;
    min-width: 100% !important;
  }

  body.admin-page .adminPredRow {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(180px, 220px) minmax(220px, 260px) !important;
    width: 100% !important;
    align-items: center !important;
  }

  body.admin-page .adminPredBody .adminPredRow {
    border-top: 1px solid var(--line);
  }

  body.admin-page .adminPredCell {
    border-top: 0 !important;
  }
}

/* Shared profile banner treatment: match users.html overlay on profile and ranking. */
.user-page .userProfileTopBar[data-profile-banner]:not([data-profile-banner="default"]) {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  background-image: var(--profile-banner-image) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.user-page .userProfileTopBar[data-profile-banner]:not([data-profile-banner="default"])::before,
body.user-page:has(#userAvatar) .card > .userProfileTopBar[data-profile-banner]:not([data-profile-banner="default"])::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .50), rgba(0, 0, 0, .12) 58%, rgba(0, 0, 0, .35)),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .18) 0 1px, transparent 1px 11px) !important;
  opacity: 1 !important;
}

.user-page .userProfileTopBar[data-profile-banner]:not([data-profile-banner="default"]) > * {
  position: relative !important;
  z-index: 1 !important;
}

body:has(#rankList) .rankRow[data-profile-banner]:not([data-profile-banner="default"]) .rankBannerPanel {
  position: relative !important;
  overflow: hidden !important;
  background: var(--profile-banner-image) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

body:has(#rankList) .rankRow[data-profile-banner]:not([data-profile-banner="default"]) .rankBannerPanel::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .50), rgba(0, 0, 0, .12) 58%, rgba(0, 0, 0, .35)),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .18) 0 1px, transparent 1px 11px) !important;
  opacity: 1 !important;
}

@media (min-width: 761px) {
  body.user-page:has(#userAvatar) .userNameRow .socialLinks {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-left: 12px !important;
  }

  body.user-page:has(#userAvatar) .userNameRow .socialLink {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    flex: 0 0 24px !important;
  }
}

@media (max-width: 760px) {
  body.user-page:has(#userAvatar) .userNameRow .socialLinks {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-left: 8px !important;
  }

  body.user-page:has(#userAvatar) .userNameRow .socialLink {
    width: 22px !important;
    height: 22px !important;
    flex: 0 0 22px !important;
  }
}