:root {
  --ei-bg: #070707;
  --ei-surface: #111;
  --ei-surface-2: #191919;
  --ei-text: #f7f7f7;
  --ei-muted: #b7b7b7;
  --ei-orange: #ff6500;
  --ei-orange-dark: #d84400;
  --ei-gold: #ffd34e;
  --ei-border: rgba(255, 101, 0, .3);
  --ei-radius: 16px;
  --ei-shadow: 0 18px 45px rgba(0, 0, 0, .38);
  --ei-focus: 0 0 0 3px rgba(255, 211, 78, .45);
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body.ei-public,
body {
  background: radial-gradient(circle at 50% -10%, #2a1408 0, var(--ei-bg) 42rem);
  color: var(--ei-text);
  font-family: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
}

body.ei-public h1,
body.ei-public h2,
body.ei-public h3,
body.ei-public h4,
.ei-heading {
  font-family: "Orbitron", sans-serif;
  letter-spacing: .02em;
}

a {
  color: var(--ei-gold);
}

a:hover {
  color: #fff0a6;
}

.ei-skip-link {
  position: fixed;
  top: .5rem;
  left: .5rem;
  z-index: 10000;
  padding: .7rem 1rem;
  border-radius: 8px;
  background: var(--ei-gold);
  color: #111;
  transform: translateY(-150%);
}

.ei-skip-link:focus {
  transform: translateY(0);
}

:focus-visible {
  outline: 2px solid var(--ei-gold) !important;
  outline-offset: 3px;
  box-shadow: var(--ei-focus);
}

.ei-navbar {
  position: sticky;
  top: 0;
  z-index: 1040;
  min-height: 72px;
  padding: .55rem 0;
  border-bottom: 1px solid var(--ei-border);
  background: rgba(7, 7, 7, .91);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
  backdrop-filter: blur(16px);
}

.ei-navbar .navbar-brand img {
  width: auto;
  height: 50px;
  object-fit: contain;
}

.ei-navbar .navbar-toggler {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--ei-border);
}

.ei-navbar .navbar-toggler-icon {
  filter: invert(1);
}

.ei-navbar .nav-link {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: .6rem .72rem !important;
  border-radius: 10px;
  color: #eee !important;
  font-family: "Bebas Neue", sans-serif;
  font-size: 1.08rem;
  letter-spacing: .05em;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}

.ei-navbar .nav-link:hover,
.ei-navbar .nav-item.active .nav-link {
  background: linear-gradient(135deg, rgba(255, 101, 0, .25), rgba(255, 211, 78, .09));
  color: var(--ei-gold) !important;
  transform: translateY(-1px);
}

.ei-main {
  width: 100%;
  min-height: 55vh;
}

.ei-card,
.card,
.modal-content {
  border: 1px solid var(--ei-border);
  border-radius: var(--ei-radius);
  background: linear-gradient(145deg, rgba(27, 27, 27, .97), rgba(11, 11, 11, .97));
  color: var(--ei-text);
  box-shadow: var(--ei-shadow);
}

.btn {
  min-height: 42px;
  border-radius: 999px;
  font-weight: 700;
}

.btn-primary,
.btn-warning,
.ei-btn-primary {
  border-color: var(--ei-orange);
  background: linear-gradient(135deg, var(--ei-orange), var(--ei-orange-dark));
  color: #fff;
}

.btn-primary:hover,
.btn-warning:hover,
.ei-btn-primary:hover {
  border-color: var(--ei-gold);
  background: linear-gradient(135deg, #ff7b21, var(--ei-orange));
  color: #fff;
}

.form-control,
.custom-select,
select,
textarea,
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]) {
  min-height: 44px;
  border: 1px solid #454545;
  border-radius: 10px;
  background: #151515;
  color: #fff;
}

.form-control:focus,
.custom-select:focus,
select:focus,
textarea:focus,
input:focus {
  border-color: var(--ei-orange);
  background: #1d1d1d;
  color: #fff;
  box-shadow: 0 0 0 .2rem rgba(255, 101, 0, .22);
}

.table-responsive {
  max-width: 100%;
  border: 1px solid var(--ei-border);
  border-radius: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table {
  margin-bottom: 0;
  color: var(--ei-text);
}

.table thead th {
  border-color: var(--ei-border);
  background: #17100b;
  color: var(--ei-gold);
  white-space: nowrap;
}

.table td {
  border-color: rgba(255, 255, 255, .08);
  vertical-align: middle;
}

.ei-footer {
  margin-top: 4rem;
  border-top: 1px solid var(--ei-border);
  background: linear-gradient(180deg, #0c0c0c, #030303);
  color: var(--ei-muted);
}

.ei-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .45rem;
  color: #eee;
}

.ei-footer a:hover {
  color: var(--ei-gold);
}

.ei-footer__brand {
  width: auto;
  height: 56px;
}

.ei-footer__social a {
  width: 44px;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 50%;
  margin-right: .35rem;
}

.badge,
.medal,
[class*="badge-"] {
  max-width: 100%;
}

img,
svg,
video,
canvas {
  max-width: 100%;
}

@media (max-width: 991.98px) {
  .ei-navbar .navbar-collapse {
    max-height: calc(100vh - 80px);
    padding: .75rem;
    overflow-y: auto;
    border: 1px solid var(--ei-border);
    border-radius: 12px;
    background: #0b0b0b;
  }

  .ei-navbar .nav-link {
    width: 100%;
  }
}

@media (max-width: 575.98px) {
  h1,
  .display-4 {
    font-size: clamp(1.8rem, 9vw, 2.5rem) !important;
    overflow-wrap: anywhere;
  }

  h2 {
    font-size: clamp(1.45rem, 7vw, 2rem) !important;
  }

  .container,
  .container-fluid {
    padding-right: 15px;
    padding-left: 15px;
  }

  .card,
  .ei-card,
  .modal-content {
    border-radius: 12px;
  }

  .btn {
    white-space: normal;
  }
}

.ei-update-strip {
  background: linear-gradient(135deg, #1a1a1a, #242424);
  color: #fff;
  padding: 0.75rem 1rem;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ei-update-strip strong {
  color: var(--ei-gold);
}

.ei-page-hero {
  padding: 3rem 1rem 2rem;
  text-align: center;
  background: linear-gradient(180deg, #050505, #17100b);
}

.ei-page-hero h1 {
  margin: 0 0 1rem;
  color: var(--ei-gold);
  font-size: clamp(2rem, 5vw, 3rem);
  text-transform: uppercase;
}

.ei-page-hero p {
  max-width: 800px;
  margin: 0 auto;
  color: var(--ei-muted);
}

.table tr.gold td:first-child {
  color: #ffd700;
}

.table tr.silver td:first-child {
  color: #c0c0c0;
}

.table tr.bronze td:first-child {
  color: #cd7f32;
}

.medal {
  margin-right: 0.35rem;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
