:root {
  color-scheme: dark;
  --mefo-bg: #09090b;
  --mefo-panel: rgba(24, 24, 27, 0.78);
  --mefo-purple: #8b5cf6;
  --mefo-pink: #ec4899;
  --mefo-yellow: #facc15;
  --mefo-text: #fafafa;
  --mefo-muted: #a1a1aa;
}

html,
body {
  background:
    radial-gradient(circle at 12% 8%, rgba(236, 72, 153, 0.18), transparent 30rem),
    radial-gradient(circle at 82% 14%, rgba(139, 92, 246, 0.24), transparent 32rem),
    var(--mefo-bg) !important;
  color: var(--mefo-text) !important;
}

.nebula.one { background: var(--mefo-purple) !important; }
.nebula.two { background: var(--mefo-pink) !important; }
.nebula.three { background: var(--mefo-yellow) !important; }
.stars { opacity: 0.18 !important; }
.grid-floor {
  opacity: 0.14 !important;
  background-image: linear-gradient(rgba(139,92,246,.55) 1px,transparent 1px),linear-gradient(90deg,rgba(139,92,246,.55) 1px,transparent 1px) !important;
}

.side {
  background: rgba(9, 9, 11, 0.9) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 18px 0 60px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(24px);
}

.main { padding: 24px 32px !important; }

.glass {
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.035)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 55px rgba(0,0,0,.24) !important;
  backdrop-filter: blur(22px) !important;
}

.nav {
  min-height: 46px;
  border-radius: 16px !important;
  color: var(--mefo-muted) !important;
}

.nav:hover,
.nav.active {
  color: white !important;
  background: linear-gradient(90deg, rgba(139,92,246,.25), rgba(236,72,153,.08)) !important;
  box-shadow: inset 3px 0 var(--mefo-yellow) !important;
}

.nav svg { color: var(--mefo-purple); }
.nav.active svg { color: var(--mefo-yellow); }

.btn { border-radius: 999px !important; }
.btn.primary,
.primary {
  background: var(--mefo-yellow) !important;
  color: #09090b !important;
  box-shadow: 0 0 34px rgba(250, 204, 21, 0.24) !important;
}

.btn.primary:hover,
.primary:hover {
  background: linear-gradient(110deg, var(--mefo-yellow), var(--mefo-pink), var(--mefo-purple)) !important;
  color: #09090b !important;
}

.soft {
  border-color: rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.05) !important;
}

.text-fuchsia-300 { color: #c4b5fd !important; }
.text-amber-300 { color: var(--mefo-yellow) !important; }
.text-slate-400 { color: #d4d4d8 !important; }
.text-slate-500 { color: var(--mefo-muted) !important; }
.text-emerald-300 { color: #86efac !important; }
.bg-fuchsia-500\/15,
.bg-fuchsia-600\/20 { background: rgba(139,92,246,.16) !important; }
.bg-amber-400\/15,
.bg-amber-400\/10 { background: rgba(250,204,21,.12) !important; }

.progress {
  background: linear-gradient(90deg, var(--mefo-purple), var(--mefo-pink), var(--mefo-yellow), var(--mefo-purple)) !important;
  background-size: 200% 100% !important;
}

input,
select {
  border-color: rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.055) !important;
  color: white !important;
}

option { background: #18181b; }

.nft:hover {
  border-color: rgba(250,204,21,.42) !important;
  box-shadow: 0 18px 60px rgba(139,92,246,.2), 0 0 28px rgba(236,72,153,.16) !important;
}

.nft.selected {
  outline-color: var(--mefo-yellow) !important;
  box-shadow: 0 0 25px rgba(250,204,21,.24) !important;
}

.tag { border: 1px solid rgba(255,255,255,.08); }

@media (max-width: 820px) {
  .side { width: 188px !important; padding: 14px !important; }
  .main { padding: 18px !important; }
}