/* Queenlara dashboard styles. Generated by merging the former layered stylesheets in cascade order; edit freely. */

/* ── from shell.css ── */
:root {
  color-scheme: dark;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  color: var(--text);
  font: 14px/1.5 Inter,Segoe UI,sans-serif;
}
.layout {
  display: grid;
}
aside {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 22px 18px;
  background: var(--side);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}
.logo {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
}
.logo span,
.brandMark {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: linear-gradient(135deg,var(--purple),var(--pink));
  font-weight: 900;
}
.search {
  display: flex;
  gap: 9px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.search span {
  flex: 1;
}
.search kbd {
  font-size: 10px;
  padding: 2px 5px;
  border-radius: 4px;
}
.serverPicker {
  display: flex;
  align-items: center;
  gap: 9px;
}
.serverPicker img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--panel2);
}
select {
  width: 100%;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 10px;
}
nav {
  overflow: auto;
  padding-right: 4px;
}
nav small {
  display: block;
  color: #e4e3ec;
  font-size: 11px;
  font-weight: 800;
  margin: 20px 9px 7px;
}
.nav {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border-radius: 9px;
  cursor: pointer;
}
.asideBottom {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
}
.asideBottom button,
#menu {
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.top {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
}
.top h2 {
  margin: 0;
}
.crumb {
  letter-spacing: .15em;
  color: var(--purple);
}
.user {
  display: flex;
  align-items: center;
  gap: 9px;
}
.user img {
  border-radius: 50%;
}
#menu {
  display: none;
  font-size: 22px;
}
.serverHero {
  display: flex;
  align-items: center;
}
.serverHero img {
  border-radius: 50%;
  background: var(--panel);
}
.serverHero h1 {
  margin: 0;
}
.serverHero p {
  margin: 2px 0;
}
.serverHero button,
.discordBtn,
.play button {
  margin-left: auto;
  border: 0;
  border-radius: 10px;
  background: var(--purple);
  color: white;
  padding: 12px 16px;
  font-weight: 700;
  cursor: pointer;
}
.overviewGrid {
  display: grid;
}
.panel {
  border: 1px solid var(--line);
}
.panel>span {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: .12em;
}
.metrics {
  display: grid;
  grid-template-columns: repeat(4,1fr);
}
.metrics>span {
  grid-column: 1/-1;
}
.metrics div {
  display: grid;
}
.metrics small,
.health small {
  color: var(--muted);
}
.health {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.health>span {
  width: 100%;
}
.health div:last-child {
  display: grid;
}
.healthRing {
  width: 64px;
  height: 64px;
  border: 7px solid var(--green);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 20px;
  font-weight: 900;
}
.attention {
  margin-top: 14px;
}
.attention p {
  color: var(--green);
}
h3 {
  margin-top: 30px;
}
.featureGrid {
  display: grid;
}
.featureGrid button {
  text-align: left;
  color: var(--text);
  border: 1px dashed var(--line);
  border-radius: 16px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
}
.featureGrid button:hover {
  border-style: solid;
}
.featureGrid i {
  font-style: normal;
  color: var(--purple);
  font-size: 25px;
}
.featureGrid span {
  color: var(--muted);
}
.sectionTitle span {
  color: var(--purple);
  font-size: 11px;
  letter-spacing: .14em;
}
.sectionTitle p {
  color: var(--muted);
}
.guild,
.state {
  color: var(--purple);
  font-size: 11px;
  letter-spacing: .12em;
}
.title {
  font-size: 27px;
  margin: 8px 0;
}
.artist {
  color: var(--muted);
}
.progress {
  height: 4px;
  background: #303147;
  margin: 24px 0;
}
.progress i {
  display: block;
  width: 42%;
  height: 100%;
  background: linear-gradient(90deg,var(--purple),var(--pink));
}
.controls {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 8px;
}
.controls button,
.play button {
  border: 0;
  border-radius: 9px;
  padding: 10px;
  background: #2b2d42;
  color: white;
}
.controls .danger {
  background: #87354a;
}
.play {
  display: flex;
  gap: 9px;
  margin: 18px 0;
}
.play input,
#loginForm input {
  flex: 1;
  background: #10111a;
  color: white;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 12px;
}
.volume {
  display: grid;
  grid-template-columns: auto 1fr 45px;
  gap: 12px;
}
.volume input {
  accent-color: var(--purple);
}
.toggle {
  display: block;
  margin-top: 15px;
}
.toggle input {
  accent-color: var(--green);
}
details {
  margin-top: 18px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.empty {
  text-align: center;
  margin-top: 40px;
  padding: 70px;
}
.empty div {
  font-size: 38px;
  color: var(--purple);
}
.loginPage {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 0,#302356,transparent 45%),var(--bg);
  background: radial-gradient(circle at 50% 0,oklch(from var(--purple) 0.301 calc(c * 0.44) h),transparent 45%),var(--bg);
}
.loginCard {
  width: min(480px,calc(100% - 32px));
  padding: 38px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  text-align: center;
}
.brandMark {
  margin: auto;
}
.loginCard h1 {
  font-size: 30px;
}
.loginCard p,
.loginCard small {
  color: var(--muted);
}
.discordBtn {
  display: block;
  text-decoration: none;
  margin: 24px 0;
}
.loginCard details {
  border-top: 1px solid var(--line);
  padding-top: 15px;
}
.loginCard summary {
  cursor: pointer;
  color: var(--muted);
}
#loginForm {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
#loginForm button {
  border: 0;
  border-radius: 9px;
  background: var(--purple);
  color: white;
  padding: 10px;
}
.loginCard small {
  display: block;
  margin-top: 16px;
}
@media (max-width: 850px) {
  aside {
    position: fixed;
    z-index: 5;
    width: 290px;
    transform: translateX(-105%);
    transition: .2s;
  }
  body.menuOpen aside {
    transform: none;
  }
  #menu {
    display: block;
    margin-right: 12px;
  }
  .metrics {
    grid-template-columns: 1fr 1fr;
  }
  .serverHero {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .serverHero button {
    margin-left: 82px;
  }
  .account {
    display: none;
  }
  .play {
    display: grid;
  }
  .controls {
    grid-template-columns: 1fr 1fr;
  }
}

/* ── from mobile.css ── */
.search {
  width: 100%;
  text-align: left;
  cursor: pointer;
}
.search:focus-visible,
.mobileActions button:focus-visible,
#menu:focus-visible,
#logout:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
}
.mobileActions {
  display: none;
}
#menuBackdrop {
  display: none;
}
@media (max-width: 850px) {
  #app aside {
    width: min(320px, calc(100vw - 48px));
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    padding-bottom: max(18px, env(safe-area-inset-bottom));
  }
  #app nav {
    flex: 1;
    min-height: 0;
  }
  #app .asideBottom {
    flex: 0 0 auto;
    padding-top: 12px;
    border-top: 1px solid var(--line);
  }
  #menuBackdrop {
    position: fixed;
    z-index: 4;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: rgb(4 5 12 / 68%);
  }
  body.menuOpen #menuBackdrop {
    display: block;
  }
  .user span {
    display: none;
  }
  .mobileActions {
    display: flex;
    flex: 0 0 auto;
    gap: 6px;
  }
  .mobileActions button {
    min-height: 40px;
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: 0 10px;
    background: var(--panel);
    color: var(--text);
    cursor: pointer;
  }
  #menu {
    flex: 0 0 auto;
    min-width: 40px;
    min-height: 40px;
  }
}
@media (max-width: 480px) {
  main {
    padding-right: 12px;
    padding-left: 12px;
  }
  .top {
    margin-bottom: 16px;
  }
  .mobileActions button {
    min-height: 42px;
    padding: 0 8px;
    font-size: 12px;
  }
}
@media (max-width: 350px) {
  .mobileActions {
    display: none;
  }
}

