/* Aurora-inspired blend for creative, professional polish */
:root {
  /* Luminous violet accent for calls to action */
  --theme-color: #8E5BFF;
  --gradient-start: #0C1B3C;
  /* Coral flare to keep the experience energetic */
  --gradient-end: #FF7FC5;
  --surface-bg: rgba(0, 0, 0, 0.42);
  --surface-contrast: #f3fdf7;
  --surface-border: rgba(142, 91, 255, 0.25);
  --card-bg: linear-gradient(150deg, rgba(12, 20, 46, 0.9), rgba(12, 20, 46, 0.76));
  --honor-badge-bg: rgba(255, 255, 255, 0.14);
  --honor-badge-border: rgba(255, 255, 255, 0.28);
  --honor-badge-text: #f3fdf7;
  --honor-badge-shadow: rgba(12, 27, 60, 0.35);
}

:root[data-theme="light"] {
  --theme-color: #6f45ff;
  --gradient-start: #d6def1;
  --gradient-end: #ead6e6;
  --surface-bg: rgba(232, 236, 246, 0.95);
  --surface-contrast: #0b1224;
  --surface-border: rgba(111, 69, 255, 0.28);
  --card-bg: linear-gradient(140deg, #edf0f8, #e2e7f3);
  --honor-badge-bg: rgba(15, 23, 42, 0.08);
  --honor-badge-border: rgba(15, 23, 42, 0.18);
  --honor-badge-text: #0b1224;
  --honor-badge-shadow: rgba(111, 69, 255, 0.22);
}

body {
  font-family: 'Montserrat', sans-serif;
}

.header { background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end)); }
.sidebar button { background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end)); }
.track-list a:hover, .track-list .track-item:hover, .album-list a:hover, .radio-list a:hover { background-color: var(--theme-color); }
.popup-close { background: var(--theme-color); }
.retry-button { background: var(--theme-color); }
.progress-bar div { background: var(--theme-color); }
.install-btn { background: var(--theme-color); }
.radio-region-header { color: var(--theme-color); }

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--surface-border);
  background: linear-gradient(135deg, rgba(142, 91, 255, 0.18), rgba(255, 127, 197, 0.22));
  color: var(--surface-contrast);
  cursor: pointer;
  font-weight: 600;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  outline: none;
}

.theme-toggle:focus-visible {
  box-shadow: 0 0 0 3px rgba(111, 69, 255, 0.4);
}

.theme-toggle-icon {
  font-size: 1.1rem;
}