:root {
  --suprx-bg: #070b11;
  --suprx-panel: rgba(13, 18, 28, 0.86);
  --suprx-panel-strong: rgba(18, 25, 38, 0.94);
  --suprx-border: rgba(255, 255, 255, 0.08);
  --suprx-border-hot: rgba(255, 201, 98, 0.24);
  --suprx-text: #e8edf5;
  --suprx-muted: #9aa8ba;
  --suprx-gold: #f1bb53;
  --suprx-gold-soft: rgba(241, 187, 83, 0.15);
  --suprx-cyan: #78d8ff;
  --suprx-shadow: 0 24px 80px rgba(0, 0, 0, 0.38);
}

body,
body.bg-header-footer,
body.bg-main {
  background:
    radial-gradient(circle at top, rgba(241, 187, 83, 0.09), transparent 28%),
    radial-gradient(circle at 80% 18%, rgba(120, 216, 255, 0.08), transparent 24%),
    linear-gradient(180deg, #0b1017 0%, #06090f 100%) !important;
  color: var(--suprx-text) !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle at top, rgba(0, 0, 0, 0.75), transparent 78%);
  opacity: 0.26;
  animation: suprx-grid-drift 18s linear infinite;
}

@keyframes suprx-grid-drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, 18px, 0); }
}

.navbar.bg-header-footer,
.navbar.bg-main,
.bg-header-footer,
.bg-main {
  background-color: rgba(10, 14, 22, 0.86) !important;
  backdrop-filter: blur(18px);
}

.navbar {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.24);
}

.navbar-brand {
  display: inline-flex !important;
  align-items: center;
  gap: 12px;
  color: var(--suprx-text) !important;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.navbar-brand .header-image {
  width: 42px;
  height: 42px;
  padding: 4px;
  border-radius: 14px;
  border: 1px solid var(--suprx-border);
  background:
    radial-gradient(circle at 35% 24%, rgba(255, 223, 126, 0.26), transparent 45%),
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(7, 11, 18, 0.94));
  box-shadow:
    0 18px 34px rgba(8, 10, 16, 0.45),
    inset 0 1px 0 rgba(255,255,255,0.05);
  object-fit: contain;
}

.navbar-brand::after {
  content: "SUPRX Explorer";
  color: var(--suprx-muted);
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.navbar-nav .nav-link,
.dropdown-item,
a,
.btn-link {
  transition:
    color 160ms ease,
    background-color 160ms ease,
    border-color 160ms ease,
    transform 160ms ease,
    box-shadow 160ms ease;
}

.navbar-nav .nav-link {
  border-radius: 999px;
  color: #b8c6d8 !important;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus,
.dropdown-item:hover,
.dropdown-item:focus,
a:hover,
a:focus,
.btn-link:hover,
.btn-link:focus {
  color: #fff4d7 !important;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}

.container .card,
.card,
.alert,
.table-responsive,
.bg-white,
.bg-main .card,
.bg-header-footer .card {
  background: linear-gradient(180deg, rgba(17, 23, 35, 0.9), rgba(11, 15, 23, 0.96)) !important;
  border: 1px solid var(--suprx-border) !important;
  box-shadow: var(--suprx-shadow);
  backdrop-filter: blur(14px);
}

.card:hover {
  border-color: var(--suprx-border-hot) !important;
  transform: translateY(-2px);
}

.card-header,
.card-footer,
.list-group-item,
.dropdown-menu {
  background: rgba(255, 255, 255, 0.02) !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}

.dropdown-menu {
  background: rgba(11, 15, 23, 0.98) !important;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.34);
}

.btn,
button.btn,
input.form-control,
select.form-control,
textarea.form-control,
.form-control {
  border-radius: 14px !important;
}

.btn-primary,
.btn-outline-primary:hover,
.page-link.active,
.page-item.active .page-link {
  color: #1b1505 !important;
  border-color: rgba(255, 214, 119, 0.86) !important;
  background:
    linear-gradient(180deg, rgba(255, 227, 154, 0.96), rgba(241, 187, 83, 0.98)) !important;
  box-shadow:
    0 12px 34px rgba(241, 187, 83, 0.24),
    inset 0 1px 0 rgba(255,255,255,0.32);
}

.btn-secondary,
.btn-outline-secondary,
.btn-outline-primary,
.page-link,
.form-control {
  color: var(--suprx-text) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.03) !important;
}

.form-control:focus,
.btn:focus,
.btn:active,
.page-link:focus {
  border-color: rgba(120, 216, 255, 0.35) !important;
  box-shadow:
    0 0 0 0.22rem rgba(120, 216, 255, 0.14),
    0 12px 28px rgba(0, 0, 0, 0.28) !important;
}

.table,
.table th,
.table td,
.text-body,
.text-dark {
  color: var(--suprx-text) !important;
}

.table thead th {
  border-bottom-color: rgba(255,255,255,0.14) !important;
  color: #f1f5fb !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.72rem;
}

.table td,
.table th {
  border-top-color: rgba(255,255,255,0.06) !important;
}

.table-hover tbody tr:hover {
  background: rgba(255, 255, 255, 0.025) !important;
}

.badge,
.alert,
.code,
code,
pre {
  border-radius: 12px;
}

.badge,
.badge-primary,
.badge-info {
  color: #10151f !important;
  background: linear-gradient(180deg, rgba(120, 216, 255, 0.96), rgba(83, 187, 241, 0.96)) !important;
}

.badge-warning,
.badge-secondary {
  color: #171103 !important;
  background: linear-gradient(180deg, rgba(255, 230, 159, 0.96), rgba(241, 187, 83, 0.96)) !important;
}

.footer,
footer {
  color: var(--suprx-muted) !important;
}

@media (max-width: 991px) {
  .navbar-brand::after {
    display: none;
  }

  .navbar-brand .header-image {
    width: 38px;
    height: 38px;
  }
}