:root {
  --anime-ink: #16132d;
  --anime-panel: #211a45;
  --anime-violet: #8b5cf6;
  --anime-pink: #f472b6;
  --anime-cyan: #67e8f9;
  --anime-paper: #f8f7ff;
}

html,
body {
  background:
    radial-gradient(circle at 14% 0%, rgba(244, 114, 182, .18), transparent 20rem),
    radial-gradient(circle at 88% 6%, rgba(103, 232, 249, .16), transparent 22rem),
    var(--anime-ink);
}

.sl-screen {
  background: transparent;
}

.sl-topbar {
  border-bottom-color: rgba(103, 232, 249, .55);
}

.sl-brand {
  color: #fff;
  text-shadow: 0 0 18px rgba(139, 92, 246, .7);
}

.sl-iconButton {
  border-color: rgba(139, 92, 246, .75);
  background: rgba(31, 23, 63, .92);
}

.sl-panel,
.sl-resultPanel {
  border-radius: 16px;
}

.sl-playButton,
.sl-submitButton,
.sl-shareButton {
  background: linear-gradient(135deg, #7c3aed, #db2777) !important;
  border-color: #c084fc !important;
  box-shadow: 0 6px 16px rgba(124, 58, 237, .30);
}

.sl-skipButton {
  border-color: rgba(103, 232, 249, .75) !important;
  color: var(--anime-cyan) !important;
}

.sl-searchInput:focus {
  border-color: var(--anime-cyan) !important;
  box-shadow: 0 0 0 3px rgba(103, 232, 249, .16) !important;
}

.sl-progressPlaybackFill,
.sl-slotCorrect {
  background: linear-gradient(90deg, var(--anime-cyan), var(--anime-pink)) !important;
}

.sl-resultCover {
  background: linear-gradient(135deg, #8b5cf6, #f472b6 50%, #67e8f9) !important;
}