/* ── from v217-queue.css ── */
.immersiveQueue .immersiveQueueList .immersiveQueueRow {
  grid-template-columns: 42px minmax(0,1fr) auto auto auto;
}
.immersiveQueueRow .immersiveQueuePlay {
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #292b40;
  color: #fff;
  font-size: 13px;
}
.immersiveQueueRow .immersiveQueuePlay:hover {
  background: var(--purple);
}
.immersiveQueueLoadMore {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #24263a;
  color: var(--text);
  padding: 9px;
  cursor: pointer;
}
.immersiveQueueLoadMore:hover {
  border-color: var(--purple);
}
.immersiveQueueLoadMore:disabled {
  opacity: .6;
  cursor: wait;
}
.queuePlaybackStatus {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}
.queuePlaybackStatus.isPlaying {
  color: #c4aeff;
  color: oklch(from var(--purple) 0.799 calc(c * 0.56) h);
}
.queuePlayingAnimation {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 16px;
  color: #b89aff;
  color: oklch(from var(--purple) 0.753 calc(c * 0.71) h);
}
.queuePlayingAnimation i {
  width: 3px;
  height: 6px;
  border-radius: 3px;
  background: currentColor;
  animation: queuePlayingPulse .75s ease-in-out infinite alternate;
}
.queuePlayingAnimation i:nth-child(2) {
  height: 15px;
  animation-delay: .2s;
}
.queuePlayingAnimation i:nth-child(3) {
  height: 10px;
  animation-delay: .4s;
}
.queuePlaybackStatus:not(.isPlaying) .queuePlayingAnimation i {
  height: 3px;
  animation: none;
}
@keyframes queuePlayingPulse {
  from{transform:scaleY(.45);opacity:.55}
  to{transform:scaleY(1);opacity:1}
}
@media (prefers-reduced-motion: reduce) {
  .queuePlayingAnimation i {
    animation: none !important;
  }
}
.queuePlayConfirmOverlay[hidden] {
  display: none !important;
}
.queuePlayConfirmOverlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 20px;
}
.queuePlayConfirmBackdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: #090910c9;
  backdrop-filter: blur(7px);
  cursor: default;
}
.queuePlayConfirmDialog {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0,1fr);
  gap: 0 16px;
  width: min(440px,100%);
  padding: 26px;
  border: 1px solid #3a354c;
  border-radius: 18px;
  background: linear-gradient(145deg,#222331,#191a26);
  box-shadow: 0 24px 80px #000a;
  animation: queueConfirmEnter .18s ease-out;
}
.queuePlayConfirmIcon {
  grid-row: 1/3;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 15px;
  background: #9a70ff24;
  background: oklch(from var(--purple) 0.656 calc(c * 1) h / 0.141);
  color: #b79aff;
  color: oklch(from var(--purple) 0.752 calc(c * 0.71) h);
  font-size: 20px;
}
.queuePlayConfirmEyebrow {
  color: #b79aff;
  color: oklch(from var(--purple) 0.752 calc(c * 0.71) h);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .15em;
}
.queuePlayConfirmDialog h2 {
  margin: 5px 0 7px;
  color: var(--text);
  font-size: 19px;
}
.queuePlayConfirmDialog p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}
.queuePlayConfirmActions {
  grid-column: 2;
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 24px;
}
.queuePlayConfirmActions button {
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #292b3d;
  color: var(--text);
  font-weight: 700;
  cursor: pointer;
}
.queuePlayConfirmActions button:hover {
  border-color: #8060d6;
  border-color: oklch(from var(--purple) 0.579 calc(c * 0.85) h);
}
.queuePlayConfirmActions .queuePlayAccept {
  border-color: transparent;
  background: linear-gradient(120deg,#a17aff,#8057e8);
  background: linear-gradient(120deg,oklch(from var(--purple) 0.678 calc(c * 0.93) h),oklch(from var(--purple) 0.578 calc(c * 1.02) h));
  color: #fff;
}
.queuePlayConfirmActions button:focus-visible {
  outline: 2px solid #b79aff;
  outline: 2px solid oklch(from var(--purple) 0.752 calc(c * 0.71) h);
  outline-offset: 3px;
}
@keyframes queueConfirmEnter {
  from{opacity:0;transform:translateY(8px) scale(.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@media (max-width: 480px) {
  .queuePlayConfirmDialog {
    grid-template-columns: 38px minmax(0,1fr);
    gap: 0 12px;
    padding: 20px;
  }
  .queuePlayConfirmIcon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
  }
  .queuePlayConfirmDialog h2 {
    font-size: 17px;
  }
  .queuePlayConfirmActions {
    grid-column: 1/-1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .queuePlayConfirmDialog {
    animation: none;
  }
}
@media (max-width: 560px) {
  .immersiveQueue .immersiveQueueList .immersiveQueueRow {
    grid-template-columns: 36px minmax(0,1fr) auto auto auto;
    gap: 5px;
    padding: 7px 2px;
  }
  .immersiveQueueRow .immersiveQueuePlay {
    width: 28px;
    height: 28px;
  }
}

/* ── from fix.css ── */
[hidden] {
  display: none !important;
}

/* ── from v29.css ── */
#sessions {
  width: 100%;
}
.title {
  overflow: hidden;
  text-overflow: ellipsis;
}
.timeline {
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  align-items: center;
  gap: 10px;
  margin: 24px 0;
  color: var(--muted);
  font-size: 12px;
}
.timeline input {
  width: 100%;
  accent-color: var(--purple);
}
.queueRow {
  display: grid;
  grid-template-columns: 26px minmax(0,1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 11px 4px;
  border-bottom: 1px solid #2b2d3b;
}
.queueRow b {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.queueRow small {
  color: var(--muted);
}
.queueRow time {
  color: var(--muted);
  font-size: 12px;
}
.toastHost {
  position: fixed;
}
.toast {
  max-width: 380px;
}
.toast.error {
  border-left-color: var(--red);
}
@media (max-width: 620px) {
  .title {
    font-size: 21px;
  }
  .queueRow {
    grid-template-columns: 24px minmax(0,1fr) auto;
  }
  .queueRow time {
    display: none;
  }
}

/* ── from v210.css ── */
.settingsTitle>span {
  color: var(--purple);
  font-size: 11px;
  letter-spacing: .14em;
}
.settingsTitle h1 {
  margin: 5px 0;
}
.settingsTitle p,
.settingsCard p {
  color: var(--muted);
}
.musicSettingsForm {
  display: grid;
  gap: 16px;
  max-width: 1250px;
}
.settingsCard {
  border: 1px solid var(--line);
}
.settingsCard header {
  border-bottom: 1px solid var(--line);
  margin: -4px 0 8px;
  padding-bottom: 14px;
}
.settingsCard h2 {
  margin: 0;
}
.settingsCard header p {
  margin: 4px 0 0;
}
.settingsGrid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
}
.settingsGrid>label,
.wideField {
  display: grid;
  gap: 7px;
  padding: 14px 0;
}
.settingsCard label small {
  display: block;
  color: var(--muted);
  font-weight: 400;
}
.settingsCard input[type=text],
.settingsCard input[type=url],
.settingsCard textarea,
.settingsCard select {
  width: 100%;
  border: 1px solid var(--line);
  padding: 11px;
  resize: vertical;
}
.rangeLine {
  display: grid;
  grid-template-columns: 1fr 55px;
  align-items: center;
  gap: 12px;
}
.rangeLine input {
  accent-color: var(--purple);
}
.settingSwitch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 15px 0;
  border-bottom: 1px solid #292b39;
  cursor: pointer;
}
.settingSwitch span {
  display: grid;
}
.settingSwitch input {
  position: absolute;
  opacity: 0;
}
.settingSwitch i {
  width: 42px;
  height: 23px;
  border-radius: 20px;
  background: #3a3b4b;
  position: relative;
  flex: none;
}
.settingSwitch i:after {
  content: '';
  position: absolute;
  width: 17px;
  height: 17px;
  left: 3px;
  top: 3px;
  background: white;
  border-radius: 50%;
}
.settingSwitch input:checked+i {
  background: var(--purple);
}
.settingSwitch input:checked+i:after {
  transform: translateX(19px);
}
.wideField {
  margin-top: 8px;
}
.settingsActions {
  position: sticky;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  backdrop-filter: blur(10px);
}
.settingsActions button {
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 11px 18px;
  background: #25273a;
  color: white;
}
.settingsActions button[type=submit] {
  border-color: var(--purple);
}
@media (max-width: 760px) {
  .settingsGrid {
    grid-template-columns: 1fr;
  }
}

/* ── from motion.css ── */
.musicSettingsForm {
  padding-bottom: 84px;
}
.panel,
.settingsCard,
.featureGrid button {
  transition: transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.settingsCard:hover {
  border-color: #494b67;
  box-shadow: 0 14px 40px #0002;
}
.nav:hover {
  transform: translateX(4px);
}
button,
.discordBtn {
  position: relative;
  overflow: hidden;
  transition: transform .14s ease,filter .18s ease,box-shadow .18s ease;
}
button:not(:disabled):hover,
.discordBtn:hover {
  filter: brightness(1.09);
  box-shadow: 0 7px 20px #0003;
}
button:not(:disabled):active,
.discordBtn:active {
  transform: scale(.97);
}
.clickRipple {
  position: absolute;
  z-index: 10;
  width: 12px;
  height: 12px;
  margin: -6px;
  border-radius: 50%;
  background: #fff8;
  pointer-events: none;
  animation: clickRipple .62s ease-out forwards;
}
@keyframes clickRipple {
  to{transform:scale(18);opacity:0}
}
.settingSwitch:hover {
  background: #ffffff04;
}
.settingSwitch i,
.settingSwitch i:after {
  transition: background .2s ease,transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .2s ease;
}
.settingSwitch input:focus-visible+i {
  box-shadow: 0 0 0 3px #9a70ff55;
  box-shadow: 0 0 0 3px oklch(from var(--purple) 0.656 calc(c * 1) h / 0.333);
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* ── from v211.css ── */
.djForm {
  display: grid;
  gap: 16px;
  max-width: 1250px;
  padding-bottom: 84px;
}
.djHero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.djHero>.settingSwitch {
  min-width: 300px;
  border: 0;
}
.choiceGrid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 10px;
  padding-top: 14px;
}
.permissionCard {
  cursor: pointer;
}
.permissionCard input {
  position: absolute;
  opacity: 0;
}
.permissionCard span {
  height: 100%;
  display: grid;
  grid-template-columns: 28px 1fr;
  column-gap: 8px;
  align-items: center;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #171824;
  transition: .18s;
}
.permissionCard i {
  grid-row: 1/3;
  width: 22px;
  height: 22px;
  border: 1px solid #55576d;
  border-radius: 6px;
  display: grid;
  place-items: center;
  color: transparent;
  font-style: normal;
}
.permissionCard small {
  color: var(--muted);
}
.permissionCard input:checked+span {
  border-color: var(--purple);
  background: #9a70ff12;
  background: oklch(from var(--purple) 0.656 calc(c * 1) h / 0.071);
  box-shadow: inset 0 0 0 1px #9a70ff44;
  box-shadow: inset 0 0 0 1px oklch(from var(--purple) 0.656 calc(c * 1) h / 0.267);
}
.permissionCard input:checked+span i {
  background: var(--purple);
  border-color: var(--purple);
  color: white;
}
.permissionCard:hover span {
  transform: translateY(-2px);
  border-color: #666985;
}
@media (max-width: 950px) {
  .choiceGrid {
    grid-template-columns: repeat(2,1fr);
  }
}
@media (max-width: 620px) {
  .choiceGrid {
    grid-template-columns: 1fr;
  }
  .djHero {
    display: block;
  }
  .djHero>.settingSwitch {
    min-width: 0;
  }
}

/* ── from v212.css ── */
.libraryTitle>span {
  color: var(--purple);
  font-size: 11px;
  letter-spacing: .14em;
}
.libraryTitle h1 {
  margin: 5px 0;
}
.libraryTitle p,
.libraryCard p {
  color: var(--muted);
}
.libraryToolbar {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin: 12px 0 20px;
}
.libraryToolbar input,
.libraryToolbar select {
  border: 1px solid var(--line);
  padding: 11px;
}
.librarySearch {
  min-width: 260px;
}
.createPlaylist,
.createGlobal {
  display: flex;
  gap: 8px;
}
.libraryToolbar button,
.libraryActions button,
.libraryTabs button,
.trackLibraryRow button {
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #282a3e;
  color: white;
  padding: 10px 14px;
}
.createPlaylist button,
.createGlobal button,
.libraryActions .playList,
.libraryTabs .active {
  background: var(--purple);
  border-color: var(--purple);
}
.libraryGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(280px,1fr));
  gap: 14px;
}
.libraryCard {
  display: grid;
  gap: 14px;
  border: 1px solid var(--line);
  padding: 15px;
}
.playlistArt {
  width: 76px;
  height: 76px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg,#5536a0,#d632d3);
  background: linear-gradient(135deg,oklch(from var(--purple) 0.431 calc(c * 0.8) h),oklch(from var(--pink) 0.631 calc(c * 0.93) h));
  font-size: 27px;
  overflow: hidden;
}
.playlistArt img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.playlistInfo {
  min-width: 0;
}
.playlistInfo small {
  font-size: 9px;
  color: var(--purple);
}
.playlistInfo h3 {
  margin: 5px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.playlistInfo p {
  margin: 0;
}
.libraryActions {
  grid-column: 1/-1;
  display: flex;
  gap: 8px;
}
.libraryActions button {
  flex: 1;
}
.libraryTabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.trackLibraryRow {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 14px;
}
.trackLibraryRow div {
  display: grid;
}
.trackLibraryRow small,
.trackLibraryRow time {
  color: var(--muted);
}
@media (max-width: 700px) {
  .libraryToolbar,
  .createPlaylist,
  .createGlobal {
    display: grid;
  }
  .librarySearch {
    min-width: 0;
  }
}
.libraryCard {
  grid-template-columns: 1fr;
}
.libraryCardOpen {
  display: grid;
  grid-template-columns: 76px minmax(0,1fr);
  gap: 14px;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  padding: 0;
}
.playlistDetailHero {
  display: grid;
  grid-template-columns: 90px minmax(0,1fr) auto auto;
  gap: 18px;
  align-items: center;
  margin: 18px 0;
}
.playlistDetailHero .playlistArt {
  width: 90px;
  height: 90px;
}
.playlistDetailHero h1 {
  margin: 5px 0;
  font-size: 32px;
}
.playlistDetailHero p {
  margin: 0;
  color: var(--muted);
}
.playlistDetailHero button,
.playlistTrackActions button {
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #282a3e;
  color: #fff;
  padding: 10px 14px;
  cursor: pointer;
}
.playlistDetailHero .playList {
  background: var(--purple);
  border-color: var(--purple);
}
.playlistTrackList {
  padding: 18px;
}
.playlistTrackList .sectionRow {
  margin-bottom: 10px;
}
.playlistTrackList h2 {
  margin: 4px 0;
}
.playlistTrackList small {
  color: var(--purple);
  font-size: 11px;
  letter-spacing: .14em;
}
.playlistTrackRow {
  display: grid;
  grid-template-columns: 28px 46px minmax(0,1fr) 58px auto;
  gap: 12px;
  align-items: center;
  border-top: 1px solid var(--line);
  padding: 10px 4px;
}
.playlistTrackRow img {
  width: 46px;
  height: 46px;
  object-fit: cover;
  border-radius: 8px;
  background: linear-gradient(135deg,#5536a0,#25273a);
  background: linear-gradient(135deg,oklch(from var(--purple) 0.419 calc(c * 1.2) h),#25273a);
}
.playlistTrackRow b,
.playlistTrackRow small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.playlistTrackRow small,
.playlistTrackRow time {
  color: var(--muted);
}
.playlistTrackActions {
  display: flex;
  gap: 5px;
}
.playlistTrackActions button {
  padding: 6px 9px;
}
.playlistTrackActions button:disabled {
  opacity: .35;
  cursor: not-allowed;
}
.playlistTrackActions .danger {
  color: #ff829e;
}
.libraryEmpty {
  padding: 32px;
  text-align: center;
  color: var(--muted);
}
@media (max-width: 700px) {
  .playlistDetailHero {
    grid-template-columns: 70px 1fr;
  }
  .playlistDetailHero .playlistArt {
    width: 70px;
    height: 70px;
  }
  .playlistTrackRow {
    grid-template-columns: 22px 40px minmax(0,1fr) auto;
  }
  .playlistTrackRow time {
    display: none;
  }
  .playlistTrackRow img {
    width: 40px;
    height: 40px;
  }
  .playlistTrackActions {
    grid-column: 3/-1;
    justify-content: flex-end;
  }
}
.libraryBrowseToolbar {
  align-items: center;
}
.libraryBrowseToolbar .librarySort {
  min-width: 140px;
}
.libraryTrackRich {
  grid-template-columns: minmax(0,1fr) 70px auto;
}
.libraryRowActions {
  display: flex;
  gap: 7px;
}
.libraryRowActions button {
  white-space: nowrap;
}
.libraryHeart {
  font-size: 18px !important;
  color: #ff69ac !important;
  padding: 5px 10px !important;
}
@media (max-width: 700px) {
  .libraryBrowseToolbar {
    display: grid;
  }
  .libraryBrowseToolbar .librarySort {
    width: 100%;
  }
  .libraryTrackRich {
    grid-template-columns: minmax(0,1fr) auto;
  }
  .libraryTrackRich time {
    display: none;
  }
  .libraryRowActions {
    grid-column: 1/-1;
  }
}
.playlistImport {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed #7452c8;
  border: 1px dashed oklch(from var(--purple) 0.536 calc(c * 0.86) h);
  border-radius: 9px;
  color: #c9b6ff;
  color: oklch(from var(--purple) 0.818 calc(c * 0.51) h);
  padding: 10px 13px;
  cursor: pointer;
  transition: .2s border-color,.2s background;
}
.playlistImport:hover {
  border-color: #ad8aff;
  border-color: oklch(from var(--purple) 0.715 calc(c * 0.82) h);
  background: #332654;
  background: oklch(from var(--purple) 0.309 calc(c * 0.4) h);
}
.libraryActions .exportList {
  color: #c9b6ff;
  color: oklch(from var(--purple) 0.818 calc(c * 0.51) h);
}
@media (max-width: 700px) {
  .playlistImport {
    width: 100%;
    box-sizing: border-box;
  }
}

/* ── from v213.css ── */
.studioHero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 0 24px;
}
.studioHero>div>span,
.studioSectionTitle span {
  color: var(--purple);
  font-size: 10px;
  letter-spacing: .15em;
}
.studioHero h1 {
  font-size: 34px;
  margin: 5px 0;
}
.studioHero p,
.studioSectionTitle+* {
  color: var(--muted);
}
.studioPower {
  display: flex;
  align-items: center;
  gap: 10px;
}
.studioPower input {
  position: absolute;
  opacity: 0;
}
.studioPower i {
  width: 50px;
  height: 27px;
  border-radius: 20px;
  background: #45475d;
  position: relative;
  transition: .2s;
}
.studioPower i:after {
  content: '';
  position: absolute;
  width: 21px;
  height: 21px;
  left: 3px;
  top: 3px;
  border-radius: 50%;
  background: white;
  transition: .2s;
}
.studioPower input:checked+i {
  background: var(--purple);
  box-shadow: 0 0 22px #9665ff55;
  box-shadow: 0 0 22px oklch(from var(--purple) 0.635 calc(c * 1.07) h / 0.333);
}
.studioPower input:checked+i:after {
  transform: translateX(23px);
}
.studioForm {
  padding: 22px;
}
.studioForm h2 {
  margin: 0 0 18px;
}
.studioGrid {
  display: grid;
  grid-template-columns: repeat(2,minmax(220px,1fr));
  gap: 16px;
}
.studioGrid label {
  display: grid;
  gap: 7px;
}
.studioGrid label span {
  font-size: 13px;
  font-weight: 700;
}
.studioGrid select {
  width: 100%;
  background: #10111a;
  color: white;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 12px;
}
.studioForm footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.studioForm button,
.presetGrid button {
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #282a3e;
  color: white;
  padding: 10px 14px;
}
.studioForm .primary {
  background: var(--purple);
  border-color: var(--purple);
}
.studioColumns {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 16px;
  margin-top: 16px;
}
.studioColumns>.panel {
  padding: 20px;
}
.studioSectionTitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.studioSectionTitle h2 {
  margin: 4px 0 14px;
}
.studioSectionTitle>b {
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: #9665ff22;
  background: oklch(from var(--purple) 0.635 calc(c * 1.07) h / 0.133);
  color: var(--purple);
}
.reasonList {
  display: grid;
  gap: 8px;
}
.reasonList article,
.presetGrid article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-top: 1px solid var(--line);
  padding: 12px 0;
}
.reasonList article div,
.presetGrid article>div:first-child {
  display: grid;
}
.reasonList small,
.reasonList p,
.presetGrid small {
  color: var(--muted);
  font-size: 12px;
}
.reasonList p {
  max-width: 45%;
  text-align: right;
}
.studioEmpty {
  color: var(--muted);
  padding: 24px 0;
}
.presetGrid article>div:last-child {
  display: flex;
  gap: 6px;
}
.presetGrid button:disabled {
  opacity: .4;
}
@media (max-width: 850px) {
  .studioGrid,
  .studioColumns {
    grid-template-columns: 1fr;
  }
  .studioHero {
    align-items: flex-start;
  }
  .studioForm footer {
    flex-wrap: wrap;
  }
  .studioForm footer button {
    flex: 1;
  }
}

/* ── from v214.css ── */
.filterHero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 0 24px;
}
.filterHero>div>span,
.soundHeader span {
  color: var(--purple);
  font-size: 10px;
  letter-spacing: .15em;
}
.filterHero h1 {
  font-size: 34px;
  margin: 5px 0;
}
.filterHero p,
.soundForm footer p {
  color: var(--muted);
}
.activeFilter {
  display: grid;
  gap: 5px;
  padding: 13px 18px;
  border: 1px solid #7656c8;
  border: 1px solid oklch(from var(--purple) 0.544 calc(c * 0.83) h);
  border-radius: 12px;
  background: #9665ff16;
  background: oklch(from var(--purple) 0.635 calc(c * 1.07) h / 0.086);
}
.activeFilter small {
  color: var(--muted);
}
.presetPanel h2 {
  margin-top: 0;
}
.presetButtons {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
.presetButtons button,
.soundHeader button,
.applySound {
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #282a3e;
  color: white;
}
.presetButtons button:hover,
.presetButtons .active {
  border-color: var(--purple);
  background: #9665ff28;
  background: oklch(from var(--purple) 0.635 calc(c * 1.07) h / 0.157);
  transform: translateY(-2px);
}
.soundForm {
  margin-top: 16px;
}
.soundHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.soundHeader h2 {
  margin: 4px 0 16px;
}
.soundWorkspace {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.soundControls h3 {
  margin: 12px 0;
  color: #d8d5e8;
}
.soundRange {
  display: grid;
  gap: 7px;
  margin: 14px 0;
}
.soundRange>span {
  display: flex;
  justify-content: space-between;
}
.soundRange output {
  color: var(--purple);
}
.soundRange input {
  accent-color: var(--purple);
}
.karaokeToggle {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.karaokeToggle input {
  accent-color: var(--purple);
}
.karaokeToggle span {
  display: grid;
}
.karaokeToggle small {
  color: var(--muted);
}
.filterVisual {
  align-items: flex-end;
  justify-content: center;
  gap: 12px;
  border-bottom: 1px solid var(--line);
}
.filterVisual i {
  width: 12%;
  min-height: 20%;
  border-radius: 8px 8px 2px 2px;
  background: linear-gradient(#a77cff,#6636d8);
  background: linear-gradient(oklch(from var(--purple) 0.687 calc(c * 0.92) h),oklch(from var(--purple) 0.497 calc(c * 1.12) h));
  transition: .2s;
}
.filterVisual i.negative {
  background: linear-gradient(#ff7ca8,#8d294b);
}
.soundForm footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--line);
  margin-top: 20px;
  padding-top: 18px;
}
.applySound {
  border-color: var(--purple);
}
@media (max-width: 850px) {
  .soundWorkspace {
    grid-template-columns: 1fr;
  }
  .filterHero,
  .soundForm footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ── from v214-fix.css ── */
.filterVisual {
  height: auto;
  display: block;
  margin-top: 22px;
  padding: 16px 18px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: radial-gradient(circle at 50% 100%,#9665ff1c,transparent 65%),#151621;
  background: radial-gradient(circle at 50% 100%,oklch(from var(--purple) 0.642 calc(c * 0.98) h / 0.11),transparent 65%),#151621;
}
.visualTitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.visualTitle span {
  color: var(--purple);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
}
.visualTitle small {
  color: var(--muted);
}
.visualBands {
  height: 105px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 12px;
}
.visualBands label {
  width: 15%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  color: var(--muted);
  font-size: 10px;
}
.filterVisual .visualBands i {
  display: block;
  width: 100%;
  min-height: 20%;
  border-radius: 7px;
  background: linear-gradient(#b28cff,#6636d8);
  background: linear-gradient(oklch(from var(--purple) 0.723 calc(c * 0.81) h),oklch(from var(--purple) 0.497 calc(c * 1.12) h));
  box-shadow: 0 0 18px #9665ff30;
  box-shadow: 0 0 18px oklch(from var(--purple) 0.635 calc(c * 1.07) h / 0.188);
  transition: height .18s ease,background .18s ease;
}
.filterVisual .visualBands i.negative {
  background: linear-gradient(#ff8daf,#8d294b);
  box-shadow: 0 0 18px #ff5b8730;
}
@media (max-width: 600px) {
  .visualTitle {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }
  .visualBands {
    gap: 7px;
  }
}

/* ── from v215.css ── */
.radioHero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 0 24px;
}
.radioHero>div>span {
  color: var(--purple);
  font-size: 10px;
  letter-spacing: .15em;
}
.radioHero h1 {
  font-size: 34px;
  margin: 5px 0;
}
.radioHero p,
.radioInfo p,
.radioInfo small,
.radioEmpty p {
  color: var(--muted);
}
.radioMetric {
  display: grid;
  text-align: center;
  padding: 12px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.radioMetric b {
  font-size: 22px;
  color: var(--purple);
}
.radioSearch {
  display: grid;
  grid-template-columns: 1.5fr repeat(3,1fr) auto;
  gap: 10px;
  padding: 16px;
}
.radioSearch input {
  min-width: 0;
  border: 1px solid var(--line);
  padding: 11px;
}
.radioSearch button,
.radioTabs button,
.radioActions button {
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #282a3e;
  color: white;
  padding: 10px 13px;
}
.radioSearch button,
.radioTabs .active,
.radioActions .radioPlay {
  background: var(--purple);
  border-color: var(--purple);
}
.radioTabs {
  display: flex;
  gap: 8px;
  margin: 18px 0;
}
.radioGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(340px,1fr));
  gap: 12px;
}
.radioCard {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 13px;
  padding: 15px;
  border: 1px solid var(--line);
}
.radioLogo {
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 12px;
  background: #9665ff18;
  background: oklch(from var(--purple) 0.635 calc(c * 1.07) h / 0.094);
  color: var(--purple);
  font-size: 24px;
}
.radioLogo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.radioInfo {
  min-width: 0;
}
.radioInfo h3 {
  margin: 2px 0 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.radioInfo p {
  margin: 0 0 5px;
}
.radioActions {
  grid-column: 1/-1;
  display: flex;
  gap: 7px;
}
.radioActions button {
  flex: 1;
}
.radioActions .radioReport {
  color: #ff91ae;
}
.radioEmpty {
  grid-column: 1/-1;
  text-align: center;
  padding: 50px;
}
.radioEmpty>div {
  font-size: 30px;
  color: var(--purple);
}
@media (max-width: 1000px) {
  .radioSearch {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 650px) {
  .radioSearch {
    grid-template-columns: 1fr;
  }
  .radioTabs {
    overflow: auto;
  }
  .radioActions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .radioHero {
    align-items: flex-start;
  }
  .radioMetric {
    display: none;
  }
}

/* ── from v217.css ── */
.immersivePlayer {
  display: grid;
}
.globalMusicSearch {
  display: grid;
  align-items: center;
  border: 1px solid var(--line);
}
.globalMusicSearch input {
  border: 0;
  background: transparent;
  color: var(--text);
  outline: 0;
}
.globalMusicSearch button,
.immersiveJoin button,
.playLiked {
  font-weight: 700;
  padding: 10px 16px;
  cursor: pointer;
}
.recommendations {
  min-width: 0;
}
.sectionRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.sectionRow small,
.recommendations small,
.heroTrackInfo>small,
.likedHero small {
  color: var(--purple);
  font-weight: 800;
  letter-spacing: .12em;
}
.sectionRow h2 {
  margin: 4px 0 12px;
}
.recommendRail {
  display: grid;
  grid-template-columns: repeat(6,minmax(130px,1fr));
  gap: 12px;
  overflow: auto;
  padding: 2px 2px 10px;
}
.recommendCard {
  position: relative;
  min-width: 0;
  display: grid;
  gap: 5px;
  cursor: pointer;
  border: 1px solid var(--line);
  padding: 10px;
}
.recommendCard:hover {
  border-color: var(--purple);
}
.recommendCard img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 10px;
}
.recommendCard b,
.recommendCard small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recommendCard time {
  font-size: 11px;
  color: var(--muted);
}
.sourceBadge {
  width: max-content;
  border: 1px solid #6f54b0;
  border: 1px solid oklch(from var(--purple) 0.518 calc(c * 0.69) h);
  border-radius: 999px;
  color: #bda7ff;
  color: oklch(from var(--purple) 0.78 calc(c * 0.61) h);
  font-size: 10px !important;
  padding: 2px 7px;
  letter-spacing: .04em !important;
}
.recommendEmpty {
  grid-column: 1/-1;
  border: 1px dashed var(--line);
  border-radius: 14px;
  color: var(--muted);
  padding: 34px;
  text-align: center;
}
.immersiveWorkspace {
  display: grid;
  grid-template-columns: minmax(560px,1.55fr) minmax(300px,.65fr);
}
.nowPlayingHero {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0,250px) minmax(0,1fr);
  gap: 34px;
}
.vinylArt {
  position: relative;
  border-radius: 50%;
  background: repeating-radial-gradient(circle,#10111a 0 3px,#27293a 4px 6px);
}
.vinylArt:after {
  content: "";
  position: absolute;
  inset: 47%;
  border-radius: 50%;
  background: #111;
}
.vinylArt img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.vinylArt.emptyTrack img {
  visibility: hidden;
}
.heroTrackInfo {
  min-width: 0;
}
.heroTrackInfo h1 {
  line-height: 1.05;
  max-width: 850px;
}
.heroTrackInfo p {
  color: var(--muted);
}
.heroTimeline {
  min-width: 0;
}
.heroTimeline input {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0;
  accent-color: var(--purple);
}
.heroTimeline div {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 11px;
}
.heroControls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.heroControls button {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
}
.heroControls .primaryPlay {
  width: 58px;
  height: 58px;
  font-size: 20px;
  box-shadow: 0 8px 24px #815cff66;
  box-shadow: 0 8px 24px oklch(from var(--purple) 0.603 calc(c * 1.13) h / 0.4);
}
.heroControls button.liked,
.liked {
  color: #ff5aa7 !important;
}
.heroVolume {
  display: flex;
  align-items: center;
  gap: 7px;
}
.heroVolume input {
  width: 100px;
}
.immersiveJoin {
  display: flex;
  gap: 8px;
  margin-top: 18px;
}
.immersiveJoin select {
  flex: 1;
  border: 1px solid var(--line);
  padding: 10px;
}
.immersiveSide {
  display: grid;
}
.listenerPanel .sectionRow b {
  color: var(--green);
  font-size: 12px;
}
.listenerPanel .sectionRow span,
.immersiveQueue .sectionRow span {
  color: var(--muted);
  font-size: 12px;
}
.listenerList {
  display: grid;
  gap: 8px;
}
.listener {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px;
}
.listener img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
.immersiveQueue {
  max-height: 540px;
  overflow: auto;
}
.immersiveQueueList {
  display: grid;
}
.immersiveQueueRow {
  display: grid;
  align-items: center;
  gap: 9px;
}
.immersiveQueueRow img {
  object-fit: cover;
}
.immersiveQueueRow b,
.immersiveQueueRow small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.immersiveQueueRow small {
  color: var(--muted);
}
.immersiveQueueRow button {
  border: 0;
  background: transparent;
  color: #bbb;
  cursor: pointer;
  font-size: 18px;
}
.queueEmpty {
  color: var(--muted);
  padding: 42px 12px;
  text-align: center;
}
.likedHero {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: 22px;
  align-items: center;
  background: linear-gradient(120deg,#231843,var(--panel));
  background: linear-gradient(120deg,oklch(from var(--purple) 0.249 calc(c * 0.38) h),var(--panel));
  margin-bottom: 18px;
}
.likedArt {
  width: 110px;
  height: 110px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: linear-gradient(145deg,#a45cff,#5d35c8);
  background: linear-gradient(145deg,oklch(from var(--purple) 0.637 calc(c * 1.14) h),oklch(from var(--purple) 0.472 calc(c * 1.04) h));
  font-size: 48px;
}
.likedHero h1 {
  font-size: 38px;
  margin: 7px 0;
}
.likedHero p {
  color: var(--muted);
}
.playLiked:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.likedList {
  padding: 10px 20px;
}
.likedRow {
  display: grid;
  grid-template-columns: 28px minmax(0,1fr) auto 65px 38px 38px;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding: 12px 4px;
}
.likedRow small {
  display: block;
  color: var(--muted);
}
.likedRow button {
  border: 0;
  background: transparent;
  color: #bbb;
  cursor: pointer;
  font-size: 18px;
}
.likedEmpty {
  text-align: center;
  color: var(--muted);
  padding: 70px;
}
.likedEmpty:first-letter {
  color: #ff5aa7;
  font-size: 40px;
}
@media (max-width: 1200px) {
  .recommendRail {
    grid-template-columns: repeat(4,minmax(150px,1fr));
  }
  .immersiveWorkspace {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 760px) {
  .sectionRow {
    flex-wrap: wrap;
  }
  .recommendRail {
    grid-template-columns: repeat(2,minmax(145px,1fr));
  }
  .vinylArt {
    margin: auto;
  }
  .heroVolume {
    margin: 8px auto;
  }
  .likedHero {
    grid-template-columns: 80px 1fr;
  }
  .likedArt {
    width: 80px;
    height: 80px;
  }
  .likedHero .playLiked {
    grid-column: 1/-1;
  }
  .likedRow {
    grid-template-columns: 22px minmax(0,1fr) 34px 34px;
  }
  .likedRow .sourceBadge,
  .likedRow time {
    display: none;
  }
}
@media (max-width: 560px) {
  .globalMusicSearch button {
    width: 100%;
  }
  .sectionRow {
    align-items: flex-start;
  }
  .recommendRail {
    grid-template-columns: repeat(2,minmax(120px,1fr));
  }
  .nowPlayingHero {
    gap: 18px;
  }
  .heroControls {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
  }
  .heroControls button {
    width: 100%;
    height: 44px;
    border-radius: 10px;
  }
  .heroControls .primaryPlay {
    width: 100%;
    height: 48px;
  }
  .heroVolume {
    width: 100%;
    margin: 8px 0 0;
    display: grid;
    grid-template-columns: 1fr auto;
    justify-items: stretch;
  }
  .heroVolume input {
    width: 100%;
  }
  .immersiveJoin {
    display: grid;
  }
  .immersiveJoin select,
  .immersiveJoin button {
    width: 100%;
  }
  .likedHero {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 16px;
  }
  .likedArt {
    width: 86px;
    height: 86px;
    margin: 0 auto;
  }
  .likedHero p,
  .likedHero .playLiked {
    grid-column: 1/-1;
  }
  .likedRow {
    grid-template-columns: 18px minmax(0,1fr) auto 34px;
    gap: 8px;
  }
  .likedRow time,
  .likedRow .sourceBadge {
    display: none;
  }
  .likedRow button {
    font-size: 16px;
  }
}
.sourceStatus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: -12px;
  padding: 9px 12px;
  border: 1px solid #353048;
}
.activeBotIdentity {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.activeBotControl {
  display: grid;
  gap: 3px;
}
.activeBotControl span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .1em;
}
.activeBotSelector {
  max-width: 180px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #11121c;
  color: var(--text);
  padding: 5px 8px;
}
.activeBotSelector:disabled {
  opacity: .72;
  cursor: default;
}
.botOnlineStatus {
  font-size: 12px;
  color: #ff828c;
}
.botOnlineStatus:before {
  content: "●";
  margin-right: 5px;
}
.botOnlineStatus.online {
  color: #27de8d;
}
.botOnlineStatus.offline {
  color: #ff828c;
}
.sourceCount {
  font-size: 12px;
  color: var(--muted);
}
.sourcePills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.sourcePill {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 8px;
  color: #77798b;
  font-size: 10px;
}
.sourcePill.ready {
  border-color: #258e63;
  color: #62dda8;
  background: #1c432f55;
}
@media (max-width: 760px) {
  .sourceStatus,
  .activeBotIdentity {
    align-items: flex-start;
    flex-direction: column;
  }
  .activeBotSelector {
    max-width: 100%;
  }
}
.recommendLoading,
.recommendError {
  grid-column: 1/-1;
  min-height: 92px;
  display: grid;
  place-items: center;
  gap: 8px;
  border: 1px dashed var(--line);
  border-radius: 14px;
  padding: 22px;
  text-align: center;
  color: var(--muted);
}
.recommendLoading i {
  width: 22px;
  height: 22px;
  border: 3px solid #805be544;
  border: 3px solid oklch(from var(--purple) 0.582 calc(c * 0.98) h / 0.267);
  border-top-color: #9d76ff;
  border-top-color: oklch(from var(--purple) 0.668 calc(c * 0.96) h);
  border-radius: 50%;
  animation: sourceSpin .8s linear infinite;
}
.recommendLoading b,
.recommendError b {
  color: var(--text);
}
.recommendLoading span,
.recommendError span {
  font-size: 12px;
}
.recommendError {
  border-color: #a54b6166;
  background: #5a1f3022;
}
.recommendError b {
  color: #ff9db4;
}
@keyframes sourceSpin {
  to{transform:rotate(360deg)}
}
@media (prefers-reduced-motion: reduce) {
  .recommendLoading i {
    animation: none;
  }
}

/* ── from v217-motion.css ── */
.recommendCard {
  animation: cardRise .45s both;
  transition: .28s transform,.28s border-color,.28s box-shadow;
}
.recommendCard:nth-child(2) {
  animation-delay: .04s;
}
.recommendCard:nth-child(3) {
  animation-delay: .08s;
}
.recommendCard:nth-child(4) {
  animation-delay: .12s;
}
.recommendCard:nth-child(5) {
  animation-delay: .16s;
}
.recommendCard:nth-child(6) {
  animation-delay: .2s;
}
.recommendCard:hover {
  transform: translateY(-7px) scale(1.015);
  box-shadow: 0 18px 40px #0008,0 0 24px #8f63ff22;
  box-shadow: 0 18px 40px #0008,0 0 24px oklch(from var(--purple) 0.638 calc(c * 0.99) h / 0.133);
}
.recommendCard img {
  object-position: center;
  background: radial-gradient(circle at 35% 25%,#8057d8,#171824 70%);
  background: radial-gradient(circle at 35% 25%,oklch(from var(--purple) 0.539 calc(c * 1.2) h),#171824 70%);
  transition: .35s transform,.35s filter;
}
.recommendCard:hover img {
  transform: scale(1.035);
  filter: saturate(1.12);
}
.recommendCard img.artMissing {
  display: block;
  color: transparent;
  background: radial-gradient(circle at 35% 25%,#8057d8,#171824 70%);
  background: radial-gradient(circle at 35% 25%,oklch(from var(--purple) 0.539 calc(c * 1.2) h),#171824 70%);
}
.vinylArt:before {
  content: "";
  position: absolute;
  inset: -14px;
  border: 1px solid #9569ff55;
  border: 1px solid oklch(from var(--purple) 0.64 calc(c * 1.05) h / 0.333);
  border-radius: 50%;
  opacity: .25;
  animation: breatheRing 2.2s ease-in-out infinite;
}
.soundPulse {
  position: absolute;
  inset: -28px;
  border: 2px solid #9569ff;
  border: 2px solid oklch(from var(--purple) 0.64 calc(c * 1.05) h);
  border-radius: 50%;
  opacity: 0;
}
.vinylArt.spinning .soundPulse {
  animation: soundPulse 2s ease-out infinite;
}
.heroTrackInfo {
  animation: detailsEnter .5s .08s both;
}
.heroControls button:hover {
  box-shadow: 0 8px 20px #0006;
}
.heroControls button:active {
  transform: scale(.91);
}
.heroControls .primaryPlay {
  animation: buttonGlow 2s ease-in-out infinite;
}
.listener,
.immersiveQueueRow,
.likedRow {
  animation: slideIn .35s both;
  transition: .2s transform,.2s border-color,.2s background;
}
.listener:hover,
.immersiveQueueRow:hover,
.likedRow:hover {
  transform: translateX(4px);
}
.immersiveQueueRow img {
  background: linear-gradient(135deg,#7149b9,#191a27);
  background: linear-gradient(135deg,oklch(from var(--purple) 0.478 calc(c * 1.2) h),#191a27);
}
.immersiveQueueRow img.artMissing {
  background: linear-gradient(135deg,#7149b9,#191a27);
  background: linear-gradient(135deg,oklch(from var(--purple) 0.478 calc(c * 1.2) h),#191a27);
}
@keyframes cardRise {
  from{opacity:0;transform:translateY(18px) scale(.97)}
  to{opacity:1;transform:none}
}
@keyframes detailsEnter {
  from{opacity:0;transform:translateX(22px)}
  to{opacity:1;transform:none}
}
@keyframes slideIn {
  from{opacity:0;transform:translateX(14px)}
  to{opacity:1;transform:none}
}
@keyframes breatheRing {
  50%{opacity:.75;transform:scale(1.035)}
}
@keyframes soundPulse {
  0%{opacity:.5;transform:scale(.86)}
  100%{opacity:0;transform:scale(1.15)}
}
@keyframes buttonGlow {
  50%{box-shadow:0 10px 32px color-mix(in srgb, var(--purple) 53%, transparent)}
}
.recommendCard img.artMissing,
.immersiveQueueRow img.artMissing {
  object-fit: cover;
  animation: artReveal .3s ease-out;
}
@keyframes artReveal {
  from{opacity:.25;transform:scale(1.04)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion: reduce) {
  .recommendCard,
  .vinylArt,
  .soundPulse,
  .heroTrackInfo,
  .heroControls .primaryPlay,
  .listener,
  .immersiveQueueRow,
  .likedRow {
    animation: none !important;
    transition: none !important;
  }
}
.globalMusicSearch select {
  height: 38px;
}
.recentSearches {
  display: flex;
  gap: 7px;
  overflow: auto;
  margin-top: -14px;
  padding: 2px 1px 5px;
}
.recentSearches:empty {
  display: none;
}
.recentSearches button,
.loadMoreResults {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #202235;
  color: var(--muted);
  padding: 7px 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: .2s color,.2s border-color,.2s transform;
}
.recentSearches button:hover,
.loadMoreResults:hover {
  color: #fff;
  border-color: var(--purple);
  transform: translateY(-2px);
}
.loadMoreResults {
  display: block;
  margin: 16px auto 0;
  color: #fff;
  background: #292544;
}
.resultActions {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 5px;
  margin-top: 5px;
}
.resultActions button {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #26283a;
  color: #fff;
  font-size: 11px;
  padding: 7px 3px;
  cursor: pointer;
  transition: .18s background,.18s transform;
}
.resultActions button:hover {
  background: var(--purple);
  transform: translateY(-2px);
}
.resultActions button.liked {
  color: #ff5aa7;
}
@media (max-width: 760px) {
  .globalMusicSearch select,
  .globalMusicSearch button {
    grid-column: 2;
  }
  .resultActions {
    grid-template-columns: repeat(2,1fr);
  }
}

/* ── from v214-interactions.css ── */
.filterSuggestions {
  display: grid;
  grid-template-columns: minmax(220px,.7fr) 1.3fr;
  gap: 22px;
  align-items: center;
  margin-top: 16px;
  padding: 20px 22px;
}
.filterSuggestions>div>span {
  color: var(--purple);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
}
.filterSuggestions h2 {
  margin: 5px 0;
}
.filterSuggestions p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}
.suggestionGrid {
  display: grid;
  grid-template-columns: repeat(2,minmax(160px,1fr));
  gap: 9px;
}
.suggestionGrid button {
  display: grid;
  gap: 4px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #25273a;
  color: #fff;
  padding: 12px;
  cursor: pointer;
  transition: .2s transform,.2s border-color,.2s background;
}
.suggestionGrid button:hover {
  transform: translateY(-2px);
  border-color: var(--purple);
  background: #9665ff20;
  background: oklch(from var(--purple) 0.635 calc(c * 1.07) h / 0.125);
}
.suggestionGrid small {
  color: var(--muted);
}
.filterSaveState {
  margin-left: auto;
  color: var(--green);
  font-size: 12px;
  font-weight: 700;
}
.soundForm.dirty .filterSaveState {
  color: #ffca65;
}
.applySound.needsSave {
  box-shadow: 0 0 0 3px #9665ff25,0 8px 24px #9665ff35;
  box-shadow: 0 0 0 3px oklch(from var(--purple) 0.635 calc(c * 1.07) h / 0.145),0 8px 24px oklch(from var(--purple) 0.635 calc(c * 1.07) h / 0.208);
  animation: filterSavePulse 1.7s ease-in-out infinite;
}
.presetButtons button:disabled,
.suggestionGrid button:disabled,
.applySound:disabled,
[data-reset]:disabled {
  opacity: .5;
  cursor: wait;
  transform: none;
}
.soundRange input {
  cursor: pointer;
}
.soundRange input:focus-visible,
.karaokeToggle input:focus-visible {
  outline: 2px solid #b79aff;
  outline: 2px solid oklch(from var(--purple) 0.752 calc(c * 0.71) h);
  outline-offset: 3px;
}
@keyframes filterSavePulse {
  50%{box-shadow:0 0 0 6px oklch(from var(--purple) 0.642 calc(c * 0.98) h / 0.071),0 10px 30px oklch(from var(--purple) 0.642 calc(c * 0.98) h / 0.314)}
}
@media (max-width: 900px) {
  .filterSuggestions {
    grid-template-columns: 1fr;
  }
  .suggestionGrid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  .suggestionGrid {
    grid-template-columns: 1fr;
  }
  .filterSaveState {
    margin-left: 0;
  }
  .soundForm footer {
    width: 100%;
  }
}

/* ── from v226.css ── */
.queueWorkspace {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  gap: 16px;
}
.queueWorkspaceHero {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 25px;
  padding: 10px 2px;
}
.queueWorkspaceHero span {
  color: var(--purple);
  font-size: 11px;
  letter-spacing: .15em;
  font-weight: 800;
}
.queueWorkspaceHero h1 {
  margin: 4px 0;
  font-size: 34px;
}
.queueWorkspaceHero p {
  margin: 0;
  color: var(--muted);
}
.queueCapacity {
  width: min(270px,35vw);
  display: grid;
  gap: 8px;
  text-align: right;
}
.queueCapacity b {
  font-size: 24px;
}
.queueCapacity small {
  font-size: 13px;
  color: var(--muted);
  margin-left: 3px;
}
.queueCapacity i {
  height: 7px;
  border-radius: 999px;
  background: #303142;
  overflow: hidden;
}
.queueCapacity em {
  display: block;
  height: 100%;
  background: linear-gradient(90deg,var(--purple),var(--pink));
  border-radius: inherit;
  transition: width .25s ease;
}
.queueWorkspaceToolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}
.queueWorkspaceToolbar button,
.queueWorkspaceToolbar select {
  border: 1px solid var(--line);
  background: #282a40;
  color: var(--text);
  padding: 8px 10px;
}
.queueWorkspaceToolbar button:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.queueWorkspaceToolbar label {
  color: var(--muted);
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.queueWorkspaceList {
  padding: 7px 18px;
}
.queueWorkspaceListHead {
  display: grid;
  grid-template-columns: 72px minmax(0,1fr) 92px 70px;
  gap: 10px;
  padding: 9px 8px;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .09em;
}
.queueWorkspaceListHead span:first-child {
  grid-column: 1/2;
}
.queueWorkspaceRow {
  display: grid;
  grid-template-columns: 24px 30px 46px minmax(0,1fr) 92px 64px auto;
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding: 10px 8px;
  background: transparent;
}
.queueWorkspaceRow:hover,
.queueWorkspaceRow.dragOver {
  background: #25263b;
}
.queueWorkspaceRow.dragging {
  opacity: .4;
}
.queueDrag {
  cursor: grab;
  color: var(--muted);
  font-size: 18px;
}
.queueWorkspaceNumber {
  color: var(--purple);
}
.queueWorkspaceRow img {
  width: 46px;
  height: 46px;
  border-radius: 8px;
  object-fit: cover;
  background: #24253a;
}
.queueWorkspaceInfo {
  min-width: 0;
}
.queueWorkspaceInfo b,
.queueWorkspaceInfo small {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.queueWorkspaceInfo small {
  color: var(--muted);
  font-size: 12px;
}
.queueKind {
  justify-self: start;
  border: 1px solid #6756a9;
  border: 1px solid oklch(from var(--purple) 0.51 calc(c * 0.63) h);
  border-radius: 999px;
  color: #c7b8ff;
  color: oklch(from var(--purple) 0.82 calc(c * 0.49) h);
  padding: 2px 7px;
  font-size: 10px;
}
.queueKind.auto {
  border-color: #2d9970;
  color: #77e9b8;
}
.queueWorkspaceRow time {
  color: var(--muted);
  font-size: 12px;
}
.queueWorkspaceActions {
  display: flex;
  gap: 4px;
}
.queueWorkspaceActions button {
  border: 0;
  border-radius: 7px;
  background: #292b41;
  color: #fff;
  padding: 6px 8px;
  cursor: pointer;
}
.queueWorkspaceActions .danger {
  background: #723247;
}
.queueWorkspaceEmpty {
  padding: 70px 20px;
  text-align: center;
  color: var(--muted);
}
@media (max-width: 800px) {
  .queueWorkspaceHero {
    align-items: start;
    flex-direction: column;
  }
  .queueCapacity {
    width: 100%;
    text-align: left;
  }
  .queueWorkspaceList {
    padding: 6px;
  }
  .queueWorkspaceListHead {
    display: none;
  }
  .queueWorkspaceRow {
    grid-template-columns: 20px 38px minmax(0,1fr) auto;
    gap: 8px;
  }
  .queueDrag,
  .queueWorkspaceNumber {
    grid-row: 1/3;
  }
  .queueWorkspaceRow img {
    width: 38px;
    height: 38px;
  }
  .queueKind,
  .queueWorkspaceRow time {
    display: none;
  }
  .queueWorkspaceActions {
    grid-column: 3/-1;
  }
  .queueWorkspaceToolbar label {
    width: 100%;
    justify-content: space-between;
  }
  .queueWorkspaceToolbar select {
    flex: 1;
  }
}

/* ── from v228.css ── */
.playerLiveStatus {
  margin: 18px 0 0 !important;
  color: #b9addd !important;
  color: oklch(from var(--purple) 0.774 calc(c * 0.34) h) !important;
}
.playerLiveStatus:before {
  content: "LIVE STATUS";
  display: block;
  margin-bottom: 4px;
  color: var(--purple);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
}
@media (max-width: 760px) {
  .playerLiveStatus {
    line-height: 1.45;
  }
}

/* ── from v229.css ── */
.healthWorkspace {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  gap: 16px;
}
/* Let long audit details (pasted links) ellipsize instead of widening the page. */
.healthWorkspace > * {
  min-width: 0;
}
.healthHero {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  padding: 8px 2px;
}
.healthHero>div>span,
.healthSectionHeading small,
.healthHints>small {
  color: var(--purple);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
}
.healthHero h1 {
  margin: 5px 0;
  font-size: 34px;
}
.healthHero p {
  margin: 0;
  color: var(--muted);
}
.healthVerdict {
  padding: 15px 20px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--panel);
  display: grid;
  gap: 2px;
  min-width: 150px;
}
.healthVerdict.good {
  border-color: #1a9f6e;
}
.healthVerdict.bad {
  border-color: #b04459;
}
.healthVerdict b {
  color: var(--green);
}
.healthVerdict.bad b {
  color: var(--red);
}
.healthVerdict small,
.healthMetricGrid span {
  color: var(--muted);
}
.healthMetricGrid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 12px;
}
.healthMetricGrid article {
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  display: grid;
  gap: 5px;
}
.healthMetricGrid small {
  font-size: 10px;
  color: var(--muted);
  letter-spacing: .1em;
}
.healthMetricGrid b {
  font-size: 22px;
}
.healthMetricGrid b.ok {
  color: var(--green);
}
.healthMetricGrid b.bad {
  color: var(--red);
}
.healthSectionHeading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding-bottom: 13px;
}
.healthSectionHeading h2 {
  margin: 3px 0 0;
}
.healthSectionHeading>span {
  color: var(--green);
  font-size: 12px;
}
.healthNodeList {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}
.healthNode {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px;
}
.healthNode i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--red);
}
.healthNode.online i {
  background: var(--green);
  box-shadow: 0 0 12px #19df91;
}
.healthNode small {
  display: block;
  color: var(--muted);
}
.healthNode>span {
  color: var(--muted);
  font-size: 12px;
}
.healthSourceList {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.healthSourceList span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 10px;
  color: var(--muted);
  font-size: 12px;
}
.healthSourceList span.ready {
  border-color: #317e61;
  color: #8ce8ba;
}
.healthHints ul {
  margin: 10px 0 0;
  padding-left: 20px;
  color: var(--muted);
}
.healthHints li+li {
  margin-top: 6px;
}
.healthEmpty {
  color: var(--muted);
}
.healthAuditList {
  display: grid;
  gap: 6px;
  margin-top: 14px;
  max-height: 360px;
  overflow: auto;
}
.healthAuditRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 11px;
}
.healthAuditRow>div {
  min-width: 0;
}
.healthAuditRow span {
  color: var(--purple);
  font-weight: 700;
}
.healthAuditRow small {
  display: block;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.healthAuditRow time {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}
@media (max-width: 760px) {
  .healthHero {
    align-items: start;
    flex-direction: column;
  }
  .healthMetricGrid {
    grid-template-columns: 1fr 1fr;
  }
  .healthVerdict {
    width: 100%;
  }
}

/* ── from v231.css ── */
.sourcePreferenceRows {
  display: grid;
  gap: 7px;
}
.sourcePreferenceRow {
  display: grid;
  grid-template-columns: 28px minmax(130px,1fr) minmax(130px,1.2fr) auto auto;
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding: 10px 0;
}
.sourcePreferenceRow>span {
  color: var(--purple);
  font-weight: 800;
}
.sourcePreferenceRow small {
  color: var(--muted);
}
.sourcePreferenceRow button {
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #282a40;
  color: var(--text);
  padding: 5px 9px;
  cursor: pointer;
}
.sourcePreferenceRow button:disabled {
  opacity: .4;
  cursor: not-allowed;
}
@media (max-width: 600px) {
  .sourcePreferenceRow small {
    display: none;
  }
}

/* ── from product-ui.css ── */
:root {
  --product-bg: #171821;
  --product-surface: #20212c;
  --product-border: #30313f;
  --product-accent: #9a70ff;
}
.productMiniPlayer[hidden],
.productSearchOverlay[hidden],
.productProfileMenu[hidden] {
  display: none !important;
}
.productProfileTrigger {
  min-height: 40px;
  padding: 3px 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
}
.productProfileTrigger:hover,
.productProfileTrigger[aria-expanded="true"] {
  border-color: var(--product-border);
  background: var(--product-surface);
}
.productProfileTrigger:focus-visible {
  outline: 2px solid var(--product-accent);
  outline-offset: 2px;
}
.productProfileMenu {
  position: absolute;
  z-index: 12;
  top: 66px;
  right: 22px;
  width: min(260px, calc(100vw - 32px));
  padding: 8px;
  border: 1px solid var(--product-border);
  border-radius: 14px;
  background: #1b1c27;
  box-shadow: 0 16px 44px #0008;
}
.productProfileIdentity {
  display: grid;
  gap: 3px;
  padding: 12px;
  border-bottom: 1px solid var(--product-border);
}
.productProfileIdentity b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.productProfileIdentity small {
  color: var(--muted);
}
.productProfileMenu button {
  display: flex;
  width: 100%;
  min-height: 42px;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.productProfileMenu button:hover {
  background: #292a39;
}
.productProfileMenu [data-signout] {
  color: #ff7186;
}
.productSearchOverlay {
  position: fixed;
  z-index: 30;
  inset: 0;
  display: grid;
  align-items: start;
}
.productOverlayBackdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.productSearchDialog {
  position: relative;
  overflow: auto;
  border: 1px solid #3d3d51;
  background: #1d1e2a;
  box-shadow: 0 24px 70px #0009;
}
.productSearchDialog h2 {
  margin: 0 0 14px;
  font-size: 18px;
}
.productSearchDialog form {
  display: grid;
  align-items: center;
  border: 1px solid #46415e;
  background: #14151e;
}
.productSearchDialog form:focus-within {
  border-color: var(--product-accent);
  box-shadow: 0 0 0 3px #9a70ff26;
  box-shadow: 0 0 0 3px oklch(from var(--purple) 0.656 calc(c * 1) h / 0.149);
}
.productSearchDialog input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
}
.productSearchDialog form button {
  min-height: 38px;
  padding: 0 14px;
  border: 0;
  border-radius: 9px;
  background: var(--product-accent);
  color: white;
  font-weight: 700;
  cursor: pointer;
}
.productSearchSuggestions {
  display: grid;
  gap: 4px;
  margin-top: 16px;
}
.productSearchSuggestions > small {
  padding: 4px 8px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
}
.productSuggestion {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.productSuggestion:hover,
.productSuggestion:focus-visible {
  background: #292a39;
}
.productSuggestionIcon {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 9px;
  background: linear-gradient(145deg, #744bd6, #e32de1);
  background: linear-gradient(145deg, oklch(from var(--purple) 0.535 calc(c * 0.99) h), oklch(from var(--pink) 0.655 calc(c * 1) h));
}
.productSuggestion b,
.productSuggestion small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.productSuggestion small,
.productSearchHint,
.productSearchEmpty {
  color: var(--muted);
}
.productSearchEmpty {
  margin: 8px;
  padding: 12px;
}
.productSearchHint {
  font-size: 11px;
}
.productMiniPlayer {
  position: fixed;
  z-index: 10;
  display: grid;
  align-items: center;
  border: 1px solid #39394b;
  backdrop-filter: blur(18px);
}
.productMiniTrack {
  display: grid;
  min-width: 0;
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.productMiniTrack img {
  background: var(--product-surface);
  object-fit: cover;
}
.productMiniTrack b,
.productMiniTrack small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.productMiniTrack small {
  color: var(--muted);
}
.productMiniControls {
  display: flex;
  align-items: center;
}
.productMiniControls button {
  border-radius: 50%;
  cursor: pointer;
}
.productMiniControls button[data-autoplay].isActive,
.productMiniControls button[data-247].isActive {
  color: #f2ddff;
  color: oklch(from var(--purple) 0.925 calc(c * 0.25) h);
  background: #7046b5;
  background: oklch(from var(--purple) 0.499 calc(c * 0.83) h);
  box-shadow: inset 0 0 0 1px #c69aff70;
  box-shadow: inset 0 0 0 1px oklch(from var(--purple) 0.765 calc(c * 0.72) h / 0.439);
}
.productMiniControls button[data-crossfade]:disabled {
  color: #777687;
  cursor: not-allowed;
  opacity: .58;
}
.productMiniControls button:disabled {
  cursor: not-allowed;
  opacity: .58;
}
body.menuOpen .productMiniPlayer {
  z-index: 3;
}
@media (max-width: 850px) {
  .productMiniPlayer {
    bottom: max(10px, env(safe-area-inset-bottom));
  }
}
@media (max-width: 480px) {
  .productMiniTrack b {
    font-size: 12px;
  }
  .productMiniTrack small {
    font-size: 10px;
  }
}
.productSearchOverlay {
  justify-items: start;
  padding: 12px 18px 24px;
}
.productOverlayBackdrop {
  background: rgb(7 8 14 / 48%);
  backdrop-filter: blur(3px);
}
.productSearchDialog {
  width: min(430px, calc(100vw - 36px));
  max-height: min(86vh, 760px);
  padding: 8px;
  border-color: #30313f;
  border-radius: 15px;
}
.productSearchDialog h2 {
  display: none;
}
.productSearchDialog form {
  min-height: 42px;
  grid-template-columns: auto minmax(0, 1fr) 30px;
  gap: 8px;
  padding: 3px 7px 3px 11px;
  border-color: #393a4d;
  border-radius: 11px;
}
.productSearchDialog form .productSearchClear {
  display: grid;
  width: 30px;
  height: 30px;
  min-height: 30px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #d9d7e3;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
}
.productSearchDialog form .productSearchClear:hover {
  background: #ffffff12;
}
.productSearchSuggestions {
  margin: 8px -8px 0;
  padding: 8px;
  border-top: 1px solid #30313f;
}
.productSuggestion {
  min-height: 50px;
  padding: 6px 8px;
}
.productSearchHint {
  margin: 7px 8px 2px;
}
.productMiniPlayer {
  right: 18px;
  bottom: max(16px, env(safe-area-inset-bottom));
  left: calc(300px + 18px);
  grid-template-columns: minmax(180px, .9fr) minmax(280px, 1.7fr) minmax(220px, 1fr);
  gap: 22px;
  min-height: 82px;
  padding: 9px 14px;
  border-color: #2d2e3b;
  border-radius: 14px;
  background: rgb(24 25 34 / 97%);
  box-shadow: 0 12px 38px #0009;
}
.productMiniTrack {
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 12px;
}
.productMiniTrack img {
  width: 52px;
  height: 52px;
  border-radius: 8px;
}
.productMiniCenter {
  display: grid;
  min-width: 0;
  gap: 5px;
}
.productMiniControls {
  justify-content: center;
  gap: 10px;
}
.productMiniControls button {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 0;
  background: transparent;
  color: #d5d4df;
  font-size: 15px;
}
.productMiniControls button:first-child {
  border-color: transparent;
  background: transparent;
  color: #d5d4df;
}
.productMiniControls button:hover,
.productMiniActions > button:hover {
  background: #ffffff12;
  color: white;
}
.productMiniControls button[data-toggle] {
  width: 42px;
  height: 42px;
  border: 0;
  background: var(--product-accent);
  font-size: 17px;
}
.productMiniControls button.isActive {
  color: var(--product-accent);
}
.heroControls button.isActive {
  color: var(--product-accent);
  box-shadow: inset 0 0 0 1px #9a70ff70;
  box-shadow: inset 0 0 0 1px oklch(from var(--purple) 0.656 calc(c * 1) h / 0.439);
}
.heroControls button.crossfadeUnavailable:disabled {
  color: #777687;
  cursor: not-allowed;
  opacity: .52;
}
.productMiniControls [data-loop] svg,
.heroControls button[aria-label^="Repeat"] svg {
  display: block;
  width: 26px;
  height: 21px;
  margin: auto;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  vertical-align: middle;
}
.productMiniControls [data-loop] svg .repeatModeBadge,
.heroControls button[aria-label^="Repeat"] svg .repeatModeBadge {
  fill: #a77aff;
  fill: oklch(from var(--purple) 0.683 calc(c * 0.94) h);
  stroke: none;
}
.productMiniControls [data-loop] svg .repeatQueueBadge,
.heroControls button[aria-label^="Repeat"] svg .repeatQueueBadge {
  fill: #e32de1;
  fill: oklch(from var(--pink) 0.655 calc(c * 1) h);
}
.productMiniControls [data-loop] svg .repeatTrackBadge,
.heroControls button[aria-label^="Repeat"] svg .repeatTrackBadge {
  fill: #171821;
  stroke: none;
  font-family: inherit;
  font-size: 8px;
  font-weight: 900;
}
.productMiniControls [data-loop] svg .repeatQueueMark,
.heroControls button[aria-label^="Repeat"] svg .repeatQueueMark {
  stroke: #171821;
  stroke-linecap: round;
  stroke-width: 1.2;
}
.productMiniControls [data-loop] svg .repeatOffSlash,
.heroControls button[aria-label^="Repeat"] svg .repeatOffSlash {
  stroke-width: 2.5;
}
.productMiniTimeline {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 9px;
  color: #9091a5;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.productMiniTimeline span:last-child {
  text-align: right;
}
.productMiniTimeline input,
.productMiniVolume input {
  width: 100%;
  min-width: 0;
  height: 4px;
  margin: 0;
  accent-color: var(--product-accent);
  cursor: pointer;
}
.productMiniActions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.productMiniActions > button {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #d5d4df;
  cursor: pointer;
}
.productMiniActions > button[data-open-player] {
  border: 1px solid #343543;
  background: #292a35;
}
.productMiniVolume {
  display: grid;
  grid-template-columns: auto 72px auto;
  align-items: center;
  gap: 8px;
  color: #d5d4df;
  font-size: 11px;
}
.productMiniVolume output {
  min-width: 34px;
  color: #aaaabd;
  text-align: right;
}
.globalMusicSearch {
  gap: 9px;
}
.globalMusicSearch:focus-within {
  border-color: #7657bd;
  border-color: oklch(from var(--purple) 0.538 calc(c * 0.76) h);
  box-shadow: 0 0 0 3px #9a70ff20;
  box-shadow: 0 0 0 3px oklch(from var(--purple) 0.656 calc(c * 1) h / 0.125);
}
.globalMusicSearch input {
  font-size: 14px;
}
.globalMusicSearch select {
  min-width: 0;
  border: 1px solid #333443;
  border-radius: 8px;
  color: #c6c4d3;
  font-size: 11px;
}
.globalMusicSearch button {
  min-height: 34px;
  padding: 0 13px;
  font-size: 12px;
}
#app.hasMiniPlayer main {
  padding-bottom: 125px;
}
@media (max-width: 850px) {
  .productMiniPlayer {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    gap: 4px 10px;
  }
  .productMiniTrack {
    grid-column: 1;
    grid-row: 1;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 8px;
  }
  .productMiniTrack img {
    width: 42px;
    height: 42px;
  }
  .productMiniTrack b {
    font-size: 12px;
  }
  .productMiniTrack small {
    font-size: 10px;
  }
  .productMiniCenter {
    display: contents;
  }
  .productMiniControls {
    grid-column: 2;
    grid-row: 1;
    gap: 1px;
  }
  .productMiniControls button {
    width: 28px;
    height: 32px;
    font-size: 13px;
  }
  .productMiniControls button[data-shuffle],
  .productMiniControls button[data-loop] {
    display: none;
  }
  .productMiniControls button[data-toggle] {
    width: 34px;
    height: 34px;
  }
  .productMiniTimeline {
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: 34px minmax(0, 1fr) 34px;
    gap: 7px;
  }
  .productMiniActions {
    display: none;
  }
}
@media (max-width: 480px) {
  .productSearchOverlay {
    padding: max(8px, env(safe-area-inset-top)) 12px 18px;
  }
  .productSearchDialog {
    width: calc(100vw - 24px);
  }
  .productMiniPlayer {
    bottom: calc(108px + env(safe-area-inset-bottom));
  }
  .globalMusicSearch {
    gap: 7px;
  }
  .globalMusicSearch select {
    grid-column: 1 / 3;
    grid-row: 2;
  }
  .globalMusicSearch button {
    grid-column: 3;
    grid-row: 1 / 3;
    min-height: 36px;
  }
  .globalMusicSearch input {
    font-size: 13px;
  }
  .productMiniControls button {
    width: 26px;
  }
}

/* ── from analytics.css ── */
.insightsHero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 8px 0 18px;
  padding: 24px;
  border: 1px solid #39344e;
  border-radius: 18px;
  background: linear-gradient(120deg, #282046, #20212d 72%);
  background: linear-gradient(120deg, oklch(from var(--purple) 0.252 calc(c * 0.69) h), #20212d 72%);
}
.insightsHero > div > span,
.insightCardTitle small {
  color: #b69eff;
  color: oklch(from var(--purple) 0.758 calc(c * 0.68) h);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
}
.insightsHero h1 {
  margin: 5px 0;
  font-size: clamp(24px, 4vw, 34px);
}
.insightsHero p {
  margin: 0;
  color: var(--muted);
}
.insightsWindow {
  flex: 0 0 auto;
  border: 1px solid #48445a;
  border-radius: 999px;
  padding: 8px 12px;
  color: #ded8f2;
  color: oklch(from var(--purple) 0.895 calc(c * 0.18) h);
  font-size: 11px;
}
.insightsMetrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.insightMetric {
  display: grid;
  min-width: 0;
  gap: 4px;
}
.insightMetric > small,
.insightMetric > span {
  color: var(--muted);
}
.insightMetric > b {
  overflow: hidden;
  font-size: clamp(20px, 3vw, 28px);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.insightsGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 14px;
  margin-top: 14px;
}
.insightCard {
  min-width: 0;
}
.insightCardTitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 18px;
}
.insightCardTitle h2 {
  margin: 4px 0 0;
  font-size: 17px;
}
.insightCardTitle > span {
  color: var(--muted);
  font-size: 11px;
}
.insightBars {
  display: grid;
  height: 185px;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: end;
  gap: 12px;
  padding-top: 12px;
}
.insightBarColumn {
  display: grid;
  height: 100%;
  grid-template-rows: 20px minmax(0, 1fr) 20px;
  justify-items: center;
  gap: 6px;
}
.insightBarColumn > b,
.insightBarColumn > small {
  color: var(--muted);
  font-size: 10px;
}
.insightBarColumn > i {
  align-self: end;
  width: min(100%, 30px);
  min-height: 4px;
  border-radius: 7px 7px 3px 3px;
  background: linear-gradient(180deg, #cf8aff, #7655ee);
  background: linear-gradient(180deg, oklch(from var(--purple) 0.748 calc(c * 0.86) h), oklch(from var(--purple) 0.57 calc(c * 1.07) h));
  box-shadow: 0 4px 20px #8a62ff35;
  box-shadow: 0 4px 20px oklch(from var(--purple) 0.62 calc(c * 1.09) h / 0.208);
}
.insightTopTracks,
.insightHistoryRows {
  display: grid;
}
.insightTrack,
.insightHistoryRow {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  border-top: 1px solid var(--product-border);
}
.insightTrack > span,
.insightHistoryRow > span {
  color: #b69eff;
  color: oklch(from var(--purple) 0.758 calc(c * 0.68) h);
  font-weight: 800;
  text-align: center;
}
.insightTrack > div,
.insightHistoryRow > div {
  min-width: 0;
}
.insightTrack b,
.insightTrack small,
.insightHistoryRow b,
.insightHistoryRow small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.insightTrack small,
.insightHistoryRow small,
.insightTrack > small,
.insightHistoryRow time {
  color: var(--muted);
  font-size: 11px;
}
.insightHistory {
  margin-top: 14px;
}
.insightHistoryRow {
  grid-template-columns: 34px minmax(0, 1fr) minmax(90px, auto) auto;
  padding: 6px 0;
}
.insightHistoryRow time {
  text-align: right;
}
.insightHistoryRow button {
  min-height: 34px;
  border: 1px solid var(--product-border);
  border-radius: 8px;
  padding: 0 10px;
  background: #292a39;
  color: var(--text);
  cursor: pointer;
}
.insightHistoryRow button:hover {
  border-color: var(--product-accent);
}
.insightEmpty {
  color: var(--muted);
  text-align: center;
}
@media (max-width: 900px) {
  .insightsMetrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .insightsGrid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  .insightsHero {
    align-items: flex-start;
    flex-direction: column;
    padding: 18px;
  }
  .insightMetric {
    padding: 14px;
  }
  .insightHistoryRow {
    grid-template-columns: 26px minmax(0, 1fr) auto;
    gap: 7px;
  }
  .insightHistoryRow time {
    display: none;
  }
  .insightHistoryRow button {
    min-height: 38px;
    padding: 0 8px;
  }
}

/* ── from redesign.css ── */
:root {
  --bg: #11121c;
  --side: #151621;
  --panel: #1b1c29;
  --panel2: #232436;
  --line: #303144;
  --text: #f8f7ff;
  --text: oklch(from var(--purple) 0.979 calc(c * 0.05) h);
  --muted: #999ab0;
  --purple: #9a70ff;
  --pink: #e32de1;
  --green: #19df91;
  --red: #ff6378;
  --surface-raised: #20212f;
  --surface-input: #13141f;
  --radius-card: 17px;
  --radius-control: 11px;
}
html {
  min-width: 0;
  background: var(--bg);
  scroll-behavior: smooth;
  scrollbar-color: #45445b var(--bg);
}
body {
  min-height: 100vh;
  min-height: 100dvh;
  background: radial-gradient(ellipse at 78% -15%, oklch(from var(--purple) 0.293 calc(c * 0.82) h / 0.333) 0, transparent 43%),
    var(--bg);
  font-family: Inter, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
button,
input,
select,
textarea {
  font: inherit;
}
button {
  -webkit-tap-highlight-color: transparent;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 3px;
}
.layout {
  min-height: 100vh;
  min-height: 100dvh;
  grid-template-columns: 268px minmax(0, 1fr);
}
#app > aside {
  z-index: 5;
  height: 100vh;
  height: 100dvh;
  padding: 22px 16px max(16px, env(safe-area-inset-bottom));
  background: rgb(21 22 33 / 96%);
  border-right-color: #292a3a;
  backdrop-filter: blur(20px);
}
.logo {
  gap: 11px;
  margin: 0 4px 20px;
  font-size: 20px;
  letter-spacing: -.035em;
}
.logo .brandMark {
  display: block;
  width: 76px;
  height: 76px;
  flex: 0 0 76px;
  border: 1px solid #ffffff24;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 8px 22px #9a70ff35;
  box-shadow: 0 8px 22px oklch(from var(--purple) 0.656 calc(c * 1) h / 0.208);
}
.loginCard .brandMark {
  display: block;
  width: 224px;
  height: 224px;
  margin: 0 auto 18px;
  border: 1px solid #ffffff24;
  border-radius: 28px;
  object-fit: cover;
  box-shadow: 0 12px 34px #9a70ff40;
  box-shadow: 0 12px 34px oklch(from var(--purple) 0.656 calc(c * 1) h / 0.251);
}
.search {
  min-height: 42px;
  padding: 8px 11px;
  border-color: var(--line);
  background: #1c1d2a;
  color: #aaaabd;
  transition: border-color .18s ease, background .18s ease;
}
.search:hover {
  border-color: #65528e;
  background: #222333;
}
.search kbd {
  color: #c7c4d8;
  background: #303144;
}
.serverPicker {
  min-height: 58px;
  margin: 4px 0 8px;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: #1a1b28;
}
.serverPicker:focus-within {
  border-color: #62518e;
}
.serverPicker img {
  flex: 0 0 auto;
}
.serverPicker select {
  min-width: 0;
  padding: 8px 30px 8px 9px;
  border-color: transparent;
  background: transparent;
  font-size: 13px;
  font-weight: 700;
}
#app nav:not(.mobileDock) {
  min-height: 0;
  scrollbar-width: thin;
}
#app nav:not(.mobileDock) small {
  margin: 18px 10px 6px;
  color: #797b94;
  font-size: 9px;
  letter-spacing: .16em;
}
.nav {
  min-height: 41px;
  margin: 2px 0;
  padding: 9px 12px;
  border: 1px solid transparent;
  color: #aaaabd;
  font-size: 13px;
  font-weight: 600;
  transition: color .16s ease, background .16s ease, border-color .16s ease;
}
.nav:hover {
  background: #222333;
  color: var(--text);
}
.nav.active {
  border-color: #463963;
  background: linear-gradient(90deg, #8a63ef2c, #d930e20b);
  background: linear-gradient(90deg, oklch(from var(--purple) 0.61 calc(c * 0.99) h / 0.173), oklch(from var(--pink) 0.643 calc(c * 0.98) h / 0.043));
  color: #e1d6ff;
  color: oklch(from var(--purple) 0.898 calc(c * 0.28) h);
  box-shadow: inset 3px 0 var(--purple);
}
.asideBottom {
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid #292a3a;
  font-size: 11px;
}
#logout {
  min-height: 38px;
  padding: 0 12px;
  border-radius: 9px;
  color: #ff8497;
  transition: background .16s ease;
}
#logout:hover {
  background: #ff637814;
}
main {
  width: 100%;
  max-width: 1740px;
  margin: 0 auto;
  padding: 0 clamp(18px, 3vw, 44px) 56px;
  min-width: 0;
}
.top {
  position: sticky;
  z-index: 4;
  top: 0;
  height: 76px;
  gap: 14px;
  margin: 0 0 24px;
  border-bottom: 1px solid #2b2c3b;
  background: rgb(17 18 28 / 87%);
  backdrop-filter: blur(18px);
}
.top > div:first-of-type {
  min-width: 0;
}
.crumb {
  display: block;
  margin-bottom: 1px;
  font-size: 9px;
  font-weight: 800;
}
.top h2 {
  overflow: hidden;
  font-size: 19px;
  font-weight: 750;
  letter-spacing: -.025em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user {
  margin-left: auto;
}
.user img {
  width: 38px;
  height: 38px;
  border: 2px solid #453865;
  object-fit: cover;
}
.mobileActions button,
#menu {
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}
.mobileActions button:hover,
#menu:hover {
  border-color: #675293;
  background: #28263a;
}
.pageEnter {
  animation: redesignPageIn .24s ease both;
}
@keyframes redesignPageIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}
.serverHero {
  min-height: 132px;
  gap: 18px;
  margin-bottom: 10px;
  padding: 20px;
  border: 1px solid #38344d;
  border-radius: var(--radius-card);
  background: radial-gradient(circle at 90% 10%, oklch(from var(--purple) 0.625 calc(c * 1.02) h / 0.129), transparent 30%),
    linear-gradient(112deg, #272039, #1c1d2a 65%);
}
.serverHero img {
  flex: 0 0 auto;
  width: 60px;
  height: 60px;
  border: 2px solid #8c6ce6;
  border: 2px solid oklch(from var(--purple) 0.62 calc(c * 0.87) h);
  box-shadow: 0 8px 28px #9a70ff2d;
  box-shadow: 0 8px 28px oklch(from var(--purple) 0.656 calc(c * 1) h / 0.176);
  object-fit: cover;
}
.serverHero h1 {
  font-size: clamp(21px, 3vw, 28px);
  letter-spacing: -.035em;
}
.serverHero p {
  color: #b3b1c5;
  font-size: 12px;
}
.serverHero button,
.play button,
.settingsActions button[type=submit],
.applySound,
.globalMusicSearch button,
.immersiveJoin button,
.playLiked,
.createPlaylist button,
.createGlobal button {
  border: 1px solid #a282ff;
  border: 1px solid oklch(from var(--purple) 0.692 calc(c * 0.88) h);
  border-radius: var(--radius-control);
  background: linear-gradient(135deg, #9a70ff, #8254e9);
  background: linear-gradient(135deg, oklch(from var(--purple) 0.656 calc(c * 1) h), oklch(from var(--purple) 0.576 calc(c * 1.05) h));
  box-shadow: 0 7px 20px #8254e922;
  box-shadow: 0 7px 20px oklch(from var(--purple) 0.576 calc(c * 1.05) h / 0.133);
  color: white;
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}
.serverHero button:hover,
.play button:hover,
.settingsActions button[type=submit]:hover,
.applySound:hover,
.globalMusicSearch button:hover,
.immersiveJoin button:hover,
.playLiked:hover,
.createPlaylist button:hover,
.createGlobal button:hover {
  filter: brightness(1.08);
  box-shadow: 0 9px 25px #8254e944;
  box-shadow: 0 9px 25px oklch(from var(--purple) 0.576 calc(c * 1.05) h / 0.267);
  transform: translateY(-1px);
}
.overviewGrid {
  grid-template-columns: minmax(0, 1.65fr) minmax(260px, .8fr);
  gap: 14px;
}
.panel,
.settingsCard,
.libraryCard,
.radioCard,
.sourceStatus {
  border-color: var(--line);
  border-radius: var(--radius-card);
  background: linear-gradient(155deg, #20212f, #1b1c29 72%);
  box-shadow: 0 8px 28px #00000014;
}
.panel {
  padding: 20px;
}
.metrics {
  gap: 14px;
}
.metrics div {
  min-height: 88px;
  align-content: center;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid #2f3041;
  border-radius: 12px;
  background: #171823;
}
.metrics b {
  font-size: 27px;
  letter-spacing: -.04em;
}
.metrics small {
  font-size: 11px;
}
.healthRing {
  border-color: var(--green);
  box-shadow: 0 0 22px #19df9122;
}
.attention {
  border-left: 3px solid var(--green);
}
.featureGrid {
  grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
  gap: 12px;
}
.featureGrid button {
  min-height: 138px;
  border-style: solid;
  border-color: var(--line);
  background: linear-gradient(145deg, #20212f, #191a26);
  transition: border-color .18s ease, transform .18s ease, background .18s ease;
}
.featureGrid button:hover {
  border-color: #785ac1;
  border-color: oklch(from var(--purple) 0.548 calc(c * 0.76) h);
  background: linear-gradient(145deg, #28243a, #1c1d2a);
  transform: translateY(-3px);
}
.sectionTitle,
.settingsTitle,
.libraryTitle {
  padding: 10px 0 16px;
}
.sectionTitle h1,
.settingsTitle h1,
.libraryTitle h1 {
  font-size: clamp(25px, 4vw, 34px);
  letter-spacing: -.035em;
}
.settingsCard,
.presetPanel,
.soundForm {
  padding: clamp(16px, 2.2vw, 24px);
}
.settingsCard header {
  margin-bottom: 12px;
}
.settingsGrid {
  gap: 10px 22px;
}
.settingsCard input[type=text],
.settingsCard input[type=url],
.settingsCard textarea,
.settingsCard select,
.libraryToolbar input,
.libraryToolbar select,
.radioSearch input,
.globalMusicSearch,
.immersiveJoin select,
.play input {
  border-color: #393a4e;
  border-radius: var(--radius-control);
  background: var(--surface-input);
  color: var(--text);
}
.settingsCard input:focus,
.settingsCard textarea:focus,
.settingsCard select:focus,
.libraryToolbar input:focus,
.radioSearch input:focus {
  border-color: var(--purple);
  box-shadow: 0 0 0 3px #9a70ff20;
  box-shadow: 0 0 0 3px oklch(from var(--purple) 0.656 calc(c * 1) h / 0.125);
}
.settingSwitch {
  min-height: 62px;
}
.settingsActions {
  bottom: 14px;
  z-index: 3;
  border-radius: 13px;
  background: rgb(23 24 36 / 94%);
  box-shadow: 0 12px 34px #0005;
}
.settingsActions button {
  min-height: 42px;
  cursor: pointer;
}
.libraryToolbar {
  flex-wrap: wrap;
  align-items: center;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #191a27;
}
.libraryToolbar > * {
  min-width: 0;
}
.libraryCard,
.radioCard {
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.libraryCard:hover,
.radioCard:hover {
  border-color: #7054b5;
  border-color: oklch(from var(--purple) 0.522 calc(c * 0.73) h);
  box-shadow: 0 12px 30px #0003;
  transform: translateY(-2px);
}
.libraryTabs button,
.radioTabs button,
.queueWorkspaceToolbar button,
.queueWorkspaceToolbar select,
.trackLibraryRow button {
  min-height: 40px;
  border-radius: 10px;
  cursor: pointer;
}
.trackLibraryRow,
.playlistTrackRow,
.queueWorkspaceRow,
.likedRow {
  transition: background .16s ease;
}
.trackLibraryRow:hover,
.playlistTrackRow:hover,
.queueWorkspaceRow:hover,
.likedRow:hover {
  background-color: #252638;
}
.globalMusicSearch {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  height: auto;
  min-height: 54px;
  padding: 5px 7px 5px 15px;
}
.globalMusicSearch input {
  min-width: 0;
}
.globalMusicSearch select {
  width: auto;
  max-width: 170px;
  padding: 9px 30px 9px 10px;
  border-color: var(--line);
  background: var(--surface-raised);
}
.recommendCard,
.queueWorkspaceRow,
.immersiveQueueRow,
.likedRow,
.playlistTrackRow {
  border-radius: 12px;
}
.recommendCard {
  background: linear-gradient(145deg, #222332, #1b1c29);
}
.nowPlayingHero {
  align-items: start;
  border-color: #3b3453;
}
.listenerPanel,
.immersiveQueue,
.likedList,
.playlistTrackList,
.playlistDetailHero,
.insightCard,
.insightHistory,
.insightMetric {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: linear-gradient(155deg, #20212f, #1b1c29 72%);
}
.toastHost {
  top: auto;
  bottom: 18px;
  z-index: 60;
  right: 18px;
  display: grid;
  grid-auto-rows: max-content;
  align-content: end;
  justify-items: end;
  gap: 10px;
}
.toast {
  position: relative;
  display: grid;
  width: min(380px, calc(100vw - 36px));
  min-width: 0;
  min-height: 76px;
  grid-template-columns: minmax(0, 1fr) 28px;
  align-items: start;
  gap: 8px;
  overflow: hidden;
  border: 1px solid #393a4c;
  border-radius: 13px;
  border-left: 1px solid #393a4c;
  background: #1d1e2b;
  box-shadow: 0 14px 42px #0008;
  padding: 14px 14px 12px;
  animation: toastEnter .2s ease-out both;
}
.toastContent {
  display: grid;
  min-width: 0;
  gap: 4px;
  padding: 1px 0 4px;
}
.toastTitle {
  color: var(--text);
  font-size: 13px;
  line-height: 1.4;
}
.toastMessage {
  overflow-wrap: anywhere;
  color: #b8b8c7;
  font-size: 13px;
  line-height: 1.45;
}
.toastClose {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #e5e3ef;
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
}
.toastClose:hover {
  background: #ffffff12;
}
.toastProgress {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  transform-origin: left center;
  animation: toastProgress 3.2s linear forwards;
  background: var(--green);
}
.toast.error .toastProgress {
  background: var(--red);
}
@keyframes toastEnter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes toastProgress {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}
.mobileDock {
  display: none;
}
@media (max-width: 1000px) {
  .layout {
    grid-template-columns: 238px minmax(0, 1fr);
  }
  #app > aside {
    width: min(310px, calc(100vw - 44px));
  }
  .overviewGrid {
    grid-template-columns: 1fr;
  }
  .productMiniPlayer {
    left: 254px;
  }
}
@media (max-width: 850px) {
  .layout {
    display: block;
  }
  #app .immersiveWorkspace > .immersiveSide {
    position: static;
    z-index: auto;
    width: auto;
    height: auto;
    overflow: visible;
    padding: 0;
    transform: none;
    transition: none;
  }
  #app > aside {
    width: min(320px, calc(100vw - 48px));
    padding-top: max(18px, env(safe-area-inset-top));
  }
  main {
    padding-right: 18px;
    padding-left: 18px;
  }
  .top {
    height: 68px;
    margin-bottom: 18px;
  }
  .mobileDock {
    position: fixed;
    z-index: 8;
    right: 10px;
    bottom: max(8px, env(safe-area-inset-bottom));
    left: 10px;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 3px;
    min-height: 62px;
    overflow: visible;
    padding: 6px;
    border: 1px solid #39394b;
    border-radius: 17px;
    background: rgb(24 25 36 / 96%);
    box-shadow: 0 14px 36px #0008;
    backdrop-filter: blur(18px);
  }
  .mobileDock button {
    display: grid;
    min-width: 0;
    min-height: 48px;
    align-content: center;
    justify-items: center;
    gap: 1px;
    padding: 3px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #a5a5b9;
    cursor: pointer;
  }
  .mobileDock button > span {
    font-size: 18px;
    line-height: 1.1;
  }
  .mobileDock button > small {
    font-size: 9px;
  }
  .mobileDock button.active {
    background: #9a70ff20;
    background: oklch(from var(--purple) 0.656 calc(c * 1) h / 0.125);
    color: #d8caff;
    color: oklch(from var(--purple) 0.868 calc(c * 0.36) h);
  }
  .mobileDock button:active {
    transform: scale(.96);
  }
  body.menuOpen .productMiniPlayer {
    z-index: 3;
  }
  .toastHost {
    top: auto;
    right: 12px;
    bottom: calc(82px + env(safe-area-inset-bottom));
    left: 12px;
    grid-auto-rows: max-content;
    align-content: end;
    justify-items: stretch;
  }
  .toast {
    width: 100%;
    min-height: 72px;
  }
  #app.hasMiniPlayer ~ .toastHost {
    bottom: calc(152px + env(safe-area-inset-bottom));
  }
}
@media (max-width: 600px) {
  main {
    padding-right: 12px;
    padding-left: 12px;
  }
  .top {
    gap: 7px;
  }
  .top h2 {
    font-size: 16px;
  }
  .crumb {
    display: none;
  }
  .top .user {
    margin-left: auto;
  }
  .mobileActions button {
    min-height: 38px;
    padding: 0 7px;
    font-size: 11px;
  }
  .serverHero {
    gap: 12px;
    padding: 15px;
  }
  .serverHero img {
    width: 48px;
    height: 48px;
  }
  .serverHero button {
    width: 100%;
    margin: 4px 0 0;
  }
  .panel {
    padding: 15px;
  }
  .metrics {
    gap: 8px;
  }
  .metrics div {
    min-height: 74px;
    padding: 10px;
  }
  .metrics b {
    font-size: 22px;
  }
  .featureGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }
  .featureGrid button {
    min-height: 122px;
    padding: 13px;
  }
  .globalMusicSearch {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
    padding: 10px;
  }
  .globalMusicSearch select,
  .globalMusicSearch button {
    width: 100%;
    max-width: none;
  }
  .globalMusicSearch select {
    grid-column: 1 / 2;
  }
  .globalMusicSearch button {
    grid-column: 2 / 3;
  }
  .recommendRail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .settingsActions {
    bottom: 108px;
  }
  #app.hasMiniPlayer .settingsActions {
    bottom: calc(216px + env(safe-area-inset-bottom));
  }
  .sourcePreferenceRow {
    grid-template-columns: 23px minmax(0, 1fr) auto auto;
    gap: 6px;
  }
  .radioGrid {
    grid-template-columns: 1fr;
  }
  .insightsMetrics {
    gap: 8px;
  }
}
@media (max-width: 380px) {
  .mobileActions button {
    width: 36px;
    overflow: hidden;
    padding: 0 4px;
    font-size: 0;
  }
  .mobileActions button::first-letter {
    font-size: 12px;
  }
  .user img {
    width: 34px;
    height: 34px;
  }
  .featureGrid {
    grid-template-columns: 1fr;
  }
  .insightsMetrics {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 850px) {
  .productMiniPlayer {
    right: 10px;
    bottom: calc(108px + env(safe-area-inset-bottom));
    left: 10px;
    min-height: 94px;
    padding: 7px 10px;
  }
  #app.hasMiniPlayer main {
    padding-bottom: 180px;
  }
}
@media (min-width: 851px) and (max-width: 1000px) {
  .productMiniPlayer {
    grid-template-columns: minmax(140px, .8fr) minmax(240px, 1.5fr) minmax(170px, .9fr);
    gap: 14px;
  }
}
@media (max-width: 560px) {
  .globalMusicSearch {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 7px;
    padding: 6px 8px 6px 11px;
  }
  .globalMusicSearch select {
    grid-column: 1 / 3;
    grid-row: 2;
    width: 100%;
    max-width: none;
  }
  .globalMusicSearch button {
    grid-column: 3;
    grid-row: 1 / 3;
    min-height: 36px;
  }
}
.immersivePlayer {
  gap: 14px;
}
.immersiveWorkspace {
  align-items: stretch;
  gap: 14px;
}
.nowPlayingHero {
  align-content: start;
  align-self: start;
  justify-items: center;
  grid-auto-rows: max-content;
  min-height: 0;
  height: fit-content;
  padding: clamp(18px, 3vw, 34px);
  border: 1px solid #373044;
  border-radius: 18px;
  background: radial-gradient(ellipse at 50% 42%, oklch(from var(--purple) 0.342 calc(c * 0.97) h / 0.22) 0, transparent 52%),
    linear-gradient(155deg, #1e202b, #191a24);
  text-align: center;
  animation: nowPlayingCardIn .48s cubic-bezier(.2, .75, .25, 1) both;
}
.vinylArt {
  box-sizing: border-box;
  width: clamp(170px, 16vw, 210px);
  height: clamp(170px, 16vw, 210px);
  padding: clamp(20px, 2vw, 26px);
  border: 1px solid #7654b944;
  border: 1px solid oklch(from var(--purple) 0.531 calc(c * 0.75) h / 0.267);
  box-shadow: 0 20px 56px #0008, 0 0 0 6px #9a70ff0a;
  box-shadow: 0 20px 56px #0008, 0 0 0 6px oklch(from var(--purple) 0.666 calc(c * 0.91) h / 0.039);
  animation: vinylSettle .65s cubic-bezier(.2, .75, .25, 1) both;
  transition: box-shadow .3s ease, filter .3s ease;
}
.vinylArt.spinning {
  box-shadow: 0 20px 56px #0008, 0 0 0 7px #9a70ff14, 0 0 34px #9a70ff24;
  box-shadow: 0 20px 56px #0008, 0 0 0 7px oklch(from var(--purple) 0.666 calc(c * 0.91) h / 0.078), 0 0 34px oklch(from var(--purple) 0.666 calc(c * 0.91) h / 0.141);
  animation: vinylGlow 2.8s ease-in-out infinite alternate;
}
.vinylArt img {
  transition: filter .45s ease, transform .45s ease;
}
.vinylArt.spinning img {
  filter: saturate(1.12);
  animation: artworkSpin 12s linear infinite;
}
.heroTrackInfo > small,
.heroTrackInfo h1,
.heroTrackInfo > p,
.heroTimeline,
.heroControls,
.playerLiveStatus {
  animation: playerDetailIn .4s cubic-bezier(.2, .75, .25, 1) both;
}
.heroTrackInfo h1 {
  animation-delay: .04s;
}
.heroTrackInfo > p {
  animation-delay: .08s;
}
.heroTimeline {
  animation-delay: .12s;
}
.heroControls {
  animation-delay: .16s;
}
.playerLiveStatus {
  animation-delay: .2s;
}
.heroControls button:not(:disabled) {
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.heroControls button:not(:disabled):hover {
  transform: translateY(-3px);
  box-shadow: 0 7px 18px #0005;
}
.heroControls button:not(:disabled):active {
  transform: scale(.94);
}
.heroTrackInfo {
  width: min(100%, 680px);
}
.heroTrackInfo h1 {
  margin: 8px 0 5px;
  font-size: clamp(24px, 2.5vw, 36px);
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow-wrap: anywhere;
}
.heroTrackInfo p {
  margin: 0;
  font-size: 13px;
}
.heroTimeline {
  margin: 20px 0 12px;
}
.heroControls {
  justify-content: center;
  gap: 9px;
}
.heroControls button {
  background: #292a39;
  transition: background .16s ease, transform .16s ease;
}
.heroControls button:hover {
  transform: translateY(-2px);
  background: #39334b;
}
.heroControls .primaryPlay {
  background: var(--purple);
}
.heroVolume {
  margin-left: 4px;
}
.heroVolume input {
  accent-color: var(--purple);
}
.playerLiveStatus {
  overflow: hidden;
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid #343441;
  color: #a9a8bb;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.immersiveSide {
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
}
.immersiveWorkspaceTabs {
  display: flex;
  min-width: 0;
  min-height: 42px;
  align-items: stretch;
  gap: 4px;
  overflow-x: auto;
  border-bottom: 1px solid #30313f;
  scrollbar-width: none;
}
.immersiveWorkspaceTabs button {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 12px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #a7a6b8;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}
.sectionTitle {
  padding: 4px 0 10px;
}
.sectionTitle h1 {
  margin: 2px 0;
  font-size: clamp(20px, 2.2vw, 25px);
}
.sectionTitle p {
  margin: 2px 0 0;
  font-size: 12px;
}
.immersiveWorkspaceTabs button:hover,
.immersiveWorkspaceTabs button.active {
  color: #f5f1ff;
  color: oklch(from var(--purple) 0.965 calc(c * 0.09) h);
}
.immersiveWorkspaceTabs button.active {
  border-bottom-color: var(--purple);
  background: linear-gradient(180deg, transparent, #9a70ff12);
  background: linear-gradient(180deg, transparent, oklch(from var(--purple) 0.656 calc(c * 1) h / 0.071));
}
.immersiveWorkspaceTabs .workspaceFiltersTab {
  margin-left: auto;
}
.immersiveSide > [hidden] {
  display: none !important;
}
.immersiveQueue,
.listenerPanel {
  min-width: 0;
  border: 1px solid #2d2e3b;
  border-radius: 14px;
  background: #1a1b25;
}
.immersiveQueue {
  max-height: min(680px, calc(100dvh - 290px));
  min-height: 330px;
  padding: 14px;
}
.immersiveQueue .sectionRow {
  position: sticky;
  z-index: 1;
  top: -14px;
  margin: -14px -14px 0;
  padding: 14px;
  border-bottom: 1px solid #2d2e3b;
  background: #1a1b25;
}
.immersiveQueue .sectionRow h3 {
  margin: 0;
  font-size: 14px;
}
.immersiveQueueList {
  gap: 4px;
  margin-top: 8px;
}
.immersiveQueueRow {
  min-height: 58px;
  grid-template-columns: 42px minmax(0, 1fr) auto auto;
  padding: 7px 5px;
  border-bottom: 1px solid #282936;
}
.immersiveQueueRow img {
  width: 40px;
  height: 40px;
  border-radius: 8px;
}
.immersiveQueueRow:hover {
  background: #222330;
}
.listenerPanel {
  min-height: 220px;
  padding: 16px;
}
.listenerPanel .sectionRow {
  padding-bottom: 12px;
  border-bottom: 1px solid #30313f;
}
.listenerList {
  margin-top: 12px;
}
@media (min-width: 1101px) {
  .immersiveWorkspace {
    grid-template-columns: minmax(320px, .78fr) minmax(0, 1.22fr);
    gap: 12px;
  }
  .nowPlayingHero {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
}
@media (max-width: 1100px) {
  .immersiveWorkspace {
    grid-template-columns: minmax(0, 1fr);
  }
  .nowPlayingHero {
    min-height: 0;
    grid-template-columns: minmax(150px, 220px) minmax(0, 1fr);
    justify-items: stretch;
    text-align: left;
  }
  .heroTrackInfo {
    width: 100%;
  }
  .vinylArt {
    width: clamp(160px, 18vw, 190px);
    height: clamp(160px, 18vw, 190px);
  }
}
@media (max-width: 760px) {
  .nowPlayingHero {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
  }
  .heroTrackInfo {
    text-align: center;
  }
  .immersiveQueue {
    max-height: min(58vh, 520px);
    min-height: 260px;
  }
  .immersiveWorkspaceTabs button {
    padding-right: 10px;
    padding-left: 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .nowPlayingHero,
  .vinylArt,
  .vinylArt img,
  .heroTrackInfo > *,
  .heroTimeline,
  .heroControls,
  .playerLiveStatus {
    animation: none !important;
  }
}
@keyframes nowPlayingCardIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes vinylSettle {
  from { opacity: 0; transform: scale(.92) rotate(-8deg); }
  to { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes artworkSpin {
  to { transform: rotate(360deg); }
}
@keyframes vinylGlow {
  from { box-shadow: 0 20px 48px #0007, 0 0 0 5px color-mix(in srgb, var(--purple) 5%, transparent), 0 0 18px color-mix(in srgb, var(--purple) 7%, transparent); }
  to { box-shadow: 0 20px 56px #0008, 0 0 0 8px color-mix(in srgb, var(--purple) 13%, transparent), 0 0 36px color-mix(in srgb, var(--purple) 22%, transparent); }
}
@keyframes playerDetailIn {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Web Player lyrics tab ── */
.lyricsPanel {
  min-width: 0;
  border: 1px solid #2d2e3b;
  border-radius: 14px;
  background: #1a1b25;
}
.lyricsPanel .sectionRow span {
  color: var(--muted);
  font-size: 12px;
}
.lyricsBody {
  position: relative;
  max-height: 480px;
  overflow-y: auto;
  padding: 8px 4px 40%;
  outline: none;
  scrollbar-width: thin;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 10%, #000 85%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 10%, #000 85%, transparent);
}
.lyricsLine {
  margin: 0;
  padding: 7px 8px;
  border-radius: 9px;
  color: #b7b6c9;
  font-size: 17px;
  font-weight: 650;
  line-height: 1.4;
  overflow-wrap: anywhere;
  transition: color .25s ease, opacity .25s ease, transform .25s ease;
}
.lyricsBody[data-synced="true"] .lyricsLine {
  opacity: .55;
}
.lyricsBody[data-synced="true"] .lyricsLine.past {
  opacity: .35;
}
.lyricsBody[data-synced="true"] .lyricsLine.active {
  opacity: 1;
  color: #fff;
  transform: scale(1.03);
  transform-origin: left center;
  background: linear-gradient(90deg, #9a70ff26, transparent);
  background: linear-gradient(90deg, oklch(from var(--purple) 0.656 calc(c * 1) h / 0.149), transparent);
}
.lyricsMessage {
  display: grid;
  justify-items: start;
  gap: 10px;
  padding: 24px 8px;
  color: var(--muted);
}
.lyricsMessage p {
  margin: 0;
}
.lyricsMessage a {
  color: var(--purple);
  font-weight: 650;
  text-decoration: none;
}
.lyricsMessage a:hover {
  text-decoration: underline;
}
.lyricsRetry {
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface-raised);
  color: var(--text);
  cursor: pointer;
}
@media (max-width: 850px) {
  .lyricsBody {
    max-height: 360px;
  }
  .lyricsLine {
    font-size: 15px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lyricsLine {
    transition: none;
  }
  .lyricsBody[data-synced="true"] .lyricsLine.active {
    transform: none;
  }
}

/* ── Web Player visuals: style switcher, theme picker, Spectrum EQ ── */
.immersivePlayer .nowPlayingHero {
  container-type: inline-size;
}
.visualToolbar {
  grid-column: 1 / -1;
  justify-self: stretch;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
  padding-bottom: 14px;
  border-bottom: 1px solid #2d2e3b;
}
.visualStatus {
  margin-right: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #a7a6b8;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.visualStatus::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #5d5e70;
}
.visualStatus[data-status="playing"] {
  color: #f3f0ff;
  color: oklch(from var(--purple) 0.962 calc(c * 0.1) h);
}
.visualStatus[data-status="playing"]::before {
  background: var(--purple);
  box-shadow: 0 0 10px var(--purple);
}
.themePicker {
  position: relative;
}
.themeChip,
.themeSwatch,
.visualSwitch button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  color: #a7a6b8;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.themeChip {
  min-height: 34px;
  padding: 0 12px 0 9px;
  border: 1px solid #343545;
  border-radius: 10px;
  background: #20212f;
  color: #ecebf5;
  color: oklch(from var(--purple) 0.944 calc(c * 0.07) h);
}
.themeChip:hover,
.themeChip[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--purple) 60%, #343545);
}
.themeChip i,
.themeSwatch i {
  width: 14px;
  height: 14px;
  flex: none;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #ffffff1f;
}
.themePopover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  width: 230px;
  padding: 6px;
  border: 1px solid #343545;
  border-radius: 12px;
  background: #1b1c27;
  box-shadow: 0 18px 40px #000a;
}
.themePopover[hidden] {
  display: none;
}
.themeSwatch {
  min-height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  background: transparent;
  text-align: left;
}
.themeSwatch:hover {
  background: #262736;
  color: #f3f0ff;
  color: oklch(from var(--purple) 0.962 calc(c * 0.1) h);
}
.themeSwatch[aria-pressed="true"] {
  background: #2a2b3b;
  color: #fff;
  box-shadow: inset 0 0 0 1px #ffffff1c;
}
.visualSwitch {
  display: flex;
  gap: 2px;
  min-width: 0;
  padding: 3px;
  border: 1px solid #2f3040;
  border-radius: 12px;
  background: #15161f;
}
.visualSwitch button {
  min-height: 30px;
  padding: 0 10px;
  border-radius: 9px;
  background: transparent;
  white-space: nowrap;
}
.visualSwitch button:hover {
  color: #f3f0ff;
  color: oklch(from var(--purple) 0.962 calc(c * 0.1) h);
}
.visualSwitch button[aria-pressed="true"] {
  background: #262736;
  color: #fff;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--purple) 75%, #fff);
}
.visualSwitch svg {
  width: 14px;
  height: 14px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.visualSwitch button[aria-pressed="true"] svg {
  stroke: var(--purple);
}
.themeChip:focus-visible,
.themeSwatch:focus-visible,
.visualSwitch button:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
}
.visualStage {
  display: grid;
  justify-items: stretch;
  min-width: 0;
}
.visualArea {
  position: relative;
  display: grid;
  place-items: center;
  padding: 30px;
}
.visualCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* Fade out before the square edge so glows never show a hard border. */
  -webkit-mask-image: radial-gradient(circle closest-side, #000 80%, transparent 100%);
  mask-image: radial-gradient(circle closest-side, #000 80%, transparent 100%);
}
.visualStage[data-visual="vinyl"] .visualCanvas,
.visualStage[data-visual="off"] .visualCanvas {
  display: none;
}
.visualStage .vinylArt {
  position: relative;
  z-index: 1;
}
/* Only the Vinyl LP style spins the record. */
.visualStage:not([data-visual="vinyl"]) .vinylArt.spinning img,
.visualStage:not([data-visual="vinyl"]) .vinylArt.spinning {
  animation: none;
}
.visualStage[data-visual="off"] .vinylArt,
.visualStage[data-visual="off"] .soundPulse {
  box-shadow: 0 20px 56px #0008;
}
.visualStage[data-visual="off"] .soundPulse {
  display: none;
}
/* Vinyl LP: a black grooved record with the artwork as its centre label,
   and a tonearm that lowers onto the record while music plays. */
.visualStage[data-visual="vinyl"] .vinylArt {
  padding: 30%;
  border-color: #ffffff14;
  background:
    conic-gradient(from 30deg, #ffffff00 0deg, #ffffff12 25deg, #ffffff00 60deg, #ffffff00 180deg, #ffffff0d 205deg, #ffffff00 240deg),
    repeating-radial-gradient(circle, #0c0c10 0 1.5px, #18181e 2px 3.5px),
    #0d0d11;
}
.visualStage[data-visual="vinyl"] .vinylArt img {
  box-shadow: 0 0 0 3px #0008;
}
.visualStage[data-visual="vinyl"] .vinylArt::after {
  inset: 47.5%;
  z-index: 1;
  background: #0d0d11;
  box-shadow: 0 0 0 3px #d4a93c;
}
.tonearm {
  display: none;
  position: absolute;
  top: 4%;
  right: 2%;
  z-index: 2;
  width: 26%;
  aspect-ratio: 60 / 140;
  pointer-events: none;
  transform-origin: 66.67% 14.29%;
  transform: rotate(-26deg);
  transition: transform .9s cubic-bezier(.3, .7, .3, 1);
  filter: drop-shadow(0 6px 6px #0009);
}
.tonearm svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.visualStage[data-visual="vinyl"] .tonearm {
  display: block;
}
.visualStage[data-visual="vinyl"] .vinylArt.spinning ~ .tonearm {
  transform: rotate(0deg);
}
.tonearmBase {
  fill: #8e8f9c;
  stroke: #c9cad4;
  stroke-width: 2;
}
.tonearmHub {
  fill: #24252e;
}
.tonearmRod {
  fill: none;
  stroke: #dcdde5;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tonearmHead {
  fill: #2a2b33;
  stroke: #dcdde5;
  stroke-width: 1.5;
}
.tonearmCartridge {
  fill: #f2c94c;
}
/* Spectrum EQ strip under the artwork. */
.spectrumCanvas {
  display: block;
  width: 100%;
  height: 40px;
  margin-top: -6px;
}
/* Theme-aware accents inside the player. */
.immersivePlayer .nowPlayingHero {
  background: radial-gradient(ellipse at 50% 42%, color-mix(in srgb, var(--purple) 16%, transparent) 0, transparent 52%),
    linear-gradient(155deg, #1e202b, #191a24);
}
.immersivePlayer .vinylArt {
  border-color: color-mix(in srgb, var(--purple) 27%, transparent);
}
.immersivePlayer .heroControls .primaryPlay {
  box-shadow: 0 8px 24px color-mix(in srgb, var(--purple) 40%, transparent);
}
.immersivePlayer .heroControls button.isActive {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--purple) 45%, transparent);
}
.immersivePlayer .immersiveWorkspaceTabs button.active {
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--purple) 7%, transparent));
}
.immersivePlayer .lyricsBody[data-synced="true"] .lyricsLine.active {
  background: linear-gradient(90deg, color-mix(in srgb, var(--purple) 15%, transparent), transparent);
}
@media (max-width: 1100px) {
  .immersivePlayer .nowPlayingHero {
    grid-template-columns: auto minmax(0, 1fr);
  }
}
@media (max-width: 760px) {
  .immersivePlayer .nowPlayingHero {
    grid-template-columns: minmax(0, 1fr);
  }
  .visualArea {
    padding: 24px;
  }
}
/* Narrow player card: the style switch takes its own row and shows icons,
   with the label only on the selected style. */
@container (max-width: 620px) {
  .visualSwitch {
    order: 3;
    flex: 1 1 100%;
  }
  .visualSwitch button {
    flex: 1 1 auto;
    justify-content: center;
    padding: 0 8px;
  }
  .visualSwitch button:not([aria-pressed="true"]) span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}
@media (prefers-reduced-motion: reduce) {
  .visualStage .vinylArt.spinning,
  .visualStage .vinylArt.spinning img {
    animation: none;
  }
  .tonearm {
    transition: none;
  }
}

/* Theme picker in the top bar, beside the profile. */
.top .themePicker {
  flex: 0 0 auto;
  margin-left: auto;
}
.top .themePicker + .user {
  margin-left: 0;
}
.top .themePopover {
  right: 0;
  left: auto;
  width: 264px;
}
.themeGroupLabel {
  grid-column: 1 / -1;
  padding: 6px 6px 2px;
  color: #8e8fa3;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.themeGroupLabel:not(:first-child) {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid #2d2e3b;
}
.themeSwatchWide {
  grid-column: 1 / -1;
}
@media (max-width: 850px) {
  .top .themeChip {
    width: 40px;
    min-height: 40px;
    justify-content: center;
    padding: 0;
  }
  .top .themeChip span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .top .themeChip i {
    width: 18px;
    height: 18px;
  }
  .top .themePopover {
    position: fixed;
    top: 70px;
    right: 12px;
    width: min(264px, calc(100vw - 24px));
  }
}

/* The mini player wears its own theme colour (or the dashboard's): a tint
   across the bar and an accent edge, so a separate colour is easy to see. */
.productMiniPlayer {
  border-color: color-mix(in srgb, var(--purple) 38%, #2d2e3b);
  background:
    linear-gradient(100deg, color-mix(in srgb, var(--purple) 20%, transparent), color-mix(in srgb, var(--pink) 6%, transparent) 55%, transparent),
    rgb(24 25 34 / 97%);
  box-shadow: 0 12px 38px #0009, inset 0 1px 0 color-mix(in srgb, var(--purple) 30%, transparent);
}

/* Full-width top bar: its background runs to both edges of the main area,
   not just the padded content column. */
main {
  overflow-x: clip;
}
.top {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
}
.top::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 -100vmax;
  border-bottom: 1px solid #2b2c3b;
  background: rgb(17 18 28 / 87%);
  backdrop-filter: blur(18px);
  pointer-events: none;
}

/* "Dashboard updated" notice. */
.updateBanner {
  position: fixed;
  z-index: 60;
  top: 14px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100vw - 24px);
  padding: 8px 8px 8px 16px;
  border: 1px solid color-mix(in srgb, var(--purple) 45%, #343545);
  border-radius: 12px;
  background: #1b1c27;
  box-shadow: 0 16px 40px #000a;
  color: #ecebf5;
  font-size: 13px;
  font-weight: 650;
  transform: translateX(-50%);
}
.updateReload,
.updateDismiss {
  min-height: 32px;
  border: 0;
  border-radius: 8px;
  font: inherit;
  cursor: pointer;
}
.updateReload {
  padding: 0 14px;
  background: var(--purple);
  color: #fff;
}
.updateDismiss {
  width: 32px;
  background: transparent;
  color: #a7a6b8;
  font-size: 18px;
}
.updateDismiss:hover {
  color: #fff;
}

/* ── Changelog page ── */
.changelogPage {
  display: grid;
  gap: 18px;
  max-width: 760px;
  margin: 0 auto;
}
.changelogHero {
  text-align: center;
}
.changelogHero h1 {
  margin: 6px 0 4px;
  font-size: clamp(28px, 4vw, 38px);
}
.changelogHero p {
  margin: 0;
  color: var(--muted);
}
.changelogFilters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}
.changelogFilters button {
  min-height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #a7a6b8;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}
.changelogFilters button:hover {
  color: #f3f0ff;
}
.changelogFilters button[aria-pressed="true"] {
  background: var(--purple);
  color: #fff;
}
.changelogList {
  display: grid;
  gap: 16px;
}
.changelogRelease {
  padding: 22px 24px;
  border: 1px solid #2d2e3b;
  border-radius: 16px;
  background: linear-gradient(155deg, #1b1c27, #17181f);
}
.changelogRelease > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid #2a2b38;
}
.changelogRelease > header div {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.changelogRelease h2 {
  margin: 0;
  font-size: 20px;
}
.changelogLatest {
  color: #22c58b;
  font-size: 11px;
  font-weight: 800;
}
.changelogRelease time {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}
.changelogRelease section {
  margin-top: 16px;
}
.changelogRelease h3 {
  margin: 0 0 8px;
  color: #a7a6b8;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.changelogRelease h3[data-category="Added"] { color: #22c58b; }
.changelogRelease h3[data-category="Fixed"] { color: #f2b84b; }
.changelogRelease h3[data-category="Removed"],
.changelogRelease h3[data-category="Security"] { color: #ff8497; }
.changelogRelease ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 18px;
  color: #d5d4df;
  font-size: 13.5px;
  line-height: 1.55;
}
.changelogRelease li::marker {
  color: #5d5e70;
}
.changelogRelease code {
  padding: 1px 6px;
  border: 1px solid #343545;
  border-radius: 5px;
  background: #22232f;
  color: #ecebf5;
  font: 12px/1.4 ui-monospace, Consolas, monospace;
}
.changelogEmpty {
  margin: 0;
  padding: 30px;
  border: 1px dashed #343545;
  border-radius: 14px;
  color: var(--muted);
  text-align: center;
}
.changelogMore {
  justify-self: center;
  min-height: 38px;
  padding: 0 18px;
  border: 1px solid #343545;
  border-radius: 10px;
  background: #20212f;
  color: #ecebf5;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}
.changelogMore:hover {
  border-color: color-mix(in srgb, var(--purple) 60%, #343545);
}
#version:hover {
  color: #f3f0ff;
  text-decoration: underline;
}
@media (max-width: 600px) {
  .changelogRelease {
    padding: 18px 16px;
  }
  .changelogRelease > header {
    flex-wrap: wrap;
  }
}
/* Leave room for the fixed mini player under the last release. */
.changelogPage {
  padding-bottom: 120px;
}

/* ── Audio Filters: 15-band equalizer ── */
.eqStudio {
  display: grid;
  gap: 16px;
}
.eqStudio .soundHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.eqStudio .soundHeader span:first-child,
.eqStudio .soundHeader > div > span {
  color: var(--purple);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
}
.eqStudio .soundHeader h2 {
  margin: 2px 0 0;
}
.eqStudio .filterSaveState {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}
.eqStudio.dirty .filterSaveState {
  color: #f2b84b;
}
.eqPresets,
.eqEffects {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.eqPresets button,
.eqEffects button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid #343545;
  border-radius: 999px;
  background: #20212f;
  color: #d5d4df;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}
.eqEffects button {
  border-radius: 10px;
}
.eqPresets button:hover,
.eqEffects button:hover {
  border-color: color-mix(in srgb, var(--purple) 55%, #343545);
  color: #fff;
}
.eqPresets button[aria-pressed="true"],
.eqEffects button[aria-pressed="true"] {
  border-color: var(--purple);
  background: color-mix(in srgb, var(--purple) 22%, #20212f);
  color: #fff;
}
.eqEffects i {
  font-style: normal;
  opacity: .85;
}
.eqGraph {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 8px;
  padding: 16px 16px 10px 8px;
  border: 1px solid #2d2e3b;
  border-radius: 14px;
  background: #15161f;
}
.eqScale {
  position: relative;
  height: 220px;
  color: #77788c;
  font-size: 10.5px;
  font-weight: 650;
  text-align: right;
}
.eqScale span {
  position: absolute;
  right: 0;
  transform: translateY(-50%);
  white-space: nowrap;
}
.eqPlot {
  position: relative;
  min-width: 0;
}
.eqCurve {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 220px;
  pointer-events: none;
}
.eqZero {
  stroke: #3a3b4c;
  stroke-width: 1;
  stroke-dasharray: 4 4;
  vector-effect: non-scaling-stroke;
}
.eqLine {
  fill: none;
  stroke: var(--purple);
  stroke-width: 2.5;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.eqFill {
  fill: color-mix(in srgb, var(--purple) 16%, transparent);
}
.eqBands {
  position: relative;
  display: grid;
  grid-template-columns: repeat(15, minmax(0, 1fr));
}
.eqBand {
  display: grid;
  justify-items: center;
  gap: 4px;
  min-width: 0;
}
.eqBand input {
  width: 28px;
  height: 220px;
  margin: 0;
  writing-mode: vertical-lr;
  direction: rtl;
  background: transparent;
  cursor: pointer;
  accent-color: var(--purple);
  appearance: none;
  -webkit-appearance: none;
}
.eqBand input::-webkit-slider-runnable-track {
  width: 4px;
  border-radius: 4px;
  background: #2a2b38;
}
.eqBand input::-moz-range-track {
  width: 4px;
  border-radius: 4px;
  background: #2a2b38;
}
.eqBand input::-webkit-slider-thumb {
  width: 16px;
  height: 16px;
  margin-left: -6px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--purple);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--purple) 28%, transparent);
  -webkit-appearance: none;
}
.eqBand input::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--purple);
}
.eqBand input:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
  border-radius: 8px;
}
.eqBand b {
  color: #d5d4df;
  font-size: 11px;
}
.eqBand small {
  color: #77788c;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}
.eqHeading {
  margin: 4px 0 0;
  color: #a7a6b8;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.eqMotion {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 28px;
}
.eqMotion label {
  display: grid;
  gap: 8px;
}
.eqMotion label > span {
  display: flex;
  justify-content: space-between;
  color: #d5d4df;
  font-size: 13px;
}
.eqMotion output {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.eqMotion input {
  width: 100%;
  accent-color: var(--purple);
}
.eqStudio footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 12px;
  border-top: 1px solid #2a2b38;
}
.eqStudio footer p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}
.eqStudio footer button {
  flex: none;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid #343545;
  border-radius: 10px;
  background: #20212f;
  color: #ecebf5;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}
@media (max-width: 760px) {
  .eqGraph {
    grid-template-columns: minmax(0, 1fr);
    overflow-x: auto;
  }
  .eqScale {
    display: none;
  }
  .eqPlot {
    min-width: 520px;
  }
  .eqMotion {
    grid-template-columns: minmax(0, 1fr);
  }
  .eqStudio footer {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ── DJ Permissions: individual access and command permissions ── */
.djHint {
  color: #f2b84b;
  font-style: normal;
}
.djForm.dirty .settingsActions button[type="submit"] {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--purple) 35%, transparent);
}
.djMembersCard > header,
.djCommandsCard > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.djAddMember,
.djResetCommands {
  flex: none;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid #343545;
  border-radius: 10px;
  background: #20212f;
  color: #ecebf5;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}
.djAddMember:hover,
.djResetCommands:hover {
  border-color: color-mix(in srgb, var(--purple) 60%, #343545);
}
.djSearch {
  display: grid;
  gap: 8px;
  margin: 12px 0 4px;
}
.djSearch input,
.djCommandTools input {
  width: 100%;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid #343545;
  border-radius: 10px;
  background: #15161f;
  color: var(--text);
  font: inherit;
}
.djSearchResults {
  display: grid;
  gap: 4px;
}
.djSearchResult {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid #2d2e3b;
  border-radius: 10px;
  background: #1b1c27;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.djSearchResult:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--purple) 55%, #2d2e3b);
}
.djSearchResult:disabled {
  opacity: .6;
  cursor: default;
}
.djSearchResult span {
  display: grid;
  flex: 1;
  min-width: 0;
}
.djSearchResult small {
  color: var(--muted);
}
.djSearchResult em {
  color: var(--purple);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}
.djSearchResult img,
.djMemberRow img,
.djAvatar {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
}
.djAvatar {
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--purple) 30%, #20212f);
  color: #fff;
  font-weight: 800;
}
.djMemberList {
  display: grid;
  margin-top: 8px;
}
.djMemberRow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid #2a2b38;
}
.djMemberRow:first-child {
  border-top: 0;
}
.djMemberRow > div {
  display: grid;
  flex: 1;
  min-width: 0;
}
.djMemberRow b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.djMemberRow small {
  color: var(--muted);
  font-size: 12px;
}
.djToggle {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}
.djToggle input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.djToggle i {
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: #3a3b4c;
  transition: background .18s ease;
}
.djToggle i::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ecebf5;
  transition: transform .18s ease;
}
.djToggle input:checked + i {
  background: var(--purple);
}
.djToggle input:checked + i::after {
  transform: translateX(18px);
}
.djToggle input:focus-visible + i {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
}
.djRemove {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #a7a6b8;
  font-size: 18px;
  cursor: pointer;
}
.djRemove:hover {
  background: #2a1d24;
  color: #ff8497;
}
.djEmpty {
  margin: 0;
  padding: 14px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}
.djCommandTools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 14px 0;
}
.djCommandTools input {
  flex: 1 1 260px;
  max-width: 380px;
}
.djCommandTabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  border: 1px solid #2f3040;
  border-radius: 12px;
  background: #15161f;
}
.djCommandTabs button {
  min-height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #a7a6b8;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.djCommandTabs button[aria-pressed="true"] {
  background: #2a2b3b;
  color: #fff;
}
.djCommandColumns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.djColumn {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  border: 1px solid #2d2e3b;
  border-radius: 14px;
  background: #15161f;
  overflow: hidden;
}
.djColumn[data-side="dj"] {
  border-color: color-mix(in srgb, var(--purple) 45%, #2d2e3b);
  box-shadow: 0 0 28px color-mix(in srgb, var(--purple) 12%, transparent);
}
.djColumn > header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border-bottom: 1px solid #2a2b38;
}
.djColumn > header > div {
  display: grid;
  flex: 1;
  min-width: 0;
}
.djColumn > header small {
  color: var(--muted);
  font-size: 11.5px;
}
.djColumnIcon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 10px;
  background: color-mix(in srgb, var(--purple) 18%, #20212f);
  color: var(--purple);
}
.djMoveAll {
  flex: none;
  border: 0;
  background: transparent;
  color: var(--purple);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.djMoveAll:disabled {
  opacity: .4;
  cursor: default;
}
.djCount {
  min-width: 30px;
  padding: 2px 8px;
  border: 1px solid #343545;
  border-radius: 8px;
  color: #d5d4df;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}
.djCommandList {
  display: grid;
  align-content: start;
  gap: 8px;
  max-height: 440px;
  padding: 10px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.djCommandRow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #2a2b38;
  border-radius: 10px;
  background: #1b1c27;
}
.djCommandRow > div {
  flex: 1;
  min-width: 0;
}
.djCommandRow b {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 13px;
}
.djCommandRow small {
  display: block;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.djGroup {
  margin-left: 8px;
  padding: 1px 7px;
  border: 1px solid color-mix(in srgb, var(--purple) 40%, #343545);
  border-radius: 6px;
  color: color-mix(in srgb, var(--purple) 70%, #fff);
  font-size: 10.5px;
  font-weight: 700;
}
.djCommandRow button {
  flex: none;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid #343545;
  border-radius: 9px;
  background: #20212f;
  color: #d5d4df;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.djColumn[data-side="public"] .djCommandRow button {
  border-color: color-mix(in srgb, var(--purple) 45%, #343545);
  color: color-mix(in srgb, var(--purple) 75%, #fff);
}
.djCommandRow button:hover {
  background: #2a2b3b;
}
@media (max-width: 900px) {
  .djCommandColumns {
    grid-template-columns: minmax(0, 1fr);
  }
  .djMembersCard > header,
  .djCommandsCard > header {
    flex-direction: column;
  }
}
/* Long descriptions must not widen the command lists past their column. */
.djCommandList {
  grid-template-columns: minmax(0, 1fr);
}
.djColumn > header small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Autoplay Studio ── */
.studioPage {
  display: grid;
  gap: 16px;
  padding-bottom: 110px;
}
.studioHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.studioHeader span {
  color: var(--purple);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.studioHeader h1 {
  margin: 4px 0;
  font-size: clamp(26px, 3.4vw, 34px);
}
.studioHeader p {
  margin: 0;
  color: var(--muted);
}
.studioHeaderActions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.studioSaveState {
  color: var(--muted) !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.studioStart {
  min-height: 42px;
  padding: 0 18px;
  border: 0;
  border-radius: 11px;
  background: var(--purple);
  color: #fff;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--purple) 35%, transparent);
}
.studioStart[aria-pressed="true"] {
  background: #2a2b3b;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--purple) 55%, #343545);
}
.studioSteps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.studioSteps button {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 12px 4px;
  border: 0;
  border-bottom: 2px solid #2d2e3b;
  background: transparent;
  color: #a7a6b8;
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.studioSteps button i {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: 50%;
  background: #2a2b3b;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}
.studioSteps button[aria-current] {
  border-bottom-color: var(--purple);
  color: #fff;
}
.studioSteps button[aria-current] i {
  background: var(--purple);
  color: #fff;
}
.studioCards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.studioCard {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  padding: 20px;
}
.studioCard h2,
.studioPreview h2,
.studioPresets h2 {
  margin: 0 0 4px;
  font-size: 15px;
}
.studioCard h3 {
  margin: 6px 0 0;
  color: #8e8fa3;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.studioFlash {
  animation: studioFlash 1.1s ease;
}
@keyframes studioFlash {
  30% { box-shadow: 0 0 0 2px var(--purple); }
}
.studioChips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.studioChips button {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid #343545;
  border-radius: 8px;
  background: #1b1c27;
  color: #d5d4df;
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.studioChips button:hover {
  border-color: color-mix(in srgb, var(--purple) 50%, #343545);
}
.studioChips button[aria-pressed="true"] {
  border-color: var(--purple);
  background: color-mix(in srgb, var(--purple) 20%, #1b1c27);
  color: #fff;
}
.studioNote {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12px;
}
.studioStops {
  display: grid;
  gap: 6px;
  padding-bottom: 12px;
  border-bottom: 1px solid #2a2b38;
}
.studioStops > span:first-child {
  display: flex;
  justify-content: space-between;
}
.studioStops output {
  color: var(--purple);
  font-weight: 700;
}
.studioStops input {
  width: 100%;
  accent-color: var(--purple);
}
.studioStopLabels {
  display: flex;
  justify-content: space-between;
  color: #77788c;
  font-size: 10.5px;
}
.studioRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid #2a2b38;
}
.studioRow:last-child {
  border-bottom: 0;
}
.studioRow > span {
  display: grid;
  min-width: 0;
}
.studioRow small {
  color: var(--muted);
  font-size: 11.5px;
}
.studioRow select,
.studioRow button {
  flex: none;
  max-width: 55%;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid #343545;
  border-radius: 9px;
  background: #15161f;
  color: var(--text);
  font: inherit;
  font-size: 13px;
}
.studioRow button {
  cursor: pointer;
}
.studioSources {
  display: grid;
}
.studioSource {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #2a2b38;
  cursor: pointer;
}
.studioSource:last-child {
  border-bottom: 0;
}
.studioSource > span:first-child {
  display: grid;
}
.studioSource small {
  color: var(--muted);
  font-size: 11.5px;
}
.studioSource.offline {
  opacity: .5;
  cursor: not-allowed;
}
.studioMore {
  padding: 0;
}
.studioMore summary {
  padding: 16px 20px;
  color: #d5d4df;
  font-weight: 700;
  cursor: pointer;
}
.studioMoreGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 28px;
  padding: 0 20px 14px;
}
.studioPreview,
.studioPresets {
  padding: 20px;
}
.studioPreview > header,
.studioPresets > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.studioPresets > header small {
  color: var(--muted);
}
.studioPreview > header button {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid #343545;
  border-radius: 10px;
  background: #20212f;
  color: #ecebf5;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}
.studioPreviewList {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.studioTrack {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.studioTrack img {
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 9px;
  object-fit: cover;
}
.studioTrack > div {
  display: grid;
  flex: 1;
  min-width: 0;
}
.studioTrack b,
.studioTrack small,
.studioTrack p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.studioTrack small,
.studioTrack p {
  margin: 0;
  color: var(--muted);
  font-size: 11.5px;
}
.studioTag {
  flex: none;
  padding: 3px 9px;
  border: 1px solid #343545;
  border-radius: 7px;
  color: #d5d4df;
  font-size: 11px;
}
.studioEmpty {
  grid-column: 1 / -1;
  padding: 24px;
  border: 1px dashed #343545;
  border-radius: 12px;
  color: var(--muted);
  text-align: center;
}
@media (max-width: 1100px) {
  .studioCards,
  .studioPreviewList {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 760px) {
  .studioHeader {
    flex-direction: column;
  }
  .studioSteps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .studioMoreGrid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.studioSettings {
  display: grid;
  gap: 16px;
}

/* Autoplay on/off status at the top of the Studio. */
.studioStatus {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid #4a3b22;
  border-radius: 12px;
  background: linear-gradient(90deg, #2a2216, #1b1c27 70%);
}
.studioStatus > div {
  display: grid;
  flex: 1;
  min-width: 0;
}
.studioStatus small {
  color: var(--muted);
  font-size: 12px;
}
.studioStatusDot {
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: 50%;
  background: #f2b84b;
}
.studioStatus[data-on="true"] {
  border-color: color-mix(in srgb, var(--purple) 40%, #2d2e3b);
  background: linear-gradient(90deg, color-mix(in srgb, var(--purple) 14%, #1b1c27), #1b1c27 70%);
}
.studioStatus[data-on="true"] .studioStatusDot {
  background: #22c58b;
  box-shadow: 0 0 10px #22c58b;
}

/* Audio Filters: fine-tune effects. */
.eqFine {
  border: 1px solid #2d2e3b;
  border-radius: 12px;
  background: #15161f;
}
.eqFine summary {
  padding: 12px 16px;
  color: #d5d4df;
  font-weight: 700;
  cursor: pointer;
}
.eqFineGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 28px;
  padding: 4px 16px 16px;
}
.eqFineGrid label {
  display: grid;
  gap: 6px;
}
.eqFineGrid label > span {
  display: flex;
  justify-content: space-between;
  color: #d5d4df;
  font-size: 13px;
}
.eqFineGrid output {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.eqFineGrid input {
  width: 100%;
  accent-color: var(--purple);
}
.eqChannel {
  display: grid;
  grid-column: 1 / -1;
  gap: 8px;
  color: #d5d4df;
  font-size: 13px;
}
.eqChannel div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.eqChannel button {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid #343545;
  border-radius: 8px;
  background: #1b1c27;
  color: #d5d4df;
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.eqChannel button[aria-pressed="true"] {
  border-color: var(--purple);
  background: color-mix(in srgb, var(--purple) 20%, #1b1c27);
  color: #fff;
}
@media (max-width: 760px) {
  .eqFineGrid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Changelog: owner card for Discord release-note posts. */
.releasePostCard {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 20px;
  border: 1px solid color-mix(in srgb, var(--purple) 35%, #2d2e3b);
  border-radius: 14px;
  background: linear-gradient(120deg, color-mix(in srgb, var(--purple) 10%, #1b1c27), #1b1c27 70%);
}
.releasePostText {
  display: grid;
  gap: 2px;
  min-width: 0;
  flex: 1 1 260px;
}
.releasePostText small,
.releasePostNow {
  color: var(--muted);
  font-size: 12px;
}
.releasePostNow {
  color: color-mix(in srgb, var(--purple) 70%, #fff);
  font-weight: 650;
}
.releasePostControls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.releasePostControls select,
.releasePostButton {
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid #343545;
  border-radius: 10px;
  background: #15161f;
  color: var(--text);
  font: inherit;
  font-size: 13px;
}
.releasePostButton {
  background: var(--purple);
  border-color: transparent;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}
.releasePostButton:disabled {
  opacity: .5;
  cursor: default;
}

/* ── Icons (Lucide). They draw in the current text colour, so they follow the theme. ── */
.icon {
  display: inline-block;
  flex: none;
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.2em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Icon + label pairs. */
.nav,
#pageTitle,
.immersiveWorkspaceTabs button,
.serverHero button,
.radioActions button,
.playLiked,
.productProfileMenu button,
.lyricsMessage a,
.healthWorkspace .sourceBadge,
.heroTrackInfo .sectionRow h3,
.immersiveQueue .sectionRow h3,
.lyricsPanel h3,
.listenerPanel b {
  display: inline-flex;
  align-items: center;
  gap: .5em;
}
.nav {
  display: flex;
}
.nav .icon {
  width: 1.05em;
  height: 1.05em;
  opacity: .85;
}
.nav.active .icon {
  color: var(--purple);
  opacity: 1;
}
#pageTitle .icon {
  color: var(--purple);
}
/* Liked hearts are filled. */
.liked .icon,
.libraryHeart.liked .icon,
.likedArt .icon {
  fill: currentColor;
}
/* Icon-only buttons centre their icon. */
.heroControls button,
.productMiniControls button,
.productMiniActions button,
.queueWorkspaceActions button,
.playlistTrackActions button,
.immersiveQueueRow button,
.toastClose,
.updateDismiss,
.djRemove {
  display: inline-grid;
  place-items: center;
}
.heroControls .primaryPlay .icon {
  width: 1.3em;
  height: 1.3em;
  fill: currentColor;
}
.productMiniControls [data-toggle] .icon {
  fill: currentColor;
}
/* Large decorative icons (empty states, artwork placeholders). */
.panel.empty > div .icon,
.radioEmpty > div .icon,
.likedEmpty > .icon,
.likedArt .icon,
.playlistArt > .icon,
.radioLogo > .icon {
  width: 2.2em;
  height: 2.2em;
  stroke-width: 1.6;
}
.featureGrid button i .icon,
.queuePlayConfirmIcon .icon {
  width: 1.3em;
  height: 1.3em;
}
.permissionCard i .icon {
  width: .9em;
  height: .9em;
  stroke-width: 3;
}
.queueDrag .icon {
  opacity: .6;
}

/* Brighter icons: a light purple from the theme colour, so they still follow the theme. */
:root {
  --icon-color: color-mix(in srgb, var(--purple) 72%, #ffffff);
}
.nav .icon,
.nav.active .icon,
#pageTitle .icon,
.immersiveWorkspaceTabs button .icon,
.sectionRow .icon,
.lyricsPanel h3 .icon,
.listenerPanel b .icon,
.featureGrid button i .icon,
.serverHero button .icon,
.eqEffects .icon,
.visualSwitch .icon,
.heroControls button:not(.primaryPlay) .icon,
.productMiniControls button:not([data-toggle]) .icon,
.productMiniActions .icon,
.queueWorkspaceActions button:not(.danger) .icon,
.immersiveQueueRow button .icon,
.playlistTrackActions button:not(.danger) .icon,
.productProfileMenu .icon,
.productSuggestionIcon .icon,
.mobileDock .icon,
#dashboardSearch .icon,
.globalMusicSearch > span .icon,
.djColumnIcon .icon,
.radioLogo > .icon,
.playlistArt > .icon,
.panel.empty > div .icon,
.radioEmpty > div .icon,
.likedEmpty > .icon,
#menu .icon {
  color: var(--icon-color);
  opacity: 1;
}
/* Liked hearts and red actions keep their own colour. */
.liked .icon,
.danger .icon {
  color: inherit;
}

/* ── Overview: Now Playing, quick actions, last 24 hours, activity ───────── */
.overviewLive {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(260px, .8fr);
  gap: 14px;
  margin-top: 14px;
}
.overviewLive.ovSplit {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.overviewLive .panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.overviewLive svg {
  width: 18px;
  height: 18px;
  flex: none;
}
.ovEmpty {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 22px 8px;
  text-align: center;
  color: var(--muted);
}
.ovEmpty>svg {
  width: 30px;
  height: 30px;
  color: var(--icon-color);
}
.ovEmpty b {
  color: var(--text);
}
.ovPrimary,
.ovLink,
.ovMore {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  border-radius: var(--radius-control);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.ovPrimary {
  margin-top: 8px;
  padding: 10px 16px;
  color: #fff;
  background: linear-gradient(135deg, var(--purple), var(--pink));
}
.ovTrack {
  display: flex;
  gap: 18px;
  align-items: center;
  min-width: 0;
}
.ovArt {
  width: 112px;
  height: 112px;
  flex: none;
  border-radius: 14px;
  object-fit: cover;
  box-shadow: 0 10px 30px #0006;
}
.ovArtFallback {
  display: grid;
  place-items: center;
  color: var(--icon-color);
  background: var(--surface-input);
}
.ovTrackInfo {
  display: grid;
  gap: 4px;
  min-width: 0;
  flex: 1;
}
.ovTrackInfo>b {
  font-size: 19px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ovTrackInfo>small,
.ovMuted,
.ovTimes {
  color: var(--muted);
}
.ovProgress {
  height: 5px;
  margin-top: 8px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}
.ovProgress i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--purple), var(--pink));
  transition: width .9s linear;
}
.ovTimes {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.ovControls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.ovControls>button[data-ov] {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--text);
  background: var(--surface-input);
  cursor: pointer;
}
.ovControls>.ovPlay {
  width: 44px;
  height: 44px;
  border: 0;
  color: #fff;
  background: linear-gradient(135deg, var(--purple), var(--pink));
}
.ovLink {
  margin-left: auto;
  padding: 8px 12px;
  color: var(--icon-color);
  background: transparent;
  border: 1px solid var(--line);
}
.ovControls button:hover,
.ovLink:hover,
.ovMore:hover,
.ovAction:not(:disabled):hover {
  filter: brightness(1.12);
  border-color: var(--purple);
}
.ovUpNext {
  display: grid;
  gap: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.ovUpNext>span,
.ovTop small:first-child {
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--muted);
}
.ovRow {
  display: grid;
  grid-template-columns: 16px 38px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 5px 6px;
  border-radius: 10px;
}
.ovRow:hover {
  background: var(--surface-input);
}
.ovRow em {
  font-style: normal;
  color: var(--muted);
  text-align: center;
}
.ovThumb {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  object-fit: cover;
}
.ovRow div,
.ovTop div,
.ovFeedList div {
  display: grid;
  min-width: 0;
}
.ovRow b,
.ovRow small,
.ovTop b,
.ovTop small,
.ovFeedList small {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ovRow small,
.ovRow time {
  color: var(--muted);
  font-size: 12px;
}
.ovMore {
  justify-self: start;
  padding: 6px 10px;
  color: var(--icon-color);
  background: transparent;
  border: 1px solid transparent;
}
.ovActions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.ovAction {
  display: grid;
  justify-items: start;
  gap: 3px;
  padding: 12px;
  text-align: left;
  font: inherit;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface-input);
  cursor: pointer;
}
.ovAction:first-child {
  grid-column: 1 / -1;
}
.ovAction svg {
  color: var(--icon-color);
  margin-bottom: 4px;
}
.ovAction small {
  color: var(--muted);
  font-size: 12px;
}
.ovAction.isOn {
  border-color: var(--purple);
  background: color-mix(in srgb, var(--purple) 16%, var(--surface-input));
}
.ovAction:disabled {
  opacity: .5;
  cursor: not-allowed;
}
.ovStatNumbers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.ovStatNumbers div {
  display: grid;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-input);
}
.ovStatNumbers b {
  font-size: 24px;
  letter-spacing: -.03em;
}
.ovStatNumbers small {
  color: var(--muted);
  font-size: 11px;
}
.ovHours {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 72px;
}
.ovHours i {
  flex: 1;
  min-height: 3px;
  border-radius: 4px 4px 2px 2px;
  background: linear-gradient(180deg, var(--pink), var(--purple));
}
.ovHours i.isEmpty {
  background: var(--line);
}
.ovHourLabels {
  display: flex;
  justify-content: space-between;
  margin-top: -8px;
  color: var(--muted);
  font-size: 11px;
}
.ovTops {
  display: grid;
  gap: 8px;
}
.ovTop {
  display: flex;
  gap: 12px;
  align-items: center;
}
.ovTop>svg {
  width: 34px;
  height: 34px;
  padding: 8px;
  border-radius: 10px;
  color: var(--icon-color);
  background: color-mix(in srgb, var(--purple) 14%, transparent);
}
.ovTop small:last-child {
  color: var(--muted);
  font-size: 12px;
}
.ovFeedList {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 430px;
  overflow-y: auto;
}
.ovFeedList li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px 6px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
}
.ovFeedList li:last-child {
  border-bottom: 0;
}
.ovFeedList li>svg {
  width: 30px;
  height: 30px;
  padding: 7px;
  border-radius: 50%;
  color: var(--icon-color);
  background: color-mix(in srgb, var(--purple) 14%, transparent);
}
.ovFeedList p {
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ovFeedList small,
.ovFeedList time {
  color: var(--muted);
  font-size: 12px;
}
@media (max-width: 850px) {
  .overviewLive,
  .overviewLive.ovSplit {
    grid-template-columns: minmax(0, 1fr);
  }
  .ovArt {
    width: 84px;
    height: 84px;
  }
}
@media (max-width: 480px) {
  .ovTrack {
    flex-direction: column;
    align-items: stretch;
  }
  .ovArt {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }
  .ovStatNumbers b {
    font-size: 19px;
  }
}

/* ── Search source picker (Web Player, quick search, mini player) ────────── */
.sourcePickLabel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 4px;
  color: var(--muted);
  font-size: 12px;
}
.sourcePickLabel svg {
  width: 14px;
  height: 14px;
  color: var(--icon-color);
}
.sourcePills {
  align-items: center;
}
.sourcePicker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sourceChip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-input);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.sourceChip:not(:disabled):hover {
  border-color: var(--purple);
}
.sourceChip.isOn {
  border-color: var(--purple);
  background: color-mix(in srgb, var(--purple) 22%, var(--surface-input));
  box-shadow: 0 0 0 1px var(--purple) inset;
}
.sourceChip:disabled {
  opacity: .4;
  cursor: not-allowed;
  text-decoration: line-through;
}
.sourceDot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--icon-color);
}
.sourceDot[data-source="youtube"] { background: #ff3b3b; }
.sourceDot[data-source="youtube_music"] { background: #ff5f7e; }
.sourceDot[data-source="spotify"] { background: #1ed760; }
.sourceDot[data-source="soundcloud"] { background: #ff7a1a; }
.sourceDot[data-source="deezer"] { background: #a238ff; }
.sourceDot[data-source="applemusic"] { background: #fa4d6a; }
.sourceDot[data-source="jiosaavn"] { background: #2bc5b4; }
.sourceDot[data-source="bandcamp"] { background: #3fa9c9; }
.productSearchSources {
  margin: 12px 0 4px;
}
.sourcePicker.isCompact .sourceChip {
  padding: 5px 10px;
  font-size: 11px;
}
.productSearchHint b {
  color: var(--text);
}
.productMiniSource {
  position: relative;
  border: 1px solid var(--product-border) !important;
}
.productMiniSource svg {
  width: 17px;
  height: 17px;
  color: var(--icon-color);
}
.productMiniSource .sourceDot {
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 9px;
  height: 9px;
  box-shadow: 0 0 0 2px #1b1c27;
}
.visuallyHidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.productSourceMenu {
  position: fixed;
  z-index: 40;
  right: 24px;
  bottom: 112px;
  display: grid;
  gap: 10px;
  width: min(330px, calc(100vw - 32px));
  padding: 14px;
  border: 1px solid var(--product-border);
  border-radius: 16px;
  background: #1b1c27;
  box-shadow: 0 18px 50px #000a;
}
.productSourceMenu > small {
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--muted);
}
.sourcePicker.isList {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sourcePicker.isList .sourceChip {
  border-radius: 10px;
  padding: 9px 10px;
}
.sourcePicker.isList .sourceChip[data-source-pick="all"] {
  grid-column: 1 / -1;
}
.productSourceMenu form {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 4px 4px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-input);
}
.productSourceMenu form > span svg {
  width: 16px;
  height: 16px;
  color: var(--muted);
}
.productSourceMenu input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
}
.productSourceMenu form button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 9px;
  color: #fff;
  background: linear-gradient(135deg, var(--purple), var(--pink));
  cursor: pointer;
}
@media (max-width: 850px) {
  .productSourceMenu {
    right: 16px;
    bottom: 180px;
  }
}

/* ── "Play only from" lock ───────────────────────────────────────────────── */
.playLockToggle {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  text-align: left;
  font: inherit;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-input);
  cursor: pointer;
}
.playLockToggle > svg {
  width: 18px;
  height: 18px;
  color: var(--icon-color);
}
.playLockToggle span {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.playLockToggle b {
  font-size: 13px;
}
.playLockToggle small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}
.playLockToggle > i {
  position: relative;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: var(--line);
  transition: background .2s;
}
.playLockToggle > i::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform .2s;
}
.playLockToggle.isOn {
  border-color: var(--purple);
  background: color-mix(in srgb, var(--purple) 16%, var(--surface-input));
}
.playLockToggle.isOn > i {
  background: linear-gradient(135deg, var(--purple), var(--pink));
}
.playLockToggle.isOn > i::after {
  transform: translateX(16px);
}
.playLockToggle:disabled {
  opacity: .5;
  cursor: not-allowed;
}
.productMiniSource.isLocked {
  border-color: var(--purple) !important;
  background: color-mix(in srgb, var(--purple) 18%, transparent) !important;
}
.sourceLockNote {
  padding: 2px 8px;
  border-radius: 999px;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--purple), var(--pink));
}
.sourceLockNote[hidden] {
  display: none;
}
.productSourceList {
  display: grid;
  gap: 10px;
}
.sourcePills .playLockToggle {
  flex: 1 1 100%;
  max-width: 560px;
  margin-top: 4px;
}