body.dark-mode .tra-nav {
  --tra-nav-bg: #1c2734;
  --tra-nav-border-color: rgba(8, 12, 20, 0.7);
  --tra-nav-text-color: #f1f5f9;
  --tra-nav-button-bg: rgba(68, 80, 100, 0.45);
  --tra-nav-button-text: rgb(116, 185, 255);
  --tra-nav-button-hover-bg: rgba(29, 135, 248, 0.38);
  --tra-nav-button-hover-text: #f5faff;
  --tra-nav-button-border: rgba(116, 185, 255, 0.22);
  --tra-nav-button-shadow: 0 10px 22px rgba(5, 9, 15, 0.48);
  --tra-nav-dropdown-bg: rgba(22, 32, 44, 0.98);
  --tra-nav-dropdown-border: rgba(116, 185, 255, 0.18);
  --tra-nav-dropdown-link-color: rgb(116, 185, 255);
  --tra-nav-dropdown-link-hover-bg: rgba(174, 219, 52, 0.22);
  --tra-nav-dropdown-divider: rgba(116, 185, 255, 0.2);
  --tra-nav-environment-color: #ffd166;
  --tra-nav-environment-bg: rgba(255, 209, 102, 0.12);
  --tra-nav-environment-border: rgba(255, 209, 102, 0.32);
  --tra-nav-shadow: 0 12px 26px rgba(3, 6, 12, 0.44);
}
body.dark-mode .tra-nav__logo--light {
  display: none;
}

