/* Rustenburg Music page styles */
/* Scoped to avoid affecting other music pages */

body.music-page.rustenburg-music {
  background:
    radial-gradient(circle at 12% 10%, rgba(255, 255, 255, 0.18), transparent 42%),
    linear-gradient(165deg, #0f1e33 0%, #132845 48%, #1a3658 100%);
  color: #e5edf7;
}

body.music-page.rustenburg-music .navbar {
  background: linear-gradient(130deg, #122943 0%, #1b3b62 55%, #245281 100%);
  border-bottom: 3px solid #7bb4e2;
  box-shadow: 0 8px 20px rgba(8, 21, 37, 0.35);
  padding: 20px 12px 12px;
}

body.music-page.rustenburg-music .navbar h1 {
  margin: 0 0 10px;
  color: #eaf4ff;
  font-size: clamp(1.45rem, 3.7vw, 2.15rem);
  letter-spacing: 0.45px;
  text-transform: uppercase;
}

body.music-page.rustenburg-music .navbar nav {
  background: transparent;
}

body.music-page.rustenburg-music .navbar ul {
  flex-wrap: wrap;
  gap: 8px;
}

body.music-page.rustenburg-music .navbar a {
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: #f3f9ff;
  font-size: 0.88rem;
  font-weight: 600;
  transition: transform 0.16s ease, background-color 0.16s ease, border-color 0.16s ease;
}

body.music-page.rustenburg-music .navbar a:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.65);
  transform: translateY(-1px);
}

body.music-page.rustenburg-music .music-app {
  width: min(1240px, calc(100% - 24px));
  margin: 22px auto;
  display: grid;
  gap: 14px;
}

body.music-page.rustenburg-music .card {
  background: rgba(14, 29, 47, 0.82);
  border: 1px solid #2f4d6d;
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(5, 16, 28, 0.3);
  padding: 14px;
  text-align: left;
}

body.music-page.rustenburg-music h2,
body.music-page.rustenburg-music h3 {
  margin-top: 0;
  color: #d5e9fb;
}

body.music-page.rustenburg-music .helper-text {
  color: #b9cce0;
  font-size: 0.9rem;
}

body.music-page.rustenburg-music .music-main .hero {
  background: linear-gradient(120deg, rgba(18, 40, 68, 0.95), rgba(24, 48, 76, 0.95));
  border: 1px solid #36587c;
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 12px;
}

body.music-page.rustenburg-music .music-main .hero p {
  margin: 8px 0 0;
  color: #c7dbef;
}

body.music-page.rustenburg-music .filter-group,
body.music-page.rustenburg-music .chip-group,
body.music-page.rustenburg-music .transport,
body.music-page.rustenburg-music .seek-row,
body.music-page.rustenburg-music .np-right {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

body.music-page.rustenburg-music .filter-btn,
body.music-page.rustenburg-music .chip-btn,
body.music-page.rustenburg-music .icon-btn,
body.music-page.rustenburg-music .play-btn {
  border: 1px solid #4a6a8f;
  background: #214365;
  color: #edf6ff;
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 700;
  cursor: pointer;
}

body.music-page.rustenburg-music .chip-btn.active,
body.music-page.rustenburg-music .filter-btn.active,
body.music-page.rustenburg-music .play-btn {
  background: #2f5b87;
  border-color: #8bc0ec;
}

body.music-page.rustenburg-music .filter-btn:hover,
body.music-page.rustenburg-music .chip-btn:hover,
body.music-page.rustenburg-music .icon-btn:hover,
body.music-page.rustenburg-music .play-btn:hover {
  background: #2a5279;
}

body.music-page.rustenburg-music .search-input,
body.music-page.rustenburg-music .upload-form input,
body.music-page.rustenburg-music .upload-form button,
body.music-page.rustenburg-music .upload-form progress,
body.music-page.rustenburg-music #volume,
body.music-page.rustenburg-music #progress {
  width: 100%;
  box-sizing: border-box;
}

body.music-page.rustenburg-music .search-input,
body.music-page.rustenburg-music .upload-form input {
  border: 1px solid #4a6889;
  border-radius: 10px;
  background: #142c45;
  color: #eaf3fc;
  padding: 10px 11px;
}

body.music-page.rustenburg-music .search-input::placeholder,
body.music-page.rustenburg-music .upload-form input::placeholder {
  color: #a9c0d7;
}

body.music-page.rustenburg-music .upload-form {
  display: grid;
  gap: 8px;
}

body.music-page.rustenburg-music .upload-form label {
  font-weight: 600;
  color: #cde3f7;
}

body.music-page.rustenburg-music .upload-form .filter-btn {
  width: auto;
  justify-self: start;
}

body.music-page.rustenburg-music .track-list,
body.music-page.rustenburg-music .recent-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}

body.music-page.rustenburg-music .track-list li,
body.music-page.rustenburg-music .recent-list li {
  border: 1px solid #395979;
  border-radius: 10px;
  background: linear-gradient(145deg, #16304b 0%, #11273f 100%);
  padding: 10px 11px;
}

body.music-page.rustenburg-music .list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 10px 0;
}

body.music-page.rustenburg-music .pill {
  border: 1px solid #6b93b6;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.82rem;
  color: #dbefff;
  background: #1c3e61;
}

body.music-page.rustenburg-music .now-playing-bar {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
  background: rgba(11, 25, 40, 0.95);
  border-top: 1px solid #2f4d6d;
  padding: 12px;
  backdrop-filter: blur(5px);
}

body.music-page.rustenburg-music .np-left,
body.music-page.rustenburg-music .np-center,
body.music-page.rustenburg-music .np-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

body.music-page.rustenburg-music .np-left {
  justify-content: flex-start;
}

body.music-page.rustenburg-music .np-center {
  flex-direction: column;
  align-items: stretch;
}

body.music-page.rustenburg-music .np-right {
  justify-content: flex-start;
}

body.music-page.rustenburg-music .np-cover {
  width: 58px;
  height: 58px;
  border-radius: 8px;
  border: 1px solid #4a6a8f;
  object-fit: cover;
}

body.music-page.rustenburg-music .np-title {
  font-weight: 700;
  color: #eaf4ff;
}

body.music-page.rustenburg-music .np-artist,
body.music-page.rustenburg-music .status-msg,
body.music-page.rustenburg-music .empty-state {
  color: #b7ccdf;
  font-size: 0.9rem;
}

body.music-page.rustenburg-music #progress,
body.music-page.rustenburg-music #volume {
  accent-color: #7fb6e2;
}

body.music-page.rustenburg-music .icon-btn,
body.music-page.rustenburg-music #downloadLink {
  text-decoration: none;
}

@media (min-width: 860px) {
  body.music-page.rustenburg-music .music-app {
    grid-template-columns: 280px 1fr 260px;
    align-items: start;
  }

  body.music-page.rustenburg-music .now-playing-bar {
    grid-template-columns: 280px 1fr 320px;
    align-items: center;
  }

  body.music-page.rustenburg-music .np-right {
    justify-content: flex-end;
  }
}