:root {
  --bg: #0f1114;
  --panel: #15181d;
  --panel-2: #1b1f25;
  --panel-3: #232831;
  --text: #eef1f4;
  --muted: #8e98a4;
  --soft: #c2c9d1;
  --accent: #ff18b8;
  --accent-2: #8f5bff;
  --warning: #ffd166;
  --line: rgba(222, 228, 235, 0.12);
  --shadow: 0 16px 44px rgba(0, 0, 0, 0.24);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

:root[data-theme="light"] {
  --bg: #edf2f7;
  --panel: #f9fbfd;
  --panel-2: #e4ebf3;
  --panel-3: #d9e2ec;
  --text: #16202d;
  --muted: #5e6d7d;
  --soft: #344456;
  --line: rgba(27, 38, 50, 0.14);
  --shadow: 0 16px 44px rgba(39, 53, 68, 0.12);
}

:root[data-theme="dim"] {
  --bg: #111522;
  --panel: #181e2d;
  --panel-2: #20283a;
  --panel-3: #293349;
  --text: #edf2ff;
  --muted: #a3afc4;
  --soft: #cbd5e7;
  --accent: #a678ff;
  --accent-2: #71c8ff;
  --line: rgba(202, 216, 240, 0.14);
  --shadow: 0 16px 44px rgba(0, 0, 0, 0.3);
}

:root[data-theme="warm"] {
  --bg: #f7f1e8;
  --panel: #fffcf7;
  --panel-2: #f2e9dc;
  --panel-3: #e7d9c8;
  --text: #30261f;
  --muted: #75675b;
  --soft: #4b3d32;
  --accent: #d6428d;
  --accent-2: #7561d4;
  --line: rgba(64, 48, 35, 0.15);
  --shadow: 0 16px 44px rgba(84, 57, 35, 0.13);
}

[hidden] {
  display: none !important;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
  text-decoration: none;
  touch-action: manipulation;
}

.app-shell {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  min-height: 100vh;
  padding-bottom: 92px;
}

.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  width: 260px;
  height: auto;
  min-height: 0;
  padding: 24px 18px;
  border-right: 1px solid var(--line);
  background: #0a0c0f;
  overflow-y: auto;
}

:root[data-theme="light"] .sidebar {
  background: #f9fbfd;
}

:root[data-theme="warm"] .sidebar { background: #fffcf7; }
:root[data-theme="dim"] .sidebar { background: #111522; }

.brand {
  display: flex;
  align-items: center;
  min-height: 92px;
  justify-content: center;
  margin-bottom: 22px;
}

.brand-logo {
  display: block;
  width: min(252px, 100%);
  height: 104px;
  object-fit: contain;
  object-position: center;
}

.nav-list,
.playlist-panel {
  display: grid;
  gap: 8px;
}

.nav-item,
.compact-action {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  text-align: left;
}

.nav-item:hover,
.nav-item.active,
.compact-action:hover {
  background: var(--panel-2);
  color: var(--text);
}

.icon {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  text-align: center;
}

.lucide {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  stroke: currentColor;
}

.icon.lucide {
  width: 21px;
  height: 21px;
}

.icon-btn-text,
.icon-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.icon-inline {
  vertical-align: middle;
}

.playlist-panel {
  margin-top: 32px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.panel-title {
  color: var(--soft);
  font-weight: 800;
}

.playlist-panel a {
  padding: 8px 10px;
  color: var(--muted);
}

.playlist-panel a:hover {
  color: var(--text);
}

.main {
  min-width: 0;
  grid-column: 2;
  padding: 18px 28px 36px;
  background: var(--bg);
}

.topbar {
  position: sticky;
  z-index: 3;
  top: 0;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 12px 0 18px;
  border-bottom: 1px solid rgba(222, 228, 235, 0.06);
  background: rgba(15, 17, 20, 0.96);
  backdrop-filter: blur(10px);
}

:root[data-theme="light"] .topbar {
  background: rgba(237, 242, 247, 0.94);
}

:root[data-theme="warm"] .topbar { background: rgba(247, 241, 232, 0.94); }
:root[data-theme="dim"] .topbar { background: rgba(17, 21, 34, 0.95); }

.topbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}

.search-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.search-wrap input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
}

.primary-btn,
.ghost-btn,
.text-btn,
.avatar-btn,
.topbar-link,
.chip,
.performer button,
.player button {
  border: 0;
  border-radius: 10px;
  color: var(--text);
}

.primary-btn {
  min-height: 44px;
  padding: 0 18px;
  background: var(--accent);
  color: #160414;
  font-weight: 800;
}

.primary-btn:hover {
  filter: brightness(1.08);
}

.topbar-link {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--soft);
  background: var(--panel);
  font-weight: 800;
}

.topbar-link:hover {
  border-color: rgba(255, 24, 184, 0.48);
  color: var(--text);
}

.primary-btn.large,
.ghost-btn {
  min-height: 50px;
  padding: 0 22px;
}

.ghost-btn {
  border: 1px solid var(--line);
  background: var(--panel-2);
}

.text-btn {
  background: transparent;
  color: var(--accent);
  font-weight: 700;
}

.avatar-btn {
  width: 44px;
  height: 44px;
  overflow: hidden;
  background: var(--panel-3);
  font-weight: 800;
}

.theme-toggle {
  min-width: 44px;
  justify-content: center;
}

:root[data-theme="light"] .theme-toggle {
  background: #fff8df;
  border-color: rgba(202, 151, 0, 0.28);
  color: #8a6500;
}

#avatarBtn[data-route="register"] {
  width: auto;
  min-width: 44px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  white-space: nowrap;
  overflow: hidden;
}

#avatarBtn[data-route="register"] .topbar-link-label {
  display: inline;
}

.inbox-btn {
  min-width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: var(--panel-3);
  color: var(--text);
  font-weight: 900;
}

.inbox-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.inbox-btn .lucide {
  width: 17px;
  height: 17px;
}

.inbox-btn.has-unread {
  background: var(--accent-2);
  color: #160307;
}

.view {
  display: none;
}

.active-view {
  display: block;
}

.featured {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 28px;
  align-items: center;
  min-height: 330px;
  margin-top: 10px;
  padding: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: none;
}

.home-welcome {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1.08fr);
  gap: clamp(24px, 4vw, 54px);
  align-items: center;
  min-height: 410px;
  margin-top: 10px;
  padding: clamp(28px, 4vw, 52px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background:
    radial-gradient(circle at 12% 10%, rgba(255, 24, 184, 0.2), transparent 34%),
    radial-gradient(circle at 88% 100%, rgba(143, 91, 255, 0.17), transparent 38%),
    var(--panel);
}

/* Главная — это маршрут: сначала продолжение и личная коллекция, затем
   открытия из каталога и сообщества. Порядок работает без дублирования тех же
   подборок в разных местах страницы. */
#view-home.active-view {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
#view-home.active-view > .content-section,
#view-home.active-view > .home-welcome { margin: 0; }
#view-home .home-welcome { order: 1; }
#view-home .home-start-grid { order: 2; }
#view-home #homePlaylistsSection { order: 3; }
#view-home #homeAutoCollectionsSection { order: 4; }
#view-home .home-weekly-section { order: 5; }
#view-home .home-feed-grid { order: 6; }
#view-home #homeRecommendedSection { order: 7; }
#view-home #homePublicPlaylistsSection { order: 8; }
#view-home .home-shortcuts { order: 9; }

.home-start-grid { align-items: stretch; }
.home-playlists-section { display: grid; gap: 14px; }
.home-playlists-section > .section-heading + .home-playlists { margin-top: -4px; }
.home-auto-collection { height: 100%; }

.home-welcome::after {
  position: absolute;
  right: -120px;
  bottom: -170px;
  width: 390px;
  height: 390px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.home-welcome-copy,
.home-spotlight {
  position: relative;
  z-index: 1;
}

.home-welcome-copy h1 {
  max-width: 680px;
  margin: 0;
  font-size: clamp(38px, 5vw, 72px);
  line-height: 0.98;
  letter-spacing: -0.045em;
}

.home-welcome-copy > p:not(.eyebrow) {
  max-width: 610px;
  margin: 18px 0 0;
  color: var(--soft);
  font-size: 1.04rem;
  line-height: 1.65;
}

.home-catalog-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 24px;
}

.home-catalog-stats span,
.home-spotlight-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  color: var(--muted);
  font-size: 0.8rem;
}

.home-catalog-stats strong {
  margin-right: 5px;
  color: var(--text);
}

.home-spotlight {
  display: grid;
  grid-template-columns: minmax(170px, 0.72fr) minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  min-height: 286px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  background: rgba(7, 9, 12, 0.56);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

:root[data-theme="light"] .home-spotlight {
  background: rgba(255, 255, 255, 0.72);
}

:root[data-theme="warm"] .home-spotlight {
  background: rgba(255, 252, 247, 0.78);
}

.home-spotlight-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 14px;
  background: var(--panel-3);
}

.home-spotlight-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-spotlight-copy {
  min-width: 0;
}

.home-spotlight-copy h2,
.home-spotlight-copy p {
  margin: 0;
}

.home-spotlight-copy h2 {
  margin-bottom: 9px;
  font-size: clamp(23px, 2.3vw, 36px);
  line-height: 1.05;
}

.home-spotlight-copy > p:not(.eyebrow) {
  color: var(--muted);
  line-height: 1.5;
}

.home-spotlight-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 18px;
}

.home-spotlight .hero-actions {
  margin-top: 20px;
}

.home-spotlight-empty {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 12px;
}

.home-spotlight-empty > span {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 15px;
  background: rgba(255, 24, 184, 0.14);
  color: var(--accent);
}

.home-spotlight-empty h2,
.home-spotlight-empty p {
  margin: 0;
}

.home-spotlight-empty h2 {
  margin-bottom: 7px;
  font-size: 1.35rem;
}

.home-spotlight-empty p:last-child {
  color: var(--muted);
  line-height: 1.5;
}

.home-start-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

.home-playlists {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 208px));
  gap: 14px;
}

.home-playlist-card {
  display: block;
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.home-playlist-card:hover, .home-playlist-card:focus-visible { border-color: rgba(255, 24, 184, .45); background: var(--panel-2); transform: translateY(-2px); outline: none; }
.home-playlist-cover { position: relative; display: grid; width: 100%; aspect-ratio: 1; overflow: hidden; place-items: center; border-radius: 7px; background: var(--panel-3); color: var(--soft); font-size: 1.4rem; font-weight: 900; }
.home-playlist-cover img { width: 100%; height: 100%; object-fit: cover; }
.home-playlist-copy { min-width: 0; padding: 11px 3px 3px; }
.home-playlist-copy strong, .home-playlist-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-playlist-copy strong { font-size: .94rem; }
.home-playlist-copy small { margin-top: 4px; color: var(--muted); font-size: .78rem; }
.home-playlist-tags { display: flex; overflow: hidden; gap: 5px; margin-top: 9px; }
.home-playlist-tags span { overflow: hidden; max-width: 100%; padding: 3px 7px; border-radius: 999px; background: var(--panel-3); color: var(--soft); font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.home-playlist-play { position: absolute; right: 10px; bottom: 10px; display: grid; width: 46px; height: 46px; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--accent); color: #160615; box-shadow: 0 8px 20px rgba(255, 24, 184, .34); cursor: pointer; opacity: 0; transform: translateY(6px) scale(.94); transition: opacity .18s ease, transform .18s ease, background .18s ease; }
.home-playlist-play:hover { background: var(--accent-strong); }
.home-playlist-card:hover .home-playlist-play, .home-playlist-card:focus-within .home-playlist-play { opacity: 1; transform: translateY(0) scale(1); }
.home-playlist-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 9px; }
.home-playlist-footer .home-playlist-tags { flex: 1 1 auto; margin-top: 0; }
.home-playlist-like { display: grid; width: 32px; height: 32px; flex: 0 0 auto; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-3); color: var(--text); cursor: pointer; transition: transform .16s ease, color .16s ease, border-color .16s ease, background .16s ease; }
.home-playlist-like:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--accent) 58%, var(--line)); background: color-mix(in srgb, var(--accent) 10%, var(--panel-3)); color: var(--accent); }
.home-playlist-like.liked { color: var(--accent); }
.home-playlist-like.liked .lucide { fill: currentColor; }

.home-start-main,
.home-recommendation-main,
.home-shortcuts {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
}

.home-start-main,
.home-recommendation-main {
  display: grid;
  grid-template-rows: 70px minmax(150px, 1fr);
}

.home-start-main > .section-heading,
.home-recommendation-main > .section-heading {
  margin: 0;
}

.home-start-main .continue-card,
.home-recommendation-main .continue-card {
  height: 100%;
  box-sizing: border-box;
}

.home-start-main .continue-card,
.home-recommendation-main .continue-card {
  align-items: start;
}

.continue-card {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  min-height: 150px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025));
}

.continue-cover {
  position: relative;
  width: 112px;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 12px;
  background: var(--panel-3);
}

.continue-cover img {
  position: static;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.continue-copy h3,
.continue-copy p {
  margin: 0;
}

.continue-copy h3 {
  margin-bottom: 6px;
  font-size: 1.25rem;
}

.continue-track-title {
  display: inline-block;
  width: auto;
  text-align: left;
}

.continue-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.continue-meta-label,
.continue-meta-separator {
  color: var(--muted);
}

.continue-copy > p:not(.eyebrow) {
  color: var(--muted);
}

.home-continue-empty,
.home-recommendation-empty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 118px;
  padding: 18px;
  border: 1px dashed var(--line);
  border-radius: 12px;
}

.home-continue-empty strong,
.home-recommendation-empty strong {
  display: block;
  margin-bottom: 6px;
}

.home-continue-empty p,
.home-recommendation-empty p {
  max-width: 680px;
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.home-shortcut-list {
  display: grid;
  gap: 8px;
}

.home-shortcut-list button {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 11px;
  width: 100%;
  min-height: 62px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: var(--panel-2);
  color: var(--text);
  text-align: left;
}

.home-shortcut-list button:hover {
  border-color: rgba(255, 24, 184, 0.34);
  background: var(--panel-3);
}

.home-shortcut-list button .lucide {
  grid-row: 1 / 3;
  align-self: center;
  width: 20px;
  height: 20px;
  color: var(--accent);
}

.home-shortcut-list button strong {
  align-self: end;
}

.home-shortcut-list button small {
  align-self: start;
  color: var(--muted);
}

.home-genre-heading {
  margin: 20px 0 10px;
}

.home-genre-heading h3 {
  margin: 0;
  font-size: 0.92rem;
}

.quick-genre-list {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.quick-genre {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,0.045);
  color: var(--soft);
  cursor: pointer;
}

.quick-genre:hover {
  border-color: rgba(255,24,184,0.55);
  background: rgba(255,24,184,0.12);
  color: var(--text);
}

.quick-genre strong {
  color: var(--accent);
  font-size: 0.78rem;
}

.home-feed-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
  align-items: start;
}

.home-feed-grid > div {
  min-width: 0;
}

.home-auto-collections-section {
  display: grid;
  gap: 16px;
}

.home-auto-collections {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.home-auto-collection {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
}

.home-auto-collection .section-heading {
  align-items: start;
  margin-bottom: 12px;
}

.home-auto-collection .section-heading h3,
.home-auto-collection .section-heading p { margin: 0; }
.home-auto-collection .section-heading p { margin-top: 5px; color: var(--muted); font-size: .82rem; line-height: 1.35; }
.home-auto-collection .track-row { grid-template-columns: 40px minmax(0, 1fr) auto; min-height: 58px; padding: 7px; }
.home-auto-collection .track-row .row-actions { display: flex; gap: 5px; justify-self: end; }
.home-auto-collection .track-row .genre,
.home-auto-collection .track-row .duration { display: none; }
.home-auto-collection .row-play { width: 40px; height: 40px; }
.home-auto-collection .row-like { width: 30px; height: 30px; border-radius: 8px; }

.home-compact-empty {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 92px;
  padding: 16px 18px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.018);
}

.home-compact-empty > span {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 10px;
  background: rgba(143,91,255,0.18);
  color: var(--accent-2);
}

.home-compact-empty strong {
  display: block;
  margin-bottom: 4px;
}

.home-compact-empty p {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

#homeWeekly > .home-compact-empty {
  grid-column: 1 / -1;
}

#homeRecommended {
  padding: 4px 0;
}

.discover-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: end;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}

.discover-search-field {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-2);
}

.discover-search-field input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
}

.catalog-controls {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}

.catalog-browser-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}

.catalog-browser-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  transition: background .16s ease, color .16s ease, transform .16s ease;
}

.catalog-browser-tab:hover { color: var(--soft); background: var(--panel-2); }
.catalog-browser-tab.active { border-color: color-mix(in srgb, var(--accent) 38%, var(--line)); background: color-mix(in srgb, var(--accent) 13%, var(--panel-2)); color: var(--text); }
.catalog-browser-tab .lucide { width: 17px; height: 17px; }
.catalog-simple-filter-grid { grid-template-columns: repeat(2, minmax(0, 260px)); }
.catalog-author-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 12px; }
.catalog-author-card { display: grid; grid-template-columns: 68px minmax(0, 1fr) auto; align-items: center; min-width: 0; min-height: 96px; gap: 13px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.catalog-author-card:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: var(--panel-2); }
.catalog-author-avatar { display: grid; overflow: hidden; width: 68px; height: 68px; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--panel-3); color: var(--soft); font-weight: 900; cursor: pointer; }
.catalog-author-avatar img { width: 100%; height: 100%; object-fit: cover; }
.catalog-author-copy { min-width: 0; }
.catalog-author-copy .link-title { display: block; overflow: hidden; max-width: 100%; padding: 0; color: var(--text); font-size: 1rem; font-weight: 900; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.catalog-author-copy p, .catalog-author-copy small { display: block; overflow: hidden; margin: 5px 0 0; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.catalog-author-copy small { font-size: .76rem; }
.catalog-author-open { flex: 0 0 auto; min-height: 38px; padding: 0 10px; }

.catalog-search-wrap {
  position: relative;
}

.catalog-suggestions {
  position: absolute;
  z-index: 40;
  top: calc(100% + 8px);
  right: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
  max-height: min(520px, 65vh);
  overflow-y: auto;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
}

.catalog-suggestions[hidden] {
  display: none;
}

.catalog-suggestions section {
  display: grid;
  align-content: start;
  gap: 4px;
}

.catalog-suggestions section > strong {
  padding: 6px 9px;
  color: var(--muted);
  font-size: 0.75rem;
  text-transform: uppercase;
}

.catalog-suggestions button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 38px;
  padding: 8px 9px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  text-align: left;
}

.catalog-suggestions button:hover {
  background: var(--panel-2);
}

.catalog-suggestions button span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.catalog-suggestions button small {
  color: var(--muted);
}

.catalog-filter-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.catalog-filter-grid .sort-control,
.catalog-filter-grid select,
.catalog-filter-grid input {
  width: 100%;
}

.catalog-filter-grid input {
  min-height: 42px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  outline: 0;
  background: var(--panel-2);
  color: var(--text);
}

.catalog-filter-grid input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 24, 184, .1); }

.catalog-filter-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.catalog-active-filters,
.catalog-tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.catalog-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid rgba(255, 24, 184, 0.3);
  border-radius: 999px;
  background: rgba(255, 24, 184, 0.1);
  color: var(--text);
  font: inherit;
  font-size: 0.82rem;
}

.catalog-filter-chip .lucide {
  width: 14px;
  height: 14px;
}

.catalog-tag-cloud .chip strong {
  color: var(--muted);
  font-size: 0.75rem;
}

.result-count {
  color: var(--muted);
  font-size: 0.85rem;
}

.discover-results .track-card {
  min-width: 0;
}

.discover-card.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(255,24,184,0.2);
}

.eyebrow {
  margin: 0 0 10px;
  color: var(--soft);
  font-weight: 900;
  text-transform: uppercase;
}

.featured h1,
.page-title h1 {
  margin: 0;
  max-width: 760px;
  font-size: clamp(34px, 6vw, 66px);
  line-height: 1.02;
}

.featured p,
.page-title p,
.performer p,
.library-card p,
.now-playing p {
  color: var(--muted);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.hero-art {
  position: relative;
  display: grid;
  min-height: 260px;
  place-items: center;
}

.hero-logo-plate {
  display: grid;
  width: min(100%, 360px);
  aspect-ratio: 1.9;
  place-items: center;
  border: 1px solid rgba(255, 24, 184, 0.32);
  background: #0d0a12;
  box-shadow: 0 0 0 10px rgba(255, 24, 184, 0.045), 0 18px 42px rgba(0, 0, 0, 0.3);
  transform: rotate(-2deg);
}

.hero-logo-plate img {
  display: block;
  width: 94%;
  height: 94%;
  object-fit: contain;
}

.content-section {
  margin-top: 34px;
}

.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.section-heading h2,
.page-title h1 {
  margin: 0;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
  gap: 16px;
}

.track-card,
.library-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.track-card {
  display: flex;
  flex-direction: column;
  padding: 14px;
}

.track-card .link-title {
  margin-bottom: 4px;
  font-size: 16px;
}

.track-card:hover,
.library-card:hover {
  border-color: rgba(222, 228, 235, 0.24);
  background: var(--panel-2);
}

.library-card-action {
  cursor: pointer;
  width: 100%;
  padding: 18px;
  color: inherit;
  text-align: left;
  font: inherit;
}

.library-card-action:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.cover,
.mini-cover {
  border-radius: 8px;
  border: 1px solid rgba(222, 228, 235, 0.12);
  background: linear-gradient(135deg, #222832, #414b58);
}

.cover {
  position: relative;
  aspect-ratio: 1;
  margin-bottom: 12px;
  overflow: hidden;
}

.cover-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cover::after,
.mini-cover::after {
  content: "";
  position: absolute;
  inset: 24%;
  border: 8px solid rgba(222, 228, 235, 0.12);
  border-radius: 999px;
  pointer-events: none;
}

/* The mini player always shows the actual cover or a simple fallback icon. */
.mini-cover::after { display: none; }

/* Decorative placeholder only: a real cover must remain unobstructed. */
.cover:has(.cover-image)::after,
.mini-cover:has(.cover-image)::after,
.detail-cover:has(.cover-image)::after {
  display: none;
}

.cover button {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: #0d1117;
  font-weight: 900;
}

.track-card h3 {
  margin: 0 0 4px;
  font-size: 16px;
}

.track-card p,
.track-meta {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.tag-line {
  margin-top: 8px !important;
  color: var(--soft) !important;
}

.track-card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
}

.track-card-actions .ghost-btn {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0;
  justify-content: center;
}

.track-card-actions .ghost-btn.liked,
.hero-actions .ghost-btn.liked {
  border-color: color-mix(in srgb, var(--accent) 62%, var(--line));
  color: var(--accent);
}

.track-card-actions .ghost-btn.liked .lucide,
.hero-actions .ghost-btn.liked .lucide { fill: currentColor; }

.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.track-list,
.track-table,
.chart-list {
  display: grid;
  gap: 8px;
}

.chart-row {
  display: grid;
  grid-template-columns: 34px 46px minmax(0, 1fr) 42px;
  gap: 12px;
  align-items: center;
  min-height: 58px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}

.chart-row > strong {
  grid-column: 1;
}

.chart-row > .row-play {
  grid-column: 2;
  grid-row: 1;
}

.chart-row > div {
  grid-column: 3;
  grid-row: 1;
}

.chart-row > .queue-add {
  grid-column: 4;
  grid-row: 1;
}

.chart-row strong {
  color: var(--accent);
  font-size: 18px;
}

.chart-row span {
  display: block;
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.track-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 90px 84px 138px;
  gap: 12px;
  align-items: center;
  min-height: 64px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}

.track-row:hover {
  background: rgba(255, 255, 255, 0.08);
}

.track-row > div:not(.row-actions) {
  min-width: 0;
  overflow: hidden;
}

.track-row .row-title {
  display: block;
  max-width: 100%;
}

.track-row > div:not(.row-actions) > span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chart-track-row {
  grid-template-columns: 34px 46px minmax(0, 1fr) auto;
}

.chart-rank-wrap {
  display: grid;
  align-self: stretch;
  place-content: center;
  justify-items: center;
  min-width: 34px;
  padding-right: 8px;
  border-right: 1px solid var(--line);
}

.chart-track-row .row-actions {
  justify-self: end;
}

.chart-rank {
  color: var(--accent);
  font-size: 18px;
  text-align: center;
}

.chart-movement { display: inline-flex; align-items: center; justify-content: center; gap: 1px; min-height: 14px; margin-top: 2px; font-size: .58rem; font-weight: 900; line-height: 1; }
.chart-movement .lucide { width: 11px; height: 11px; }
.chart-movement.is-up, .chart-legend .is-up { color: #4fd1a5; }
.chart-movement.is-down, .chart-legend .is-down { color: var(--danger, #ff6b83); }
.chart-movement.is-steady, .chart-legend .is-steady { color: var(--muted); }
.chart-movement.is-new, .chart-legend .is-new { color: var(--accent-2); }
.chart-page-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.chart-page-actions { display: flex; align-items: center; gap: 12px; }
.chart-page-actions > strong { color: var(--muted); font-size: .78rem; white-space: nowrap; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.chart-legend > span { display: inline-flex; align-items: center; gap: 5px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel-2); font-size: .7rem; font-weight: 800; }
.chart-legend .lucide { width: 13px; height: 13px; }
.full-chart-list { margin-top: 12px; }

.row-play,
.row-like {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 10px;
  background: var(--panel-3);
  color: var(--text);
}

.row-like.liked,
#likeCurrentBtn.liked {
  color: var(--accent-2);
}

.performer-list {
  display: grid;
  gap: 10px;
}

.performer {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 36px;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
}

.performer-avatar {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 999px;
  font-weight: 900;
}

.a1 { background: var(--accent); color: #0d1117; }
.a2 { background: #d9dde4; color: #0d1117; }
.a3 { background: #b9c2cf; color: #0d1117; }

.performer p {
  margin: 3px 0 0;
}

.performer button {
  width: 36px;
  height: 36px;
  background: var(--panel-3);
}

.page-title {
  padding: 26px 0 18px;
}

.page-title h1 {
  font-size: clamp(32px, 5vw, 58px);
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 10px 0 20px;
}

.sort-control {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding-left: 8px;
  color: var(--muted);
  font-size: 14px;
}

.sort-control select {
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--text);
  padding: 0 12px;
}

.tiny-input {
  width: 82px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--text);
  padding: 0 12px;
}

.chip {
  min-height: 38px;
  padding: 0 16px;
  background: var(--panel-2);
  color: var(--soft);
}

.chip.active {
  background: var(--text);
  color: var(--bg);
}

.library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}

.discover-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}

.compact-discover {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.discover-card {
  display: grid;
  gap: 8px;
  min-height: 108px;
  align-content: end;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  text-align: left;
}

.discover-card:hover {
  border-color: rgba(222, 228, 235, 0.24);
  background: var(--panel-2);
}

.discover-card strong {
  font-size: 1.12rem;
}

.discover-card span {
  color: var(--muted);
}

.analytics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}

.analytics-card,
.event-row {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
}

.analytics-card {
  padding: 18px;
  grid-column: 1 / -1;
  min-height: 220px;
  align-self: stretch;
}

.admin-analytics-tabs {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 2px;
}

.admin-analytics-tabs .chip.active {
  border-color: rgba(255, 24, 184, 0.52);
  background: rgba(255, 24, 184, 0.1);
  color: var(--text);
}

.analytics-card[hidden] {
  display: none;
}

.analytics-card h3,
.analytics-card p {
  margin: 0;
}

.admin-taxonomy-row,
.admin-tag-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
  border-top: 1px solid var(--line);
}

.admin-taxonomy-row:first-of-type,
.admin-tag-row:first-of-type {
  border-top: 0;
}

.admin-taxonomy-row button,
.admin-tag-row button {
  flex: 0 0 auto;
}

.analytics-card p {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  color: var(--muted);
}

.admin-user-row,
.password-request-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.admin-user-row:first-of-type,
.password-request-row:first-of-type {
  border-top: 0;
}

.admin-user-row p,
.password-request-row p {
  display: block;
  margin-top: 0;
}

.admin-user-row span,
.password-request-row span {
  color: var(--muted);
  font-size: 0.82rem;
}

.admin-user-row select {
  min-width: 120px;
  height: 38px;
  padding: 0 10px;
}

.admin-user-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-author-list { display: grid; gap: 10px; }

.admin-author-row {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-2);
}

.admin-author-avatar {
  display: grid;
  width: 54px;
  height: 54px;
  padding: 0;
  place-items: center;
  overflow: hidden;
  border: 0;
  border-radius: 50%;
  background: var(--panel-3);
  color: var(--soft);
  font-weight: 900;
}

.admin-author-avatar img { width: 100%; height: 100%; object-fit: cover; }
.admin-author-copy { min-width: 0; }
.admin-author-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.admin-author-title > span,
.admin-author-copy > p { color: var(--muted); font-size: .82rem; }
.admin-author-copy > p { margin: 5px 0 8px; }
.admin-author-tracks { display: flex; flex-wrap: wrap; gap: 6px; }
.admin-author-tracks button { max-width: 220px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--text); text-align: left; }
.admin-author-tracks button span,
.admin-author-tracks button small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-author-tracks button small { margin-top: 2px; color: var(--muted); font-size: .68rem; }
.admin-author-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }

.event-list {
  display: grid;
  gap: 10px;
  margin-bottom: 28px;
}

.event-row {
  padding: 14px;
}

.event-row.unread {
  border-color: rgba(255, 24, 184, 0.52);
  background: rgba(255, 24, 184, 0.1);
}

.event-row p {
  margin: 5px 0 0;
  color: var(--muted);
}

.notification-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}

.notification-filters,
.notification-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.notification-summary {
  margin: 12px 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.notification-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 13px;
  align-items: start;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}

.notification-card.unread {
  border-color: rgba(255, 24, 184, 0.5);
  background: linear-gradient(100deg, rgba(255, 24, 184, 0.11), var(--panel));
}

.notification-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 12px;
  background: var(--panel-3);
  color: var(--accent);
}

.notification-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.notification-card-head time {
  color: var(--muted);
  font-size: 0.78rem;
  white-space: nowrap;
}

.notification-copy p {
  margin: 6px 0 0;
  color: var(--soft);
  line-height: 1.5;
}

.notification-card-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.notification-card-actions .ghost-btn {
  min-height: 34px;
  padding: 7px 10px;
}

.notification-empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 56px 20px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  color: var(--muted);
  text-align: center;
}

.notification-empty > span {
  color: var(--accent-2);
}

.notification-empty strong,
.notification-empty p {
  margin: 0;
}

.contract-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}

.contract-card {
  display: grid;
  gap: 14px;
  align-content: start;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
}

.wide-contract {
  grid-column: 1 / -1;
}

.contract-card h2,
.contract-card h3,
.contract-card p {
  margin: 0;
}

.contract-card section {
  display: grid;
  gap: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.contract-card p {
  color: var(--muted);
  line-height: 1.5;
}

.roadmap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.roadmap-card {
  display: grid;
  gap: 13px;
  align-content: start;
  min-height: 270px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
}

.roadmap-card.done {
  border-color: rgba(255, 24, 184, 0.32);
}

.roadmap-card.active {
  border-color: rgba(255, 24, 184, 0.58);
  background: rgba(255, 24, 184, 0.08);
}

.roadmap-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.roadmap-card h2,
.roadmap-card p,
.roadmap-card ul {
  margin: 0;
}

.roadmap-card p,
.roadmap-card li {
  color: var(--muted);
  line-height: 1.5;
}

.roadmap-card ul {
  display: grid;
  gap: 6px;
  padding-left: 18px;
}

.roadmap-step,
.roadmap-status {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.roadmap-step {
  justify-content: center;
  width: 42px;
  border: 1px solid var(--line);
  color: var(--soft);
  background: var(--panel-3);
}

.roadmap-status {
  padding: 0 10px;
  border: 1px solid rgba(255, 24, 184, 0.28);
  color: var(--soft);
  background: rgba(255, 24, 184, 0.08);
}

.auth-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: 18px;
  align-items: start;
}

.auth-register-layout {
  grid-template-columns: minmax(0, 720px);
  justify-content: center;
}

.auth-register-layout .auth-panel {
  width: 100%;
  box-sizing: border-box;
}

.auth-register-layout .settings-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.auth-register-layout .settings-actions .primary-btn,
.auth-register-layout .settings-actions .ghost-btn {
  width: 100%;
  min-width: 0;
  white-space: nowrap;
}

.topbar-context { display: flex; align-items: center; gap: 14px; min-width: 0; }
.topbar-context-copy { color: var(--muted); font-size: 13px; }
.auth-screen { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(280px, .95fr); min-height: min(620px, calc(100vh - 170px)); overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: radial-gradient(circle at 12% 0%, rgba(255, 24, 184, .14), transparent 38%), var(--panel-2); }
.auth-panel-main { display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 6vw, 78px); border: 0; border-radius: 0; background: transparent; }
.auth-brand-mark { width: 52px; height: 52px; display: grid; place-items: center; margin-bottom: 48px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel-3); }
.auth-brand-mark img { width: 34px; height: 34px; object-fit: contain; }
.auth-panel-main h1 { max-width: 520px; margin-bottom: 14px; font-size: clamp(36px, 5vw, 68px); line-height: .98; letter-spacing: -.06em; }
.auth-panel-main h1 span { color: var(--accent); }
.auth-lead { max-width: 460px; color: var(--muted); font-size: 16px; }
.auth-panel-main .auth-form { max-width: 420px; }
.auth-panel-main .settings-actions .primary-btn { width: 100%; }
.auth-register-link { align-self: flex-start; min-height: 32px; padding: 0; border: 0; background: transparent; color: var(--muted); line-height: 1.4; text-align: left; white-space: nowrap; }
.auth-register-link span { color: var(--text); text-decoration: underline; text-underline-offset: 4px; }
.auth-showcase { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 420px; padding: 42px; overflow: hidden; border-left: 1px solid var(--line); background: linear-gradient(145deg, rgba(255, 24, 184, .78), rgba(30, 10, 36, .94) 72%); }
.auth-showcase,
.auth-showcase-kicker,
.auth-showcase strong { color: #fff; }
.auth-showcase::before, .auth-showcase::after { position: absolute; content: ""; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; }
.auth-showcase::before { width: 420px; height: 420px; top: -160px; right: -100px; }
.auth-showcase::after { width: 250px; height: 250px; top: -74px; right: -14px; }
.auth-showcase-kicker { position: absolute; top: 42px; left: 42px; font-size: 11px; letter-spacing: .18em; }
.auth-showcase strong { position: relative; z-index: 1; font-size: clamp(38px, 5vw, 70px); line-height: .9; letter-spacing: -.06em; }
.auth-showcase p { position: relative; z-index: 1; max-width: 290px; margin: 20px 0 0; color: rgba(255,255,255,.72); }
.auth-showcase-bars { position: absolute; right: 42px; bottom: 42px; display: flex; align-items: end; gap: 5px; height: 100px; opacity: .65; }
.auth-showcase-bars i { display: block; width: 5px; height: 30%; border-radius: 5px; background: #fff; }
.auth-showcase-bars i:nth-child(2) { height: 75%; }.auth-showcase-bars i:nth-child(3) { height: 48%; }.auth-showcase-bars i:nth-child(4) { height: 92%; }.auth-showcase-bars i:nth-child(5) { height: 58%; }.auth-showcase-bars i:nth-child(6) { height: 80%; }.auth-showcase-bars i:nth-child(7) { height: 38%; }
.session-card { display: grid; gap: 16px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); }
.session-card > div:first-child { display: grid; gap: 4px; }.session-card .eyebrow { margin: 0; }.session-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; font-size: 13px; }.session-meta span { color: var(--muted); }

.auth-panel,
.auth-status {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
}

.auth-panel h1,
.auth-panel p,
.auth-status h2 {
  margin-top: 0;
}

.auth-form {
  display: grid;
  gap: 14px;
  margin-top: 22px;
}

.auth-form label {
  display: grid;
  gap: 8px;
  color: var(--soft);
  font-weight: 700;
}

.auth-form input,
.auth-form select {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  outline: 0;
  background: var(--panel-2);
  color: var(--text);
}

#loginForm button[value="register"] {
  display: none;
}

.auth-state-grid {
  display: grid;
  gap: 10px;
  margin: 18px 0;
}

.auth-state-grid div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
}

.auth-state-grid span {
  color: var(--muted);
}

.library-card {
  padding: 22px;
}

.library-card span {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  margin-bottom: 18px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--panel-3);
  color: var(--soft);
  font-size: 26px;
}

.library-card > .lucide {
  width: 52px;
  height: 52px;
  margin-bottom: 18px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-3);
  color: var(--soft);
}

.library-card h3 {
  margin: 0 0 8px;
}

.tabs-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.library-browser {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}

.library-browser-tabs {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  overflow-x: auto;
  padding: 10px 10px 0;
  border-bottom: 1px solid var(--line);
  background: var(--panel-3);
  scrollbar-width: thin;
}

.library-browser-tab {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 15px;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}

.library-browser-tab:hover {
  background: color-mix(in srgb, var(--panel) 72%, transparent);
  color: var(--text);
}

.library-browser-tab.active {
  position: relative;
  bottom: -1px;
  border-color: var(--line);
  background: var(--panel);
  color: var(--text);
}

.library-browser-tab .lucide {
  width: 17px;
  height: 17px;
}

.library-browser-tab strong {
  display: inline-grid;
  min-width: 22px;
  height: 22px;
  place-items: center;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--soft);
  font-size: 0.75rem;
}

.library-browser-tab.active strong {
  background: rgba(255, 24, 184, 0.14);
  color: var(--accent);
}

.library-browser-panel {
  padding: 20px;
}

.library-controls {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 22px;
}

.library-search {
  position: relative;
  flex: 1 1 420px;
  max-width: 680px;
}

.library-search .lucide {
  position: absolute;
  top: 50%;
  left: 13px;
  width: 18px;
  height: 18px;
  color: var(--muted);
  pointer-events: none;
  transform: translateY(-50%);
}

.library-search input {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px 10px 42px;
  border: 1px solid var(--line);
  border-radius: 9px;
  outline: 0;
  background: var(--panel-2);
  color: var(--text);
  font: inherit;
}

.library-search input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 24, 184, 0.12);
}

.library-result-heading {
  margin-bottom: 12px;
}

.tab-btn {
  min-height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--muted);
}

.tab-btn.active {
  background: var(--text);
  color: var(--bg);
}

.upload-form {
  display: grid;
  max-width: 860px;
  gap: 16px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.upload-form label {
  display: grid;
  gap: 8px;
  color: var(--soft);
  font-weight: 700;
}

.upload-form input,
.upload-form select,
.upload-form textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  outline: 0;
  background: var(--panel);
  color: var(--text);
}

.upload-form input,
.upload-form select {
  height: 46px;
  padding: 0 14px;
}

.upload-form textarea {
  padding: 12px 14px;
  resize: vertical;
}

.upload-hero {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 24px;
  padding: 30px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    radial-gradient(circle at 92% 18%, rgba(255, 24, 184, 0.18), transparent 30%),
    linear-gradient(135deg, var(--panel), var(--panel-2));
}

.upload-hero h1,
.upload-hero p {
  margin: 0;
}

.upload-hero h1 {
  margin-top: 5px;
  font-size: clamp(34px, 5vw, 58px);
  line-height: 0.98;
}

.upload-hero > div:first-child > p:last-child {
  max-width: 680px;
  margin-top: 12px;
  color: var(--muted);
  line-height: 1.5;
}

.upload-hero-flow {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.upload-hero-flow span {
  display: grid;
  justify-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.upload-hero-flow strong {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(255, 24, 184, 0.28);
  border-radius: 50%;
  background: rgba(255, 24, 184, 0.12);
  color: var(--accent);
}

.upload-hero-flow i {
  width: 38px;
  height: 1px;
  margin-bottom: 21px;
  background: var(--line);
}

.upload-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(310px, 370px);
  gap: 22px;
  align-items: start;
}

.upload-form-main {
  display: grid;
  gap: 16px;
}

.upload-form-card,
.upload-submit-card,
.upload-preview-sticky {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
}

.upload-form-card {
  display: grid;
  gap: 22px;
  padding: 24px;
}

.upload-form-card > label,
.upload-field-grid label,
.upload-description-field,
.upload-classification-grid label {
  display: grid;
  gap: 8px;
  color: var(--soft);
  font-weight: 800;
}

.upload-form-card input,
.upload-form-card textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  outline: 0;
  background: var(--panel-2);
  color: var(--text);
  font: inherit;
}

.upload-form-card input {
  min-height: 46px;
  padding: 0 14px;
}

.upload-form-card textarea {
  padding: 13px 14px;
  resize: vertical;
}

.upload-form-card input:focus,
.upload-form-card textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 24, 184, 0.1);
}

.upload-section-head {
  display: flex;
  align-items: center;
  gap: 13px;
}

.upload-section-head h2,
.upload-section-head p {
  margin: 0;
}

.upload-section-head h2 {
  margin: 2px 0 4px;
  font-size: 1.2rem;
}

.upload-section-head > div > p:last-child {
  color: var(--muted);
  font-size: 0.86rem;
}

.upload-section-icon {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  place-items: center;
  border-radius: 12px;
  background: rgba(255, 24, 184, 0.11);
  color: var(--accent);
}

.upload-section-icon .lucide {
  width: 20px;
  height: 20px;
}

.upload-field-grid,
.upload-classification-grid,
.upload-files-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.upload-description-field {
  display: grid;
}

.upload-source-panel {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-2);
}

.upload-source-panel .field-heading > div {
  display: grid;
  gap: 4px;
}

.upload-source-panel .selected-sources {
  min-height: 34px;
}

.upload-files-grid .file-drop {
  min-height: 176px;
  border-radius: 13px;
  background: var(--panel-2);
}

.file-drop-icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 24, 184, 0.12);
  color: var(--accent);
}

.upload-files-grid .file-drop-name {
  min-height: 30px;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--soft);
  font-weight: 800;
}

.upload-submit-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
}

.upload-rights-check {
  flex: 1;
}

.upload-rights-check > span {
  display: grid;
  gap: 3px;
}

.upload-rights-check small {
  color: var(--muted);
  font-weight: 500;
}

.upload-submit-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 9px;
}

.upload-submit-actions .primary-btn {
  gap: 8px;
  white-space: nowrap;
}

.upload-progress {
  flex: 1 1 260px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid rgba(255, 24, 184, 0.3);
  border-radius: 12px;
  background: rgba(255, 24, 184, 0.06);
}

.upload-progress-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.86rem;
}

.upload-progress-heading span { color: var(--accent); font-weight: 900; }
.upload-progress-track { height: 7px; margin: 9px 0 7px; overflow: hidden; border-radius: 999px; background: var(--panel-3); }
.upload-progress-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--accent); transition: width 240ms ease; }
.upload-progress.is-pending .upload-progress-track i { animation: upload-progress-pulse 1.1s ease-in-out infinite; }
.upload-progress p { margin: 0; color: var(--muted); font-size: 0.78rem; line-height: 1.35; }

@keyframes upload-progress-pulse { 50% { filter: brightness(1.45); } }

.upload-preview-column {
  min-width: 0;
}

.upload-preview-sticky {
  position: sticky;
  top: 18px;
  overflow: hidden;
}

.upload-preview-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 18px 0;
}

.upload-preview-heading h2,
.upload-preview-heading p {
  margin: 0;
}

.upload-preview-heading h2 {
  margin-top: 2px;
  font-size: 1rem;
}

.upload-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.upload-live-badge i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 0 4px rgba(53, 208, 186, 0.1);
}

.upload-preview-column .upload-preview {
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 18px;
  border: 0;
  background: transparent;
}

.upload-preview-column .preview-cover {
  width: 100%;
  border-radius: 13px;
  font-size: 2.3rem;
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.18);
}

.upload-preview-column .upload-preview h3 {
  margin-bottom: 7px;
  font-size: 1.45rem;
}

.upload-preview-column .upload-preview p {
  color: var(--muted);
  line-height: 1.45;
}

.upload-preview-column .quality-checks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.upload-preview-column .quality-checks span {
  min-width: 0;
  border-radius: 7px;
}

.upload-preview-note {
  display: flex;
  gap: 9px;
  margin: 0;
  padding: 14px 18px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.4;
}

.upload-preview-note .lucide {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  color: var(--accent-2);
}

.form-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.6fr 0.7fr;
  gap: 14px;
}

.search-toolbar {
  display: flex;
  align-items: end;
  gap: 12px;
  margin-bottom: 14px;
}

.search-query-field {
  display: grid;
  flex: 1;
  gap: 6px;
  color: var(--soft);
  font-weight: 700;
}

.search-query-field input {
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
}

.filter-row {
  align-items: end;
}

.empty-state {
  display: grid;
  gap: 8px;
  min-height: 132px;
  align-content: center;
  padding: 22px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--soft);
}

.empty-state strong {
  color: var(--text);
  font-size: 18px;
}

.empty-state .ghost-btn {
  justify-self: start;
  margin-top: 4px;
}

.source-picker,
.tag-picker {
  display: grid;
  gap: 10px;
}

.source-search-results,
.selected-sources,
.tag-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.source-result {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.source-result:hover,
.tag-option.active {
  border-color: var(--accent);
  background: rgba(255, 24, 184, 0.12);
}

.source-result img,
.source-result-cover {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 4px;
  object-fit: cover;
  background: var(--line);
}

.source-result span:not(.source-result-cover) {
  display: grid;
  gap: 3px;
}

.source-result small {
  color: var(--muted);
}

.selected-source,
.tag-option {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text);
}

.selected-source button {
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.tag-option {
  cursor: pointer;
}

.field-hint {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 400;
}

.field-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--soft);
}

.admin-tag-list {
  display: grid;
  gap: 8px;
}

.admin-tag-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}

.admin-tag-row small {
  color: var(--muted);
}

.file-drop {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  min-height: 118px;
  padding: 20px;
  border: 1px dashed rgba(222, 228, 235, 0.24);
  border-radius: 8px;
  background: rgba(255, 24, 184, 0.06);
  text-align: center;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.file-drop input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.file-drop:hover,
.file-drop.is-drag-over {
  border-color: var(--accent);
  background: rgba(255, 24, 184, 0.14);
}

.file-drop.is-drag-over {
  transform: scale(1.01);
}

.file-drop-hint,
.file-drop-name {
  color: var(--muted);
  font-size: 0.88rem;
}

.file-drop.has-file .file-drop-name {
  color: var(--accent-soft, var(--accent));
}

.upload-preview {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.upload-preview h3,
.upload-preview p {
  margin: 0 0 6px;
}

.edit-track-intro {
  display: grid;
  gap: 5px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 24, 184, 0.22);
  border-radius: 8px;
  background: rgba(255, 24, 184, 0.06);
}

.edit-track-intro p {
  margin: 0;
  color: var(--muted);
}

.edit-track-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.edit-track-fields label:first-child {
  grid-column: 1 / -1;
}

@media (max-width: 700px) {
  .edit-track-fields {
    grid-template-columns: 1fr;
  }

  .edit-track-fields label:first-child {
    grid-column: auto;
  }
}

.preview-cover {
  display: grid;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: linear-gradient(135deg, #222832, #4b5664);
  color: var(--text);
  font-size: 1.4rem;
  font-weight: 900;
}

.upload-readiness {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.readiness-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--soft);
  font-size: 0.9rem;
}

.readiness-head span {
  color: var(--muted);
}

.readiness-bar {
  height: 8px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-2);
}

.readiness-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

.quality-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.quality-checks span {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.quality-checks .done {
  color: var(--soft);
  background: rgba(255, 24, 184, 0.08);
}

.quality-checks .missing {
  color: #d6a13a;
  background: rgba(214, 161, 58, 0.08);
}

.file-errors {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.file-errors span {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  min-height: 26px;
  align-items: center;
  padding: 0 9px;
  border: 1px solid rgba(255, 107, 127, 0.32);
  border-radius: 999px;
  color: #ffc2cc;
  background: rgba(255, 107, 127, 0.14);
  font-size: 0.78rem;
  font-weight: 800;
}

.form-error {
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 107, 127, 0.45);
  border-radius: 8px;
  background: rgba(255, 107, 127, 0.12);
  color: #ffb6c1;
  font-size: 0.92rem;
}

.check-row {
  display: flex !important;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px !important;
  font-weight: 600 !important;
}

.check-row input {
  width: 18px;
  height: 18px;
}

.radio-page-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 0; }
.radio-page-heading h1 { margin: 6px 0 0; font-size: 36px; line-height: 1.15; overflow-wrap: anywhere; letter-spacing: 0; }
.radio-air-meta { display: grid; justify-items: end; gap: 8px; color: var(--muted); font-size: 12px; }
#radioAirStatus { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-weight: 700; }
#radioAirStatus::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
#radioAirStatus[data-live="true"] { color: #29bb88; }
:root:is([data-theme="light"], [data-theme="warm"]) #radioAirStatus[data-live="true"],
:root:is([data-theme="light"], [data-theme="warm"]) .radio-dock-track small { color: #11704c; }
#radioAirStatus[data-live="true"]::before { background: currentColor; }
.radio-tabs { display: flex; gap: 28px; border-bottom: 1px solid var(--line); }
.radio-tabs button { display: inline-flex; gap: 8px; align-items: center; min-height: 46px; padding: 8px 0; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted); font: inherit; cursor: pointer; }
.radio-tabs button[aria-selected="true"] { border-bottom-color: var(--accent); color: var(--text); }
.radio-tabs svg, .radio-track-link svg, .radio-list-heading svg, .radio-track-row > svg, .radio-volume svg { width: 18px; height: 18px; flex-shrink: 0; }
.radio-now { display: grid; grid-template-columns: minmax(180px, 300px) minmax(0, 1fr); gap: 36px; align-items: center; padding: 34px 0; }
.radio-artwork { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 6px; background: var(--panel); }
[data-radio-cover][data-fallback="true"] { object-fit: contain; }
.radio-now-copy { min-width: 0; }
.radio-now h2 { margin: 14px 0 10px; font-size: 30px; line-height: 1.2; overflow-wrap: anywhere; letter-spacing: 0; }
.radio-author { margin: 0; color: var(--muted); overflow-wrap: anywhere; }
.radio-track-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; color: var(--text); font-size: 13px; }
.radio-track-link[hidden] { display: none; }
.radio-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; margin-top: 28px; }
.radio-listen { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 186px; height: 48px; border-radius: 6px; white-space: nowrap; }
.radio-listen svg { width: 20px; height: 20px; }
.radio-volume { display: flex; align-items: center; gap: 10px; width: 140px; color: var(--muted); }
.radio-volume input { min-width: 0; width: 100%; accent-color: var(--accent); cursor: pointer; }
.radio-connection-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; min-height: 40px; margin-top: 12px; color: var(--muted); font-size: 12px; }
.radio-programme { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; padding: 24px 0 40px; border-top: 1px solid var(--line); }
.radio-list-heading { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 14px; color: var(--muted); }
.radio-list-heading h2 { margin: 0; color: var(--text); font-size: 19px; }
.radio-track-row { display: flex; align-items: center; gap: 12px; min-height: 74px; padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; }
.radio-track-row:hover { background: var(--panel); }
.radio-row-number { flex: 0 0 20px; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.radio-track-row img { width: 46px; height: 46px; flex-shrink: 0; object-fit: cover; border-radius: 4px; background: var(--panel); }
.radio-row-copy { display: grid; gap: 5px; min-width: 0; flex: 1; }
.radio-row-copy strong { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.radio-row-copy > span { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.radio-track-row > svg { color: var(--muted); }
.radio-empty { color: var(--muted); font-size: 13px; padding: 18px 0; }
.radio-dock { position: fixed; z-index: 70; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 18px; min-height: 88px; padding: 12px 24px; background: var(--panel); border-top: 1px solid var(--line); }
.radio-dock[hidden] { display: none; }
.radio-dock-track { display: flex; gap: 14px; min-width: 0; align-items: center; flex: 1; color: var(--text); text-decoration: none; }
.radio-dock-track img { width: 52px; height: 52px; flex-shrink: 0; object-fit: cover; border-radius: 4px; }
.radio-dock-track > span { display: grid; gap: 4px; min-width: 0; }
.radio-dock-track strong, .radio-dock-track > span > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.radio-dock-track strong { font-size: 14px; }
.radio-dock-track small { color: #29bb88; font-size: 10px; }
.radio-dock-track > span > span { color: var(--muted); font-size: 11px; }
.radio-dock-toggle { background: var(--accent); color: #fff; }
body.radio-visible .player:not(.radio-dock) { display: none; }
body.radio-visible .main { padding-bottom: 140px; }
@media (max-width: 900px) {
  .radio-page-heading { align-items: start; gap: 12px; padding-top: 16px; }
  .radio-page-heading h1 { font-size: 28px; }
  .radio-air-meta { font-size: 10px; padding-top: 5px; flex-shrink: 0; }
  .radio-now { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 26px 0; }
  .radio-artwork { max-width: 330px; justify-self: center; }
  .radio-now h2 { font-size: 25px; }
  .radio-controls { gap: 16px; margin-top: 22px; }
  .radio-volume { flex: 1; max-width: 160px; min-width: 86px; }
  .radio-programme { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .radio-dock { bottom: 58px; min-height: 84px; padding: 10px 14px; gap: 10px; }
  .radio-dock-track { gap: 10px; }
  .radio-dock-track img { width: 44px; height: 44px; }
  .radio-dock-volume { display: none; }
  .radio-dock .icon-btn { width: 36px; height: 36px; flex-shrink: 0; }
  body.radio-visible .main { padding-bottom: 180px; }
}
@media (max-width: 360px) {
  .radio-artwork { max-width: 210px; }
}

.player {
  --player-tone: 42 55 75;
  --player-deep: 15 18 24;
  --player-accent: 164 183 214;
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  display: none;
  grid-template-columns: minmax(180px, 1fr) minmax(280px, 1.4fr) minmax(120px, 1fr);
  gap: 18px;
  align-items: center;
  min-height: 92px;
  padding: 14px 22px;
  border-top: 1px solid rgb(var(--player-accent) / 0.36);
  background: linear-gradient(104deg, rgb(var(--player-deep) / 0.985), rgb(var(--player-tone) / 0.5) 52%, rgb(var(--player-deep) / 0.975));
  box-shadow: 0 -12px 34px rgb(var(--player-deep) / 0.38);
  backdrop-filter: blur(16px);
  transition: background 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
.player.is-visible { display: grid; }

:root[data-theme="light"] .player {
  --player-tone: 219 228 244;
  --player-deep: 173 189 216;
  --player-accent: 112 76 188;
  border-top-color: rgba(27, 38, 50, 0.14);
  background: linear-gradient(104deg, rgba(255,255,255,.97), rgb(var(--player-tone) / .56) 56%, rgba(255,255,255,.97));
  box-shadow: 0 -10px 30px rgb(var(--player-deep) / .15);
}

.now-playing {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
}

.now-playing strong,
.now-playing p,
.track-row strong,
.track-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.now-playing p {
  margin: 2px 0 0;
}

.player-recommendation-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-right: 7px;
  padding: 2px 6px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  color: var(--accent) !important;
  font-size: .67rem;
  font-weight: 800;
  line-height: 1.2;
  vertical-align: middle;
}

.player-recommendation-badge .lucide { width: 12px; height: 12px; }

.mini-cover {
  position: relative;
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  overflow: hidden;
}

.player-center {
  display: grid;
  gap: 8px;
}

.player-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.player button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgb(var(--player-tone) / 0.2);
}

.player button.active-toggle {
  background: rgb(var(--player-accent) / 0.88);
  color: #03110f;
}

.player button:hover {
  background: rgb(var(--player-accent) / 0.28);
  color: var(--text);
  transform: translateY(-1px);
}

.player .play-toggle:hover {
  background: rgb(var(--player-accent)) !important;
  color: #0a0c10 !important;
}

.player-link {
  display: inline;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.player-link:hover {
  color: rgb(var(--player-accent));
}

.player-title-link {
  font-weight: 800;
}

.player-separator {
  margin: 0 4px;
  color: var(--muted);
}

.play-toggle {
  background: var(--text) !important;
  color: var(--bg) !important;
}

.row-like.liked .lucide,
#likeCurrentBtn.liked .lucide,
#fullscreenLikeBtn.liked .lucide {
  fill: currentColor;
}

.progress-wrap {
  display: grid;
  grid-template-columns: 42px minmax(80px, 1fr) 42px;
  gap: 10px;
  align-items: center;
  color: var(--muted);
  font-size: 13px;
}

.progress-wrap input {
  width: 100%;
  accent-color: rgb(var(--player-accent));
}

.player-actions {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 10px;
}

.volume-control {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}

.volume-control input {
  width: 92px;
  accent-color: var(--accent);
}

.sidebar-playlists {
  display: grid;
  gap: 18px;
}

.sidebar-playlist-section { display: grid; gap: 7px; }
.sidebar-playlist-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 8px; }
.sidebar-playlist-heading strong { display: inline-flex; align-items: center; gap: 8px; color: var(--soft); font-size: .83rem; }
.sidebar-playlist-heading strong .lucide { width: 21px; height: 21px; color: var(--accent); stroke-width: 2.1; }
.sidebar-playlist-all { padding: 3px 4px; border: 0; background: transparent; color: var(--muted); font-size: .75rem; font-weight: 800; }
.sidebar-playlist-all:hover { color: var(--accent); }
.sidebar-playlist-list { display: grid; gap: 3px; }
.sidebar-playlist-list > p { margin: 0; padding: 2px 9px; color: var(--muted); font-size: .75rem; line-height: 1.35; }

.playlist-link,
.link-title,
.muted-link {
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.playlist-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  color: var(--muted);
}

.playlist-link:hover { border-radius: 9px; background: var(--panel-2); }

.playlist-link-cover,
.playlist-cover {
  display: block;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 6px;
  object-fit: cover;
  background: var(--panel);
}

.playlist-link-cover {
  width: 40px;
  height: 40px;
  border-radius: 8px;
}

.playlist-cover-fallback,
.playlist-cover-large {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #303b4c, #171b21);
  color: var(--accent);
  font-weight: 900;
}

.playlist-cover-large {
  width: 220px;
  height: 220px;
  overflow: hidden;
  border-radius: 8px;
  font-size: 42px;
}

.playlist-cover-large .cover-image {
  position: static;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* A playlist header has a taller text column with actions.  Keep its cover
   aligned with the heading instead of lowering it to the action row. */
.profile-head.playlist-head {
  align-items: start;
}

.playlist-cover-preview {
  width: 96px;
  height: 96px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.playlist-cover-preview:empty {
  display: none;
}

.playlist-cover-preview-image {
  position: static;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.playlist-search {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-2);
}

.playlist-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
}

.playlist-link:hover,
.link-title:hover,
.muted-link:hover {
  color: var(--accent);
}

.link-title {
  display: block;
  width: 100%;
  padding: 0;
  font-weight: 800;
}

.muted-link {
  padding: 0;
  color: var(--muted);
}

.source-link { display: inline; width: auto; font-weight: 600; }
.source-separator { color: var(--muted); }

.row-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.row-actions {
  display: flex;
  gap: 6px;
}

.inline-link {
  display: inline;
  color: var(--accent);
  font-weight: 800;
}

.rules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

.admin-service-panel {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
  padding: 20px;
  border: 1px solid rgba(255, 24, 184, 0.24);
  border-radius: 8px;
  background: rgba(255, 24, 184, 0.035);
}

.admin-service-panel h2,
.admin-service-panel p {
  margin: 0;
}

.rule-card-wide {
  grid-column: 1 / -1;
}

.rule-card {
  display: grid;
  gap: 12px;
  min-height: 220px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.rule-card span {
  display: grid;
  width: 30px;
  height: 30px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
}

.rule-card h2,
.rule-card p {
  margin: 0;
}

.rule-card p {
  color: var(--muted);
  line-height: 1.55;
}

.track-row {
  grid-template-columns: 42px minmax(0, 1fr) 90px 84px 138px;
}

.chart-track-row {
  grid-template-columns: 34px 46px minmax(0, 1fr) auto;
}

.compact-row {
  grid-template-columns: 42px minmax(0, 1fr) 68px 70px 86px;
}

.playlist-cards,
.playlist-options {
  display: grid;
  gap: 10px;
}

.library-playlists-section {
  margin-top: 28px;
}

.library-playlists-section .section-heading {
  margin-bottom: 12px;
}

.playlist-card,
.playlist-option,
.info-panel,
.moderation-row {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
}

.moderation-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.8fr);
  gap: 16px;
  align-items: start;
}

.moderation-queue-panel,
.moderation-log-panel {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.moderation-log-panel {
  position: sticky;
  top: 16px;
  max-height: 70vh;
  overflow: auto;
}

.count-badge {
  display: inline-grid;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  place-items: center;
  border-radius: 999px;
  background: var(--panel-3);
  color: var(--soft);
  font-weight: 900;
}

.playlist-card {
  padding: 18px;
}

.playlist-card > .playlist-cover {
  margin-bottom: 12px;
}

/* The library reuses `.cover-image`, which is absolutely positioned for track
   cards.  Make the playlist thumbnail its containing block, otherwise an
   uploaded image is positioned against the page and fills the whole panel. */
.playlist-card > .playlist-cover {
  position: relative;
  display: grid;
  overflow: hidden;
  place-items: center;
}

.playlist-card > .playlist-cover .cover-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.playlist-card {
  cursor: pointer;
}

.playlist-card-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.playlist-card-head span {
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(53, 208, 186, 0.12);
  color: var(--soft);
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
}

.playlist-like-count {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 5px 9px !important;
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line));
  background: color-mix(in srgb, var(--accent) 10%, var(--panel-2)) !important;
  color: var(--accent) !important;
  font-variant-numeric: tabular-nums;
}

.playlist-like-count .lucide { width: 15px; height: 15px; fill: currentColor; stroke-width: 2; }
.playlist-like-count b { color: var(--text); font-size: .78rem; }

.library-playlist-card {
  position: relative;
  display: grid;
  grid-template-columns: 124px minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 17px;
  min-height: 156px;
  padding: 14px;
  overflow: hidden;
  border-radius: 15px;
  background: linear-gradient(135deg, var(--panel), var(--panel-2));
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.library-playlist-card:hover,
.library-playlist-card:focus-visible { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); box-shadow: 0 12px 28px color-mix(in srgb, var(--accent) 13%, transparent); transform: translateY(-2px); outline: none; }
.library-playlist-card > .playlist-cover { width: 124px; height: 124px; margin: 0; border-radius: 11px; background: var(--panel-3); }
.library-playlist-copy { display: grid; align-content: start; gap: 7px; min-width: 0; padding: 2px 0; }
.library-playlist-copy .eyebrow { margin: 0; }
.library-playlist-copy .playlist-card-head { align-items: center; }
.library-playlist-copy .playlist-card-head h3 { margin: 0; font-size: 1.16rem; }
.library-playlist-copy .playlist-card-head span { display: inline-flex; align-items: center; gap: 5px; }
.library-playlist-copy .playlist-card-head span .lucide { width: 14px; height: 14px; }
.library-playlist-meta { display: inline-flex; align-items: center; gap: 6px; margin: 0 !important; color: var(--muted) !important; font-size: .84rem; }
.library-playlist-meta .lucide { width: 14px; height: 14px; }
.library-playlist-description { display: -webkit-box; margin: 0 !important; overflow: hidden; color: var(--soft) !important; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.library-playlist-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.library-playlist-tags span { padding: 4px 8px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 10%, var(--panel-3)); color: var(--soft); font-size: .74rem; }
.library-playlist-open { display: grid; width: 34px; height: 34px; place-items: center; align-self: center; border: 1px solid var(--line); border-radius: 50%; color: var(--accent); }

@media (max-width: 620px) {
  .library-playlist-card { grid-template-columns: 92px minmax(0, 1fr); gap: 12px; min-height: 120px; padding: 12px; }
  .library-playlist-card > .playlist-cover { width: 92px; height: 92px; }
  .library-playlist-open { display: none; }
  .library-playlist-description { -webkit-line-clamp: 1; }
}

.mini-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.mini-actions .ghost-btn {
  min-height: 34px;
  padding: 0 12px;
}

.editorial-card {
  min-height: 94px;
  background: var(--panel);
}

.playlist-card h3,
.playlist-card p {
  margin: 0;
}

.playlist-card p {
  margin-top: 6px;
  color: var(--muted);
}

.detail-hero,
.profile-head {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 28px;
  align-items: end;
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.detail-hero h1,
.profile-head h1 {
  margin: 0;
  font-size: clamp(34px, 6vw, 72px);
  line-height: 1;
}

.detail-author {
  margin-top: 10px;
  font-size: 20px;
}

.detail-cover,
.profile-avatar {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.user-avatar,
.profile-avatar-image {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.user-avatar-fallback {
  display: grid;
  place-items: center;
  background: #273244;
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 900;
}

.profile-avatar-preview {
  width: 72px;
  height: 72px;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  margin: 0;
  border-radius: 50%;
}

.author-avatar-action input { display: none; }

.following-list {
  display: grid;
  gap: 8px;
}

.following-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}

.following-row p { margin: 3px 0 0; color: var(--muted); }
.following-avatar { width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--panel-3); color: var(--text); font-weight: 900; }

.settings-profile-header,
.admin-users-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.settings-profile-header h2,
.settings-profile-header p {
  margin: 0;
}

.settings-profile-header {
  justify-content: flex-start;
}

.admin-users-toolbar h3 {
  margin: 0;
}

select[data-user-role] {
  display: block;
  width: 100%;
}

.detail-cover {
  position: relative;
  overflow: hidden;
}

.detail-cover .cover-image {
  position: absolute;
  inset: 0;
}

.detail-cover::after {
  content: "";
  position: absolute;
  inset: 26%;
  border: 14px solid rgba(222, 228, 235, 0.12);
  border-radius: 999px;
  pointer-events: none;
}

.detail-cover:has(.cover-image)::after {
  display: none;
}

.profile-avatar {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  background: linear-gradient(135deg, #222832, #4b5664);
  color: var(--text);
  font-size: 68px;
  font-weight: 900;
}

.playlist-head .profile-avatar {
  border-radius: 8px;
}

.profile-bio {
  max-width: 680px;
  color: var(--soft);
}

.profile-link {
  color: var(--accent);
}

.profile-hero {
  position: relative;
  overflow: hidden;
}

.profile-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.36), transparent 62%);
  pointer-events: none;
}

.profile-hero > * {
  position: relative;
}

.profile-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.profile-stats article,
.pinned-track {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.profile-stats article {
  display: grid;
  gap: 6px;
  min-height: 92px;
  align-content: center;
  padding: 16px;
}

.profile-stats span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
}

.profile-stats strong {
  color: var(--text);
  font-size: clamp(1.1rem, 2vw, 1.55rem);
}

.pinned-track {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
}

.pinned-track p {
  margin: 4px 0 0;
  color: var(--muted);
}

.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.75fr);
  gap: 18px;
  margin-top: 18px;
}

.track-page-hero {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--panel);
}

.track-hero-backdrop {
  position: absolute;
  inset: -45%;
  opacity: 0.3;
  filter: blur(70px) saturate(1.25);
  transform: scale(1.15);
}

.track-page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(10, 12, 15, 0.96) 0%, rgba(10, 12, 15, 0.78) 52%, rgba(10, 12, 15, 0.38) 100%),
    linear-gradient(0deg, rgba(10, 12, 15, 0.62), transparent 60%);
}

:root[data-theme="light"] .track-page-hero::after {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.84) 56%, rgba(255, 255, 255, 0.52) 100%),
    linear-gradient(0deg, rgba(255, 255, 255, 0.72), transparent 60%);
}

:root[data-theme="warm"] .track-page-hero::after {
  background:
    linear-gradient(90deg, rgba(255, 252, 247, 0.96) 0%, rgba(255, 252, 247, 0.84) 56%, rgba(255, 252, 247, 0.5) 100%),
    linear-gradient(0deg, rgba(255, 252, 247, 0.7), transparent 60%);
}

.track-hero-content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 286px minmax(0, 1fr);
  gap: 34px;
  align-items: center;
  padding: 34px;
}

.track-page-cover {
  position: relative;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.42);
}

.track-page-cover .cover-image {
  position: absolute;
  inset: 0;
}

.track-page-cover::after {
  content: "";
  position: absolute;
  inset: 30%;
  border: 13px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
}

.track-page-cover:has(.cover-image)::after {
  display: none;
}

.track-hero-copy {
  min-width: 0;
  padding-bottom: 4px;
}

.track-hero-copy h1,
.track-hero-copy p {
  margin: 0;
}

.track-hero-copy h1 {
  max-width: 900px;
  margin: 7px 0 10px;
  font-size: clamp(46px, 6vw, 84px);
  line-height: 0.94;
  letter-spacing: -0.045em;
}

.track-type-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}

.track-type-row > .eyebrow {
  flex: 0 0 auto;
}

.track-hero-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 7px;
}

.track-hero-badges span,
.track-hero-badges button {
  display: inline-flex;
  min-height: 29px;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(18, 22, 27, 0.45);
  color: rgba(255, 255, 255, 0.82);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 850;
}

:root[data-theme="light"] .track-hero-badges span,
:root[data-theme="light"] .track-hero-badges button {
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.68);
  color: var(--soft);
}

.track-hero-badges button {
  cursor: pointer;
}

.track-hero-badges .lucide {
  width: 14px;
  height: 14px;
  color: var(--accent-2);
}

.track-hero-author {
  color: var(--muted);
  font-size: 1.05rem;
}

.track-hero-author button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-weight: 900;
}

.track-hero-author button:hover {
  color: var(--accent);
}

.track-hero-originals {
  display: flex;
  max-width: 760px;
  gap: 8px;
  align-items: start;
  margin-top: 9px !important;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.45;
}

.track-hero-originals .lucide {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

.track-hero-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  color: var(--muted);
  font-size: 0.82rem;
}

.track-hero-stats strong {
  color: var(--text);
}

.track-hero-stats i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--muted);
}

.track-primary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
  margin-top: 22px;
}

.track-primary-actions .primary-btn {
  min-width: 142px;
  gap: 9px;
}

.track-round-action {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  background: rgba(18, 22, 27, 0.48);
  color: rgba(255, 255, 255, 0.82);
  cursor: pointer;
}

:root[data-theme="light"] .track-round-action {
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.74);
  color: var(--soft);
}

.track-round-action:hover,
.track-round-action.active {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
}

.track-round-action .lucide {
  width: 19px;
  height: 19px;
}

.track-round-action.active .lucide {
  fill: currentColor;
}

.track-page-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 18px;
  align-items: start;
  margin-top: 18px;
}

.track-page-main {
  display: grid;
  min-width: 0;
  gap: 18px;
}

.track-content-card,
.track-author-card,
.track-facts-card {
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--panel);
}

.track-content-card {
  padding: 22px;
}

.track-content-card h2,
.track-content-card p,
.track-author-card p,
.track-facts-card h2 {
  margin-top: 0;
}

.track-content-card header h2 {
  margin: 3px 0 0;
}

.track-description {
  max-width: 830px;
  margin-bottom: 18px;
  color: var(--soft);
  font-size: 1rem;
  line-height: 1.7;
}

.track-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.track-tag-list .tag-pill {
  border: 1px solid var(--line);
  cursor: pointer;
  font: inherit;
}

.track-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.track-section-heading > span {
  display: grid;
  min-width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 900;
}

.track-source-list {
  display: grid;
  gap: 8px;
}

.track-source-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 13px;
  align-items: center;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--panel-2);
}

.track-source-cover {
  display: grid;
  width: 58px;
  height: 58px;
  overflow: hidden;
  place-items: center;
  border-radius: 8px;
  background: var(--panel-3);
  color: var(--muted);
}

.track-source-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.track-source-cover .lucide {
  width: 21px;
  height: 21px;
}

.track-source-card > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.track-source-card small,
.track-source-card em {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.75rem;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.track-source-card strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.track-source-card > a {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 50%;
  color: var(--muted);
}

.track-source-card > a:hover {
  background: var(--panel-3);
  color: var(--accent);
}

.track-source-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 13px;
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 800;
}

.track-source-link .lucide {
  width: 16px;
  height: 16px;
}

.track-page-sidebar {
  position: sticky;
  top: 18px;
  display: grid;
  gap: 14px;
}

.track-author-card,
.track-facts-card {
  padding: 18px;
}

.track-author-card > p:last-child {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.45;
}

.track-author-profile {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 18px;
  gap: 11px;
  width: 100%;
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.track-author-profile > span {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  font-size: 0.78rem;
  font-weight: 900;
}

.track-author-profile > .lucide {
  width: 17px;
  height: 17px;
  color: var(--muted);
}

.track-author-profile:hover strong,
.track-author-profile:hover > .lucide {
  color: var(--accent);
}

.track-facts-card h2 {
  margin-bottom: 13px;
  font-size: 1rem;
}

.track-facts-card dl {
  display: grid;
  gap: 0;
  margin: 0;
}

.track-facts-card dl > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.track-facts-card dt {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 0.78rem;
}

.track-facts-card dt .lucide {
  width: 15px;
  height: 15px;
}

.track-facts-card dd {
  margin: 0;
  color: var(--soft);
  font-size: 0.78rem;
  font-weight: 800;
  text-align: right;
}

.track-report-link {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 7px;
  margin-top: 13px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.76rem;
}

.track-report-link:hover {
  color: #ff6b7f;
}

.track-report-link .lucide {
  width: 15px;
  height: 15px;
}

.track-inline-empty {
  display: flex;
  min-height: 88px;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px dashed var(--line);
  border-radius: 11px;
  color: var(--muted);
}

.track-inline-empty > .lucide {
  width: 24px;
  height: 24px;
  color: var(--accent);
}

.track-inline-empty > span {
  display: grid;
  gap: 3px;
}

.track-inline-empty strong {
  color: var(--soft);
}

.track-inline-empty small {
  color: var(--muted);
}

.track-content-card.comments-section {
  max-width: none;
}

.track-content-card .comment-form {
  margin-bottom: 16px;
}

.track-content-card .comment-form input {
  border-radius: 10px;
  background: var(--panel-2);
}

.track-content-card .comment {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 11px;
  padding: 12px;
  border-radius: 10px;
  background: var(--panel-2);
}

.comment-avatar {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  background: var(--panel-3);
  color: var(--soft) !important;
  font-size: 0.68rem !important;
  font-weight: 900;
}

.track-content-card .comment p {
  margin: 3px 0 5px;
}

.track-content-card .comment time {
  color: var(--muted);
  font-size: 0.72rem;
}

.track-admin-section,
.track-related-section {
  margin-top: 18px;
}

.track-related-section .section-heading {
  align-items: end;
}

.info-panel {
  padding: 20px;
}

.origin-card {
  grid-column: 1 / -1;
}

.admin-summary-card {
  grid-column: 1 / -1;
  border-color: rgba(255, 24, 184, 0.24);
  background: rgba(255, 24, 184, 0.045);
}

.review-hero {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  margin-bottom: 24px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
}

.review-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.wide-review {
  grid-column: 1 / -1;
}

.admin-summary-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.admin-summary-head h2,
.admin-summary-head p {
  margin: 0;
}

.admin-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.admin-summary-grid section {
  min-height: 126px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}

.admin-summary-grid h3 {
  margin: 0 0 10px;
  font-size: 0.95rem;
}

.admin-summary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.origin-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.origin-list div {
  display: grid;
  gap: 8px;
  min-height: 86px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}

.origin-list span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 800;
}

.origin-list strong {
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quality-badge {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--soft);
  font-size: 0.78rem;
  font-weight: 900;
  white-space: nowrap;
}

.quality-badge.ok {
  border-color: rgba(255, 24, 184, 0.42);
  background: rgba(255, 24, 184, 0.08);
}

.quality-badge.warning {
  border-color: rgba(214, 161, 58, 0.42);
  background: rgba(214, 161, 58, 0.08);
  color: #d6a13a;
}

.quality-badge.danger {
  border-color: rgba(229, 111, 125, 0.42);
  background: rgba(229, 111, 125, 0.1);
  color: #f0a5ae;
}

.quality-badge[data-quality-filter] {
  cursor: pointer;
}

.quality-badge[data-quality-filter]:hover,
.quality-badge[data-quality-filter]:focus-visible {
  border-color: rgba(222, 228, 235, 0.42);
  outline: 0;
  color: var(--text);
}

.moderation-history {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.moderation-history h3 {
  margin: 0;
  font-size: 1rem;
}

.moderation-history p {
  margin: 0;
  color: var(--muted);
}

.moderation-history span {
  color: var(--soft);
}

.compact-history {
  gap: 4px;
  margin-top: 8px;
  padding-top: 8px;
}

.compact-history p {
  font-size: 0.84rem;
}

.info-panel h2,
.info-panel p {
  margin-top: 0;
}

.info-panel p {
  color: var(--muted);
  line-height: 1.6;
}

.meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0 0;
}

.meta-grid div {
  padding: 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
}

.meta-grid dt {
  color: var(--muted);
  font-size: 13px;
}

.meta-grid dd {
  margin: 4px 0 0;
  font-size: 22px;
  font-weight: 900;
}

.comments-section {
  max-width: 920px;
}

.comment-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  margin-bottom: 12px;
}

.comment-attachment-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 12px; color: var(--soft); cursor: pointer; }
.comment-attachment-btn:hover { color: var(--accent); border-color: var(--accent); }
.comment-attachment-btn input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.comment-attachment-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -2px 0 12px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-2);
}
.comment-attachment-preview[hidden] { display: none; }
.comment-attachment-preview img { width: 54px; height: 54px; flex: 0 0 54px; border-radius: 8px; object-fit: cover; background: var(--panel); }
.comment-attachment-preview div { display: grid; min-width: 0; gap: 3px; }
.comment-attachment-preview strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comment-attachment-preview small { color: var(--soft); }
.comment-attachment-preview .icon-button { margin-left: auto; }

.catalog-loading-note { display: inline-flex; align-items: center; gap: 8px; color: var(--soft); }
.catalog-loading-note svg { animation: catalog-spin 0.9s linear infinite; }
.home-spotlight-loading { display: grid; grid-template-columns: minmax(170px, 0.85fr) minmax(240px, 1.15fr); gap: 24px; align-items: center; width: 100%; }
.catalog-loading-card { display: flex; align-items: center; gap: 16px; min-height: 116px; width: 100%; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); overflow: hidden; }
.catalog-loading-card > span { width: 86px; height: 86px; flex: 0 0 86px; border-radius: 12px; }
.catalog-loading-card > div { display: grid; flex: 1; gap: 10px; }
.catalog-loading-card i { display: block; height: 12px; border-radius: 999px; }
.catalog-loading-card i:nth-child(1) { width: 72%; }
.catalog-loading-card i:nth-child(2) { width: 92%; }
.catalog-loading-card i:nth-child(3) { width: 48%; }
.catalog-loading-card > span, .catalog-loading-card i { background: linear-gradient(100deg, var(--panel-2) 25%, color-mix(in srgb, var(--panel-3) 78%, var(--text)) 50%, var(--panel-2) 75%); background-size: 220% 100%; animation: catalog-shimmer 1.15s ease-in-out infinite; }
@keyframes catalog-shimmer { to { background-position: -220% 0; } }
@keyframes catalog-spin { to { transform: rotate(360deg); } }

.comment-form input {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 999px;
  outline: 0;
  background: var(--panel);
  color: var(--text);
  padding: 0 16px;
}

.comment-list {
  display: grid;
  gap: 10px;
}

.comment-list > .track-inline-empty { display: none; }
.comment-branch { display: grid; gap: 10px; }
.comment-reply-branch { margin: 12px 0 0 18px; padding-left: 14px; border-left: 2px solid var(--line); }
.comment-replying { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 34px; padding: 7px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); color: var(--soft); font-size: 13px; }
.comment-replying .muted-link { padding: 0; }

.comment {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
}

.comment-avatar { display: grid; place-items: center; width: 40px; height: 40px; overflow: hidden; border: 0; border-radius: 50%; background: var(--panel-3); color: var(--soft); font-weight: 900; }
.comment-avatar img { width: 100%; height: 100%; object-fit: cover; }
.comment-attachment { display: block; width: min(360px, 100%); margin: 9px 0; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; }
.comment-attachment img { display: block; width: 100%; max-height: 360px; object-fit: contain; background: var(--panel); }
.comment-actions { display: flex; gap: 10px; margin-top: 8px; }
.comment-actions .muted-link { display: inline-flex; align-items: center; gap: 5px; }
.comment-actions .muted-link.active { color: var(--accent); }
.danger-text { color: var(--danger, #df667b) !important; }

.comment p {
  margin: 6px 0;
  color: var(--soft);
}

.comment span {
  color: var(--muted);
  font-size: 13px;
}

.toast-stack {
  position: fixed;
  right: 18px;
  bottom: 112px;
  z-index: 50;
  display: grid;
  gap: 10px;
  width: min(340px, calc(100vw - 36px));
}

.toast {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
  color: var(--text);
}

:root[data-theme="light"] .toast {
  background: #ffffff;
  border-color: rgba(27, 38, 50, 0.18);
  color: #171b22;
  box-shadow: 0 12px 30px rgba(39, 53, 68, 0.18);
}

/* Queue and notices are persistent surfaces, so their contrast must follow
   the selected theme instead of inheriting a dark fixed background. */
:root[data-theme="dim"] .queue-panel,
:root[data-theme="dim"] .toast { background: #181e2d; color: #edf2ff; }
:root[data-theme="dim"] .queue-item { background: #20283a; }
:root[data-theme="dim"] .queue-head button { background: #293349; color: #edf2ff; }
:root[data-theme="dim"] .notification-card.unread { border-color: rgb(166 120 255 / .62); background: linear-gradient(100deg, rgb(166 120 255 / .17), var(--panel)); }

:root[data-theme="warm"] .queue-panel,
:root[data-theme="warm"] .toast { background: #fffcf7; color: #30261f; }
:root[data-theme="warm"] .queue-item { background: #f2e9dc; }
:root[data-theme="warm"] .queue-head button { background: #e7d9c8; color: #30261f; }
:root[data-theme="warm"] .notification-card.unread { border-color: rgb(214 66 141 / .58); background: linear-gradient(100deg, rgb(214 66 141 / .13), var(--panel)); }

.settings-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.8fr);
  gap: 18px;
}

.settings-panel {
  display: grid;
  gap: 14px;
  align-content: start;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
}

.settings-panel h2,
.settings-panel p {
  margin: 0;
}

.settings-panel label {
  display: grid;
  gap: 8px;
  color: var(--soft);
  font-weight: 700;
}

.settings-panel input,
.settings-panel select,
.settings-panel textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  outline: 0;
  background: var(--panel);
  color: var(--text);
}

.settings-panel input,
.settings-panel select {
  height: 46px;
  padding: 0 14px;
}

.settings-panel textarea {
  padding: 12px 14px;
  resize: vertical;
}

.settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.profile-activity {
  display: grid;
  gap: 18px;
}

.profile-activity-head {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.profile-activity-head p,
.profile-activity-row {
  margin: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
}

.profile-activity-head span,
.profile-activity-row span {
  display: block;
  color: var(--muted);
  font-size: 0.82rem;
}

.profile-activity-list {
  display: grid;
  gap: 8px;
}

.profile-activity-list h3 {
  margin: 0;
  font-size: 0.95rem;
}

.profile-activity-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  color: var(--text);
  text-align: left;
}

.settings-account-hero {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr) auto auto;
  gap: 22px;
  align-items: center;
  margin: 10px 0 22px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 24, 184, 0.16), transparent 34%),
    radial-gradient(circle at 90% 100%, rgba(143, 91, 255, 0.13), transparent 38%),
    var(--panel);
}

.settings-account-hero .profile-avatar-preview {
  width: 116px;
  height: 116px;
  max-width: none;
  aspect-ratio: auto;
  align-self: center;
  margin: 0;
  border-radius: 22px;
}

.settings-account-copy h1,
.settings-account-copy p {
  margin: 0;
}

.settings-account-copy h1 {
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1;
}

.settings-account-copy > p:last-child {
  margin-top: 8px;
  color: var(--muted);
}

.settings-account-summary {
  display: flex;
  gap: 8px;
}

.settings-account-summary span {
  min-width: 88px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--muted);
  font-size: 0.76rem;
  text-align: center;
}

.settings-account-summary strong {
  display: block;
  margin-bottom: 2px;
  color: var(--text);
  font-size: 1.15rem;
}

.settings-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(330px, 0.55fr);
  gap: 18px;
  align-items: start;
}

.settings-sidebar {
  display: grid;
  gap: 18px;
}

.settings-card {
  display: grid;
  gap: 18px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
}

.settings-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.settings-card-head h2,
.settings-card-head p {
  margin: 0;
}

.settings-card-head h2 {
  font-size: 1.35rem;
}

.settings-card-head div > p:last-child {
  margin-top: 6px;
  color: var(--muted);
  line-height: 1.5;
}

.settings-card-head > .lucide {
  width: 22px;
  height: 22px;
  color: var(--accent);
}

.settings-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.settings-field-grid label,
.settings-card .auth-form label {
  display: grid;
  gap: 8px;
  color: var(--soft);
  font-weight: 750;
}

.settings-field-grid input,
.settings-field-grid textarea,
.settings-card .auth-form input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  outline: none;
  background: var(--panel-2);
  color: var(--text);
}

.settings-field-grid input,
.settings-card .auth-form input {
  height: 46px;
  padding: 0 13px;
}

.settings-field-grid textarea {
  min-height: 104px;
  padding: 12px 13px;
  resize: vertical;
}

.settings-field-grid input:focus,
.settings-field-grid textarea:focus,
.settings-card .auth-form input:focus {
  border-color: rgba(255, 24, 184, 0.65);
  box-shadow: 0 0 0 3px rgba(255, 24, 184, 0.1);
}

.settings-field-wide {
  grid-column: 1 / -1;
}

.settings-file-field {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 74px;
  padding: 12px 14px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
}

.settings-file-field span {
  min-width: 0;
}

.settings-file-field strong,
.settings-file-field small {
  display: block;
}

.settings-file-field small {
  margin-top: 4px;
  color: var(--muted);
  font-weight: 500;
}

.settings-file-field input {
  width: min(270px, 48%);
  padding: 10px;
}

.settings-toggle-list {
  display: grid;
  gap: 10px;
}

.settings-toggle {
  position: relative;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 48px;
  gap: 18px !important;
  align-items: center;
  min-height: 72px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
  cursor: pointer;
}

.settings-toggle strong,
.settings-toggle small {
  display: block;
}

.settings-toggle small {
  margin-top: 4px;
  color: var(--muted);
  font-weight: 500;
  line-height: 1.4;
}

.settings-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.settings-toggle i {
  position: relative;
  width: 46px;
  height: 26px;
  border-radius: 999px;
  background: var(--panel-3);
  transition: background 160ms ease;
}

.settings-toggle i::after {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--muted);
  content: "";
  transition: transform 160ms ease, background 160ms ease;
}

.settings-toggle input:checked + i {
  background: var(--accent);
}

.settings-toggle input:checked + i::after {
  background: #160414;
  transform: translateX(20px);
}

.settings-toggle:focus-within {
  border-color: rgba(255, 24, 184, 0.58);
}

.settings-section-divider {
  height: 1px;
  background: var(--line);
}

.settings-save-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-top: 2px;
}

.settings-save-bar p {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.settings-save-bar .lucide {
  width: 17px;
  height: 17px;
  color: var(--accent-2);
}

.settings-session-card > strong {
  color: var(--soft);
  line-height: 1.45;
}

.settings-session-card .session-meta {
  margin-top: 0;
}

.settings-session-card .danger {
  width: 100%;
}

.about-compact {
  display: grid;
  gap: 16px;
  margin-top: 10px;
}

.about-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 34px;
  align-items: center;
  min-height: 280px;
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid var(--line);
  border-radius: 20px;
  background:
    radial-gradient(circle at 10% 12%, rgba(255, 24, 184, 0.2), transparent 34%),
    radial-gradient(circle at 90% 90%, rgba(143, 91, 255, 0.18), transparent 36%),
    var(--panel);
}

.about-hero h1,
.about-hero p {
  margin: 0;
}

.about-hero h1 {
  max-width: 760px;
  font-size: clamp(36px, 5vw, 68px);
  line-height: 0.98;
  letter-spacing: -0.045em;
}

.about-hero div > p:not(.eyebrow) {
  max-width: 650px;
  margin-top: 16px;
  color: var(--soft);
  line-height: 1.6;
}

.about-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(90px, 1fr));
  gap: 8px;
}

.about-stats article {
  min-width: 100px;
  padding: 18px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(8, 10, 14, 0.36);
  text-align: center;
}

:root[data-theme="light"] .about-stats article {
  background: rgba(255, 255, 255, 0.62);
}

.about-stats strong,
.about-stats span {
  display: block;
}

.about-stats strong {
  font-size: 1.9rem;
}

.about-stats span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.76rem;
}

.about-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--line);
}

.about-facts section {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 12px;
  padding: 14px 16px;
  background: var(--panel);
}

.about-facts span {
  color: var(--muted);
}

.about-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 12px 15px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--muted);
  font-size: 0.82rem;
}

.about-notice .lucide {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  color: var(--accent-2);
}

.role-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin-left: 6px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(53, 208, 186, 0.14);
  color: var(--soft);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.locked-panel {
  grid-column: 1 / -1;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
}

.locked-panel h2,
.locked-panel p {
  margin: 0;
}

.locked-panel p {
  margin-top: 8px;
  color: var(--muted);
}

.studio-insights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

.insight-card {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
}

.insight-card.wide {
  grid-column: 1 / -1;
}

.insight-card h3,
.insight-card p {
  margin: 0;
}

.insight-card p {
  color: var(--muted);
}

.insight-list {
  display: grid;
  gap: 8px;
}

.insight-row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 42px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.14);
  color: var(--text);
  text-align: left;
}

.insight-row span {
  color: var(--muted);
  font-weight: 900;
}

.insight-row strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.insight-row em {
  color: var(--soft);
  font-style: normal;
  font-weight: 800;
}

.studio-upload-panel {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}

.studio-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 22px;
}

.studio-list-heading {
  margin-bottom: 12px;
}

.studio-upload-list {
  display: grid;
  gap: 10px;
}

.studio-row {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) minmax(360px, auto);
  gap: 16px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.055);
}

.studio-row p {
  margin: 6px 0 0;
  color: var(--muted);
}

.studio-cover {
  position: relative;
  overflow: hidden;
  width: 76px;
  height: 76px;
  border: 1px solid var(--line);
  border-radius: 9px;
}

.studio-cover .cover-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.studio-track-copy {
  min-width: 0;
}

.studio-authors {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-track-metrics {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.studio-track-metrics > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--panel-3);
  color: var(--soft);
  font-size: 0.8rem;
}

.studio-track-metrics .lucide {
  width: 15px;
  height: 15px;
}

.studio-track-metrics .studio-status {
  font-weight: 800;
}

.studio-status.status-pending {
  background: rgba(255, 184, 77, 0.14);
  color: #d8901f;
}

.studio-status.status-approved {
  background: rgba(53, 208, 186, 0.14);
  color: var(--accent-2);
}

.studio-status.status-blocked {
  background: rgba(255, 91, 119, 0.14);
  color: #ff6b83;
}

.studio-tags {
  margin-top: 4px;
}

.studio-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.studio-actions .ghost-btn {
  justify-content: flex-start;
  white-space: nowrap;
}

.tag-pill {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  margin: 4px 6px 0 0;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(53, 208, 186, 0.12);
  color: var(--soft);
  font-size: 13px;
}

.api-status {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  min-height: 28px;
  align-items: center;
  margin: 12px 0 0;
  padding: 0 10px;
  border: 1px solid rgba(255, 107, 127, 0.28);
  border-radius: 999px;
  color: #ffc2cc;
  background: rgba(255, 107, 127, 0.12);
  font-weight: 800;
}

.api-status.online {
  border-color: rgba(255, 24, 184, 0.28);
  color: var(--soft);
  background: rgba(255, 24, 184, 0.08);
}

.queue-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 92px;
  z-index: 20;
  width: min(420px, 100vw);
  padding: 20px;
  border-left: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);
  transform: translateX(105%);
  transition: transform 180ms ease;
  overflow-y: auto;
}

.queue-panel.open {
  transform: translateX(0);
}

.queue-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.queue-head-actions {
  display: flex;
  gap: 8px;
}

.queue-head h2 {
  margin: 0;
}

.queue-head button {
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: var(--panel-3);
  color: var(--text);
}

.queue-item {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto 36px;
  gap: 10px;
  align-items: center;
  min-height: 64px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel-2) 82%, transparent);
}

.queue-section { display: grid; gap: 8px; }
.queue-section + .queue-section { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.queue-section h3 { display: inline-flex; align-items: center; gap: 7px; margin: 0; color: var(--soft); font-size: .82rem; text-transform: uppercase; }
.queue-section h3 .lucide { width: 15px; height: 15px; color: var(--accent); }
.queue-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.queue-section-heading > div { min-width: 0; }
.queue-section-heading p { margin: 4px 0 0; color: var(--muted); font-size: .76rem; line-height: 1.35; }
.queue-section-heading > span { display: grid; width: 25px; height: 25px; flex: 0 0 auto; place-items: center; border-radius: 999px; background: var(--panel-3); color: var(--soft); font-size: .74rem; font-weight: 900; }
.queue-current-section { margin-left: 0; }
.queue-current-section > h3 { justify-self: start; }
.queue-current-section .queue-item { grid-template-columns: 36px minmax(0, 1fr); border-color: color-mix(in srgb, var(--accent) 48%, var(--line)); background: color-mix(in srgb, var(--accent) 10%, var(--panel-2)); }
.queue-recommendations-section { padding-bottom: 6px; }
.queue-recommendation-list { display: grid; gap: 6px; }
.queue-recommendation-item { display: grid; grid-template-columns: 34px minmax(0, 1fr) 34px; gap: 9px; align-items: center; min-height: 52px; padding: 6px; border: 1px solid color-mix(in srgb, var(--line) 86%, transparent); border-radius: 10px; background: color-mix(in srgb, var(--panel-2) 70%, transparent); }
.queue-recommendation-item .row-play,
.queue-recommendation-item .row-like { width: 34px; height: 34px; border-radius: 9px; }
.queue-recommendation-item > div { min-width: 0; }
.queue-recommendation-item > div > span { display: block; overflow: hidden; color: var(--muted); font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.queue-recommendation-item .row-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.queue-item[draggable="true"] { cursor: grab; }
.queue-item.is-dragging { opacity: 0.45; }
.queue-item.is-drag-over { border-color: var(--accent); }
.queue-item.is-current { border-color: rgba(255, 24, 184, 0.42); }
.queue-item-main { min-width: 0; }
.queue-item-main > span { display: block; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.queue-position { color: var(--muted); font-size: 12px; white-space: nowrap; }
.queue-remove { width: 32px; height: 32px; }

.fullscreen-player {
  --fullscreen-tone: 42 55 75;
  --fullscreen-deep: 21 25 31;
  --fullscreen-accent: 118 132 158;
  position: fixed;
  inset: 0;
  z-index: 100;
  min-width: 0;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background:
    radial-gradient(ellipse 110% 62% at 50% -10%, rgb(var(--fullscreen-tone) / 0.7) 0%, rgb(var(--fullscreen-tone) / 0.28) 45%, transparent 78%),
    linear-gradient(180deg, rgb(var(--fullscreen-deep)) 0%, #0a0c10 72%, #080a0d 100%);
  background-attachment: fixed;
  color: #f4f6f8;
}

.fullscreen-player:not([hidden]) {
  animation: fullscreen-player-enter 420ms cubic-bezier(.2, .8, .2, 1) both;
}

.fullscreen-player.is-closing {
  pointer-events: none;
  animation: fullscreen-player-exit 260ms cubic-bezier(.4, 0, 1, 1) both;
}

.fullscreen-player-backdrop {
  display: none;
  position: fixed;
  inset: -12%;
  opacity: 0.2;
  filter: blur(90px) saturate(1.4);
  transform: scale(1.12);
}

.fullscreen-player:not([hidden]) .fullscreen-player-backdrop {
  animation: fullscreen-backdrop-breathe 12s ease-in-out infinite alternate;
}

.fullscreen-player::after {
  display: none;
  position: fixed;
  inset: 0;
  background:
    linear-gradient(180deg, rgb(var(--fullscreen-deep) / 0.14), rgba(7, 9, 13, 0.64) 76%, rgba(7, 9, 13, 0.8)),
    radial-gradient(circle at 50% 24%, rgb(var(--fullscreen-tone) / 0.14), transparent 58%);
  content: "";
  pointer-events: none;
}

.fullscreen-player-head,
.fullscreen-player-layout,
.fullscreen-track-details {
  position: relative;
  z-index: 1;
}

.fullscreen-player-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 86px;
  padding: 22px clamp(24px, 4vw, 64px);
}

.fullscreen-player-head .eyebrow,
.fullscreen-player-head strong {
  display: block;
  margin: 0;
}

.fullscreen-player-head strong {
  margin-top: 3px;
}

.fullscreen-close {
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #f4f6f8;
}

.fullscreen-close:hover {
  background: rgba(255, 255, 255, 0.15);
}

.fullscreen-player-layout {
  display: grid;
  grid-template-columns: minmax(320px, 0.86fr) minmax(460px, 1.14fr);
  gap: clamp(44px, 7vw, 112px);
  align-items: center;
  width: min(1420px, calc(100% - 80px));
  min-height: calc(100vh - 112px);
  margin: 0 auto;
  padding: 16px 0 64px;
}

.fullscreen-player-cover {
  position: relative;
  width: min(100%, 660px);
  aspect-ratio: 1;
  box-sizing: border-box;
  justify-self: end;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: clamp(18px, 2.4vw, 34px);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.48);
}

.fullscreen-player-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fullscreen-player:not([hidden]) .fullscreen-player-cover {
  animation: fullscreen-cover-enter 560ms 70ms cubic-bezier(.2, .8, .2, 1) both;
}

.fullscreen-player.is-track-changing .fullscreen-player-layout {
  animation: fullscreen-track-refresh 220ms cubic-bezier(.2, .72, .2, 1) both;
}

.fullscreen-player.is-compact-layout .fullscreen-player-layout {
  grid-template-columns: minmax(0, 1fr) !important;
}

.fullscreen-player.is-compact-layout .fullscreen-player-cover {
  overflow: hidden;
}

.fullscreen-player-content {
  display: grid;
  gap: clamp(26px, 4vh, 48px);
  width: min(680px, 100%);
}

.fullscreen-track-copy h2,
.fullscreen-track-copy p {
  margin: 0;
}

.fullscreen-track-copy h2 {
  overflow-wrap: anywhere;
  font-size: clamp(42px, 6vw, 92px);
  line-height: 0.94;
  letter-spacing: -0.055em;
}

.fullscreen-track-copy > p:last-child {
  margin-top: 16px;
  color: rgba(244, 246, 248, 0.68);
  font-size: clamp(16px, 1.6vw, 23px);
  line-height: 1.45;
}

.fullscreen-context {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.fullscreen-context-card {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background: rgb(var(--fullscreen-tone) / 0.15);
}

.fullscreen-context-card.is-next {
  border-color: rgb(var(--fullscreen-accent) / 0.44);
  background: rgb(var(--fullscreen-tone) / 0.24);
}

.fullscreen-context-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 9px;
  color: rgba(244, 246, 248, 0.62);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.fullscreen-context-label .lucide { width: 14px; height: 14px; }

.fullscreen-context-track {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

.fullscreen-context-cover {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  overflow: hidden;
  place-items: center;
  border-radius: 9px;
  background: var(--panel-3);
}

.fullscreen-context-cover .cover-image,
.fullscreen-context-cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fullscreen-context-copy { min-width: 0; }
.fullscreen-context-copy strong,
.fullscreen-context-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fullscreen-context-copy strong { font-size: 0.84rem; }
.fullscreen-context-copy small { margin-top: 3px; color: rgba(244, 246, 248, 0.58); font-size: 0.74rem; }
.fullscreen-context-empty { color: rgba(244, 246, 248, 0.5); font-size: 0.78rem; line-height: 1.35; }

.fullscreen-progress {
  display: grid;
  gap: 8px;
}

.fullscreen-progress input {
  width: 100%;
  accent-color: rgb(var(--fullscreen-accent));
}

.fullscreen-progress > div {
  display: flex;
  justify-content: space-between;
  color: rgba(244, 246, 248, 0.62);
  font-size: 0.82rem;
}

.fullscreen-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2vw, 24px);
}

.fullscreen-controls button {
  display: grid;
  width: 50px;
  height: 50px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(244, 246, 248, 0.76);
  cursor: pointer;
  touch-action: manipulation;
}

.fullscreen-controls button:hover,
.fullscreen-controls button.active-toggle {
  background: rgb(var(--fullscreen-tone) / 0.24);
  color: rgb(var(--fullscreen-accent));
}

.fullscreen-controls .fullscreen-play-toggle {
  width: 76px;
  height: 76px;
  background: #f4f6f8;
  color: #0a0c10;
}

.fullscreen-controls .fullscreen-play-toggle:hover {
  background: rgb(var(--fullscreen-accent));
  color: #0a0c10;
  transform: scale(1.04);
}

.fullscreen-controls .fullscreen-play-toggle .lucide {
  width: 30px;
  height: 30px;
}

.fullscreen-player-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.fullscreen-player-actions button,
.fullscreen-player-actions label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 13px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  background: rgb(var(--fullscreen-tone) / 0.16);
  color: rgba(244, 246, 248, 0.82);
  cursor: pointer;
  touch-action: manipulation;
}

.fullscreen-player-actions button:hover,
.fullscreen-player-actions button.liked {
  border-color: rgb(var(--fullscreen-accent) / 0.74);
  background: rgb(var(--fullscreen-tone) / 0.28);
  color: #ffffff;
}

.fullscreen-player-actions button strong {
  display: grid;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  font-size: 0.72rem;
}

.fullscreen-player-actions label input {
  width: 92px;
  accent-color: rgb(var(--fullscreen-accent));
}

.fullscreen-player-actions .lucide,
.fullscreen-close .lucide {
  width: 18px;
  height: 18px;
}

:root[data-theme="light"] .fullscreen-player {
  background: #eef1f5;
  color: #171b22;
}

:root[data-theme="light"] .fullscreen-player-backdrop {
  opacity: 0.2;
}

:root[data-theme="light"] .fullscreen-player::after {
  background:
    linear-gradient(180deg, rgba(244, 246, 248, 0.4), rgba(238, 241, 245, 0.84)),
    radial-gradient(circle at 50% 30%, transparent 0, rgba(238, 241, 245, 0.38) 72%);
}

:root[data-theme="light"] .fullscreen-close,
:root[data-theme="light"] .fullscreen-player-actions button,
:root[data-theme="light"] .fullscreen-player-actions label {
  border-color: rgba(27, 38, 50, 0.14);
  background: rgba(255, 255, 255, 0.62);
  color: #26303b;
}

:root[data-theme="light"] .fullscreen-close:hover,
:root[data-theme="light"] .fullscreen-player-actions button:hover {
  background: #ffffff;
}

:root[data-theme="light"] .fullscreen-track-copy > p:last-child,
:root[data-theme="light"] .fullscreen-progress > div {
  color: rgba(23, 27, 34, 0.62);
}

:root[data-theme="light"] .fullscreen-controls button {
  color: rgba(23, 27, 34, 0.7);
}

:root[data-theme="light"] .fullscreen-controls button:hover,
:root[data-theme="light"] .fullscreen-controls button.active-toggle {
  background: rgba(255, 24, 184, 0.1);
  color: #be0b83;
}

:root[data-theme="light"] .fullscreen-controls .fullscreen-play-toggle {
  background: #171b22;
  color: #ffffff;
}

:root[data-theme="light"] .fullscreen-player-actions button strong {
  background: rgba(27, 38, 50, 0.09);
}

:root[data-theme="light"] .fullscreen-context-card {
  border-color: rgba(27, 38, 50, 0.14);
  background: rgba(255, 255, 255, 0.58);
}

:root[data-theme="light"] .fullscreen-context-card.is-next { background: rgba(255, 24, 184, 0.08); }
:root[data-theme="light"] .fullscreen-context-label,
:root[data-theme="light"] .fullscreen-context-copy small,
:root[data-theme="light"] .fullscreen-context-empty { color: rgba(23, 27, 34, 0.58); }

@keyframes fullscreen-player-enter {
  from { opacity: 0; transform: scale(1.018); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes fullscreen-player-exit {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(.985); }
}

@keyframes fullscreen-cover-enter {
  from { opacity: 0; transform: translateY(18px) scale(.96) rotate(-1.2deg); }
  to { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}

@keyframes fullscreen-track-refresh {
  from { opacity: .32; transform: scale(.992); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fullscreen-backdrop-breathe {
  from { transform: scale(1.08) translate3d(-1%, -1%, 0); }
  to { transform: scale(1.18) translate3d(1%, 1%, 0); }
}

@media (prefers-reduced-motion: no-preference) {
  .view.active-view > :is(.page-title, .content-section, .home-welcome, .upload-hero) {
    animation: page-section-enter 360ms ease both;
  }

  .nav-item,
  .home-shortcut-list button,
  .track-card,
  .track-row,
  .chart-row { transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease; }

  .home-shortcut-list button:hover,
  .track-card:hover { transform: translateY(-3px); }
}

@keyframes page-section-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

body.fullscreen-player-open {
  overflow: hidden;
}

body.fullscreen-player-open .queue-panel {
  bottom: 0;
  z-index: 130;
}

body.fullscreen-player-open .modal-backdrop {
  z-index: 140;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: start center;
  padding: 18px;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.58);
}

.modal-backdrop[hidden] {
  display: none;
}

.modal {
  width: min(460px, 100%);
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
  max-height: calc(100vh - 36px);
  overflow-y: auto;
}

.modal-wide {
  width: min(720px, 100%);
}

.modal-form {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}

.modal-form label {
  display: grid;
  gap: 8px;
  color: var(--soft);
  font-weight: 700;
}

.modal-form input,
.modal-form select,
.modal-form textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  outline: 0;
  background: var(--panel-2);
  color: var(--text);
}

.playlist-modal-track {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin: 0 0 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 24, 184, 0.06);
}

.playlist-modal-track-cover,
.playlist-option-cover {
  position: relative;
  display: grid;
  overflow: hidden;
  place-items: center;
  background: linear-gradient(135deg, #313a49, #171b23);
  background-position: center;
  background-size: cover;
  color: var(--soft);
  font-weight: 900;
}

.playlist-modal-track-cover { width: 48px; height: 48px; border-radius: 10px; }
.playlist-modal-track > div:last-child { min-width: 0; }
.playlist-modal-track span,
.playlist-modal-track strong,
.playlist-modal-track small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.playlist-modal-track span,
.playlist-modal-track small { color: var(--muted); font-size: 0.75rem; }
.playlist-modal-track strong { margin: 3px 0; }
.playlist-modal-hint { margin: 0 0 12px; color: var(--muted); font-size: 0.82rem; }

.modal-form input,
.modal-form select {
  height: 44px;
  padding: 0 12px;
}

.modal-form textarea {
  padding: 12px;
  resize: vertical;
}

.playlist-editor-modal {
  width: min(760px, 100%);
  padding: 0;
  overflow: hidden;
  border-radius: 18px;
}

.author-editor-modal {
  width: min(760px, 100%);
  padding: 0;
  overflow: hidden;
  border-radius: 18px;
}

.author-editor-form {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 24px;
  padding: 24px 26px 0;
}

.author-editor-avatar-column {
  min-width: 0;
}

.author-avatar-field {
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--panel-2);
  cursor: pointer;
}

.author-avatar-field input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.author-avatar-field:hover .playlist-cover-overlay,
.author-avatar-field:focus-within .playlist-cover-overlay {
  opacity: 1;
}

.author-editor-avatar-preview,
.author-editor-avatar-preview img {
  width: 100%;
  height: 100%;
}

.author-editor-avatar-preview {
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #242b35, #14171c);
  color: var(--text);
  font-size: 3rem;
  font-weight: 900;
}

.author-editor-avatar-preview img {
  display: block;
  object-fit: cover;
}

.playlist-editor-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 26px 20px;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(circle at 92% 0%, rgba(255, 24, 184, 0.15), transparent 34%),
    var(--panel);
}

.playlist-editor-head h2,
.playlist-editor-head p {
  margin: 0;
}

.playlist-editor-head h2 {
  margin: 3px 0 6px;
  font-size: 1.65rem;
}

.playlist-editor-head > div > p:last-child {
  color: var(--muted);
  font-size: 0.9rem;
}

.modal-close-btn {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--panel-2);
  color: var(--soft);
  cursor: pointer;
}

.modal-close-btn:hover {
  border-color: var(--accent);
  color: var(--text);
}

.playlist-editor-form {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 24px;
  padding: 24px 26px 0;
}

.playlist-editor-cover-column {
  min-width: 0;
}

.playlist-cover-field {
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--panel-2);
  cursor: pointer;
}

.playlist-cover-field input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.playlist-cover-field .playlist-cover-preview {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 78% 20%, rgba(255, 24, 184, 0.3), transparent 30%),
    linear-gradient(145deg, #242b35, #14171c);
  color: rgba(255, 255, 255, 0.92);
  font-size: 3rem;
}

.playlist-cover-field .playlist-cover-preview:empty {
  display: block;
}

.playlist-cover-field .playlist-cover-preview > span {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
}

.playlist-cover-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 5px;
  padding: 18px;
  background: rgba(8, 10, 13, 0.72);
  color: #fff;
  text-align: center;
  opacity: 0;
  transition: opacity 160ms ease;
}

.playlist-cover-overlay .lucide {
  width: 26px;
  height: 26px;
  margin-bottom: 3px;
}

.playlist-cover-overlay small {
  color: rgba(255, 255, 255, 0.68);
}

.playlist-cover-field:hover .playlist-cover-overlay,
.playlist-cover-field:focus-within .playlist-cover-overlay {
  opacity: 1;
}

.playlist-cover-file-name {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.4;
  text-align: center;
}

.playlist-editor-fields {
  display: grid;
  gap: 17px;
}

.playlist-editor-fields label {
  display: grid;
  gap: 8px;
  color: var(--soft);
  font-weight: 800;
}

.playlist-editor-fields input,
.playlist-editor-fields textarea,
.playlist-editor-fields select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  outline: 0;
  background: var(--panel-2);
  color: var(--text);
  font: inherit;
}

.playlist-editor-fields input {
  min-height: 46px;
  padding: 0 14px;
}

.playlist-editor-fields select {
  min-height: 46px;
  padding: 0 42px 0 14px;
  appearance: none;
  background-color: var(--panel-2);
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 19px) 19px, calc(100% - 13px) 19px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.playlist-editor-fields textarea {
  min-height: 110px;
  padding: 13px 14px;
  resize: vertical;
}

.playlist-editor-fields input:focus,
.playlist-editor-fields textarea:focus,
.playlist-editor-fields select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 24, 184, 0.1);
}

.playlist-editor-fields .taxonomy-open-btn {
  width: 100%;
  min-height: 46px;
  justify-content: flex-start;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-2);
  color: var(--text);
  font: inherit;
  font-weight: 700;
}

.playlist-editor-fields .taxonomy-open-btn > .lucide:last-child { margin-left: auto; color: var(--muted); }
.playlist-editor-fields .taxonomy-open-btn:hover { border-color: var(--accent); }

.community-playlist-card { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 20px; align-items: stretch; padding: 16px; border-radius: 14px; transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.community-playlist-card:hover, .community-playlist-card:focus-visible { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); background: var(--panel-2); transform: translateY(-2px); outline: none; }
.community-playlist-card > .playlist-cover { width: 168px; height: 168px; margin: 0; border-radius: 12px; background: var(--panel-3); color: var(--soft); font-size: 2.15rem; font-weight: 900; }
.community-playlist-copy { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; }
.community-playlist-card .playlist-card-head { width: 100%; }
.community-playlist-card .playlist-card-head h3 { font-size: 1.2rem; }
.community-playlist-card .playlist-card-head .eyebrow { margin: 0 0 4px; }
.community-playlist-card .playlist-card-head span { display: inline-flex; align-items: center; gap: 5px; }
.community-playlist-card .playlist-card-head span .lucide { width: 14px; height: 14px; }
.community-playlist-owner { display: inline-flex; align-items: center; gap: 6px; }
.community-playlist-owner .lucide { width: 15px; height: 15px; }
.user-profile-link { color: var(--soft); font-weight: 800; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent); text-underline-offset: 3px; }
.user-profile-link:hover { color: var(--accent); }
.community-playlist-description { display: -webkit-box; overflow: hidden; max-width: 72ch; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.community-playlist-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto; padding-top: 12px; }
.community-playlist-tags span { padding: 4px 8px; border-radius: 999px; background: var(--panel-3); color: var(--soft); font-size: .76rem; }
.community-playlist-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }

@media (max-width: 620px) {
  .community-playlist-card { grid-template-columns: 112px minmax(0, 1fr); gap: 13px; }
  .community-playlist-card > .playlist-cover { width: 112px; height: 112px; }
  .community-playlist-card .playlist-card-head h3 { font-size: 1.05rem; }
  .community-playlist-description { display: none; }
  .community-playlist-actions .ghost-btn, .community-playlist-actions .primary-btn { min-height: 36px; padding: 0 10px; font-size: .8rem; }
}

.field-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-weight: 500;
}

.field-meta b {
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.playlist-privacy-note {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-2);
}

.playlist-privacy-note > .lucide {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  color: var(--accent-2);
}

.playlist-privacy-note > span {
  display: grid;
  gap: 2px;
}

.playlist-privacy-note small {
  color: var(--muted);
}

.playlist-editor-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  margin: 0 -26px;
  padding: 16px 26px;
  border-top: 1px solid var(--line);
  background: var(--panel-2);
}

.playlist-editor-actions .primary-btn {
  gap: 8px;
}

.source-finder-modal {
  width: min(820px, 100%);
  padding: 0;
  max-height: calc(100dvh - 36px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 18px;
}

.source-finder-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 20px;
  padding: 23px 26px 19px;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(circle at 90% 0%, rgba(143, 91, 255, 0.18), transparent 34%),
    var(--panel);
}

.source-finder-head h2,
.source-finder-head p {
  margin: 0;
}

.source-finder-head h2 {
  margin: 3px 0 5px;
  font-size: 1.55rem;
}

.source-finder-head > div > p:last-child {
  color: var(--muted);
  font-size: 0.88rem;
}

.source-finder-search {
  display: grid;
  gap: 9px;
  padding: 20px 26px 16px;
}

.source-finder-search > label {
  color: var(--soft);
  font-size: 0.82rem;
  font-weight: 800;
}

.source-search-control {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
}

.source-search-control > .lucide {
  position: absolute;
  top: 50%;
  left: 14px;
  z-index: 1;
  width: 19px;
  height: 19px;
  color: var(--muted);
  pointer-events: none;
  transform: translateY(-50%);
}

.source-search-control input {
  width: 100%;
  min-height: 48px;
  padding: 0 46px 0 43px;
  border: 1px solid var(--line);
  border-radius: 11px;
  outline: 0;
  background: var(--panel-2);
  color: var(--text);
  font: inherit;
  font-weight: 650;
}

.source-search-control input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 24, 184, 0.1);
}

.source-search-control > .primary-btn {
  min-width: 108px;
}

.source-search-clear {
  position: absolute;
  top: 50%;
  right: 126px;
  z-index: 2;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transform: translateY(-50%);
}

.source-search-clear:hover {
  background: var(--panel-3);
  color: var(--text);
}

.source-search-clear .lucide {
  width: 16px;
  height: 16px;
}

.source-search-examples {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0.76rem;
}

.source-search-examples button {
  padding: 4px 8px;
  border: 0;
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--soft);
  cursor: pointer;
  font: inherit;
  font-weight: 750;
}

.source-search-examples button:hover {
  color: var(--accent);
}

.source-finder-selected {
  display: grid;
  gap: 9px;
  margin: 0 26px 16px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--panel-2);
}

.source-selected-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.source-selected-head strong {
  font-size: 0.82rem;
}

.source-selected-head span {
  display: grid;
  min-width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 24, 184, 0.12);
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 900;
}

.source-selected-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.source-selected-list .selected-source {
  padding: 6px 9px;
  font-size: 0.78rem;
}

.source-selected-empty {
  color: var(--muted);
  font-size: 0.8rem;
}

.source-finder-results-panel {
  padding: 0 26px 16px;
}

.source-results-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.source-results-head h3,
.source-results-head p {
  margin: 0;
}

.source-results-head h3 {
  font-size: 0.98rem;
}

.source-results-head p,
.source-results-head > span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.76rem;
}

.source-finder-modal .source-search-results {
  display: grid;
  max-height: 300px;
  gap: 7px;
  overflow-y: auto;
}

.source-finder-modal .source-result {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) auto;
  gap: 12px;
  width: 100%;
  min-height: 66px;
  padding: 8px 9px;
  border-radius: 11px;
}

.source-finder-modal .source-result img,
.source-finder-modal .source-result-cover {
  width: 50px;
  height: 50px;
  border-radius: 8px;
}

.source-finder-modal .source-result-cover {
  display: grid;
  overflow: hidden;
  place-items: center;
  color: var(--muted);
}

.source-finder-modal .source-result-cover img {
  object-fit: cover;
}

.source-finder-modal .source-result-cover .lucide {
  width: 20px;
  height: 20px;
}

.source-result-copy {
  display: grid;
  min-width: 0;
  align-content: center;
  gap: 3px;
}

.source-result-copy strong,
.source-result-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.source-result-copy small {
  color: var(--muted);
}

.source-result-copy em {
  color: var(--muted);
  font-size: 0.72rem;
  font-style: normal;
}

.source-result-action {
  align-self: center;
  min-width: 96px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel-2);
  color: var(--soft);
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 850;
}

.source-result-action:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.source-result-action.is-added {
  border-color: rgba(53, 208, 186, 0.24);
  background: rgba(53, 208, 186, 0.1);
  color: var(--accent-2);
}

.source-search-empty,
.source-search-state {
  display: grid;
  min-height: 150px;
  align-content: center;
  justify-items: center;
  gap: 7px;
  padding: 22px;
  border: 1px dashed var(--line);
  border-radius: 11px;
  color: var(--muted);
  text-align: center;
}

.source-search-empty .lucide,
.source-search-state .lucide {
  width: 26px;
  height: 26px;
  color: var(--accent);
}

.source-search-empty strong,
.source-search-state strong {
  color: var(--soft);
}

.source-search-empty p,
.source-search-state p {
  margin: 0;
  font-size: 0.82rem;
}

.source-search-state.is-loading .lucide {
  animation: source-search-spin 900ms linear infinite;
}

@keyframes source-search-spin {
  to { transform: rotate(360deg); }
}

.manual-source {
  margin: 0 26px 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 11px;
}

.manual-source-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 0;
  background: var(--panel-2);
  color: var(--text);
  cursor: pointer;
}

.manual-source-toggle > span {
  display: flex;
  align-items: center;
  gap: 8px;
}

.manual-source-toggle .lucide {
  width: 17px;
  height: 17px;
  color: var(--accent);
}

.manual-source-toggle small {
  color: var(--muted);
}

.manual-source-form {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 10px;
  align-items: end;
  padding: 13px 14px;
  border-top: 1px solid var(--line);
}

.manual-source-form[hidden] {
  display: none;
}

.manual-source-form label {
  display: grid;
  gap: 6px;
  color: var(--soft);
  font-size: 0.78rem;
  font-weight: 800;
}

.manual-source-form input {
  width: 100%;
  min-height: 40px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  outline: 0;
  background: var(--panel);
  color: var(--text);
}

.manual-source-form input:focus {
  border-color: var(--accent);
}

.manual-source-form .ghost-btn {
  gap: 7px;
  white-space: nowrap;
}

.source-finder-actions {
  position: sticky;
  bottom: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 26px;
  border-top: 1px solid var(--line);
  background: var(--panel-2);
}

.source-finder-actions p {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.source-finder-actions .lucide {
  width: 16px;
  height: 16px;
}

.source-finder-actions .primary-btn {
  min-width: 108px;
}

.upload-picker-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 48px;
  padding: 7px 8px 7px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--panel-2);
}

.upload-picker-summary strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--soft); font-size: .86rem; }
.upload-picker-summary .ghost-btn { flex: 0 0 auto; min-height: 34px; padding: 0 11px; font-size: .78rem; }

.taxonomy-picker-modal { width: min(640px, 100%); }
.taxonomy-picker-body { display: grid; min-height: 0; gap: 12px; padding: 20px 26px; overflow-y: auto; }
.taxonomy-search-label { color: var(--soft); font-size: .82rem; font-weight: 800; }
.taxonomy-search { position: relative; }
.taxonomy-search > .lucide { position: absolute; top: 50%; left: 14px; width: 18px; height: 18px; color: var(--muted); pointer-events: none; transform: translateY(-50%); }
.taxonomy-search input,
.taxonomy-custom input { width: 100%; min-height: 46px; padding: 0 13px 0 42px; border: 1px solid var(--line); border-radius: 10px; outline: 0; background: var(--panel-2); color: var(--text); }
.taxonomy-search input:focus,
.taxonomy-custom input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 24, 184, .1); }
.taxonomy-selected { display: flex; flex-wrap: wrap; gap: 7px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); color: var(--muted); font-size: .82rem; }
.taxonomy-selected strong { color: var(--soft); }
.taxonomy-options { display: flex; max-height: min(36dvh, 280px); flex-wrap: wrap; align-content: start; gap: 8px; overflow-y: auto; padding: 2px; }
.taxonomy-options .tag-option { display: inline-flex; align-items: center; gap: 5px; }
.taxonomy-options .tag-option .lucide { width: 14px; height: 14px; }
.taxonomy-custom { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; }
.taxonomy-custom input { padding-left: 13px; }

.fullscreen-track-details { position: relative; z-index: 1; width: min(1140px, calc(100% - 48px)); margin: 0 auto 72px; padding: clamp(20px, 3vw, 34px); border: 1px solid rgb(var(--fullscreen-accent) / .22); border-radius: 20px; background: linear-gradient(145deg, rgb(var(--fullscreen-tone) / .2), rgba(13, 17, 23, .84)); box-shadow: var(--shadow); }

/* The fullscreen page is its own scroll container.  Compositing its large
   surfaces prevents repainting the background and details card every frame. */
.fullscreen-player-layout,
.fullscreen-track-details { contain: paint; }
.fullscreen-track-details > header { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 22px; }
.fullscreen-track-details h2, .fullscreen-track-details h3, .fullscreen-track-details p { margin: 0; }
.fullscreen-track-details h2 { margin-top: 3px; }
.fullscreen-track-details-content { display: grid; gap: 20px; }
.fullscreen-detail-overview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.fullscreen-detail-overview > div { display: grid; gap: 5px; min-width: 0; padding: 13px; border: 1px solid rgb(var(--fullscreen-accent) / .18); border-radius: 12px; background: rgb(var(--fullscreen-tone) / .12); }
.fullscreen-detail-label { color: rgba(244,246,248,.55); font-size: .72rem; font-weight: 800; text-transform: uppercase; }
.fullscreen-detail-overview strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fullscreen-detail-title, .fullscreen-detail-author { overflow: hidden; padding: 0; border: 0; background: transparent; color: var(--text); font: inherit; font-weight: 900; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.fullscreen-detail-title:hover, .fullscreen-detail-author:hover, .fullscreen-detail-link:hover { color: var(--accent); }
.fullscreen-detail-description, .fullscreen-detail-sources { padding-top: 20px; border-top: 0; }
.fullscreen-detail-description h3, .fullscreen-detail-sources h3 { margin-bottom: 9px; font-size: 1rem; }
.fullscreen-detail-description p, .fullscreen-detail-empty { color: rgba(244,246,248,.68); line-height: 1.55; }
.fullscreen-detail-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.fullscreen-detail-tags span {
  padding: 5px 9px;
  border: 1px solid rgb(var(--fullscreen-accent) / .28);
  border-radius: 999px;
  background: rgb(var(--fullscreen-tone) / .22);
  color: rgb(255 255 255 / .88);
  font-size: .76rem;
}
.fullscreen-detail-sources > div { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.fullscreen-detail-link { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; padding: 12px; border: 1px solid rgb(var(--fullscreen-accent) / .18); border-radius: 12px; background: rgb(var(--fullscreen-tone) / .12); color: var(--text); text-align: left; }
.fullscreen-detail-link > .lucide { width: 18px; height: 18px; color: rgb(var(--fullscreen-accent)); }
.fullscreen-detail-link > span:nth-child(2) { min-width: 0; }
.fullscreen-detail-link small, .fullscreen-detail-link strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fullscreen-detail-link small { margin-bottom: 3px; color: rgba(244,246,248,.55); }

:root[data-theme="light"] .fullscreen-track-details,
:root[data-theme="light"] .fullscreen-detail-overview > div,
:root[data-theme="light"] .fullscreen-detail-link { border-color: rgba(27,38,50,.14); background: rgba(255,255,255,.64); color: #171b22; }
:root[data-theme="light"] .fullscreen-detail-label,
:root[data-theme="light"] .fullscreen-detail-description p,
:root[data-theme="light"] .fullscreen-detail-empty,
:root[data-theme="light"] .fullscreen-detail-link small { color: rgba(23,27,34,.6); }
:root[data-theme="light"] .fullscreen-detail-title,
:root[data-theme="light"] .fullscreen-detail-author { color: #171b22; }
/* Source and taxonomy dialogs must keep their completion action reachable on
   small touch screens, even when a long list or manual form is open. */
.source-finder-modal { overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.taxonomy-picker-modal .taxonomy-picker-body { flex: 1 1 auto; }

@media (max-width: 700px) {
  .source-finder-modal { max-height: calc(100dvh - 20px); }
  .taxonomy-picker-body { padding: 16px 18px; }
  .taxonomy-options { max-height: min(31dvh, 250px); }
  .taxonomy-custom { grid-template-columns: 1fr; }
  .taxonomy-custom .ghost-btn { width: 100%; }

  .fullscreen-track-details { width: calc(100% - 36px); }
  .fullscreen-track-details { margin-bottom: 34px; padding: 18px; border-radius: 16px; }
  .fullscreen-track-details > header { align-items: start; margin-bottom: 16px; }
  .fullscreen-track-details > header .ghost-btn { min-height: 36px; padding: 0 9px; font-size: .75rem; white-space: nowrap; }
  .fullscreen-detail-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .fullscreen-detail-overview > div { padding: 10px; }
  .fullscreen-detail-sources > div { grid-template-columns: 1fr; }
}

.admin-edit-panel {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 14px;
  border: 1px solid rgba(255, 24, 184, 0.24);
  border-radius: 8px;
  background: rgba(255, 24, 184, 0.045);
}

.admin-edit-panel legend {
  padding: 0 6px;
  color: var(--soft);
  font-size: 0.82rem;
  font-weight: 800;
}

.playlist-option {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 8px 12px;
  color: var(--text);
  text-align: left;
}

.playlist-option-cover { width: 40px; height: 40px; border-radius: 9px; font-size: 0.72rem; }
.playlist-option-copy { min-width: 0; }
.playlist-option-copy strong,
.playlist-option-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.playlist-option-copy small {
  color: var(--muted);
  margin-top: 3px;
  font-size: 0.76rem;
}
.playlist-option-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--soft);
  font-size: 0.76rem;
  font-weight: 800;
  white-space: nowrap;
}
.playlist-option.is-added {
  border-color: rgba(68, 213, 157, 0.3);
  background: rgba(68, 213, 157, 0.06);
  cursor: default;
  opacity: 0.8;
}
.playlist-option.is-added .playlist-option-state { color: #72e4b8; }
.playlist-option:not(:disabled):hover { border-color: rgba(255, 24, 184, 0.5); background: rgba(255, 24, 184, 0.08); }
}

.moderation-toolbar {
  display: grid;
  grid-template-columns: minmax(150px, 0.65fr) minmax(220px, 1fr) minmax(170px, 0.75fr) minmax(260px, 1.1fr) auto;
  gap: 12px;
  margin: 18px 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
}

.moderation-toolbar label {
  display: grid;
  gap: 8px;
  color: var(--soft);
  font-weight: 800;
}

.moderation-toolbar input,
.moderation-toolbar select {
  height: 42px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  padding: 0 12px;
}

.moderation-bulk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-content: end;
  justify-content: end;
}

.moderation-presets,
.reason-templates {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -6px 0 18px;
}

.reason-templates {
  margin-top: -10px;
  margin-bottom: 12px;
}

.moderation-presets .chip,
.reason-templates .chip {
  min-height: 34px;
  border: 1px solid var(--line);
  background: var(--panel);
}

.reason-templates .chip {
  color: var(--soft);
}

.moderation-presets .chip.active {
  border-color: rgba(255, 24, 184, 0.52);
  background: rgba(255, 24, 184, 0.1);
  color: var(--text);
}

.moderation-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 14px;
}

.moderation-row p {
  margin: 4px 0 0;
  color: var(--muted);
}

.moderation-title-line {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.moderation-title-line .row-title {
  width: auto;
  min-width: 0;
}

.moderation-row.needs-check {
  border-color: rgba(244, 183, 64, 0.38);
}

.moderation-note {
  color: var(--soft) !important;
}

.moderation-diagnostics {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.moderation-diagnostics span {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
}

.moderation-diagnostics .diag-ok {
  border-color: rgba(255, 24, 184, 0.28);
  color: var(--soft);
  background: rgba(255, 24, 184, 0.08);
}

.moderation-diagnostics .diag-warning {
  border-color: rgba(244, 183, 64, 0.3);
  color: #f4d58a;
  background: rgba(244, 183, 64, 0.12);
}

.moderation-diagnostics .diag-danger {
  border-color: rgba(255, 107, 127, 0.32);
  color: #ffc2cc;
  background: rgba(255, 107, 127, 0.14);
}

.checklist-missing,
.checklist-ok,
.duplicate-warning {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.checklist-missing span,
.duplicate-warning span {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(244, 183, 64, 0.14);
  color: #f4d58a;
  font-size: 0.78rem;
  font-weight: 800;
}

.duplicate-warning {
  color: #ffb6c3 !important;
}

.duplicate-warning span {
  background: rgba(255, 107, 127, 0.16);
  color: #ffc2cc;
}

.checklist-ok {
  color: var(--accent) !important;
}

.moderation-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(130px, 1fr));
  gap: 8px;
  min-width: 300px;
}

.moderation-report-list {
  display: grid;
  gap: 8px;
  margin-top: 13px;
  padding: 12px;
  border: 1px solid rgba(255, 107, 127, .28);
  border-radius: 12px;
  background: color-mix(in srgb, rgba(255, 107, 127, .11) 55%, var(--panel));
}

.moderation-report-list h4 {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: var(--text);
  font-size: .88rem;
}

.moderation-report-list h4 .lucide { width: 16px; color: #ff8799; }

.moderation-report-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-2);
}

.moderation-report-card strong,
.moderation-report-card small { display: block; }
.moderation-report-card small { margin-top: 5px; color: var(--muted); }
.moderation-report-actions { display: flex; flex-wrap: wrap; gap: 7px; justify-content: flex-end; }
.moderation-report-actions .ghost-btn { min-height: 34px; font-size: .78rem; }

.danger {
  color: #fff !important;
  background: rgba(255, 107, 127, 0.22) !important;
}

.moderation-browser-tabs {
  position: sticky;
  top: 12px;
  z-index: 6;
  margin: 18px 0;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .18);
}

.section-heading-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.moderation-browser-tabs .library-browser-tab {
  min-width: 150px;
}

.moderation-workspace {
  grid-template-columns: 1fr;
}

.moderation-management-card {
  grid-column: 1 / -1;
}

.admin-user-list {
  display: grid;
  gap: 10px;
}

.admin-role-control {
  display: grid;
  min-width: 190px;
  gap: 6px;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 800;
}

.admin-role-control select {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  padding: 0 12px;
}

.edit-track-backdrop {
  z-index: 85;
  padding: 10px;
}

.edit-track-review-modal {
  display: flex;
  flex-direction: column;
  width: min(1180px, 100%);
  max-height: calc(100dvh - 20px);
  padding: 0;
  overflow: hidden;
}

.edit-track-review-head {
  position: sticky;
  top: 0;
  z-index: 4;
  align-items: flex-start;
  padding: 22px 24px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  backdrop-filter: blur(18px);
}

.edit-track-review-head h2,
.edit-track-review-head p {
  margin: 0;
}

.edit-track-review-head .eyebrow {
  margin-bottom: 6px;
}

.edit-track-review-head > div > p:last-child {
  margin-top: 6px;
  color: var(--muted);
}

.edit-track-review-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: 0;
  gap: 14px;
  margin-top: 0;
  padding: 20px 24px 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.edit-track-review-form > .edit-track-intro,
.edit-track-review-form > .edit-track-review-summary,
.edit-track-review-form > .edit-track-fields,
.edit-track-review-form > .source-picker,
.edit-track-review-form > .admin-edit-panel,
.edit-track-review-form > .edit-track-review-actions {
  grid-column: 1 / -1;
}

.edit-track-review-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.edit-track-review-summary > span {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--soft);
  font-size: .78rem;
  font-weight: 850;
}

.edit-track-review-summary .diag-ok {
  border-color: rgba(68, 213, 157, .34);
  color: #72e4b8;
}

.edit-track-review-summary .diag-warning,
.edit-track-review-summary .diag-danger {
  border-color: rgba(244, 183, 64, .4);
  color: #f4d58a;
}

.edit-track-review-form > .tag-picker,
.edit-track-review-form > label,
.edit-track-review-form > .form-grid {
  align-self: start;
  margin: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .035);
}

.edit-track-review-form > .source-picker,
.edit-track-review-form > .admin-edit-panel {
  margin: 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .045);
}

.edit-track-review-form .edit-track-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.edit-track-review-actions {
  position: sticky;
  bottom: 0;
  z-index: 4;
  justify-content: flex-end;
  margin: 4px -24px 0;
  padding: 16px 24px;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  backdrop-filter: blur(18px);
}

#sourceSearchModal {
  z-index: 120;
}

#sourceSearchModal .source-finder-modal {
  box-shadow: 0 24px 80px rgba(0, 0, 0, .52);
}

@media (max-width: 900px) {
  .moderation-workspace {
    grid-template-columns: 1fr;
  }

  .moderation-log-panel {
    position: static;
    max-height: none;
  }

  .edit-track-review-form,
  .edit-track-review-form .edit-track-fields {
    grid-template-columns: 1fr;
  }

  .edit-track-review-form > * {
    grid-column: 1 / -1;
  }

  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: fixed;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 60;
    display: grid;
    width: auto;
    height: 58px;
    grid-template-columns: 1fr;
    align-items: center;
    padding: 6px 8px;
    border-top: 1px solid var(--line);
    border-bottom: 0;
    border-right: 0;
    background: rgba(15, 17, 20, 0.97);
    backdrop-filter: blur(14px);
  }

  :root[data-theme="light"] .sidebar {
    background: rgba(255, 255, 255, 0.96);
  }

  .playlist-panel {
    display: none;
  }

  .brand {
    display: none;
  }

  .brand-logo {
    display: none;
  }

  .nav-list {
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 2px;
  }

  .nav-item {
    justify-content: center;
    min-width: 0;
    min-height: 44px;
    padding: 0;
    font-size: 0;
  }

  .nav-item .icon {
    display: block;
    width: 19px;
    height: 19px;
  }

  .main {
    grid-column: 1;
    padding: 18px 16px 76px;
  }

  body.player-visible .main {
    padding-bottom: 224px;
  }

  .topbar {
    top: 0;
    grid-template-columns: 1fr auto;
  }

  .upload-topbar-btn {
    display: none;
  }

  .topbar-link {
    width: 42px;
    justify-content: center;
    padding: 0;
  }

  .topbar-link-label {
    display: none;
  }

  #avatarBtn[data-route="register"] {
    width: 42px;
    min-width: 42px;
    padding: 0;
  }

  #avatarBtn[data-route="register"] .topbar-link-label {
    display: none;
  }

  .featured,
  .home-welcome,
  .home-start-grid,
  .home-feed-grid,
  .settings-layout,
  .about-hero,
  .split,
  .settings-grid,
  .auth-layout,
  .auth-screen,
  .detail-hero,
  .review-hero,
  .profile-head,
  .profile-stats,
  .pinned-track,
  .studio-insights,
  .detail-grid,
  .review-grid,
  .admin-summary-grid,
  .form-grid,
  .upload-preview,
  .moderation-toolbar {
    grid-template-columns: 1fr;
  }

  .featured {
    padding: 24px;
  }

  .discover-controls {
    grid-template-columns: 1fr;
  }

  .home-welcome {
    min-height: 0;
    padding: 30px;
  }

  .home-welcome-copy h1 {
    font-size: clamp(38px, 8vw, 62px);
  }

  .home-spotlight {
    grid-template-columns: minmax(150px, 0.48fr) minmax(0, 1fr);
  }

  .settings-account-hero {
    grid-template-columns: 96px minmax(0, 1fr) auto;
  }

  .settings-account-hero .profile-avatar-preview {
    width: 96px;
    height: 96px;
  }

  .settings-account-summary {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .fullscreen-player-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    width: min(100% - 36px, 720px);
    align-items: start;
  }

  .fullscreen-track-copy h2 {
    font-size: clamp(38px, 7vw, 66px);
  }

  .fullscreen-player-cover {
    width: min(72vw, 360px);
    height: min(72vw, 360px);
    justify-self: center;
    align-self: center;
  }

  .fullscreen-player-actions label {
    flex: 0 1 min(100%, 360px);
    width: min(100%, 360px);
  }

  .fullscreen-player-actions label input {
    flex: 1;
    width: auto;
    min-width: 0;
  }

  .catalog-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .notification-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .notification-card {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .notification-card-actions {
    grid-column: 2;
    justify-content: flex-start;
  }

  .library-browser-panel {
    padding: 14px;
  }

  .library-controls {
    align-items: stretch;
    flex-direction: column;
  }

  .library-search {
    flex-basis: auto;
    max-width: none;
  }

  .library-controls .sort-control,
  .library-controls .sort-control select {
    width: 100%;
  }

  .studio-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .studio-toolbar .library-search {
    max-width: none;
  }

  .studio-toolbar .sort-control,
  .studio-toolbar .sort-control select {
    width: 100%;
  }

  .continue-card {
    grid-template-columns: 82px minmax(0, 1fr);
  }

  .continue-cover {
    width: 82px;
  }

  .hero-art {
    min-height: 190px;
  }

  .hero-logo-plate {
    width: min(100%, 330px);
  }

  .player {
    z-index: 70;
    bottom: 58px;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 10px 14px;
  }

  .auth-showcase { min-height: 250px; border-top: 1px solid var(--line); border-left: 0; }
  .auth-panel-main { padding: 30px 24px; }
  .auth-brand-mark { margin-bottom: 28px; }

  .library-playlists-section {
    margin-top: 18px;
  }

  .auth-register-layout .settings-actions {
    grid-template-columns: 1fr;
  }

  .auth-register-layout .settings-actions .primary-btn,
  .auth-register-layout .settings-actions .ghost-btn {
    white-space: normal;
  }

  .player-actions {
    position: absolute;
    top: 10px;
    right: 12px;
    display: flex;
  }

  .player:not(.radio-dock) .player-actions > :not(#openFullscreenPlayerBtn):not(#addCurrentToPlaylistBtn) {
    display: none;
  }

  .detail-cover,
  .profile-avatar {
    max-width: 220px;
  }

  .queue-panel {
    bottom: 214px;
  }

}

@media (max-width: 560px) {
  .settings-account-hero {
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 15px;
    padding: 18px;
  }

  .settings-account-hero .profile-avatar-preview {
    width: 76px;
    height: 76px;
    border-radius: 16px;
  }

  .settings-account-hero > .ghost-btn {
    grid-column: 1 / -1;
    width: 100%;
  }

  .settings-account-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .settings-account-summary span {
    min-width: 0;
    padding: 9px 5px;
  }

  .settings-card {
    padding: 16px;
  }

  .settings-field-grid {
    grid-template-columns: 1fr;
  }

  .settings-field-wide {
    grid-column: auto;
  }

  .settings-file-field {
    align-items: stretch;
    flex-direction: column;
  }

  .settings-file-field input {
    width: 100%;
  }

  .settings-save-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .settings-save-bar button {
    width: 100%;
  }

  .about-hero {
    min-height: 0;
    padding: 24px;
  }

  .about-hero h1 {
    font-size: clamp(36px, 11vw, 48px);
  }

  .about-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .about-stats article {
    min-width: 0;
    padding: 12px 6px;
  }

  .about-facts {
    grid-template-columns: 1fr;
  }

  .about-facts section {
    grid-template-columns: 92px minmax(0, 1fr);
  }

  .fullscreen-player {
    overflow-y: auto;
  }

  .fullscreen-player-head {
    min-height: 58px;
    padding: 10px 18px;
  }

  .fullscreen-player-layout {
    grid-template-columns: 1fr;
    gap: 14px;
    width: calc(100% - 36px);
    min-height: auto;
    padding: 2px 0 22px;
  }

  .fullscreen-context {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .fullscreen-player-cover {
    width: min(44vw, 220px);
    height: min(44vw, 220px);
    max-height: 28dvh;
    aspect-ratio: 1;
    justify-self: center;
    border-radius: 20px;
  }

  .fullscreen-player-content {
    gap: 14px;
    text-align: center;
  }

  .fullscreen-track-copy h2 {
    font-size: clamp(28px, 8vw, 42px);
    line-height: 1;
  }

  .fullscreen-track-copy > p:last-child {
    margin-top: 8px;
    font-size: 0.92rem;
  }

  .fullscreen-context-card {
    padding: 9px;
    text-align: left;
  }

  .fullscreen-context-label {
    margin-bottom: 6px;
    font-size: 0.62rem;
  }

  .fullscreen-context-track { gap: 7px; }
  .fullscreen-context-cover { width: 32px; height: 32px; }
  .fullscreen-context-copy strong { font-size: 0.73rem; }
  .fullscreen-context-copy small,
  .fullscreen-context-empty { font-size: 0.66rem; }

  .fullscreen-progress { gap: 4px; }
  .fullscreen-progress > div { font-size: 0.72rem; }

  .fullscreen-player-actions { gap: 6px; }
  .fullscreen-player-actions button,
  .fullscreen-player-actions label {
    min-height: 34px;
    padding: 0 10px;
    font-size: 0.74rem;
  }

  .fullscreen-controls {
    gap: 6px;
  }

  .fullscreen-controls button {
    width: 42px;
    height: 42px;
  }

  .fullscreen-controls .fullscreen-play-toggle {
    width: 64px;
    height: 64px;
  }

  .fullscreen-player-actions label {
    width: 100%;
    justify-content: center;
  }

  .home-welcome {
    padding: 22px;
    border-radius: 16px;
  }

  .home-welcome-copy h1 {
    font-size: clamp(34px, 11vw, 48px);
  }

  .home-welcome-copy .hero-actions,
  .home-welcome-copy .hero-actions button {
    width: 100%;
  }

  .home-spotlight {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .home-spotlight-cover {
    max-height: 280px;
  }

  .home-spotlight-empty {
    grid-template-columns: 44px minmax(0, 1fr);
    padding: 6px;
  }

  .home-spotlight-empty > span {
    width: 44px;
    height: 44px;
  }

  .home-spotlight-empty > button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .home-start-main,
  .home-recommendation-main,
  .home-shortcuts {
    padding: 15px;
  }

  .home-start-main,
  .home-recommendation-main {
    display: block;
  }

  .home-start-main > .section-heading,
  .home-recommendation-main > .section-heading {
    margin-bottom: 16px;
  }

  .home-start-main .continue-card,
  .home-recommendation-main .continue-card {
    height: auto;
  }

  .home-playlists {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-playlist-play {
    width: 42px;
    height: 42px;
    opacity: 1;
    transform: none;
  }

  .home-continue-empty,
  .home-recommendation-empty {
    align-items: stretch;
    flex-direction: column;
  }

  .home-continue-empty button,
  .home-recommendation-empty button {
    width: 100%;
  }

  .split {
    grid-template-columns: 1fr;
  }

  .chart-row {
    grid-template-columns: 34px 46px minmax(0, 1fr) 42px;
  }

  .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .track-row {
    grid-template-columns: 46px minmax(0, 1fr) 138px;
  }

  .track-row .genre,
  .track-row .duration {
    display: none;
  }

  .featured h1 {
    font-size: 38px;
  }

  .detail-hero,
  .profile-head {
    padding: 22px;
  }

  .moderation-row {
    grid-template-columns: 1fr;
  }

  .studio-row {
    grid-template-columns: 1fr;
  }

  .catalog-filter-grid {
    grid-template-columns: 1fr;
  }

  .catalog-filter-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .catalog-filter-footer .ghost-btn {
    width: 100%;
  }

  .studio-cover {
    width: 100%;
    height: 160px;
  }

  .moderation-actions {
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .studio-actions {
    grid-template-columns: 1fr;
  }

  .comment-form {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1050px) {
  .track-hero-content {
    grid-template-columns: 240px minmax(0, 1fr);
  }

  .track-page-layout {
    grid-template-columns: 1fr;
  }

  .track-page-sidebar {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .upload-workspace {
    grid-template-columns: 1fr;
  }

  .upload-preview-sticky {
    position: static;
  }

  .upload-preview-column .upload-preview {
    grid-template-columns: 150px minmax(0, 1fr);
    align-items: start;
  }

  .upload-preview-column .preview-cover {
    grid-row: 1;
  }
}

@media (max-width: 700px) {
  .track-page-hero,
  .track-hero-content {
    min-height: 0;
  }

  .track-hero-content {
    grid-template-columns: 1fr;
    align-items: start;
    padding: 22px;
  }

  .track-page-cover {
    width: min(62vw, 230px);
  }

  .track-hero-copy h1 {
    font-size: clamp(40px, 13vw, 62px);
  }

  .track-hero-originals {
    font-size: 0.8rem;
  }

  .track-page-sidebar {
    grid-template-columns: 1fr;
  }

  .track-content-card {
    padding: 18px;
  }

  .upload-hero {
    align-items: stretch;
    flex-direction: column;
    padding: 22px;
  }

  .upload-hero-flow {
    justify-content: space-between;
  }

  .upload-hero-flow i {
    flex: 1;
    width: auto;
  }

  .upload-field-grid,
  .upload-classification-grid,
  .upload-files-grid,
  .upload-preview-column .upload-preview {
    grid-template-columns: 1fr;
  }

  .upload-form-card {
    padding: 18px;
  }

  .upload-source-panel .field-heading,
  .upload-submit-card {
    align-items: stretch;
    flex-direction: column;
  }

  .upload-source-panel .ghost-btn,
  .upload-submit-actions,
  .upload-submit-actions button {
    width: 100%;
  }

  .upload-submit-actions {
    flex-direction: column-reverse;
  }

  .playlist-editor-modal,
  .author-editor-modal {
    width: min(520px, 100%);
  }

  .playlist-editor-head {
    padding: 20px;
  }

  .playlist-editor-form,
  .author-editor-form {
    grid-template-columns: 1fr;
    padding: 20px 20px 0;
  }

  .playlist-editor-cover-column {
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
  }

  .author-editor-avatar-column {
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
  }

  .playlist-cover-file-name {
    margin: 0;
    text-align: left;
  }

  .playlist-cover-overlay {
    opacity: 1;
    background: rgba(8, 10, 13, 0.58);
  }

  .playlist-cover-overlay strong,
  .playlist-cover-overlay small {
    display: none;
  }

  .playlist-editor-actions {
    margin: 0 -20px;
    padding: 15px 20px;
  }

  .source-finder-head,
  .source-finder-search {
    padding-right: 18px;
    padding-left: 18px;
  }

  .source-finder-selected,
  .manual-source {
    margin-right: 18px;
    margin-left: 18px;
  }

  .source-finder-results-panel {
    padding-right: 18px;
    padding-left: 18px;
  }

  .source-search-control {
    grid-template-columns: 1fr;
  }

  .source-search-control > .primary-btn {
    width: 100%;
  }

  .source-search-control > .lucide {
    top: 24px;
  }

  .source-search-clear {
    top: 24px;
    right: 10px;
  }

  .source-search-examples {
    display: none;
  }

  .source-finder-modal .source-result {
    grid-template-columns: 46px minmax(0, 1fr);
  }

  .source-finder-modal .source-result img,
  .source-finder-modal .source-result-cover {
    width: 46px;
    height: 46px;
  }

  .source-result-action {
    grid-column: 1 / -1;
    width: 100%;
  }

  .manual-source-form {
    grid-template-columns: 1fr;
  }

  .source-finder-actions {
    align-items: stretch;
    flex-direction: column;
    padding-right: 18px;
    padding-left: 18px;
  }

  .source-finder-actions .primary-btn {
    width: 100%;
  }
}

@media (max-width: 440px) {
  .track-type-row {
    gap: 6px;
  }

  .track-hero-badges {
    flex-wrap: nowrap;
    gap: 4px;
  }

  .track-hero-badges span,
  .track-hero-badges button {
    min-height: 26px;
    padding: 0 7px;
    font-size: 0.62rem;
    white-space: nowrap;
  }

  .track-page-cover {
    width: min(70vw, 210px);
  }

  .track-hero-content {
    padding: 18px;
  }

  .track-hero-stats i {
    display: none;
  }

  .track-hero-stats {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .track-primary-actions .primary-btn {
    flex: 1 1 100%;
  }

  .track-content-card .comment {
    grid-template-columns: 36px minmax(0, 1fr);
  }

  .track-content-card .comment > .muted-link {
    grid-column: 2;
    justify-self: start;
  }

  .track-source-card {
    grid-template-columns: 50px minmax(0, 1fr);
  }

  .track-source-cover {
    width: 50px;
    height: 50px;
  }

  .track-source-card > a {
    grid-column: 1 / -1;
    width: 100%;
    height: 32px;
    border-radius: 8px;
    background: var(--panel-3);
  }

  .upload-hero-flow span {
    font-size: 0.68rem;
  }

  .upload-hero-flow strong {
    width: 30px;
    height: 30px;
  }

  .upload-section-head {
    align-items: start;
  }

  .playlist-editor-cover-column {
    grid-template-columns: 104px minmax(0, 1fr);
  }

  .playlist-editor-actions {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
  }
}

/* Phones may expose a CSS viewport wider than 560px. Keep the full player
   single-column until the screen is genuinely tablet-sized. */
@media (max-width: 700px) {
  .fullscreen-player {
    overflow-x: hidden;
    overflow-y: auto;
  }

  .fullscreen-player-head {
    min-height: 58px;
    padding: 10px 18px;
  }

  .fullscreen-player-layout {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 14px;
    width: calc(100% - 36px);
    min-height: 0;
    padding: 2px 0 24px;
  }

  .fullscreen-player-cover {
    width: min(44vw, 220px);
    height: min(44vw, 220px);
    max-height: 28dvh;
    aspect-ratio: 1;
    justify-self: center;
  }

  .fullscreen-player-content {
    width: 100%;
    gap: 14px;
    text-align: center;
  }

  .fullscreen-track-copy h2 {
    font-size: clamp(28px, 8vw, 42px);
    line-height: 1;
  }

  .fullscreen-track-copy > p:last-child {
    margin-top: 8px;
    font-size: 0.92rem;
  }

  .fullscreen-context {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
}

/* Some Android browsers keep a wide layout viewport in portrait mode.
   Orientation is the reliable signal for the phone full-player layout. */
@media (orientation: portrait) {
  .fullscreen-player {
    overflow-x: hidden;
    overflow-y: auto;
  }

  .fullscreen-player-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start;
    gap: 14px;
    width: calc(100% - 36px);
    min-height: 0;
    padding: 2px 0 24px;
  }

  .fullscreen-player-cover {
    width: min(48vw, 30dvh, 240px) !important;
    height: min(48vw, 30dvh, 240px) !important;
    min-height: 0 !important;
    max-height: none;
    aspect-ratio: 1 !important;
    justify-self: center;
  }

  .fullscreen-player-content {
    width: 100%;
    gap: 14px;
    text-align: center;
  }

  .fullscreen-track-copy h2 {
    font-size: clamp(28px, 8vw, 42px);
    line-height: 1;
  }

  .fullscreen-context {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
}

/* Fixed attachment and large shadows force expensive repaints while a phone
   scrolls the full player. Keep the visual treatment, but use a compositor-
   friendly background on touch screens. */
@media (max-width: 760px), (pointer: coarse) {
  .fullscreen-player {
    background-attachment: scroll;
    overscroll-behavior-y: contain;
  }

  .fullscreen-player-backdrop {
    display: none !important;
    animation: none !important;
  }

  .fullscreen-track-details {
    box-shadow: none;
  }

  .fullscreen-player.is-track-changing .fullscreen-player-layout {
    animation-duration: 160ms;
  }
}

/* Touch browsers may retain :hover after a tap. Only the route selected by
   JavaScript should remain highlighted in the mobile navigation. */
@media (hover: none) {
  .nav-item:hover:not(.active),
  .compact-action:hover {
    background: transparent;
    color: var(--muted);
  }
}

@media (max-width: 900px) {
  .home-spotlight-cover {
    width: min(100%, 360px);
    max-height: none;
    aspect-ratio: 1;
    justify-self: center;
    background-size: contain !important;
    background-repeat: no-repeat;
    background-position: center;
  }

  .home-spotlight-cover img,
  .studio-cover .cover-image {
    object-fit: contain;
  }

  .studio-cover {
    width: min(100%, 360px);
    height: auto;
    aspect-ratio: 1;
    justify-self: center;
    background-size: contain !important;
    background-repeat: no-repeat;
    background-position: center;
  }
}

/* The chart is a compact playlist on desktop, but needs a deliberate
   four-column layout on a phone: rank, cover, text and actions. */
@media (max-width: 900px) {
  .chart-page-title { align-items: stretch; flex-direction: column; }
  .chart-page-actions { justify-content: space-between; }

  .chart-track-row {
    grid-template-columns: 28px 66px minmax(0, 1fr) 108px;
    gap: 10px;
    min-height: 86px;
    padding: 10px 12px;
  }

  .chart-track-row .chart-rank {
    font-size: 19px;
    justify-self: center;
  }

  .chart-track-row .row-play {
    width: 66px;
    height: 66px;
    border-radius: 12px;
  }

  .chart-track-row .chart-track-copy {
    align-self: center;
    text-align: left;
  }

  .chart-track-row .row-title {
    font-size: 16px;
    line-height: 1.2;
    text-align: left;
  }

  .chart-track-row .chart-track-copy > span {
    margin-top: 4px;
    font-size: 14px;
    line-height: 1.25;
    text-align: left;
  }

  .chart-track-row .row-actions {
    display: grid;
    grid-template-columns: repeat(3, 34px);
    gap: 3px;
    justify-self: end;
    align-self: center;
  }

  .chart-track-row .row-like {
    width: 34px;
    height: 34px;
    border-radius: 9px;
  }
}

/* Theme picker, fullscreen queue and small interaction motion. The effects
   deliberately use opacity and transforms only, so they stay quick on phones. */
.theme-picker-backdrop {
  z-index: 160;
  align-items: center;
  background: rgba(8, 11, 16, 0.42);
  opacity: 0;
  transition: opacity 150ms ease;
}

.theme-picker-backdrop.is-open { opacity: 1; }

.theme-picker {
  width: min(440px, 100%);
  transform: translateY(8px) scale(.985);
  transition: transform 150ms ease;
}

.theme-picker-backdrop.is-open .theme-picker { transform: translateY(0) scale(1); }
.theme-picker .queue-head { margin-bottom: 18px; }
.theme-picker .queue-head h2 { margin: 3px 0 0; }

.theme-options { display: grid; gap: 8px; }

.theme-option {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 22px;
  gap: 12px;
  align-items: center;
  width: 100%;
  min-height: 68px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-2);
  color: var(--text);
  text-align: left;
}

.theme-option:hover,
.theme-option.is-active {
  border-color: rgb(var(--fullscreen-accent, 255 24 184) / .48);
  background: color-mix(in srgb, var(--panel-3) 82%, rgb(var(--fullscreen-accent, 255 24 184) / .16));
}

.theme-option-icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 10px;
  background: var(--panel-3);
  color: var(--accent);
}

.theme-option strong,
.theme-option small { display: block; }
.theme-option small { margin-top: 3px; color: var(--muted); }
.theme-option-check { color: var(--accent); opacity: 0; }
.theme-option.is-active .theme-option-check { opacity: 1; }

:root[data-theme="light"] .queue-panel,
:root[data-theme="light"] .modal {
  background: #f9fbfd;
  color: #16202d;
}

:root[data-theme="light"] .modal-backdrop { background: rgba(31, 44, 62, 0.3); }
:root[data-theme="light"] .queue-item { background: rgba(255, 255, 255, 0.76); }
:root[data-theme="light"] .queue-item.is-current { border-color: rgba(190, 11, 131, 0.48); }
:root[data-theme="light"] .queue-head button { background: #e4ebf3; color: #16202d; }

body.fullscreen-player-open .queue-panel {
  border-left-color: rgb(var(--fullscreen-accent) / .42);
  background:
    radial-gradient(ellipse 110% 48% at 100% 0%, rgb(var(--fullscreen-tone) / .58), transparent 72%),
    linear-gradient(180deg, rgb(var(--fullscreen-deep) / .96), rgb(var(--fullscreen-deep) / .985));
  color: #f6f8fc;
  box-shadow: -20px 0 54px rgb(var(--fullscreen-deep) / .52);
}

body.fullscreen-player-open .queue-panel .queue-head button,
body.fullscreen-player-open .queue-panel .row-like {
  border: 1px solid rgb(255 255 255 / .13);
  background: rgb(255 255 255 / .1);
  color: #f6f8fc;
}

body.fullscreen-player-open .queue-panel .queue-item {
  border-color: rgb(255 255 255 / .14);
  background: rgb(255 255 255 / .075);
}

body.fullscreen-player-open .queue-panel .queue-item.is-current {
  border-color: rgb(var(--fullscreen-accent) / .72);
  background: rgb(var(--fullscreen-accent) / .13);
}

body.fullscreen-player-open .queue-panel .queue-item-main > span,
body.fullscreen-player-open .queue-panel .queue-position { color: rgb(245 248 252 / .66); }

@media (prefers-reduced-motion: no-preference) {
  button:not(:disabled),
  a[href],
  [role="button"],
  .link-title,
  .muted-link {
    transition: transform 140ms ease, color 140ms ease, background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease, opacity 140ms ease;
  }

  button,
  .topbar-link,
  .nav-item,
  .compact-action,
  .queue-item,
  .playlist-option,
  .theme-option {
    transition: transform 140ms ease, background-color 140ms ease, border-color 140ms ease, color 140ms ease, opacity 140ms ease, box-shadow 140ms ease;
  }

  .primary-btn:active,
  .ghost-btn:active,
  .topbar-link:active,
  .row-like:active,
  .row-play:active,
  .theme-option:active { transform: scale(.97); }

  @media (hover: hover) {
    button:not(:disabled):hover,
    [role="button"]:hover { transform: translateY(-1px); }
    .link-title:hover,
    .muted-link:hover,
    a[href]:hover { text-decoration-color: currentColor; }
    .queue-item:hover { transform: translateX(-2px); }
    .theme-option:hover { transform: translateY(-1px); }
    .topbar-link:hover { transform: translateY(-1px); }
  }

  .queue-panel.open .queue-head,
  .queue-panel.open .queue-item {
    animation: queue-item-enter 180ms ease both;
  }

  .queue-panel.open .queue-item:nth-child(2) { animation-delay: 25ms; }
  .queue-panel.open .queue-item:nth-child(3) { animation-delay: 45ms; }
  .queue-panel.open .queue-item:nth-child(4) { animation-delay: 65ms; }
}

/* All icon-only controls share the same centering context.  This keeps
   different Lucide shapes aligned to the visual centre of their buttons. */
button { line-height: 1.15; }
button .lucide { display: block; pointer-events: none; }
.row-like,
.row-play,
.icon-only,
.track-card-action,
.home-playlist-like,
.track-round-action,
.fullscreen-close {
  display: inline-grid;
  place-items: center;
  line-height: 0;
}
.row-like .lucide,
.row-play .lucide,
.icon-only .lucide,
.track-card-action .lucide,
.home-playlist-like .lucide,
.track-round-action .lucide,
.fullscreen-close .lucide { margin: 0; }

@keyframes queue-item-enter {
  from { opacity: 0; transform: translateX(8px); }
  to { opacity: 1; transform: translateX(0); }
}

@media (max-width: 760px) {
  .theme-picker-backdrop { padding: 14px; }
  .theme-picker { width: 100%; }
  body.fullscreen-player-open .queue-panel { width: min(100%, 430px); }

  .home-auto-collections { grid-template-columns: 1fr; }
  .admin-author-row { grid-template-columns: 46px minmax(0, 1fr); }
  .admin-author-avatar { width: 46px; height: 46px; }
  .admin-author-actions { grid-column: 1 / -1; justify-content: stretch; }
  .admin-author-actions button { flex: 1 1 150px; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Warm theme keeps every persistent player surface light as well. */
:root[data-theme="warm"] .player {
  --player-tone: 237 208 173;
  --player-deep: 190 156 121;
  --player-accent: 177 80 139;
  border-top-color: rgba(64, 48, 35, 0.15);
  background: linear-gradient(104deg, rgba(255,252,247,.98), rgb(var(--player-tone) / .55) 56%, rgba(255,252,247,.98));
  box-shadow: 0 -10px 30px rgb(var(--player-deep) / .16);
}

:root[data-theme="warm"] .fullscreen-player {
  background: #f3e9dc;
  color: #30261f;
}

:root[data-theme="warm"] .fullscreen-close,
:root[data-theme="warm"] .fullscreen-player-actions button,
:root[data-theme="warm"] .fullscreen-player-actions label,
:root[data-theme="warm"] .fullscreen-context-card,
:root[data-theme="warm"] .fullscreen-track-details {
  border-color: rgba(64, 48, 35, 0.15);
  background: rgba(255, 252, 247, 0.66);
  color: #30261f;
}

:root[data-theme="warm"] .fullscreen-track-copy > p:last-child,
:root[data-theme="warm"] .fullscreen-progress > div,
:root[data-theme="warm"] .fullscreen-context-label,
:root[data-theme="warm"] .fullscreen-context-copy small,
:root[data-theme="warm"] .fullscreen-context-empty { color: rgba(48, 38, 31, 0.62); }

:root[data-theme="warm"] .fullscreen-controls button { color: rgba(48, 38, 31, 0.72); }
:root[data-theme="warm"] .fullscreen-controls .fullscreen-play-toggle { background: #30261f; color: #fffaf4; }
:root[data-theme="warm"] .fullscreen-player-actions button strong { background: rgba(64, 48, 35, 0.09); }

:root:is([data-theme="light"], [data-theme="warm"]) .fullscreen-detail-tags span {
  color: #30261f;
  background: rgb(var(--fullscreen-tone) / .2);
  border-color: rgb(var(--fullscreen-accent) / .32);
}

/* Both light palettes need their own readable treatment for the fullscreen
   detail layer: the regular player is dark-first and otherwise leaves muted
   white text on a pale background. */
:root:is([data-theme="light"], [data-theme="warm"]) .fullscreen-detail-label,
:root:is([data-theme="light"], [data-theme="warm"]) .fullscreen-detail-description p,
:root:is([data-theme="light"], [data-theme="warm"]) .fullscreen-detail-empty,
:root:is([data-theme="light"], [data-theme="warm"]) .fullscreen-detail-link small {
  color: color-mix(in srgb, var(--text) 68%, transparent);
}

:root:is([data-theme="light"], [data-theme="warm"]) .fullscreen-detail-title,
:root:is([data-theme="light"], [data-theme="warm"]) .fullscreen-detail-author,
:root:is([data-theme="light"], [data-theme="warm"]) .fullscreen-detail-link,
:root:is([data-theme="light"], [data-theme="warm"]) .fullscreen-detail-tags span {
  color: var(--text);
}

:root:is([data-theme="light"], [data-theme="warm"]) .fullscreen-track-details,
:root:is([data-theme="light"], [data-theme="warm"]) .fullscreen-detail-overview > div,
:root:is([data-theme="light"], [data-theme="warm"]) .fullscreen-detail-link {
  border-color: var(--line);
  background: color-mix(in srgb, var(--panel) 82%, transparent);
}

:root:is([data-theme="light"], [data-theme="warm"]) .danger {
  color: #542630 !important;
  border-color: rgba(184, 67, 86, .26) !important;
  background: rgba(241, 157, 169, .38) !important;
}

:root[data-theme="warm"] .queue-panel,
:root[data-theme="warm"] .queue-item,
:root[data-theme="warm"] .notification-card,
:root[data-theme="warm"] .modal { color: var(--text); }

:root[data-theme="warm"] .queue-section h3,
:root[data-theme="warm"] .queue-section-heading > span,
:root[data-theme="warm"] .queue-recommendation-item,
:root[data-theme="warm"] .queue-recommendation-item .row-title,
:root[data-theme="warm"] .queue-recommendation-item .muted-link { color: #30261f; }

:root[data-theme="warm"] .queue-section-heading p,
:root[data-theme="warm"] .queue-recommendation-item > div > span,
:root[data-theme="warm"] .queue-position { color: #765f50; }

:root[data-theme="warm"] .queue-recommendation-item {
  border-color: rgba(97, 70, 50, .22);
  background: #f6eee4;
}

:root[data-theme="warm"] .queue-recommendation-item .row-like,
:root[data-theme="warm"] .queue-item .row-like,
:root[data-theme="warm"] .queue-remove {
  border-color: rgba(97, 70, 50, .2);
  background: #e7d9c8;
  color: #49372b;
}

:root[data-theme="warm"] .queue-recommendation-item .row-like:hover,
:root[data-theme="warm"] .queue-item .row-like:hover,
:root[data-theme="warm"] .queue-remove:hover { background: #ddcbb7; color: #30261f; }

:root:is([data-theme="light"], [data-theme="warm"]) .queue-item-main > span,
:root:is([data-theme="light"], [data-theme="warm"]) .queue-position,
:root:is([data-theme="light"], [data-theme="warm"]) .notification-card-head time,
:root:is([data-theme="light"], [data-theme="warm"]) .notification-copy p { color: var(--muted); }

/* The fullscreen player normally paints the queue with white-on-dark colours.
   Keep its surface responsive to cover artwork, but restore the light-theme
   text and controls when a light palette is selected. */
:root:is([data-theme="light"], [data-theme="warm"]) body.fullscreen-player-open .queue-panel {
  border-left-color: var(--line);
  background: var(--panel);
  color: var(--text);
  box-shadow: -20px 0 54px color-mix(in srgb, var(--text) 16%, transparent);
}

:root:is([data-theme="light"], [data-theme="warm"]) body.fullscreen-player-open .queue-panel .queue-head button,
:root:is([data-theme="light"], [data-theme="warm"]) body.fullscreen-player-open .queue-panel .row-like,
:root:is([data-theme="light"], [data-theme="warm"]) body.fullscreen-player-open .queue-panel .queue-remove {
  border: 1px solid var(--line);
  background: var(--panel-3);
  color: var(--text);
}

:root:is([data-theme="light"], [data-theme="warm"]) body.fullscreen-player-open .queue-panel .queue-head button:hover,
:root:is([data-theme="light"], [data-theme="warm"]) body.fullscreen-player-open .queue-panel .row-like:hover,
:root:is([data-theme="light"], [data-theme="warm"]) body.fullscreen-player-open .queue-panel .queue-remove:hover {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
  background: color-mix(in srgb, var(--accent) 12%, var(--panel-3));
  color: var(--text);
}

:root:is([data-theme="light"], [data-theme="warm"]) body.fullscreen-player-open .queue-panel .queue-item,
:root:is([data-theme="light"], [data-theme="warm"]) body.fullscreen-player-open .queue-panel .queue-recommendation-item {
  border-color: var(--line);
  background: color-mix(in srgb, var(--panel-2) 88%, transparent);
  color: var(--text);
}

:root:is([data-theme="light"], [data-theme="warm"]) body.fullscreen-player-open .queue-panel .queue-item.is-current {
  border-color: color-mix(in srgb, var(--accent) 56%, var(--line));
  background: color-mix(in srgb, var(--accent) 10%, var(--panel-2));
}

:root:is([data-theme="light"], [data-theme="warm"]) body.fullscreen-player-open .queue-panel .queue-section h3,
:root:is([data-theme="light"], [data-theme="warm"]) body.fullscreen-player-open .queue-panel .queue-section-heading > span,
:root:is([data-theme="light"], [data-theme="warm"]) body.fullscreen-player-open .queue-panel .link-title,
:root:is([data-theme="light"], [data-theme="warm"]) body.fullscreen-player-open .queue-panel .muted-link {
  color: var(--text);
}

:root:is([data-theme="light"], [data-theme="warm"]) body.fullscreen-player-open .queue-panel .queue-item-main > span,
:root:is([data-theme="light"], [data-theme="warm"]) body.fullscreen-player-open .queue-panel .queue-recommendation-item > div > span,
:root:is([data-theme="light"], [data-theme="warm"]) body.fullscreen-player-open .queue-panel .queue-position,
:root:is([data-theme="light"], [data-theme="warm"]) body.fullscreen-player-open .queue-panel .queue-section-heading p {
  color: var(--muted);
}

.auth-discord-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  justify-content: center;
}

.auth-discord-btn .lucide {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.discord-connection {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
}

.discord-connection-copy { min-width: 0; }
.discord-connection-copy strong,
.discord-connection-copy span { display: block; }
.discord-connection-copy strong { display: flex; align-items: center; gap: 7px; }
.discord-connection-copy strong svg { width: 17px; color: #7189da; }
.discord-connection-copy span { margin-top: 4px; color: var(--muted); font-size: .88rem; }
.discord-connection > button { flex: 0 0 auto; }

.discord-bot-studio { display: grid; gap: 16px; }
.discord-bot-setup, .discord-bot-player { border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(145deg, var(--panel), var(--panel-2)); padding: 18px; box-shadow: 0 16px 42px rgba(0, 0, 0, .08); }
.discord-bot-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; gap: 12px; }
.discord-bot-controls label { display: grid; gap: 7px; color: var(--muted); font-size: .84rem; font-weight: 700; }
.discord-bot-controls select { min-width: 0; width: 100%; min-height: 44px; padding: 0 36px 0 12px; border: 1px solid var(--line); border-radius: 10px; outline: 0; background: var(--panel-2); color: var(--text); font: inherit; font-weight: 700; color-scheme: dark; }
.theme-light .discord-bot-controls select, [data-theme="light"] .discord-bot-controls select { color-scheme: light; }
.discord-bot-controls select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.discord-bot-now { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; gap: 15px; padding: 4px 0 16px; }
.discord-bot-now .mini-cover { position: relative; width: 76px; height: 76px; border-radius: 14px; overflow: hidden; background: var(--panel-3); display: grid; place-items: center; border: 1px solid var(--line); }
.discord-bot-now .mini-cover img { position: static; width: 100%; height: 100%; object-fit: cover; }
.discord-bot-now p { margin: 4px 0 0; color: var(--muted); }
.discord-bot-now-actions { display: flex; gap: 8px; }
.discord-bot-queue, .discord-bot-discovery { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 16px; }
.discord-bot-search { width: 100%; min-height: 46px; margin-bottom: 14px; padding: 0 13px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel-2); color: var(--text); font: inherit; }
.discord-bot-search:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.discord-bot-tabs { display: flex; gap: 7px; margin: 0 0 12px; overflow-x: auto; padding-bottom: 2px; }
.discord-bot-tabs button { white-space: nowrap; border: 1px solid var(--line); border-radius: 999px; padding: 8px 11px; background: var(--panel-2); color: var(--muted); }
.discord-bot-tabs button.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.discord-bot-progress, .discord-bot-volume { display: flex; align-items: center; gap: 10px; margin-top: 13px; color: var(--muted); font-size: .82rem; }
.discord-bot-progress input, .discord-bot-volume input { flex: 1; accent-color: var(--accent); }
.discord-bot-volume svg { width: 18px; }
.discord-bot-volume span { min-width: 36px; text-align: right; }
.discord-media-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.discord-media-card { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 13px; min-height: 156px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel-2); transition: transform .16s ease, border-color .16s ease, background .16s ease; }
.discord-media-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); background: var(--panel-2); }
.discord-media-cover { position: relative; width: 116px; aspect-ratio: 1; display: grid; place-items: center; align-self: start; overflow: hidden; border-radius: 11px; background: var(--panel-3); color: var(--soft); font-size: 1.7rem; font-weight: 900; }
.discord-media-cover img { position: static; width: 100%; height: 100%; object-fit: cover; }
.discord-media-body { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; }
.discord-media-body .eyebrow { margin: 0 0 3px; }
.discord-media-body h4 { width: 100%; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1rem; }
.discord-media-body > p:not(.eyebrow) { width: 100%; margin: 4px 0 0; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; font-size: .83rem; }
.discord-media-tags { display: flex; flex-wrap: wrap; gap: 5px; min-height: 23px; margin: 8px 0; }
.discord-media-tags span { max-width: 112px; overflow: hidden; padding: 3px 7px; border-radius: 999px; background: var(--panel-3); color: var(--soft); text-overflow: ellipsis; white-space: nowrap; font-size: .72rem; }
.discord-media-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto; }
.discord-media-actions .primary-btn, .discord-media-actions .ghost-btn { min-height: 34px; padding: 7px 10px; font-size: .78rem; }
.discord-media-actions .lucide { width: 14px; height: 14px; }
.discord-filter-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; margin: 0 0 14px; padding: 13px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--panel-2) 82%, transparent); }
.discord-filter-grid .sort-control { display: grid; min-width: 0; gap: 6px; color: var(--muted); font-size: .78rem; font-weight: 750; }
.discord-filter-grid .sort-control input, .discord-filter-grid .sort-control select { width: 100%; min-width: 0; min-height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-3); color: var(--text); font: inherit; }
.discord-filter-grid .sort-control input:focus, .discord-filter-grid .sort-control select:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
.discord-search-field { position: relative; display: flex; grid-column: 1 / -1; align-items: center; min-width: 0; }
.discord-search-field .lucide { position: absolute; left: 12px; width: 18px; color: var(--muted); pointer-events: none; }
.discord-search-field input { width: 100%; min-height: 44px; padding: 0 12px 0 40px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-3); color: var(--text); font: inherit; }
.discord-simple-filter-grid { grid-template-columns: minmax(0, 1fr) minmax(210px, .56fr); }
.discord-library-tabs { display: flex; gap: 7px; margin: 0 0 12px; overflow-x: auto; padding-bottom: 2px; }
.discord-library-tabs button { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); color: var(--muted); font: inherit; font-size: .78rem; }
.discord-library-tabs button strong { display: grid; min-width: 19px; height: 19px; place-items: center; border-radius: 999px; background: var(--panel-3); color: var(--soft); font-size: .68rem; }
.discord-library-tabs button.active { border-color: color-mix(in srgb, var(--accent) 56%, var(--line)); background: color-mix(in srgb, var(--accent) 16%, var(--panel-2)); color: var(--text); }
.discord-bot-queue ol { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 7px; }
.discord-bot-queue li { display: grid; grid-template-columns: 24px 38px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; background: var(--panel-2); }
.discord-bot-queue .queue-cover { position: relative; width: 38px; height: 38px; overflow: hidden; border-radius: 8px; background: var(--panel-3); }
.discord-bot-queue .queue-cover img { position: static; width: 100%; height: 100%; object-fit: cover; }
.discord-bot-queue li span, .discord-bot-queue li small { color: var(--muted); }
.discord-bot-queue li strong, .discord-bot-queue li small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.discord-queue-actions { display: flex; align-items: center; gap: 4px; }
.discord-queue-actions .icon-only { width: 30px; height: 30px; min-width: 30px; }
.discord-queue-actions .icon-only:disabled { opacity: .28; cursor: default; transform: none; }
@media (max-width: 1150px) { .discord-media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .discord-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 800px) { .discord-bot-controls { grid-template-columns: 1fr; } .discord-bot-now { grid-template-columns: 60px minmax(0, 1fr); } .discord-bot-now .mini-cover { width: 60px; height: 60px; } .discord-bot-now-actions { grid-column: 1 / -1; } .discord-media-grid { grid-template-columns: 1fr; } .discord-media-card { grid-template-columns: 96px minmax(0, 1fr); min-height: 136px; } .discord-media-cover { width: 96px; aspect-ratio: 1; } .discord-filter-grid, .discord-simple-filter-grid { grid-template-columns: 1fr; } }

/* Home is a listening workspace: fixed-size artwork, compact controls and shelves. */
#personalHomeFeed { display: grid; gap: 28px; width: 100%; max-width: 1200px; min-width: 0; margin: 0 auto; }
#personalHomeFeed [data-home-block] { min-width: 0; }
#personalHomeFeed h1, #personalHomeFeed h2, #personalHomeFeed h3, #personalHomeFeed .eyebrow { letter-spacing: 0; }
.home-page-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0 0; }
.home-page-heading > div { flex: 1; min-width: 0; }
.home-page-heading .eyebrow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-page-heading h1 { margin: 5px 0 0; font-size: 34px; line-height: 1.15; font-weight: 850; }
.home-page-heading p:last-child { margin: 8px 0 0; color: var(--muted); font-size: 13px; }
.home-catalog-link, .home-see-all { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 8px; min-height: 40px; border: 0; padding: 0; background: none; color: var(--soft); font-size: 12px; font-weight: 700; }
.home-catalog-link:hover, .home-see-all:hover { color: var(--accent); }
.home-catalog-link .lucide, .home-see-all .lucide { width: 16px; height: 16px; }
.personal-wave { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; min-height: 230px; background: #242428; border: 0; border-radius: 0; }
.home-wave-canvas { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); pointer-events: none; }
.home-wave-canvas img { width: 100%; height: 100%; min-height: 0; min-width: 0; object-fit: cover; }
.home-wave-canvas img:only-child { grid-column: 1 / -1; object-fit: contain; object-position: right center; padding: 20px; }
.home-wave-canvas::after { position: absolute; inset: 0; content: ""; background: rgba(6, 8, 10, .57); }
.wave-copy { position: relative; z-index: 1; display: grid; justify-items: start; gap: 9px; padding: 28px; }
.wave-copy h2 { margin: 0; color: #fff; font-size: 38px; line-height: 1.12; font-weight: 850; }
.wave-copy .eyebrow { margin: 0; color: #f2d4e8; font-size: 10px; }
.wave-copy > p:not(.eyebrow) { margin: 0; color: #f1f1f4; font-size: 14px; line-height: 21px; }
.home-wave-actions { display: flex; align-items: center; gap: 12px; margin-top: 9px; }
.home-wave-actions .primary-btn { min-height: 44px; padding: 0 20px; border-radius: 8px; }
.home-wave-open { display: grid; width: 44px; height: 44px; place-items: center; padding: 0; border: 1px solid #ffffff60; border-radius: 8px; background: #0a0b0d55; color: #fff; }
.home-wave-open .lucide { width: 20px; height: 20px; }
.home-radio-strip { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto 40px; align-items: center; gap: 14px; min-height: 90px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 14px 0; }
.home-radio-strip > img { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; background: var(--panel-2); }
.home-radio-strip > img[data-fallback="true"] { object-fit: contain; padding: 5px; }
.home-radio-copy { display: grid; min-width: 0; gap: 4px; }
.home-radio-copy > span { display: flex; align-items: center; gap: 10px; color: var(--text); font-size: 12px; font-weight: 800; }
.home-radio-copy small { color: var(--muted); font-size: 10px; font-weight: 650; }
.home-radio-copy small[data-live="true"] { color: #24b887; }
:root:is([data-theme="light"], [data-theme="warm"]) .home-radio-copy small[data-live="true"] { color: #137b56; }
.home-radio-copy strong, .home-radio-copy em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-radio-copy strong { font-size: 13px; font-weight: 600; }
.home-radio-copy em { color: var(--muted); font-size: 11px; font-style: normal; }
.home-radio-toggle, .home-radio-open { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 8px; color: var(--text); background: var(--panel-2); font-size: 12px; font-weight: 700; }
.home-radio-toggle:disabled { opacity: .5; cursor: default; }
.home-radio-toggle .lucide, .home-radio-open .lucide { width: 18px; height: 18px; }
.home-radio-open { padding: 0; width: 40px; background: none; border: 0; }
.personal-shelf { min-width: 0; }
.personal-shelf h2, .home-genres h2 { margin: 0; color: var(--text); font-size: 23px; line-height: 30px; }
.personal-shelf-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.personal-shelf-heading .eyebrow { margin: 0 0 5px; color: var(--muted); font-size: 9px; font-weight: 750; }
.home-shelf-actions, .home-shelf-navigation { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.home-shelf-actions { gap: 16px; }
.home-shelf-navigation .icon-btn { width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 8px; background: transparent; }
.home-shelf-navigation .icon-btn .lucide { width: 17px; height: 17px; }
.home-shelf-navigation .icon-btn:disabled { opacity: .28; cursor: default; }
.home-music-grid, .home-mix-grid { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 64px) / 5); gap: 16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; padding: 0 0 4px; }
.home-music-grid::-webkit-scrollbar, .home-mix-grid::-webkit-scrollbar { display: none; }
.home-music-card { min-width: 0; scroll-snap-align: start; padding: 8px; background: none; }
.home-music-cover { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 8px; background: var(--panel-2); }
.home-music-cover > img { width: 100%; height: 100%; display: block; object-fit: cover; }
.home-cover-fallback { display: grid; place-items: center; width: 100%; height: 100%; color: var(--muted); }
.home-cover-fallback .lucide { width: 44px; height: 44px; }
.home-cover-play { position: absolute; right: 10px; bottom: 10px; display: grid; width: 40px; height: 40px; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--accent); color: #1a0c14; opacity: 0; transform: translateY(3px); transition: opacity .15s ease, transform .15s ease; }
.home-music-card:hover .home-cover-play, .home-music-card:focus-within .home-cover-play { opacity: 1; transform: none; }
.home-cover-play .lucide { width: 18px; height: 18px; }
.home-music-title, .home-music-author { display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; color: var(--text); }
.home-music-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 40px; margin-top: 10px; font-size: 14px; line-height: 20px; font-weight: 750; overflow-wrap: anywhere; }
.home-music-author { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 18px; }
.home-music-author:hover, .home-music-title:hover { color: var(--accent); }
.home-music-bottom { display: flex; align-items: center; gap: 4px; margin-top: 4px; min-height: 32px; }
.home-music-bottom > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 10px; }
.home-save-track, .home-track-menu { display: grid; width: 32px; height: 32px; flex: 0 0 32px; place-items: center; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--soft); }
.home-save-track .lucide, .home-track-menu .lucide { width: 16px; height: 16px; }
.home-save-track:hover, .home-track-menu:hover { background: var(--panel-2); color: var(--text); }
.home-save-track.liked { color: var(--accent); }
.home-save-track.liked .lucide { fill: currentColor; }
.automatic-playlist-shelf { display: grid; gap: 16px; }
.automatic-playlist-shelf > .personal-shelf-heading { margin-bottom: 0; }
.automatic-playlist-group { min-width: 0; border: 0; border-radius: 0; padding: 0; background: none; }
.automatic-playlist-group h3 { margin: 0; color: var(--soft); font-size: 14px; font-weight: 650; }
.home-mix-grid { grid-auto-columns: calc((100% - 32px) / 3); }
.automatic-playlist-card { display: block; min-width: 0; scroll-snap-align: start; padding: 0; border: 0; border-radius: 0; background: none; }
.automatic-cover-button { display: block; width: 100%; min-width: 0; padding: 0; border: 0; background: none; color: inherit; text-align: left; }
.home-mix-art { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); width: 100%; aspect-ratio: 1.8; overflow: hidden; border-radius: 8px; background: var(--panel-2); }
.home-mix-art img { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: cover; }
.home-mix-art img:only-of-type { grid-column: 1 / -1; grid-row: 1 / -1; }
.home-mix-art img:nth-of-type(3):last-of-type { grid-column: 1 / -1; }
.home-mix-art > b { position: absolute; bottom: 10px; left: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 5px 7px; border-radius: 4px; background: #080a0ccc; color: #fff; font-size: 9px; }
.home-mix-art > b .lucide { width: 12px; height: 12px; }
.automatic-playlist-copy { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; min-height: 66px; padding: 10px 0 0; }
.automatic-playlist-copy > button { flex: 1; min-width: 0; padding: 0; border: 0; background: none; color: var(--text); text-align: left; }
.automatic-playlist-copy strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; font-size: 14px; line-height: 19px; font-weight: 750; }
.automatic-playlist-copy > button > span { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
.automatic-playlist-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 5px; }
.automatic-play, .automatic-like { display: grid; width: 36px; height: 36px; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); color: var(--soft); }
.automatic-play { background: var(--accent); border-color: transparent; color: #1a0c14; }
.automatic-play .lucide, .automatic-like .lucide { width: 16px; height: 16px; }
.automatic-like.liked { color: var(--accent); }
.home-resume-card { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: none; border-radius: 0; }
.home-resume-open { display: flex; flex: 1; min-width: 0; align-items: center; gap: 14px; padding: 0; border: 0; background: none; color: inherit; text-align: left; }
.home-resume-cover { display: grid; place-items: center; width: 60px; height: 60px; flex: 0 0 60px; overflow: hidden; border-radius: 8px; background: var(--panel-2); }
.home-resume-cover img { width: 100%; height: 100%; object-fit: cover; }
.home-resume-open > span:last-child { min-width: 0; }
.home-resume-open small, .home-resume-open strong, .home-resume-open em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-resume-open small { color: var(--accent); font-size: 9px; font-weight: 750; }
.home-resume-open strong { margin-top: 5px; color: var(--text); font-size: 14px; }
.home-resume-open em { margin-top: 5px; color: var(--muted); font-size: 11px; font-style: normal; }
.home-resume-play { display: grid; width: 44px; height: 44px; flex: 0 0 44px; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--accent); color: #1a0c14; }
.personal-empty { margin: 0; padding: 12px 0; color: var(--muted); font-size: 13px; }
.home-genres h2 { font-size: 20px; }
.home-genres > div { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.home-genres button { display: flex; align-items: center; gap: 18px; min-height: 42px; max-width: 100%; padding: 8px 14px; border: 1px solid var(--line); border-radius: 6px; background: none; color: var(--soft); font-size: 12px; overflow-wrap: anywhere; }
.home-genres button:hover { border-color: var(--accent); color: var(--text); }
.home-genres .lucide { width: 14px; height: 14px; }
.generated-playlist-cover-large > span { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; background-position: center; background-size: cover; }
.generated-playlist-cover-large > span::after { position: absolute; inset: 0; content: ""; background: linear-gradient(180deg, transparent 28%, rgba(24, 8, 27, .2) 55%, rgba(12, 7, 18, .88)); }
.generated-playlist-cover-large b { position: absolute; z-index: 2; bottom: 10px; left: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 6px 8px; border: 1px solid #ffffff30; border-radius: 8px; background: #130b18b8; color: #fff; font-size: 8px; }
.generated-playlist-cover-large b .lucide { width: 13px; height: 13px; }
.metadata-suggestions { padding: 16px; border: 1px solid #d27abb35; border-radius: 16px; background: #6d295817; display: grid; gap: 10px; }
.metadata-suggestions:empty { display: none; }
.metadata-suggestions h3, .metadata-suggestions p { margin: 0; }
.metadata-suggestion-list { display: flex; flex-wrap: wrap; gap: 8px; }
.metadata-suggestion { display: inline-flex; align-items: center; border: 1px solid #ffffff26; border-radius: 18px; overflow: hidden; }
.metadata-suggestion button { padding: 10px 12px; color: inherit; background: transparent; border: 0; min-height: 44px; }
.metadata-suggestion button:hover { background: #db60bb30; }
@media (max-width: 1100px) {
  .home-music-grid { grid-auto-columns: calc((100% - 48px) / 4); }
  .home-mix-grid { grid-auto-columns: calc((100% - 16px) / 2); }
}
@media (max-width: 700px) {
  #personalHomeFeed { gap: 24px; }
  .home-music-grid { grid-auto-columns: calc((100% - 28px) / 3); gap: 14px; }
  .home-shelf-actions { gap: 10px; }
  .home-see-all { font-size: 11px; }
  .home-page-heading h1 { font-size: 30px; }
}
@media (max-width: 500px) {
  #personalHomeFeed { gap: 22px; }
  .home-page-heading { padding-top: 4px; align-items: flex-start; }
  .home-page-heading h1 { font-size: 30px; }
  .home-page-heading p:last-child { font-size: 12px; }
  .home-catalog-link { width: 40px; height: 40px; font-size: 0; }
  .home-catalog-link .lucide { width: 20px; height: 20px; }
  .personal-wave { min-height: 210px; }
  .wave-copy { padding: 22px; gap: 8px; }
  .wave-copy h2 { font-size: 32px; }
  .wave-copy > p:not(.eyebrow) { max-width: 225px; font-size: 12px; line-height: 19px; }
  .home-wave-canvas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-wave-canvas img:nth-child(n+4) { display: none; }
  .home-radio-strip { grid-template-columns: 44px minmax(0, 1fr) 40px; min-height: 82px; gap: 10px; padding: 12px 0; }
  .home-radio-strip > img { width: 44px; height: 44px; }
  .home-radio-copy > span { font-size: 11px; flex-wrap: wrap; gap: 3px 7px; }
  .home-radio-copy strong { font-size: 12px; }
  .home-radio-copy em, .home-radio-open, .home-radio-toggle > span { display: none; }
  .home-radio-toggle { width: 40px; padding: 0; }
  .personal-shelf h2, .home-genres h2 { font-size: 20px; line-height: 26px; }
  .personal-shelf-heading { gap: 8px; }
  .home-music-shelf .home-shelf-actions .home-see-all { display: none; }
  .home-shelf-navigation { gap: 5px; }
  .home-shelf-navigation .icon-btn { width: 32px; height: 36px; }
  .home-music-grid { grid-auto-columns: calc((100% - 12px) / 2.15); gap: 12px; }
  .home-mix-grid { grid-auto-columns: 82%; gap: 12px; }
  .home-music-title { font-size: 13px; line-height: 19px; min-height: 38px; }
  .home-music-author { font-size: 11px; }
  .home-cover-play { opacity: 1; transform: none; width: 36px; height: 36px; right: 8px; bottom: 8px; }
  .home-resume-open { gap: 10px; }
  .home-resume-cover { width: 52px; height: 52px; flex-basis: 52px; }
}
@media (hover: none), (prefers-reduced-motion: reduce) { .home-cover-play { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .home-cover-play { transition: none; } }
.queue-upcoming-section .queue-item { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: grab; }
.queue-upcoming-section .queue-item.is-dragging { cursor: grabbing; outline: 2px solid var(--accent, #e879c3); }
.upload-extra-genres { display: grid; gap: 9px; margin-top: 15px; }
.upload-extra-genres input { min-width: 0; flex: 1; width: 160px; }

/* Site/player parity: keep refresh and long queues independent of playback. */
.page-refresh-btn { display: grid; width: 42px; height: 42px; padding: 0; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--panel-2); color: var(--soft); }
.page-refresh-btn[hidden], .pull-refresh-indicator[hidden] { display: none !important; }
.page-refresh-btn .lucide { width: 18px; height: 18px; }
.page-refresh-btn.is-refreshing .lucide, .pull-refresh-indicator:not([hidden]) .lucide { animation: page-refresh-spin .9s linear infinite; }
.pull-refresh-indicator { position: fixed; top: max(66px, env(safe-area-inset-top)); left: 50%; z-index: 30; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--text); box-shadow: var(--shadow); font-size: .78rem; font-weight: 800; transform: translateX(-50%); pointer-events: none; }
.pull-refresh-indicator .lucide { width: 16px; height: 16px; color: var(--accent); }
.pull-refresh-indicator.is-ready { border-color: var(--accent); }
@keyframes page-refresh-spin { to { transform: rotate(360deg); } }

.queue-panel { transition: transform 320ms cubic-bezier(.2, .8, .2, 1); }
.queue-panel.open .queue-item, .queue-panel.open .queue-head { animation: none !important; }
.queue-show-more { display: block; width: 100%; min-height: 44px; margin-top: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); color: var(--accent); font: inherit; font-size: .8rem; font-weight: 900; cursor: pointer; }
.queue-show-more:hover { border-color: var(--accent); }

/* The lower information area is a readable panel, not a second screen. */
.fullscreen-track-details { width: min(1160px, calc(100% - 48px)); margin: 4px auto 54px; padding: clamp(22px, 3vw, 34px); border-color: rgb(var(--fullscreen-accent) / .22); border-radius: 28px; background: linear-gradient(145deg, rgb(var(--fullscreen-tone) / .26), rgba(10, 13, 19, .94) 65%); box-shadow: 0 24px 70px rgba(0, 0, 0, .22); }
.fullscreen-track-details > .fullscreen-info-head { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.fullscreen-info-head > div { min-width: 0; }
.fullscreen-info-head h2 { margin: 4px 0 0; font-size: clamp(1.35rem, 2.2vw, 1.8rem); }
.fullscreen-info-head p:last-child { margin: 5px 0 0; color: rgba(244,246,248,.58); font-size: .82rem; }
.fullscreen-info-mark { display: grid; flex: 0 0 50px; width: 50px; height: 50px; place-items: center; border: 1px solid rgb(var(--fullscreen-accent) / .35); border-radius: 16px; background: rgb(var(--fullscreen-accent) / .14); color: #f4f6f8; }
.fullscreen-info-mark .lucide { width: 23px; height: 23px; }
.fullscreen-info-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); gap: 16px; }
.fullscreen-info-story { display: flex; flex-direction: column; justify-content: center; min-height: 178px; padding: clamp(19px, 2.5vw, 28px); border: 1px solid rgb(var(--fullscreen-accent) / .18); border-radius: 20px; background: rgb(var(--fullscreen-deep) / .52); }
.fullscreen-info-story p { max-width: 62ch; margin: 12px 0 0; color: rgba(244,246,248,.86); font-size: clamp(.93rem, 1.35vw, 1.08rem); line-height: 1.65; white-space: pre-wrap; }
.fullscreen-info-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fullscreen-info-facts > div { display: grid; align-content: center; gap: 8px; min-width: 0; padding: 16px; border: 1px solid rgb(var(--fullscreen-accent) / .18); border-radius: 16px; background: rgb(var(--fullscreen-tone) / .14); }
.fullscreen-info-facts strong, .fullscreen-info-facts button { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fullscreen-detail-sources { margin-top: 24px; padding-top: 22px; border-top: 1px solid rgb(var(--fullscreen-accent) / .18); }
.fullscreen-info-sources-head { margin-bottom: 14px; }
.fullscreen-info-sources-head h3 { margin: 6px 0 0; font-size: 1.1rem; }
.fullscreen-detail-sources > div:last-child { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.fullscreen-detail-link { min-height: 72px; border-radius: 15px; transition: border-color .2s ease, background-color .2s ease; }
.fullscreen-detail-link:hover { border-color: rgb(var(--fullscreen-accent) / .55); background: rgb(var(--fullscreen-tone) / .25); }
.playlist-system-copy-note, .playlist-archived-note { display: flex; align-items: center; gap: 8px; padding: 11px 13px; border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--accent) 8%, var(--panel)); color: var(--soft); line-height: 1.45; }
.playlist-system-copy-note[hidden] { display: none; }
.playlist-archived-note .lucide { flex: 0 0 17px; width: 17px; height: 17px; color: var(--accent); }

.fullscreen-player:not([hidden]) { animation: fullscreen-player-enter 420ms cubic-bezier(.16, 1, .3, 1) both; }
.fullscreen-player.is-closing { animation: fullscreen-player-exit 320ms cubic-bezier(.4, 0, 1, 1) both; }
.fullscreen-player:not([hidden]) .fullscreen-player-cover { animation: fullscreen-cover-enter 430ms 35ms cubic-bezier(.16, 1, .3, 1) both; }
@keyframes fullscreen-player-enter { from { opacity: 0; transform: translate3d(0, 28px, 0) scale(.985); } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } }
@keyframes fullscreen-player-exit { from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } to { opacity: 0; transform: translate3d(0, 24px, 0) scale(.985); } }

:root:is([data-theme="light"], [data-theme="warm"]) .fullscreen-track-details { background: rgba(255,255,255,.88); color: #171b22; }
:root:is([data-theme="light"], [data-theme="warm"]) .fullscreen-info-story,
:root:is([data-theme="light"], [data-theme="warm"]) .fullscreen-info-facts > div { border-color: rgba(27,38,50,.13); background: rgba(239,243,248,.68); }
:root:is([data-theme="light"], [data-theme="warm"]) .fullscreen-info-story p { color: rgba(23,27,34,.82); }
:root:is([data-theme="light"], [data-theme="warm"]) .fullscreen-info-head p:last-child { color: rgba(23,27,34,.58); }

@media (max-width: 760px) {
  .fullscreen-track-details { width: calc(100% - 28px); margin: 0 auto 30px; padding: 19px; border-radius: 21px; }
  .fullscreen-track-details > .fullscreen-info-head { align-items: flex-start; gap: 12px; margin-bottom: 16px; }
  .fullscreen-info-mark { flex-basis: 42px; width: 42px; height: 42px; border-radius: 13px; }
  .fullscreen-info-mark .lucide { width: 20px; height: 20px; }
  .fullscreen-info-grid { grid-template-columns: 1fr; gap: 10px; }
  .fullscreen-info-story { min-height: 0; padding: 18px; }
  .fullscreen-info-facts > div { padding: 13px; }
  .fullscreen-detail-sources > div:last-child { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .fullscreen-player:not([hidden]), .fullscreen-player.is-closing,
  .fullscreen-player:not([hidden]) .fullscreen-player-cover,
  .page-refresh-btn.is-refreshing .lucide, .pull-refresh-indicator:not([hidden]) .lucide { animation: none !important; }
  .queue-panel, .fullscreen-detail-link { transition: none !important; }
}

/* Shared semantic surfaces: text accents and filled controls need different ink. */
:root, :root[data-theme="dark"] {
  color-scheme: dark;
  --muted: #a6afba; --accent: #ff63c7; --accent-2: #b091ff; --on-accent: #160414;
  --danger: #ff8599; --success: #65dcb3; --warning: #ffd166; --control-line: #74808f;
  --line: rgba(222,228,235,.22);
}
:root[data-theme="light"] {
  color-scheme: light;
  --muted: #4b5b6c; --accent: #a91076; --accent-2: #663ab7; --on-accent: #fff;
  --danger: #b51e3d; --success: #126648; --warning: #795100; --control-line: #697b8d;
  --line: rgba(27,38,50,.22);
}
:root[data-theme="warm"] {
  color-scheme: light;
  --muted: #655448; --accent: #a12665; --accent-2: #6245aa; --on-accent: #fff;
  --danger: #a9223b; --success: #1c6247; --warning: #795100; --control-line: #84715e;
  --line: rgba(64,48,35,.24);
}
:root[data-theme="dim"] {
  color-scheme: dark;
  --muted: #b0bdd2; --accent: #ba98ff; --accent-2: #87d0ff; --on-accent: #160414;
  --danger: #ff92a6; --success: #70e1ba; --warning: #ffd166; --control-line: #8393ad;
  --line: rgba(202,216,240,.24);
}
:root[data-theme] :is(input:not([type="range"]):not([type="checkbox"]):not([type="radio"]), textarea, select) { color: var(--text); background-color: var(--panel-2); border-color: var(--control-line); }
:root[data-theme] :is(input, textarea)::placeholder { color: var(--muted); opacity: 1; }
:root[data-theme] :is(option, optgroup) { color: var(--text); background: var(--panel); }
:root[data-theme] :is(input[type="range"], input[type="checkbox"], input[type="radio"]) { accent-color: var(--accent); }
:root[data-theme] :is(button, a, input, textarea, select):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
:root[data-theme] :is(.primary-btn, .home-cover-play, .home-playlist-play, .automatic-play, .home-resume-play, .home-wave-play, .discord-bot-tabs button.active) { background: var(--accent); color: var(--on-accent); }
:root[data-theme] .primary-btn:hover { background: var(--accent); color: var(--on-accent); filter: brightness(1.08); }
:root[data-theme] :is(.cover button, .a1) { color: var(--on-accent); }
:root[data-theme] .inbox-btn.has-unread { color: var(--on-accent); }
:root[data-theme] .user-avatar-fallback { background: var(--panel-3); color: var(--accent); }
:root[data-theme] .quality-checks .missing { color: var(--warning); }
:root[data-theme] .file-errors span { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, var(--panel)); border-color: var(--danger); }
:root[data-theme] :is(.danger, .danger-btn, .error-text, .error-message, .form-error, .chart-movement.is-down) { color: var(--danger) !important; }
:root[data-theme] :is(.chart-movement.is-up, .chart-legend .is-up, #radioAirStatus[data-live="true"], .home-radio-copy small[data-live="true"], .radio-dock-track small, [data-radio-live]) { color: var(--success); }
:root[data-theme] :is(.modal, .queue-panel, .notification-card, .theme-picker-panel, .theme-option, .queue-item, .queue-recommendation-item) { color: var(--text); background-color: var(--panel); border-color: var(--line); }
:root[data-theme] :is(.queue-item, .queue-recommendation-item) { background: var(--panel-2); }
:root[data-theme] :is(.queue-item-main > span, .queue-position, .queue-section-heading p, .queue-recommendation-item > div > span, .notification-copy p, .notification-card-head time) { color: var(--muted); }
:root[data-theme] :is(.queue-item .row-like, .queue-remove, .queue-recommendation-item .row-like, .queue-head button) { color: var(--soft); background: var(--panel-3); border-color: var(--line); }
:root[data-theme] :is(.queue-item .liked, .queue-recommendation-item .liked) { color: var(--accent); }
:root[data-theme] .topbar { background: color-mix(in srgb, var(--bg) 96%, transparent); border-color: var(--line); }
:root[data-theme] .sidebar { background: var(--panel); }
:root[data-theme] .player { background: color-mix(in srgb, var(--panel) 94%, var(--accent) 6%); border-color: var(--line); color: var(--text); }
:root[data-theme] .player button { color: var(--soft); background: var(--panel-2); }
:root[data-theme] .player button:hover { background: var(--panel-3); color: var(--text); }
:root[data-theme] .player button.active-toggle { background: var(--accent); color: var(--on-accent); }
:root[data-theme] .player .play-toggle, :root[data-theme] .radio-listen { background: var(--text) !important; color: var(--bg) !important; }
:root[data-theme] .player .play-toggle:hover { background: var(--text) !important; color: var(--bg) !important; }
:root[data-theme] .fullscreen-player { color: var(--text); background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 94%, var(--accent) 6%), var(--bg)); }
:root[data-theme] :is(.fullscreen-close, .fullscreen-player-actions button, .fullscreen-player-actions label, .fullscreen-player-actions a, .fullscreen-context-card, .fullscreen-track-details, .fullscreen-info-story, .fullscreen-info-facts > div, .fullscreen-detail-link) { color: var(--text); border-color: var(--line); background: var(--panel-2); }
:root[data-theme] :is(.fullscreen-track-copy > p:last-child, .fullscreen-progress > div, .fullscreen-context-label, .fullscreen-context-copy small, .fullscreen-context-empty, .fullscreen-detail-label, .fullscreen-detail-empty, .fullscreen-info-head p:last-child, .fullscreen-detail-link small) { color: var(--muted); }
:root[data-theme] :is(.fullscreen-info-story p, .fullscreen-detail-description p, .fullscreen-controls button, .fullscreen-detail-tags span, .fullscreen-info-mark) { color: var(--soft); }
:root[data-theme] :is(.fullscreen-detail-title, .fullscreen-detail-author) { color: var(--text); }
:root[data-theme] .fullscreen-controls button:hover { color: var(--text); background: var(--panel-3); }
:root[data-theme] .fullscreen-controls button.active-toggle { color: var(--accent); background: var(--panel-3); }
:root[data-theme] .fullscreen-controls .fullscreen-play-toggle { color: var(--bg); background: var(--text); }
:root[data-theme] .fullscreen-controls .fullscreen-play-toggle:hover { color: var(--bg); background: var(--text); }
:root[data-theme] .fullscreen-player-actions button strong { color: var(--text); background: var(--panel-3); }
:root[data-theme] body.fullscreen-player-open .queue-panel { color: var(--text); border-color: var(--line); background: var(--panel); }
:root[data-theme] body.fullscreen-player-open .queue-panel :is(.link-title, .muted-link, .queue-section h3, .queue-section-heading > span) { color: var(--text); }
:root[data-theme] body.fullscreen-player-open .queue-panel :is(.queue-item, .queue-recommendation-item) { color: var(--text); background: var(--panel-2); border-color: var(--line); }
:root[data-theme] body.fullscreen-player-open .queue-panel :is(.queue-position, .queue-item-main > span, .queue-section-heading p, .queue-recommendation-item > div > span) { color: var(--muted); }
:root[data-theme] body.fullscreen-player-open .queue-panel :is(.row-like, .queue-remove, .queue-head button) { color: var(--soft); background: var(--panel-3); }
.radio-listen { border: 0; cursor: pointer; }
.radio-controls > .icon-btn { width: 44px; height: 44px; flex: 0 0 44px; border: 1px solid var(--line); color: var(--soft); background: var(--panel-2); }
.radio-dock.player { z-index: 70; display: grid; grid-template-columns: minmax(180px,1fr) minmax(160px,1.4fr) minmax(150px,1fr); gap: 18px; min-height: 92px; }
:root[data-theme] .radio-dock .radio-dock-track { display: flex; width: 100%; height: auto; min-width: 0; padding: 0; border: 0; background: none; color: var(--text); text-align: left; }
:root[data-theme] .radio-dock .radio-dock-track:hover { transform: none; background: none; }
.radio-dock-track img { width: 58px; height: 58px; border-radius: 6px; }
.radio-live-caption { margin: 0; text-align: center; color: var(--muted); font-size: 12px; line-height: 18px; }
.radio-fullscreen-open { overflow: hidden; }
.radio-fullscreen .fullscreen-player-actions a { display: inline-flex; gap: 8px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 8px; text-decoration: none; font-size: 13px; }
.radio-fullscreen .fullscreen-player-actions a svg { width: 18px; height: 18px; }
.radio-fullscreen .fullscreen-context-track { min-height: 45px; overflow-wrap: anywhere; }
.radio-fullscreen .fullscreen-context-copy { display: block; min-width: 0; }
.radio-fullscreen .radio-artwork { height: 100%; max-width: none; object-fit: contain; }
.radio-fullscreen .radio-live-caption { text-align: left; }
:root { --track-outline: color-mix(in srgb, var(--soft) 40%, var(--panel)); }
:root[data-theme] :is(.home-music-card, .track-card, .track-row, .radio-track-row) {
  border: 1px solid var(--track-outline);
  border-radius: 8px;
  transition: border-color 140ms ease;
}
:root[data-theme] :is(.home-music-card, .track-card, .track-row, .radio-track-row):is(:hover, :focus-within) {
  border-color: color-mix(in srgb, var(--accent) 76%, var(--panel));
}
.home-music-card .home-music-cover { border-radius: 6px; }
.radio-track-row { margin-block: 8px; padding-inline: 10px; }
@media(prefers-reduced-motion:reduce) {
  :root[data-theme] :is(.home-music-card, .track-card, .track-row, .radio-track-row) { transition: none; }
}
@media(max-width:700px) {
  .radio-dock.player { bottom: 58px; min-height: 78px; padding: 10px 12px; grid-template-columns: minmax(0,1fr) 40px auto; gap: 9px; }
  .radio-dock-track img { width: 44px; height: 44px; }
  .radio-dock .radio-live-caption, .radio-dock [data-radio-expand]:not(.radio-dock-track) { display: none; }
  .radio-dock .player-actions { position: static; gap: 4px; }
  .radio-dock .player-actions > #radioClose { display: inline-flex; }
  .radio-dock .player-controls { gap: 0; }
  .radio-dock-track small { font-size: 9px; }
  .radio-fullscreen .fullscreen-player-layout { min-height: calc(100dvh - 86px); }
}

/* Mashupov — a quiet frame for loud music. Two semantic palettes. */
:root, :root[data-theme="warm"] {
  color-scheme: light;
  --bg: #f5f1e9;
  --panel: #fcfaf6;
  --panel-2: #eee9e0;
  --panel-3: #e5ded3;
  --text: #282923;
  --muted: #6b6b61;
  --soft: #4f5147;
  --accent: #a6422c;
  --accent-2: #66724d;
  --on-accent: #fffaf5;
  --line: #ddd8ce;
  --control-line: #a8a496;
  --danger: #b1293b;
  --success: #34714b;
  --warning: #805d17;
  --shadow: 0 18px 60px #38301f12;
  --hero: #e9e4d8;
  --hero-ink: #34382c;
  --hero-accent: #52613d;
  --active-bg: #eaddd1;
  --sidebar-width: 224px;
  font-family: "Segoe UI", Inter, system-ui, -apple-system, sans-serif;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #17191b;
  --panel: #1e2022;
  --panel-2: #272a2c;
  --panel-3: #323638;
  --text: #f1eee5;
  --muted: #b0b2a8;
  --soft: #d0d2c6;
  --accent: #efa284;
  --accent-2: #b5c49b;
  --on-accent: #30180e;
  --line: #393c3e;
  --control-line: #71776e;
  --danger: #f6959f;
  --success: #9fceb1;
  --warning: #e1c285;
  --shadow: 0 18px 60px #0003;
  --hero: #292f2a;
  --hero-ink: #f0efdf;
  --hero-accent: #bac49a;
  --active-bg: #3c302c;
}
html { scroll-padding-top: 110px; }
:root[data-theme] body { background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.5; }
:root[data-theme] h1, :root[data-theme] h2, :root[data-theme] h3 { font-weight: 650; letter-spacing: -.035em; }
:root[data-theme] h1 { font-size: clamp(28px, 3vw, 38px); line-height: 1.18; }
:root[data-theme] h2 { line-height: 1.25; }
:root[data-theme] button { font-weight: 550; transition: background-color .16s, color .16s, border-color .16s; }
:root[data-theme] button:disabled { cursor: not-allowed; }
:root[data-theme] :is(button,a,input,select,textarea):focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.skip-link { position: fixed; top: -80px; left: 16px; z-index: 200; padding: 12px 20px; border-radius: 8px; color: var(--on-accent); background: var(--accent); }
.skip-link:focus { top: 16px; }
:root[data-theme] .app-shell { grid-template-columns: var(--sidebar-width) minmax(0,1fr); padding-bottom: 108px; }
:root[data-theme] .sidebar { width: var(--sidebar-width); padding: 28px 16px 120px; background: var(--panel); border-right: 1px solid var(--line); }
:root[data-theme] .brand { min-height: 76px; margin-bottom: 35px; justify-content: flex-start; padding: 0 14px; }
:root[data-theme] .brand-logo { width: 154px; height: 76px; object-fit: contain; }
:root[data-theme] .nav-list { gap: 5px; }
.nav-section-label { padding: 14px 16px 9px; color: var(--muted); font-size: 10px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; }
:root[data-theme] .nav-item { min-height: 47px; padding: 0 16px; border-radius: 12px; gap: 12px; font-size: 14px; color: var(--muted); font-weight: 500; }
:root[data-theme] .nav-item .icon { width: 19px; height: 19px; }
:root[data-theme] .nav-item.active { color: var(--accent); background: var(--active-bg); font-weight: 650; }
:root[data-theme] .nav-item:hover { background: var(--panel-2); color: var(--text); }
.sidebar-note { margin: 38px 14px 0; padding-top: 26px; border-top: 1px solid var(--line); color: var(--muted); }
.sidebar-note > .lucide { width: 27px; height: 27px; margin-bottom: 14px; color: var(--accent-2); }
.sidebar-note strong { display: block; max-width: 150px; font-size: 14px; line-height: 1.5; font-weight: 600; color: var(--soft); }
.sidebar-note p { font-size: 11px; margin: 7px 0; }
:root[data-theme] .playlist-panel { margin-top: 24px; padding-top: 20px; }
:root[data-theme] .main { grid-column: 2; min-width: 0; padding: 0 clamp(24px,3.6vw,56px) 55px; }
:root[data-theme] .topbar { display: flex; align-items: center; gap: 16px; min-height: 98px; margin-bottom: 29px; padding: 21px 0; top: 0; border-bottom: 1px solid var(--line); background: color-mix(in srgb,var(--bg) 96%,transparent); backdrop-filter: blur(16px); z-index: 25; }
:root[data-theme] .search-wrap { flex: 1; min-width: 0; width: auto; max-width: 620px; min-height: 48px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); padding: 0 16px; box-shadow: none; }
:root[data-theme] .search-wrap:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb,var(--accent) 10%,transparent); }
:root[data-theme] .search-wrap .icon { width: 19px; height: 19px; color: var(--muted); }
:root[data-theme] .search-wrap input { height: 46px; min-height: 0; padding: 0 0 0 10px; border: 0; background: transparent; box-shadow: none; font-size: 13px; outline: none; }
:root[data-theme] .topbar-actions { display: flex; align-items: center; gap: 9px; margin-left: auto; }
:root[data-theme] :is(.topbar-link,.avatar-btn,.inbox-btn,.page-refresh-btn) { min-height: 44px; border: 1px solid var(--line); border-radius: 12px; background: transparent; color: var(--soft); font-size: 13px; box-shadow: none; }
:root[data-theme] .theme-toggle { width: 44px; height: 44px; padding: 0; justify-content: center; }
:root[data-theme] .theme-toggle .topbar-link-label { display: none; }
:root[data-theme] .page-refresh-btn { width: 44px; height: 44px; }
:root[data-theme] .avatar-btn { width: auto; padding: 0 16px; background: var(--text); color: var(--bg); font-size: 13px; }
:root[data-theme] .topbar-link { padding: 0 14px; }
:root[data-theme] :is(.topbar-link,.inbox-btn,.page-refresh-btn):hover { background: var(--panel-2); }
:root[data-theme] .eyebrow { color: var(--muted); font-size: 10px; font-weight: 650; letter-spacing: .12em; line-height: 1.5; }
:root[data-theme] :is(.primary-btn,.ghost-btn,.topbar-link,.compact-action) { min-height: 44px; border-radius: 11px; font-weight: 600; font-size: 13px; }
:root[data-theme] .primary-btn { padding: 0 20px; border: 0; color: var(--on-accent); background: var(--accent); box-shadow: none; }
:root[data-theme] .ghost-btn { border: 1px solid var(--line); background: var(--panel); color: var(--soft); }
:root[data-theme] .ghost-btn:hover { border-color: var(--accent); background: var(--panel-2); color: var(--text); }
:root[data-theme] #personalHomeFeed { max-width: 1320px; gap: 30px; }
:root[data-theme] .home-page-heading { align-items: flex-end; padding: 0; gap: 20px; }
:root[data-theme] .home-page-heading h1 { font-size: clamp(25px,2.4vw,33px); margin: 7px 0 0; font-weight: 600; letter-spacing: -.045em; }
:root[data-theme] .home-page-heading .eyebrow { letter-spacing: .12em; font-size: 9px; margin: 0; font-weight: 600; }
:root[data-theme] :is(.home-catalog-link,.home-see-all) { font-size: 12px; font-weight: 550; color: var(--muted); }
:root[data-theme] .personal-wave { min-height: 330px; display: grid; grid-template-columns: 1.1fr 1fr; border-radius: 22px; border: 1px solid color-mix(in srgb,var(--hero-ink) 6%,transparent); background: var(--hero); align-items: stretch; }
:root[data-theme] .wave-copy { padding: clamp(26px,3.3vw,46px); justify-items: start; align-content: center; gap: 16px; }
:root[data-theme] .wave-copy .eyebrow { display: flex; align-items: center; gap: 8px; font-size: 10px; letter-spacing: .15em; color: var(--hero-accent); }
.wave-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
:root[data-theme] .wave-copy h2 { margin: 0; font-size: clamp(40px,4.6vw,65px); font-weight: 550; line-height: 1.02; letter-spacing: -.065em; color: var(--hero-ink); }
.wave-copy h2 em { font-family: Georgia,"Times New Roman",serif; font-weight: 400; color: var(--hero-accent); }
:root[data-theme] .wave-copy > p:not(.eyebrow) { font-size: 13px; line-height: 1.75; max-width: 350px; color: var(--hero-ink); opacity: .85; }
:root[data-theme] .home-wave-actions { margin-top: 2px; gap: 9px; }
:root[data-theme] .home-wave-actions .primary-btn { min-height: 46px; border-radius: 11px; padding: 0 20px; }
:root[data-theme] .home-wave-open { width: 46px; height: 46px; min-height: 46px; border-color: color-mix(in srgb,var(--hero-ink) 20%,transparent); border-radius: 11px; color: var(--hero-ink); background: transparent; }
:root[data-theme] .home-wave-open:hover { background: color-mix(in srgb,var(--hero-ink) 8%,transparent); }
:root[data-theme] .home-wave-canvas { position: relative; inset: auto; display: block; min-width: 0; min-height: 330px; overflow: hidden; background: none; }
:root[data-theme] .home-wave-canvas::after { content: none; }
.home-wave-canvas::before { content: ""; position: absolute; width: 380px; height: 380px; right: -64px; top: -40px; border-radius: 50%; border: 1px solid color-mix(in srgb,var(--hero-ink) 12%,transparent); box-shadow: 0 0 0 35px color-mix(in srgb,var(--hero-ink) 3%,transparent),0 0 0 70px color-mix(in srgb,var(--hero-ink) 3%,transparent); }
.vinyl-disc { position: absolute; width: 244px; height: 244px; top: 39px; right: 14%; border-radius: 50%; background: repeating-radial-gradient(circle at center,#181918 0px,#181918 2px,#303230 3px,#1f211f 4px); box-shadow: 10px 12px 25px #161b1b33; transform: rotate(-14deg); }
.vinyl-disc::after { content: ""; position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--hero); left: calc(50% - 4.5px); top: calc(50% - 4.5px); }
.vinyl-label { position: absolute; inset: 76px; border-radius: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; background: #c47b55; color: #1e211c; font-family: Georgia,serif; font-style: italic; font-size: 50px; line-height: .8; }
.vinyl-label > span { font-family: "Segoe UI",sans-serif; font-size: 6px; letter-spacing: .03em; font-style: normal; margin-top: 14px; }
.wave-art-card { position: absolute; left: 6%; top: 48px; width: 215px; height: 237px; padding: 9px 9px 0; background: #fcfaf1; box-shadow: 0 12px 36px #15231926; transform: rotate(-9deg); border-radius: 3px; }
:root[data-theme] .home-wave-canvas .wave-art-card img { display: block; width: 197px; height: 197px; object-fit: cover; padding: 0; }
.wave-art-placeholder { display: grid; place-items: center; height: 197px; font-size: 100px; background: #bcc29f; color: #263228; font-family: Georgia,serif; }
.wave-art-caption { display: flex; justify-content: space-between; align-items: center; color: #353c2f; height: 30px; font-size: 8px; font-weight: 600; letter-spacing: .13em; }
.wave-art-caption .lucide { width: 16px; height: 16px; }
.wave-caption { position: absolute; bottom: 24px; right: 30px; font-size: 8px; font-weight: 600; letter-spacing: .15em; color: var(--hero-accent); }
:root[data-theme] .home-radio-strip { min-height: 78px; padding: 13px 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); grid-template-columns: 48px minmax(0,1fr) auto 32px; gap: 13px; }
:root[data-theme] .home-radio-strip > img { width: 48px; height: 48px; border-radius: 10px; }
:root[data-theme] .home-radio-copy > span { font-size: 12px; font-weight: 650; }
:root[data-theme] .home-radio-copy strong { font-size: 12px; font-weight: 500; }
:root[data-theme] .home-radio-copy em { display: none; }
:root[data-theme] .home-radio-copy small { font-size: 9px; font-weight: 550; }
:root[data-theme] .home-radio-toggle { min-height: 40px; padding: 0 16px; font-size: 11px; border-radius: 10px; background: var(--panel-2); font-weight: 600; }
:root[data-theme] .home-radio-open { min-height: 40px; width: 32px; }
:root[data-theme] .personal-shelf-heading { margin-bottom: 18px; }
:root[data-theme] .personal-shelf-heading .eyebrow { margin: 0 0 5px; letter-spacing: .1em; font-size: 9px; }
:root[data-theme] :is(.personal-shelf h2,.home-genres h2) { font-size: 24px; line-height: 1.25; font-weight: 600; letter-spacing: -.04em; margin: 0; }
:root[data-theme] .personal-shelf h3 { font-size: 15px; font-weight: 500; color: var(--muted); }
:root[data-theme] .home-music-grid { grid-auto-columns: calc((100% - 60px) / 4); gap: 20px; padding: 4px 1px 10px; scrollbar-width: thin; scrollbar-color: var(--panel-3) transparent; }
:root[data-theme] .home-music-card { padding: 0; border: 0; background: transparent; border-radius: 12px; box-shadow: none; }
:root[data-theme] .home-music-card:hover { border: 0; background: transparent; transform: none; }
:root[data-theme] .home-music-card .home-music-cover { border-radius: 12px; border: 1px solid color-mix(in srgb,var(--text) 8%,transparent); overflow: hidden; }
:root[data-theme] .home-music-card:focus-within .home-music-cover { outline: 2px solid var(--accent); outline-offset: 2px; }
:root[data-theme] .home-music-title { font-size: 13px; line-height: 1.5; min-height: 0; margin-top: 12px; font-weight: 650; text-align: left; }
:root[data-theme] .home-music-author { font-size: 12px; font-weight: 400; color: var(--muted); margin-top: 4px; }
:root[data-theme] .home-music-bottom { margin-top: 4px; min-height: 36px; }
:root[data-theme] .home-music-bottom > span { font-size: 10px; }
:root[data-theme] :is(.home-save-track,.home-track-menu) { height: 36px; width: 36px; border-radius: 8px; color: var(--muted); }
:root[data-theme] :is(.home-save-track,.home-track-menu):hover { color: var(--accent); background: var(--panel-2); }
:root[data-theme] .home-save-track.liked { color: var(--accent); }
:root[data-theme] .home-cover-play { width: 44px; height: 44px; right: 12px; bottom: 12px; box-shadow: 0 4px 12px #0003; }
:root[data-theme] .home-shelf-navigation .icon-btn { width: 34px; height: 36px; min-height: 36px; border: 1px solid var(--line); border-radius: 9px; background: transparent; color: var(--muted); }
:root[data-theme] .home-shelf-navigation .icon-btn:disabled { opacity: .35; }
:root[data-theme] .home-mix-grid { grid-auto-columns: min(370px,85%); gap: 20px; }
:root[data-theme] .automatic-playlist-card { border: 1px solid var(--line); border-radius: 16px; padding: 12px; box-shadow: none; background: var(--panel); }
:root[data-theme] .automatic-cover { border-radius: 10px; overflow: hidden; }
:root[data-theme] .automatic-playlist-copy { padding-top: 11px; }
:root[data-theme] .automatic-playlist-copy strong { font-size: 14px; font-weight: 600; }
:root[data-theme] .home-resume-card { border: 1px solid var(--line); padding: 16px; border-radius: 16px; background: var(--panel); }
:root[data-theme] .home-genres > div { gap: 10px; margin-top: 16px; }
:root[data-theme] .home-genres button { border: 1px solid var(--line); border-radius: 11px; min-height: 44px; background: var(--panel); color: var(--soft); padding: 0 16px; font-size: 12px; }
:root[data-theme] .home-genres button:hover { border-color: var(--accent); color: var(--accent); }
/* The same component language on every route. */
:root[data-theme] .page-title { margin: 6px 0 28px; }
:root[data-theme] .page-title p { max-width: 68ch; font-size: 14px; line-height: 1.7; color: var(--muted); }
:root[data-theme] :is(.content-section,.catalog-controls,.library-browser-panel,.upload-form-card,.upload-submit-card,.settings-card,.profile-panel,.track-page-panel,.auth-panel,.about-card,.rules-card) { border-color: var(--line); border-radius: 16px; box-shadow: none; background: var(--panel); }
:root[data-theme] .content-section { padding: 24px; margin-bottom: 24px; }
:root[data-theme] :is(.catalog-browser-tabs,.library-browser-tabs,.radio-tabs) { display: flex; gap: 5px; border: 0; padding: 5px; border-radius: 12px; background: var(--panel-2); margin-bottom: 24px; overflow-x: auto; scrollbar-width: thin; }
:root[data-theme] :is(.catalog-browser-tab,.library-browser-tab,.radio-tabs button) { min-height: 42px; border: 0; border-radius: 9px; font-weight: 600; color: var(--muted); font-size: 13px; padding: 0 18px; background: transparent; white-space: nowrap; }
:root[data-theme] :is(.catalog-browser-tab.active,.library-browser-tab.active,.radio-tabs button[aria-selected="true"]) { color: var(--text); background: var(--panel); box-shadow: 0 2px 6px #0000000a; }
:root[data-theme] .catalog-filter-grid { gap: 14px; grid-template-columns: repeat(3,minmax(0,1fr)); }
:root[data-theme] .catalog-simple-filter-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
:root[data-theme] :is(input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),textarea,select) { min-height: 46px; border: 1px solid var(--control-line); border-radius: 10px; background: var(--panel); color: var(--text); font-size: 13px; padding: 10px 13px; box-shadow: none; }
:root[data-theme] .search-wrap input { border: 0 !important; padding: 0 0 0 10px; background: transparent !important; }
:root[data-theme] :is(.discover-search-field,.library-search) { min-height: 48px; border: 1px solid var(--control-line); border-radius: 11px; background: var(--panel); }
:root[data-theme] :is(.discover-search-field,.library-search) input { border: 0 !important; background: transparent !important; }
:root[data-theme] :is(.sort-control,.auth-form label,.upload-field-grid label,.modal-form label) { font-size: 12px; font-weight: 550; gap: 8px; color: var(--soft); }
:root[data-theme] :is(.track-row,.radio-track-row) { border: 1px solid var(--line); border-radius: 12px; margin-block: 7px; padding: 12px; background: transparent; }
:root[data-theme] .track-row:hover { background: var(--panel-2); border-color: var(--line); }
:root[data-theme] :is(.track-card,.playlist-card,.catalog-author-card,.discover-card) { border: 1px solid var(--line); border-radius: 14px; box-shadow: none; background: var(--panel); }
:root[data-theme] .discover-card { background: var(--panel-2); color: var(--text); }
:root[data-theme] .discover-card:hover { border-color: var(--accent); }
:root[data-theme] :is(.chip,.catalog-filter-chip) { min-height: 34px; border-radius: 8px; background: var(--panel-2); border-color: var(--line); color: var(--soft); font-size: 11px; }
:root[data-theme] .section-heading h2 { font-size: 23px; font-weight: 600; }
:root[data-theme] :is(.section-heading p,.field-hint,.upload-section-head p,.upload-hero p,.settings-card-head p,.auth-heading p) { color: var(--muted); }
:root[data-theme] .radio-now { border: 1px solid var(--line); border-radius: 20px; background: var(--panel); box-shadow: none; padding: 28px; }
:root[data-theme] .radio-artwork { border-radius: 14px; }
:root[data-theme] .radio-now-copy h2 { font-weight: 600; }
:root[data-theme] .radio-listen { border-radius: 12px; min-height: 46px; }
:root[data-theme] .upload-hero { border-radius: 18px; background: var(--hero); color: var(--text); box-shadow: none; border: 1px solid var(--line); }
:root[data-theme] .upload-section-icon { background: var(--panel-2); color: var(--accent); border-color: var(--line); }
:root[data-theme] .file-drop { border: 1px dashed var(--control-line); border-radius: 14px; background: var(--panel-2); }
:root[data-theme] .file-drop:hover { background: var(--panel-3); border-color: var(--accent); }
:root[data-theme] .auth-shell { border-radius: 22px; border-color: var(--line); box-shadow: none; }
:root[data-theme] .auth-story { background: var(--hero); color: var(--hero-ink); }
:root[data-theme] .auth-story :is(p,li,small,.eyebrow) { color: var(--hero-ink); }
:root[data-theme] .auth-panel { background: var(--panel); }
:root[data-theme] .auth-tab.active { background: var(--panel-3); color: var(--text); }
:root[data-theme] .empty-state { padding: 32px; border: 1px dashed var(--line); border-radius: 14px; background: var(--panel-2); color: var(--muted); }
:root[data-theme] .empty-state strong { color: var(--text); font-weight: 600; }
/* Listening controls and overlays. */
:root[data-theme] .player { min-height: 98px; border-top: 1px solid var(--line); background: var(--panel); padding: 14px 24px; box-shadow: 0 -8px 28px #00000008; grid-template-columns: minmax(180px,1fr) minmax(250px,1.15fr) minmax(190px,1fr); }
:root[data-theme] .player button { background: transparent; color: var(--muted); border-radius: 9px; }
:root[data-theme] .player .play-toggle { width: 44px; height: 44px; border-radius: 50%; background: var(--accent) !important; color: var(--on-accent) !important; }
:root[data-theme] .player .play-toggle:hover { background: var(--accent) !important; color: var(--on-accent) !important; filter: brightness(1.08); }
:root[data-theme] .mini-cover { border-radius: 10px; }
:root[data-theme] .player-title-link { font-weight: 600; font-size: 13px; }
:root[data-theme] .progress-wrap { gap: 10px; margin-top: 5px; }
:root[data-theme] .player-controls { gap: 15px; }
:root[data-theme] .player-actions { gap: 6px; }
:root[data-theme] .player-actions button { width: 34px; height: 38px; }
:root[data-theme] .player input[type="range"] { accent-color: var(--accent); }
:root[data-theme] .queue-panel { border-left: 1px solid var(--line); background: var(--panel); box-shadow: -15px 0 50px #0001; padding: 24px; }
:root[data-theme] :is(.queue-item,.queue-recommendation-item) { border-radius: 12px; }
:root[data-theme] .modal { border: 1px solid var(--line); border-radius: 22px; background: var(--panel); padding: 28px; box-shadow: var(--shadow); }
:root[data-theme] .modal-backdrop { background: #11191666; backdrop-filter: blur(7px); }
:root[data-theme] .theme-picker { max-width: 520px; }
:root[data-theme] .theme-options { grid-template-columns: 1fr 1fr; gap: 12px; }
:root[data-theme] .theme-option { display: flex; flex-wrap: wrap; align-content: flex-start; min-height: 150px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; gap: 12px; }
:root[data-theme] .theme-option > span:nth-child(2) { flex: 1 0 100%; order: 2; }
:root[data-theme] .theme-option strong { font-size: 14px; font-weight: 600; }
:root[data-theme] .theme-option small { font-size: 11px; line-height: 1.6; }
:root[data-theme] .theme-option.is-active { border: 2px solid var(--accent); padding: 17px; background: color-mix(in srgb,var(--accent) 5%,var(--panel)); }
:root[data-theme] .theme-option-icon { background: var(--panel-2); border-radius: 10px; color: var(--accent); }
:root[data-theme] .theme-option-check { margin-left: auto; color: var(--accent); }
:root[data-theme] .fullscreen-player { background: var(--bg); }
:root[data-theme] .fullscreen-player-cover { border-radius: 18px; box-shadow: var(--shadow); }
:root[data-theme] .fullscreen-track-copy h2 { font-weight: 600; }
:root[data-theme] :is(.fullscreen-context-card,.fullscreen-info-story,.fullscreen-info-facts > div,.fullscreen-detail-link) { border-radius: 14px; }
:root[data-theme] .fullscreen-controls .fullscreen-play-toggle { background: var(--accent); color: var(--on-accent); }
:root[data-theme] .toast { border-radius: 13px; background: var(--panel); color: var(--text); border-color: var(--line); }
@media (min-width:1550px) { :root[data-theme] .home-music-grid { grid-auto-columns: calc((100% - 80px) / 5); } }
@media (min-width:761px) and (max-width:1100px) {
  :root { --sidebar-width: 190px; }
  :root[data-theme] .sidebar { padding-inline: 12px; }
  :root[data-theme] .brand-logo { width: 140px; }
  :root[data-theme] .main { padding-inline: 26px; }
  :root[data-theme] .nav-item { padding-inline: 12px; font-size: 13px; }
  :root[data-theme] .wave-copy { padding: 30px; }
  :root[data-theme] .wave-copy h2 { font-size: 47px; }
  .wave-art-card { left: 0; width: 175px; height: 198px; top: 70px; }
  :root[data-theme] .home-wave-canvas .wave-art-card img { width: 157px; height: 157px; }
  .vinyl-disc { width: 205px; height: 205px; right: 3%; top: 57px; }
  .vinyl-label { inset: 64px; }
  :root[data-theme] .home-music-grid { grid-auto-columns: calc((100% - 36px) / 3); gap: 18px; }
  :root[data-theme] .topbar-link-label { display: none; }
  :root[data-theme] .avatar-btn { font-size: 0; width: 44px; padding: 0; justify-content: center; }
  :root[data-theme] .topbar-link { padding: 0; width: 44px; justify-content: center; }
  :root[data-theme] .catalog-filter-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  :root[data-theme] .player { grid-template-columns: minmax(180px,1fr) minmax(240px,1fr) auto; }
  :root[data-theme] .volume-control { display: none; }
}
@media (max-width:760px) {
  html { scroll-padding-top: 110px; }
  :root[data-theme] .app-shell { grid-template-columns: 1fr; padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
  :root[data-theme] .sidebar { top: auto; left: 0; right: 0; bottom: 0; height: calc(70px + env(safe-area-inset-bottom)); width: auto; padding: 5px 8px calc(5px + env(safe-area-inset-bottom)); border-right: 0; border-top: 1px solid var(--line); display: block; overflow: visible; background: var(--panel); z-index: 60; }
  :root[data-theme] :is(.brand,.playlist-panel,.sidebar-note,.nav-section-label) { display: none; }
  :root[data-theme] .nav-list { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 2px; }
  :root[data-theme] .nav-item { height: 59px; min-height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 4px; font-size: 10px; border-radius: 10px; background: transparent; }
  :root[data-theme] .nav-item.active { background: var(--active-bg); }
  :root[data-theme] .nav-item :is(.icon,.lucide) { width: 20px; height: 20px; }
  :root[data-theme] .nav-item[data-route="chart"], :root[data-theme] .nav-item[data-route="rules"], :root[data-theme] .nav-item[data-route="upload"], :root[data-theme] .nav-item[data-route="studio"], :root[data-theme] .nav-item[data-route="admin"] { display: none; }
  :root[data-theme] .main { grid-column: 1; padding: 0 18px 36px; }
  :root[data-theme] body.player-visible .main { padding-bottom: 140px; }
  :root[data-theme] .topbar { min-height: 84px; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; padding: 18px 0; margin-bottom: 25px; top: 0; }
  :root[data-theme] .topbar-actions { gap: 7px; }
  :root[data-theme] .search-wrap { min-height: 44px; padding: 0 10px; border-radius: 12px; }
  :root[data-theme] .search-wrap input { min-height: 42px; height: 42px; font-size: 12px; width: 100%; padding-left: 7px; }
  :root[data-theme] .topbar-link-label { display: none; }
  :root[data-theme] :is(.topbar-link,.avatar-btn,.inbox-btn,.page-refresh-btn) { width: 44px; height: 44px; padding: 0; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; font-size: 0; }
  :root[data-theme] .page-refresh-btn { display: none; }
  :root[data-theme] .topbar-link[data-route="auth"] { display: none; }
  :root[data-theme] .topbar-actions .upload-topbar-btn { display: none; }
  :root[data-theme] #personalHomeFeed { gap: 25px; }
  :root[data-theme] .home-page-heading { align-items: flex-start; }
  :root[data-theme] .home-page-heading h1 { font-size: 26px; max-width: 270px; }
  :root[data-theme] .home-page-heading .eyebrow { font-size: 8px; letter-spacing: .09em; }
  :root[data-theme] .home-catalog-link { font-size: 0; min-width: 32px; min-height: 44px; margin-top: 10px; }
  :root[data-theme] .home-catalog-link .lucide { width: 20px; height: 20px; }
  :root[data-theme] .personal-wave { min-height: 0; grid-template-columns: 1fr; border-radius: 18px; }
  :root[data-theme] .wave-copy { padding: 28px 25px; gap: 14px; }
  :root[data-theme] .wave-copy h2 { font-size: 50px; }
  :root[data-theme] .wave-copy > p:not(.eyebrow) { font-size: 12px; line-height: 1.7; max-width: none; }
  :root[data-theme] .home-wave-canvas { min-height: 215px; margin-top: -5px; }
  .home-wave-canvas::before { top: -40px; right: -10px; width: 300px; height: 300px; }
  .wave-art-card { left: calc(50% - 110px); top: 5px; width: 160px; height: 185px; padding: 8px 8px 0; transform: rotate(-8deg); }
  :root[data-theme] .home-wave-canvas .wave-art-card img { width: 144px; height: 144px; }
  .wave-art-caption { height: 31px; font-size: 6px; }
  .vinyl-disc { width: 186px; height: 186px; top: 0; right: calc(50% - 133px); }
  .vinyl-label { inset: 58px; font-size: 42px; }
  .vinyl-label > span { font-size: 5px; margin-top: 10px; }
  .wave-caption { bottom: 12px; right: 20px; font-size: 7px; }
  :root[data-theme] .home-radio-strip { padding: 12px; grid-template-columns: 42px minmax(0,1fr) 44px; gap: 11px; }
  :root[data-theme] .home-radio-strip > img { width: 42px; height: 42px; }
  :root[data-theme] .home-radio-copy > span { font-size: 11px; gap: 5px; }
  :root[data-theme] .home-radio-copy strong { font-size: 11px; }
  :root[data-theme] .home-radio-toggle { width: 44px; min-height: 44px; padding: 0; }
  :root[data-theme] .home-radio-toggle > span, :root[data-theme] .home-radio-open { display: none; }
  :root[data-theme] :is(.personal-shelf h2,.home-genres h2) { font-size: 22px; }
  :root[data-theme] .home-music-grid { grid-auto-columns: calc((100% - 14px) / 2.1); gap: 14px; }
  :root[data-theme] .home-music-title { font-size: 12px; margin-top: 10px; }
  :root[data-theme] .home-music-author { font-size: 11px; }
  :root[data-theme] .home-music-bottom > span { font-size: 9px; }
  :root[data-theme] .home-cover-play { width: 40px; height: 40px; opacity: 1; transform: none; right: 8px; bottom: 8px; }
  :root[data-theme] .home-music-shelf .home-see-all { display: none; }
  :root[data-theme] .personal-shelf-heading { margin-bottom: 13px; }
  :root[data-theme] .home-shelf-navigation .icon-btn { min-height: 40px; height: 40px; width: 36px; }
  :root[data-theme] .content-section { padding: 17px; margin-bottom: 18px; }
  :root[data-theme] .catalog-filter-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  :root[data-theme] :is(.catalog-browser-tab,.library-browser-tab,.radio-tabs button) { padding: 0 14px; font-size: 12px; }
  :root[data-theme] .radio-now { padding: 20px; border-radius: 16px; }
  :root[data-theme] .player, :root[data-theme] .radio-dock.player { bottom: calc(70px + env(safe-area-inset-bottom)); min-height: 78px; padding: 11px 14px; grid-template-columns: minmax(0,1fr) 44px 40px; gap: 9px; border-radius: 0; }
  :root[data-theme] .player-controls { gap: 0; }
  :root[data-theme] .player-center { width: 44px; }
  :root[data-theme] .player-controls > :not(.play-toggle) { display: none; }
  :root[data-theme] .player .progress-wrap { position: absolute; left: 0; top: -5px; right: 0; width: 100%; margin: 0; }
  :root[data-theme] .player .progress-wrap span { display: none; }
  :root[data-theme] .player .progress-wrap input { width: 100%; height: 6px; margin: 0; }
  :root[data-theme] .player .player-actions { position: static; }
  :root[data-theme] .player:not(.radio-dock) .player-actions > :not(#openQueueBtn) { display: none; }
  :root[data-theme] .player:not(.radio-dock) .player-actions > #openQueueBtn { display: inline-flex; width: 40px; height: 44px; align-items: center; justify-content: center; }
  :root[data-theme] .now-playing { min-width: 0; gap: 10px; }
  :root[data-theme] .mini-cover { width: 44px; height: 44px; flex: 0 0 44px; }
  :root[data-theme] .player-title-link { font-size: 12px; }
  :root[data-theme] .queue-panel { width: min(100%,440px); padding: 20px 16px; bottom: calc(148px + env(safe-area-inset-bottom)); top: 0; border-radius: 18px 0 0 0; }
  :root[data-theme] .theme-picker { width: calc(100% - 28px); padding: 22px; }
  :root[data-theme] .theme-options { gap: 10px; }
  :root[data-theme] .theme-option { min-height: 158px; padding: 13px; }
  :root[data-theme] .theme-option.is-active { padding: 12px; }
  :root[data-theme] .theme-option strong { font-size: 12px; }
  :root[data-theme] .theme-option small { font-size: 10px; }
  :root[data-theme] .fullscreen-player-cover { border-radius: 14px; }
}
@media (max-width:370px) {
  :root[data-theme] .main { padding-inline: 14px; }
  :root[data-theme] .wave-copy { padding: 25px 20px; }
  :root[data-theme] .wave-copy h2 { font-size: 44px; }
  :root[data-theme] .catalog-filter-grid { grid-template-columns: 1fr; }
  :root[data-theme] .topbar { gap: 7px; }
  :root[data-theme] .topbar-actions { gap: 5px; }
}
@media (prefers-reduced-motion:reduce) {
  :root[data-theme] *, :root[data-theme] *::before, :root[data-theme] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

:root[data-theme] .mobile-more-trigger { display:none; }
.mobile-more-links { display:grid; gap:10px; margin-top:20px; }
.mobile-more-links .ghost-btn { justify-content:flex-start; padding:0 16px; }
@media(max-width:760px) { :root[data-theme] .nav-list { grid-template-columns:repeat(5,minmax(0,1fr)); } :root[data-theme] .mobile-more-trigger { display:flex; } .mobile-more-modal { width:calc(100% - 28px); max-width:440px; } }

:root[data-theme] .nav-item.active:hover { background:var(--active-bg); color:var(--accent); }
:root[data-theme] .discover-search-field input:focus-visible { outline:none; }
:root[data-theme] .discover-search-field:focus-within { outline:2px solid var(--accent); outline-offset:3px; }

:root[data-theme] .queue-panel { z-index:80; }
:root[data-theme] .queue-head button { min-width:44px; min-height:44px; }
:root[data-theme] .search-wrap { margin:0; }
@media(max-width:760px) { :root[data-theme] .player:not(.radio-dock) .player-actions > #openQueueBtn { display:inline-flex !important; } }

:root[data-theme] .modal-backdrop { z-index:160; }
:root[data-theme] body.fullscreen-player-open .queue-panel { z-index:150; bottom:0; }

/* Compact edition: the whole application uses 90% of its original scale. */
html { zoom: .9; }
:root[data-theme] .app-shell { min-height: calc(100dvh / .9); }
:root[data-theme] .brand { min-height: 70px; padding: 0 5px; margin-bottom: 24px; }
.brand-wordmark { display: block; width: 190px; height: 52px; color: var(--text); overflow: visible; }
:root[data-theme="dark"] .brand-wordmark text tspan { fill: var(--accent); }
:root[data-theme] .sidebar-note { display: none; }
:root[data-theme] #inboxBtn, :root[data-theme] #inboxBtn.has-unread { position: relative; width: 44px; min-width: 44px; padding: 0; background: var(--panel-2); color: var(--text); border: 1px solid var(--line); }
:root[data-theme] #inboxBtn .lucide { color: var(--text); stroke: currentColor; width: 20px; height: 20px; }
:root[data-theme] #inboxCount { position: absolute; top: -6px; right: -6px; display: grid; place-items: center; min-width: 19px; height: 19px; padding: 0 4px; border: 2px solid var(--bg); border-radius: 50%; background: var(--accent); color: var(--on-accent); font-size: 9px; font-weight: 650; line-height: 1; }
/* Cover colours belong to the listening surface; semantic text stays readable. */
:root[data-theme] :is(#fullscreenPlayer,#radioFullscreen) { --fullscreen-accent: 176 107 74; --fullscreen-on-accent: 255 250 245; background: radial-gradient(ellipse at 18% 20%,rgb(var(--fullscreen-tone) / .40),transparent 62%),var(--bg); }
:root[data-theme] :is(#fullscreenPlayer,#radioFullscreen) .fullscreen-player-cover { box-shadow: 0 24px 80px rgb(var(--fullscreen-deep) / .45); border: 1px solid rgb(var(--fullscreen-accent) / .25); }
:root[data-theme] :is(#fullscreenPlayer,#radioFullscreen) .fullscreen-track-copy .eyebrow { color: rgb(var(--fullscreen-accent)); }
:root[data-theme] :is(#fullscreenPlayer,#radioFullscreen) .fullscreen-controls .fullscreen-play-toggle { background: rgb(var(--fullscreen-accent)); color: rgb(var(--fullscreen-on-accent)); box-shadow: 0 8px 28px rgb(var(--fullscreen-accent) / .25); }
:root[data-theme] :is(#fullscreenPlayer,#radioFullscreen) .fullscreen-controls .fullscreen-play-toggle:hover { background: rgb(var(--fullscreen-accent)); filter: brightness(1.08); color: rgb(var(--fullscreen-on-accent)); }
:root[data-theme] :is(#fullscreenPlayer,#radioFullscreen) :is(input[type="range"],input[type="checkbox"]) { accent-color: rgb(var(--fullscreen-accent)); }
:root[data-theme] :is(#fullscreenPlayer,#radioFullscreen) :is(.fullscreen-context-card,.fullscreen-info-story,.fullscreen-info-facts > div) { background: color-mix(in srgb,rgb(var(--fullscreen-tone)) 35%,var(--panel)); border-color: rgb(var(--fullscreen-accent) / .25); }
:root[data-theme] :is(#fullscreenPlayer,#radioFullscreen) :is(.fullscreen-context-label,.fullscreen-detail-label,.fullscreen-info-mark) { color: rgb(var(--fullscreen-accent)); }
:root[data-theme] :is(#fullscreenPlayer,#radioFullscreen) :is(.fullscreen-controls button.active-toggle,.fullscreen-player-actions button.liked) { color: rgb(var(--fullscreen-accent)); background: color-mix(in srgb,rgb(var(--fullscreen-tone)) 50%,var(--panel)); }
:root[data-theme] :is(#fullscreenPlayer,#radioFullscreen) .fullscreen-player-actions :is(button,a):hover { border-color: rgb(var(--fullscreen-accent) / .65); }
:root[data-theme] body.fullscreen-player-open #queuePanel { background: color-mix(in srgb,rgb(var(--fullscreen-tone)) 16%,var(--panel)); border-color: rgb(var(--fullscreen-accent) / .35); }
:root[data-theme] :is(#fullscreenPlayer,#radioFullscreen) :is(button,input,a):focus-visible { outline-color: rgb(var(--fullscreen-accent)); }
.text-action { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0; background: none; border: 0; color: var(--accent); font-size: 12px; font-weight: 600; text-align: left; }
.text-action .lucide { width: 16px; height: 16px; }
.text-action:hover { color: var(--text); }
/* About: editorial introduction, actual catalog counts and practical guidance. */
.about-v2 { display: grid; gap: 44px; max-width: 1320px; margin: 0 auto; }
.about-v2-hero { display: grid; grid-template-columns: 1.45fr 1fr; align-items: center; gap: 40px; padding: 36px 40px; background: var(--hero); border: 1px solid var(--line); border-radius: 24px; overflow: hidden; }
:root[data-theme] .about-v2-hero h1 { font-size: clamp(38px,4.2vw,61px); letter-spacing: -.055em; line-height: 1.08; margin: 16px 0 22px; }
.about-v2-hero h1 em { font-family: Georgia,serif; font-weight: 400; color: var(--hero-accent); }
.about-v2-lead { max-width: 53ch; margin-bottom: 26px; color: var(--soft); font-size: 15px; line-height: 1.8; }
.about-v2-art { position: relative; min-height: 320px; display: flex; align-items: center; justify-content: center; }
.about-v2-art > svg { width: 155px; height: 155px; transform: rotate(-10deg); filter: drop-shadow(12px 18px 16px #0001); }
.about-orbit { position: absolute; border: 1px solid color-mix(in srgb,var(--hero-accent) 24%,transparent); border-radius: 50%; width: 290px; height: 290px; }
.orbit-two { width: 360px; height: 360px; border-style: dashed; opacity: .6; }
.about-art-caption { position: absolute; bottom: 0; color: var(--hero-accent); font-size: 9px; font-weight: 650; letter-spacing: .23em; }
.about-v2-counts { display: grid; grid-template-columns: repeat(3,1fr) 1.15fr; gap: 20px; padding: 0 12px 28px; border-bottom: 1px solid var(--line); }
.about-v2-counts > div { display: grid; gap: 5px; }
.about-v2-counts strong { font-size: 34px; font-weight: 550; letter-spacing: -.04em; }
.about-v2-counts span { font-size: 12px; color: var(--muted); }
.about-v2-counts p { color: var(--muted); font-size: 13px; line-height: 1.7; margin: auto 0; }
.about-v2-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.about-v2-steps > article { display: flex; flex-direction: column; align-items: flex-start; padding: 28px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); }
.about-step-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: var(--panel-2); color: var(--accent); margin-bottom: 22px; }
.about-step-icon .lucide { width: 22px; height: 22px; }
.about-v2-steps small { font-size: 9px; letter-spacing: .12em; color: var(--muted); }
:root[data-theme] .about-v2-steps h3 { font-size: 21px; line-height: 1.3; margin: 12px 0; }
.about-v2-steps p { color: var(--muted); font-size: 13px; line-height: 1.75; margin: 0 0 20px; }
.about-v2-steps .text-action { margin-top: auto; }
.about-v2-guide { display: grid; grid-template-columns: .8fr 1.2fr; gap: 54px; }
:root[data-theme] .about-v2-guide h2 { font-size: 32px; margin: 10px 0 18px; }
.about-v2-guide > div > p:last-child { color: var(--muted); font-size: 14px; line-height: 1.8; max-width: 43ch; }
.about-v2-faq details { border-bottom: 1px solid var(--line); padding: 18px 0; }
.about-v2-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; cursor: pointer; font-weight: 600; font-size: 15px; list-style: none; }
.about-v2-faq summary::-webkit-details-marker { display: none; }
.about-v2-faq summary .lucide { width: 18px; color: var(--muted); }
.about-v2-faq details[open] summary .lucide { transform: rotate(45deg); }
.about-v2-faq p { color: var(--muted); font-size: 13px; line-height: 1.75; margin: 15px 0 0; }
.about-v2-footer { display: flex; align-items: center; gap: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.about-v2-footer .brand-wordmark { width: 166px; }
.about-v2-footer p { margin-right: auto; color: var(--muted); font-size: 12px; }
/* Administration: overview, navigation, purposeful forms and readable rows. */
.admin-v2-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 6px 0 27px; }
:root[data-theme] .admin-v2-heading h1 { margin: 6px 0 10px; font-size: 37px; }
.admin-v2-heading p:last-child { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.admin-access-badge { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); font-size: 11px; }
.admin-access-badge .lucide { color: var(--accent-2); width: 16px; }
.admin-overview { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; margin-bottom: 28px; }
.admin-stat { position: relative; display: grid; gap: 9px; padding: 19px 20px; border: 1px solid var(--line); border-radius: 15px; background: var(--panel); text-align: left; color: var(--text); }
.admin-stat-label { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 12px; }
.admin-stat-label .lucide { width: 16px; color: var(--accent); }
.admin-stat > strong { font-size: 32px; line-height: 1.3; font-weight: 550; }
.admin-stat > small { font-size: 10px; color: var(--muted); }
.admin-stat > .lucide { position: absolute; right: 17px; bottom: 23px; color: var(--muted); width: 15px; }
.admin-stat:hover { border-color: var(--accent); }
.admin-v2-layout { display: grid; grid-template-columns: 180px minmax(0,1fr); gap: 25px; align-items: start; }
:root[data-theme] #moderationBrowserTabs { display: flex; flex-direction: column; padding: 8px; gap: 4px; position: sticky; top: 118px; border: 1px solid var(--line); background: var(--panel); border-radius: 14px; margin: 0; overflow: visible; }
:root[data-theme] #moderationBrowserTabs button { width: 100%; min-height: 44px; padding: 0 12px; justify-content: flex-start; display: flex; gap: 10px; color: var(--muted); border-radius: 8px; font-size: 12px; font-weight: 500; }
:root[data-theme] #moderationBrowserTabs button.active { color: var(--accent); background: var(--active-bg); box-shadow: none; font-weight: 650; }
.admin-tab-count { margin-left: auto; background: var(--panel-2); min-width: 17px; text-align: center; border-radius: 4px; font-size: 9px; }
.admin-tab-count:empty { display: none; }
.admin-v2-content { min-width: 0; }
:root[data-theme] .moderation-toolbar { display: grid; grid-template-columns: .8fr 1.8fr 1fr; gap: 14px; padding: 20px; margin: 0 0 12px; border: 1px solid var(--line); background: var(--panel); border-radius: 14px; }
.moderation-toolbar > label { display: grid; gap: 7px; min-width: 0; font-size: 11px; color: var(--muted); font-weight: 550; }
.moderation-toolbar > label:nth-of-type(4) { grid-column: 1 / -1; }
:root[data-theme] .moderation-toolbar :is(input:not([type="checkbox"]),select) { width: 100%; min-width: 0; min-height: 43px; }
:root[data-theme] .moderation-bulk-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; grid-column: 1 / -1; padding-top: 14px; border-top: 1px solid var(--line); }
:root[data-theme] .moderation-toolbar .admin-select-all { display: flex; gap: 7px; align-items: center; color: var(--soft); font-size: 11px; font-weight: 500; width: auto; }
:root[data-theme] .moderation-toolbar .admin-select-all input { width: 16px; min-height: 16px; height: 16px; margin: 0; }
.admin-selection-count { font-size: 10px; color: var(--muted); margin-right: auto; }
:root[data-theme] .moderation-bulk-actions button { min-height: 36px; font-size: 10px; padding: 0 11px; }
:root[data-theme] .moderation-bulk-actions button:disabled { opacity: .4; }
:root[data-theme] .reason-templates { padding: 0 3px; margin: 0 0 20px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.reason-templates > span { color: var(--muted); font-size: 10px; margin-right: 3px; }
:root[data-theme] .reason-templates .chip { min-height: 28px; padding: 0 8px; background: transparent; font-size: 9px; }
:root[data-theme] .moderation-presets { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 23px; }
:root[data-theme] .moderation-presets .chip { min-height: 34px; background: var(--panel); font-size: 11px; }
:root[data-theme] .moderation-presets .chip.active { background: var(--active-bg); color: var(--accent); border-color: var(--accent); }
:root[data-theme] .moderation-workspace { display: block; }
:root[data-theme] :is(.moderation-queue-panel,.moderation-log-panel) { background: none; border: 0; padding: 0; box-shadow: none; }
:root[data-theme] .moderation-queue-panel .section-heading h2 { font-size: 22px; }
.moderation-card { border: 1px solid var(--line); border-radius: 14px; background: var(--panel); padding: 17px; margin-bottom: 13px; }
.moderation-card.is-selected { border-color: var(--accent); background: color-mix(in srgb,var(--accent) 4%,var(--panel)); }
.moderation-card > header { display: flex; align-items: center; gap: 12px; }
.moderation-card-selection { display: flex; align-items: center; }
.moderation-card-selection input { width: 16px; height: 16px; margin: 0; }
.moderation-artwork { width: 57px; height: 57px; flex: 0 0 57px; border: 0; padding: 0; overflow: hidden; border-radius: 10px; background: var(--panel-2); color: var(--accent); }
.moderation-artwork img { width: 100%; height: 100%; object-fit: cover; }
.moderation-card-title { display: grid; gap: 4px; min-width: 0; flex: 1; }
.moderation-card-title .link-title { font-weight: 650; color: var(--text); font-size: 14px; overflow-wrap: anywhere; }
.moderation-card-title > span { font-size: 11px; color: var(--muted); }
.moderation-card-title small { font-size: 9px; color: var(--muted); }
.moderation-status { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border: 1px solid var(--line); background: var(--panel-2); border-radius: 6px; font-size: 9px; white-space: nowrap; color: var(--muted); }
.status-pending { color: var(--warning); background: color-mix(in srgb,var(--warning) 9%,var(--panel)); border-color: color-mix(in srgb,var(--warning) 25%,var(--line)); }
.status-approved { color: var(--success); background: color-mix(in srgb,var(--success) 8%,var(--panel)); border-color: color-mix(in srgb,var(--success) 20%,var(--line)); }
.status-blocked { color: var(--danger); background: color-mix(in srgb,var(--danger) 8%,var(--panel)); border-color: color-mix(in srgb,var(--danger) 20%,var(--line)); }
.moderation-card-checks { display: flex; align-items: center; gap: 8px; margin: 16px 0; padding: 10px 12px; background: var(--panel-2); color: var(--muted); border-radius: 8px; font-size: 10px; }
.moderation-card-checks > .lucide { width: 15px; color: var(--accent-2); }
.moderation-report-count { display: flex; align-items: center; gap: 5px; margin-left: auto; color: var(--danger); white-space: nowrap; }
.moderation-report-count .lucide { width: 14px; }
.moderation-card > footer { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.moderation-card-details { min-width: 0; flex: 1; }
.moderation-card-details > summary { min-height: 42px; display: inline-flex; align-items: center; gap: 8px; list-style: none; cursor: pointer; font-size: 11px; color: var(--muted); }
.moderation-card-details > summary .lucide { width: 14px; }
.moderation-card-details > div { padding: 14px 0 0; font-size: 12px; line-height: 1.7; color: var(--muted); overflow-wrap: anywhere; }
.moderation-card-actions { display: flex; align-items: center; gap: 7px; }
:root[data-theme] .moderation-card-actions button { min-height: 39px; font-size: 11px; padding: 0 13px; }
.admin-manage-search { display: flex; align-items: center; gap: 10px; padding: 0 13px; border: 1px solid var(--control-line); border-radius: 11px; background: var(--panel); margin-bottom: 21px; }
.admin-manage-search > .lucide { color: var(--muted); width: 18px; }
:root[data-theme] .admin-manage-search input { flex: 1; border: 0 !important; background: none !important; outline: none; }
.admin-manage-search:focus-within { outline: 2px solid var(--accent); outline-offset: 3px; }
.manage-panel { border: 1px solid var(--line); border-radius: 15px; background: var(--panel); padding: 22px; margin-bottom: 20px; min-width: 0; }
.manage-panel-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 21px; }
:root[data-theme] .manage-panel-heading h2 { font-size: 24px; margin: 5px 0 9px; }
.manage-panel-heading p:last-child { color: var(--muted); font-size: 12px; line-height: 1.6; margin: 0; max-width: 65ch; }
.manage-person { display: flex; align-items: center; gap: 13px; padding: 18px 0; border-top: 1px solid var(--line); }
.manage-person:first-child { border-top: 0; padding-top: 0; }
.manage-avatar { display: grid; place-items: center; width: 46px; height: 46px; flex: 0 0 46px; border: 1px solid var(--line); border-radius: 13px; background: var(--panel-2); color: var(--accent); font-size: 14px; font-weight: 650; padding: 0; overflow: hidden; }
.manage-avatar img { width: 100%; height: 100%; object-fit: cover; }
.manage-person-copy { flex: 1; min-width: 0; display: grid; gap: 4px; }
.manage-person-copy strong { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.manage-person-copy > span { font-size: 10px; color: var(--muted); }
.account-state { font-size: 9px; color: var(--success); }
.state-blocked, .state-deleted { color: var(--danger); }
:root[data-theme] .admin-role-control { width: 148px; display: grid; gap: 4px; color: var(--muted); font-size: 9px; }
:root[data-theme] .admin-role-control select { min-height: 38px; font-size: 10px; padding: 7px; width: 100%; }
.manage-actions-menu { position: relative; }
.manage-actions-menu > summary { display: flex; align-items: center; gap: 7px; min-height: 39px; padding: 0 11px; cursor: pointer; border: 1px solid var(--line); border-radius: 8px; font-size: 10px; color: var(--muted); list-style: none; }
.manage-actions-menu > summary .lucide { width: 15px; }
.manage-actions-menu > div { position: absolute; top: calc(100% + 7px); right: 0; z-index: 15; min-width: 195px; padding: 8px; display: grid; gap: 5px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
:root[data-theme] .manage-actions-menu button { font-size: 10px; justify-content: flex-start; min-height: 36px; padding: 0 9px; }
.manage-author { display: flex; gap: 15px; align-items: flex-start; padding: 20px 0; border-top: 1px solid var(--line); }
.manage-author:first-child { border: 0; padding-top: 0; }
.manage-author-copy { flex: 1; min-width: 0; display: grid; gap: 6px; }
.manage-author-copy > .link-title { font-weight: 650; font-size: 15px; }
.manage-author-copy > span, .manage-author-copy > p { font-size: 11px; color: var(--muted); line-height: 1.7; margin: 0; }
.manage-author-actions { display: flex; gap: 7px; }
:root[data-theme] .manage-author-actions .ghost-btn { min-height: 39px; font-size: 10px; padding: 0 12px; }
.manage-author-tracks > summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 10px; color: var(--accent); padding: 7px 0; }
.manage-author-tracks > div { display: grid; gap: 4px; margin-top: 8px; }
.manage-author-tracks button { display: flex; align-items: center; gap: 10px; justify-content: space-between; min-height: 38px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--soft); font-size: 11px; text-align: left; padding: 7px; }
.manage-author-tracks button span { min-width: 0; overflow-wrap: anywhere; }
.manage-author-tracks small { color: var(--muted); font-size: 8px; white-space: nowrap; margin-left: auto; }
.taxonomy-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 17px; }
.taxonomy-grid .manage-panel { margin: 0; }
.taxonomy-panel .eyebrow { display: flex; align-items: center; gap: 6px; }
.taxonomy-panel .eyebrow .lucide { width: 13px; }
.taxonomy-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); min-width: 0; font-size: 12px; }
.taxonomy-item > span { min-width: 0; overflow-wrap: anywhere; }
.taxonomy-item > small { font-size: 9px; color: var(--muted); margin-left: auto; white-space: nowrap; }
.taxonomy-delete { display: grid; place-items: center; border: 1px solid var(--line); border-radius: 7px; background: transparent; color: var(--muted); width: 34px; height: 34px; min-height: 34px; margin-left: auto; }
.taxonomy-delete:hover { color: var(--danger); }
.taxonomy-delete .lucide { width: 15px; }
.manage-request { display: flex; align-items: flex-start; gap: 13px; padding: 18px 0; border-top: 1px solid var(--line); }
.manage-request > div:nth-child(2) { flex: 1; min-width: 0; display: grid; gap: 6px; }
.manage-request strong { font-size: 14px; font-weight: 600; }
.manage-request span, .manage-request p { color: var(--muted); font-size: 11px; line-height: 1.7; margin: 0; overflow-wrap: anywhere; }
.request-actions { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
:root[data-theme] .request-actions .ghost-btn { min-height: 36px; padding: 0 11px; font-size: 10px; }
.manage-empty { display: grid; justify-items: center; align-content: center; text-align: center; padding: 34px 20px; min-height: 180px; border: 1px dashed var(--line); border-radius: 14px; background: color-mix(in srgb,var(--panel-2) 50%,var(--panel)); }
.manage-empty > .lucide { width: 28px; height: 28px; color: var(--accent-2); margin-bottom: 14px; }
.manage-empty strong { font-size: 16px; font-weight: 550; }
.manage-empty p { max-width: 55ch; font-size: 12px; color: var(--muted); line-height: 1.7; margin: 9px 0 0; }
:root[data-theme] #adminAnalytics { display: block; }
.admin-service-panel { margin-bottom: 20px; padding: 0; border: 1px solid var(--line); border-radius: 11px; background: var(--panel); }
.admin-service-panel > summary { display: flex; align-items: center; gap: 10px; padding: 15px; font-size: 12px; color: var(--muted); cursor: pointer; }
.admin-service-panel > div { padding: 0 17px 17px; }
.moderation-event { display: flex; align-items: flex-start; gap: 14px; padding: 19px; border: 1px solid var(--line); border-radius: 13px; margin-bottom: 12px; background: var(--panel); }
.event-marker { display: grid; place-items: center; background: var(--panel-2); color: var(--accent); border-radius: 50%; width: 35px; height: 35px; flex: 0 0 35px; }
.event-marker .lucide { width: 16px; }
.moderation-event > div { flex: 1; display: grid; gap: 5px; }
.moderation-event strong { font-size: 13px; font-weight: 650; }
.moderation-event span:not(.event-marker) { font-size: 10px; color: var(--accent-2); }
.moderation-event p { font-size: 12px; line-height: 1.6; color: var(--muted); margin: 4px 0; }
.moderation-event small { color: var(--muted); font-size: 9px; }
:root[data-theme] .moderation-event button { min-height: 35px; font-size: 10px; padding: 0 11px; }
/* Review, metadata editor, source search and author editor share the workspace. */
.review-v2-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin: 22px 0 28px; }
.review-v2-heading h1 { margin: 9px 0 12px; }
.review-v2-heading p:last-child { color: var(--muted); font-size: 12px; }
.review-v2-layout { display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: 22px; align-items: start; }
.review-v2-main { display: grid; gap: 19px; min-width: 0; }
.review-listening { display: flex; gap: 23px; align-items: center; padding: 24px; background: var(--hero); border: 1px solid var(--line); border-radius: 17px; }
.review-listening .detail-cover { width: 132px; height: 132px; flex: 0 0 132px; border-radius: 12px; }
.review-listening .detail-cover img { width: 100%; height: 100%; object-fit: cover; }
.review-listening h2 { font-size: 23px; margin: 7px 0; }
.review-listening p:not(.eyebrow) { color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.review-card { padding: 24px; border: 1px solid var(--line); border-radius: 15px; background: var(--panel); }
.review-card > header { display: flex; align-items: center; gap: 11px; margin-bottom: 19px; }
.review-step { display: grid; place-items: center; background: var(--panel-2); color: var(--muted); width: 29px; height: 29px; font-size: 10px; border-radius: 7px; }
.review-card h2 { font-size: 21px; margin: 0; }
.review-card > header > button { margin-left: auto; min-height: 35px; font-size: 10px; padding: 0 11px; }
.review-description { color: var(--soft); font-size: 13px; line-height: 1.8; white-space: pre-wrap; }
.review-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 18px 0; margin: 0; border-top: 1px solid var(--line); }
.review-facts dt { color: var(--muted); font-size: 10px; }
.review-facts dd { font-size: 12px; color: var(--text); margin: 5px 0 0; }
.review-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.review-file-check { display: flex; flex-wrap: wrap; gap: 12px; padding: 13px; border-radius: 10px; background: var(--panel-2); font-size: 11px; color: var(--muted); }
.review-file-check span { display: flex; gap: 7px; align-items: center; overflow-wrap: anywhere; }
.review-file-check .lucide { width: 15px; color: var(--accent-2); }
.review-sources { margin: 20px 0; font-size: 12px; line-height: 1.8; }
.review-decision { position: sticky; top: 118px; padding: 22px; border: 1px solid var(--line); border-radius: 15px; background: var(--panel); }
.review-decision h2 { font-size: 28px; margin: 8px 0 13px; }
.review-decision > p:not(.eyebrow) { color: var(--muted); font-size: 12px; line-height: 1.7; }
.review-decision > label { display: grid; gap: 8px; font-size: 11px; color: var(--soft); margin: 22px 0 18px; }
.review-decision textarea { resize: vertical; width: 100%; }
.review-decision-buttons { display: grid; gap: 9px; margin-bottom: 17px; }
.review-decision-buttons button { justify-content: center; font-size: 11px; padding: 0 12px; }
.moderation-history article { display: grid; gap: 7px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.moderation-history article span { color: var(--muted); font-size: 10px; }
.moderation-history article p { margin: 0; color: var(--soft); }
:root[data-theme] :is(.edit-track-review-modal,.source-search-modal,.author-editor-modal) { border-radius: 18px; padding: 28px; }
:root[data-theme] .edit-track-review-modal { width: min(1050px,calc(100% - 40px)); }
.edit-track-review-form > :is(.tag-picker,.source-picker,.form-grid,.admin-edit-panel) { border: 1px solid var(--line); border-radius: 13px; padding: 19px; background: var(--panel); }
.edit-track-review-form .edit-track-fields { gap: 16px; }
.edit-track-review-form .field-heading { align-items: center; gap: 15px; }
.edit-track-review-head h2 { font-size: 27px; }
.edit-track-review-head p:last-child, .edit-track-intro p { color: var(--muted); font-size: 12px; }
.edit-track-review-actions { position: sticky; bottom: 0; padding: 16px 0 0; background: var(--panel); border-top: 1px solid var(--line); }
:root[data-theme] :is(.admin-edit-panel,.author-editor-form) { border-color: var(--line); background: var(--panel); }
@media(min-width:761px) and (max-width:1200px) {
  .admin-v2-layout { grid-template-columns: 155px minmax(0,1fr); gap: 18px; }
  .admin-stat { padding: 16px; }
  .admin-stat-label { font-size: 10px; }
  .admin-stat small { max-width: 100px; }
  .review-v2-layout { grid-template-columns: minmax(0,1fr) 250px; gap: 17px; }
  .review-listening { gap: 16px; padding: 20px; }
  .review-listening .detail-cover { width: 100px; height: 100px; flex-basis: 100px; }
  .manage-person { flex-wrap: wrap; }
  .manage-person-copy { flex-basis: 140px; }
  .taxonomy-grid { grid-template-columns: 1fr; }
  .about-v2-hero { padding: 30px; gap: 20px; }
  .about-v2-steps > article { padding: 22px; }
}
@media(max-width:760px) {
  :root[data-theme] .brand { display: none; }
  .about-v2 { gap: 29px; }
  .about-v2-hero { grid-template-columns: 1fr; padding: 26px; gap: 15px; border-radius: 18px; }
  :root[data-theme] .about-v2-hero h1 { font-size: 39px; }
  .about-v2-lead { font-size: 13px; line-height: 1.8; }
  .about-v2-art { min-height: 220px; }
  .about-v2-art > svg { width: 120px; height: 120px; }
  .about-orbit { width: 200px; height: 200px; }
  .orbit-two { width: 260px; height: 260px; }
  .about-art-caption { bottom: 1px; }
  .about-v2-counts { grid-template-columns: repeat(3,1fr); gap: 10px; padding: 0 2px 24px; }
  .about-v2-counts strong { font-size: 29px; }
  .about-v2-counts span { font-size: 10px; }
  .about-v2-counts > p { grid-column: 1 / -1; font-size: 12px; margin-top: 8px; }
  .about-v2-counts p br { display: none; }
  .about-v2-steps { grid-template-columns: 1fr; gap: 13px; }
  .about-v2-steps > article { padding: 23px; }
  .about-step-icon { margin-bottom: 17px; }
  .about-v2-guide { grid-template-columns: 1fr; gap: 12px; }
  .about-v2-footer { flex-wrap: wrap; gap: 12px; }
  .about-v2-footer p { font-size: 11px; }
  .about-v2-footer button { width: 100%; justify-content: center; }
  .admin-v2-heading { display: block; margin-bottom: 21px; }
  :root[data-theme] .admin-v2-heading h1 { font-size: 32px; }
  .admin-access-badge { margin-top: 16px; padding: 7px 10px; }
  .admin-overview { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-bottom: 20px; }
  .admin-stat { padding: 16px; gap: 5px; }
  .admin-stat strong { font-size: 29px; }
  .admin-stat-label { font-size: 11px; }
  .admin-stat small { font-size: 9px; }
  .admin-stat > .lucide { display: none; }
  .admin-v2-layout { display: block; }
  :root[data-theme] #moderationBrowserTabs { flex-direction: row; position: static; overflow-x: auto; gap: 4px; padding: 5px; margin-bottom: 23px; }
  :root[data-theme] #moderationBrowserTabs button { width: auto; min-width: max-content; font-size: 11px; min-height: 42px; padding: 0 12px; }
  :root[data-theme] .moderation-toolbar { grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px; }
  .moderation-toolbar > label:nth-of-type(2) { grid-column: 1 / -1; grid-row: 1; }
  .moderation-toolbar > label:nth-of-type(4) { grid-column: 1 / -1; }
  .moderation-bulk-actions .admin-select-all { flex-basis: 100%; }
  .admin-selection-count { flex-basis: 100%; }
  .moderation-card { padding: 14px; }
  .moderation-card > header { flex-wrap: wrap; gap: 10px; }
  .moderation-artwork { width: 48px; height: 48px; flex-basis: 48px; }
  .moderation-card-title { flex-basis: calc(100% - 100px); }
  .moderation-card-title .link-title { font-size: 13px; }
  .moderation-card .moderation-status { margin-left: 74px; }
  .moderation-card-checks { align-items: flex-start; font-size: 10px; }
  .moderation-card > footer { flex-wrap: wrap; gap: 6px; }
  .moderation-card-actions { gap: 6px; }
  :root[data-theme] .moderation-card-actions button { font-size: 10px; padding: 0 10px; }
  .manage-panel { padding: 18px; }
  .manage-panel-heading { gap: 10px; }
  :root[data-theme] .manage-panel-heading h2 { font-size: 22px; }
  .manage-person { flex-wrap: wrap; gap: 11px; }
  .manage-person-copy { flex-basis: calc(100% - 63px); }
  .admin-role-control { margin-left: 57px; flex: 1; }
  .manage-author { flex-wrap: wrap; gap: 11px; }
  .manage-author-copy { flex-basis: calc(100% - 63px); }
  .manage-author-actions { margin-left: 57px; }
  .manage-author-tracks button { flex-wrap: wrap; }
  .taxonomy-grid { grid-template-columns: 1fr; gap: 13px; }
  .manage-request { flex-wrap: wrap; gap: 11px; }
  .manage-request > div:nth-child(2) { flex-basis: calc(100% - 63px); }
  .manage-request .request-actions { margin-left: 57px; }
  .moderation-event { gap: 10px; padding: 15px; flex-wrap: wrap; }
  .moderation-event > div { flex-basis: calc(100% - 55px); }
  .moderation-event > button { margin-left: 45px; }
  .review-v2-heading { display: block; }
  .review-v2-layout { grid-template-columns: 1fr; }
  .review-listening { padding: 20px; gap: 16px; }
  .review-listening .detail-cover { width: 95px; height: 95px; flex-basis: 95px; }
  .review-listening h2 { font-size: 21px; }
  .review-listening .eyebrow { font-size: 8px; }
  .review-card { padding: 19px; }
  .review-card > header { flex-wrap: wrap; }
  .review-card h2 { font-size: 20px; }
  .review-card > header > button { margin-left: 40px; }
  .review-decision { position: static; }
  :root[data-theme] .edit-track-review-modal { width: calc(100% - 24px); padding: 21px; }
  .edit-track-review-form > :is(.tag-picker,.source-picker,.form-grid,.admin-edit-panel) { padding: 14px; }
}
@media(max-width:370px) {
  :root[data-theme] .about-v2-hero h1 { font-size: 33px; }
  .about-v2-hero { padding: 22px; }
  .admin-stat-label { font-size: 10px; }
  .review-listening { flex-direction: column; align-items: flex-start; }
  .review-listening .detail-cover { width: 100%; height: auto; aspect-ratio: 1; }
}

:root[data-theme] .sidebar { overflow-x:hidden; }
:root[data-theme] .brand { padding-inline:0; }
.brand-wordmark { width:min(190px,100%); min-width:0; height:auto; aspect-ratio:240 / 56; }

/* UI3 — one set of surfaces and controls for publishing, editing and identity. */
html {zoom:.99;}
.editor-dialog-open {overflow:hidden;}
:root[data-theme] :is(.modal,.upload-workspace,.settings-layout) :is(.primary-btn,.ghost-btn) {display:inline-flex;align-items:center;justify-content:center;gap:8px;}
:root[data-theme] .edit-track-fields > label {grid-column:auto;}
:root[data-theme] .edit-track-fields > label:last-child {grid-column:1/-1;}
:root[data-theme] :is(.diag-warning,.diag-danger,.edit-track-review-summary .warning) {color:var(--warning);background:color-mix(in srgb,var(--warning) 8%,var(--panel));border-color:color-mix(in srgb,var(--warning) 25%,var(--line));}
:root[data-theme] :is(.diag-ok,.edit-track-review-summary .ok) {color:var(--success);background:color-mix(in srgb,var(--success) 8%,var(--panel));border-color:color-mix(in srgb,var(--success) 25%,var(--line));}
:root[data-theme] .app-shell {min-height:calc(100dvh / .99);}
.brand-wordmark {aspect-ratio:292 / 56;}
:root[data-theme] :is(#view-upload,#view-settings,#view-inbox,#profileDetail) {max-width:1240px;margin-inline:auto;}
:root[data-theme] :is(.upload-hero,.settings-account-hero,.notification-page-head) {margin-bottom:28px;}
:root[data-theme] :is(.upload-hero,.settings-account-hero) {background:none;border:0;box-shadow:none;padding:0;}
:root[data-theme] :is(.upload-hero h1,.settings-account-hero h1,.notification-page-head h1) {font-size:clamp(28px,3.2vw,42px);letter-spacing:-1.4px;line-height:1.13;}
:root[data-theme] :is(.upload-hero p,.settings-account-copy p,.notification-page-head p) {color:var(--muted);line-height:1.6;}
:root[data-theme] .upload-hero-flow {background:var(--panel);padding:14px 18px;border:1px solid var(--line);border-radius:14px;}
:root[data-theme] .upload-hero-flow strong {background:var(--active-bg);color:var(--accent);border:0;}
:root[data-theme] .upload-workspace {grid-template-columns:minmax(0,1fr) 300px;gap:24px;}
:root[data-theme] :is(.upload-form-card,.upload-submit-card,.upload-preview-sticky,.settings-card) {padding:26px;border:1px solid var(--line);border-radius:18px;background:var(--panel);box-shadow:none;}
:root[data-theme] :is(.upload-section-icon,.upload-preview-badge) {color:var(--accent);background:var(--active-bg);border:0;border-radius:12px;}
:root[data-theme] .upload-section-head {align-items:flex-start;}
:root[data-theme] :is(.upload-section-head,.settings-card-head) h2 {font-size:19px;letter-spacing:-.4px;}
:root[data-theme] :is(.upload-section-head,.settings-card-head) p:not(.eyebrow) {color:var(--muted);font-size:13px;line-height:1.55;}
:root[data-theme] :is(.upload-form-main,.settings-sidebar) {gap:20px;}
:root[data-theme] :is(.upload-field-grid,.upload-classification-grid,.settings-field-grid,.edit-track-fields) {gap:18px;}
:root[data-theme] :is(.upload-form-card,.modal-form,.playlist-editor-fields,.settings-field-grid,.taxonomy-picker-body) label {font-size:13px;font-weight:600;color:var(--text);}
:root[data-theme] :is(.upload-form-card,.modal-form,.playlist-editor-fields,.settings-field-grid,.taxonomy-picker-body) :is(input:not([type=file]):not([type=hidden]):not([type=checkbox]),textarea,select) {width:100%;min-width:0;min-height:46px;border:1px solid var(--line);border-radius:10px;background:var(--panel-2);padding:12px 14px;color:var(--text);font:inherit;font-size:14px;font-weight:400;box-shadow:none;}
:root[data-theme] :is(.upload-form-card,.modal-form,.playlist-editor-fields,.settings-field-grid,.taxonomy-picker-body) textarea {resize:vertical;line-height:1.6;min-height:110px;}
:root[data-theme] :is(.upload-form-card,.modal-form,.playlist-editor-fields,.settings-field-grid,.taxonomy-picker-body) :is(input,textarea,select):focus {border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent);outline:none;}
:root[data-theme] :is(.field-hint,.field-meta,.playlist-cover-file-name) {color:var(--muted);font-size:12px;font-weight:400;line-height:1.5;overflow-wrap:anywhere;}
:root[data-theme] :is(.tag-picker,.source-picker) {min-width:0;background:none;border:0;padding:0;display:grid;gap:10px;align-content:start;}
:root[data-theme] .upload-extra-genres {padding-top:16px;border-top:1px solid var(--line);margin-top:8px;}
:root[data-theme] .upload-picker-summary {padding:0;display:grid;grid-template-columns:minmax(0,1fr);background:none;border:0;gap:8px;}
:root[data-theme] .upload-picker-summary strong {font-size:13px;font-weight:400;white-space:normal;overflow-wrap:anywhere;}
:root[data-theme] :is(.taxonomy-open-btn,.upload-picker-summary .ghost-btn) {display:flex;align-items:center;gap:10px;width:100%;padding:12px 14px;min-height:48px;border:1px solid var(--line);border-radius:10px;background:var(--panel-2);color:var(--text);text-align:left;font-size:14px;font-weight:500;}
:root[data-theme] .taxonomy-open-btn > span:not([data-lucide]) {min-width:0;overflow-wrap:anywhere;}
:root[data-theme] .taxonomy-open-btn svg:last-child {margin-left:auto;flex-shrink:0;}
:root[data-theme] .file-drop {padding:24px 16px;min-height:190px;background:var(--panel-2);border:1px dashed var(--control-line);border-radius:14px;box-shadow:none;}
:root[data-theme] .file-drop:is(:hover,.is-drag-over) {border-color:var(--accent);background:var(--active-bg);}
:root[data-theme] .file-drop-icon {background:none;color:var(--accent);}
:root[data-theme] .file-drop-name {background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:8px;overflow-wrap:anywhere;white-space:normal;}
:root[data-theme] .upload-submit-card {background:var(--panel);}
:root[data-theme] .upload-submit-actions {display:flex;flex-wrap:wrap;gap:12px;align-items:center;}
:root[data-theme] :is(.quality-checks,.upload-preview-description,.upload-preview-meta) {color:var(--muted);}
:root[data-theme] .quality-checks .done {color:var(--success);}
:root[data-theme] .upload-preview-sticky {position:sticky;top:24px;padding:20px;}
:root[data-theme] .upload-preview-track {background:var(--panel-2);border-color:var(--line);}
/* Dialog frame: single scroll region, reachable actions, nested pickers above editors. */
:root[data-theme] .modal-backdrop {padding:24px;align-items:center;overflow-y:auto;overscroll-behavior:contain;}
:root[data-theme] :is(.playlist-editor-modal,.author-editor-modal,.edit-track-review-modal,.source-finder-modal) {width:min(840px,100%);max-height:calc(100dvh / .99 - 48px);min-height:0;margin:auto;padding:0;border-radius:20px;border:1px solid var(--line);background:var(--panel);overflow-x:hidden;overflow-y:auto;box-shadow:0 28px 100px #0003;}
:root[data-theme] :is(.playlist-editor-head,.source-finder-head,.edit-track-review-head) {position:sticky;top:0;z-index:2;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin:0;padding:24px 28px;border-bottom:1px solid var(--line);background:var(--panel);}
:root[data-theme] :is(.playlist-editor-head,.source-finder-head,.edit-track-review-head) :is(h2,p) {margin:0;}
:root[data-theme] :is(.playlist-editor-head,.source-finder-head,.edit-track-review-head) h2 {font-size:25px;letter-spacing:-.7px;line-height:1.2;margin:5px 0 8px;color:var(--text);}
:root[data-theme] :is(.playlist-editor-head,.source-finder-head,.edit-track-review-head) p:not(.eyebrow) {color:var(--muted);font-size:13px;line-height:1.5;max-width:580px;}
:root[data-theme] .modal-close-btn {width:36px;height:36px;flex:0 0 36px;display:grid;place-items:center;border:1px solid var(--line);background:var(--panel-2);color:var(--text);border-radius:10px;}
:root[data-theme] :is(.playlist-editor-form,.author-editor-form) {padding:28px;grid-template-columns:190px minmax(0,1fr);gap:28px;}
:root[data-theme] :is(.playlist-editor-cover-column,.author-editor-avatar-column,.playlist-editor-fields) {min-width:0;}
:root[data-theme] :is(.playlist-editor-cover-column,.author-editor-avatar-column) {display:grid;grid-template-columns:minmax(0,1fr);gap:10px;align-content:start;}
:root[data-theme] :is(.playlist-cover-field,.author-avatar-field) {width:100%;}
:root[data-theme] :is(.playlist-cover-preview,.playlist-cover-field,.author-avatar-field) {background:var(--panel-2);color:var(--accent);border-color:var(--line);}
:root[data-theme] .playlist-cover-field {border-radius:14px;}
:root[data-theme] .playlist-cover-overlay {background:#17191bbb;color:#fff8ed;}
:root[data-theme] .playlist-editor-fields {gap:18px;}
:root[data-theme] .playlist-editor-fields label {gap:8px;}
:root[data-theme] :is(.playlist-privacy-note,.playlist-system-copy-note) {padding:14px;border:1px solid var(--line);border-radius:10px;background:var(--panel-2);color:var(--muted);}
:root[data-theme] .playlist-privacy-note svg {color:var(--accent);}
:root[data-theme] .playlist-privacy-note strong {color:var(--text);}
:root[data-theme] :is(.playlist-editor-actions,.edit-track-review-actions,.source-finder-actions) {position:sticky;bottom:0;z-index:2;display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:12px;background:var(--panel);border-top:1px solid var(--line);padding:18px 0 0;margin:4px 0 0;}
:root[data-theme] .source-finder-actions {padding:18px 28px;margin:0;justify-content:space-between;}
:root[data-theme] .source-finder-actions p {font-size:12px;color:var(--muted);}
:root[data-theme] .edit-track-review-modal {width:min(940px,100%);}
:root[data-theme] .edit-track-review-form {display:grid;gap:22px;padding:28px;margin:0;}
:root[data-theme] .edit-track-review-form .edit-track-fields {grid-template-columns:repeat(2,minmax(0,1fr));}
:root[data-theme] .edit-track-fields label:last-child {grid-column:1/-1;}
:root[data-theme] .edit-track-review-summary {display:flex;flex-wrap:wrap;gap:8px;padding:14px;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;}
:root[data-theme] .admin-edit-panel {border:1px solid var(--line);border-radius:14px;padding:20px;background:var(--panel-2);min-width:0;}
:root[data-theme] .admin-edit-panel legend {font-size:13px;color:var(--text);font-weight:600;padding-inline:8px;}
/* Shared classification picker. */
:root[data-theme] :is(#uploadTaxonomyModal,#playlistTagModal,#sourceSearchModal) {z-index:180;}
:root[data-theme] .taxonomy-picker-modal {display:flex;flex-direction:column;width:min(620px,100%);overflow:hidden;}
:root[data-theme] .taxonomy-picker-body {display:flex;flex-direction:column;gap:18px;overflow-y:auto;flex:1;min-height:0;padding:24px 28px;}
:root[data-theme] .taxonomy-search-label {display:none;}
:root[data-theme] .taxonomy-search input {padding-left:42px!important;}
:root[data-theme] .taxonomy-selected {display:grid;gap:10px;padding:14px;border-radius:12px;border:1px solid var(--line);background:var(--panel-2);}
.taxonomy-selection-label {font-size:11px;font-weight:650;text-transform:uppercase;letter-spacing:1px;color:var(--muted);}
.taxonomy-selection-chips {display:flex;flex-wrap:wrap;gap:7px;}
:root[data-theme] .selected-taxonomy-chip {display:inline-flex;align-items:center;gap:8px;min-width:0;max-width:100%;padding:7px 10px;border-radius:8px;background:var(--active-bg);border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));color:var(--accent);font-size:13px;text-align:left;overflow-wrap:anywhere;}
.selected-taxonomy-chip svg {width:14px;height:14px;flex-shrink:0;}
:root[data-theme] .taxonomy-options {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-height:32dvh;min-height:70px;overflow:auto;padding:3px;flex-shrink:0;}
:root[data-theme] .taxonomy-options .tag-option {display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:42px;padding:10px 12px;border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:9px;font-size:13px;font-weight:450;text-align:left;white-space:normal;}
.taxonomy-options .tag-option span {min-width:0;overflow-wrap:anywhere;}
.taxonomy-options .tag-option svg {width:15px;height:15px;flex-shrink:0;color:var(--muted);}
:root[data-theme] .taxonomy-options .tag-option.active {background:var(--active-bg);border-color:var(--accent);color:var(--accent);}
:root[data-theme] .taxonomy-options .tag-option.active svg {color:var(--accent);}
.taxonomy-empty {grid-column:1/-1;padding:18px;color:var(--muted);font-size:13px;}
:root[data-theme] .taxonomy-custom {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding-top:18px;border-top:1px solid var(--line);}
:root[data-theme] .taxonomy-custom .ghost-btn {border:1px solid var(--line);background:var(--panel-2);color:var(--text);border-radius:10px;}
/* Notification inbox. */
:root[data-theme] #view-inbox {max-width:1000px;}
:root[data-theme] .notification-toolbar {display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:none;}
:root[data-theme] .notification-filters {display:flex;flex-wrap:wrap;gap:6px;}
:root[data-theme] .notification-filters button {border:0;background:none;border-radius:8px;color:var(--muted);font-size:13px;padding:9px 12px;}
:root[data-theme] .notification-filters button.active {background:var(--active-bg);color:var(--accent);}
:root[data-theme] .notification-actions .ghost-btn {font-size:12px;min-height:34px;padding:8px 12px;background:var(--panel);border:1px solid var(--line);}
:root[data-theme] .notification-summary {padding:16px 0;color:var(--muted);font-size:12px;}
:root[data-theme] #notificationList {display:grid;gap:10px;}
:root[data-theme] .notification-card {display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:16px;align-items:start;padding:20px;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:none;}
:root[data-theme] .notification-card.unread {border-left:3px solid var(--accent);background:color-mix(in srgb,var(--active-bg) 25%,var(--panel));}
:root[data-theme] .notification-icon {width:42px;height:42px;display:grid;place-items:center;border-radius:12px;color:var(--accent);background:var(--active-bg);border:0;}
.notification-icon svg {width:20px;height:20px;}
:root[data-theme] .notification-card-head {display:flex;align-items:center;flex-wrap:wrap;gap:8px 18px;justify-content:space-between;}
.notification-card-head strong {font-size:14px;font-weight:600;}
:root[data-theme] .notification-copy p {font-size:14px;line-height:1.6;margin:8px 0 0;color:var(--soft);overflow-wrap:anywhere;}
.notification-card-head time {font-size:11px;color:var(--muted);}
.notification-card-actions {display:flex;gap:5px;}
:root[data-theme] .notification-action {display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--line);border-radius:9px;background:none;color:var(--muted);}
.notification-action svg {width:16px;height:16px;}
:root[data-theme] .notification-empty {padding:60px 20px;text-align:center;border:1px dashed var(--line);border-radius:16px;color:var(--muted);background:var(--panel);}
:root[data-theme] .notification-empty > span {background:var(--panel-2);color:var(--accent);}
/* Public profile and profile settings. */
:root[data-theme] .notification-toolbar {border-inline:0;border-radius:0;}
:root[data-theme] .profile-hero:not(.playlist-head)::before {display:none;}
:root[data-theme] .profile-hero:not(.playlist-head) .profile-avatar {border-radius:50%;}
:root[data-theme] .profile-avatar > .user-avatar-fallback {width:100%;height:100%;border-radius:inherit;font-size:30px;}
:root[data-theme] .profile-hero:not(.playlist-head) {display:grid;grid-template-columns:128px minmax(0,1fr);gap:28px;padding:34px;border:1px solid var(--line);background:linear-gradient(130deg,var(--hero),var(--panel));border-radius:20px;align-items:start;}
:root[data-theme] .profile-hero:not(.playlist-head) .profile-avatar {width:128px;height:128px;flex:0 0 128px;border:1px solid var(--line);background:var(--panel);color:var(--accent);box-shadow:none;}
:root[data-theme] .profile-hero:not(.playlist-head) h1 {font-size:clamp(28px,4vw,48px);line-height:1.1;letter-spacing:-1.6px;overflow-wrap:anywhere;margin:10px 0 14px;}
:root[data-theme] .profile-hero:not(.playlist-head) p {font-size:14px;color:var(--muted);}
:root[data-theme] .profile-bio {max-width:700px;white-space:pre-line;overflow-wrap:anywhere;line-height:1.7;margin:20px 0;}
:root[data-theme] .profile-link {color:var(--accent);font-size:13px;text-decoration:none;}
:root[data-theme] .profile-stats {display:grid;grid-template-columns:2fr 1fr 1fr;gap:0;margin:24px 0 32px;padding:22px 0;background:none;border-block:1px solid var(--line);border-radius:0;}
:root[data-theme] .profile-stats article {min-width:0;border:0;background:none;padding:0 24px;display:grid;gap:8px;}
.profile-stats article + article {border-left:1px solid var(--line)!important;}
:root[data-theme] .profile-stats strong {font-size:20px;letter-spacing:-.5px;overflow-wrap:anywhere;}
:root[data-theme] .profile-stats span {color:var(--muted);font-size:12px;}
:root[data-theme] #profileDetail .playlist-card {background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px;color:var(--text);}
:root[data-theme] #profileDetail .playlist-card p {font-size:13px;line-height:1.6;color:var(--muted);}
:root[data-theme] .settings-account-hero {display:flex;gap:24px;flex-wrap:wrap;align-items:center;}
:root[data-theme] .settings-account-hero .profile-avatar {width:80px;height:80px;flex:0 0 80px;border:1px solid var(--line);background:var(--panel-2);color:var(--accent);}
:root[data-theme] .settings-account-summary {margin-left:auto;color:var(--muted);font-size:12px;}
:root[data-theme] .settings-layout {grid-template-columns:minmax(0,1fr) 320px;gap:24px;}
:root[data-theme] .settings-card-head > svg {color:var(--accent);background:var(--active-bg);padding:9px;width:36px;height:36px;border-radius:10px;}
:root[data-theme] .settings-toggle {background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:16px;}
:root[data-theme] .settings-toggle strong {font-size:14px;font-weight:550;}
:root[data-theme] .settings-toggle small {font-size:12px;color:var(--muted);line-height:1.5;}
:root[data-theme] .settings-toggle i {background:var(--panel-3);border-color:var(--line);}
:root[data-theme] .settings-toggle input:checked + i {background:var(--accent);border-color:var(--accent);}
:root[data-theme] .settings-file-field {border:1px dashed var(--control-line);background:var(--panel-2);border-radius:12px;padding:18px;}
:root[data-theme] .settings-save-bar {background:var(--panel);border-top:1px solid var(--line);padding-top:20px;}
:root[data-theme] :is(.settings-save-bar p,.session-meta,.profile-activity-head p,.profile-activity-row,.discord-connection-copy span) {color:var(--muted);}
:root[data-theme] :is(.profile-activity-row,.profile-activity-head,.session-meta,.discord-connection) {background:none;border-color:var(--line);}
/* Visible drag grip, drop line and keyboard ordering. */
:root[data-theme] .queue-upcoming-section .queue-item {cursor:default;grid-template-columns:44px minmax(0,1fr) 26px auto 28px;gap:8px;}
:root[data-theme] .queue-drag-handle {width:26px;height:38px;display:grid;place-items:center;touch-action:none;cursor:grab;border:0;border-radius:6px;background:transparent;color:var(--muted);user-select:none;}
.queue-drag-handle svg {width:17px;height:17px;pointer-events:none;}
:root[data-theme] .queue-drag-handle:hover {background:var(--panel-3);color:var(--accent);}
:root[data-theme] .queue-upcoming-section .queue-item.is-dragging {opacity:.6;outline:1px solid var(--accent);}
.queue-item.drop-before {box-shadow:0 -3px 0 var(--accent)!important;}
.queue-item.drop-after {box-shadow:0 3px 0 var(--accent)!important;}
/* The radio program starts below the first full viewport. */
:root[data-theme] .radio-fullscreen .fullscreen-player-layout {min-height:calc(100dvh / .99 - 86px);}
.radio-program {position:relative;z-index:1;width:min(1240px,calc(100% - 80px));margin:48px auto 80px;padding:32px;border:1px solid rgb(var(--fullscreen-accent) / .25);border-radius:20px;background:color-mix(in srgb,rgb(var(--fullscreen-tone)) 20%,var(--panel));}
.radio-program > header {padding-bottom:28px;border-bottom:1px solid var(--line);}
.radio-program h2 {font-size:32px;letter-spacing:-1px;margin:8px 0 12px;}
.radio-program p {color:var(--muted);font-size:14px;line-height:1.6;}
.radio-program-columns {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;}
.radio-program h3 {font-size:16px;margin:24px 0 16px;}
:root[data-theme] .radio-program .radio-track-row {background:var(--panel);border-color:var(--line);color:var(--text);}
:root[data-theme] .radio-program .radio-track-row span {color:var(--muted);}
:root[data-theme] .radio-program .radio-track-row strong {color:var(--text);}
@media(max-width:1100px) {
  :root[data-theme] :is(.upload-workspace,.settings-layout) {grid-template-columns:minmax(0,1fr);}
  :root[data-theme] .upload-preview-sticky {position:static;}
  :root[data-theme] .upload-preview-panel {display:none;}
  :root[data-theme] .settings-sidebar {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:700px) {
  :root[data-theme] .modal-backdrop {padding:10px;}
  :root[data-theme] :is(.playlist-editor-modal,.author-editor-modal,.edit-track-review-modal,.source-finder-modal) {max-height:calc(100dvh / .99 - 20px);border-radius:16px;}
  :root[data-theme] :is(.playlist-editor-head,.source-finder-head,.edit-track-review-head) {padding:20px;gap:12px;}
  :root[data-theme] :is(.playlist-editor-head,.source-finder-head,.edit-track-review-head) h2 {font-size:22px;}
  :root[data-theme] :is(.playlist-editor-form,.author-editor-form) {grid-template-columns:minmax(0,1fr);padding:20px;gap:22px;}
  :root[data-theme] :is(.playlist-editor-cover-column,.author-editor-avatar-column) {width:140px;justify-self:center;}
  :root[data-theme] :is(.edit-track-review-form,.taxonomy-picker-body) {padding:20px;gap:18px;}
  :root[data-theme] .source-finder-actions {padding:16px 20px;}
  :root[data-theme] .source-finder-actions {flex:0 0 auto;}
  :root[data-theme] .source-finder-actions p {flex:0 0 auto;}
  :root[data-theme] .edit-track-review-form .field-heading {flex-direction:column;align-items:stretch;gap:12px;}
  :root[data-theme] :is(.edit-track-fields,.upload-field-grid,.upload-classification-grid,.settings-field-grid,.settings-sidebar), :root[data-theme] .edit-track-review-form .edit-track-fields {grid-template-columns:minmax(0,1fr);}
  :root[data-theme] :is(.upload-form-card,.upload-submit-card,.settings-card) {padding:20px;}
  :root[data-theme] .upload-hero-flow {display:none;}
  :root[data-theme] .notification-card {grid-template-columns:34px minmax(0,1fr);gap:12px;padding:16px;}
  :root[data-theme] .notification-icon {width:34px;height:34px;border-radius:9px;}
  .notification-card-actions {grid-column:2;justify-content:flex-end;}
  :root[data-theme] .profile-hero:not(.playlist-head) {grid-template-columns:minmax(0,1fr);padding:24px;gap:18px;}
  :root[data-theme] .profile-hero:not(.playlist-head) .profile-avatar {width:96px;height:96px;}
  :root[data-theme] .profile-stats {grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;}
  :root[data-theme] .profile-stats article:first-child {grid-column:1/-1;}
  :root[data-theme] .profile-stats article:nth-child(2) {border-left:0!important;}
  :root[data-theme] .profile-stats article {padding:0 12px;}
  :root[data-theme] .settings-account-summary {margin-left:0;}
  .radio-program {width:calc(100% - 32px);padding:22px;margin-top:32px;}
  .radio-program-columns {grid-template-columns:minmax(0,1fr);gap:8px;}
}
@media(prefers-reduced-motion:reduce) {.queue-item {transition:none;}}

/* UI4: independent composition for auth, publication, collections and listening. */
:root[data-theme] .brand {width:100%;padding:10px 0 18px;}
:root[data-theme] .brand-wordmark {width:100%;max-width:none;height:auto;aspect-ratio:278/56;}
:root[data-theme] .sidebar .nav-list {gap:4px;margin-top:8px;}
:root[data-theme] .sidebar .nav-item {min-height:46px;}
/* Authentication */
:root[data-theme] :is(#view-auth,#view-register) {max-width:1180px;margin:20px auto 0;}
.auth-v4 {display:grid;grid-template-columns:minmax(0,1.05fr) minmax(340px,.95fr);border:1px solid var(--line);border-radius:24px;overflow:hidden;background:var(--panel);}
.auth-v4-story {position:relative;overflow:hidden;min-height:700px;padding:48px;background:var(--hero);color:var(--hero-ink);}
.auth-v4-story > img {width:52px;height:52px;margin-bottom:28px;}
.auth-v4-story .eyebrow {color:var(--hero-accent);}
.auth-v4-story h2 {position:relative;z-index:1;font-size:clamp(36px,4vw,55px);font-weight:600;letter-spacing:-2px;line-height:1.08;margin:18px 0 22px;}
.auth-v4-story h2 em {font-family:Georgia,serif;font-weight:400;color:var(--hero-accent);}
.auth-v4-story > p:not(.eyebrow) {position:relative;z-index:1;max-width:300px;font-size:15px;line-height:1.7;color:var(--hero-ink);}
.auth-v4-record {position:absolute;bottom:-100px;right:-90px;width:390px;height:390px;border-radius:50%;background:repeating-radial-gradient(circle,#272a26 0 2px,#353931 3px 4px);border:10px solid #242720;display:grid;place-items:center;transform:rotate(-16deg);box-shadow:-20px -20px 50px #0001;}
.auth-v4-record > span {display:grid;place-content:center;text-align:center;width:150px;height:150px;border-radius:50%;background:var(--accent);color:var(--on-accent);font-size:62px;font-weight:650;line-height:1;}
.auth-v4-record small {font-size:7px;letter-spacing:1.5px;margin-top:12px;}
.auth-v4-panel {padding:48px;display:flex;flex-direction:column;justify-content:center;min-width:0;}
.auth-v4-panel h1 {font-size:32px;letter-spacing:-1px;font-weight:600;line-height:1.18;margin:10px 0 12px;}
.auth-v4-panel header > p:not(.eyebrow) {color:var(--muted);font-size:14px;line-height:1.6;margin:0 0 28px;}
.auth-v4-form {display:grid;gap:18px;}
:root[data-theme] :is(.auth-v4-form,.composer-main,.composer-dialog-body,.collection-body) label {display:grid;gap:8px;color:var(--text);font-size:13px;font-weight:600;min-width:0;}
:root[data-theme] :is(.auth-v4-form,.composer-main,.composer-dialog-body,.collection-body) :is(input:not([type=file]):not([type=hidden]):not([type=checkbox]),textarea,select) {display:block;width:100%;min-width:0;min-height:48px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--panel-2);color:var(--text);font:inherit;font-size:14px;font-weight:400;box-shadow:none;}
:root[data-theme] :is(.auth-v4-form,.composer-main,.composer-dialog-body,.collection-body) textarea {resize:vertical;line-height:1.6;}
:root[data-theme] :is(.auth-v4-form,.composer-main,.composer-dialog-body,.collection-body) :is(input,textarea,select):focus {outline:2px solid var(--accent);outline-offset:2px;border-color:var(--accent);box-shadow:none;}
.auth-v4-form label > small {font-size:11px;font-weight:400;line-height:1.55;color:var(--muted);}
.auth-v4-password {position:relative;}
:root[data-theme] .auth-v4-password input {padding-right:48px;}
.auth-v4-password button {position:absolute;right:5px;top:5px;display:grid;place-items:center;width:38px;height:38px;border:0;border-radius:7px;background:transparent;color:var(--muted);}
.auth-v4-password svg {width:18px;height:18px;}
:root[data-theme] :is(.auth-v4-form,.composer-layout,.composer-dialog,.collection-dialog) :is(.primary-btn,.ghost-btn) {display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:11px 18px;border-radius:10px;font-size:13px;font-weight:600;white-space:normal;}
.auth-v4-form > .primary-btn {width:100%;min-height:48px;margin-top:4px;justify-content:space-between!important;}
.auth-v4-divider {display:flex;align-items:center;gap:12px;color:var(--muted);font-size:12px;}
.auth-v4-divider::before,.auth-v4-divider::after {content:'';height:1px;background:var(--line);flex:1;}
:root[data-theme] .auth-v4-form > .ghost-btn {width:100%;border:1px solid var(--line);background:var(--panel);color:var(--text);}
.auth-v4-switch {margin:24px 0 0;color:var(--muted);font-size:13px;text-align:center;line-height:1.8;}
.auth-v4-switch button {padding:0;border:0;background:none;color:var(--accent);font:inherit;font-weight:600;}
/* Shared publishing composer: simple rows, stable selectors and one scrolling body. */
:root[data-theme] #view-upload {max-width:1180px;}
.composer-page-head {margin:0 0 30px;}
.composer-page-head h1 {margin:10px 0 12px;font-size:38px;font-weight:600;letter-spacing:-1.3px;line-height:1.15;}
.composer-page-head > p:last-child {font-size:14px;line-height:1.6;color:var(--muted);}
.composer-layout {display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:28px;align-items:start;}
.composer-main {border:1px solid var(--line);border-radius:20px;background:var(--panel);overflow:hidden;min-width:0;}
.composer-section {display:grid;gap:22px;min-width:0;padding:28px;}
.composer-section + .composer-section {border-top:1px solid var(--line);}
.composer-section > header {display:flex;gap:12px;align-items:center;}
.composer-section h2 {margin:0;font-size:18px;font-weight:600;letter-spacing:-.4px;}
.composer-number {font-size:11px;font-weight:650;color:var(--accent);background:var(--active-bg);border-radius:7px;min-width:30px;height:30px;display:grid;place-items:center;}
.composer-files,.composer-fields {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;}
.composer-wide {grid-column:1/-1;}
:root[data-theme] .composer-file {position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;min-width:0;min-height:190px;padding:22px 18px;border:1px dashed var(--control-line);border-radius:12px;background:var(--panel-2);color:var(--text);text-align:center;cursor:pointer;}
.composer-file > svg {width:26px;height:26px;color:var(--accent);}
.composer-file > strong {font-size:14px;font-weight:600;line-height:1.5;overflow-wrap:anywhere;max-width:100%;}
.composer-file > span {font-size:11px;font-weight:400;color:var(--muted);line-height:1.5;}
:root[data-theme] .composer-file input[type=file] {position:absolute;inset:0;width:100%;height:100%;min-height:0;padding:0;margin:0;opacity:0;cursor:pointer;}
.composer-file > b {padding:7px 10px;background:var(--panel);border:1px solid var(--line);border-radius:7px;max-width:100%;font-size:11px;font-weight:500;overflow-wrap:anywhere;}
.composer-file:is(:focus-within,.is-drag-over,:hover) {border-color:var(--accent);background:var(--active-bg);}
:root[data-theme] :is(.composer-main,.composer-dialog-body) label.composer-file {display:flex;}
:root[data-theme] .composer-main label.composer-check {display:flex;}
.composer-field {display:grid;gap:8px;align-content:start;min-width:0;font-size:13px;font-weight:600;}
.composer-field > span > small {color:var(--muted);font-weight:400;margin-left:7px;}
:root[data-theme] .composer-select {display:flex;align-items:center;gap:10px;width:100%;min-height:48px;padding:12px 14px;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;color:var(--text);font-size:14px;text-align:left;line-height:1.5;}
.composer-select > span:not([data-lucide]) {min-width:0;overflow-wrap:anywhere;flex:1;}
.composer-select svg {width:17px;height:17px;color:var(--muted);flex-shrink:0;}
.composer-select:hover {border-color:var(--accent);}
.composer-extra {border-top:1px solid var(--line);padding-top:18px;color:var(--muted);font-size:12px;}
.composer-extra summary {cursor:pointer;font-weight:500;}
.composer-inline {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;margin-top:14px;}
.composer-extra .metadata-suggestion-list {margin-top:10px;}
.composer-section-action {display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;}
.composer-section-action p {color:var(--muted);font-size:13px;line-height:1.6;margin:0;}
.composer-sources {display:flex;flex-wrap:wrap;gap:9px;}
.composer-sources .selected-source {margin:0;max-width:100%;background:var(--panel-2);border:1px solid var(--line);padding:9px 11px;border-radius:8px;font-size:12px;color:var(--text);white-space:normal;overflow-wrap:anywhere;}
.composer-sources > .field-hint {font-size:12px;line-height:1.6;color:var(--muted);font-weight:400;}
.composer-section label > small,.composer-note {color:var(--muted);font-size:12px;font-weight:400;line-height:1.6;margin:0;}
.composer-optional {font-size:11px;color:var(--muted);font-weight:400;}
.composer-publish {display:grid;gap:24px;padding:28px;border-top:1px solid var(--line);background:var(--panel-2);}
.composer-main .composer-check {display:flex;align-items:flex-start;gap:12px;line-height:1.5;font-size:13px;}
.composer-check input {width:18px;height:18px;margin-top:2px;flex-shrink:0;}
.composer-check small {display:block;margin-top:4px;font-size:12px;font-weight:400;color:var(--muted);}
.composer-actions {display:flex;gap:12px;justify-content:space-between;flex-wrap:wrap;}
.composer-preview {position:sticky;top:24px;padding:20px;border:1px solid var(--line);border-radius:18px;background:var(--panel);min-width:0;}
.composer-preview > .eyebrow {font-size:10px;margin:0 0 16px;}
.composer-preview-art {aspect-ratio:1;display:grid;place-items:center;overflow:hidden;background:var(--hero);border:1px solid var(--line);border-radius:12px;color:var(--hero-accent);}
.composer-preview-art > svg {width:52px;height:52px;opacity:.7;}
.composer-preview-art img {width:100%;height:100%;object-fit:cover;}
.composer-preview-copy h3 {font-size:18px;line-height:1.3;letter-spacing:-.4px;margin:16px 0 8px;overflow-wrap:anywhere;}
.composer-preview-copy p {font-size:12px;color:var(--muted);line-height:1.6;margin:0;}
.composer-preview-copy p > span {display:block;}
.composer-preview-tags {display:flex;flex-wrap:wrap;gap:5px;margin-top:12px;}
.composer-preview-tags span {max-width:100%;padding:4px 7px;border-radius:6px;background:var(--panel-2);font-size:10px;overflow-wrap:anywhere;}
.composer-checklist {border-top:1px solid var(--line);padding-top:18px;margin-top:20px;}
.composer-checklist h3 {font-size:12px;margin:0 0 12px;font-weight:600;}
.composer-checklist ul {padding:0;margin:0;list-style:none;display:grid;gap:9px;}
.composer-checklist li {display:flex;align-items:center;gap:8px;color:var(--muted);font-size:11px;}
.composer-checklist svg {width:15px;height:15px;flex-shrink:0;}
.composer-checklist .is-ready {color:var(--success);}
.composer-preview-note {color:var(--muted);font-size:11px;line-height:1.6;margin:18px 0 0;}
.composer-errors {color:var(--danger);font-size:12px;line-height:1.6;padding-top:14px;}
:root[data-theme] :is(.composer-dialog,.collection-dialog) {display:flex;flex-direction:column;width:min(880px,100%);height:auto;max-height:calc(100dvh / .99 - 48px);padding:0;margin:auto;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--panel);}
.composer-dialog-head {display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:24px 28px;border-bottom:1px solid var(--line);flex-shrink:0;}
.composer-dialog-head .eyebrow {margin:0 0 8px;font-size:10px;}
.composer-dialog-head h2 {margin:0;font-size:26px;font-weight:600;letter-spacing:-.8px;line-height:1.2;}
.composer-dialog-head p:not(.eyebrow) {font-size:12px;line-height:1.6;color:var(--muted);margin:10px 0 0;max-width:570px;}
.composer-dialog-body {min-height:0;overflow:auto;overscroll-behavior:contain;padding:0;flex:1;}
.composer-dialog-body .composer-section {border-bottom:1px solid var(--line);border-top:0;}
.composer-dialog-actions {display:flex;flex-shrink:0;align-items:center;justify-content:flex-end;gap:12px;padding:18px 28px;border-top:1px solid var(--line);background:var(--panel);}
.composer-status {display:flex;gap:8px;flex-wrap:wrap;padding:18px 28px 0;font-size:11px;}
.composer-status > span {border-radius:7px;background:var(--panel-2);padding:6px 9px;color:var(--muted);}
.composer-status .diag-ok {color:var(--success);}
.composer-status :is(.diag-warning,.diag-danger) {color:var(--warning);}
.composer-moderation {margin:24px 28px;padding:18px;border:1px solid var(--line);border-radius:12px;background:var(--panel-2);min-width:0;}
.composer-moderation legend {font-size:12px;font-weight:600;padding:0 8px;}
/* Collection editor: artwork, identity, access and tags. */
:root[data-theme] .collection-dialog {width:min(760px,100%);}
.collection-body {padding:28px;display:grid;gap:26px;min-height:0;flex:1;overflow:auto;overscroll-behavior:contain;}
.collection-identity {display:grid;grid-template-columns:160px minmax(0,1fr);gap:24px;align-items:start;}
.collection-artwork {min-width:0;}
.collection-cover {position:relative;cursor:pointer;}
.collection-art {width:100%;aspect-ratio:1;background:var(--hero);color:var(--hero-accent);border:1px solid var(--line);border-radius:12px;overflow:hidden;display:grid;place-items:center;font-size:48px;}
.collection-art img {width:100%;height:100%;object-fit:cover;}
.collection-cover > input {position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;}
.collection-cover > span {display:flex;gap:8px;justify-content:center;align-items:center;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--panel-2);font-size:11px;font-weight:500;}
.collection-cover svg {width:15px;height:15px;}
.collection-cover:focus-within {outline:2px solid var(--accent);outline-offset:3px;border-radius:12px;}
.collection-artwork > p {font-size:10px;color:var(--muted);line-height:1.6;margin:10px 0 0;overflow-wrap:anywhere;}
.collection-inputs {display:grid;gap:18px;min-width:0;}
.composer-counter {display:flex;gap:10px;justify-content:space-between;color:var(--muted);font-weight:400;}
.composer-counter :is(b,small) {font-size:11px;font-weight:400;}
.collection-access {margin:0;padding:0;border:0;min-width:0;}
.collection-access legend {font-size:13px;font-weight:600;margin-bottom:12px;}
.collection-access > div {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
.collection-access button {display:flex;gap:8px;align-items:center;justify-content:center;min-height:46px;padding:10px;border:1px solid var(--line);border-radius:9px;background:var(--panel-2);color:var(--muted);font-size:12px;}
.collection-access svg {width:16px;height:16px;flex-shrink:0;}
.collection-access button[aria-pressed=true] {background:var(--active-bg);border-color:var(--accent);color:var(--accent);}
.collection-access p {font-size:11px;line-height:1.6;color:var(--muted);margin:12px 0 0;}
.collection-access p strong {display:none;}
.collection-copy-note {padding:12px;background:var(--active-bg);color:var(--accent);border:1px solid var(--line);border-radius:10px;font-size:12px;line-height:1.6;margin:0;}
/* Every collection cover is a square, including collages with two or three sources. */
:root[data-theme] .automatic-cover-button {display:block;width:100%;height:auto;aspect-ratio:1;padding:0;}
:root[data-theme] .automatic-cover.home-mix-art {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));width:100%;height:100%;aspect-ratio:1;max-height:none;}
:root[data-theme] .home-mix-art > img {width:100%;height:100%;min-height:0;object-fit:cover;}
:root[data-theme] .home-mix-art > img:only-of-type {grid-column:1/-1;grid-row:1/-1;}
:root[data-theme] .home-mix-art > .home-cover-fallback {grid-column:1/-1;grid-row:1/-1;width:100%;height:100%;}
/* Radio uses its own geometry rather than the normal player's mobile grid. */
:root[data-theme] #radioDock {left:0;right:0;bottom:0;width:auto;display:grid;grid-template-areas:'track controls actions';grid-template-columns:minmax(0,1fr) 180px minmax(0,1fr);gap:20px;align-items:center;padding:14px 24px;min-height:92px;transform:none;}
:root[data-theme] #radioDock .radio-dock-track {grid-area:track;justify-self:start;display:flex;align-items:center;justify-content:flex-start;gap:14px;min-width:0;width:100%;height:auto;margin:0;padding:0;border:0;background:none;text-align:left;color:var(--text);}
#radioDock .radio-dock-track img {width:58px;height:58px;aspect-ratio:1;object-fit:cover;flex-shrink:0;margin:0;border-radius:9px;}
#radioDock .radio-dock-track > span {display:grid;gap:3px;min-width:0;}
#radioDock .radio-dock-track :is(strong,small,span[data-radio-artist]) {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#radioDock .radio-dock-track strong {font-size:14px;}
#radioDock .radio-dock-track small {font-size:10px;color:var(--accent);}
#radioDock [data-radio-artist] {font-size:12px;color:var(--muted);}
#radioDock .player-center {grid-area:controls;position:static;}
#radioDock .player-actions {grid-area:actions;position:static;display:flex;justify-self:end;justify-content:flex-end;}
:root[data-theme] #radioDock .radio-dock-toggle {display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--accent)!important;color:var(--on-accent)!important;}
.radio-stage {position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:clamp(32px,5vw,80px);width:min(1200px,calc(100% - 80px));min-height:calc(100dvh / .99 - 86px);margin:0 auto;padding:40px 0 80px;}
:root[data-theme] #radioFullscreen .fullscreen-player-cover {position:relative;width:100%;max-width:540px;height:auto;min-height:0;aspect-ratio:1;align-self:start;justify-self:center;margin:0;transform:none;border-radius:22px;}
#radioFullscreen .fullscreen-player-cover > img {position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;margin:0;}
#radioFullscreen .fullscreen-player-content {min-width:0;width:100%;margin:0;align-self:start;gap:24px;}
:root[data-theme] #radioFullscreen .fullscreen-track-copy h2 {font-size:clamp(30px,3.6vw,52px);line-height:1.1;letter-spacing:-1.5px;overflow-wrap:anywhere;margin:12px 0;}
#radioFullscreen .fullscreen-track-copy > p:last-child {font-size:16px;line-height:1.6;color:var(--muted);}
#radioFullscreen .fullscreen-controls {justify-content:flex-start;}
#radioFullscreen .fullscreen-player-actions {justify-content:flex-start;}
/* Lower player panel: track identity, credits, story and original songs. */
:root[data-theme] #fullscreenTrackDetails {width:min(1200px,calc(100% - 64px));padding:32px;margin:36px auto 72px;border:1px solid rgb(var(--fullscreen-accent) / .24);border-radius:22px;background:var(--panel);box-shadow:none;color:var(--text);}
.music-story-head {display:block!important;margin-bottom:28px!important;}
.music-story-head h2 {font-size:32px;font-weight:600;letter-spacing:-1px;margin-top:7px!important;}
.music-story-identity {display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:18px;align-items:center;padding-bottom:26px;border-bottom:1px solid var(--line);}
.music-story-thumbnail {position:relative;width:72px;height:72px;aspect-ratio:1;border-radius:12px;overflow:hidden;}
.music-story-thumbnail > img.cover-image {position:static;inset:auto;display:block;width:100%;height:100%;object-fit:cover;}
.music-story-identity .eyebrow {font-size:10px;margin-bottom:7px!important;}
:root[data-theme] #fullscreenPlayer .music-story-title {display:block;padding:0;border:0;border-radius:0;background:none;color:var(--text);text-align:left;font-size:21px;line-height:1.4;font-weight:600;overflow-wrap:anywhere;}
:root[data-theme] #fullscreenPlayer .music-story-author {display:inline-flex;align-items:center;gap:7px;padding:0;margin-top:7px;border:0;border-radius:0;background:none;color:rgb(var(--fullscreen-accent));font-size:13px;text-align:left;}
.music-story-author svg {width:14px;height:14px;}
.music-story-stats {display:flex;gap:30px;margin:0;max-width:340px;}
.music-story-stats > div {min-width:0;flex:1;}
.music-story-stats dd {overflow-wrap:anywhere;line-height:1.45;}
.music-story-author {max-width:100%;overflow-wrap:anywhere;white-space:normal;}
#radioFullscreen .fullscreen-track-copy p {overflow-wrap:anywhere;}
.music-story-stats dt {color:var(--muted);font-size:11px;margin-bottom:7px;}
.music-story-stats dd {font-size:16px;font-weight:550;margin:0;}
.music-story-columns {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;padding-top:28px;}
.music-story-columns h3 {font-size:16px;font-weight:600;margin-bottom:16px!important;}
.music-story-description > p {color:var(--soft);font-size:14px;line-height:1.8;white-space:pre-line;overflow-wrap:anywhere;}
.music-story-tags {display:flex;flex-wrap:wrap;gap:7px;margin-top:22px;}
.music-story-tags span {max-width:100%;padding:6px 10px;font-size:11px;border-radius:7px;color:rgb(var(--fullscreen-accent));background:rgb(var(--fullscreen-tone) / .2);border:1px solid rgb(var(--fullscreen-accent) / .24);overflow-wrap:anywhere;}
.music-story-sources {display:grid;gap:8px;}
.music-story-source {display:grid;grid-template-columns:24px minmax(0,1fr) 16px;align-items:center;gap:10px;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--panel-2);text-decoration:none;color:var(--text);}
.music-story-source > svg {width:20px;height:20px;color:rgb(var(--fullscreen-accent));}
.music-story-source > svg:last-child {width:15px;height:15px;}
.music-story-source strong,.music-story-source small {display:block;overflow-wrap:anywhere;}
.music-story-source strong {font-size:13px;font-weight:550;line-height:1.5;}
.music-story-source small {font-size:11px;color:var(--muted);margin-top:4px;}
.music-story-empty {color:var(--muted);font-size:13px;line-height:1.6;}
@media(max-width:1050px) {
  .composer-layout {grid-template-columns:minmax(0,1fr);}
  .composer-preview {position:static;display:none;}
  .auth-v4-story {padding:32px;}
  .auth-v4-panel {padding:32px;}
}
@media(max-width:760px) {
  :root[data-theme] :is(#view-auth,#view-register) {margin-top:0;}
  .auth-v4 {grid-template-columns:minmax(0,1fr);border-radius:18px;}
  .auth-v4-story {display:none;}
  .auth-v4-panel {padding:28px 24px;}
  .auth-v4-panel h1 {font-size:28px;}
  .composer-page-head h1 {font-size:30px;}
  .composer-section,.composer-publish {padding:22px;}
  .composer-fields {grid-template-columns:minmax(0,1fr);}
  :root[data-theme] :is(.composer-dialog,.collection-dialog) {max-height:calc(100dvh / .99 - 20px);border-radius:16px;}
  .composer-dialog-head {padding:20px;}
  .composer-dialog-head h2 {font-size:23px;}
  .composer-dialog-actions {padding:16px 20px;}
  .composer-dialog-actions .primary-btn {flex:1;}
  .composer-dialog-body .composer-section {padding:20px;}
  .composer-status {padding:16px 20px 0;}
  .composer-moderation {margin:20px;}
  .collection-body {padding:20px;gap:22px;}
  .collection-identity {grid-template-columns:minmax(0,1fr);gap:22px;}
  .collection-artwork {width:150px;justify-self:center;}
  .collection-access button {flex-direction:column;font-size:11px;padding:10px 6px;gap:6px;}
  .radio-stage {grid-template-columns:minmax(0,1fr);width:calc(100% - 36px);padding:12px 0 40px;gap:24px;}
  :root[data-theme] #radioFullscreen .fullscreen-player-cover {width:min(72vw,300px);border-radius:18px;}
  #radioFullscreen .fullscreen-player-content {text-align:center;}
  #radioFullscreen .fullscreen-controls,#radioFullscreen .fullscreen-player-actions {justify-content:center;}
  :root[data-theme] #radioFullscreen .fullscreen-track-copy h2 {font-size:30px;letter-spacing:-.8px;}
  .music-story-identity {grid-template-columns:56px minmax(0,1fr);gap:14px;}
  .music-story-thumbnail {width:56px;height:56px;}
  .music-story-stats {grid-column:1/-1;justify-content:space-between;gap:18px;}
  .music-story-columns {grid-template-columns:minmax(0,1fr);gap:28px;}
  :root[data-theme] #fullscreenTrackDetails {width:calc(100% - 32px);padding:22px;border-radius:18px;}
  .music-story-head h2 {font-size:26px;}
  :root[data-theme] #fullscreenPlayer .music-story-title {font-size:18px;}
  :root[data-theme] #radioDock {bottom:58px;padding:10px 14px;min-height:80px;grid-template-columns:minmax(0,1fr) 42px 30px;gap:8px;}
  #radioDock .radio-dock-track {gap:10px;}
  #radioDock .radio-dock-track img {width:44px;height:44px;}
  #radioDock .radio-dock-track strong {font-size:12px;}
  #radioDock .radio-dock-track small {font-size:9px;}
  #radioDock .radio-dock-track [data-radio-artist] {font-size:10px;}
  #radioDock :is(.radio-dock-volume,.radio-live-caption,.player-actions > [data-radio-expand]) {display:none;}
  #radioDock .player-actions > #radioClose {display:grid;place-items:center;width:30px;height:34px;}
}
@media(max-width:430px) {
  .composer-files {grid-template-columns:minmax(0,1fr);}
  :root[data-theme] .composer-file {min-height:150px;}
  .composer-actions {flex-direction:column-reverse;}
  .composer-actions > button {width:100%;}
  .composer-inline {grid-template-columns:minmax(0,1fr);}
}

/* Chart and discovery: shared search tools, compact navigation, readable rankings. */
.chart-v5-hero { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:40px; padding:36px; margin:16px 0 26px; border:1px solid var(--line); border-radius:24px; background:var(--hero); }
:root[data-theme] .chart-v5-hero h1 { margin:12px 0 16px; font-size:clamp(44px,6vw,80px); line-height:1; letter-spacing:-3px; }
:root[data-theme] .chart-v5-hero h1 em { color:var(--accent); font-style:normal; }
.chart-v5-hero p { color:var(--muted); line-height:1.65; margin:0; }
.chart-v5-hero aside { display:flex; flex-direction:column; justify-content:center; gap:16px; border-left:1px solid var(--line); padding-left:32px; }
.chart-v5-hero aside strong { font-size:21px; line-height:1.4; }
.chart-v5-hero aside > span:last-child { font-size:13px; color:var(--muted); }
.chart-v5-buttons,.chart-v5-toolbar,.discovery-list-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.chart-v5-buttons { margin-top:26px; }
.chart-v5-buttons button,.chart-v5-toolbar button,.discovery-list-actions button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; }
.chart-v5-toolbar { justify-content:space-between; padding:0 2px; margin-bottom:18px; }
.chart-v5-toolbar p { margin:0; color:var(--muted); font-size:13px; }
.chart-v5-table-head { display:grid; grid-template-columns:minmax(0,1fr) 100px 106px 84px; gap:16px; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.06em; padding:0 18px 12px; }
.chart-v5-list { border:1px solid var(--line); border-radius:18px; overflow:hidden; background:var(--panel); }
.chart-v5-row { display:grid; grid-template-columns:42px 64px minmax(0,1fr) 100px 106px 84px; align-items:center; gap:16px; padding:18px; border-bottom:1px solid var(--line); }
.chart-v5-row:last-child { border-bottom:0; }
.chart-v5-row:hover,.chart-v5-row.is-current { background:var(--panel-2); }
.chart-v5-rank { font-size:21px; color:var(--muted); font-weight:600; font-variant-numeric:tabular-nums; }
.chart-v5-row:nth-child(-n+3) .chart-v5-rank { color:var(--accent); }
.chart-v5-cover { position:relative; width:64px; height:64px; border:0; border-radius:12px; overflow:hidden; display:grid; place-items:center; cursor:pointer; color:#fff; background:var(--panel-3); }
.chart-v5-cover .cover-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.chart-v5-cover > span { position:absolute; inset:0; display:grid; place-items:center; background:#0003; }
.chart-v5-cover:hover > span { background:#0007; }
.chart-v5-cover svg { width:22px; height:22px; }
.chart-v5-copy { display:grid; gap:5px; min-width:0; }
.chart-v5-copy > button { width:fit-content; max-width:100%; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chart-v5-copy .link-title { font-size:16px; font-weight:650; }
.chart-v5-copy .muted-link { font-size:13px; }
.chart-v5-copy small { font-size:11px; color:var(--muted); }
.chart-v5-movement { display:inline-flex; align-items:center; gap:5px; font-size:13px; font-weight:650; font-variant-numeric:tabular-nums; }
.chart-v5-movement svg { width:15px; height:15px; }
.chart-v5-movement.up { color:var(--success); }
.chart-v5-movement.down { color:var(--danger); }
.chart-v5-movement.entered { color:var(--accent); font-size:11px; border-radius:20px; padding:6px 8px; background:var(--active-bg); }
.chart-v5-movement.steady,.chart-v5-movement.unknown { color:var(--muted); }
.chart-v5-plays { display:grid; gap:5px; font-variant-numeric:tabular-nums; }
.chart-v5-plays strong { font-size:16px; }
.chart-v5-plays small { font-size:11px; color:var(--muted); }
.chart-v5-actions { display:flex; gap:4px; }
.chart-v5-actions button { width:40px; height:40px; border:1px solid var(--line); border-radius:10px; background:transparent; color:var(--muted); }
.chart-v5-actions button.liked { color:var(--accent); }
.chart-v5-explanation,.discovery-overview { margin-top:22px; padding:20px 24px; border:1px solid var(--line); border-radius:16px; background:var(--panel); }
.chart-v5-explanation summary,.discovery-overview > summary { cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px; font-weight:600; }
.chart-v5-explanation p { color:var(--muted); font-size:13px; line-height:1.7; max-width:850px; }
.discovery-notice { padding:14px 18px; background:var(--active-bg); color:var(--text); border-radius:12px; font-size:13px; }
.discovery-empty { padding:44px 20px; display:grid; place-items:center; gap:12px; text-align:center; }
.discovery-empty > svg { width:32px; height:32px; color:var(--accent); }
.discovery-empty h2 { font-size:20px; margin:0; }
.discovery-empty p { color:var(--muted); margin:0; line-height:1.6; }
:root[data-theme] .discovery-v5 .page-title { display:block; margin:20px 0 26px; }
:root[data-theme] .discovery-v5 .page-title h1 { font-size:clamp(30px,4vw,48px); letter-spacing:-1.4px; margin:8px 0 12px; }
:root[data-theme] .discovery-v5 .page-title p:not(.eyebrow) { max-width:720px; color:var(--muted); line-height:1.6; }
:root[data-theme] .discovery-v5 :is(.catalog-browser-tabs,.library-browser-tabs) { display:flex; flex-wrap:wrap; gap:8px; padding:0 0 18px; margin:0 0 22px; background:transparent; border:0; border-bottom:1px solid var(--line); border-radius:0; }
:root[data-theme] .discovery-v5 :is(.catalog-browser-tab,.library-browser-tab) { display:flex; align-items:center; justify-content:flex-start; width:auto; min-height:44px; padding:10px 16px; gap:8px; border:1px solid transparent; border-radius:12px; color:var(--muted); background:transparent; font-size:13px; }
:root[data-theme] .discovery-v5 :is(.catalog-browser-tab,.library-browser-tab).active { background:var(--active-bg); border-color:var(--line); color:var(--text); }
:root[data-theme] .discovery-v5 .library-browser-tab strong { min-width:22px; padding:3px 6px; background:var(--panel-3); color:var(--muted); border:0; border-radius:6px; font-size:11px; }
:root[data-theme] .discovery-v5 .library-browser { display:block; grid-template-columns:none; gap:0; border:0; background:transparent; }
:root[data-theme] .discovery-v5 .library-browser-panel { padding:0; background:transparent; border:0; box-shadow:none; }
:root[data-theme] .discovery-v5 .discovery-controls { margin:0 0 26px; padding:20px; border:1px solid var(--line); border-radius:18px; background:var(--panel); }
.discovery-main-controls { display:grid; grid-template-columns:minmax(0,1fr) 220px; gap:16px; align-items:end; }
.discovery-search-wrap { min-width:0; position:relative; }
.discovery-search-wrap .catalog-suggestions { position:absolute; left:0; right:0; }
.discovery-search { display:flex; align-items:center; gap:10px; margin:0; padding:0 14px; min-height:50px; background:var(--panel-2); border:1px solid var(--line); border-radius:12px; min-width:0; }
.discovery-search:focus-within { border-color:var(--accent); box-shadow:0 0 0 2px var(--active-bg); }
.discovery-search > svg { width:19px; height:19px; flex-shrink:0; color:var(--muted); }
:root[data-theme] .discovery-v5 .discovery-search :is(#catalogQueryInput,#librarySearchInput,#catalogAuthorQueryInput,#catalogPlaylistQueryInput) { padding:13px 0; min-width:0; width:100%; border:0; background:transparent; color:var(--text); box-shadow:none; outline:none; font-size:14px; }
.discovery-clear { display:grid; place-items:center; flex-shrink:0; width:30px; height:30px; border:0; border-radius:8px; background:transparent; color:var(--muted); cursor:pointer; }
.discovery-clear:hover { background:var(--panel-3); color:var(--text); }
.discovery-clear svg { width:16px; height:16px; }
.discovery-search input::-webkit-search-cancel-button { display:none; }
:root[data-theme] .discovery-v5 .sort-control { display:grid; gap:7px; font-size:11px; font-weight:600; color:var(--muted); min-width:0; }
:root[data-theme] :is(#view-catalog,#view-library) .sort-control :is(select,input) { min-width:0; width:100%; min-height:50px; background:var(--panel-2); color:var(--text); border:1px solid var(--line); border-radius:12px; padding:12px 14px; font-size:13px; }
.discovery-filters { margin-top:14px; }
.discovery-filters > summary { cursor:pointer; list-style:none; display:flex; align-items:center; gap:8px; width:fit-content; min-height:40px; font-size:13px; color:var(--muted); }
.discovery-filters > summary b:empty { display:none; }
.discovery-filters > summary b { border-radius:5px; background:var(--active-bg); color:var(--accent); padding:2px 6px; }
.discovery-filters > summary svg { width:16px; height:16px; }
.discovery-filter-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; padding:12px 0 8px; }
.discovery-filter-footer { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.discovery-filter-footer:has(.catalog-active-filters:empty) { display:none; }
.discovery-simple-controls { display:grid; grid-template-columns:minmax(0,1fr) minmax(200px,340px); gap:16px; align-items:end; }
.discovery-simple-controls .catalog-filter-grid { margin:0; gap:12px; }
:root[data-theme] .discovery-v5 .catalog-suggestions { top:calc(100% + 7px); z-index:12; box-shadow:var(--shadow); max-height:320px; overflow:auto; }
:root[data-theme] .discovery-v5 .section-heading { margin-bottom:16px; }
.discovery-list-actions { margin-bottom:18px; }
:root[data-theme] .discovery-v5 .track-row { padding:14px; border:1px solid var(--line); background:var(--panel); border-radius:12px; margin-bottom:7px; min-width:0; }
:root[data-theme] .discovery-v5 .track-row > div:not(.row-actions) { min-width:0; }
:root[data-theme] .discovery-v5 .track-row .row-title { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; text-align:left; }
:root[data-theme] .discovery-v5 .following-row { border:1px solid var(--line); border-radius:14px; background:var(--panel); padding:16px; }
:root[data-theme] .discovery-v5 .library-playlist-card { background:var(--panel); border-radius:16px; box-shadow:none; }
.discovery-overview .content-section { border:0; padding:16px 0; margin:0; box-shadow:none; background:transparent; }
@media(max-width:1000px) {
  .chart-v5-hero { grid-template-columns:minmax(0,1fr) 230px; gap:24px; padding:28px; }
  .chart-v5-row { grid-template-columns:32px 56px minmax(0,1fr) 76px 68px 40px; gap:12px; padding:14px; }
  .chart-v5-cover { width:56px; height:56px; }
  .chart-v5-actions button:last-child { display:none; }
  .chart-v5-table-head { grid-template-columns:minmax(0,1fr) 76px 68px 40px; gap:12px; font-size:9px; }
  .discovery-filter-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:680px) {
  .chart-v5-hero { grid-template-columns:1fr; padding:24px; gap:24px; border-radius:18px; margin-top:8px; }
  :root[data-theme] .chart-v5-hero h1 { font-size:58px; }
  .chart-v5-hero aside { border-left:0; border-top:1px solid var(--line); padding:20px 0 0; gap:10px; }
  .chart-v5-hero aside p { display:none; }
  .chart-v5-hero aside strong { font-size:17px; }
  .chart-v5-toolbar { align-items:flex-start; gap:14px; }
  .chart-v5-toolbar p { flex:1; min-width:140px; line-height:1.5; }
  .chart-v5-table-head { display:none; }
  .chart-v5-row { grid-template-columns:25px 48px minmax(0,1fr) 42px; gap:10px; padding:14px 10px; }
  .chart-v5-rank { font-size:17px; grid-row:1 / 3; }
  .chart-v5-cover { width:48px; height:48px; grid-row:1 / 3; }
  .chart-v5-copy { grid-column:3; grid-row:1; }
  .chart-v5-copy small { display:none; }
  .chart-v5-copy .link-title { font-size:14px; }
  .chart-v5-copy .muted-link { font-size:12px; }
  .chart-v5-actions { grid-column:4; grid-row:1 / 3; }
  .chart-v5-dynamic { grid-column:3; grid-row:2; min-width:0; width:fit-content; }
  .chart-v5-plays { grid-column:3; grid-row:2; display:flex; align-items:center; justify-self:end; gap:5px; margin-left:72px; }
  .chart-v5-plays strong { font-size:12px; }
  .chart-v5-plays small { font-size:10px; white-space:nowrap; }
  .chart-v5-explanation,.discovery-overview { padding:18px; }
  .discovery-main-controls,.discovery-simple-controls { grid-template-columns:1fr; gap:12px; }
  :root[data-theme] .discovery-v5 .discovery-controls { padding:14px; }
  .discovery-filter-grid { grid-template-columns:1fr; gap:12px; }
  :root[data-theme] .discovery-v5 :is(.catalog-browser-tabs,.library-browser-tabs) { flex-wrap:nowrap; overflow:auto; scrollbar-width:thin; padding-bottom:12px; gap:6px; }
  :root[data-theme] .discovery-v5 :is(.catalog-browser-tab,.library-browser-tab) { flex-shrink:0; padding:10px 12px; font-size:12px; }
  :root[data-theme] .discovery-v5 .track-row { grid-template-columns:44px minmax(0,1fr) auto; gap:10px; padding:12px; }
  :root[data-theme] .discovery-v5 .track-row > .genre,:root[data-theme] .discovery-v5 .track-row > .duration { display:none; }
  :root[data-theme] .discovery-v5 .row-actions { gap:2px; }
  :root[data-theme] .discovery-v5 .row-actions button { width:30px; height:36px; }
  :root[data-theme] .discovery-v5 .row-actions button:last-child { display:none; }
  :root[data-theme] .discovery-v5 .track-row .row-play { width:44px; height:44px; }
  :root[data-theme] .discovery-v5 .track-row > div > span { display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}
@media(max-width:360px) {
  .chart-v5-plays { grid-row:3; justify-self:start; margin-left:0; }
  .chart-v5-rank,.chart-v5-cover,.chart-v5-actions { grid-row:1 / 4; }
}


/* Shared taxonomy and private complaint workflow. */
.taxonomy-selected-v6 {display:inline-flex;align-items:center;gap:9px;padding:8px 10px;border:1px solid var(--line);border-radius:12px;background:var(--panel);max-width:100%;font-size:13px;}
.taxonomy-selected-v6 > span {overflow-wrap:anywhere;}
.taxonomy-selected-v6 strong {font-size:10px;color:var(--accent);}
.taxonomy-selected-v6 button {border:0;background:var(--active-bg);color:var(--accent);border-radius:7px;padding:5px;cursor:pointer;flex-shrink:0;font-size:11px;}
.taxonomy-selected-v6 button:last-child {display:grid;place-items:center;width:26px;height:26px;}
.taxonomy-selected-v6 svg {width:14px;height:14px;}
#uploadTaxonomyOptions .tag-option {justify-content:space-between;}
#uploadTaxonomyOptions .tag-option > span {overflow-wrap:anywhere;}
#uploadTaxonomyOptions .tag-option small {display:block;margin-top:3px;color:var(--accent);font-size:10px;}
.taxonomy-more {grid-column:1/-1;width:100%;margin:10px 0;}
.metadata-v6-head {display:flex;justify-content:space-between;gap:16px;align-items:center;}
.metadata-v6-head h3 {font-size:14px;margin:0;}
.metadata-v6-head button {font-size:12px;white-space:normal;}
.metadata-suggestions:has(.metadata-v6-head) {margin-top:16px;padding:18px;border:1px solid var(--line);border-radius:14px;background:var(--panel-soft,var(--panel));}
.metadata-v6-chips {display:flex;gap:7px;flex-wrap:wrap;}
.metadata-v6-chips > span {font-size:12px;padding:5px 8px;border-radius:7px;background:var(--active-bg);color:var(--accent);overflow-wrap:anywhere;}
.composer-field > span > small {font-size:11px;color:var(--muted);font-weight:400;}
.report-v6-dialog {width:min(680px,calc(100vw - 36px));max-height:calc(100dvh - 40px);display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:20px;box-shadow:0 24px 100px #0004;color:var(--text);overflow:hidden;}
.report-v6-dialog .composer-dialog-head {flex-shrink:0;}
.report-v6-dialog .composer-dialog-head p:not(.eyebrow) {margin:8px 0 0;color:var(--muted);font-size:13px;line-height:1.5;}
.report-v6-body {overflow-y:auto;padding:24px;display:grid;gap:18px;min-height:0;}
.report-v6-body label {display:grid;gap:9px;color:var(--text);font-size:13px;font-weight:600;min-width:0;}
.report-v6-body :is(input,select,textarea) {width:100%;min-width:0;border:1px solid var(--line);border-radius:10px;padding:12px;background:var(--input-bg,var(--panel));color:var(--text);font:inherit;outline:none;}
.report-v6-body :is(input,select,textarea):focus {border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 15%,transparent);}
.report-v6-body textarea {resize:vertical;min-height:110px;line-height:1.6;}
.report-v6-body small {font-size:11px;color:var(--muted);font-weight:400;line-height:1.6;}
.report-v6-note {font-size:13px;line-height:1.7;background:var(--active-bg);border-radius:12px;padding:14px 16px;margin:0;overflow-wrap:anywhere;}
.report-form-error {color:var(--danger);font-size:13px;line-height:1.6;margin:0;}
.report-form-error:empty {display:none;}
.report-ticket {padding:18px;border:1px solid var(--line);border-radius:14px;overflow-wrap:anywhere;}
.report-ticket header {display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:12px;}
.report-ticket h3 {margin:14px 0 8px;font-size:17px;}
.report-ticket p {margin:8px 0;font-size:13px;line-height:1.7;white-space:pre-wrap;}
.report-ticket-status {padding:5px 8px;border-radius:7px;background:var(--active-bg);color:var(--accent);font-size:11px;}
.report-ticket-status.is-upheld {color:var(--success);}
.report-ticket-status.is-dismissed {color:var(--muted);}
.report-resolution {margin-top:14px;border-top:1px solid var(--line);padding-top:14px;}
.report-resolution strong {font-size:12px;}
#view-library [data-open-my-reports] {margin:12px 0 6px;}
#reportModal .composer-dialog-actions {flex-wrap:wrap;}
#reportModal [data-open-my-reports] {margin-right:auto;}
@media(max-width:600px) {
  .report-v6-dialog {width:calc(100vw - 20px);max-height:calc(100dvh - 24px);border-radius:16px;}
  .report-v6-body {padding:18px;gap:16px;}
  .report-v6-dialog .composer-dialog-head {padding:18px;}
  .report-v6-dialog .composer-dialog-actions {padding:14px 18px;}
  #reportModal .composer-dialog-actions > button {flex:1;}
  #reportModal .composer-dialog-actions > [data-open-my-reports] {flex-basis:100%;}
  .metadata-v6-head {align-items:flex-start;}
  .taxonomy-selected-v6 {gap:6px;}
}

/* Projects: one visual language for members, applicants and moderation. */
.projects-hero{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:16px 0 32px}.projects-hero h1{font-size:clamp(32px,5vw,54px);margin:8px 0 14px;letter-spacing:-.045em}.projects-hero p{max-width:660px;color:var(--muted);line-height:1.65}.projects-hero>span{display:grid;place-items:center;width:86px;height:86px;border-radius:26px;background:var(--panel);color:var(--accent);border:1px solid var(--line)}.projects-hero>span svg{width:38px;height:38px}#projectsContent{display:grid;gap:40px}.project-summary{display:flex;gap:28px;flex-wrap:wrap;padding:20px 24px;border:1px solid var(--line);background:var(--panel);border-radius:18px}.project-summary span{color:var(--muted);font-size:14px}.project-summary b{color:var(--text);font-size:24px;margin-right:6px}.project-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));gap:18px}.project-card,.project-request{padding:24px;background:var(--panel);border:1px solid var(--line);border-radius:20px;min-width:0;display:flex;flex-direction:column;gap:14px}.project-card header,.project-request header{display:flex;align-items:center;justify-content:space-between;gap:14px}.project-card header{justify-content:flex-start}.project-card h3,.project-request h3{margin:0;font-size:21px}.project-card header span:not(.project-monogram){color:var(--muted);font-size:13px}.project-monogram{display:grid;place-items:center;width:50px;height:50px;border-radius:16px;flex-shrink:0;background:var(--panel-2);color:var(--accent);font-weight:750}.project-card p,.project-request p{margin:0;line-height:1.6;color:var(--muted);font-size:14px}.project-request .eyebrow{font-size:10px;margin-bottom:7px}.project-request .link-title{font-size:20px;text-align:left}.project-request header>div{min-width:0}.project-status{padding:6px 9px;border-radius:8px;background:var(--panel-2);color:var(--muted);font-size:11px;white-space:nowrap}.status-pending,.status-needs-info{color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}.status-approved{color:var(--text)}.status-disputed,.status-rejected{color:var(--danger,#c25746);background:color-mix(in srgb,var(--danger,#c25746) 10%,transparent)}.project-actions,.project-request footer,.project-form-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.project-request footer{margin-top:auto;padding-top:10px}.project-request footer small{margin-left:auto;color:var(--muted);font-size:11px}.project-actions button,.project-request footer button{font-size:12px;padding:9px 12px}.project-card details,.project-request details,.project-audit{border-top:1px solid var(--line);padding-top:12px;font-size:13px}.project-card summary,.project-request summary,.project-audit summary{cursor:pointer;font-weight:650;padding:3px 0 8px}.project-team>div{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0}.project-team strong,.project-team small{display:block}.project-team small{color:var(--muted);margin-top:4px;font-size:12px}.project-code{display:grid;gap:8px;padding:14px;border-radius:12px;background:var(--panel-2);font-size:12px;color:var(--muted);line-height:1.6}.project-code code{letter-spacing:1px;color:var(--text);font-size:17px;font-weight:700}.project-request a{color:var(--accent);overflow-wrap:anywhere}.project-request ul{padding-left:18px;margin:7px 0}.project-request li{margin:8px 0}.project-message,.project-review-links{white-space:pre-wrap;overflow-wrap:anywhere}.project-thread p{display:grid;gap:5px;padding:12px 0;border-top:1px solid var(--line)}.project-thread p small{font-size:11px}.project-thread p strong{color:var(--text)}.project-warning,.project-note{padding:14px;background:var(--panel-2);border-radius:12px;line-height:1.6;font-size:13px;color:var(--muted)}.project-filters{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 24px}.project-filters .active{color:var(--accent);border-color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,var(--panel))}.project-empty{padding:20px;color:var(--muted)}.project-audit{margin-top:24px}.project-audit article{padding:16px 0;border-bottom:1px solid var(--line)}.project-audit-line{display:grid;gap:3px;padding:8px 0}.project-audit-line small{color:var(--muted);font-size:11px}
#authorshipModal .modal{width:min(680px,calc(100vw - 32px));max-height:calc(100dvh - 48px);overflow:auto;padding:28px;border-radius:24px}#authorshipModal .queue-head{margin-bottom:24px}#authorshipModal form{display:grid;gap:22px}#authorshipModal label{display:grid;gap:8px;font-size:13px;font-weight:650}#authorshipModal label small{font-weight:400;color:var(--muted)}#authorshipModal input:not([type=checkbox]),#authorshipModal select,#authorshipModal textarea{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--panel-2);color:var(--text);font:inherit;box-sizing:border-box}#authorshipModal textarea{resize:vertical;min-height:90px}#authorshipModal select[multiple]{min-height:130px}#authorshipModal fieldset{border:0;padding:0;margin:0;display:grid;gap:20px;min-width:0}#authorshipModal fieldset[hidden]{display:none}#authorshipModal legend{font-size:23px;font-weight:720;letter-spacing:-.025em;margin-bottom:14px}#authorshipModal p{font-size:14px;line-height:1.65;color:var(--muted);margin:0}.claim-steps{padding:0;margin:0;list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;counter-reset:step}.claim-steps li{counter-increment:step;color:var(--muted);font-size:12px;border-bottom:2px solid var(--line);padding-bottom:12px;line-height:1.5}.claim-steps li:before{content:counter(step) " / ";font-weight:750}.claim-steps li.active{color:var(--accent);border-color:var(--accent)}#authorshipModal .project-form-actions{justify-content:flex-end;padding-top:14px;border-top:1px solid var(--line)}#authorshipModal .project-check{display:flex;align-items:flex-start;gap:12px;font-weight:400;line-height:1.6}#authorshipModal .project-check input{width:18px;height:18px;flex-shrink:0;margin-top:2px;accent-color:var(--accent)}.project-badge{display:inline-flex;align-items:center;gap:6px;color:var(--accent);font-size:12px;margin-top:10px}.project-badge svg{width:15px;height:15px}
@media(max-width:700px){.projects-hero>span{display:none}.project-card,.project-request{padding:18px}.project-request header{align-items:flex-start}.project-summary{gap:14px;padding:16px}.project-summary b{font-size:20px}.project-summary span{font-size:12px}#authorshipModal .modal{padding:20px;max-height:calc(100dvh - 24px)}.claim-steps{gap:7px}.claim-steps li{font-size:11px}}

/* Motion audit: navigation enters once, interactions stay local, loading stays visible.
   Player surfaces are explicitly excluded and retain their previous motion. */
:root{--motion-fast:140ms;--motion-normal:220ms;--motion-enter:280ms;--motion-ease:cubic-bezier(.2,.75,.25,1)}
:root[data-theme] .app-shell :where(*):not(:where(.player,.player *,#fullscreenPlayer,#fullscreenPlayer *,#queuePanel,#queuePanel *,#view-radio,#view-radio *,#discordBotPlayer,#discordBotPlayer *)){animation:none;transition:none!important}
:root[data-theme] .app-shell :where(button,a,input,textarea,select,summary):not(:where(.player * ,#fullscreenPlayer *,#queuePanel *,#view-radio *,#discordBotPlayer *)){
  transition:color var(--motion-fast) ease,background-color var(--motion-fast) ease,border-color var(--motion-fast) ease,box-shadow var(--motion-fast) ease,opacity var(--motion-fast) ease,transform var(--motion-fast) var(--motion-ease)!important
}
:root[data-theme] .app-shell :where(.track-card,.playlist-card,.collection-card,.author-card,.project-card){transition:border-color var(--motion-fast) ease,box-shadow var(--motion-normal) ease,background-color var(--motion-fast) ease!important}
:root[data-theme] .app-shell :where(.nav-item,.library-browser-tab,.catalog-browser-tab,.ghost-btn,.primary-btn):not(:where(.player *,#fullscreenPlayer *,#queuePanel *,#view-radio *,#discordBotPlayer *)):active{transform:translateY(1px)}
:root[data-theme] .app-shell :where(input,textarea,select):focus-visible,#authorshipModal :where(input,textarea,select):focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 15%,transparent)}
:root[data-theme] .app-shell .view.motion-enter:not(#view-radio){animation:site-enter var(--motion-enter) var(--motion-ease) both}
.modal-backdrop:not(#fullscreenPlayer):not(#radioFullscreen):not([hidden]){animation:site-fade var(--motion-normal) ease both}
.modal-backdrop:not(#fullscreenPlayer):not(#radioFullscreen):not([hidden])>.modal{animation:site-dialog var(--motion-enter) var(--motion-ease) both}
.modal-backdrop.motion-exit{pointer-events:none;animation:site-fade var(--motion-fast) ease reverse both}.modal-backdrop.motion-exit>.modal{animation:site-dialog var(--motion-fast) var(--motion-ease) reverse both}
:root[data-theme] .app-shell :where(.catalog-suggestions,.manage-actions-menu[open]>div,.notification-popover):not([hidden]){animation:site-pop var(--motion-fast) var(--motion-ease) both}
:root[data-theme] .app-shell details[open]>:not(summary):not(:where(#view-radio *)){animation:site-fade var(--motion-normal) ease both}
:root[data-theme] .app-shell .is-refreshing svg,:root[data-theme] .app-shell [aria-busy=true]>.loading-spinner{animation:site-spin 900ms linear infinite}
:root[data-theme] .app-shell .upload-progress-bar{transition:width var(--motion-normal) ease!important}
.toast{animation:site-pop var(--motion-normal) var(--motion-ease) both}.toast.motion-exit{animation:site-fade var(--motion-fast) ease reverse both}
@keyframes site-enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes site-fade{from{opacity:0}to{opacity:1}}
@keyframes site-dialog{from{opacity:0;transform:translateY(12px) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes site-pop{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@keyframes site-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){:root[data-theme] .app-shell :where(*):not(:where(.player,.player *,#fullscreenPlayer,#fullscreenPlayer *,#queuePanel,#queuePanel *,#view-radio,#view-radio *,#discordBotPlayer,#discordBotPlayer *)),.modal-backdrop:not(#fullscreenPlayer):not(#radioFullscreen),.modal-backdrop:not(#fullscreenPlayer):not(#radioFullscreen)>.modal,.toast{animation:none!important;transition:none!important}:root[data-theme] .app-shell :where(button):active{transform:none}}
.modal-backdrop[hidden].motion-exit:not(#fullscreenPlayer):not(#radioFullscreen){display:flex!important;pointer-events:none}

.projects-hero>span svg{width:38px;height:38px}
@media(max-width:700px){.sidebar .nav-item:is([data-route="projects"],[data-route="discord"]){display:none!important}}

.projects-hero>svg{width:60px!important;height:60px!important;color:var(--accent);flex-shrink:0}
@media(max-width:700px){.projects-hero>svg{display:none}}

/* Android beta download */
.android-download { display:inline-flex;align-items:center;gap:10px; }
.sidebar-app-download { margin-top:20px;padding:13px 10px;border:1px solid var(--line);border-radius:14px;color:var(--soft);font-size:.8rem; }
.sidebar-app-download > .lucide { width:21px;height:21px;flex-shrink:0;color:var(--accent); }
.beta-badge { display:inline-flex;align-items:center;vertical-align:middle;padding:4px 7px;border-radius:7px;background:var(--panel-3);color:var(--text);font-size:.65rem;font-weight:700;line-height:1;white-space:nowrap; }
.android-download-card { display:flex;align-items:center;justify-content:space-between;gap:24px;padding:25px;border:1px solid var(--line);border-radius:22px;background:var(--panel); }
.android-download-card h2 { margin:7px 0;font-size:1.4rem; }
.android-download-card p { color:var(--soft); }
.android-download-card small { color:var(--muted); }
.android-download-card > a { flex-shrink:0; }
@media(max-width:900px) { .sidebar-app-download { display:none; } .android-download-card { flex-direction:column;align-items:stretch;padding:20px; } .android-download-card > a { justify-content:center; } }

/* Originals picker: one scroll region, calm surfaces and a separate selection list. */
:root[data-theme] #sourceSearchModal .source-finder-v8 {display:flex;flex-direction:column;width:min(920px,100%);max-height:calc(100dvh / .99 - 48px);overflow:hidden;border-radius:24px;background:var(--panel);}
#sourceSearchModal .source-finder-head {position:static;flex-shrink:0;align-items:flex-start;padding:26px 28px 22px;background:var(--panel);gap:16px;}
#sourceSearchModal .source-finder-title {display:flex;align-items:center;gap:16px;min-width:0;}
#sourceSearchModal .source-finder-symbol {width:44px;height:44px;padding:10px;flex:0 0 44px;border-radius:14px;background:var(--active-bg);color:var(--accent);}
#sourceSearchModal .source-finder-head .eyebrow {font-size:10px;font-weight:600;letter-spacing:1.4px;color:var(--muted);}
#sourceSearchModal .source-finder-head h2 {font-size:26px;font-weight:600;letter-spacing:-.8px;margin:5px 0 7px;}
#sourceSearchModal .source-finder-head p:not(.eyebrow) {font-size:13px;line-height:1.5;}
#sourceSearchModal .modal-close-btn {border:0;background:var(--panel-2);width:40px;height:40px;flex-basis:40px;border-radius:50%;}
#sourceSearchModal .source-finder-body {min-height:0;overflow:auto;overscroll-behavior:contain;padding:24px 28px 28px;}
#sourceSearchModal .source-finder-search {display:grid;gap:10px;padding:0;margin:0 0 24px;}
#sourceSearchModal .source-finder-search>label {font-size:12px;font-weight:500;color:var(--muted);}
#sourceSearchModal .source-search-control {display:grid;grid-template-columns:22px minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:6px 6px 6px 16px;border:1px solid var(--line);border-radius:14px;background:var(--panel-2);}
#sourceSearchModal .source-search-control:focus-within {border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent);}
#sourceSearchModal .source-search-control>.lucide {position:static;transform:none;width:20px;height:20px;color:var(--muted);}
#sourceSearchModal .source-search-control input {grid-column:2;min-width:0;width:100%;min-height:42px;padding:8px 0!important;border:0;border-radius:0;background:transparent;font-size:14px;font-weight:400;color:var(--text);box-shadow:none!important;outline:none;}
#sourceSearchModal .source-search-control input::-webkit-search-cancel-button {display:none;}
#sourceSearchModal .source-search-clear {grid-column:3;position:static;transform:none;width:32px;height:32px;min-width:32px;min-height:32px;margin:0;padding:0;border:0;background:transparent;border-radius:50%;color:var(--muted);}
#sourceSearchModal .source-search-control>.primary-btn {grid-column:4;min-width:84px;min-height:42px;border-radius:10px;padding:10px 18px;font-size:13px;}
#sourceSearchModal .source-search-examples {display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:11px;color:var(--muted);}
#sourceSearchModal .source-search-examples button {border:1px solid var(--line);border-radius:7px;background:transparent;color:var(--muted);padding:5px 8px;font-size:11px;font-weight:450;}
#sourceSearchModal .source-search-examples button:hover {background:var(--active-bg);border-color:var(--accent);color:var(--accent);}
#sourceSearchModal .source-finder-workspace {display:grid;grid-template-columns:minmax(0,1fr) 246px;gap:24px;align-items:start;}
#sourceSearchModal .source-finder-results-panel {min-width:0;margin:0;padding:0;}
#sourceSearchModal .source-results-head {display:flex;justify-content:space-between;align-items:start;gap:12px;margin:0 0 16px;}
#sourceSearchModal .source-results-head h3 {font-size:14px;font-weight:600;margin:0 0 6px;color:var(--text);}
#sourceSearchModal .source-results-head p {margin:0;font-size:12px;color:var(--muted);overflow-wrap:anywhere;}
#sourceSearchModal #sourceSearchResultCount {font-size:11px;white-space:nowrap;color:var(--muted);padding-top:2px;}
#sourceSearchModal .source-search-results {display:grid;gap:4px;max-height:none;overflow:visible;}
#sourceSearchModal .source-search-state {min-height:245px;padding:24px 16px;border:0;border-radius:16px;background:var(--panel-2);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;text-align:center;}
#sourceSearchModal .source-search-state>.lucide {width:48px;height:48px;padding:11px;margin-bottom:3px;background:var(--panel);border:1px solid var(--line);border-radius:50%;color:var(--muted);}
#sourceSearchModal .source-search-state strong {font-size:14px;font-weight:500;color:var(--text);}
#sourceSearchModal .source-search-state p {max-width:280px;margin:0;font-size:12px;line-height:1.6;color:var(--muted);}
#sourceSearchModal .source-search-state.is-loading>.lucide {animation:site-spin 1s linear infinite;}
#sourceSearchModal .source-result {display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:12px;padding:9px 8px;min-height:68px;border:1px solid transparent;border-radius:12px;background:transparent;}
#sourceSearchModal .source-result:hover {background:var(--panel-2);}
#sourceSearchModal .source-result.is-selected {background:var(--active-bg);}
#sourceSearchModal .source-result-cover,#sourceSearchModal .source-result-cover img {width:48px;height:48px;border-radius:10px;background:var(--panel-2);}
#sourceSearchModal .source-result-copy strong {font-size:13px;font-weight:500;}
#sourceSearchModal .source-result-copy small {font-size:12px;font-weight:400;color:var(--muted);}
#sourceSearchModal .source-result-copy em {font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#sourceSearchModal .source-result-action {display:flex;align-items:center;justify-content:center;gap:6px;min-height:38px;min-width:38px;padding:8px 10px;border-radius:9px;border:1px solid var(--line);font-size:11px;font-weight:500;background:var(--panel);color:var(--text);}
#sourceSearchModal .source-result-action svg {width:15px;height:15px;flex-shrink:0;}
#sourceSearchModal .source-result-action:hover {border-color:var(--accent);color:var(--accent);}
#sourceSearchModal .source-result-action.is-added {border-color:transparent;background:transparent;color:var(--accent);opacity:1;cursor:default;}
#sourceSearchModal .source-finder-selection {min-width:0;display:grid;gap:12px;}
#sourceSearchModal .source-finder-selected {padding:16px;margin:0;border:1px solid var(--line);border-radius:14px;background:transparent;}
#sourceSearchModal .source-selected-head {margin-bottom:12px;}
#sourceSearchModal .source-selected-head strong {font-size:12px;font-weight:600;}
#sourceSearchModal .source-selected-head>span {height:23px;min-width:23px;padding:0 6px;background:var(--active-bg);color:var(--accent);font-size:11px;font-weight:600;}
#sourceSearchModal .source-selected-list {display:grid;gap:8px;min-width:0;}
#sourceSearchModal .source-selected-list .selected-source {display:grid;grid-template-columns:minmax(0,1fr) 30px;align-items:center;gap:8px;min-width:0;padding:9px 10px;border:0;border-radius:9px;background:var(--panel-2);color:var(--text);}
#sourceSearchModal .source-selected-copy {display:grid;gap:3px;min-width:0;}
#sourceSearchModal .source-selected-copy strong {font-size:12px;font-weight:500;overflow-wrap:anywhere;}
#sourceSearchModal .source-selected-copy small {font-size:11px;font-weight:400;color:var(--muted);overflow-wrap:anywhere;}
#sourceSearchModal .selected-source button {display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--muted);}
#sourceSearchModal .selected-source button svg {width:15px;height:15px;}
#sourceSearchModal .selected-source button:hover {color:var(--text);background:var(--panel);}
#sourceSearchModal .source-selected-empty {display:grid;justify-items:center;gap:8px;text-align:center;padding:22px 6px;font-size:12px;line-height:1.5;color:var(--muted);}
#sourceSearchModal .source-selected-empty svg {width:25px;height:25px;margin-bottom:4px;}
#sourceSearchModal .source-selected-empty strong {font-weight:500;color:var(--text);}
#sourceSearchModal .manual-source {margin:0;padding:0;border:1px solid var(--line);border-radius:14px;background:transparent;overflow:hidden;}
#sourceSearchModal .manual-source-toggle {display:grid;gap:6px;width:100%;padding:14px 16px;border:0;border-radius:0;background:transparent;text-align:left;color:var(--text);}
#sourceSearchModal .manual-source-toggle>span {display:flex;gap:8px;align-items:center;}
#sourceSearchModal .manual-source-toggle svg {width:16px;height:16px;color:var(--muted);}
#sourceSearchModal .manual-source-toggle strong {font-size:12px;font-weight:500;}
#sourceSearchModal .manual-source-toggle small {padding-left:24px;font-size:11px;color:var(--muted);}
#sourceSearchModal .manual-source-toggle[aria-expanded=true] {border-bottom:1px solid var(--line);}
#sourceSearchModal .manual-source-form {display:grid;grid-template-columns:minmax(0,1fr);gap:12px;padding:16px;margin:0;}
#sourceSearchModal .manual-source-form[hidden] {display:none;}
#sourceSearchModal .manual-source-form label {display:grid;gap:7px;font-size:11px;font-weight:500;color:var(--muted);}
#sourceSearchModal .manual-source-form input {width:100%;min-width:0;min-height:42px;padding:10px 12px;border:1px solid var(--line);border-radius:9px;background:var(--panel-2);color:var(--text);font:inherit;font-size:12px;font-weight:400;}
#sourceSearchModal .manual-source-form .ghost-btn {display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;min-height:40px;background:var(--active-bg);color:var(--accent);border:0;}
#sourceSearchModal .source-finder-actions {position:static;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;gap:16px;padding:18px 28px;margin:0;background:var(--panel);}
#sourceSearchModal .source-finder-actions p {display:flex;align-items:center;gap:8px;margin:0;min-width:0;font-size:12px;font-weight:400;color:var(--muted);}
#sourceSearchModal .source-finder-actions p svg {width:16px;height:16px;flex-shrink:0;}
#sourceSearchModal #finishSourceSearchBtn {min-width:116px;min-height:44px;border-radius:12px;font-size:13px;white-space:nowrap;}
@media(max-width:620px) {
  #sourceSearchModal {padding:12px;}
  :root[data-theme] #sourceSearchModal .source-finder-v8 {max-height:calc(100dvh / .99 - 24px);border-radius:20px;}
  #sourceSearchModal .source-finder-head {padding:20px 18px 18px;}
  #sourceSearchModal .source-finder-title {gap:0;}
  #sourceSearchModal .source-finder-symbol {display:none;}
  #sourceSearchModal .source-finder-head h2 {font-size:23px;}
  #sourceSearchModal .source-finder-body {padding:20px 18px;}
  #sourceSearchModal .source-finder-workspace {grid-template-columns:minmax(0,1fr);gap:22px;}
  #sourceSearchModal .source-finder-selection {grid-row:1;}
  #sourceSearchModal .source-selected-empty {display:block;text-align:left;padding:2px 0;font-size:11px;}
  #sourceSearchModal .source-selected-empty svg,#sourceSearchModal .source-selected-empty strong {display:none;}
  #sourceSearchModal .source-finder-selected {padding:13px 14px;}
  #sourceSearchModal .source-selected-head {margin-bottom:8px;}
  #sourceSearchModal .manual-source-toggle {display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 14px;}
  #sourceSearchModal .manual-source-toggle small {padding:0;max-width:110px;text-align:right;}
  #sourceSearchModal .source-search-control {grid-template-columns:18px minmax(0,1fr) auto auto;gap:7px;padding-left:12px;}
  #sourceSearchModal .source-search-control>.primary-btn {grid-column:4;grid-row:1;min-width:60px;padding:10px 12px;}
  #sourceSearchModal .source-search-clear {grid-column:3;grid-row:1;width:28px;min-width:28px;}
  #sourceSearchModal .source-search-control input {font-size:16px;}
  #sourceSearchModal .source-search-state {min-height:190px;}
  #sourceSearchModal .source-result {gap:10px;padding:9px 0;}
  #sourceSearchModal .source-result-action {width:38px;padding:8px;}
  #sourceSearchModal .source-result-action>span {display:none;}
  #sourceSearchModal .source-finder-actions {padding:14px 18px;gap:14px;}
  #sourceSearchModal .source-finder-actions p {font-size:11px;line-height:1.5;}
  #sourceSearchModal #finishSourceSearchBtn {min-width:100px;}
}
@media(prefers-reduced-motion:reduce) {#sourceSearchModal .source-search-state.is-loading>.lucide {animation:none!important;}}

/* Personal uploads workspace. */
:root[data-theme] #view-studio.studio-v8 {max-width:1240px;margin-inline:auto;}
#view-studio .studio-page-head {display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:28px;}
#view-studio .studio-page-head .eyebrow {font-size:11px;font-weight:500;color:var(--muted);letter-spacing:1.4px;}
#view-studio .studio-page-head h1 {margin:8px 0 10px;font-size:clamp(28px,3vw,40px);font-weight:600;letter-spacing:-1.2px;line-height:1.15;}
#view-studio .studio-page-head p:not(.eyebrow) {margin:0;font-size:14px;color:var(--muted);line-height:1.6;}
#view-studio .studio-page-head>.primary-btn {flex-shrink:0;border-radius:12px;min-height:46px;gap:8px;}
#view-studio .studio-overview {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:26px;}
#view-studio .studio-stat {display:grid;gap:16px;padding:20px;border:1px solid var(--line);border-radius:16px;background:var(--panel);}
#view-studio .studio-stat>span {display:flex;gap:8px;align-items:center;color:var(--muted);font-size:12px;}
#view-studio .studio-stat svg {width:16px;height:16px;flex-shrink:0;}
#view-studio .studio-stat>strong {font-size:29px;line-height:1;font-weight:500;letter-spacing:-1px;color:var(--text);}
#view-studio .studio-upload-panel {padding:0;border:0;border-radius:0;background:transparent;}
#view-studio .studio-toolbar {display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:20px;align-items:end;padding:20px;border:1px solid var(--line);border-radius:16px;background:var(--panel);margin-bottom:18px;}
#view-studio .studio-search {display:flex;align-items:center;gap:12px;min-width:0;padding:0 14px;min-height:48px;border:1px solid var(--line);border-radius:11px;background:var(--panel-2);}
#view-studio .studio-search svg {width:19px;height:19px;flex-shrink:0;color:var(--muted);}
#view-studio .studio-search input {width:100%;min-width:0;min-height:46px;padding:12px 0;border:0;background:transparent;box-shadow:none;outline:none;color:var(--text);font:inherit;font-size:14px;font-weight:400;}
#view-studio .studio-search:focus-within {border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent);}
#view-studio .sort-control {display:grid;gap:7px;font-size:11px;font-weight:500;color:var(--muted);}
#view-studio .sort-control select {width:100%;min-width:0;min-height:48px;padding:10px 12px;border:1px solid var(--line);border-radius:11px;background:var(--panel-2);color:var(--text);font:inherit;font-size:13px;font-weight:400;}
#view-studio .studio-filter-bar {display:flex;gap:14px;align-items:center;justify-content:space-between;margin-bottom:28px;}
#view-studio .studio-status-filters {display:flex;flex-wrap:wrap;gap:6px;min-width:0;}
#view-studio .studio-status-filters button {display:flex;align-items:center;gap:8px;min-height:40px;padding:8px 12px;border:1px solid transparent;border-radius:9px;background:transparent;color:var(--muted);font:inherit;font-size:12px;font-weight:500;}
#view-studio .studio-status-filters button[aria-pressed=true] {border-color:var(--line);background:var(--panel);color:var(--text);}
#view-studio .studio-status-filters b {font-size:10px;font-weight:500;padding:3px 6px;min-width:18px;border-radius:5px;background:var(--panel-2);color:var(--muted);}
#view-studio #studioResetBtn {flex-shrink:0;font-size:11px;color:var(--muted);}
#view-studio .studio-list-heading {display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 0 14px;}
#view-studio .studio-list-heading h2 {font-size:17px;font-weight:500;letter-spacing:-.3px;margin:0;}
#view-studio #studioResultSummary {margin:0;font-size:12px;color:var(--muted);}
#view-studio .studio-upload-list {display:grid;gap:10px;}
#view-studio .studio-row {position:relative;display:grid;grid-template-columns:76px minmax(0,1fr) 170px auto;align-items:center;gap:20px;padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--panel);}
#view-studio .studio-row:focus-within {z-index:2;}
#view-studio .studio-cover {display:block;width:76px;height:76px;border:0;border-radius:12px;padding:0;}
#view-studio .studio-track-copy {min-width:0;}
#view-studio .studio-track-heading {display:flex;align-items:center;gap:8px;min-width:0;}
#view-studio .studio-track-heading>.row-title {min-width:0;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:left;font-size:15px;font-weight:550;}
#view-studio .studio-authors {font-size:12px;font-weight:400;line-height:1.5;margin-top:6px;color:var(--text);}
#view-studio .studio-authors>span {color:var(--muted);}
#view-studio .studio-track-date {font-size:11px;line-height:1.5;color:var(--muted);}
#view-studio .studio-tags {display:flex;flex-wrap:wrap;gap:5px;margin:8px 0 0;}
#view-studio .studio-tags>span {max-width:100%;padding:3px 6px;border-radius:5px;background:var(--panel-2);color:var(--muted);font-size:10px;overflow-wrap:anywhere;}
#view-studio .studio-track-meta {display:grid;gap:10px;justify-items:start;min-width:0;}
#view-studio .studio-status {display:inline-flex;align-items:center;gap:6px;padding:6px 8px;border-radius:7px;background:var(--panel-2);color:var(--muted);font-size:11px;font-weight:450;}
#view-studio .studio-status svg {width:13px;height:13px;flex-shrink:0;}
#view-studio .studio-status.status-approved {color:var(--success);background:color-mix(in srgb,var(--success) 9%,var(--panel));}
#view-studio .studio-status.status-pending {color:var(--text);background:var(--panel-2);}
#view-studio .studio-status.status-blocked {color:var(--danger);background:color-mix(in srgb,var(--danger) 8%,var(--panel));}
#view-studio .studio-listens {display:flex;align-items:center;flex-wrap:wrap;gap:5px;font-size:11px;color:var(--muted);}
#view-studio .studio-listens svg {width:13px;height:13px;flex-shrink:0;}
#view-studio .studio-actions {display:flex;align-items:center;gap:7px;}
#view-studio .studio-actions>.ghost-btn {min-height:38px;padding:9px 11px;font-size:11px;gap:6px;border:1px solid var(--line);border-radius:9px;background:transparent;color:var(--text);}
#view-studio .studio-actions>.ghost-btn svg {width:14px;height:14px;}
#view-studio .studio-play,#view-studio .studio-more>summary {display:grid;place-items:center;width:38px;height:38px;min-width:38px;min-height:38px;padding:0;border:0;border-radius:50%;background:var(--active-bg);color:var(--accent);}
#view-studio .studio-play svg {width:15px;height:15px;}
#view-studio .studio-more {position:relative;}
#view-studio .studio-more>summary {cursor:pointer;list-style:none;background:transparent;color:var(--muted);border-radius:9px;}
#view-studio .studio-more>summary::-webkit-details-marker {display:none;}
#view-studio .studio-more>summary svg {width:18px;height:18px;}
#view-studio .studio-more[open]>summary {background:var(--panel-2);color:var(--text);}
#view-studio .studio-more>div {position:absolute;z-index:10;right:0;bottom:calc(100% + 6px);width:190px;padding:6px;border:1px solid var(--line);border-radius:12px;background:var(--panel);box-shadow:var(--shadow);}
#view-studio .studio-more button {display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:10px;border:0;border-radius:7px;background:transparent;color:var(--text);font:inherit;font-size:12px;text-align:left;}
#view-studio .studio-more button:hover {background:var(--panel-2);}
#view-studio .studio-more button.danger {color:var(--danger);}
#view-studio .studio-more button svg {width:15px;height:15px;flex-shrink:0;}
#view-studio .studio-moderation-note {display:flex;gap:7px;align-items:start;margin-top:10px;padding:8px 10px;border-left:2px solid var(--line);font-size:11px;line-height:1.5;overflow-wrap:anywhere;}
#view-studio .studio-moderation-note svg {width:14px;height:14px;flex-shrink:0;margin-top:1px;}
#view-studio .studio-empty {display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:56px 24px;border:1px solid var(--line);border-radius:18px;background:var(--panel);}
#view-studio .studio-empty>svg {width:48px;height:48px;padding:12px;border-radius:14px;background:var(--panel-2);color:var(--muted);}
#view-studio .studio-empty h3 {font-size:18px;font-weight:500;margin:0;}
#view-studio .studio-empty p {max-width:360px;font-size:13px;line-height:1.6;color:var(--muted);margin:0;}
#view-studio .studio-empty button {margin-top:6px;border-radius:10px;}
@media(max-width:1100px) {#view-studio .studio-row {grid-template-columns:64px minmax(0,1fr) auto;gap:16px;}#view-studio .studio-cover {width:64px;height:64px;}#view-studio .studio-track-meta {grid-column:2;grid-row:2;display:flex;gap:12px;align-items:center;flex-wrap:wrap;}#view-studio .studio-actions {grid-column:3;grid-row:1/3;}}
@media(max-width:700px) {
 #view-studio .studio-page-head {align-items:flex-start;flex-direction:column;gap:18px;margin-bottom:22px;}
 #view-studio .studio-page-head h1 {font-size:30px;}
 #view-studio .studio-page-head p:not(.eyebrow) {font-size:13px;}
 #view-studio .studio-page-head>.primary-btn {min-height:42px;font-size:12px;}
 #view-studio .studio-overview {grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:20px;}
 #view-studio .studio-stat {padding:15px;gap:13px;border-radius:12px;}
 #view-studio .studio-stat>span {font-size:11px;gap:6px;}
 #view-studio .studio-stat>strong {font-size:25px;}
 #view-studio .studio-toolbar {grid-template-columns:minmax(0,1fr);gap:14px;padding:14px;border-radius:14px;}
 #view-studio .studio-search input {font-size:16px;}
 #view-studio .studio-filter-bar {align-items:flex-start;flex-direction:column;gap:10px;margin-bottom:22px;}
 #view-studio .studio-status-filters {gap:4px;}
 #view-studio .studio-status-filters button {padding:7px 8px;font-size:11px;gap:5px;}
 #view-studio .studio-row {grid-template-columns:60px minmax(0,1fr);align-items:start;gap:12px;padding:14px;border-radius:14px;}
 #view-studio .studio-cover {width:60px;height:60px;}
 #view-studio .studio-track-heading>.row-title {font-size:14px;}
 #view-studio .studio-authors {white-space:normal;overflow-wrap:anywhere;font-size:11px;}
 #view-studio .studio-track-date {font-size:10px;}
 #view-studio .studio-tags {gap:4px;}
 #view-studio .studio-track-meta {grid-column:1/-1;grid-row:auto;gap:10px;}
 #view-studio .studio-actions {grid-column:1/-1;grid-row:auto;justify-content:flex-end;padding-top:10px;border-top:1px solid var(--line);}
 #view-studio .studio-actions>.ghost-btn {margin-right:auto;}
 #view-studio .studio-status {font-size:10px;}
 #view-studio .studio-listens {font-size:10px;}
 #view-studio .studio-empty {padding:40px 18px;}
}


/* Mobile web audit v9: one navigation baseline, scrollable dialogs and touch targets. */
.queue-backdrop {position:fixed;inset:0;z-index:79;background:#0005;}

@media (max-width:760px), (max-width:1100px) and (max-height:500px) and (pointer:coarse) {
  html {zoom:1;scroll-padding-top:90px;}
  :root {--mobile-nav-height:70px;--mobile-nav-bottom:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom));}
  :root[data-theme] .app-shell {grid-template-columns:minmax(0,1fr);min-height:100dvh;padding-bottom:calc(var(--mobile-nav-bottom) + 20px);}
  :root[data-theme] .sidebar {position:fixed;top:auto;left:0;right:0;bottom:0;width:auto;height:var(--mobile-nav-bottom);padding:5px max(8px,env(safe-area-inset-right)) calc(5px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));border:0;border-top:1px solid var(--line);display:block;overflow:hidden;z-index:60;}
  :root[data-theme] .sidebar :is(.brand,.playlist-panel,.sidebar-note,.nav-section-label,.sidebar-app-download) {display:none;}
  :root[data-theme] .sidebar .nav-list {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;margin:0;}
  :root[data-theme] .sidebar .nav-item {display:none;min-height:44px;height:59px;padding:4px;flex-direction:column;align-items:center;justify-content:center;gap:5px;font-size:10px;line-height:1.3;border-radius:10px;}
  :root[data-theme] .sidebar .nav-item:is([data-route=home],[data-route=radio],[data-route=catalog],[data-route=library],.mobile-more-trigger) {display:flex;}
  :root[data-theme] .sidebar .nav-item :is(.icon,.lucide) {width:20px;height:20px;}
  :root[data-theme] .main {grid-column:1;min-width:0;padding:0 max(16px,env(safe-area-inset-right)) 36px max(16px,env(safe-area-inset-left));}
  :root[data-theme] body:is(.player-visible,.radio-visible) .main {padding-bottom:110px;}
  :root[data-theme] .topbar {min-height:80px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:16px 0;margin-bottom:22px;}
  :root[data-theme] .topbar-actions {gap:6px;}
  :root[data-theme] .topbar-actions :is(.upload-topbar-btn,.page-refresh-btn,.topbar-link[data-route=auth]) {display:none;}
  :root[data-theme] :is(.avatar-btn,.inbox-btn,.theme-switch-btn) {min-width:44px;min-height:44px;}
  :root[data-theme] .search-wrap {min-width:0;padding:0 10px;}
  :root[data-theme] input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=hidden]), :root[data-theme] textarea, :root[data-theme] select {font-size:16px;}
  :root[data-theme] .search-wrap input {padding-left:7px;height:44px;min-height:44px;font-size:16px;}
  :root[data-theme] :is(input,textarea,select) {scroll-margin-block:85px;}
  :root[data-theme] .player, :root[data-theme] #radioDock {left:0;right:0;bottom:var(--mobile-nav-bottom);width:auto;min-height:78px;padding:10px max(12px,env(safe-area-inset-right)) 10px max(12px,env(safe-area-inset-left));border-radius:0;grid-template-columns:minmax(0,1fr) 44px 44px;gap:8px;}
  :root[data-theme] .player .player-center {position:static;min-width:0;}
  :root[data-theme] .player .player-controls {gap:0;}
  :root[data-theme] .player:not(.radio-dock) .player-controls > :not(#playBtn) {display:none;}
  :root[data-theme] .player:not(.radio-dock) .progress-wrap {position:absolute;left:0;right:0;top:0;height:6px;}
  :root[data-theme] .player:not(.radio-dock) .progress-wrap > span {display:none;}
  :root[data-theme] .player .player-actions {position:static;gap:0;}
  :root[data-theme] .player:not(.radio-dock) .player-actions > :not(#openQueueBtn) {display:none;}
  :root[data-theme] .player:not(.radio-dock) .player-actions > #openQueueBtn {display:grid;width:44px;height:44px;place-items:center;}
  :root[data-theme] #radioDock :is(.radio-dock-volume,.radio-live-caption,.player-actions > [data-radio-expand]) {display:none;}
  :root[data-theme] #radioDock .player-actions > #radioClose {display:grid;width:44px;height:44px;place-items:center;}
  :root[data-theme] .player :is(.mini-cover,.radio-dock-track img) {width:44px;height:44px;flex:0 0 44px;}
  :root[data-theme] .player .mini-track {gap:10px;min-width:0;}
  :root[data-theme] .player-title-link {font-size:12px;}
  :root[data-theme] #radioDock .radio-dock-track {gap:10px;}
  :root[data-theme] #radioDock .radio-dock-track strong {font-size:12px;}
  :root[data-theme] #radioDock .radio-dock-track small {font-size:10px;}
  :root[data-theme] #radioDock [data-radio-artist] {font-size:11px;}
  :root[data-theme] .queue-panel {width:min(100%,440px);padding:16px;top:env(safe-area-inset-top);bottom:calc(var(--mobile-nav-bottom) + 78px);border-radius:16px 0 0 0;overscroll-behavior:contain;}
  :root[data-theme] body.fullscreen-player-open .queue-panel {bottom:env(safe-area-inset-bottom);}
  :root[data-theme] body.fullscreen-player-open .queue-backdrop {z-index:149;}
  :root[data-theme] .queue-item {min-width:0;}
  :root[data-theme] :is(.queue-remove,.queue-drag-handle,.queue-item .row-like,.modal-close-btn) {min-width:44px;min-height:44px;}
  :root[data-theme] .modal-close-btn {flex-basis:44px;}
  :root[data-theme] .modal-backdrop {top:var(--mobile-visible-top,0px);bottom:auto;height:var(--mobile-visible-height,100dvh);padding:max(10px,env(safe-area-inset-top)) 10px max(10px,env(safe-area-inset-bottom));overflow:hidden;}
  :root[data-theme] .modal-backdrop > :is(.modal,.report-v6-dialog) {max-width:100%;max-height:100%;min-height:0;margin:auto;}
  :root[data-theme] #sourceSearchModal .source-finder-v8 {max-height:100%;}
  :root[data-theme] .mobile-more-modal {display:flex;flex-direction:column;width:min(440px,100%);padding:20px;overflow:hidden;}
  .mobile-more-modal .queue-head {flex-shrink:0;}
  .mobile-more-links {min-height:0;overflow-y:auto;overscroll-behavior:contain;margin-top:14px;padding-bottom:2px;}
  .mobile-more-links :is(button,a) {min-height:46px;flex-shrink:0;}
  :root[data-theme] #authorshipModal .modal {max-height:100%;overflow:auto;}
  :root[data-theme] .fullscreen-player {padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);overscroll-behavior:contain;}
  :root[data-theme] .fullscreen-player-head {padding-inline:max(18px,env(safe-area-inset-left));}
  :root[data-theme] :is(.composer-dialog-head,.playlist-editor-head,.source-finder-head,.edit-track-review-head) {gap:12px;}
  :root[data-theme] :is(.composer-dialog-head,.playlist-editor-head,.source-finder-head,.edit-track-review-head) > div {min-width:0;}
  :root[data-theme] :is(.project-card,.project-request,.notification-copy,.track-page-description,.playlist-description) {overflow-wrap:anywhere;}
  :root[data-theme] :is(.catalog-browser-tabs,.library-browser-tabs,.radio-tabs) {max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;}
  :root[data-theme] :is(.taxonomy-options .tag-option,.selected-taxonomy-chip,.notification-action,.source-finder-suggestion,.source-finder-selected-remove) {min-height:44px;}
}
@media (max-height:500px) and (pointer:coarse) {
  :root[data-theme] .modal-backdrop > :is(.modal,.report-v6-dialog) {max-height:100%;}
  :root[data-theme] :is(.composer-dialog-head,.playlist-editor-head,.source-finder-head,.edit-track-review-head) {padding:12px 16px;}
  :root[data-theme] :is(.composer-dialog-head,.playlist-editor-head,.source-finder-head,.edit-track-review-head) h2 {font-size:20px;}
  :root[data-theme] :is(.composer-dialog-head,.playlist-editor-head,.source-finder-head,.edit-track-review-head) p:not(.eyebrow) {display:none;}
  :root[data-theme] :is(.composer-dialog-actions,.source-finder-actions) {padding:10px 16px;}
  :root[data-theme] .taxonomy-picker-body {padding:12px 16px;gap:12px;}
  :root[data-theme] #radioFullscreen .radio-stage {grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;width:calc(100% - 48px);min-height:0;padding:10px 0 24px;}
  :root[data-theme] #radioFullscreen .fullscreen-player-cover {width:min(32vw,220px);justify-self:center;}
  :root[data-theme] #fullscreenPlayer:not(.is-compact-layout) .fullscreen-player-layout {grid-template-columns:minmax(0,1fr) minmax(0,1fr);width:calc(100% - 48px);min-height:0;padding:10px 0 24px;gap:24px;}
  :root[data-theme] #fullscreenPlayer:not(.is-compact-layout) .fullscreen-player-cover {width:min(32vw,220px);min-height:0;max-height:none;aspect-ratio:1;justify-self:center;}
}

@media (max-width:760px), (max-width:1100px) and (max-height:500px) and (pointer:coarse) {
  body.queue-open {overflow:hidden;}
  :root[data-theme] .main {padding-top:env(safe-area-inset-top);}
  :root[data-theme] .topbar {top:env(safe-area-inset-top);}
  :root[data-theme] body :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=hidden]),textarea,select) {font-size:16px!important;}
  :root[data-theme] .player .player-center {width:44px;}
  :root[data-theme] .player .progress-wrap {position:absolute;left:0;right:0;top:-5px;width:100%;height:6px;margin:0;}
  :root[data-theme] .player .progress-wrap span {display:none;}
  :root[data-theme] .player .progress-wrap input {width:100%;height:6px;margin:0;}
  :root[data-theme] .player .now-playing {gap:10px;min-width:0;}
}
@media (max-width:1100px) and (max-height:500px) and (pointer:coarse) {
  :root[data-theme] :is(#fullscreenPlayer,#radioFullscreen) :is(.fullscreen-player-layout,.radio-stage) {align-items:start;}
  :root[data-theme] #fullscreenPlayer:not(.is-compact-layout) .fullscreen-player-cover {align-self:start;}
  :root[data-theme] :is(#fullscreenPlayer,#radioFullscreen) .fullscreen-player-content {gap:12px;}
  :root[data-theme] :is(#fullscreenPlayer,#radioFullscreen) .fullscreen-track-copy h2 {font-size:28px;line-height:1.2;margin:6px 0;}
  :root[data-theme] :is(#fullscreenPlayer,#radioFullscreen) .fullscreen-track-copy p {margin-block:6px;font-size:13px;}
  :root[data-theme] :is(#fullscreenPlayer,#radioFullscreen) .fullscreen-context {display:none;}
  :root[data-theme] :is(#fullscreenPlayer,#radioFullscreen) .fullscreen-controls {gap:16px;}
  :root[data-theme] :is(#fullscreenPlayer,#radioFullscreen) .fullscreen-play-toggle {width:56px;height:56px;}
}
@media (max-width:760px), (max-width:1100px) and (max-height:500px) and (pointer:coarse) {
  :root[data-theme] .player .progress-wrap {display:block;}
  :root[data-theme] .player .player-actions {display:flex;justify-content:flex-end;}
}
@media (max-width:1100px) and (max-height:500px) and (pointer:coarse) {
  :root[data-theme] #fullscreenPlayer:not(.is-compact-layout) .fullscreen-player-cover {height:auto;}
  :root[data-theme] :is(#fullscreenPlayer,#radioFullscreen) .fullscreen-player-actions {gap:6px;}
  :root[data-theme] :is(#fullscreenPlayer,#radioFullscreen) .fullscreen-player-actions button {font-size:12px;padding:8px 10px;}
}
@media (max-width:760px), (max-width:1100px) and (max-height:500px) and (pointer:coarse) {
  :root[data-theme] .player:not(.radio-dock) .player-actions > #openQueueBtn {display:grid!important;place-items:center;}
}

/* Community tags: moderated, additive contributions from the track page. */
.community-tags {margin-top:24px;padding-top:22px;border-top:1px solid var(--line);}
.community-tags-head {display:flex;align-items:center;justify-content:space-between;gap:18px;}
.community-tags h3 {margin:0 0 8px;font-size:17px;}
.community-tags p {font-size:13px;line-height:1.6;color:var(--muted);margin:0;}
.community-tags-head > button {flex-shrink:0;}
.tag-own-history {margin-top:16px;}
.tag-own-history summary {cursor:pointer;font-size:13px;color:var(--soft);padding:12px 0;}
.tag-own-history summary strong {margin-left:10px;font-size:11px;font-weight:500;color:var(--muted);}
.tag-own-history article {display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0;border-top:1px solid var(--line);}
.tag-own-history article > div {min-width:0;overflow-wrap:anywhere;}
.tag-own-history article strong {font-size:13px;margin-right:10px;}
.tag-own-history article p {margin-top:7px;}
.tag-review-status {display:inline-block;padding:5px 8px;border-radius:7px;background:var(--panel-2);font-size:11px;white-space:nowrap;color:var(--muted);}
.tag-review-status.is-pending {background:var(--active-bg);color:var(--accent);}
.tag-review-status.is-approved {color:var(--success);}
.tag-review-status.is-rejected {color:var(--danger);}
:root[data-theme] .tag-suggestion-dialog {display:flex;flex-direction:column;overflow:hidden;width:min(680px,100%);max-height:calc(100dvh / .99 - 48px);margin:auto;padding:0;}
.tag-suggestion-body {display:grid;gap:18px;min-height:0;overflow:auto;overscroll-behavior:contain;padding:24px 28px;}
.tag-suggestion-body label {display:grid;gap:9px;font-size:13px;font-weight:600;min-width:0;}
.tag-suggestion-body label small {font-weight:400;color:var(--muted);}
.tag-suggestion-body :is(input,textarea,select) {min-width:0;width:100%;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--panel-2);color:var(--text);font:inherit;font-size:14px;}
.tag-suggestion-body textarea {resize:vertical;min-height:90px;}
.tag-suggestion-body :is(input,textarea,select):focus {outline:2px solid var(--accent);outline-offset:2px;}
.tag-suggestion-body blockquote {margin:0;padding:14px;border-left:2px solid var(--accent);background:var(--panel-2);font-size:13px;white-space:pre-wrap;overflow-wrap:anywhere;}
.tag-review-note {margin:0;font-size:13px;line-height:1.7;padding:14px 16px;background:var(--active-bg);color:var(--muted);border-radius:12px;}
.tag-input-row {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;}
.tag-current {display:grid;gap:9px;min-width:0;padding:14px;border:1px solid var(--line);border-radius:12px;}
.tag-current > span {font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);}
.tag-current > div,.community-tag-options,.community-tag-draft > div {display:flex;flex-wrap:wrap;gap:7px;}
.community-tag-options button {min-height:36px;white-space:normal;overflow-wrap:anywhere;max-width:100%;}
.community-tag-draft {display:grid;gap:10px;}
.community-tag-draft .selected-taxonomy-chip {font-size:13px;}
.tag-feedback {margin:0;color:var(--danger);font-size:13px;line-height:1.6;}
.tag-feedback:empty {display:none;}
.tag-review-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
.tag-review-card {display:grid;align-content:start;gap:13px;padding:20px;border:1px solid var(--line);border-radius:14px;background:var(--panel);min-width:0;overflow-wrap:anywhere;}
.tag-review-card header {display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
.tag-review-card header strong {font-size:18px;min-width:0;}
.tag-review-card > p {margin:0;font-size:12px;line-height:1.6;color:var(--muted);}
.tag-review-comment {white-space:pre-wrap;}
.tag-review-card footer {display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-top:4px;}
.tag-review-pagination {display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:20px;font-size:12px;color:var(--muted);}
@media(max-width:760px),(max-width:1100px) and (max-height:500px) and (pointer:coarse) {
 .community-tags-head {align-items:stretch;flex-direction:column;gap:12px;}
 .community-tags-head > button {align-self:start;}
 .tag-review-grid {grid-template-columns:minmax(0,1fr);}
 :root[data-theme] .tag-suggestion-dialog {max-height:100%;}
 .tag-suggestion-body {padding:18px;gap:14px;}
 .tag-suggestion-dialog .composer-dialog-head {padding:18px;}
 .tag-suggestion-dialog .composer-dialog-actions {padding:14px 18px;flex-wrap:wrap;}
 .tag-suggestion-dialog .composer-dialog-actions .primary-btn {flex:1;}
 .community-tag-options button,.community-tag-draft button {min-height:44px;}
 .tag-own-history article {align-items:flex-start;}
}

+.community-tag-options button {border:1px solid var(--line);background:var(--panel-2);color:var(--soft);border-radius:9px;padding:9px 12px;font-size:12px;font-weight:500;}
+.community-tag-options button:hover {border-color:var(--accent);color:var(--accent);}
+.tag-own-history > button {margin-bottom:10px;min-height:36px;}
+
/* Track workspace and playlist picker — v12 */
:root[data-theme] .track-v12 { color:var(--text); min-width:0; }
.track-v12 .track-breadcrumb { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:0 0 18px; color:var(--muted); font-size:12px; }
.track-v12 .track-breadcrumb button { display:flex; align-items:center; gap:8px; background:none; border:0; padding:8px 0; color:var(--muted); min-height:40px; }
:root[data-theme] .track-v12 .track-page-hero { padding:28px; margin:0; background:var(--panel); border:1px solid var(--line); border-radius:22px; box-shadow:none; overflow:hidden; }
:root[data-theme] .track-v12 .track-hero-content { display:grid; grid-template-columns:286px minmax(0,1fr); gap:30px; align-items:center; padding:0; }
:root[data-theme] .track-v12 .track-page-cover { width:100%; height:auto; min-height:0; aspect-ratio:1; border-radius:16px; position:relative; overflow:hidden; align-self:start; box-shadow:0 12px 28px #0002; background-size:cover; background-position:center; }
.track-v12 .track-cover-label { position:absolute; bottom:12px; left:12px; display:flex; align-items:center; gap:6px; padding:6px 9px; border-radius:7px; color:#fff; background:#151719b8; font-size:10px; backdrop-filter:blur(10px); }
.track-v12 .track-cover-label .lucide { width:13px; height:13px; }
:root[data-theme] .track-v12 .track-hero-copy { min-width:0; color:var(--text); }
:root[data-theme] .track-v12 .track-type-row { display:flex; align-items:center; flex-wrap:wrap; gap:8px; justify-content:flex-start; margin:0 0 12px; }
.track-v12 .track-type-row .eyebrow { margin:0; font-size:9px; letter-spacing:.1em; }
:root[data-theme] .track-v12 .track-status-badge,:root[data-theme] .track-v12 .track-private-label { display:inline-flex; align-items:center; gap:5px; font-size:10px; padding:4px 7px; border:1px solid var(--line); border-radius:6px; color:var(--muted); background:var(--panel-2); }
.track-v12 .track-status-badge .lucide,.track-v12 .track-private-label .lucide { width:12px; height:12px; }
:root[data-theme] .track-v12 .track-hero-copy h1 { margin:0 0 14px; font-size:clamp(27px,3.3vw,42px); font-weight:700; line-height:1.12; letter-spacing:-.045em; color:var(--text); overflow-wrap:anywhere; }
:root[data-theme] .track-v12 .track-hero-author { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 15px; }
:root[data-theme] .track-v12 .track-hero-author button { display:inline-flex; align-items:center; gap:7px; color:var(--text); font-size:13px; font-weight:600; border:0; padding:0; background:none; min-height:34px; text-align:left; overflow-wrap:anywhere; }
.track-v12 .track-hero-author .lucide { width:13px; height:13px; color:var(--muted); flex:none; }
.track-v12 .track-credit-avatar { display:grid; place-items:center; background:var(--panel-2); color:var(--accent-2); border:1px solid var(--line); height:28px; width:28px; border-radius:50%; font-size:9px; flex:none; }
:root[data-theme] .track-v12 .track-hero-stats { display:flex; flex-wrap:wrap; gap:8px 16px; font-size:11px; color:var(--muted); margin:0 0 14px; }
.track-v12 .track-hero-stats span { display:inline-flex; align-items:center; gap:5px; }
.track-v12 .track-hero-stats .lucide { width:13px; height:13px; }
.track-v12 .track-hero-genres { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:18px; }
:root[data-theme] .track-v12 .track-primary-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0; }
:root[data-theme] .track-v12 .track-listen-btn,:root[data-theme] .track-v12 .track-save-btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:46px; border-radius:11px; padding:0 20px; font-size:13px; font-weight:650; }
:root[data-theme] .track-v12 .track-round-action { width:46px; height:46px; min-height:46px; border:1px solid var(--line); border-radius:11px; background:var(--panel); color:var(--muted); box-shadow:none; flex:none; }
:root[data-theme] .track-v12 .track-round-action.active { color:var(--accent); background:var(--active-bg); border-color:var(--accent); }
.track-v12 .track-secondary-actions { display:flex; align-items:center; flex-wrap:wrap; gap:6px 15px; margin-top:13px; }
.track-v12 .track-secondary-actions button { display:inline-flex; align-items:center; gap:6px; border:0; background:none; color:var(--muted); font-size:11px; min-height:36px; padding:0; }
.track-v12 .track-secondary-actions .lucide { width:14px; height:14px; }
.track-v12 .track-jump-nav { display:flex; align-items:center; flex-wrap:wrap; gap:6px; border-bottom:1px solid var(--line); padding:13px 0; margin:0 0 24px; }
.track-v12 .track-jump-nav button { display:flex; align-items:center; justify-content:center; gap:7px; min-height:40px; padding:0 13px; border:0; border-radius:8px; background:none; color:var(--soft); font-size:12px; }
.track-v12 .track-jump-nav button:hover { background:var(--panel-2); }
.track-v12 .track-jump-nav span { color:var(--muted); font-size:10px; }
:root[data-theme] .track-v12 .track-page-layout { display:grid; grid-template-columns:minmax(0,1fr) 264px; gap:22px; margin:0; align-items:start; }
:root[data-theme] .track-v12 .track-page-main,:root[data-theme] .track-v12 .track-page-sidebar { display:grid; gap:20px; min-width:0; }
:root[data-theme] .track-v12 :is(.track-content-card,.track-author-card,.track-facts-card) { background:var(--panel); border:1px solid var(--line); border-radius:17px; padding:23px; box-shadow:none; min-width:0; }
.track-v12 :is(#trackAbout,#trackOriginals,#trackComments) { scroll-margin-top:100px; }
.track-v12 .track-content-card header { margin-bottom:17px; }
:root[data-theme] .track-v12 :is(.track-content-card h2,.track-facts-card h2) { font-size:21px; letter-spacing:-.035em; color:var(--text); margin:0; }
.track-v12 .track-content-card .eyebrow { margin:0 0 5px; font-size:9px; }
:root[data-theme] .track-v12 .track-description { white-space:pre-wrap; line-height:1.75; font-size:14px; color:var(--soft); overflow-wrap:anywhere; margin:0 0 22px; }
.track-v12 .track-tag-heading { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; margin:0 0 10px; }
.track-v12 .track-tag-heading h3 { margin:0; font-size:12px; }
.track-v12 .track-tag-heading span { font-size:11px; color:var(--muted); }
:root[data-theme] .track-v12 .track-tag-list { display:flex; gap:7px; flex-wrap:wrap; margin:0; }
:root[data-theme] .track-v12 .tag-pill { background:var(--panel-2); color:var(--soft); border:1px solid var(--line); border-radius:7px; min-height:30px; padding:4px 9px; font-size:11px; overflow-wrap:anywhere; max-width:100%; }
.track-v12 .community-tags { margin-top:22px; padding-top:18px; }
.track-v12 .community-tags-head { display:grid; gap:10px; }
.track-v12 .community-tags-head button { justify-self:start; }
:root[data-theme] .track-v12 .track-source-list { display:grid; gap:10px; }
:root[data-theme] .track-v12 .track-source-card { display:grid; grid-template-columns:54px minmax(0,1fr) 34px; align-items:center; gap:12px; padding:12px; background:var(--panel-2); border:1px solid var(--line); border-radius:11px; min-width:0; }
:root[data-theme] .track-v12 .track-source-cover { width:54px; height:54px; display:grid; place-items:center; border-radius:8px; overflow:hidden; background:var(--panel-3); color:var(--muted); }
.track-v12 .track-source-cover img { width:100%; height:100%; object-fit:cover; }
.track-v12 .track-source-copy { min-width:0; display:grid; gap:3px; }
.track-v12 .track-source-copy small { color:var(--muted); font-size:9px; }
.track-v12 .track-source-copy strong { font-size:13px; color:var(--text); overflow-wrap:anywhere; }
.track-v12 .track-source-copy > span { font-size:11px; color:var(--muted); overflow-wrap:anywhere; }
:root[data-theme] .track-v12 .track-source-open { display:grid; place-items:center; width:34px; height:40px; border-radius:8px; background:var(--panel); color:var(--soft); border:1px solid var(--line); }
:root[data-theme] .track-v12 .track-source-link { display:flex; align-items:center; flex-wrap:wrap; gap:7px; font-size:11px; margin-top:14px; color:var(--muted); overflow-wrap:anywhere; }
.track-v12 .track-source-link .lucide { width:13px; height:13px; }
:root[data-theme] .track-v12 .track-author-profile { display:grid; grid-template-columns:36px minmax(0,1fr) 15px; align-items:center; gap:9px; width:100%; text-align:left; padding:10px 0; border:0; background:none; color:var(--text); }
:root[data-theme] .track-v12 .track-author-profile > span { display:grid; place-items:center; height:36px; width:36px; border-radius:50%; background:var(--panel-2); color:var(--accent-2); font-size:11px; }
.track-v12 .track-author-profile strong { font-size:13px; overflow-wrap:anywhere; }
.track-v12 .track-author-profile > .lucide { width:15px; height:15px; }
.track-v12 .track-author-card > p:last-child { color:var(--muted); font-size:11px; line-height:1.6; margin:10px 0 0; }
:root[data-theme] .track-v12 .track-facts-card dl { margin:16px 0; display:grid; gap:13px; }
:root[data-theme] .track-v12 .track-facts-card dl > div { display:grid; grid-template-columns:80px minmax(0,1fr); gap:8px; border:0; padding:0; }
.track-v12 .track-facts-card dt { font-size:11px; color:var(--muted); }
.track-v12 .track-facts-card dd { font-size:11px; color:var(--soft); overflow-wrap:anywhere; margin:0; }
:root[data-theme] .track-v12 .track-report-link { display:flex; align-items:center; justify-content:flex-start; gap:8px; width:100%; border:0; border-top:1px solid var(--line); border-radius:0; color:var(--muted); background:none; margin-top:17px; padding:16px 0 0; text-align:left; font-size:11px; }
:root[data-theme] .track-v12 .comment-form { display:grid; gap:10px; margin:0 0 20px; }
.track-v12 .comment-form textarea { width:100%; min-height:82px; resize:vertical; border-radius:10px; border:1px solid var(--control-line); background:var(--panel); padding:12px; color:var(--text); font:inherit; font-size:13px; }
.track-v12 .track-comment-toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; }
:root[data-theme] .track-v12 .comment-attachment-btn { display:flex; align-items:center; gap:6px; width:auto; min-height:40px; border:0; background:none; color:var(--muted); font-size:11px; }
.track-v12 .track-comment-toolbar .primary-btn { min-height:40px; display:flex; gap:8px; align-items:center; }
.track-v12 .track-comment-login { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:13px; padding:15px; margin-bottom:18px; border-radius:11px; background:var(--panel-2); }
.track-v12 .track-comment-login > span { display:grid; grid-template-columns:20px minmax(0,1fr); gap:5px 8px; min-width:0; }
.track-v12 .track-comment-login strong { font-size:12px; }
.track-v12 .track-comment-login small { grid-column:2; font-size:11px; color:var(--muted); }
.track-v12 .track-comment-login .lucide { grid-row:span 2; width:18px; height:18px; color:var(--muted); }
:root[data-theme] .track-v12 .comment { display:flex; align-items:flex-start; gap:11px; border-bottom:1px solid var(--line); padding:16px 0; }
.track-v12 .comment-body { flex:1; min-width:0; }
.track-v12 .comment-body p { white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.65; font-size:13px; }
.track-v12 .comment-reply-branch { padding-left:10px; margin-left:0; border-left:1px solid var(--line); }
.track-v12 .comment-avatar { flex:none; width:32px; height:32px; font-size:10px; }
.track-v12 .comment-actions { display:flex; flex-wrap:wrap; gap:10px; }
.track-v12 .track-admin-fold { border:1px solid var(--line); border-radius:15px; margin-top:22px; background:var(--panel); }
.track-v12 .track-admin-fold > summary { padding:16px 20px; cursor:pointer; font-weight:600; font-size:13px; }
.track-v12 .track-admin-fold .track-admin-section { margin:0; }
.track-v12 .track-admin-fold .info-panel { border:0; box-shadow:none; }
.track-v12 .track-related-section { margin-top:30px; }
#playlistModal .playlist-picker { width:min(590px,calc(100vw - 32px)); max-height:min(850px,calc(var(--mobile-visible-height,100dvh) - 32px)); display:flex; flex-direction:column; padding:0; overflow:hidden; border:1px solid var(--line); border-radius:21px; background:var(--panel); color:var(--text); box-shadow:var(--shadow); }
#playlistModal .composer-dialog-head { padding:23px; border-bottom:1px solid var(--line); flex:none; }
#playlistModal .composer-dialog-head h2 { font-size:24px; letter-spacing:-.04em; margin:4px 0 7px; }
#playlistModal .composer-dialog-head p { font-size:12px; color:var(--muted); margin:0; }
#playlistModal .composer-dialog-head .eyebrow { font-size:9px; }
#playlistModal .playlist-picker-body { overflow:auto; min-height:0; padding:20px 23px; overscroll-behavior:contain; }
#playlistModal .playlist-picker-track { display:grid; grid-template-columns:54px minmax(0,1fr); gap:12px; align-items:center; padding-bottom:18px; margin-bottom:18px; border-bottom:1px solid var(--line); }
#playlistModal .playlist-picker-art { display:grid; place-items:center; position:relative; width:48px; height:48px; overflow:hidden; border-radius:9px; color:var(--muted); background:var(--panel-2); background-size:cover; }
#playlistModal .playlist-picker-art img { width:100%; height:100%; object-fit:cover; }
#playlistModal .playlist-picker-track .playlist-picker-art { width:54px; height:54px; }
#playlistModal .playlist-picker-track > div { min-width:0; display:grid; gap:4px; }
#playlistModal .playlist-picker-track strong { font-size:14px; overflow-wrap:anywhere; }
#playlistModal .playlist-picker-track small,#playlistModal .playlist-picker-track > div > span { font-size:11px; color:var(--muted); }
#playlistModal .playlist-picker-tools { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:9px; }
#playlistModal .playlist-picker-search { display:flex; gap:8px; align-items:center; border:1px solid var(--control-line); border-radius:10px; padding:0 10px; min-width:0; }
#playlistModal .playlist-picker-search .lucide { width:17px; height:17px; color:var(--muted); flex:none; }
#playlistModal .playlist-picker-search input { border:0; padding:0; background:none; box-shadow:none; min-height:44px; width:100%; min-width:0; color:var(--text); outline-offset:2px; }
#playlistModal select { color:var(--text); background:var(--panel); border:1px solid var(--control-line); border-radius:10px; min-height:44px; font:inherit; font-size:12px; padding:0 10px; max-width:100%; }
#playlistModal .playlist-picker-create-toggle { display:flex; align-items:center; gap:7px; min-height:44px; border:0; padding:0; margin-top:9px; background:none; color:var(--accent); font-size:12px; font-weight:600; }
#playlistModal .playlist-picker-create { display:grid; grid-template-columns:minmax(0,1fr) 170px; gap:10px; padding:14px; background:var(--panel-2); border:1px solid var(--line); border-radius:12px; margin:8px 0 14px; }
#playlistModal .playlist-picker-create[hidden] { display:none; }
#playlistModal .playlist-picker-create label { display:grid; gap:6px; font-size:11px; min-width:0; }
#playlistModal .playlist-picker-create input { min-width:0; width:100%; min-height:44px; border:1px solid var(--control-line); border-radius:9px; padding:0 10px; background:var(--panel); color:var(--text); }
#playlistModal .playlist-picker-create button { grid-column:1/-1; min-height:40px; }
#playlistModal .playlist-picker-options { display:grid; gap:7px; }
#playlistModal .playlist-picker-option { display:grid; grid-template-columns:48px minmax(0,1fr) 21px; gap:12px; align-items:center; padding:11px; border:1px solid var(--line); border-radius:12px; cursor:pointer; background:var(--panel); }
#playlistModal .playlist-picker-option:hover { background:var(--panel-2); }
#playlistModal .playlist-picker-option.is-selected { border-color:var(--accent); background:var(--active-bg); }
#playlistModal .playlist-picker-option.is-added { cursor:default; color:var(--muted); }
#playlistModal .playlist-picker-copy { min-width:0; display:grid; gap:5px; }
#playlistModal .playlist-picker-copy strong { font-size:13px; font-weight:600; overflow-wrap:anywhere; }
#playlistModal .playlist-picker-copy small { display:flex; flex-wrap:wrap; align-items:center; gap:4px; color:var(--muted); font-size:10px; }
#playlistModal .playlist-picker-copy small .lucide { width:11px; height:11px; }
#playlistModal .playlist-picker-copy em { color:var(--success); font-size:10px; font-style:normal; }
#playlistModal input[type=checkbox] { appearance:auto; width:19px; height:19px; min-height:0; padding:0; margin:0; accent-color:var(--accent); box-shadow:none; }
#playlistModal .composer-dialog-actions { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:17px 23px; border-top:1px solid var(--line); flex:none; background:var(--panel); }
#playlistPickerSelection { font-size:12px; color:var(--muted); }
#playlistModal .composer-dialog-actions .primary-btn { min-height:44px; padding:0 20px; }
#playlistModal .playlist-picker-empty { display:grid; justify-items:center; text-align:center; padding:25px 14px; gap:10px; color:var(--muted); background:var(--panel-2); border-radius:12px; }
#playlistModal .playlist-picker-empty strong { color:var(--text); font-size:13px; }
#playlistModal .playlist-picker-empty p { font-size:12px; margin:0; line-height:1.6; }
#playlistModal :is(button,input,select):focus-visible,.track-v12 :is(button,a,textarea):focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
@media(max-width:1100px) {
  :root[data-theme] .track-v12 .track-page-layout { grid-template-columns:minmax(0,1fr) 225px; gap:16px; }
  :root[data-theme] .track-v12 .track-hero-content { grid-template-columns:240px minmax(0,1fr); gap:24px; }
  :root[data-theme] .track-v12 :is(.track-content-card,.track-author-card,.track-facts-card) { padding:19px; }
}
@media(max-width:800px) {
  :root[data-theme] .track-v12 .track-page-layout { grid-template-columns:minmax(0,1fr); }
  :root[data-theme] .track-v12 .track-page-sidebar { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:600px) {
  :root[data-theme] .track-v12 .track-page-hero { padding:20px 16px; border-radius:17px; }
  :root[data-theme] .track-v12 .track-hero-content { grid-template-columns:minmax(0,1fr); gap:20px; }
  :root[data-theme] .track-v12 .track-page-cover { width:min(70vw,210px); justify-self:center; }
  :root[data-theme] .track-v12 .track-hero-copy h1 { font-size:29px; }
  :root[data-theme] .track-v12 .track-type-row .eyebrow { width:100%; }
  :root[data-theme] .track-v12 .track-primary-actions { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) 44px; gap:7px; }
  :root[data-theme] .track-v12 :is(.track-listen-btn,.track-save-btn) { min-width:0; padding:0 9px; font-size:12px; gap:6px; min-height:44px; }
  :root[data-theme] .track-v12 .track-round-action { width:44px; height:44px; min-height:44px; }
  .track-v12 .track-jump-nav { gap:0; justify-content:space-between; }
  .track-v12 .track-jump-nav button { padding:0 6px; font-size:11px; }
  :root[data-theme] .track-v12 :is(.track-content-card,.track-author-card,.track-facts-card) { padding:18px 15px; }
  :root[data-theme] .track-v12 .track-source-card { grid-template-columns:44px minmax(0,1fr) 30px; padding:10px; gap:9px; }
  :root[data-theme] .track-v12 .track-source-cover { width:44px; height:44px; }
  :root[data-theme] .track-v12 .track-source-open { width:30px; }
  :root[data-theme] .track-v12 .track-page-sidebar { grid-template-columns:minmax(0,1fr); }
  .track-v12 .track-secondary-actions { gap:6px 13px; }
  #playlistModal .playlist-picker { width:calc(100vw - 20px); max-height:calc(var(--mobile-visible-height,100dvh) - 20px); border-radius:18px; }
  #playlistModal .composer-dialog-head { padding:19px 17px; }
  #playlistModal .composer-dialog-head h2 { font-size:22px; }
  #playlistModal .playlist-picker-body { padding:16px; }
  #playlistModal .playlist-picker-tools { grid-template-columns:minmax(0,1fr); }
  #playlistModal .playlist-picker-sort select { width:100%; }
  #playlistModal .playlist-picker-create { grid-template-columns:minmax(0,1fr); }
  #playlistModal .playlist-picker-create button { grid-column:auto; }
  #playlistModal .composer-dialog-actions { padding:14px 16px; }
  #playlistModal .playlist-picker-option { padding:10px; gap:10px; }
  #playlistModal :is(input:not([type=checkbox]),select),.track-v12 .comment-form textarea { font-size:16px; }
}

.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
#playlistModal .playlist-picker-search:focus-within { outline:2px solid var(--accent); outline-offset:2px; }
#playlistModal .playlist-picker-search input:focus-visible { outline:none; }
:root[data-theme] .track-v12 .quality-badge { border:1px solid var(--line); color:var(--muted); background:var(--panel-2); border-radius:6px; font-size:10px; }
.track-v12 .track-page-cover.image-unavailable, .track-v12 .track-source-cover.image-unavailable, #playlistModal .playlist-picker-art.image-unavailable { display:grid; place-items:center; background:var(--panel-2); }
.track-v12 .image-unavailable > img[hidden], #playlistModal .image-unavailable > img[hidden] { display:none; }
.track-v12 .image-unavailable::after, #playlistModal .image-unavailable::after { content:'♪'; font-size:30px; color:var(--muted); }
.track-v12 .track-page-cover.image-unavailable::after { font-size:70px; color:var(--accent-2); }

:root[data-theme] .track-v12 .track-page-hero::after { display:none; }
:root[data-theme] .track-v12 .track-hero-stats { flex-direction:row; align-items:center; }
:root[data-theme] .track-v12 .track-source-card > a { grid-column:3; grid-row:1; justify-self:end; }
:root[data-theme] .track-v12 .track-source-copy strong,:root[data-theme] .track-v12 .track-source-copy small { white-space:normal; overflow-wrap:anywhere; text-overflow:clip; }

:root[data-theme] .track-v12 .track-page-cover.image-unavailable::after { display:grid; place-items:center; inset:0; background:none; opacity:1; z-index:1; }
.track-v12 .track-cover-label { z-index:2; }

/* Playlist listening workspace — v13 */
.playlist-v13 { min-width:0; color:var(--text); }
.playlist-v13 .pl-breadcrumb { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; color:var(--muted); font-size:12px; }
.playlist-v13 .pl-breadcrumb button { display:flex; align-items:center; gap:8px; padding:0; min-height:40px; background:none; border:0; color:var(--muted); }
.playlist-v13 .pl-hero { display:grid; grid-template-columns:286px minmax(0,1fr); gap:30px; align-items:center; padding:28px; background:var(--panel); border:1px solid var(--line); border-radius:22px; margin-bottom:24px; }
.playlist-v13 .pl-art { aspect-ratio:1; width:100%; position:relative; display:grid; place-items:center; overflow:hidden; border-radius:16px; background:var(--panel-2); box-shadow:0 12px 30px #0002; color:var(--accent-2); align-self:start; }
.playlist-v13 .pl-art>img,.playlist-v13 .pl-art-grid { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; }
.playlist-v13 .pl-art-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); gap:2px; }
.playlist-v13 .pl-art-grid.is-single { grid-template-columns:1fr; grid-template-rows:1fr; }
.playlist-v13 .pl-art-grid img { width:100%; height:100%; object-fit:cover; min-width:0; min-height:0; }
.playlist-v13 .pl-art-symbol { display:grid; place-items:center; gap:12px; }
.playlist-v13 .pl-art-symbol .lucide { width:62px; height:62px; stroke-width:1.3; }
.playlist-v13 .pl-art-symbol small { font-size:14px; letter-spacing:.14em; }
.playlist-v13 .pl-hero-copy { min-width:0; }
.playlist-v13 .pl-kicker { display:flex; align-items:center; flex-wrap:wrap; gap:7px; margin-bottom:13px; }
.playlist-v13 .pl-kicker>span { display:inline-flex; gap:6px; align-items:center; padding:5px 8px; border:1px solid var(--line); border-radius:6px; background:var(--panel-2); color:var(--muted); font-size:10px; }
.playlist-v13 .pl-kicker .lucide { width:12px; height:12px; }
.playlist-v13 .pl-hero h1 { font-size:clamp(28px,3.5vw,44px); letter-spacing:-.045em; font-weight:700; line-height:1.12; margin:0 0 16px; overflow-wrap:anywhere; color:var(--text); }
.playlist-v13 .pl-owner { display:flex; flex-wrap:wrap; align-items:center; gap:8px 15px; color:var(--muted); font-size:11px; }
.playlist-v13 .pl-owner button { display:flex; align-items:center; gap:7px; border:0; padding:0; min-height:32px; background:none; color:var(--text); font-size:12px; font-weight:600; overflow-wrap:anywhere; }
.playlist-v13 .pl-owner .lucide { width:12px; height:12px; flex:none; color:var(--muted); }
.playlist-v13 .pl-owner-avatar { display:grid; place-items:center; border-radius:50%; width:28px; height:28px; flex:none; background:var(--panel-2); color:var(--accent-2); font-size:9px; }
.playlist-v13 .pl-description { font-size:13px; color:var(--soft); line-height:1.7; white-space:pre-wrap; overflow-wrap:anywhere; margin:14px 0 0; }
.playlist-v13 .pl-tags { display:flex; flex-wrap:wrap; gap:6px; margin:13px 0 0; }
.playlist-v13 .pl-tags span { border-radius:6px; border:1px solid var(--line); background:var(--panel-2); color:var(--muted); padding:5px 8px; font-size:10px; overflow-wrap:anywhere; max-width:100%; }
.playlist-v13 .pl-actions { margin-top:22px; display:grid; gap:14px; }
.playlist-v13 .pl-listen-actions { display:flex; align-items:stretch; flex-wrap:wrap; gap:8px; }
.playlist-v13 .pl-listen-actions>.primary-btn,.playlist-v13 .pl-action { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; border-radius:10px; padding:10px 13px; font-size:12px; line-height:1.4; text-align:center; }
.playlist-v13 .pl-listen-actions>.primary-btn { min-width:145px; }
.playlist-v13 .pl-action { border:1px solid var(--line); background:var(--panel); color:var(--soft); }
.playlist-v13 .pl-action:hover { background:var(--panel-2); color:var(--text); border-color:var(--control-line); }
.playlist-v13 .pl-action[aria-pressed=true] { color:var(--accent); border-color:var(--accent); background:var(--active-bg); }
.playlist-v13 .pl-actions .lucide { width:16px; height:16px; flex:none; }
.playlist-v13 .pl-actions button>span { overflow-wrap:anywhere; }
.playlist-v13 .pl-manage-actions { display:flex; flex-wrap:wrap; gap:8px; padding-top:14px; border-top:1px solid var(--line); }
.playlist-v13 .pl-utility-actions { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:8px; }
.playlist-v13 .pl-utility-actions .pl-action { min-height:36px; border:0; padding:5px 0; background:none; color:var(--muted); font-size:11px; }
.playlist-v13 .pl-utility-actions .pl-action:hover { color:var(--danger); text-decoration:underline; text-underline-offset:3px; }
.playlist-v13 .pl-square,.playlist-v13 .pl-menu>summary { width:40px; height:40px; min-height:40px; display:grid; place-items:center; border:1px solid var(--line); border-radius:9px; background:var(--panel); color:var(--muted); padding:0; flex:none; }
.playlist-v13 .pl-square:hover,.playlist-v13 .pl-menu>summary:hover { background:var(--panel-2); color:var(--text); }
.playlist-v13 .pl-square.is-liked { color:var(--accent); background:var(--active-bg); }
.playlist-v13 .pl-menu { position:relative; flex:none; }
.playlist-v13 .pl-menu>summary { cursor:pointer; list-style:none; }
.playlist-v13 .pl-menu>summary::-webkit-details-marker { display:none; }
.playlist-v13 .pl-menu>div { display:grid; gap:3px; position:absolute; top:calc(100% + 7px); right:0; z-index:45; width:230px; max-width:calc(100vw - 36px); padding:7px; border:1px solid var(--line); border-radius:12px; background:var(--panel); box-shadow:0 12px 34px #0003; }
.playlist-v13 .pl-menu.opens-up>div { top:auto; bottom:calc(100% + 7px); }
.playlist-v13 .pl-menu:not([open])>div { display:none; }
.playlist-v13 .pl-menu button { display:flex; align-items:center; gap:9px; width:100%; min-height:40px; border:0; border-radius:7px; padding:8px 9px; background:none; color:var(--text); text-align:left; font-size:12px; line-height:1.4; }
.playlist-v13 .pl-menu button:hover { background:var(--panel-2); }
.playlist-v13 .pl-menu .danger-text { color:var(--danger); }
.playlist-v13 .pl-menu .lucide { width:16px; height:16px; flex:none; }
.playlist-v13 .pl-notice { display:flex; gap:11px; align-items:flex-start; padding:16px 18px; margin:0 0 20px; border:1px solid var(--line); border-radius:12px; background:var(--panel-2); color:var(--soft); font-size:12px; line-height:1.6; }
.playlist-v13 .pl-notice>svg { width:19px; height:19px; flex:none; margin-top:2px; }
.playlist-v13 .pl-notice p { margin:0; }
.playlist-v13 .pl-notice strong { display:block; font-size:13px; margin-bottom:3px; }
.playlist-v13 .pl-workspace { min-width:0; background:var(--panel); border:1px solid var(--line); border-radius:19px; padding:22px; }
.playlist-v13 .pl-list-heading { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:18px; }
.playlist-v13 .pl-list-heading .eyebrow { margin:0 0 4px; font-size:9px; }
.playlist-v13 .pl-list-heading h2 { font-size:23px; letter-spacing:-.035em; margin:0; }
.playlist-v13 .pl-list-heading h2>span { margin-left:6px; font-size:13px; color:var(--muted); font-weight:400; letter-spacing:0; }
.playlist-v13 .pl-list-heading>.muted-link { min-height:40px; font-size:11px; }
.playlist-v13 .pl-tools { display:grid; grid-template-columns:minmax(0,1fr) minmax(130px,170px) minmax(150px,180px); gap:9px; align-items:end; position:sticky; top:76px; z-index:5; background:var(--panel); padding:8px 0; }
.playlist-v13 .pl-search { display:flex; align-items:center; gap:8px; min-height:44px; min-width:0; border:1px solid var(--control-line); border-radius:10px; padding:0 11px; }
.playlist-v13 .pl-search>svg { width:17px; height:17px; flex:none; color:var(--muted); }
.playlist-v13 .pl-search input { min-width:0; width:100%; min-height:42px; border:0; border-radius:0; box-shadow:none; background:none; padding:0; font:inherit; font-size:13px; color:var(--text); outline:none; }
.playlist-v13 .pl-search:focus-within { outline:2px solid var(--accent); outline-offset:2px; }
.playlist-v13 .pl-search button { display:grid; place-items:center; border:0; background:none; padding:0; width:28px; height:34px; color:var(--muted); flex:none; }
.playlist-v13 .pl-search button[hidden] { display:none; }
.playlist-v13 .pl-select { display:grid; gap:5px; min-width:0; }
.playlist-v13 .pl-select>span { font-size:10px; color:var(--muted); }
.playlist-v13 .pl-select select { width:100%; min-width:0; min-height:44px; padding:0 10px; border:1px solid var(--control-line); border-radius:10px; background:var(--panel); color:var(--text); font:inherit; font-size:12px; }
.playlist-v13 .pl-list-status { display:flex; align-items:center; flex-wrap:wrap; justify-content:space-between; gap:10px; margin:10px 0 18px; }
.playlist-v13 .pl-list-status p { color:var(--muted); font-size:11px; margin:0; }
.playlist-v13 .pl-table-heading,.playlist-v13 .pl-track { display:grid; grid-template-columns:24px 44px minmax(0,1fr) 90px 50px 86px; gap:12px; align-items:center; padding:11px; }
.playlist-v13 .pl-table-heading { font-size:10px; color:var(--muted); border-bottom:1px solid var(--line); padding-top:0; padding-bottom:12px; }
.playlist-v13 .pl-table-heading>span:nth-child(2) { grid-column:2/4; }
.playlist-v13 .pl-track { border-bottom:1px solid var(--line); border-radius:10px; position:relative; min-width:0; }
.playlist-v13 .pl-track:hover { background:var(--panel-2); }
.playlist-v13 .pl-track.is-current { background:var(--active-bg); }
.playlist-v13 .pl-track-number { color:var(--muted); font-size:11px; text-align:center; }
.playlist-v13 .pl-track-cover { width:44px; height:44px; border:1px solid var(--line); padding:0; border-radius:8px; background:var(--panel-2); position:relative; overflow:hidden; background-size:cover; background-position:center; }
.playlist-v13 .pl-track-cover>img { width:100%; height:100%; object-fit:cover; }
.playlist-v13 .pl-track-cover>span { position:absolute; inset:0; display:grid; place-items:center; color:#fff; background:#15171970; }
.playlist-v13 .pl-track-cover>span .lucide { width:18px; height:18px; }
.playlist-v13 .pl-track-copy { min-width:0; display:grid; gap:5px; }
.playlist-v13 .pl-track-copy button { display:block; min-width:0; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:left; background:none; border:0; padding:0; }
.playlist-v13 .pl-track-copy .link-title { color:var(--text); font-size:13px; font-weight:600; }
.playlist-v13 .pl-track-copy .muted-link { color:var(--muted); font-size:11px; }
.playlist-v13 .pl-track-copy>small { font-size:10px; color:var(--muted); }
.playlist-v13 .pl-track-copy>.pl-track-mobile-duration { display:none; }
.playlist-v13 .pl-track-genre { color:var(--muted); font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.playlist-v13 .pl-track-duration { color:var(--muted); font-size:11px; font-variant-numeric:tabular-nums; }
.playlist-v13 .pl-track-actions { display:flex; justify-content:flex-end; align-items:center; gap:6px; }
.playlist-v13 .pl-track-actions>.pl-square,.playlist-v13 .pl-row-menu>summary { width:38px; height:38px; min-height:38px; border:0; background:none; }
.playlist-v13 .pl-track-actions .lucide { width:17px; height:17px; }
.playlist-v13 .pl-list-footer { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:15px; margin-top:18px; color:var(--muted); font-size:12px; }
.playlist-v13 .pl-list-footer:empty { display:none; }
.playlist-v13 .pl-list-empty,.pl-empty-page { display:grid; justify-items:center; gap:12px; padding:48px 18px; text-align:center; background:var(--panel-2); border-radius:13px; }
.playlist-v13 .pl-list-empty>svg,.pl-empty-page svg { width:31px; height:31px; color:var(--muted); }
.playlist-v13 .pl-list-empty h3,.pl-empty-page h1 { margin:0; font-size:19px; }
.playlist-v13 .pl-list-empty p,.pl-empty-page p { margin:0; max-width:460px; color:var(--muted); font-size:13px; line-height:1.7; }
.playlist-v13 button:disabled { opacity:.45; cursor:default; }
.playlist-v13 :is(button,a,select,summary):focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.playlist-v13 .image-unavailable>img[hidden],.playlist-v13 .pl-art-grid img[hidden] { display:none; }
.playlist-v13 .pl-art.image-unavailable::after { content:'♪'; font-size:70px; color:var(--accent-2); position:relative; z-index:1; }
@media(max-width:1100px) {
  .playlist-v13 .pl-hero { grid-template-columns:240px minmax(0,1fr); gap:24px; padding:24px; }
  .playlist-v13 .pl-tools { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .playlist-v13 .pl-search { grid-column:1/-1; }
  .playlist-v13 .pl-table-heading,.playlist-v13 .pl-track { grid-template-columns:22px 42px minmax(0,1fr) 48px 82px; gap:10px; padding:10px 5px; }
  .playlist-v13 .pl-table-heading>span:nth-child(3),.playlist-v13 .pl-track-genre { display:none; }
  .playlist-v13 .pl-track-cover { width:42px; height:42px; }
}
@media(max-width:700px) {
  .playlist-v13 .pl-hero { grid-template-columns:minmax(0,1fr); gap:22px; padding:22px 18px; border-radius:18px; }
  .playlist-v13 .pl-art { width:min(70vw,230px); justify-self:center; }
  .playlist-v13 .pl-hero h1 { font-size:31px; }
  .playlist-v13 .pl-workspace { padding:18px 12px; border-radius:16px; }
  .playlist-v13 .pl-tools { top:65px; }
  .playlist-v13 .pl-list-heading { align-items:flex-start; }
  .playlist-v13 .pl-list-heading h2 { font-size:21px; }
  .playlist-v13 .pl-list-heading>.muted-link { font-size:10px; max-width:110px; text-align:right; }
  .playlist-v13 .pl-table-heading { display:none; }
  .playlist-v13 .pl-track { grid-template-columns:42px minmax(0,1fr) 76px; gap:9px; padding:12px 3px; }
  .playlist-v13 .pl-track-number,.playlist-v13 .pl-track-duration { display:none; }
  .playlist-v13 .pl-track-copy { grid-template-columns:minmax(0,1fr) auto; gap:6px; }
  .playlist-v13 .pl-track-copy>.link-title { grid-column:1/-1; font-size:12px; }
  .playlist-v13 .pl-track-copy>.muted-link { grid-column:1; font-size:10px; }
  .playlist-v13 .pl-track-copy>.pl-track-mobile-duration { display:block; grid-column:2; font-size:10px; font-variant-numeric:tabular-nums; }
  .playlist-v13 .pl-track-copy>small:not(.pl-track-mobile-duration) { grid-column:1/-1; }
  .playlist-v13 .pl-track-actions { gap:0; }
  .playlist-v13 .pl-track-actions>.pl-square,.playlist-v13 .pl-row-menu>summary { width:38px; height:44px; min-height:44px; }
  .playlist-v13 .pl-search input,.playlist-v13 .pl-select select { font-size:16px; }
  .playlist-v13 .pl-notice { padding:14px; }
}
@media(max-width:380px) {
  .playlist-v13 .pl-art { width:min(70vw,210px); }
  .playlist-v13 .pl-hero h1 { font-size:28px; }
  .playlist-v13 .pl-hero { padding:20px 15px; }
}

#playlistDetail .pl-search input,#playlistDetail .pl-search input:focus { border:0; border-radius:0; outline:none; box-shadow:none; padding:0; background:none; }

@media(max-width:700px) {
  .playlist-v13 .pl-actions { gap:12px; margin-top:20px; }
  .playlist-v13 .pl-listen-actions,.playlist-v13 .pl-manage-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .playlist-v13 .pl-listen-actions>.primary-btn { grid-column:1/-1; min-width:0; }
  .playlist-v13 .pl-manage-actions>.pl-action:last-child:nth-child(odd) { grid-column:1/-1; }
  .playlist-v13 .pl-actions button { min-width:0; width:100%; }
  .playlist-v13 .pl-action { padding:10px 8px; }
  .playlist-v13 .pl-utility-actions { justify-content:flex-start; }
  .playlist-v13 .pl-utility-actions>.pl-action { width:auto; }
}

@media(max-width:380px) {
  .playlist-v13 .pl-manage-actions { grid-template-columns:minmax(0,1fr); }
}