:root {
  --mc-bg: #0a0c10;
  --mc-panel: #11151b;
  --mc-panel-raised: #171c24;
  --mc-line: rgba(255, 255, 255, .075);
  --mc-muted: #929ba8;
  --mc-text: #f3f5f8;
  --mc-accent: var(--site-primary, #00a3ff);
  --mc-ease: cubic-bezier(.2, .75, .25, 1);
}

html { color-scheme: dark; }
body { background: var(--mc-bg); color: var(--mc-text); }
.app-root { background: var(--mc-bg); }
.ambient { opacity: .14; filter: blur(110px); }
.ambient-a { background: radial-gradient(circle, color-mix(in srgb, var(--mc-accent) 32%, transparent), transparent 70%); }
.ambient-b { opacity: .08; }

.sidebar {
  width: 68px;
  flex-basis: 68px;
  padding: 18px 10px 14px;
  background: rgba(13, 16, 21, .94);
  border-color: var(--mc-line);
  transition: width .28s var(--mc-ease), flex-basis .28s var(--mc-ease), padding .28s var(--mc-ease);
}
.brand-mark { width: 100%; justify-content: center; gap: 12px; margin: 0 0 35px; }
.brand-mark > svg { flex: 0 0 25px; width: 25px; height: 25px; color: var(--mc-accent); }
.brand-name, .nav-caption, .nav-label { display: none; }
.nav-stack { gap: 8px; }
.nav-btn {
  position: relative;
  min-height: 46px;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 13px;
  color: #8d97a4;
  transition: color .18s ease, background .18s ease, transform .18s ease;
}
.nav-btn:hover { color: #fff; background: rgba(255, 255, 255, .055); transform: translateX(1px); }
.nav-btn.active { color: #fff; background: color-mix(in srgb, var(--mc-accent) 14%, transparent); }
.nav-btn.active::before {
  position: absolute;
  left: -10px;
  width: 2px;
  height: 21px;
  border-radius: 0 3px 3px 0;
  background: var(--mc-accent);
  content: "";
}
.nav-btn svg { width: 19px; height: 19px; }
.sidebar-bottom { margin-top: auto; }
.sidebar .nav-btn[aria-label]:hover::after {
  position: absolute;
  z-index: 20;
  left: calc(100% + 12px);
  padding: 7px 10px;
  border: 1px solid var(--mc-line);
  border-radius: 9px;
  background: #191e26;
  color: #f3f5f8;
  content: attr(aria-label);
  font-size: 11px;
  white-space: nowrap;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .3);
}

.workspace { background: var(--mc-bg); }
.topbar {
  height: 66px;
  min-height: 66px;
  flex-basis: 66px;
  padding: 0 clamp(20px, 3vw, 42px);
  border-color: var(--mc-line);
  background: rgba(10, 12, 16, .86);
  backdrop-filter: blur(22px) saturate(135%);
  -webkit-backdrop-filter: blur(22px) saturate(135%);
}
.top-context { color: #7f8996; font-size: 10px; font-weight: 650; letter-spacing: .16em; }
.top-actions { gap: 10px; }
.top-search-shell { width: min(390px, 42vw); }
.top-search-field {
  height: 40px;
  border-color: var(--mc-line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .035);
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.top-search-field:focus-within {
  border-color: color-mix(in srgb, var(--mc-accent) 52%, transparent);
  background: rgba(255, 255, 255, .055);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mc-accent) 10%, transparent);
}
.top-search-field input { font-size: 12px; }
.top-search-field kbd { border-color: var(--mc-line); border-radius: 6px; color: #828c99; }
.icon-btn {
  width: 39px;
  height: 39px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #9ca5b0;
}
.icon-btn:hover { color: #fff; background: rgba(255, 255, 255, .065); }
.content {
  max-width: 1660px;
  min-height: 0;
  padding: 32px clamp(22px, 4vw, 58px) 156px;
  scrollbar-gutter: stable;
}
.view { animation: mc-view-in .32s var(--mc-ease) both; }
@keyframes mc-view-in {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}
h1 { letter-spacing: -.045em; }
h2 { letter-spacing: -.025em; }
.eyebrow { font-size: 9px; letter-spacing: .15em; }
.section-head { margin: 36px 0 16px; }
.section-head h2 { margin-top: 6px; }

.home-intro {
  min-height: 260px;
  padding: clamp(26px, 4vw, 50px);
  border: 1px solid var(--mc-line);
  border-radius: 24px;
  background:
    radial-gradient(ellipse at 82% 45%, color-mix(in srgb, var(--mc-accent) 13%, transparent), transparent 40%),
    linear-gradient(120deg, #121820 0%, #10141a 56%, #11141b 100%);
  box-shadow: 0 18px 54px rgba(0, 0, 0, .12);
}
.home-intro h1 { max-width: 540px; margin: 12px 0 11px; font-size: clamp(32px, 4.1vw, 51px); }
.home-intro p { max-width: 440px; color: #a0a9b5; font-size: 13px; line-height: 1.65; }
.home-hero-art { opacity: .82; }
.home-hero-art img { border-radius: 18px; box-shadow: 0 20px 55px rgba(0, 0, 0, .38); }
.home-intro.home-dashboard { display: grid; grid-template-columns: minmax(0,.82fr) minmax(330px,1fr); align-items: center; gap: clamp(26px,5vw,64px); min-height: 0; }
.home-dashboard::after { right: 8%; opacity: .48; }
.home-dashboard-welcome { position: relative; z-index: 1; min-width: 0; }
.home-dashboard-welcome .eyebrow { color: #8acbfa; }
.home-dashboard-welcome h1 { max-width: 470px; font-size: clamp(32px,4.2vw,49px); }
.home-dashboard-welcome p { max-width: 380px; }
.home-dj-card { position: relative; z-index: 1; min-width: 0; padding: 20px; border: 1px solid rgba(255,255,255,.11); border-radius: 18px; background: linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025)); box-shadow: 0 14px 36px rgba(0,0,0,.14); }
.home-dj-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.home-dj-card-head .eyebrow { color: var(--mc-accent); }
.home-dj-card-head h2 { margin: 8px 0 0; font-size: 19px; line-height: 1.25; }
.home-dj-refresh { display: grid; flex: 0 0 34px; width: 34px; height: 34px; place-items: center; border: 1px solid var(--mc-line); border-radius: 10px; color: #c4cfda; background: rgba(255,255,255,.04); cursor: pointer; transition: color .18s ease,background .18s ease,transform .25s ease; }
.home-dj-refresh:hover { color: var(--mc-accent); background: rgba(255,255,255,.09); }
.home-dj-refresh:active { transform: rotate(45deg); }
.home-dj-refresh svg { width: 18px; height: 18px; }
.home-dj-meta { margin: 8px 0 12px; color: #a0a9b5; font-size: 11px; line-height: 1.45; }
.home-dj-tracks { display: grid; gap: 3px; margin-bottom: 14px; }
.home-dj-track { display: grid; grid-template-columns: 34px minmax(0,1fr) 20px; align-items: center; gap: 10px; min-width: 0; padding: 5px 7px; border-radius: 9px; background: rgba(0,0,0,.12); }
.home-dj-track img { width: 34px; height: 34px; border-radius: 6px; object-fit: cover; background: #222a33; }
.home-dj-track-copy { display: grid; min-width: 0; gap: 3px; }
.home-dj-track-copy strong,.home-dj-track-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-dj-track-copy strong { color: var(--mc-text); font-size: 11px; font-weight: 600; }
.home-dj-track-copy span { color: #9da8b5; font-size: 10px; }
.home-dj-track-index { color: #7d8b99; font-size: 10px; text-align: right; font-variant-numeric: tabular-nums; }
.home-dj-play { width: 100%; min-height: 39px; }
.home-dj-play:disabled { cursor: not-allowed; opacity: .55; }
.primary-btn, .secondary-btn { min-height: 42px; border-radius: 11px; transition: transform .18s ease, background .18s ease, box-shadow .18s ease; }
.primary-btn { box-shadow: 0 5px 18px color-mix(in srgb, var(--mc-accent) 22%, transparent); }
.primary-btn:hover, .secondary-btn:hover { transform: translateY(-1px); }
.secondary-btn { border-color: var(--mc-line); background: rgba(255, 255, 255, .035); }
.section-head .text-link { font-size: 11px; }

.mix-grid, .album-grid { gap: 16px; }
.mix-card, .album-card, .artist-card {
  border-color: transparent;
  border-radius: 15px;
  background: transparent;
  transition: background .2s ease, transform .24s var(--mc-ease);
}
.mix-card { padding: 10px; }
.mix-card:hover, .album-card:hover, .artist-card:hover { border-color: transparent; background: rgba(255, 255, 255, .045); transform: translateY(-3px); }
.mix-art, .album-art { border-radius: 12px; }
.track-list { border-top-color: var(--mc-line); }
.track-row { border-bottom-color: var(--mc-line); border-radius: 11px; transition: background .18s ease, transform .18s ease; }
.track-row:hover { background: rgba(255, 255, 255, .045); }
.track-thumb { border-radius: 8px; }
.tiny-btn { border-radius: 50%; }
.search-large { border-color: var(--mc-line); border-radius: 14px; background: var(--mc-panel); box-shadow: none; }
.filter-chip { border-color: var(--mc-line); background: rgba(255, 255, 255, .035); }
.filter-chip.active { border-color: color-mix(in srgb, var(--mc-accent) 42%, transparent); background: color-mix(in srgb, var(--mc-accent) 12%, transparent); }
.page-heading { margin-bottom: 27px; }
.page-heading h1 { margin: 8px 0 10px; font-size: clamp(30px, 3.2vw, 42px); }
.page-heading p { max-width: 610px; color: var(--mc-muted); line-height: 1.6; }
.catalog-stack-grid { gap: 12px; }
.catalog-stack-card {
  min-height: 100px;
  padding: 11px;
  border: 1px solid var(--mc-line);
  border-radius: 16px;
  background: rgba(255, 255, 255, .025);
  transition: border-color .2s ease, background .2s ease, transform .2s var(--mc-ease);
}
.catalog-stack-card:hover { border-color: color-mix(in srgb, var(--mc-accent) 30%, var(--mc-line)); background: rgba(255, 255, 255, .05); transform: translateY(-2px); }
.catalog-stack-card img { width: 76px; height: 76px; border-radius: 12px; }
.catalog-stack-copy strong { font-size: 12px; }
.catalog-stack-copy span { line-height: 1.45; }
.catalog-stack-actions { gap: 4px; }
.catalog-stack-actions button { width: 32px; height: 32px; border-color: var(--mc-line); background: rgba(255, 255, 255, .035); }

.player-screen { gap: 20px; background: transparent; }
.player-screen.active { padding: 18px 22px 22px; }
body[data-view="player"] .topbar {
  position: sticky;
  inset: auto;
  width: auto;
  height: 66px;
  min-height: 66px;
  margin: 0;
  padding: 0 clamp(20px, 3vw, 42px);
  border-width: 0 0 1px;
  border-radius: 0;
  background: rgba(10, 12, 16, .86);
}
body[data-view="player"] .content {
  width: 100%;
  height: calc(100dvh - 66px);
  min-height: 0;
  padding: 0;
  overflow: hidden;
}
body[data-view="player"] #view-player.player-screen.active {
  height: 100%;
  min-height: 0;
  grid-template-columns: minmax(0, 1.25fr) minmax(315px, .75fr);
  gap: 20px;
  padding: 18px 22px 22px;
  overflow: hidden;
}
body[data-view="player"] .player-main {
  min-height: 0;
  padding: clamp(20px, 3vh, 34px);
  border: 1px solid var(--mc-line);
  border-radius: 22px;
  background:
    radial-gradient(ellipse at 50% 24%, color-mix(in srgb, var(--mc-accent) 9%, transparent), transparent 48%),
    linear-gradient(155deg, #141920, #101318 72%);
  box-shadow: 0 16px 46px rgba(0, 0, 0, .16);
}
body[data-view="player"] .player-main-inner { width: min(100%, 560px); padding: 0; }
body[data-view="player"] .player-context { margin-bottom: clamp(12px, 2vh, 22px); }
body[data-view="player"] .player-context > span { color: #929daa; font-size: 9px; font-weight: 650; letter-spacing: .13em; }
body[data-view="player"] .player-queue-open { border-color: var(--mc-line); background: rgba(255, 255, 255, .035); }
body[data-view="player"] .player-art-wrap { width: min(100%, clamp(220px, 37vh, 420px)); margin-bottom: clamp(16px, 2.7vh, 27px); }
body[data-view="player"] .player-artwork { border-radius: 17px; box-shadow: 0 20px 48px rgba(0, 0, 0, .35); }
body[data-view="player"] .player-art-glow { opacity: .24; filter: blur(72px); }
body[data-view="player"] .player-track-info h1 { margin-bottom: 6px; font-size: clamp(21px, 2.1vw, 28px); }
body[data-view="player"] .player-track-info p { margin-bottom: 0; color: #98a2af; font-size: 12px; }
body[data-view="player"] .player-track-info p span:first-child { color: #edf0f4; }
body[data-view="player"] .stage-actions { margin: clamp(13px, 2.5vh, 23px) 0 13px; }
body[data-view="player"] .stage-icon-btn { width: 38px; height: 38px; color: #a1aab5; }
body[data-view="player"] .stage-icon-btn.main-play {
  width: 56px;
  height: 56px;
  color: #07131d;
  box-shadow: 0 6px 20px color-mix(in srgb, var(--mc-accent) 25%, transparent);
}
body[data-view="player"] .stage-progress { gap: 10px; }
body[data-view="player"] .stage-progress input { height: 3px; }
body[data-view="player"] .player-aside {
  min-width: 0;
  padding: 20px 18px 15px;
  border: 1px solid var(--mc-line);
  border-radius: 22px;
  background: #10141a;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body[data-view="player"] .player-aside-head { padding-bottom: 14px; }
body[data-view="player"] .player-aside-head strong { font-size: 14px; }
body[data-view="player"] .player-aside-head span { font-size: 10px; }
body[data-view="player"] .player-aside-head .queue-network-status { display: none; }
body[data-view="player"] .queue-add-btn { border-color: var(--mc-line); border-radius: 50%; color: var(--mc-accent); background: rgba(255, 255, 255, .045); }
body[data-view="player"] .queue-add-btn:hover { background: color-mix(in srgb, var(--mc-accent) 13%, transparent); }
body[data-view="player"] .stage-tab { color: #8993a0; }
body[data-view="player"] .stage-tab.active { color: var(--mc-text); }
.queue-row, .stage-queue-row { border-radius: 10px; }
.queue-row:hover, .stage-queue-row:hover { background: rgba(255, 255, 255, .045); }
.queue-row.current, .stage-queue-row.current { border-color: transparent; background: color-mix(in srgb, var(--mc-accent) 11%, transparent); }

.player-bar {
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 17px;
  background: rgba(19, 23, 29, .92);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .32);
  backdrop-filter: blur(20px) saturate(125%);
  -webkit-backdrop-filter: blur(20px) saturate(125%);
  transition: transform .25s var(--mc-ease), border-color .2s ease, background .2s ease;
}
.player-bar:hover { border-color: rgba(255, 255, 255, .13); background: rgba(22, 27, 34, .96); }

.settings-backdrop { background: rgba(2, 4, 8, .68); backdrop-filter: blur(8px); }
.settings-window {
  border: 1px solid var(--mc-line);
  border-radius: 20px;
  background: rgba(17, 21, 27, .97);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .5);
}
.settings-main { background: transparent; }
.settings-header { border-color: var(--mc-line); background: rgba(17, 21, 27, .96); }
.settings-content { scrollbar-color: rgba(255, 255, 255, .18) transparent; }
.settings-section { border-color: var(--mc-line); }
.settings-row, .settings-inline-control { border-color: var(--mc-line); }
.settings-select {
  border-color: var(--mc-line);
  border-radius: 10px;
  background: #151a21;
}
.settings-close { border-radius: 10px; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid color-mix(in srgb, var(--mc-accent) 75%, white); outline-offset: 3px; }

@media (min-width: 1200px) {
  .sidebar { width: 218px; flex-basis: 218px; padding: 23px 15px 16px; }
  .brand-mark { justify-content: flex-start; margin: 2px 6px 42px; }
  .brand-name { display: flex; flex-direction: column; gap: 3px; color: #e8edf3; font-size: 12px; font-weight: 700; letter-spacing: .13em; }
  .brand-name small { color: #77818e; font-size: 8px; font-weight: 550; letter-spacing: .18em; }
  .nav-caption { display: block; margin: 0 10px 10px; color: #6f7986; font-size: 9px; font-weight: 650; letter-spacing: .13em; }
  .nav-stack { gap: 4px; }
  .nav-btn { min-height: 43px; justify-content: flex-start; gap: 13px; padding: 0 12px; color: #929ca9; }
  .nav-btn.active::before { left: -15px; }
  .nav-label { display: inline; font-size: 12px; font-weight: 540; }
  .sidebar .nav-btn[aria-label]:hover::after { display: none; }
}

@media (max-width: 1199px) {
  body[data-view="player"] #view-player.player-screen.active { grid-template-columns: minmax(0, 1fr) minmax(270px, .68fr); }
  .player-bar { left: 76px; }
}
@media (max-width: 1020px) {
  body[data-view="player"] #view-player.player-screen.active { grid-template-columns: minmax(0, 1fr); overflow-y: auto; }
  body[data-view="player"] .player-main { min-height: 560px; }
  body[data-view="player"] .player-aside { min-height: 290px; max-height: 390px; }
  body[data-view="player"] .content { height: calc(100dvh - 66px); overflow-y: auto; }
  body[data-view="player"] #view-player.player-screen.active { height: auto; min-height: 100%; overflow: visible; }
  .catalog-stack-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .topbar { height: 56px; min-height: 56px; flex-basis: 56px; padding: 0 12px; }
  .top-context { display: none; }
  .top-actions { width: 100%; gap: 7px; }
  .top-search-shell { width: auto; flex: 1; }
  .top-search-field { height: 38px; padding: 0 10px; }
  .top-search-field kbd { display: none; }
  .icon-btn { width: 36px; height: 36px; }
  .content { padding: 24px 15px 166px; }
  .home-intro { min-height: 0; padding: 26px 21px; border-radius: 19px; }
  .home-intro.home-dashboard { grid-template-columns: 1fr; gap: 20px; }
  .home-dashboard-welcome h1 { max-width: 440px; font-size: clamp(30px, 8vw, 40px); }
  .home-dashboard-welcome p { max-width: 390px; font-size: 12px; }
  .home-dj-card { padding: 15px; }
  .home-dj-card-head h2 { font-size: 17px; }
  .section-head { margin: 30px 0 13px; }
  .section-head h2 { font-size: 18px; }
  .mix-grid, .album-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .mix-card { padding: 7px; }
  .mix-card strong { font-size: 11px; }
  .mix-card span { font-size: 10px; }
  .track-row { grid-template-columns: 38px minmax(0, 1fr) 96px; gap: 9px; min-height: 62px; padding: 7px 4px; }
  .track-row .track-album { display: none; }
  .track-row .track-duration { display: none; }
  .track-row .track-duration { font-size: 10px; }
  .page-heading { margin-bottom: 22px; }
  .page-heading h1 { font-size: 31px; }
  .page-heading p { max-width: 340px; font-size: 12px; }
  .catalog-stack-grid { grid-template-columns: minmax(0, 1fr); gap: 9px; }
  .catalog-stack-card { min-height: 86px; grid-template-columns: 62px minmax(0, 1fr) auto; gap: 10px; padding: 9px; }
  .catalog-stack-card img { width: 62px; height: 62px; border-radius: 10px; }
  .catalog-stack-copy span { font-size: 10px; }
  .player-bar { left: 8px; right: 8px; bottom: 67px; min-height: 61px; border-radius: 15px; }
  .mobile-nav { height: 58px; bottom: 0; border-top: 1px solid var(--mc-line); background: rgba(12, 15, 20, .94); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
  .mobile-nav button { border-radius: 12px; }
  .mobile-nav button.active, body[data-view="player"] .mobile-nav button[data-view="player"] { color: var(--mc-accent); background: color-mix(in srgb, var(--mc-accent) 12%, transparent); }
  body[data-view="player"] .topbar { position: sticky; inset: auto; height: 56px; min-height: 56px; margin: 0; padding: 0 12px; border-radius: 0; }
  body[data-view="player"] .content { height: auto; padding: 0; overflow: visible; }
  body[data-view="player"] #view-player.player-screen.active {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: calc(100dvh - 114px);
    height: auto;
    padding: 12px 12px 145px;
    overflow: visible;
  }
  body[data-view="player"] .player-main { min-height: 0; padding: 19px 17px 20px; border-radius: 19px; }
  body[data-view="player"] .player-context { margin-bottom: 13px; }
  body[data-view="player"] .player-art-wrap { width: min(65vw, 270px); margin-bottom: 17px; }
  body[data-view="player"] .player-track-info h1 { font-size: clamp(20px, 6vw, 25px); }
  body[data-view="player"] .stage-actions { margin: 14px 0 10px; gap: 2px; }
  body[data-view="player"] .stage-icon-btn { width: 35px; height: 35px; }
  body[data-view="player"] .stage-icon-btn.main-play { width: 51px; height: 51px; }
  body[data-view="player"] .stage-volume { margin-top: 9px; }
  body[data-view="player"] .player-aside { min-height: 280px; max-height: 345px; padding: 14px 12px 10px; border-radius: 18px; }
  body[data-view="player"] .player-bar { display: none; }
  body[data-view="player"] #topSettings { display: grid !important; }
  .settings-window { width: min(100%, 440px); max-height: calc(100dvh - 24px); overflow-y: auto; }
}
@media (max-width: 380px) {
  .content { padding-right: 12px; padding-left: 12px; }
  .top-actions { gap: 5px; }
  .icon-btn { width: 33px; height: 34px; }
  .home-hero-actions { gap: 7px; }
  .home-hero-actions .primary-btn, .home-hero-actions .secondary-btn { padding: 0 9px; font-size: 10px; }
  body[data-view="player"] #view-player.player-screen.active { padding-right: 8px; padding-left: 8px; }
  body[data-view="player"] .stage-icon-btn { width: 32px; height: 32px; }
  body[data-view="player"] .stage-icon-btn.main-play { width: 48px; height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Player-first controls without a permanent full-size player on desktop. */
.sidebar { display: none !important; }
.topbar {
  position: sticky;
  z-index: 12;
  top: 0;
  display: flex;
  justify-content: flex-start;
  gap: clamp(18px, 2.4vw, 36px);
}
.brand-mark {
  display: flex;
  flex: 0 0 auto;
  width: auto;
  margin: 0;
  color: inherit;
  text-decoration: none;
}
.top-nav {
  display: flex;
  flex: 0 1 auto;
  flex-direction: row;
  align-items: center;
  gap: 4px;
}
.top-nav .nav-btn {
  display: flex;
  width: auto;
  height: 38px;
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 12px;
  justify-content: center;
  gap: 8px;
  border-radius: 10px;
}
.top-nav .nav-btn .nav-label {
  position: static;
  display: inline-block;
  flex: 0 0 auto;
  transform: none;
  opacity: 1;
  font-size: 11px;
}
.top-nav .nav-btn::before { display: none; }
.top-nav .nav-btn.active { color: #eef7ff; background: rgba(255, 255, 255, .075); }
.top-nav .nav-btn.active .nav-label { color: var(--mc-accent); }
.top-nav .nav-label { display: inline; font-size: 11px; }
.top-nav .nav-btn svg { width: 16px; height: 16px; }
.top-actions { width: auto; margin-left: auto; }
.top-actions #topAccount { flex: 0 0 39px; }
#topSettings { display: grid !important; flex: 0 0 39px; width: 39px; height: 39px; }
.content { padding-bottom: 130px; }
.player-screen { display: none !important; }
.player-tabs, .player-tab-mini { display: none; }
.player-bar {
  left: 16px;
  right: 16px;
  bottom: 12px;
  z-index: 15;
  min-height: 68px;
  padding: 5px 16px;
  border-radius: 17px;
  background: rgba(18, 22, 29, .96);
}
.now-playing[data-open-player] { touch-action: none; user-select: none; }
.now-art { width: 46px; height: 46px; border-radius: 9px; cursor: zoom-in; -webkit-user-drag: none; }
.player-controls { gap: 12px; }
.control-btn.play { width: 32px; height: 32px; }
.player-tools { gap: 4px; }
.player-tools .volume { width: 102px; }
.player-tools .volume input { width: 65px; }
.mobile-nav { display: none; }
.artwork-viewer {
  position: fixed;
  z-index: 50;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 56px 24px 32px;
  background: rgba(5, 7, 11, .94);
  backdrop-filter: blur(26px) saturate(130%);
  -webkit-backdrop-filter: blur(26px) saturate(130%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .24s ease, visibility .24s ease;
}
.artwork-viewer.open { opacity: 1; visibility: visible; pointer-events: auto; }
.artwork-viewer::before {
  position: absolute;
  z-index: -1;
  width: min(76vw, 760px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--artwork-glow, rgba(0, 163, 255, .25));
  content: "";
  filter: blur(100px);
  opacity: .46;
}
.artwork-viewer img,
.artwork-viewer video {
  width: min(72vw, 68vh, 640px);
  max-height: 68vh;
  aspect-ratio: 1;
  border-radius: 8px;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .52);
}
.artwork-viewer img { object-fit: contain; }
.artwork-viewer video { object-fit: cover; }
.artwork-viewer video { display: none; }
.artwork-viewer.has-canvas img { display: none; }
.artwork-viewer.has-canvas video:not([hidden]) { display: block; }
.artwork-viewer video[hidden],
.player-canvas[hidden] { display: none !important; }
.artwork-viewer-close {
  position: absolute;
  top: max(20px, env(safe-area-inset-top));
  right: max(20px, env(safe-area-inset-right));
  width: 42px;
  height: 42px;
  border: 1px solid var(--mc-line);
  border-radius: 50%;
  background: rgba(255, 255, 255, .07);
  color: white;
  font-size: 24px;
  cursor: pointer;
}
.artwork-viewer-meta { display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; }
.artwork-viewer-meta strong { max-width: min(80vw, 520px); overflow: hidden; color: #f5f7fa; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.artwork-viewer-meta span, .artwork-viewer p { margin: 0; color: #8d98a6; font-size: 11px; text-align: center; }
.sleep-timer-btn.active { color: var(--mc-accent); }

@media (min-width: 1021px) {
  body[data-view="player"] .player-screen { display: none !important; }
  .mobile-nav { display: none !important; }
}
@media (max-width: 1020px) {
  .topbar { height: 58px; min-height: 58px; flex-basis: 58px; gap: 10px; padding: 0 16px; }
  .brand-name { display: none !important; }
  .brand-mark > svg { width: 24px; height: 24px; }
  .top-nav { display: none; }
  .top-actions { flex: 1; gap: 7px; }
  .top-search-shell { flex: 1; width: auto; min-width: 0; }
  .top-search-field { height: 38px; }
  .top-search-field kbd { display: none; }
  .mobile-nav {
    position: fixed;
    z-index: 20;
    right: max(12px, env(safe-area-inset-right));
    bottom: max(9px, env(safe-area-inset-bottom));
    left: max(12px, env(safe-area-inset-left));
    display: flex;
    height: 58px;
    border: 1px solid var(--mc-line);
    border-radius: 17px;
    background: rgba(16, 20, 26, .94);
    box-shadow: 0 12px 38px rgba(0, 0, 0, .34);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
  }
  .mobile-nav button { flex: 1; }
  .content { padding-bottom: 164px; }
  .player-bar {
    right: 16px;
    bottom: max(77px, calc(env(safe-area-inset-bottom) + 70px));
    left: 16px;
    min-height: 62px;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 7px;
    padding: 7px 10px;
    touch-action: none;
    transition: transform .24s var(--mc-ease), opacity .2s ease, border-color .2s ease;
    transform: translateX(var(--swipe-x, 0)) scaleX(var(--swipe-stretch, 1));
  }
  .player-bar.is-swiping { transition: none; }
  .player-bar.is-seeking { border-color: color-mix(in srgb, var(--mc-accent) 48%, transparent); }
  .player-center { width: auto; max-width: none; justify-self: end; }
  .player-controls { gap: 0; margin: 0; }
  .player-controls #shuffleBtn, .player-controls #prevBtn, .player-controls #nextBtn, .player-controls #repeatBtn { display: none; }
  .player-controls .control-btn.play { width: 38px; height: 38px; }
  .progress-line, .player-tools .volume, .player-tools [data-sleep-timer], .player-tools [data-action="lyrics"], .player-tools [data-action="queue"] { display: none; }
  .now-playing { gap: 9px; }
  .now-art { width: 43px; height: 43px; }
  .now-meta > strong { max-width: min(44vw, 230px); font-size: 10px; }
  .now-meta > span { max-width: min(44vw, 230px); font-size: 9px; }
  body[data-view="player"] .topbar,
  body[data-view="player"] .mobile-nav,
  body[data-view="player"] .player-bar { display: none !important; }
  body[data-view="player"] .workspace,
  body[data-view="player"] .content {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }
  body[data-view="player"] .content { padding: 0; }
  body[data-view="player"] #view-player.player-screen.active {
    position: absolute;
    inset: 0;
    display: flex !important;
    animation: none;
    flex-direction: column;
    gap: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: max(10px, env(safe-area-inset-top)) 18px max(8px, env(safe-area-inset-bottom));
    overflow: hidden;
    background:
      radial-gradient(ellipse at 50% 33%, color-mix(in srgb, var(--mc-accent) 12%, transparent), transparent 49%),
      #0a0c10;
  }
  body[data-view="player"] .player-art-wrap { touch-action: none; }
  body[data-view="player"] .player-main {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 4px 0 8px;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  body[data-view="player"] .player-main-inner { width: min(100%, 520px); padding: 0; }
  body[data-view="player"] .player-context { width: 100%; margin: 0 0 clamp(10px, 2vh, 20px); }
  body[data-view="player"] .player-context > span { font-size: 9px; letter-spacing: .14em; }
  .player-context > div { display: flex; align-items: center; gap: 9px; }
  .player-close {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid var(--mc-line);
    border-radius: 50%;
    background: rgba(255, 255, 255, .05);
    color: #dce3eb;
    font-size: 18px;
    cursor: pointer;
  }
  body[data-view="player"] .player-art-wrap {
    width: min(58vh, 56vw, 390px);
    margin: 0 auto clamp(12px, 2vh, 20px);
    cursor: zoom-in;
    touch-action: none;
    user-select: none;
    -webkit-user-drag: none;
  }
  body[data-view="player"] .player-artwork { width: 100%; max-height: 58vh; border-radius: 12px; -webkit-user-drag: none; }
  .artwork-expand-hint {
    position: absolute;
    right: 9px;
    bottom: 9px;
    padding: 6px 9px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 99px;
    background: rgba(10, 12, 16, .64);
    color: rgba(255, 255, 255, .84);
    font-size: 9px;
    opacity: 0;
    transition: opacity .2s ease;
  }
  body[data-view="player"] .player-art-wrap:hover .artwork-expand-hint { opacity: 1; }
  body[data-view="player"] .player-track-info { width: 100%; }
  body[data-view="player"] .player-track-info h1 { font-size: clamp(20px, 5vw, 26px); }
  body[data-view="player"] .stage-actions { margin: clamp(10px, 2vh, 20px) 0 10px; gap: 2px; }
  body[data-view="player"] .stage-icon-btn { width: 36px; height: 36px; }
  body[data-view="player"] .stage-icon-btn.main-play { width: 52px; height: 52px; }
  body[data-view="player"] .stage-progress { width: 100%; }
  body[data-view="player"] .stage-volume { margin-top: 9px; }
  body[data-view="player"] .player-aside { display: none; }
  .player-tab-mini {
    position: relative;
    z-index: 2;
    flex: 0 0 70px;
    align-items: center;
    gap: 12px;
    padding: 7px 10px;
    border: 1px solid var(--mc-line);
    border-radius: 14px;
    background: rgba(255, 255, 255, .045);
    animation: tab-mini-arrive .25s var(--mc-ease) both;
  }
  .player-tab-mini img { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 9px; object-fit: cover; }
  .player-tab-mini > div { display: flex; flex: 1; flex-direction: column; gap: 4px; min-width: 0; }
  .player-tab-mini strong, .player-tab-mini span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .player-tab-mini strong { color: #f1f4f7; font-size: 11px; }
  .player-tab-mini span { color: #929daa; font-size: 10px; }
  .player-tab-mini .control-btn { flex: 0 0 36px; background: #f2f5f8; color: #101318; }
  @keyframes tab-mini-arrive { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: translateY(0); } }
  body[data-view="player"] #view-player[data-player-tab="track"] .player-tab-mini { display: none; }
  body[data-view="player"] #view-player[data-player-tab="lyrics"] .player-tab-mini,
  body[data-view="player"] #view-player[data-player-tab="queue"] .player-tab-mini { display: flex; }
  body[data-view="player"] #view-player[data-player-tab="lyrics"] .player-main,
  body[data-view="player"] #view-player[data-player-tab="queue"] .player-main { display: none; }
  body[data-view="player"] #view-player[data-player-tab="lyrics"] .player-aside,
  body[data-view="player"] #view-player[data-player-tab="queue"] .player-aside {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    max-height: none;
    margin-top: 12px;
    padding: 15px 13px 10px;
    border: 1px solid var(--mc-line);
    border-radius: 16px;
    background: rgba(17, 21, 27, .88);
  }
  body[data-view="player"] .player-aside-head { flex: 0 0 auto; padding: 1px 2px 12px; }
  body[data-view="player"] .player-aside-head .queue-network-status { display: none; }
  body[data-view="player"] .stage-tabs { display: none; }
  body[data-view="player"] .stage-side-content { min-height: 0; flex: 1; overflow-x: hidden; overflow-y: auto; padding: 5px 0 14px; overscroll-behavior: contain; }
  body[data-view="player"] .stage-lyrics-placeholder { min-height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 20px 8px; }
  body[data-view="player"] .stage-lyrics-placeholder p { max-width: 440px; margin: 10px auto 20px; text-align: center; }
  body[data-view="player"] .stage-lyrics-track { width: min(100%, 380px); margin: 0 auto; }
  body[data-view="player"] .player-tabs {
    position: relative;
    z-index: 3;
    display: flex;
    flex: 0 0 62px;
    justify-content: space-around;
    align-items: center;
    margin-top: 10px;
    border: 1px solid var(--mc-line);
    border-radius: 17px;
    background: rgba(17, 21, 27, .96);
    box-shadow: 0 10px 32px rgba(0, 0, 0, .25);
  }
  .player-tabs button {
    display: flex;
    min-width: 72px;
    height: 48px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #8d97a4;
    font-size: 9px;
    cursor: pointer;
  }
  .player-tabs button span { font-size: 16px; line-height: 1; }
  .player-tabs button.active { color: var(--mc-accent); background: color-mix(in srgb, var(--mc-accent) 11%, transparent); }
  .artwork-viewer { padding: 60px 18px 26px; }
  .artwork-viewer img { width: min(78vw, 58vh, 520px); max-height: 58vh; border-radius: 7px; }
  .content, body[data-view="player"] .content { scrollbar-width: none; }
  .content::-webkit-scrollbar { display: none; }
}
@media (max-width: 420px) {
  .topbar { padding-right: 10px; padding-left: 10px; }
  .topbar > .brand-mark { flex-basis: 23px; }
  .topbar > .brand-mark svg { width: 21px; height: 21px; }
  .top-actions { gap: 4px; }
  .top-actions #topSettings, .top-actions #topAccount { width: 33px; height: 34px; flex-basis: 33px; }
  body[data-view="player"] #view-player.player-screen.active { padding-right: 13px; padding-left: 13px; }
  body[data-view="player"] .player-art-wrap { width: min(52vh, 67vw, 330px); }
  body[data-view="player"] .stage-actions { gap: 0; }
  body[data-view="player"] .stage-icon-btn { width: 33px; height: 33px; }
  body[data-view="player"] .stage-icon-btn.main-play { width: 48px; height: 48px; }
}
@media (max-height: 680px) and (max-width: 1020px) {
  body[data-view="player"] .player-art-wrap { width: min(40vh, 42vw, 280px); margin-bottom: 8px; }
  body[data-view="player"] .player-track-info h1 { margin-bottom: 4px; font-size: 19px; }
  body[data-view="player"] .stage-actions { margin: 7px 0 5px; }
  body[data-view="player"] .stage-volume { display: none; }
  body[data-view="player"] #view-player.player-screen.active { padding-top: max(6px, env(safe-area-inset-top)); }
}

@media (min-width: 1021px) {
  .top-nav .nav-btn { width: 40px; padding: 0; }
  .top-nav .nav-btn .nav-label { display: none !important; }
}

@media (max-width: 1020px) {
  .mobile-nav {
    right: max(8px, env(safe-area-inset-right));
    bottom: 0;
    left: max(8px, env(safe-area-inset-left));
    height: calc(64px + env(safe-area-inset-bottom));
    padding: 4px 5px env(safe-area-inset-bottom);
    align-items: stretch;
    border-radius: 17px 17px 0 0;
  }
  .mobile-nav button {
    display: flex;
    width: auto;
    height: 100%;
    min-width: 0;
    min-height: 0;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 3px 1px;
    border-radius: 12px;
    color: #8d97a4;
  }
  .mobile-nav button svg { width: 18px; height: 18px; flex: 0 0 18px; }
  .mobile-nav button::after {
    overflow: hidden;
    max-width: 100%;
    color: inherit;
    content: attr(aria-label);
    font-size: 8px;
    font-weight: 560;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mobile-nav button.active { color: var(--mc-accent); background: color-mix(in srgb, var(--mc-accent) 11%, transparent); }
  .player-bar { bottom: calc(73px + env(safe-area-inset-bottom)); }
  body[data-view="player"] .mobile-nav { display: none !important; }
}

.mini-seek-preview {
  position: absolute;
  z-index: 2;
  right: 16px;
  bottom: calc(100% + 16px);
  left: 16px;
  display: none;
  height: 29px;
  pointer-events: none;
}
.mini-seek-backdrop {
  position: fixed;
  z-index: 9998;
  inset: 0;
  display: none;
  background: rgba(2, 4, 8, .48);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  pointer-events: none;
}
.player-bar { z-index: 15; }
.player-bar::before { display: none !important; content: none !important; }
.mini-seeking .player-bar {
  z-index: 9999;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.mini-seeking .mini-seek-backdrop { display: block; }
.mini-seeking .mini-seek-preview { filter: none !important; }
.mini-seeking .mini-seek-track,
.mini-seeking .mini-seek-preview output { filter: none !important; }
.settings-audio-group {
  display: grid;
  gap: 12px;
  padding-top: 18px;
  margin-top: 18px;
  border-top: 1px solid var(--mc-line);
}
.equalizer-preset-label { margin-top: 2px; }
.equalizer-bands {
  display: grid;
  gap: 11px;
  padding: 3px 0;
}
.equalizer-bands label {
  display: grid;
  grid-template-columns: 58px minmax(80px, 1fr) 44px;
  align-items: center;
  gap: 10px;
  color: #b8c2ce;
  font-size: 11px;
}
.equalizer-bands input[type="range"] { min-width: 0; accent-color: var(--mc-accent); }
.equalizer-bands output {
  color: #eef3f8;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.spatial-strength-row .settings-range { width: min(220px, 48%); }
.spatial-strength-row[hidden] { display: none; }
.limiter-setting-row { padding-top: 15px; border-top: 1px solid var(--mc-line); }
.limiter-warning-backdrop {
  position: fixed;
  z-index: 120;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(3, 5, 8, .74);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.limiter-warning-backdrop[hidden] { display: none; }
.limiter-warning-dialog {
  width: min(100%, 430px);
  padding: 27px;
  border: 1px solid var(--mc-line);
  border-radius: 20px;
  background: var(--mc-panel-raised);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .48);
}
.limiter-warning-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(255, 183, 77, .35);
  border-radius: 12px;
  color: #ffc36b;
  background: rgba(255, 183, 77, .1);
  font-size: 21px;
  font-weight: 750;
}
.limiter-warning-dialog h2 { margin: 18px 0 9px; font-size: 20px; }
.limiter-warning-dialog p { margin: 0; color: var(--mc-muted); font-size: 13px; line-height: 1.65; }
.limiter-warning-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; margin-top: 23px; }
.limiter-warning-actions button { min-height: 40px; }
.mini-seek-track {
  position: absolute;
  right: 0;
  bottom: 2px;
  left: 0;
  height: 4px;
  overflow: visible;
  border-radius: 99px;
  background: rgba(235, 241, 248, .35);
  box-shadow: 0 1px 6px rgba(0, 0, 0, .35);
}
.mini-seek-track span {
  position: relative;
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--mc-accent);
}
.mini-seek-track i {
  position: absolute;
  top: 50%;
  left: var(--seek-progress, 0%);
  width: 12px;
  height: 12px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--mc-accent);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .4);
  transform: translate(-50%, -50%);
}
.mini-seek-preview output {
  position: absolute;
  top: 0;
  left: clamp(20px, var(--seek-progress, 0%), calc(100% - 20px));
  padding: 4px 7px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 7px;
  background: #202630;
  color: #fff;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  box-shadow: 0 5px 16px rgba(0, 0, 0, .35);
  transform: translate(-50%, -100%);
}
@media (max-width: 1020px) {
  body.mini-seeking .player-bar {
    border-color: color-mix(in srgb, var(--mc-accent) 55%, transparent);
    background: rgba(20, 25, 33, .99);
    box-shadow: 0 18px 58px rgba(0, 0, 0, .6), 0 0 0 1px color-mix(in srgb, var(--mc-accent) 12%, transparent);
    transform: translateX(0) scale(1.035);
    transition: transform .18s var(--mc-ease), border-color .18s ease, box-shadow .18s ease;
  }
  body.mini-seeking .mini-seek-preview { display: block; }
}

@media (max-width: 420px) {
  .mobile-nav { right: 0; left: 0; border-right: 0; border-bottom: 0; border-left: 0; }
  .mobile-nav button::after { font-size: 7.5px; }
  .player-bar { bottom: calc(73px + env(safe-area-inset-bottom)); }
}

@property --range-progress {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

.volume input[type="range"] {
  --range-progress: 60%;
  background: linear-gradient(to right, var(--mc-accent) 0%, var(--mc-accent) var(--range-progress), rgba(184,198,215,.3) var(--range-progress), rgba(184,198,215,.3) 100%) !important;
  transition: --range-progress .14s linear;
}
.stage-progress input[type="range"] { transition: --range-progress .14s linear; }
#seekBar::-webkit-slider-runnable-track,
#stageSeek::-webkit-slider-runnable-track {
  background: linear-gradient(to right, var(--mc-accent) 0%, var(--mc-accent) var(--range-progress), rgba(184,198,215,.22) var(--range-progress), rgba(184,198,215,.22) 100%) !important;
}
#seekBar::-moz-range-progress,
#stageSeek::-moz-range-progress { background: var(--mc-accent); }
.stage-volume { display: none; }
.stage-artist-link {
  display: inline-block;
  max-width: min(58vw, 360px);
  overflow: hidden;
  padding: 0;
  border: 0;
  background: none;
  color: #edf0f4;
  font: inherit;
  text-align: left;
  vertical-align: bottom;
  cursor: pointer;
}
.stage-artist-link:hover { color: var(--mc-accent); }
.marquee-text { min-width: 0; overflow: hidden; white-space: nowrap; }
.marquee-content { display: inline-block; max-width: none; white-space: nowrap; transform: translateX(0); }
.now-meta strong.marquee-text, .now-meta span.marquee-text,
.player-tab-mini .marquee-text { display: block; }
.now-meta strong .marquee-content, .now-meta span .marquee-content,
.player-tab-mini .marquee-content { display: inline-block; }
.player-tab-mini > div { overflow: hidden; }

@media (max-width: 1020px) {
  .mobile-nav [data-view="player"] { display: none !important; }
  .mobile-nav button::after {
    overflow: visible;
    max-width: none;
    font-size: 9px;
    text-overflow: clip;
  }
  .player-tools [data-action="queue"] { display: none !important; }
  body[data-view="player"] .stage-volume { display: none !important; }
  body[data-view="player"] .player-main {
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
  }
  body[data-view="player"] .player-main-inner {
    display: flex;
    width: 100%;
    max-width: 680px;
    height: 100%;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    gap: clamp(8px, 1.8vh, 18px);
    padding: 2px 0;
    margin-inline: auto;
  }
  body[data-view="player"] .player-context { flex: 0 0 auto; margin: 0; }
  body[data-view="player"] .player-art-wrap {
    width: min(72vw, 36dvh, 390px);
    flex: 0 1 auto;
    margin: 0 auto;
  }
  body[data-view="player"] .player-artwork { max-height: min(36dvh, 390px); }
  body[data-view="player"] .player-track-info {
    width: 100%;
    flex: 0 0 auto;
    text-align: left;
  }
  body[data-view="player"] .player-track-info h1 {
    width: 100%;
    margin: 0 0 5px;
    font-size: clamp(22px, 5vw, 30px);
    line-height: 1.18;
  }
  body[data-view="player"] .player-track-info p {
    display: flex;
    max-width: 100%;
    align-items: baseline;
    gap: 5px;
    overflow: hidden;
    white-space: nowrap;
    text-align: left;
  }
  body[data-view="player"] .stage-artist-link { max-width: 72%; flex: 0 1 auto; }
  body[data-view="player"] .stage-actions {
    display: flex;
    width: 100%;
    flex: 0 0 auto;
    justify-content: space-between;
    margin: 0;
    gap: 3px;
  }
  body[data-view="player"] .stage-icon-btn { width: clamp(34px, 9vw, 44px); height: clamp(34px, 9vw, 44px); }
  body[data-view="player"] .stage-icon-btn.main-play { width: clamp(48px, 13vw, 58px); height: clamp(48px, 13vw, 58px); }
  body[data-view="player"] .stage-progress {
    width: 100%;
    flex: 0 0 auto;
    gap: 10px;
    padding: 0 1px;
  }
  body[data-view="player"] .stage-progress input { flex: 1 1 auto; }
  body[data-view="player"] .player-tabs { flex: 0 0 62px; margin-top: 6px; }
  body.mini-seeking .player-bar {
    z-index: 9999;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  body.mini-seeking::after { z-index: 9998; }
}

@media (min-width: 680px) and (max-width: 1020px) {
  body[data-view="player"] .player-main-inner {
    display: grid;
    width: 100%;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    column-gap: clamp(28px, 5vw, 64px);
    row-gap: 16px;
  }
  body[data-view="player"] .player-context { grid-column: 1 / -1; }
  body[data-view="player"] .player-art-wrap {
    grid-column: 1;
    grid-row: 2 / 5;
    width: min(100%, 48vh, 440px);
    align-self: center;
  }
  body[data-view="player"] .player-artwork { max-height: 48vh; }
  body[data-view="player"] .player-track-info { grid-column: 2; grid-row: 2; align-self: end; }
  body[data-view="player"] .stage-actions { grid-column: 2; grid-row: 3; align-self: center; }
  body[data-view="player"] .stage-progress { grid-column: 2; grid-row: 4; align-self: start; }
}

@media (max-height: 680px) and (max-width: 679px) {
  body[data-view="player"] .player-main-inner { gap: 5px; }
  body[data-view="player"] .player-art-wrap { width: min(62vw, 32dvh, 300px); }
  body[data-view="player"] .player-artwork { max-height: 32dvh; }
  body[data-view="player"] .player-track-info h1 { font-size: 20px; }
}

.stage-track-meta {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  margin-top: 7px;
}
.stage-artists {
  display: inline-flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px;
}
.stage-artist-link,
.track-album-label {
  max-width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: #b8c3d0;
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  transition: color .18s ease, opacity .18s ease;
}
.stage-artist-link:hover,
.track-album-label:hover { color: #fff; }
.stage-meta-separator { color: #697585; }
.track-album-label { color: #8793a2; }

@media (max-width: 1020px) {
  .mobile-nav button {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    background: transparent !important;
  }
  .mobile-nav button::after {
    display: block;
    width: 100%;
    color: #929daa;
    text-align: center;
    transition: color .18s ease, font-weight .18s ease;
  }
  .mobile-nav button.active,
  body[data-view="player"] .mobile-nav button[data-view="player"] {
    color: var(--mc-accent);
    background: transparent !important;
  }
  .mobile-nav button.active::after { color: var(--mc-accent); font-weight: 700; }
  body[data-view="player"] .player-main-inner {
    justify-content: center;
    gap: clamp(8px, 1.8dvh, 16px);
  }
  body[data-view="player"] .catalog-status { display: none !important; }
  body[data-view="player"] .stage-actions {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(5, minmax(32px, 40px));
    grid-template-rows: repeat(2, 40px);
    justify-content: center;
    align-items: center;
    gap: 5px clamp(4px, 1.7vw, 11px);
    margin: 0;
  }
  body[data-view="player"] #stageShuffle { grid-column: 1; grid-row: 1; }
  body[data-view="player"] #stagePrev { grid-column: 2; grid-row: 1; }
  body[data-view="player"] #stagePlay { grid-column: 3; grid-row: 1; justify-self: center; align-self: center; }
  body[data-view="player"] #stageNext { grid-column: 4; grid-row: 1; }
  body[data-view="player"] #stageRepeat { grid-column: 5; grid-row: 1; }
  body[data-view="player"] #stageLike { grid-column: 2; grid-row: 2; }
  body[data-view="player"] .stage-actions .sleep-timer-btn { grid-column: 4; grid-row: 2; }
  body[data-view="player"] .stage-icon-btn {
    width: clamp(32px, 9vw, 40px);
    height: clamp(32px, 9vw, 40px);
  }
  body[data-view="player"] .stage-icon-btn.main-play {
    width: clamp(48px, 13vw, 56px);
    height: clamp(48px, 13vw, 56px);
  }
  body[data-view="player"] .stage-progress { margin: 0; }
  body[data-view="player"] .stage-progress { order: 4; }
  body[data-view="player"] .stage-actions { order: 5; }
  .player-tabs button.active { background: transparent; color: var(--mc-accent); font-weight: 700; }
  .player-tabs button.active span { text-shadow: 0 0 16px color-mix(in srgb,var(--mc-accent) 45%,transparent); }
  .stage-icon-btn {
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.035);
    color: #aeb8c4;
    transition: transform .24s cubic-bezier(.2,.8,.2,1), color .2s ease, background .2s ease, box-shadow .24s ease;
    -webkit-tap-highlight-color: transparent;
  }

}

.brand-mark { width: 42px; height: 42px; padding: 0; border-radius: 12px; background: transparent; box-shadow: none; }
.brand-mark .brand-logo { display: block; width: 40px; height: 24px; object-fit: contain; }
.marquee-content { max-width: none; }
.player-track-info h1 {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
}
.stage-track-meta { min-width: 0; max-width: 100%; }
.track-album-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track-album-label:disabled { opacity: 1; cursor: default; }
.stage-artists { display: block; width: max-content; max-width: 100%; overflow: hidden; white-space: nowrap; }
.stage-artists > .marquee-content { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.stage-artists .stage-artist-link { max-width: none; flex: 0 0 auto; white-space: nowrap; }
.ai-mode-panel[hidden], .ai-auto-panel[hidden] { display: none !important; }
.settings-readout {
  display: inline-flex;
  min-height: 40px;
  width: fit-content;
  align-items: center;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface-2);
  color: var(--subtle);
  font-size: 11px;
}

  .ai-mode-switch {
    display: flex;
    width: fit-content;
    gap: 5px;
    padding: 4px;
    margin: 0 0 18px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
  }
  .ai-mode-switch button {
    min-height: 38px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    font-size: 12px;
    font-weight: 650;
    cursor: pointer;
    transition: color .18s ease, background .18s ease, box-shadow .18s ease;
  }
  .ai-mode-switch button.active { background: var(--surface); color: var(--text); box-shadow: 0 2px 8px rgba(0,0,0,.12); }
  .ai-auto-panel {
    display: grid;
    grid-template-columns: minmax(230px, .7fr) minmax(0, 1.3fr);
    gap: 18px;
    align-items: start;
  }
.ai-mode-panel[hidden], .ai-auto-panel[hidden] { display: none !important; }
  .ai-auto-controls, .ai-auto-results {
    min-width: 0;
    padding: clamp(18px, 2.5vw, 28px);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
  }
  .ai-auto-controls { display: flex; flex-direction: column; gap: 13px; }
  .ai-auto-controls h2 { margin: 6px 0; font-size: clamp(22px, 3vw, 30px); letter-spacing: -.04em; }
  .ai-auto-controls p { margin: 0 0 4px; color: var(--muted); font-size: 12px; line-height: 1.55; }
  .ai-auto-controls > label:not(.ai-taste-toggle) { display: grid; gap: 6px; color: var(--subtle); font-size: 11px; font-weight: 600; }
  .ai-auto-controls select {
    width: 100%;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--surface-2);
    color: var(--text);
  }
  .ai-taste-toggle { display: flex; align-items: center; gap: 9px; color: var(--subtle); font-size: 11px; }
  .ai-taste-toggle input { accent-color: var(--site-primary); }
  .ai-auto-controls .primary-btn { justify-content: center; width: 100%; min-height: 44px; margin-top: 4px; }
  .ai-auto-empty { padding: 30px 12px; color: var(--muted); font-size: 13px; text-align: center; }
  .ai-auto-list-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 16px; }
  .ai-auto-list-head > div:first-child { display: grid; gap: 5px; }
  .ai-auto-list-head strong { font-size: 16px; }
  .ai-auto-list-head span { color: var(--muted); font-size: 11px; }
  .ai-auto-list-head > div:last-child { display: flex; flex-wrap: wrap; gap: 7px; }
  .ai-auto-list-head .primary-btn, .ai-auto-list-head .secondary-btn { min-height: 36px; padding: 0 12px; font-size: 11px; }
  .ai-auto-track-list { margin-top: 4px; }

  @media (max-width: 800px) {
    .ai-auto-panel { grid-template-columns: 1fr; }
    .ai-auto-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
    .ai-auto-controls > div:first-child, .ai-auto-controls .ai-taste-toggle, .ai-auto-controls .primary-btn { grid-column: 1 / -1; }
  }
  @media (max-width: 520px) {
    .ai-mode-switch { width: 100%; }
    .ai-mode-switch button { flex: 1; }
    .ai-auto-controls { grid-template-columns: 1fr; }
    .ai-auto-controls > div:first-child, .ai-auto-controls .ai-taste-toggle, .ai-auto-controls .primary-btn { grid-column: auto; }
    .ai-auto-list-head { align-items: flex-start; }
    .ai-auto-list-head > div:last-child { width: 100%; }
    .ai-auto-list-head > div:last-child button { flex: 1; }
  }
@media (max-width: 1020px) {
  .stage-icon-btn:active { transform: scale(.88); background: rgba(255,255,255,.12); }
  .stage-icon-btn:focus-visible { outline: 2px solid color-mix(in srgb,var(--mc-accent) 75%,white); outline-offset: 3px; }
  .stage-icon-btn.main-play {
    border: 0;
    border-radius: 50%;
    color: #101318;
    background: #f5f6f8;
    box-shadow: 0 5px 16px rgba(0,0,0,.24), inset 0 1px 0 #fff;
  }
  body[data-view="player"] .stage-icon-btn.main-play { color: #101318; background: #f5f6f8; }
  body[data-view="player"] .stage-icon-btn.main-play:hover { color: #101318; background: #fff; transform: scale(1.055); }
  body[data-view="player"] .stage-icon-btn.main-play:active { transform: scale(.91); box-shadow: 0 2px 8px rgba(0,0,0,.28); }
}

@media (min-width: 680px) and (max-width: 1020px) {
  body[data-view="player"] .player-main-inner {
    display: grid;
    height: 100%;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    align-content: stretch;
    align-items: center;
    column-gap: clamp(22px, 4vw, 54px);
    row-gap: clamp(8px, 1.6vh, 16px);
  }
  body[data-view="player"] .player-context { grid-column: 1 / -1; grid-row: 1; }
  body[data-view="player"] .player-art-wrap {
    grid-column: 1;
    grid-row: 2 / 5;
    width: min(100%, 46vh, 420px);
    max-width: 100%;
    align-self: center;
  }
  body[data-view="player"] .player-artwork { max-height: 46vh; }
  body[data-view="player"] .player-track-info { grid-column: 2; grid-row: 2; align-self: end; }
  body[data-view="player"] .stage-actions {
    grid-column: 2;
    grid-row: 4;
    grid-template-columns: repeat(5, 36px);
    grid-template-rows: repeat(2, 36px);
    gap: 4px 6px;
    align-self: center;
  }
  body[data-view="player"] .stage-progress {
    grid-column: 2;
    grid-row: 3;
    align-self: start;
  }
}

.artist-row, #homeArtistRow, #followedArtistRow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: clamp(8px, 1.4vw, 18px);
  align-items: start;
}
.artist-row .artist-card, #homeArtistRow .artist-card, #followedArtistRow .artist-card {
  width: 100%;
  min-width: 0;
  padding: 10px 6px;
}
.artist-row .artist-card img, #homeArtistRow .artist-card img, #followedArtistRow .artist-card img {
  width: clamp(64px, 8vw, 92px);
  height: clamp(64px, 8vw, 92px);
}
#catalogTracks .track-row, #freshUploads .track-row {
  min-height: 70px;
  margin: 8px 0;
  padding: 10px 13px;
  border: 1px solid var(--mc-line);
  border-radius: 13px;
}
.player-title-row { display: flex; min-width: 0; align-items: center; gap: 10px; }
.player-title-row h1 { flex: 1 1 auto; min-width: 0; }
.mobile-title-like { display: none; flex: 0 0 38px; width: 38px; height: 38px; }
.explicit-badge {
  display: inline-grid;
  width: 15px;
  height: 15px;
  margin-left: 6px;
  place-items: center;
  vertical-align: 2px;
  border: 1px solid currentColor;
  border-radius: 3px;
  color: #aab4c1;
  font-size: 9px;
  font-weight: 750;
  line-height: 1;
}
.equalizer-bands { gap: 8px; }
.equalizer-bands label {
  grid-template-columns: 58px minmax(80px, 1fr) 44px;
  min-height: 34px;
  gap: 12px;
  color: var(--mc-muted);
}
.equalizer-bands output { color: var(--mc-text); }
.equalizer-bands input[type="range"] { accent-color: var(--mc-accent); }
.theme-store-overlay {
  position: fixed;
  z-index: 12000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(3, 5, 9, .68);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.theme-store-overlay[hidden] { display: none; }
.theme-store-window {
  width: min(100%, 720px);
  max-height: min(82dvh, 760px);
  overflow: auto;
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid var(--mc-line);
  border-radius: 22px;
  background: var(--mc-panel);
  color: var(--mc-text);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .38);
}
.theme-store-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.theme-store-header h2 { margin: 8px 0 0; font-size: 23px; }
.theme-store-description { margin: 12px 0 20px; color: var(--mc-muted); font-size: 12px; line-height: 1.6; }
.theme-store-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.theme-store-card {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--mc-line);
  border-radius: 14px;
  background: var(--mc-panel-raised);
  color: var(--mc-text);
  text-align: left;
  cursor: pointer;
  transition: border-color .2s ease, transform .2s ease, background .2s ease;
}
.theme-store-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--mc-accent) 48%, var(--mc-line)); }
.theme-store-card.active { border-color: var(--mc-accent); }
.theme-store-card .theme-preview { flex: 0 0 82px; width: 82px; height: 58px; }
.theme-store-card-copy { display: grid; min-width: 0; gap: 5px; }
.theme-store-card-copy strong { font-size: 12px; }
.theme-store-card-copy small { color: var(--mc-muted); font-size: 10px; }
button svg { display: block; flex: 0 0 auto; }
.icon-btn, .nav-btn, .mobile-nav button, .control-btn, .stage-icon-btn, .tiny-btn, .queue-add-btn, .catalog-stack-actions button {
  -webkit-tap-highlight-color: transparent;
}
.icon-btn:focus-visible, .nav-btn:focus-visible, .mobile-nav button:focus-visible,
.control-btn:focus-visible, .stage-icon-btn:focus-visible, .tiny-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--mc-accent) 75%, white);
  outline-offset: 3px;
}
.icon-btn, .nav-btn, .mobile-nav button, .control-btn, .stage-icon-btn, .tiny-btn,
.queue-add-btn, .catalog-stack-actions button {
  transition: color .18s ease, background-color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.icon-btn:hover, .nav-btn:hover, .mobile-nav button:hover, .control-btn:hover,
.stage-icon-btn:hover, .tiny-btn:hover, .queue-add-btn:hover, .catalog-stack-actions button:hover {
  color: var(--mc-accent);
}

@media (max-width: 1020px) {
  .mobile-title-like { display: grid; }
  body[data-view="player"] .stage-actions #stageLike { display: none; }
  body[data-view="player"] .player-title-row { width: 100%; }
  body[data-view="player"] .player-track-info h1 { font-size: clamp(18px, 3.2vw, 26px); }
  body[data-view="player"] .stage-actions { max-width: 280px; margin-inline: auto; }
  .mobile-nav button { flex: 1 1 0; min-width: 0; }
  .mobile-nav button::after { font-size: clamp(7px, 1vw, 9px); }
  .artist-row, #homeArtistRow, #followedArtistRow { grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); }
}
@media (max-width: 760px) {
  #catalogTracks .track-row, #freshUploads .track-row { padding-inline: 9px; }
  .theme-store-grid { grid-template-columns: 1fr; }
}

body[data-custom-theme="true"] {
  color: var(--app-custom-text, var(--mc-text));
  font-family: var(--app-custom-font, inherit);
  background-color: var(--app-theme-bg, #0b0d12);
}
body[data-custom-theme="true"] .app-root {
  background-color: var(--app-theme-bg, #0b0d12) !important;
  background-image:
    linear-gradient(var(--app-custom-overlay, transparent), var(--app-custom-overlay, transparent)),
    var(--app-custom-image, none) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: var(--app-custom-photo-size, cover) !important;
  background-attachment: fixed !important;
}
body[data-custom-animation="video"] .app-root {
  background-color: transparent !important;
  background-image: none !important;
}
.app-theme-wallpaper-video[hidden] { display: none; }
body[data-custom-animation="video"] .app-root > .app-theme-wallpaper-video {
  position: fixed;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(var(--app-custom-video-brightness, .58));
  pointer-events: none;
}
body[data-custom-animation="video"] .app-root > .app-theme-wallpaper-video[data-wallpaper-orientation="counterclockwise"] {
  inset: auto;
  top: 50%;
  left: 50%;
  width: 100vh;
  height: 100vw;
  width: 100dvh;
  transform: translate(-50%, -50%) rotate(-90deg);
}
body[data-custom-animation="video"] .app-root > .workspace,
body[data-custom-animation="video"] .app-root > .sidebar {
  position: relative;
  z-index: 1;
}
body[data-custom-theme="true"] .content,
body[data-custom-theme="true"] .player-screen,
body[data-custom-theme="true"] .player-screen.active {
  background-color: transparent !important;
}
body[data-custom-theme="true"] .topbar,
body[data-custom-theme="true"] .sidebar,
body[data-custom-theme="true"] .player-aside {
  background: var(--editorial-surface-solid, var(--app-custom-surface, var(--app-theme-panel))) !important;
  backdrop-filter: blur(var(--glass-blur, 18px)) saturate(135%);
  -webkit-backdrop-filter: blur(var(--glass-blur, 18px)) saturate(135%);
}
body[data-custom-theme="true"] .player-main,
body[data-custom-theme="true"] .mix-card,
body[data-custom-theme="true"] .library-tile,
body[data-custom-theme="true"] .playlist-card,
body[data-custom-theme="true"] .ai-chat,
body[data-custom-theme="true"] .ai-side {
  background: var(--editorial-surface-solid, var(--app-custom-surface, var(--app-theme-card))) !important;
  border-radius: var(--app-custom-roundness, var(--surface-radius, 16px));
  backdrop-filter: blur(var(--glass-blur, 18px)) saturate(135%);
  -webkit-backdrop-filter: blur(var(--glass-blur, 18px)) saturate(135%);
}
body[data-custom-theme="true"] .player-main {
  color: var(--app-custom-text, var(--mc-text));
}
@media (min-width: 721px) and (max-width: 1020px) {
  body[data-view="player"] .player-main { padding: 18px 26px; }
  body[data-view="player"] .player-main-inner {
    display: flex !important;
    width: min(100%, 560px);
    height: auto;
    min-height: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
  }
  body[data-view="player"] .player-context { order: 0; width: 100%; margin: 0 0 14px; }
  body[data-view="player"] .player-art-wrap {
    order: 1;
    width: min(48vh, 50vw, 450px);
    margin: 0 auto 18px;
  }
  body[data-view="player"] .player-artwork { max-height: 48vh; }
  body[data-view="player"] .player-track-info { order: 2; width: 100%; margin-bottom: 4px; }
  body[data-view="player"] .stage-progress { order: 3; width: 100%; margin: 15px 0 0; }
  body[data-view="player"] .stage-volume { display: none; }
  body[data-view="player"] .stage-actions { order: 4; width: 100%; margin: 14px auto 0; }
}

body[data-theme="light"] {
  --mc-bg: #f3f6fa;
  --mc-panel: rgba(255,255,255,.94);
  --mc-panel-raised: #f7f9fc;
  --mc-line: rgba(27, 44, 64, .13);
  --mc-muted: #697789;
  --mc-text: #182332;
  --text: #182332;
  --subtle: #48586b;
  --muted: #697789;
  --surface: #fff;
  --surface-2: #edf2f7;
  --surface-3: #e4ebf3;
  --border: rgba(27, 44, 64, .13);
  --shadow: 0 18px 45px rgba(35, 54, 76, .12);
  color-scheme: light;
}
body[data-theme="light"] .sidebar { background: rgba(248,250,253,.97); }
body[data-theme="light"] .topbar:not([hidden]) {
  border-color: var(--mc-line);
  background: rgba(250,252,255,.96) !important;
}
body[data-theme="light"] .top-nav .nav-btn.active {
  color: var(--mc-text);
  background: rgba(28,55,83,.07);
}
body[data-theme="light"] .top-nav .nav-btn.active .nav-label { color: var(--mc-accent); }
body[data-theme="light"] .top-context, body[data-theme="light"] .icon-btn,
body[data-theme="light"] .nav-btn, body[data-theme="light"] .mobile-nav button { color: #59697c; }
body[data-theme="light"] .nav-btn:hover, body[data-theme="light"] .icon-btn:hover,
body[data-theme="light"] .mobile-nav button:hover { color: var(--mc-accent); background: rgba(17,44,74,.06); }
body[data-theme="light"] .top-search-field, body[data-theme="light"] .search-large,
body[data-theme="light"] .settings-header, body[data-theme="light"] .settings-window,
body[data-theme="light"] .player-aside, body[data-theme="light"] .player-tab-mini {
  background: rgba(255,255,255,.94);
  color: var(--mc-text);
}
body[data-theme="light"] .top-search-field input, body[data-theme="light"] .search-large input { color: var(--mc-text); }
body[data-theme="light"] .home-intro {
  border-color: var(--mc-line);
  background: radial-gradient(ellipse at 82% 45%, color-mix(in srgb,var(--mc-accent) 12%,transparent),transparent 40%), linear-gradient(120deg,#fff,#edf3f9);
}
body[data-theme="light"] .home-intro p, body[data-theme="light"] .page-heading p,
body[data-theme="light"] .track-primary span, body[data-theme="light"] .track-album,
body[data-theme="light"] .track-duration, body[data-theme="light"] .artist-card span { color: #697789; }
body[data-theme="light"] .track-row:hover, body[data-theme="light"] .album-card:hover,
body[data-theme="light"] .artist-card:hover { background: rgba(28,55,83,.055); }
body[data-theme="light"] .secondary-btn, body[data-theme="light"] .filter-chip,
body[data-theme="light"] .catalog-stack-card, body[data-theme="light"] .ai-chat,
body[data-theme="light"] .ai-side, body[data-theme="light"] .library-tile,
body[data-theme="light"] .playlist-card { background: rgba(255,255,255,.86); color: var(--mc-text); }
body[data-theme="light"] .player-bar {
  border-color: var(--mc-line);
  background: rgba(255,255,255,.97) !important;
  color: var(--mc-text);
  box-shadow: 0 12px 35px rgba(34,52,73,.14);
}
body[data-theme="light"] .player-main {
  border-color: var(--mc-line);
  background: radial-gradient(ellipse at 50% 22%,color-mix(in srgb,var(--mc-accent) 10%,transparent),transparent 49%),linear-gradient(155deg,#fff,#f0f4f8 68%);
}
body[data-theme="light"] .player-context, body[data-theme="light"] .player-track-info h1,
body[data-theme="light"] .stage-icon-btn, body[data-theme="light"] .player-close { color: var(--mc-text); }
body[data-theme="light"] .stage-artist-link, body[data-theme="light"] .track-album-label { color: #59697c; }
body[data-theme="light"] .mobile-nav { background: rgba(250,252,255,.97); }
body[data-theme="light"] .theme-store-window { background: #fff; }
body[data-theme="light"] .theme-store-card { background: #f4f7fb; }
body[data-theme="light"] .settings-section h3, body[data-theme="light"] .settings-row-copy strong,
body[data-theme="light"] .settings-inline-control strong { color: var(--mc-text); }
body[data-theme="light"] #view-player.player-screen.active { background: #f3f6fa; }
body[data-theme="light"] .player-tab-mini strong { color: var(--mc-text); }
body[data-theme="light"] .player-tab-mini span { color: var(--mc-muted); }
body[data-theme="light"] .player-tab-mini .control-btn { background: #1d2734; color: #fff; }
body[data-theme="light"] .theme-store-overlay { background: rgba(30,42,58,.38); }
body[data-theme="light"] .explicit-badge { color: #58687a; }

@media (min-width: 721px) and (max-width: 1020px) {
  body[data-view="player"] .workspace,
  body[data-view="player"] .content {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }
  body[data-view="player"] .content { padding: 0; }
  body[data-view="player"] #view-player.player-screen.active {
    position: absolute;
    inset: 0;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) 64px;
    gap: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: max(16px, env(safe-area-inset-top)) clamp(18px, 3vw, 36px) max(10px, env(safe-area-inset-bottom));
    overflow: hidden;
    background:
      radial-gradient(ellipse at 42% 42%, color-mix(in srgb, var(--mc-accent) 9%, transparent), transparent 56%),
      var(--mc-bg);
  }
  body[data-view="player"] .player-tab-mini { grid-row: 1; }
  body[data-view="player"] .player-main,
  body[data-view="player"] .player-aside { grid-row: 2; min-width: 0; min-height: 0; }
  body[data-view="player"] .player-main {
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: clamp(18px, 3vw, 34px);
    overflow: hidden;
    border: 1px solid var(--mc-line);
    border-radius: 26px;
    background:
      radial-gradient(ellipse at 24% 50%, color-mix(in srgb, var(--mc-accent) 13%, transparent), transparent 48%),
      var(--mc-panel);
    box-shadow: 0 24px 70px rgba(24, 39, 57, .12);
    backdrop-filter: blur(var(--glass-blur)) saturate(145%);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(145%);
  }
  body[data-view="player"] .player-main-inner {
    display: grid !important;
    width: min(100%, 920px);
    height: 100%;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    align-content: center;
    align-items: center;
    column-gap: clamp(22px, 4vw, 52px);
    row-gap: clamp(12px, 1.8vh, 20px);
    padding: 0 clamp(4px, 1vw, 14px);
  }
  body[data-view="player"] .player-context { grid-column: 1 / -1; grid-row: 1; width: 100%; margin: 0 0 4px; }
  body[data-view="player"] .player-art-wrap {
    grid-column: 1;
    grid-row: 2 / 5;
    width: min(100%, 43vh, 390px);
    margin: 0;
    justify-self: center;
    align-self: center;
  }
  body[data-view="player"] .player-artwork { width: 100%; max-height: 43vh; border-radius: 20px; }
  body[data-view="player"] .player-track-info { grid-column: 2; grid-row: 2; align-self: end; width: 100%; margin: 0; }
  body[data-view="player"] .player-track-info h1 { margin: 0; font-size: clamp(21px, 2.8vw, 32px); line-height: 1.12; }
  body[data-view="player"] .stage-track-meta { margin-top: 9px; }
  body[data-view="player"] .stage-artist-link,
  body[data-view="player"] .track-album-label { font-size: 13px; }
  body[data-view="player"] .stage-progress { grid-column: 2; grid-row: 3; width: 100%; margin: 4px 0 0; }
  body[data-view="player"] .stage-progress input { height: 4px; }
  body[data-view="player"] .stage-actions {
    grid-column: 2;
    grid-row: 4;
    display: grid;
    width: 216px;
    grid-template-columns: repeat(3, 72px);
    grid-template-rows: repeat(2, 48px);
    justify-content: center;
    justify-items: center;
    align-items: center;
    gap: 8px 0;
    justify-self: center;
    padding: 0;
    margin: 8px 0 0;
  }
  body[data-view="player"] .stage-actions #stagePrev { grid-column: 1; grid-row: 1; }
  body[data-view="player"] .stage-actions #stagePlay { grid-column: 2; grid-row: 1; justify-self: center; }
  body[data-view="player"] .stage-actions #stageNext { grid-column: 3; grid-row: 1; }
  body[data-view="player"] .stage-actions #stageShuffle { grid-column: 1; grid-row: 2; }
  body[data-view="player"] .stage-actions #stageRepeat { grid-column: 3; grid-row: 2; }
  body[data-view="player"] .stage-actions .sleep-timer-btn { grid-column: 2; grid-row: 2; justify-self: center; }
  body[data-view="player"] .stage-actions #stageLike { display: none; }
  body[data-view="player"] .mobile-title-like { display: grid; }
  body[data-view="player"] .stage-icon-btn {
    width: 44px;
    height: 44px;
    border: 1px solid var(--mc-line);
    border-radius: 50%;
    background: var(--mc-panel-raised);
    color: var(--mc-muted);
  }
  body[data-view="player"] .stage-icon-btn svg { width: 19px; height: 19px; }
  body[data-view="player"] .stage-icon-btn.active:not(.main-play) { color: var(--mc-accent); background: color-mix(in srgb,var(--mc-accent) 11%,var(--mc-panel)); }
  body[data-view="player"] .stage-icon-btn.main-play {
    width: 58px;
    height: 58px;
    border: 0;
    background: var(--mc-accent);
    color: #fff;
    box-shadow: 0 8px 22px color-mix(in srgb,var(--mc-accent) 28%,transparent);
  }
  body[data-view="player"] .stage-icon-btn.main-play svg { width: 23px; height: 23px; }
  body[data-view="player"] .stage-volume { display: none; }
  body[data-view="player"] .player-aside { display: none; }
  body[data-view="player"] #view-player[data-player-tab="lyrics"] .player-main,
  body[data-view="player"] #view-player[data-player-tab="queue"] .player-main { display: none; }
  body[data-view="player"] #view-player[data-player-tab="lyrics"] .player-aside,
  body[data-view="player"] #view-player[data-player-tab="queue"] .player-aside {
    display: flex;
    flex-direction: column;
    padding: 20px;
    border: 1px solid var(--mc-line);
    border-radius: 22px;
    background: var(--mc-panel);
    backdrop-filter: blur(var(--glass-blur)) saturate(145%);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(145%);
  }
  body[data-view="player"] .player-tabs {
    grid-row: 3;
    display: flex;
    height: 54px;
    min-height: 54px;
    align-self: end;
    justify-content: center;
    gap: 8px;
    margin: 10px auto 0;
    padding: 4px;
    border: 1px solid var(--mc-line);
    border-radius: 15px;
    background: var(--mc-panel);
    backdrop-filter: blur(var(--glass-blur)) saturate(145%);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(145%);
  }
  body[data-view="player"] .player-tabs button { width: 120px; min-width: 0; height: 44px; flex-direction: row; gap: 7px; font-size: 11px; }
  body[data-view="player"] .player-tabs button span { font-size: 16px; }
}

@media (max-width: 720px) {
  body[data-view="player"] #view-player.player-screen.active {
    gap: 0;
    padding: max(12px, env(safe-area-inset-top)) clamp(16px, 5vw, 24px) max(10px, env(safe-area-inset-bottom));
    background:
      radial-gradient(ellipse at 50% 27%, color-mix(in srgb,var(--mc-accent) 10%,transparent),transparent 48%),
      var(--mc-bg);
  }
  body[data-view="player"] .player-main { padding: 0; }
  body[data-view="player"] .player-main-inner {
    display: flex !important;
    width: min(100%, 460px);
    height: auto;
    min-height: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 0;
  }
  body[data-view="player"] .player-context { margin: 0 0 clamp(14px, 2.4vh, 24px); }
  body[data-view="player"] .player-art-wrap {
    width: min(39vh, 76vw, 330px);
    margin: 0 auto clamp(16px, 2.8vh, 24px);
  }
  body[data-view="player"] .player-artwork { max-height: 39vh; border-radius: 18px; }
  body[data-view="player"] .player-track-info { width: 100%; margin: 0; text-align: left; }
  body[data-view="player"] .player-title-row { width: 100%; gap: 12px; }
  body[data-view="player"] .player-track-info h1 {
    margin: 0;
    font-size: clamp(20px, 5.7vw, 26px);
    line-height: 1.18;
  }
  body[data-view="player"] .mobile-title-like {
    display: grid;
    width: 42px;
    height: 42px;
    flex-basis: 42px;
    border: 1px solid var(--mc-line);
    border-radius: 50%;
    background: var(--mc-panel-raised);
    color: var(--mc-muted);
  }
  body[data-view="player"] .mobile-title-like.active { color: #e85c7a; background: color-mix(in srgb,#e85c7a 10%,var(--mc-panel)); }
  body[data-view="player"] .mobile-title-like svg { width: 20px; height: 20px; }
  body[data-view="player"] .stage-track-meta { gap: 4px 8px; margin-top: 8px; }
  body[data-view="player"] .stage-artist-link,
  body[data-view="player"] .track-album-label { font-size: 12px; }
  body[data-view="player"] .stage-progress { width: 100%; margin: clamp(15px, 2.5vh, 22px) 0 0; gap: 9px; }
  body[data-view="player"] .stage-progress input { height: 4px; }
  body[data-view="player"] .stage-actions {
    display: grid;
    width: min(100%, 240px);
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 58px 44px;
    justify-content: center;
    align-items: center;
    gap: 7px 4px;
    margin: 15px auto 0;
  }
  body[data-view="player"] .stage-actions #stagePrev { grid-column: 1; grid-row: 1; }
  body[data-view="player"] .stage-actions #stagePlay { grid-column: 2; grid-row: 1; justify-self: center; }
  body[data-view="player"] .stage-actions #stageNext { grid-column: 3; grid-row: 1; }
  body[data-view="player"] .stage-actions #stageShuffle { grid-column: 1; grid-row: 2; }
  body[data-view="player"] .stage-actions #stageRepeat { grid-column: 3; grid-row: 2; }
  body[data-view="player"] .stage-actions .sleep-timer-btn { grid-column: 2; grid-row: 2; justify-self: center; }
  body[data-view="player"] .stage-actions #stageLike { display: none; }
  body[data-view="player"] .stage-actions #stagePrev,
  body[data-view="player"] .stage-actions #stagePlay,
  body[data-view="player"] .stage-actions #stageNext,
  body[data-view="player"] .stage-actions #stageShuffle,
  body[data-view="player"] .stage-actions #stageRepeat,
  body[data-view="player"] .stage-actions .sleep-timer-btn { justify-self: center; }
  body[data-view="player"] .stage-icon-btn {
    width: 42px;
    height: 42px;
    border: 1px solid var(--mc-line);
    border-radius: 50%;
    background: var(--mc-panel-raised);
    color: var(--mc-muted);
  }
  body[data-view="player"] .stage-icon-btn svg { width: 18px; height: 18px; }
  body[data-view="player"] .stage-icon-btn.active:not(.main-play) { color: var(--mc-accent); background: color-mix(in srgb,var(--mc-accent) 11%,var(--mc-panel)); }
  body[data-view="player"] .stage-icon-btn.main-play {
    width: 58px;
    height: 58px;
    border: 0;
    background: var(--mc-accent);
    color: #fff;
    box-shadow: 0 8px 22px color-mix(in srgb,var(--mc-accent) 28%,transparent);
  }
  body[data-view="player"] .stage-icon-btn.main-play svg { width: 23px; height: 23px; }
  body[data-view="player"] .stage-volume { display: none; }
  body[data-view="player"] .player-tabs {
    flex: 0 0 58px;
    height: 58px;
    gap: 3px;
    margin: 10px 0 0;
    padding: 4px;
    border: 1px solid var(--mc-line);
    border-radius: 16px;
    background: var(--mc-panel);
    backdrop-filter: blur(var(--glass-blur)) saturate(145%);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(145%);
  }
  body[data-view="player"] .player-tabs button {
    min-width: 0;
    flex: 1 1 0;
    height: 46px;
    border-radius: 11px;
    font-size: 10px;
  }
  body[data-view="player"] .player-tabs button.active { background: color-mix(in srgb,var(--mc-accent) 12%,var(--mc-panel)); }
  body[data-view="player"] #view-player[data-player-tab="lyrics"] .player-aside,
  body[data-view="player"] #view-player[data-player-tab="queue"] .player-aside {
    background: var(--mc-panel);
    backdrop-filter: blur(var(--glass-blur)) saturate(145%);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(145%);
  }
}
@media (max-height: 700px) and (max-width: 720px) {
  body[data-view="player"] .player-context { margin-bottom: 8px; }
  body[data-view="player"] .player-art-wrap { width: min(33vh, 65vw, 260px); margin-bottom: 12px; }
  body[data-view="player"] .player-artwork { max-height: 33vh; }
  body[data-view="player"] .stage-progress { margin-top: 11px; }
  body[data-view="player"] .stage-actions { margin-top: 9px; }
}
@media (max-height: 700px) and (min-width: 721px) and (max-width: 1020px) {
  body[data-view="player"] .player-art-wrap { width: min(33vh, 35vw, 300px); margin-bottom: 12px; }
  body[data-view="player"] .player-artwork { max-height: 33vh; }
  body[data-view="player"] .player-context { margin-bottom: 8px; }
  body[data-view="player"] .stage-actions { margin-top: 8px; }
  body[data-view="player"] .stage-progress { margin-top: 8px; }
}

body[data-theme="light"] .topbar:not([hidden]),
body[data-theme="light"] .player-bar,
body[data-theme="light"] .mobile-nav,
body[data-theme="light"] .player-tabs,
body[data-theme="light"] .player-tab-mini,
body[data-theme="light"] .settings-header,
body[data-theme="light"] .settings-rail,
body[data-theme="light"] .settings-window,
body[data-theme="light"] .global-search-pop,
body[data-theme="light"] .profile-pop,
body[data-theme="light"] .drawer {
  border-color: rgba(31,52,75,.12);
  background: rgba(250,252,255,.72) !important;
  color: #182332;
  box-shadow: 0 16px 48px rgba(35,54,76,.12);
  backdrop-filter: blur(var(--glass-blur,18px)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--glass-blur,18px)) saturate(150%);
}
body[data-theme="light"] .settings-backdrop { background: rgba(37,53,73,.24); }
body[data-theme="light"] .settings-content { background: rgba(247,250,253,.88); }
body[data-theme="light"] .settings-section,
body[data-theme="light"] .settings-row,
body[data-theme="light"] .settings-inline-control { border-color: rgba(31,52,75,.1); }
body[data-theme="light"] .settings-description,
body[data-theme="light"] .settings-note,
body[data-theme="light"] .settings-row-copy span { color: #68788c; }
body[data-theme="light"] .settings-select,
body[data-theme="light"] .settings-color-input,
body[data-theme="light"] .settings-live-preview,
body[data-theme="light"] .settings-preview-track,
body[data-theme="light"] .settings-preview-stage {
  border-color: rgba(31,52,75,.12);
  background: rgba(255,255,255,.62);
  color: #182332;
}
body[data-theme="light"] .settings-nav button { color: #586a7f; }
body[data-theme="light"] .settings-nav button.active { background: rgba(37,133,233,.1); color: #166dc5; }
body[data-theme="light"] .track-row, body[data-theme="light"] .catalog-stack-card,
body[data-theme="light"] .album-card, body[data-theme="light"] .artist-card {
  color: #182332;
}
body[data-theme="light"] .track-primary strong,
body[data-theme="light"] .section-head h2,
body[data-theme="light"] .page-heading h1,
body[data-theme="light"] .detail-copy h1 { color: #182332; }
body[data-theme="light"] .track-artist-link,
body[data-theme="light"] .track-album-link,
body[data-theme="light"] .source-link { color: #53647a; }
body[data-theme="light"] .track-artist-link:hover,
body[data-theme="light"] .track-album-link:hover { color: var(--mc-accent); }
body[data-theme="light"] .catalog-stack-copy strong,
body[data-theme="light"] .album-card strong,
body[data-theme="light"] .artist-card strong { color: #182332; }
body[data-theme="light"] .library-tile,
body[data-theme="light"] .playlist-card,
body[data-theme="light"] .ai-chat,
body[data-theme="light"] .ai-side,
body[data-theme="light"] .recommend-card,
body[data-theme="light"] .catalog-stack-card {
  border-color: rgba(31,52,75,.1);
  background: rgba(255,255,255,.68);
  box-shadow: 0 10px 30px rgba(35,54,76,.06);
  backdrop-filter: blur(var(--glass-blur,18px)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur,18px)) saturate(140%);
}
body[data-theme="light"] .filter-chip { color: #53647a; }
body[data-theme="light"] .filter-chip.active { color: #166dc5; }
body[data-theme="light"] .chat-messages,
body[data-theme="light"] .message-bubble,
body[data-theme="light"] .chat-compose,
body[data-theme="light"] .ai-auto-panel,
body[data-theme="light"] .ai-mode-switch { color: #182332; }
body[data-theme="light"] .message.assistant .message-bubble { background: rgba(238,243,249,.9); color: #334459; }
body[data-theme="light"] .message.user .message-bubble { background: color-mix(in srgb,var(--mc-accent) 12%,white); color: #1d344c; }
body[data-theme="light"] .chat-compose input,
body[data-theme="light"] .ai-auto-panel select,
body[data-theme="light"] .ai-layout input { color: #182332; }
body[data-theme="light"] .home-intro { box-shadow: 0 18px 54px rgba(35,54,76,.08); }
body[data-theme="light"] .hero, body[data-theme="light"] .player-main {
  border-color: rgba(31,52,75,.11);
  background:
    radial-gradient(ellipse at 50% 24%, color-mix(in srgb,var(--mc-accent) 9%,transparent),transparent 48%),
    rgba(255,255,255,.67);
  box-shadow: 0 18px 50px rgba(35,54,76,.1);
  backdrop-filter: blur(var(--glass-blur,18px)) saturate(145%);
  -webkit-backdrop-filter: blur(var(--glass-blur,18px)) saturate(145%);
}
body[data-theme="light"] .player-context > span,
body[data-theme="light"] .player-aside-head strong,
body[data-theme="light"] .player-tabs button,
body[data-theme="light"] .player-close { color: #52647a; }
body[data-theme="light"] .stage-icon-btn:not(.main-play),
body[data-theme="light"] .mobile-title-like {
  border-color: rgba(31,52,75,.12);
  background: rgba(255,255,255,.72);
  color: #5b6d82;
}
body[data-theme="light"] .stage-icon-btn.active:not(.main-play) { color: var(--mc-accent); }
body[data-theme="light"] .player-artwork { box-shadow: 0 22px 54px rgba(28,45,65,.2); }
body[data-theme="light"] .player-aside { border-color: rgba(31,52,75,.12); background: rgba(255,255,255,.7); }
body[data-theme="light"] .player-tab-mini strong { color: #182332; }
body[data-theme="light"] .player-tab-mini span { color: #68788c; }
body[data-theme="light"] .player-tab-mini .control-btn { background: #1d2734; color: #fff; }
body[data-theme="light"] .artwork-viewer { background: rgba(245,248,252,.94); color: #182332; }
body[data-theme="light"] .empty-state { color: #68788c; border-color: rgba(31,52,75,.2); }
body[data-theme="light"] .empty-state strong { color: #182332; }

body[data-custom-theme="true"][data-theme="light"] .topbar,
body[data-custom-theme="true"][data-theme="light"] .sidebar,
body[data-custom-theme="true"][data-theme="light"] .player-aside {
  background: var(--editorial-surface-solid, var(--app-custom-surface, var(--app-theme-panel))) !important;
}
body[data-custom-theme="true"][data-theme="light"] .player-main,
body[data-custom-theme="true"][data-theme="light"] .mix-card,
body[data-custom-theme="true"][data-theme="light"] .library-tile,
body[data-custom-theme="true"][data-theme="light"] .playlist-card,
body[data-custom-theme="true"][data-theme="light"] .ai-chat,
body[data-custom-theme="true"][data-theme="light"] .ai-side {
  background: var(--editorial-surface-solid, var(--app-custom-surface, var(--app-theme-card))) !important;
  color: var(--app-custom-text, var(--mc-text));
}
body[data-custom-theme="true"][data-view="player"] #view-player.player-screen.active {
  background-color: transparent !important;
  background-image: none !important;
}

.track-list {
  display: grid;
  gap: 8px;
  border-top: 0;
}
.track-list .track-row {
  margin: 3px 0;
  padding: 11px 14px;
  border: 1px solid var(--mc-line);
  border-radius: 14px;
  background-color: rgba(255,255,255,.045);
  backdrop-filter: blur(var(--glass-blur,12px)) saturate(125%);
  -webkit-backdrop-filter: blur(var(--glass-blur,12px)) saturate(125%);
}
.track-list .track-row:hover {
  background-color: rgba(255,255,255,.075);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.search-correction, .global-search-correction {
  margin: 8px 4px 0;
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb,var(--mc-accent) 32%,transparent);
  border-radius: 10px;
  background: color-mix(in srgb,var(--mc-accent) 12%,transparent);
  color: var(--mc-accent);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}
.global-search-correction { display: block; width: calc(100% - 8px); text-align: left; }
.search-correction:hover, .global-search-correction:hover { background: color-mix(in srgb,var(--mc-accent) 19%,transparent); }
body[data-theme="light"] .track-list .track-row {
  border-color: rgba(31,52,75,.12);
  background-color: rgba(255,255,255,.66);
}
body[data-theme="light"] .track-list .track-row:hover { background-color: rgba(255,255,255,.84); }

@media (max-width: 1020px) {
  .player-backdrop-blur {
    position: fixed;
    z-index: 6;
    inset: 0;
    pointer-events: none;
    -webkit-backdrop-filter: blur(0);
    backdrop-filter: blur(0);
  }
  body[data-view="player"]:not(.player-transition-open):not(.player-transition-close) #view-player {
    z-index: 8;
    background: transparent !important;
  }
  body[data-view="player"]:not(.player-transition-close) .workspace,
  body[data-view="player"]:not(.player-transition-close) .content {
    background: transparent !important;
  }
  body[data-view="player"]:not(.player-transition-open):not(.player-transition-close) .content > .view:not(#view-player) {
    display: none !important;
  }
  body[data-view="player"]:not(.player-transition-open):not(.player-transition-close) #toast,
  body[data-view="player"]:not(.player-transition-open):not(.player-transition-close) #drawer,
  body[data-view="player"]:not(.player-transition-open):not(.player-transition-close) #drawerBackdrop,
  body[data-view="player"]:not(.player-transition-open):not(.player-transition-close) #playlistModal,
  body[data-view="player"]:not(.player-transition-open):not(.player-transition-close) #settingsBackdrop,
  body[data-view="player"]:not(.player-transition-open):not(.player-transition-close) #artworkViewer {
    display: none !important;
  }
  body.player-transition-open .topbar,
  body.player-transition-open .mobile-nav,
  body.player-transition-close .topbar,
  body.player-transition-close .mobile-nav {
    opacity: var(--player-background-opacity, 1);
    transform: translateY(var(--player-menu-shift, 0px));
    transition: none !important;
    pointer-events: none;
  }
  body.player-transition-open .workspace,
  body.player-transition-close .workspace {
    background: transparent !important;
  }
  body.player-transition-open .content > .view.active:not(#view-player),
  body.player-transition-close .content > .view.active:not(#view-player) {
    opacity: var(--player-background-opacity, 1);
    animation: none !important;
    transition: none !important;
    will-change: opacity;
  }
  body.player-transition-open #playerBar,
  body.player-transition-close #playerBar {
    display: grid !important;
    opacity: var(--player-background-opacity, 1);
    transition: none !important;
    pointer-events: none;
  }
  body.player-transition-open .artwork-viewer,
  body.player-transition-close .artwork-viewer,
  body.player-transition-open .drawer-backdrop,
  body.player-transition-close .drawer-backdrop,
  body.player-transition-open .drawer,
  body.player-transition-close .drawer,
  body.player-transition-open .modal-backdrop,
  body.player-transition-close .modal-backdrop,
  body.player-transition-open .settings-backdrop,
  body.player-transition-close .settings-backdrop {
    opacity: var(--player-background-opacity, 1);
    transition: none !important;
    pointer-events: none !important;
  }
  body.player-transition-open .topbar,
  body.player-transition-close .topbar { display: flex !important; }
  body.player-transition-open .mobile-nav,
  body.player-transition-close .mobile-nav { display: flex !important; }
  .player-transition-artwork {
    position: fixed;
    z-index: 105;
    display: block;
    max-width: none;
    object-fit: cover;
    box-shadow: 0 18px 50px rgba(0,0,0,.32);
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    will-change: left, top, width, height, border-radius;
  }
  body.player-transition-open #view-player.player-screen.active,
  body.player-transition-close #view-player.player-screen.active {
    display: flex !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    animation: none !important;
    pointer-events: none !important;
    will-change: left, top, width, height, border-radius, background-color, backdrop-filter;
  }
  body.player-transition-open #view-player .player-main,
  body.player-transition-close #view-player .player-main {
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  body.player-transition-open #view-player .player-art-wrap,
  body.player-transition-close #view-player .player-art-wrap {
    opacity: var(--player-transition-content-opacity, 0);
  }
  body.player-transition-open #view-player #stageArtwork,
  body.player-transition-close #view-player #stageArtwork {
    visibility: hidden !important;
  }
  body.player-transition-open #view-player .player-main-inner > *,
  body.player-transition-close #view-player .player-main-inner > *,
  body.player-transition-open #view-player .player-tabs,
  body.player-transition-close #view-player .player-tabs,
  body.player-transition-open #view-player .player-tab-mini,
  body.player-transition-close #view-player .player-tab-mini,
  body.player-transition-open #view-player .player-aside,
  body.player-transition-close #view-player .player-aside {
    opacity: var(--player-transition-content-opacity, 0);
    transform: translateY(var(--player-content-shift, 0px));
    transition: none !important;
    will-change: opacity, transform;
  }
  body.player-transition-open #view-player .player-art-glow,
  body.player-transition-close #view-player .player-art-glow {
    opacity: var(--player-transition-content-opacity, 0);
  }
}

@media (max-width: 1020px) {
  body[data-view="player"] .player-context > div { gap: clamp(10px, 2vw, 18px); }
  body[data-view="player"] .player-context .sleep-timer-btn {
    display: grid;
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
    color: var(--mc-muted);
    opacity: .8;
  }
  body[data-view="player"] .player-context .sleep-timer-btn.active { color: var(--mc-accent); opacity: 1; }
  body[data-view="player"] .stage-progress {
    display: flex;
    width: 100%;
    align-items: center;
    gap: clamp(5px, 1.7vw, 10px);
  }
  body[data-view="player"] .stage-progress > span { flex: 0 0 auto; }
  body[data-view="player"] .stage-progress input { flex: 1 1 auto; min-width: 28px; }
  body[data-view="player"] .stage-progress #stageShuffle,
  body[data-view="player"] .stage-progress #stageRepeat {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--mc-muted);
    opacity: .78;
  }
  body[data-view="player"] .stage-progress #stageShuffle:hover,
  body[data-view="player"] .stage-progress #stageRepeat:hover { background: color-mix(in srgb, var(--mc-accent) 8%, transparent); opacity: 1; }
  body[data-view="player"] .stage-progress #stageShuffle.active,
  body[data-view="player"] .stage-progress #stageRepeat.active { color: var(--mc-accent); opacity: 1; }
  body[data-view="player"] .stage-progress #stageShuffle svg,
  body[data-view="player"] .stage-progress #stageRepeat svg { width: 16px; height: 16px; }
  body[data-view="player"] .stage-actions {
    display: flex;
    width: min(100%, 230px);
    align-items: center;
    justify-content: space-between;
    gap: clamp(12px, 5vw, 24px);
    margin: 4px auto 0;
  }
  body[data-view="player"] .stage-actions #stagePrev,
  body[data-view="player"] .stage-actions #stageNext {
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    color: var(--mc-muted);
  }
  body[data-view="player"] .stage-actions #stagePlay {
    width: 58px;
    height: 58px;
  }
}

@media (min-width: 721px) and (max-width: 1020px) {
  body[data-view="player"] .player-main-inner {
    display: flex !important;
    width: min(100%, 560px);
    height: auto;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 0;
  }
  body[data-view="player"] .player-context { order: 0; margin: 0 0 14px; }
  body[data-view="player"] .player-art-wrap { order: 1; margin: 0 auto 18px; }
  body[data-view="player"] .player-track-info { order: 2; width: 100%; margin-bottom: 4px; }
  body[data-view="player"] .stage-progress { order: 3; margin: 15px 0 0; }
  body[data-view="player"] .stage-actions { order: 4; }
}

.sleep-timer-backdrop {
  position: fixed;
  z-index: 2000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(3, 5, 9, .72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .24s ease;
}
.sleep-timer-backdrop[hidden] { display: none; }
.sleep-timer-backdrop.open { opacity: 1; pointer-events: auto; }
.sleep-timer-dialog {
  position: relative;
  width: min(100%, 390px);
  padding: 34px 30px 28px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 28px;
  background:
    radial-gradient(ellipse at 50% -18%, color-mix(in srgb, var(--mc-accent) 20%, transparent), transparent 62%),
    linear-gradient(155deg, #191f29, #10141b 70%);
  box-shadow: 0 30px 100px rgba(0, 0, 0, .56), inset 0 1px rgba(255, 255, 255, .035);
  text-align: center;
  transform: translateY(14px) scale(.98);
  transition: transform .3s var(--mc-ease);
}
.sleep-timer-backdrop.open .sleep-timer-dialog { transform: translateY(0) scale(1); }
.sleep-timer-close {
  position: absolute;
  top: 14px;
  right: 15px;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 50%;
  background: rgba(255, 255, 255, .04);
  color: #aab2bd;
  font-size: 22px;
  line-height: 1;
}
.sleep-timer-close:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.sleep-timer-orbit {
  --sleep-progress: 0deg;
  position: relative;
  display: grid;
  width: 124px;
  height: 124px;
  margin: 3px auto 19px;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(from -90deg, var(--mc-accent) 0deg var(--sleep-progress), rgba(255, 255, 255, .09) var(--sleep-progress) 360deg);
  filter: drop-shadow(0 5px 20px color-mix(in srgb, var(--mc-accent) 18%, transparent));
  transition: background .4s ease;
}
.sleep-timer-orbit > div {
  position: absolute;
  inset: 4px;
  display: grid;
  place-items: start center;
  padding-top: 21px;
  border-radius: 50%;
  background: #141a22;
}
.sleep-timer-orbit svg { width: 29px; height: 29px; color: var(--mc-accent); }
.sleep-timer-orbit > span {
  position: relative;
  z-index: 1;
  margin-top: 30px;
  color: #f7f9fc;
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  letter-spacing: -.035em;
}
.sleep-timer-dialog > .eyebrow { margin-bottom: 7px; color: var(--mc-accent); font-weight: 700; }
.sleep-timer-dialog h2 { margin: 0; font-size: 25px; letter-spacing: -.04em; }
.sleep-timer-status { min-height: 20px; margin: 9px 0 22px; color: var(--mc-muted); font-size: 12px; }
.sleep-timer-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sleep-timer-options button {
  display: flex;
  min-height: 70px;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
  padding: 16px 8px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 16px;
  background: rgba(255, 255, 255, .035);
  color: #aeb7c3;
  transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease;
}
.sleep-timer-options button:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--mc-accent) 45%, transparent); color: #fff; }
.sleep-timer-options button.selected {
  border-color: color-mix(in srgb, var(--mc-accent) 65%, transparent);
  background: color-mix(in srgb, var(--mc-accent) 13%, #151a22);
  color: #fff;
  box-shadow: inset 0 0 18px color-mix(in srgb, var(--mc-accent) 7%, transparent);
}
.sleep-timer-options strong { font-size: 21px; font-weight: 650; letter-spacing: -.04em; }
.sleep-timer-options span { font-size: 11px; }
.sleep-timer-cancel {
  width: 100%;
  min-height: 40px;
  margin-top: 15px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #a9b2be;
  font-size: 12px;
}
.sleep-timer-cancel:hover { background: rgba(255, 255, 255, .055); color: #fff; }
.sleep-timer-cancel[hidden] { display: none; }
@media (max-width: 540px) {
  .sleep-timer-backdrop { align-items: end; padding: 14px 12px max(14px, env(safe-area-inset-bottom)); }
  .sleep-timer-dialog { width: 100%; padding: 31px 24px 23px; border-radius: 26px; }
}

.content { position: relative; }
body[data-catalog-loading="true"] .content > .view { visibility: hidden !important; }
.catalog-loading {
  position: fixed;
  z-index: 3;
  inset: 66px 0 0;
  display: none;
  padding: 32px clamp(22px, 4vw, 58px) 156px;
  overflow: hidden;
  background: var(--mc-bg);
}
body[data-catalog-loading="true"] .catalog-loading { display: block; }
.loading-hero {
  display: grid;
  min-height: 238px;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 34%);
  align-items: center;
  gap: 30px;
  padding: clamp(24px, 4vw, 50px);
  border: 1px solid var(--mc-line);
  border-radius: 24px;
  background: color-mix(in srgb, var(--mc-panel) 92%, transparent);
}
.loading-copy { display: grid; justify-items: start; gap: 14px; }
.loading-line, .loading-actions i, .loading-hero-art, .loading-section-head i, .loading-cards i, .loading-rows i {
  display: block;
  overflow: hidden;
  background: linear-gradient(105deg, color-mix(in srgb,var(--mc-text) 3%,transparent) 25%, color-mix(in srgb,var(--mc-text) 9%,transparent) 43%, color-mix(in srgb,var(--mc-text) 3%,transparent) 62%);
  background-size: 240% 100%;
  animation: catalog-shimmer 1.65s ease-in-out infinite;
}
.loading-line { height: 12px; border-radius: 8px; }
.loading-kicker { width: 110px; height: 8px; }
.loading-title { width: min(390px, 60vw); height: clamp(24px, 3.2vw, 42px); }
.loading-description { width: min(310px, 50vw); height: 11px; }
.loading-actions { display: flex; gap: 10px; margin-top: 7px; }
.loading-actions i { width: 112px; height: 40px; border-radius: 11px; }
.loading-actions i + i { width: 132px; }
.loading-hero-art { width: min(100%, 190px); aspect-ratio: 1; justify-self: center; border-radius: 20px; }
.loading-section-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 32px 0 15px; }
.loading-section-head i { width: min(220px, 42vw); height: 16px; border-radius: 8px; }
.loading-section-head i + i { width: 76px; height: 10px; }
.loading-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.loading-cards i { width: 100%; aspect-ratio: .95; border-radius: 16px; }
.loading-rows { display: grid; gap: 4px; }
.loading-rows i { height: 58px; border-radius: 10px; }
@keyframes catalog-shimmer {
  from { background-position: 100% 0; }
  to { background-position: -140% 0; }
}
.image-fallback { background: #252b33; object-fit: cover; }
.queue-row.unavailable, .stage-queue-row.unavailable, .track-row.unavailable { cursor: not-allowed; }
.queue-unavailable-label, .track-unavailable-label {
  color: #ef9b91 !important;
  font-size: 9px;
  font-weight: 600;
}
.queue-row.unavailable > img, .stage-queue-row.unavailable > img, .track-row.unavailable > img { filter: grayscale(.85); }
.queue-row.unavailable .queue-item-actions [data-queue-next] { color: #798391; }
.queue-row.unavailable .queue-item-actions [data-queue-next]:disabled { opacity: .42; }
.track-row.unavailable .track-actions [data-queue-add]:disabled { cursor: not-allowed; opacity: .38; }
@media (max-width: 720px) {
  .catalog-loading { inset-block-start: 58px; padding: 18px 12px 150px; }
  .loading-hero { min-height: 176px; grid-template-columns: minmax(0, 1fr) 30%; gap: 12px; padding: 22px 18px; }
  .loading-title { width: min(220px, 54vw); }
  .loading-description { width: min(190px, 46vw); }
  .loading-actions i { width: 88px; height: 36px; }
  .loading-actions i + i { width: 102px; }
  .loading-hero-art { width: min(100%, 116px); border-radius: 15px; }
  .loading-section-head { margin: 26px 0 12px; }
  .loading-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .loading-cards i:nth-child(n+4) { display: none; }
  .loading-rows i:nth-child(n+4) { display: none; }
}
@media (min-width: 721px) and (max-width: 1020px) {
  .catalog-loading { inset-block-start: 58px; }
}
@media (prefers-reduced-motion: reduce) {
  .loading-line, .loading-actions i, .loading-hero-art, .loading-section-head i, .loading-cards i, .loading-rows i { animation: none; }
}

.player-tabs button svg { width: 16px; height: 16px; flex: 0 0 16px; }
.track-row:not(.unavailable), .library-tile, .mix-card, .album-card, .artist-card { cursor: pointer; }
.progress-line input[type="range"],
.stage-progress input[type="range"],
.volume input[type="range"],
.stage-volume input[type="range"] { transition: --range-progress .28s linear; }
.progress-line input[type="range"]::-webkit-slider-thumb,
.stage-progress input[type="range"]::-webkit-slider-thumb,
.volume input[type="range"]::-webkit-slider-thumb,
.stage-volume input[type="range"]::-webkit-slider-thumb {
  opacity: 0;
  transition: opacity .16s ease, transform .16s ease, box-shadow .16s ease;
}
.progress-line input[type="range"]:hover::-webkit-slider-thumb,
.progress-line input[type="range"]:focus-visible::-webkit-slider-thumb,
.stage-progress input[type="range"]:hover::-webkit-slider-thumb,
.stage-progress input[type="range"]:focus-visible::-webkit-slider-thumb,
.volume input[type="range"]:hover::-webkit-slider-thumb,
.volume input[type="range"]:focus-visible::-webkit-slider-thumb,
.stage-volume input[type="range"]:hover::-webkit-slider-thumb,
.stage-volume input[type="range"]:focus-visible::-webkit-slider-thumb {
  opacity: 1;
  transform: scale(1.2);
}
.progress-line input[type="range"]::-moz-range-thumb,
.stage-progress input[type="range"]::-moz-range-thumb,
.volume input[type="range"]::-moz-range-thumb,
.stage-volume input[type="range"]::-moz-range-thumb {
  opacity: 0;
  transition: opacity .16s ease, transform .16s ease, box-shadow .16s ease;
}
.progress-line input[type="range"]:hover::-moz-range-thumb,
.progress-line input[type="range"]:focus-visible::-moz-range-thumb,
.stage-progress input[type="range"]:hover::-moz-range-thumb,
.stage-progress input[type="range"]:focus-visible::-moz-range-thumb,
.volume input[type="range"]:hover::-moz-range-thumb,
.volume input[type="range"]:focus-visible::-moz-range-thumb,
.stage-volume input[type="range"]:hover::-moz-range-thumb,
.stage-volume input[type="range"]:focus-visible::-moz-range-thumb {
  opacity: 1;
  transform: scale(1.2);
}