body.dark-mode .tra-nav__logo--dark {
  display: block;
}
body.dark-mode .tra-nav__welcome {
  color: rgba(241, 245, 249, 0.92);
}
body.dark-mode .tra-nav-footer {
  background: linear-gradient(180deg, #141d2b 0%, #1d2b3c 100%);
  color: #cdd9ef;
  box-shadow: 0 12px 24px rgba(3, 6, 12, 0.4);
  border-top: 1px solid rgba(116, 185, 255, 0.18);
}
body.dark-mode .footer-legal-list {
  color: rgba(216, 228, 255, 0.9);
}
body.dark-mode .footer-legal-link {
  color: #8fc1ff;
}
body.dark-mode .footer-legal-separator {
  color: rgba(188, 210, 247, 0.32);
}
body.dark-mode .tra-nav__language-switch,
body.dark-mode .beyondxc-nav__language-switch {
  background: rgba(15, 23, 42, 0.72);
  border-color: rgba(116, 185, 255, 0.2);
  box-shadow: 0 8px 18px rgba(3, 7, 18, 0.34);
}
body.dark-mode .tra-nav__language-link,
body.dark-mode .beyondxc-nav__language-link {
  color: rgba(226, 232, 240, 0.78);
}
body.dark-mode .tra-nav__language-link:hover,
body.dark-mode .tra-nav__language-link:focus-visible,
body.dark-mode .beyondxc-nav__language-link:hover,
body.dark-mode .beyondxc-nav__language-link:focus-visible {
  color: #f8fafc;
  background: rgba(14, 165, 233, 0.18);
  border-color: rgba(125, 211, 252, 0.34);
}
body.dark-mode .tra-nav__language-link--active,
body.dark-mode .beyondxc-nav__language-link--active {
  color: #ffffff;
  background: linear-gradient(135deg, #0369a1, #0ea5e9);
  border-color: rgba(125, 211, 252, 0.48);
  box-shadow: 0 8px 18px rgba(14, 165, 233, 0.22);
}
body.dark-mode .tra-nav__language-link--active:hover,
body.dark-mode .tra-nav__language-link--active:focus-visible,
body.dark-mode .beyondxc-nav__language-link--active:hover,
body.dark-mode .beyondxc-nav__language-link--active:focus-visible {
  color: #ffffff;
  background: linear-gradient(135deg, #075985, #38bdf8);
}
body.dark-mode .tra-nav__mobile-auth-link {
  background: rgba(15, 23, 42, 0.86);
  border-color: rgba(116, 185, 255, 0.18);
  color: rgba(241, 245, 249, 0.94);
  box-shadow: 0 10px 20px rgba(2, 6, 15, 0.26);
}
body.dark-mode .tra-nav__mobile-auth-link--register {
  background: linear-gradient(135deg, #1d4ed8, #0284c7);
  border-color: rgba(125, 211, 252, 0.32);
  color: #ffffff;
}
body.dark-mode .tra-nav__mobile-auth-link:hover,
body.dark-mode .tra-nav__mobile-auth-link:focus-visible {
  background: rgba(17, 25, 38, 0.96);
  border-color: rgba(125, 211, 252, 0.34);
  color: #ffffff;
}
body.dark-mode .tra-nav__mobile-auth-link--register:hover,
body.dark-mode .tra-nav__mobile-auth-link--register:focus-visible {
  background: linear-gradient(135deg, #2563eb, #0891b2);
  color: #ffffff;
}
body.dark-mode .tra-nav-card {
  background: rgba(15, 23, 42, 0.55);
  border-color: rgba(148, 163, 184, 0.2);
}
body.dark-mode .tra-nav-card--portal,
body.dark-mode .tra-nav-card--cta {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
body.dark-mode .tra-nav-card__link {
  color: rgba(241, 245, 249, 0.85);
}
body.dark-mode .tra-nav-card__link:hover,
body.dark-mode .tra-nav-card__link:focus-visible {
  background: rgba(56, 189, 248, 0.12);
  color: #f8fafc;
}
body.dark-mode .tra-nav-card__link.is-active {
  background: rgba(96, 165, 250, 0.22);
  color: #eff6ff;
  box-shadow: inset 3px 0 0 #60a5fa;
}
body.dark-mode .tra-nav-card__link.is-active:hover,
body.dark-mode .tra-nav-card__link.is-active:focus-visible {
  background: rgba(96, 165, 250, 0.28);
  color: #ffffff;
}
body.dark-mode .tra-nav-card__link.is-active .tra-nav-card__link-icon {
  background: rgba(96, 165, 250, 0.18);
  color: #bfdbfe;
}
body.dark-mode .tra-nav-card__section-label {
  color: rgba(186, 230, 253, 0.7);
}
body.dark-mode .tra-nav-card__section-label--discover {
  color: #7dd3fc;
}
body.dark-mode .tra-nav-card__section-label--personal {
  color: #fdba74;
}
body.dark-mode .tra-nav-card__link-icon {
  background: rgba(15, 23, 42, 0.35);
}
body.dark-mode .tra-nav__footer-summary {
  background: transparent;
  border-color: transparent;
  color: rgba(248, 250, 252, 0.85);
}
body.dark-mode .tra-nav__footer-summary a {
  color: rgba(125, 211, 252, 0.9);
}
body.dark-mode .tra-nav__footer-env {
  background: rgba(251, 191, 36, 0.12);
  color: rgba(253, 224, 71, 0.9);
}
body.dark-mode .tra-nav__footer-logout,
body.dark-mode .tra-nav__footer-login {
  border-color: rgba(255, 255, 255, 0.15);
}
body.dark-mode .tra-nav__footer-logout:hover,
body.dark-mode .tra-nav__footer-logout:focus-visible,
body.dark-mode .tra-nav__footer-login:hover,
body.dark-mode .tra-nav__footer-login:focus-visible {
  color: #fff;
}
body.dark-mode .tra-nav__dropdown-link--history {
  color: #2f230c;
}
body.dark-mode .tra-nav__dropdown-link--stats {
  color: rgb(116, 185, 255);
}
body.dark-mode .tra-nav__button--external {
  color: #d7ffed;
}
body.dark-mode .tra-nav__button--user {
  color: #e8ffbb;
}
body.dark-mode .tra-nav__button--user:hover,
body.dark-mode .tra-nav__button--user:focus-visible {
  color: #f5ffd9;
}
body.dark-mode.dashboard-view-mobile .tra-nav__button--view {
  background: #aedb34;
  border-color: #aedb34;
  color: #0b2e4e;
}
body.dark-mode .tra-nav-card__toggle-username {
  color: rgba(226, 232, 240, 0.95);
}
body.dark-mode .tra-nav-card__pill--xcontest {
  background: rgba(249, 115, 22, 0.18);
  color: #fdba74;
}
body.dark-mode .tra-nav-card__cta-title {
  color: #f8fafc;
}
body.dark-mode .tra-nav-card__cta-text {
  color: rgba(226, 232, 240, 0.88);
}
body.dark-mode .tra-nav-card__cta-text a {
  color: #fdba74;
}
body.dark-mode .tra-nav__cta-button {
  background: rgba(56, 189, 248, 0.12);
  border-color: rgba(125, 211, 252, 0.2);
  color: #c8edff;
}
body.dark-mode .tra-nav__cta-button:hover,
body.dark-mode .tra-nav__cta-button:focus-visible {
  background: rgba(56, 189, 248, 0.18);
  border-color: rgba(125, 211, 252, 0.34);
  color: #f8fafc;
}
body.dark-mode .tra-nav__button--ghost.tra-nav__cta-button {
  background: rgba(15, 23, 42, 0.36);
  border-color: rgba(125, 211, 252, 0.16);
  color: #c8edff;
}
body.dark-mode .tra-nav__button--danger.tra-nav__cta-button {
  background: rgba(248, 113, 113, 0.12);
  border-color: rgba(248, 113, 113, 0.24);
  color: #fecaca;
}
body.dark-mode .tra-nav__button--danger.tra-nav__cta-button:hover,
body.dark-mode .tra-nav__button--danger.tra-nav__cta-button:focus-visible {
  background: rgba(248, 113, 113, 0.18);
  border-color: rgba(248, 113, 113, 0.36);
  color: #fee2e2;
}
body.dark-mode .tra-nav__cta-button--xcontest {
  background: linear-gradient(135deg, #f97316, #c2410c);
  color: #fff;
}
body.dark-mode .tra-nav__cta-button--xcontest:hover,
body.dark-mode .tra-nav__cta-button--xcontest:focus-visible {
  background: linear-gradient(135deg, #fb923c, #ea580c);
  color: #fff;
}
body.dark-mode .tra-nav__cta-button--whatsapp {
  background: #25d366;
  border-color: #1fb65a;
  color: #052e16;
}
body.dark-mode .tra-nav__cta-button--whatsapp:hover,
body.dark-mode .tra-nav__cta-button--whatsapp:focus-visible {
  background: #34e27a;
  border-color: #25d366;
  color: #031f0f;
}

@media (max-width: 900px) {
  body.dark-mode .tra-nav {
    background:
      radial-gradient(circle at top right, rgba(56, 189, 248, 0.12), transparent 34%),
      linear-gradient(180deg, #0f1826 0%, #172334 100%);
    border-color: rgba(15, 23, 42, 0.92);
    box-shadow: 0 20px 40px rgba(2, 6, 15, 0.55);
  }

  body.dark-mode .tra-nav__mobile-toggle {
    background: rgba(11, 18, 29, 0.94);
    border-color: rgba(116, 185, 255, 0.24);
    color: rgba(241, 245, 249, 0.96);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  }

  body.dark-mode .tra-nav__card-grid,
  body.dark-mode .tra-nav__card-grid--utility {
    gap: 0.55rem;
    padding: 0.08rem 0.4rem 0.55rem;
  }

  body.dark-mode .tra-nav-card {
    background: rgba(9, 15, 26, 0.96);
    border-color: rgba(116, 185, 255, 0.12);
    box-shadow: 0 12px 22px rgba(2, 6, 15, 0.3);
  }

  body.dark-mode .tra-nav-card__toggle {
    color: rgba(226, 232, 240, 0.96);
  }

  body.dark-mode .tra-nav__button,
  body.dark-mode button.tra-nav__button,
  body.dark-mode .tra-nav__dropdown button.tra-nav__button {
    background: rgba(17, 25, 38, 0.94);
    border-color: rgba(116, 185, 255, 0.2);
    color: rgba(226, 232, 240, 0.95);
    box-shadow: 0 8px 16px rgba(2, 6, 15, 0.24);
  }

  body.dark-mode .tra-nav__dropdown-content {
    background: rgba(9, 15, 26, 0.98);
    border-color: rgba(116, 185, 255, 0.16);
  }

  body.dark-mode .tra-nav__footer-summary {
    padding: 0.35rem 0.2rem 0.2rem;
  }

  body.dark-mode .tra-nav__footer-login,
  body.dark-mode .tra-nav__footer-logout {
    background: rgba(17, 25, 38, 0.9);
  }
}

@media (max-width: 420px) {
  body.dark-mode .tra-nav__mobile-toggle {
    padding-inline: 0.85rem;
  }

  body.dark-mode .tra-nav-card__toggle {
    padding-inline: 0.9rem;
  }

  body.dark-mode .tra-nav__button {
    font-size: 0.92rem;
  }
}