:root {
  color-scheme: dark;
  --theme-bg: #070a18;
  --theme-surface: #10162b;
  --theme-surface-deep: #0a1022;
  --theme-blue: #4f8cff;
  --theme-purple: #9b5cff;
  --theme-text: #f4f6ff;
  --theme-muted: #b8bed4;
  --theme-border: rgba(120, 112, 255, 0.28);
  --theme-glow: rgba(79, 140, 255, 0.18);
}

body {
  background:
    radial-gradient(circle at 12% 0%, rgba(79, 140, 255, 0.16), transparent 34rem),
    radial-gradient(circle at 88% 10%, rgba(155, 92, 255, 0.13), transparent 30rem),
    var(--theme-bg) !important;
  color: var(--theme-text) !important;
}

header {
  background: rgba(16, 22, 43, 0.94) !important;
  border-bottom-color: var(--theme-purple) !important;
  box-shadow: 0 2px 18px var(--theme-glow) !important;
}

header h1,
h2,
h3,
.status-header,
.staff-info strong,
.product-card .price,
th {
  color: var(--theme-blue) !important;
}

header h1 {
  background: linear-gradient(90deg, var(--theme-blue), var(--theme-purple));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

nav a {
  color: var(--theme-muted) !important;
}

nav a:hover,
nav a:focus-visible {
  color: var(--theme-purple) !important;
  text-shadow: 0 0 14px rgba(155, 92, 255, 0.45);
}

main,
.status-card {
  background: rgba(16, 22, 43, 0.94) !important;
  border: 1px solid var(--theme-border);
  box-shadow: 0 0 28px var(--theme-glow) !important;
}

h2 {
  border-bottom-color: var(--theme-purple) !important;
}

.staff-card,
.product-card,
#searchInput,
th {
  background: var(--theme-surface-deep) !important;
}

.staff-card,
.product-card {
  border: 1px solid rgba(79, 140, 255, 0.14);
  box-shadow: 0 0 14px rgba(79, 140, 255, 0.08) !important;
}

.staff-card:hover,
tr:hover {
  background: rgba(127, 96, 255, 0.09) !important;
}

.staff-card img {
  border-color: var(--theme-purple) !important;
  box-shadow: 0 0 14px rgba(155, 92, 255, 0.28);
}

#searchInput {
  border-color: var(--theme-border) !important;
  color: var(--theme-text) !important;
}

#searchInput:focus {
  border-color: var(--theme-blue) !important;
  box-shadow: 0 0 12px rgba(79, 140, 255, 0.32) !important;
}

th,
td,
.players-list li {
  border-bottom-color: var(--theme-border) !important;
}

.join-btn,
.product-card button {
  background: linear-gradient(135deg, var(--theme-blue), var(--theme-purple)) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 20px rgba(89, 105, 255, 0.24);
}

.join-btn:hover,
.product-card button:hover {
  background: linear-gradient(135deg, #6aa0ff, #ad73ff) !important;
  box-shadow: 0 10px 24px rgba(155, 92, 255, 0.3);
}

footer {
  background: rgba(16, 22, 43, 0.96) !important;
  color: var(--theme-muted) !important;
  border-top-color: var(--theme-purple) !important;
  box-shadow: 0 -2px 18px rgba(155, 92, 255, 0.13) !important;
}

a[style*="color:#00bcd4"] {
  color: var(--theme-blue) !important;
}

::selection {
  background: rgba(155, 92, 255, 0.42);
  color: #ffffff;
}