/* Dark purple light theme and animated brand */
:root{
  --purple-900:#0b0014;
  --purple-800:#160026;
  --purple-700:#2a004a;
  --purple-600:#4b007d;
  --purple-500:#7a1cff;
  --purple-300:#b28dff;
  --text-on-dark:#ffffff;
}

/* Navbar override */
.nav{
  background: radial-gradient(1200px 200px at 20% -50%, rgba(122,28,255,0.35), transparent 60%) ,
              linear-gradient(90deg, var(--purple-900), var(--purple-800) 40%, var(--purple-700));
  color: var(--text-on-dark);
  border-bottom: 1px solid rgba(178,141,255,0.18);
  box-shadow: 0 8px 24px rgba(122,28,255,0.15), inset 0 -1px 0 rgba(255,255,255,0.04);
}

.nav a{
  color: #ffffff;
}

.nav a:hover{
  color: #ffffff;
  text-shadow: 0 0 12px rgba(178,141,255,0.55);
}

/* Animated brand text */
.nav .brand{
  font-weight: 800;
  letter-spacing: 0.5px;
  margin-right: 12px;
  background: linear-gradient(90deg, #b28dff, #7a1cff, #d2c0ff);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: brandGradient 5s ease infinite;
}

@keyframes brandGradient{
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}

/* Progress bar color tweak to match theme */
.nav .level-progress{ background: rgba(178,141,255,0.25); }
.nav .level-progress .progress-bar{ background: var(--purple-500); }