/* Shared feature layer. Each visual theme adds its own player skin. */
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.nav-icon { display: none; }
#app { --sidebar-width: 235px; }
#app > aside { position: fixed; z-index: 70; inset: 0 auto 0 0; width: var(--sidebar-width); height: 100vh; height: 100dvh; overflow-x: hidden; overflow-y: auto; }
#app > .content { grid-column: 2; }

.playlist-count { position: relative; }
.playlist-play { width: 40px; height: 40px; min-width: 40px; display: grid; place-items: center; margin-left: auto; padding: 0; border-radius: 50%; box-shadow: 0 7px 18px #0006; }
.playlist-play svg { width: 19px; height: 19px; fill: currentColor; }
.playlist-play.playing { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent), 0 7px 18px #0006; }
.playlist-count.has-cover { min-height: 180px; display: grid; place-items: end start; align-content: end; overflow: hidden; padding: 12px; border-radius: 10px; background: var(--panel2); isolation: isolate; }
.playlist-cover-image { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--panel2); }
.playlist-count.has-cover::before { content: ""; position: absolute; z-index: 1; inset: 42% 0 0; background: linear-gradient(transparent, #000b); pointer-events: none; }
.playlist-count.has-cover .count { position: relative; z-index: 2; color: #fff; font-size: 15px; text-shadow: 0 2px 8px #000; }
.playlist-count.has-cover .count-label { position: relative; z-index: 2; color: #ddd; text-shadow: 0 2px 8px #000; }
.playlist-count.has-cover .playlist-play { position: absolute; z-index: 3; right: 12px; bottom: 12px; }

.playlist-cover-preview { display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel2); }
.playlist-cover-preview img { width: 76px; height: 76px; flex: 0 0 76px; border-radius: 7px; object-fit: cover; background: var(--panel2); }
.playlist-cover-preview button { width: auto; }

.theme-preview-spotify { border-radius: 8px; background: #121212; }
.theme-preview-spotify i:first-child { border-radius: 3px; background: #63e6a4; }
.theme-preview-spotify i:nth-child(2) { border-radius: 3px; background: #050505; }
.theme-preview-spotify i:nth-child(3), .theme-preview-spotify i:nth-child(4) { border-radius: 5px; background: #242424; }

.web-player-bar { --player-bg: #0c1117f5; --player-control: var(--text); --player-control-text: var(--bg); position: fixed; z-index: 90; left: 0; right: 0; bottom: 0; min-height: 96px; display: grid; grid-template-columns: minmax(220px, 1fr) minmax(320px, 640px) minmax(220px, 1fr); grid-template-rows: 42px 22px; grid-template-areas: "track controls actions" "track progress actions"; align-items: center; gap: 0 24px; padding: 14px 20px; border-top: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); background: var(--player-bg); box-shadow: 0 -18px 50px #0008; backdrop-filter: blur(18px); animation: player-rise .2s ease-out; }
.web-player-bar[hidden] { display: none; }
.web-player-cover { position: relative; grid-area: track; width: 68px; height: 68px; overflow: hidden; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 9px; background: linear-gradient(145deg, var(--accent), var(--accent2)); box-shadow: 0 8px 22px #0008; }
.web-player-cover img, .player-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.web-player-cover span { color: #fff; font-size: 13px; font-weight: 950; }
.web-player-copy { grid-area: track; min-width: 0; display: grid; align-content: center; gap: 2px; margin-left: 82px; }
.web-player-copy small { overflow: hidden; color: var(--accent); font-size: 9px; font-weight: 900; letter-spacing: 1.3px; text-transform: uppercase; text-overflow: ellipsis; white-space: nowrap; }
.web-player-copy strong, .web-player-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.web-player-copy strong { font-size: 14px; line-height: 1.25; }
.web-player-copy span { color: var(--muted); font-size: 11px; }
.web-player-controls { grid-area: controls; width: 100%; display: flex; justify-content: center; align-items: center; gap: 16px; }
.web-player-controls button { padding: 0; border: 0; background: transparent; color: var(--muted); box-shadow: none; transform: none; }
.web-player-controls button:hover { color: var(--text); filter: none; transform: scale(1.08); }
.web-player-controls button:disabled { opacity: .35; transform: none; }
.web-player-controls button svg, .web-player-actions button svg { width: 20px; height: 20px; fill: currentColor; }
.web-player-controls .web-player-toggle { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--player-control); color: var(--player-control-text); }
.web-player-controls .web-player-toggle svg { width: 18px; height: 18px; }
.web-player-skip { width: 30px; height: 30px; display: grid; place-items: center; line-height: 1; }
.web-player-progress { grid-area: progress; justify-self: center; width: min(560px, 100%); display: grid; grid-template-columns: 42px minmax(170px, 1fr) 42px; align-items: center; gap: 9px; color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.web-player-progress > span:first-child { text-align: right; }
.web-player-progress input, .web-player-actions input { --range-progress: 0%; height: 4px; padding: 0; border: 0; border-radius: 99px; appearance: none; background: linear-gradient(90deg, var(--accent) var(--range-progress), color-mix(in srgb, var(--muted) 42%, transparent) var(--range-progress)); cursor: pointer; }
.web-player-progress input::-webkit-slider-thumb, .web-player-actions input::-webkit-slider-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; appearance: none; background: var(--text); opacity: 0; transition: opacity .12s ease; }
.web-player-progress input:hover::-webkit-slider-thumb, .web-player-progress input:focus-visible::-webkit-slider-thumb, .web-player-actions input:hover::-webkit-slider-thumb, .web-player-actions input:focus-visible::-webkit-slider-thumb { opacity: 1; }
.web-player-progress input::-moz-range-thumb, .web-player-actions input::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: var(--text); }
.web-player-progress input::-moz-range-track, .web-player-actions input::-moz-range-track { height: 4px; border-radius: 99px; background: color-mix(in srgb, var(--muted) 42%, transparent); }
.web-player-progress input::-moz-range-progress, .web-player-actions input::-moz-range-progress { height: 4px; border-radius: 99px; background: var(--accent); }
.web-player-actions { grid-area: actions; display: flex; justify-content: flex-end; align-items: center; gap: 12px; }
.web-player-volume { width: min(205px, 64%); display: flex; align-items: center; gap: 7px; }
.web-player-volume label { width: 100%; display: flex; }
.web-player-volume output { min-width: 34px; color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; text-align: right; }
.web-player-actions a { color: var(--muted); font-size: 11px; font-weight: 750; text-decoration: none; }
.web-player-actions a:hover { color: var(--text); }
.web-player-actions button { width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 0; background: transparent; color: var(--muted); box-shadow: none; font-size: 22px; transform: none; }
.web-player-actions button:hover { color: var(--text); filter: none; transform: none; }
.web-player-bar audio { display: none; }
.web-player-active .feedback-button { bottom: 112px; }
.web-player-active .content { padding-bottom: 150px; }
@keyframes player-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
.player-art { position: relative; overflow: hidden; }
.queue-item { width: 100%; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; text-align: left; }
.queue-item strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 1400px) {
  #app { --sidebar-width: 220px; }
}
@media (max-width: 1000px) {
  #app { --sidebar-width: 190px; }
  .web-player-bar { grid-template-columns: minmax(180px, 1fr) minmax(250px, 1.25fr) minmax(155px, 1fr); grid-template-areas: "track controls actions" "track progress actions"; gap: 0 14px; }
  .web-player-actions a { display: none; }
  .web-player-volume { width: min(155px, 100%); }
}
@media (max-width: 750px) {
  #app { --sidebar-width: 100%; }
  #app > aside { position: fixed; top: 0; width: 100%; height: 100px; max-height: 100px; display: block; padding: 50px 10px 10px; overflow: visible; }
  #app > aside .logo, #app > aside .profile { display: none; }
  #app > aside nav { display: flex; flex-wrap: nowrap; gap: 6px; margin: 0; overflow-x: auto; scrollbar-width: none; }
  #app > aside nav::-webkit-scrollbar { display: none; }
  #app > aside .nav { flex: 0 0 auto; min-height: 40px; padding: 9px 13px; }
  #app > .content { grid-column: auto; margin-top: 100px; }
  .web-player-bar { min-height: 156px; grid-template-columns: 52px minmax(0, 1fr) auto; grid-template-rows: 52px 38px 24px; grid-template-areas: "cover track track" "controls controls actions" "progress progress progress"; gap: 7px 10px; padding: 10px 13px; }
  .web-player-cover { grid-area: cover; width: 52px; height: 52px; }
  .web-player-copy { grid-area: track; margin-left: 0; }
  .web-player-controls { grid-area: controls; justify-content: flex-start; gap: 10px; }
  .web-player-progress { grid-area: progress; grid-template-columns: 34px minmax(0, 1fr) 34px; }
  .web-player-actions { grid-area: actions; position: static; gap: 7px; }
  .web-player-volume { width: min(155px, 100%); }
  .web-player-actions #web-player-close { width: 24px; height: 24px; font-size: 17px; }
  .web-player-active .feedback-button { bottom: 170px; }
  .web-player-active .content { padding-bottom: 195px; }
  .playlist-count.has-cover { min-height: 150px; }
}
@media (prefers-reduced-motion: reduce) { .web-player-bar { animation: none; } }