.astral-username-effect {
  --effect-primary: #60a0dc;
  --effect-secondary: #9b6cff;
  --effect-duration: 4s;
  display: inline-block;
  color: var(--effect-primary) !important;
  font-weight: inherit;
}

.effect-speed-slow { --effect-duration: 8s; }
.effect-speed-normal { --effect-duration: 4s; }

.effect-none {
  color: inherit !important;
  background: none !important;
  -webkit-text-fill-color: currentColor;
}

.effect-glow {
  text-shadow: 0 0 3px var(--effect-primary), 0 0 8px var(--effect-primary);
}

.effect-gradient,
.effect-shimmer,
.effect-holographic,
.effect-ember,
.effect-frost,
.effect-astral,
.effect-rainbow {
  color: transparent !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent;
  background-size: 240px 100% !important;
  background-repeat: repeat-x !important;
  animation: astral-gradient-loop var(--effect-duration) linear infinite;
  will-change: background-position;
}

.effect-gradient {
  background: linear-gradient(90deg, var(--effect-primary), var(--effect-secondary), var(--effect-primary));
}

.effect-shimmer {
  background: linear-gradient(105deg, var(--effect-primary) 20%, #fff 45%, var(--effect-secondary) 55%, var(--effect-primary) 80%);
}

.effect-neon {
  color: var(--effect-primary) !important;
  text-shadow: 0 0 2px #fff, 0 0 5px var(--effect-primary), 0 0 10px var(--effect-secondary);
  animation: astral-neon-pulse var(--effect-duration) ease-in-out infinite;
}

.effect-holographic {
  background: linear-gradient(90deg, var(--effect-primary), #f4b8ff, #82e9ff, var(--effect-secondary), var(--effect-primary));
}

.effect-ember {
  background: linear-gradient(90deg, var(--effect-primary), #ffd36b, var(--effect-secondary), var(--effect-primary));
  filter: drop-shadow(0 0 3px var(--effect-secondary));
}

.effect-frost {
  background: linear-gradient(90deg, #effcff, var(--effect-primary), var(--effect-secondary), #effcff);
  filter: drop-shadow(0 0 2px var(--effect-primary));
}

.effect-astral {
  background: linear-gradient(90deg, var(--effect-primary), #d56bff, var(--effect-secondary), #61d8ff, var(--effect-primary));
  filter: drop-shadow(0 0 3px var(--effect-secondary));
}

.effect-rainbow {
  background: linear-gradient(90deg, #ff5b5b, #ffd15b, #69e38c, #5bbcff, #a66bff, #ff69c8, #ff5b5b);
}

.effect-speed-off {
  animation: none !important;
  background-position: 50% 0 !important;
}

@keyframes astral-gradient-loop {
  from { background-position: 0 0; }
  to { background-position: 240px 0; }
}

@keyframes astral-neon-pulse {
  0%, 100% { opacity: 0.82; filter: brightness(0.95); }
  50% { opacity: 1; filter: brightness(1.3); }
}

.username-effect-preview {
  margin: 10px 0 14px;
  padding: 16px;
  border: 1px solid #444;
  border-radius: 4px;
  background: #191919;
  text-align: center;
  font: inherit;
}

.username-effect-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 1fr));
  gap: 10px 16px;
  max-width: 560px;
}

.username-effect-controls label { padding: 0; }
.username-effect-controls [hidden] { display: none !important; }
.username-effect-controls select,
.username-effect-controls input[type="color"] { width: 100%; box-sizing: border-box; }
.username-effect-controls input[type="color"] { height: 34px; padding: 2px; }

@media (prefers-reduced-motion: reduce) {
  .astral-username-effect { animation: none !important; }
}

@media only screen and (max-width: 600px) {
  .username-effect-controls { grid-template-columns: 1fr; }
}