/* Music site mobile/UI fixes - generated 2026-08-19 */

:root {
  color-scheme: dark;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
  background-image: none !important;
}

/* Remove decorative background images without changing normal element colors. */
body,
body::before,
body::after,
main,
.page,
.site,
.site-wrap,
.app,
.background,
.page-background,
.bg {
  background-image: none !important;
}

/* Search field: dark on every browser, including Android autofill/text rendering. */
input[type="search"],
input[type="text"],
.search-input,
#search,
#searchInput,
#search-input {
  box-sizing: border-box;
  max-width: 100%;
  color: #f5f5f7 !important;
  -webkit-text-fill-color: #f5f5f7 !important;
  caret-color: #f5f5f7 !important;
  background: #0b0b11 !important;
  background-color: #0b0b11 !important;
  border-color: rgba(178, 57, 255, .75) !important;
}

input[type="search"]::placeholder,
input[type="text"]::placeholder,
.search-input::placeholder {
  color: #9898a6 !important;
  -webkit-text-fill-color: #9898a6 !important;
  opacity: 1;
}

/* Chrome/Android autofill must not turn the field white. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: #f5f5f7 !important;
  caret-color: #f5f5f7 !important;
  -webkit-box-shadow: 0 0 0 1000px #0b0b11 inset !important;
  box-shadow: 0 0 0 1000px #0b0b11 inset !important;
  transition: background-color 9999s ease-out 0s;
}

/* Search suggestions/autocomplete. */
#suggestions,
.suggestions,
.search-suggestions,
.search-suggest,
.autocomplete,
.autocomplete-items,
.autocomplete-list,
.search-dropdown,
.results-dropdown,
.suggest-list,
[role="listbox"] {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  max-height: min(55vh, 430px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background: #0d0d13 !important;
  background-color: #0d0d13 !important;
  color: #f2f2f5 !important;
  border-color: rgba(255,255,255,.12) !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

#suggestions *,
.suggestions *,
.search-suggestions *,
.search-suggest *,
.autocomplete *,
.autocomplete-items *,
.autocomplete-list *,
.search-dropdown *,
.results-dropdown *,
.suggest-list *,
[role="listbox"] * {
  color: #f2f2f5 !important;
  -webkit-text-fill-color: currentColor !important;
}

#suggestions a,
.suggestions a,
.search-suggestions a,
.search-suggest a,
.autocomplete a,
.autocomplete-items a,
.autocomplete-list a,
.search-dropdown a,
.results-dropdown a,
.suggest-list a,
[role="listbox"] a,
[role="option"] {
  display: block;
  box-sizing: border-box;
  background: transparent !important;
  color: #f2f2f5 !important;
  text-decoration: none;
}

#suggestions a:hover,
#suggestions a:focus,
.suggestions a:hover,
.suggestions a:focus,
.search-suggestions a:hover,
.search-suggestions a:focus,
.autocomplete-items div:hover,
.autocomplete-items div:focus,
[role="option"]:hover,
[role="option"]:focus,
[role="option"][aria-selected="true"] {
  background: #1a1a24 !important;
}

#suggestions small,
.suggestions small,
.search-suggestions small,
.search-suggest small,
.autocomplete small,
.autocomplete-items small,
.search-dropdown small,
.results-dropdown small,
.suggest-list small,
[role="listbox"] small,
.suggestion-type,
.suggest-type,
.hint,
.muted {
  color: #9a9aa7 !important;
}

@media (max-width: 768px) {
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    margin: 0;
    min-width: 0;
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-bottom: calc(84px + env(safe-area-inset-bottom));
  }

  main,
  .page,
  .container,
  .content,
  .site,
  .site-wrap,
  .app {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .container,
  .content,
  main {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  header,
  .header,
  .page-header,
  .topbar,
  nav {
    min-width: 0;
  }

  h1 {
    font-size: clamp(28px, 8vw, 42px) !important;
    line-height: 1.08 !important;
    overflow-wrap: anywhere;
  }

  h2 {
    font-size: clamp(22px, 6.5vw, 32px);
    line-height: 1.15;
  }

  input,
  input[type="search"],
  input[type="text"],
  select,
  textarea {
    font-size: 16px !important;
    min-height: 48px;
  }

  button,
  .button,
  .btn,
  a.button,
  a.btn {
    min-height: 44px;
    min-width: 44px;
    touch-action: manipulation;
  }

  .search-box,
  .search-wrap,
  .search-container,
  .search-panel,
  form[role="search"],
  form.search {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #suggestions,
  .suggestions,
  .search-suggestions,
  .search-suggest,
  .autocomplete,
  .autocomplete-items,
  .autocomplete-list,
  .search-dropdown,
  .results-dropdown,
  .suggest-list,
  [role="listbox"] {
    left: 0 !important;
    right: 0 !important;
    min-width: 0 !important;
    font-size: 16px !important;
  }

  .track,
  .track-row,
  .track-item,
  .song,
  .song-row,
  .song-item,
  .result,
  .result-row,
  .result-item {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
  }

  .track *,
  .track-row *,
  .track-item *,
  .song *,
  .song-row *,
  .song-item *,
  .result *,
  .result-row *,
  .result-item * {
    min-width: 0;
  }

  .track-title,
  .track-artist,
  .song-title,
  .song-artist,
  .result-title,
  .result-artist {
    overflow-wrap: anywhere;
  }

  img,
  svg,
  video,
  canvas {
    max-width: 100%;
  }

  #player,
  .player,
  .music-player,
  .global-player {
    box-sizing: border-box;
    max-width: 100vw !important;
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* === active-track-contrast ===
   Make the currently playing/selected track visibly brighter,
   while keeping the existing dark purple theme.
*/
.track.active,
.track.playing,
.track.is-active,
.track.is-playing,
.track-row.active,
.track-row.playing,
.track-row.is-active,
.track-row.is-playing,
.track-item.active,
.track-item.playing,
.track-item.is-active,
.track-item.is-playing,
.song.active,
.song.playing,
.song-row.active,
.song-row.playing,
.song-item.active,
.song-item.playing,
.result.active,
.result.playing,
.result-row.active,
.result-row.playing,
[aria-current="true"].track,
[aria-current="true"].track-row,
[aria-current="true"].track-item,
[data-playing="true"],
[data-active="true"] {
  background: linear-gradient(
    90deg,
    rgba(177, 42, 255, .18) 0%,
    rgba(126, 26, 180, .12) 45%,
    rgba(44, 17, 58, .24) 100%
  ) !important;
  border-color: rgba(190, 70, 255, .72) !important;
  box-shadow:
    inset 3px 0 0 rgba(198, 68, 255, .95),
    inset 0 0 0 1px rgba(198, 68, 255, .10) !important;
}

.track.active .track-title,
.track.playing .track-title,
.track-row.active .track-title,
.track-row.playing .track-title,
.track-item.active .track-title,
.track-item.playing .track-title,
.song.active .song-title,
.song.playing .song-title,
.song-row.active .song-title,
.song-row.playing .song-title,
[data-playing="true"] .track-title,
[data-active="true"] .track-title {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.track.active .track-artist,
.track.playing .track-artist,
.track-row.active .track-artist,
.track-row.playing .track-artist,
.track-item.active .track-artist,
.track-item.playing .track-artist,
.song.active .song-artist,
.song.playing .song-artist,
.song-row.active .song-artist,
.song-row.playing .song-artist,
[data-playing="true"] .track-artist,
[data-active="true"] .track-artist {
  color: #c9c5cf !important;
  -webkit-text-fill-color: #c9c5cf !important;
}

.track.active button,
.track.playing button,
.track-row.active button,
.track-row.playing button,
.track-item.active button,
.track-item.playing button,
[data-playing="true"] button,
[data-active="true"] button {
  border-color: rgba(190, 70, 255, .78) !important;
}
/* === /active-track-contrast === */

/* === ui-tabs-active-v2 === */

.track.now-playing {
  background: #1d0b27 !important;
  box-shadow:
    inset 4px 0 0 #b72cff,
    inset 0 0 0 1px rgba(183,44,255,.28) !important;
}

.track.now-playing:hover {
  background: #24102f !important;
}

.track.now-playing .track-title {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.track.now-playing .track-artist {
  color: #c9c3cf !important;
  -webkit-text-fill-color: #c9c3cf !important;
}

.track.now-playing .play,
.track.now-playing .more,
.track.now-playing .source-choice,
.track.now-playing .download {
  border-color: rgba(190,65,255,.82) !important;
}

@media (max-width: 700px) {
  nav.tabs {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: visible !important;
    overflow-x: visible !important;
    scrollbar-width: none !important;
  }

  nav.tabs::-webkit-scrollbar {
    display: none !important;
  }

  nav.tabs > a {
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 0 4px !important;
    font-size: clamp(12px, 3.6vw, 15px) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
  }
}

@media (max-width: 360px) {
  nav.tabs {
    gap: 4px !important;
  }

  nav.tabs > a {
    padding-left: 2px !important;
    padding-right: 2px !important;
    font-size: 12px !important;
  }
}

/* === /ui-tabs-active-v2 === */