/* A deep green accent, soft dark surfaces, and compact music controls. */
:root {
  --bg: #101411;
  --panel: #181c19;
  --raised: #242a26;
  --accent: #168747;
  --accent-hover: #1a9a51;
  --accent-text: #6cdb9a;
  --accent-surface: #193525;
}
.topbar { background: #101411; }
.sidebar { background: #101411; }
.main-content { min-height: 100dvh; background: linear-gradient(180deg, #173324 0, #141b17 270px, #121512 580px); }
.search input { border-radius: 24px 0 0 24px; background: #202722; }
.search button { border-radius: 0 24px 24px 0; background: #202722; }
.search:focus-within { border-radius: 24px; outline: 1px solid var(--accent-text); }
.nav-link { border-radius: 12px; }
.nav-link.active { background: var(--accent-surface); }
.nav-link.active svg, .nav-link.active .nav-count { color: var(--accent-text); }
.chip, .secondary, .library-tools select { border-radius: 24px; }
.chip.selected { background: var(--accent-surface); color: #d8f7e4; border: 1px solid #2b6844; }
.primary { background: var(--accent); color: #fff; border-radius: 26px; }
.primary:hover { background: var(--accent-hover); }
.secondary:hover { background: #27362c; border-color: #477b59; }
.music-card, .artist-card { padding: 12px; border-radius: 12px; background: #ffffff03; transition: background .18s; }
.music-card:hover, .artist-card:hover { background: #ffffff09; }
.album-card .thumbnail-wrap { border-radius: 8px; box-shadow: 0 8px 24px #0004; }
.artist-card .thumbnail-wrap { border-radius: 50%; }
.album-card .card-title { font-weight: 700; }
.music-card .card-actions { top: 20px; right: 20px; }
.hover-play { place-items: end; padding: 14px; background: linear-gradient(transparent 60%, #0004); }
.hover-play span { width: 46px; height: 46px; background: var(--accent); box-shadow: 0 8px 22px #0005; }
.song-list tr:hover { background: #ffffff07; }
.song-list tr.playing, .song-list tr.playing .song-title, .starred,
.player-controls .icon-button[aria-pressed=true], .queue-row.current .text-button,
.queue-tools button[aria-pressed=true] { color: var(--accent-text) !important; }
.player-bar { background: #111713; border-top-color: #294232; }
.player-play { background: var(--accent); color: #fff; transition: transform .15s, background .15s; }
.player-play:hover { background: var(--accent-hover); transform: scale(1.06); }
.text-button:hover, .artist-link:hover { color: var(--accent-text); }
input[type=range] { accent-color: #1db954; }
.upload-picker.drag-over { background: #193525; }
.danger, .primary.delete-action { background: #bd3845; }
.danger:hover, .primary.delete-action:hover { background: #d04452; }
@media(max-width:560px) {
  .music-card, .artist-card { padding: 8px; }
  .music-card .card-actions { top: 14px; right: 14px; }
  .hover-play { padding: 10px; }
  .hover-play span { width: 38px; height: 38px; }
}