/* Spotify-inspired skin. Independent from the original BITteMusik and forum skins. */
html[data-theme="spotify"] {
  --bg: #090909;
  --panel: #171717;
  --panel2: #242424;
  --line: #303030;
  --text: #ffffff;
  --muted: #a7a7a7;
  --accent: #63e6a4;
  --accent2: #35b879;
  --danger: #ff7188;
}
html[data-theme="spotify"] body { background: #121212; }
html[data-theme="spotify"] button { border: 0; border-radius: 999px; background: var(--accent); color: #07120d; font-weight: 850; }
html[data-theme="spotify"] button:hover { filter: brightness(1.06); transform: scale(1.025); }
html[data-theme="spotify"] button:focus-visible, html[data-theme="spotify"] a:focus-visible, html[data-theme="spotify"] input:focus-visible, html[data-theme="spotify"] select:focus-visible, html[data-theme="spotify"] textarea:focus-visible, html[data-theme="spotify"] summary:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
html[data-theme="spotify"] .ghost, html[data-theme="spotify"] .nav { border: 0; background: transparent; color: var(--muted); }
html[data-theme="spotify"] .ghost:hover { background: #ffffff12; color: var(--text); }
html[data-theme="spotify"] .danger-action, html[data-theme="spotify"] .delete-user-button { border: 1px solid #713c48; background: #28171c; color: #ff91a3; }
html[data-theme="spotify"] input, html[data-theme="spotify"] select, html[data-theme="spotify"] textarea { border-color: #3a3a3a; border-radius: 7px; background: #242424; }
html[data-theme="spotify"] input:focus, html[data-theme="spotify"] select:focus, html[data-theme="spotify"] textarea:focus { border-color: #fff; box-shadow: none; }
html[data-theme="spotify"] .card { border-color: transparent; border-radius: 10px; background: var(--panel); }
html[data-theme="spotify"] .login-wrap { background: radial-gradient(circle at 50% -20%, #256845 0, #121212 38%, #090909 72%); }
html[data-theme="spotify"] .login-card { width: min(450px, 100%); padding: 34px; border-radius: 20px; background: #121212; box-shadow: 0 26px 90px #000c; }
html[data-theme="spotify"] .brand, html[data-theme="spotify"] .logo span, html[data-theme="spotify"] .player-art span { border-radius: 50%; background: var(--accent); color: #07120d; transform: none; box-shadow: none; }
html[data-theme="spotify"] #app { --sidebar-width: 250px; grid-template-columns: 250px minmax(0, 1fr); background: #000; }
html[data-theme="spotify"] aside { z-index: 10; border: 0; padding: 22px 14px; background: #000; }
html[data-theme="spotify"] #app > aside .logo { margin: 22px 8px 0; }
html[data-theme="spotify"] .logo span { width: 40px; height: 40px; }
html[data-theme="spotify"] .logo strong { font-size: 19px; }
html[data-theme="spotify"] nav { margin-top: 38px; gap: 3px; }
html[data-theme="spotify"] .nav { min-height: 46px; display: flex; align-items: center; gap: 13px; padding: 12px 15px; border-radius: 7px; font-weight: 800; }
html[data-theme="spotify"] .nav-icon { width: 22px; display: inline-grid; place-items: center; color: #b3b3b3; font-size: 19px; line-height: 1; }
html[data-theme="spotify"] .nav.active, html[data-theme="spotify"] .nav:hover { background: #242424; color: #fff; }
html[data-theme="spotify"] .nav.active .nav-icon, html[data-theme="spotify"] .nav:hover .nav-icon { color: #fff; }
html[data-theme="spotify"] .nav-settings { margin-top: 16px; border-top: 1px solid #242424; border-radius: 0 0 7px 7px; padding-top: 18px; }
html[data-theme="spotify"] .profile { margin: auto 4px 0; padding: 16px 12px; border-top: 1px solid #282828; }
html[data-theme="spotify"] .content { min-height: 100vh; padding: 30px clamp(22px, 4vw, 58px) 70px; background: linear-gradient(180deg, #244d3a 0, #1b2b24 155px, #121212 390px); }
html[data-theme="spotify"] .content > header { position: sticky; z-index: 8; top: 0; margin: -30px calc(clamp(22px, 4vw, 58px) * -1) 30px; padding: 30px clamp(22px, 4vw, 58px) 20px; background: linear-gradient(180deg, #244d3af5, #244d3acd 72%, transparent); backdrop-filter: blur(10px); }
html[data-theme="spotify"] .content > header h2 { font-size: clamp(36px, 5vw, 58px); line-height: 1; letter-spacing: -2.5px; }
html[data-theme="spotify"] .content > header p { margin-bottom: 0; color: #d1ddd7; }
html[data-theme="spotify"] .grid { grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); gap: 23px; }
html[data-theme="spotify"] .playlist { min-height: 345px; padding: 16px; background: #181818; box-shadow: 0 8px 25px #0000; }
html[data-theme="spotify"] .playlist:hover { transform: translateY(-4px); border-color: transparent; background: #282828; box-shadow: 0 16px 36px #0007; }
html[data-theme="spotify"] .playlist-count { position: relative; aspect-ratio: 1; min-height: 0; display: grid; place-items: center; align-content: center; margin-bottom: 17px; padding: 0; border-radius: 8px; overflow: hidden; background: radial-gradient(circle at 25% 18%, #63e6a4aa, transparent 30%), linear-gradient(145deg, #276247, #10241a 70%); box-shadow: 0 12px 26px #0008; }
html[data-theme="spotify"] .playlist-count::after { content: "♪"; position: absolute; right: 13px; bottom: -17px; color: #ffffff14; font-size: 100px; line-height: 1; transform: rotate(-12deg); }
html[data-theme="spotify"] .playlist-count.has-cover::after { display: none; }
html[data-theme="spotify"] .playlist .count { z-index: 2; color: #fff; font-size: clamp(42px, 5vw, 64px); line-height: 1; text-shadow: 0 4px 18px #0008; }
html[data-theme="spotify"] .playlist .count-label { z-index: 2; margin-top: 4px; color: #d9e8e1; font-size: 10px; text-transform: uppercase; letter-spacing: 1.6px; }
html[data-theme="spotify"] .playlist-count.has-cover .count { position: absolute; left: 11px; bottom: 10px; padding: 3px 0; font-size: 12px; }
html[data-theme="spotify"] .playlist-count.has-cover .count-label { position: absolute; left: 31px; bottom: 9px; margin: 0; font-size: 9px; }
html[data-theme="spotify"] .playlist-play { position: absolute; z-index: 4; right: 12px; bottom: 12px; width: 50px; height: 50px; margin: 0; opacity: 0; transform: translateY(9px); box-shadow: 0 9px 20px #0009; transition: opacity .18s ease, transform .18s ease, filter .18s ease; }
html[data-theme="spotify"] .playlist:hover .playlist-play, html[data-theme="spotify"] .playlist-play:focus-visible { opacity: 1; transform: translateY(0); }
html[data-theme="spotify"] .playlist-status { position: absolute; z-index: 3; top: 26px; left: 26px; align-self: auto; border-color: #ffffff26; background: #0009 !important; color: #fff !important; backdrop-filter: blur(8px); }
html[data-theme="spotify"] .playlist-menu { top: 22px; right: 22px; }
html[data-theme="spotify"] .playlist h3 { margin-bottom: 4px; overflow: hidden; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
html[data-theme="spotify"] .playlist > p { display: -webkit-box; min-height: 42px; margin-bottom: 14px; overflow: hidden; font-size: 12px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
html[data-theme="spotify"] .playlist .actions .ghost { border: 1px solid #4a4a4a; text-align: center; }
html[data-theme="spotify"] .playlist-toolbar, html[data-theme="spotify"] .library-toolbar { padding: 13px 15px; border-radius: 10px; background: #181818d9; }
html[data-theme="spotify"] .picker-source-tabs { border: 0; border-radius: 999px; background: #090909; }
html[data-theme="spotify"] .picker-source { border-radius: 999px; }
html[data-theme="spotify"] .picker-source.active { border: 0; background: #fff; color: #000; }
html[data-theme="spotify"] .song-item:hover, html[data-theme="spotify"] .list-item:hover { background: #ffffff0d; }
html[data-theme="spotify"] dialog, html[data-theme="spotify"] .dialog-card { background: #181818; }
html[data-theme="spotify"] .library-song, html[data-theme="spotify"] .queue-editor-item, html[data-theme="spotify"] .event-sound-item, html[data-theme="spotify"] .event-node, html[data-theme="spotify"] .event-point-head, html[data-theme="spotify"] .audio-visual-editor { background: #202020; }
html[data-theme="spotify"] .theme-option { border-color: transparent; border-radius: 12px; background: #202020; }
html[data-theme="spotify"] .theme-option:has(input:checked) { border-color: var(--accent); background: #232a26; }
html[data-theme="spotify"] .feedback-button { background: #fff; color: #111; }
html[data-theme="spotify"] .web-player-bar { --player-bg: #0d0d0df8; --player-control: #fff; --player-control-text: #000; border-top-color: #282828; background: var(--player-bg); box-shadow: 0 -12px 35px #000b; }
html[data-theme="spotify"] .web-player-cover { border: 0; border-radius: 4px; box-shadow: 0 6px 18px #000b; }
html[data-theme="spotify"] .web-player-copy small { color: #63e6a4; }
html[data-theme="spotify"] .web-player-controls button, html[data-theme="spotify"] .web-player-actions button { border: 0; background: transparent; color: #b3b3b3; }
html[data-theme="spotify"] .web-player-controls button:hover, html[data-theme="spotify"] .web-player-actions button:hover { background: transparent; color: #fff; transform: scale(1.08); }
html[data-theme="spotify"] .web-player-controls .web-player-toggle { background: #fff; color: #000; }
html[data-theme="spotify"] .web-player-controls .web-player-toggle:hover { background: #fff; color: #000; }
html[data-theme="spotify"] .web-player-progress input::-webkit-slider-thumb, html[data-theme="spotify"] .web-player-actions input::-webkit-slider-thumb { background: #fff; }
html[data-theme="spotify"] .web-player-progress input, html[data-theme="spotify"] .web-player-actions input { background: linear-gradient(90deg, #63e6a4 var(--range-progress), #4d4d4d var(--range-progress)); }
html[data-theme="spotify"] .web-player-actions a { color: #b3b3b3; }
html[data-theme="spotify"] .player-body { background: linear-gradient(180deg, #24503b 0, #121212 42%); }
html[data-theme="spotify"] .player-shell { width: min(720px, 100%); padding: 35px; border-radius: 18px; background: #181818; box-shadow: 0 30px 100px #000a; }
html[data-theme="spotify"] .player-art { width: min(260px, 65vw); height: auto; aspect-ratio: 1; border: 0; border-radius: 9px; background: radial-gradient(circle at 25% 20%, #63e6a499, transparent 30%), linear-gradient(145deg, #286c4d, #10241a); transform: none; }
html[data-theme="spotify"] .queue-item { border-radius: 5px; background: transparent; color: var(--muted); }
html[data-theme="spotify"] .queue-item.active { border: 0; background: #ffffff12; color: var(--accent); }

@media (hover: none) { html[data-theme="spotify"] .playlist-play { opacity: 1; transform: none; } }
@media (max-width: 1000px) {
  html[data-theme="spotify"] #app { --sidebar-width: 205px; grid-template-columns: 205px minmax(0, 1fr); }
  html[data-theme="spotify"] .grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
}
@media (max-width: 750px) {
  html[data-theme="spotify"] #app { --sidebar-width: 100%; display: block; background: #121212; }
  html[data-theme="spotify"] aside { padding: 12px; background: #090909; }
  html[data-theme="spotify"] nav { margin-top: 10px; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  html[data-theme="spotify"] .nav { flex: 0 0 auto; min-height: 40px; padding: 9px 13px; }
  html[data-theme="spotify"] .nav-settings { margin-top: 0; border-top: 0; padding-top: 9px; }
  html[data-theme="spotify"] .content { padding: 22px 15px 70px; background: linear-gradient(180deg, #244d3a 0, #121212 300px); }
  html[data-theme="spotify"] .content > header { position: static; margin: -22px -15px 24px; padding: 25px 15px 18px; background: transparent; backdrop-filter: none; }
  html[data-theme="spotify"] .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  html[data-theme="spotify"] .playlist { min-height: 295px; padding: 11px; }
  html[data-theme="spotify"] .playlist .actions { display: grid; grid-template-columns: 1fr; }
  html[data-theme="spotify"] .playlist .actions button { width: 100%; min-width: 0; max-width: 100%; transform: none; }
}
@media (max-width: 560px) {
  html[data-theme="spotify"] .grid { grid-template-columns: 1fr; }
  html[data-theme="spotify"] .playlist { min-height: 0; }
  html[data-theme="spotify"] .playlist-count { aspect-ratio: 16 / 8; }
}