:root {
  color-scheme: dark;
  --line: 1.15px;
  --bg: #0a0c10;
  --bg-secondary: #12151b;
  --panel: rgba(8, 11, 16, 0.2);
  --panel-strong: rgba(10, 14, 20, 0.28);
  --panel-soft: rgba(8, 11, 16, 0.18);
  --border: rgba(255, 255, 255, 0.058);
  --border-strong: rgba(255, 255, 255, 0.11);
  --text: #f7f8fb;
  --muted: #9ea5b5;
  --soft: #7d8495;
  --accent: #6ae38b;
  --accent-strong: #c3ff6a;
  --theme-primary-rgb: 106 227 139;
  --theme-secondary-rgb: 110 178 255;
  --theme-primary-rgb-dark: 59 127 78;
  --accent-soft: rgba(106, 227, 139, 0.055);
  --accent-border: rgb(var(--theme-primary-rgb) / 0.14);
  --accent-bg: rgb(var(--theme-primary-rgb) / 0.038);
  --accent-surface: linear-gradient(135deg, rgba(5, 8, 12, 0.04), rgb(var(--theme-primary-rgb) / 0.09) 48%, rgb(var(--theme-secondary-rgb) / 0.075) 100%);
  --glass-overlay: linear-gradient(180deg, rgba(255, 255, 255, 0.042) 0%, rgba(255, 255, 255, 0.012) 17%, rgba(7, 10, 15, 0.024) 50%, rgba(255, 255, 255, 0.005) 100%);
  --glass-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0.028) 8%, rgba(255, 255, 255, 0.006) 24%, transparent 56%);
  --glass-surface: linear-gradient(135deg, rgba(9, 12, 18, 0.02) 0%, rgb(var(--theme-secondary-rgb) / 0.04) 22%, rgba(8, 11, 16, 0.02) 46%, rgb(var(--theme-primary-rgb) / 0.032) 78%, rgba(255, 255, 255, 0.006) 100%);
  --glass-prism: linear-gradient(135deg, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0.08) 12%, rgb(var(--theme-secondary-rgb) / 0.18) 34%, rgba(255, 255, 255, 0.02) 50%, rgb(var(--theme-primary-rgb) / 0.16) 76%, rgba(255, 255, 255, 0.28) 100%);
  --liquid-active-fill: linear-gradient(135deg, rgb(var(--theme-secondary-rgb) / 0.15) 0%, rgba(8, 11, 16, 0.08) 42%, rgb(var(--theme-primary-rgb) / 0.13) 100%);
  --liquid-active-glow: radial-gradient(circle at 16% 14%, rgba(255, 255, 255, 0.18), transparent 26%), radial-gradient(circle at 84% 70%, rgb(var(--theme-secondary-rgb) / 0.16), transparent 30%), radial-gradient(circle at 18% 82%, rgb(var(--theme-primary-rgb) / 0.12), transparent 28%);
  --liquid-droplet-fill: linear-gradient(145deg, rgb(var(--theme-secondary-rgb) / 0.055) 0%, rgba(7, 10, 14, 0.004) 36%, rgb(var(--theme-primary-rgb) / 0.062) 100%);
  --liquid-droplet-edge: rgba(255, 255, 255, 0.105);
  --liquid-droplet-shadow: 0 16px 28px rgba(0, 0, 0, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 0 0 1px rgb(var(--theme-secondary-rgb) / 0.05), inset 0 -10px 16px rgba(0, 0, 0, 0.14);
  --glass-shadow: 0 18px 44px rgba(0, 0, 0, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(255, 255, 255, 0.02);
  --glass-shadow-strong: 0 24px 60px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -1px 0 rgba(255, 255, 255, 0.024);
  --danger: #ff667b;
  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius-md: 18px;
  --radius-sm: 14px;
  --shadow-xl: 0 28px 70px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 16px 38px rgba(0, 0, 0, 0.15);
  --max-sidebar: 92px;
  --expanded-sidebar: 244px;
  --max-right-panel: 360px;
  --mobile-nav-height: 74px;
  --mobile-nav-gap: 12px;
  --player-safe-space: 176px;
  --right-panel-safe-space: 132px;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  scroll-padding-bottom: calc(var(--player-safe-space) + env(safe-area-inset-bottom, 0px));
}

body {
  margin: 0;
  font-family: "Manrope", "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  position: relative;
  isolation: isolate;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  background:
    radial-gradient(circle at 12% 0%, rgb(var(--theme-primary-rgb) / 0.095), transparent 30%),
    radial-gradient(circle at 84% 0%, rgb(var(--theme-secondary-rgb) / 0.12), transparent 26%),
    radial-gradient(circle at 50% 115%, rgba(255, 255, 255, 0.026), transparent 32%),
    linear-gradient(180deg, #090b0f 0%, var(--bg) 100%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(circle at center, black 50%, transparent 92%);
  opacity: 0.36;
}

a {
  color: inherit;
  text-decoration: none;
}

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

input[type="range"] {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 28px;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  touch-action: pan-y;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgb(var(--theme-primary-rgb-dark, 59 127 78) / 0.92) 0%,
    rgb(var(--theme-primary-rgb-dark, 59 127 78) / 0.92) var(--range-percent, 0%),
    rgba(255, 255, 255, 0.1) var(--range-percent, 0%),
    rgba(255, 255, 255, 0.1) 100%
  );
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -5px;
  border: 2px solid rgb(var(--theme-secondary-rgb) / 0.9);
  border-radius: 50%;
  background: rgb(var(--theme-secondary-rgb) / 0.98);
  box-shadow: 0 0 0 4px rgb(var(--theme-secondary-rgb) / 0.18), 0 10px 24px rgb(var(--theme-secondary-rgb) / 0.24);
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

input[type="range"]::-moz-range-track {
  height: 6px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgb(var(--theme-primary-rgb-dark, 59 127 78) / 0.92) 0%,
    rgb(var(--theme-primary-rgb-dark, 59 127 78) / 0.92) var(--range-percent, 0%),
    rgba(255, 255, 255, 0.1) var(--range-percent, 0%),
    rgba(255, 255, 255, 0.1) 100%
  );
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 2px solid rgb(var(--theme-secondary-rgb) / 0.9);
  border-radius: 50%;
  background: rgb(var(--theme-secondary-rgb) / 0.98);
  box-shadow: 0 0 0 4px rgb(var(--theme-secondary-rgb) / 0.18), 0 10px 24px rgb(var(--theme-secondary-rgb) / 0.24);
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

input[type="range"]:hover::-webkit-slider-thumb,
input[type="range"]:active::-webkit-slider-thumb,
input[type="range"]:focus-visible::-webkit-slider-thumb {
  transform: scale(1.08);
  box-shadow: 0 12px 28px rgb(var(--theme-secondary-rgb) / 0.34);
}

input[type="range"]:hover::-moz-range-thumb,
input[type="range"]:active::-moz-range-thumb,
input[type="range"]:focus-visible::-moz-range-thumb {
  transform: scale(1.08);
  box-shadow: 0 12px 28px rgb(var(--theme-secondary-rgb) / 0.34);
}

input[type="range"]:focus-visible {
  outline: none;
}

button {
  cursor: pointer;
}

img {
  display: block;
}

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--max-sidebar) minmax(0, 1fr) 0;
  gap: 14px;
  padding: 14px 14px var(--player-safe-space);
  overflow-x: clip;
}

.app-shell.sidebar-expanded {
  grid-template-columns: var(--expanded-sidebar) minmax(0, 1fr) 0;
}

.app-shell.queue-open {
  grid-template-columns: var(--max-sidebar) minmax(0, 1fr) minmax(280px, var(--max-right-panel));
}

.app-shell.sidebar-expanded.queue-open {
  grid-template-columns: var(--expanded-sidebar) minmax(0, 1fr) minmax(280px, var(--max-right-panel));
}

.sidebar,
.topbar,
.right-panel,
.hero-panel,
.stat-card,
.entity-card,
.era-card,
.track-table,
.settings-card,
.floating-menu,
.modal-card,
.player-bar,
.stack-section,
.search-toolbar-panel,
.empty-state,
.empty-panel,
.loading-state,
.mobile-bottom-nav {
  border: var(--line) solid var(--border);
  background:
    var(--glass-overlay),
    var(--glass-surface),
    linear-gradient(180deg, rgba(255, 255, 255, 0.006), rgba(255, 255, 255, 0.002)),
    var(--panel);
  backdrop-filter: blur(10px) saturate(132%) brightness(0.96);
  -webkit-backdrop-filter: blur(10px) saturate(132%) brightness(0.96);
  box-shadow: var(--glass-shadow);
  position: relative;
  isolation: isolate;
}

.sidebar,
.right-panel,
.hero-panel,
.track-table,
.settings-card,
.stack-section,
.entity-card,
.era-card,
.modal-card,
.stat-card,
.search-toolbar-panel,
.empty-state,
.empty-panel,
.loading-state {
  border-radius: var(--radius-lg);
}

.sidebar::before,
.topbar::before,
.right-panel::before,
.hero-panel::before,
.stat-card::before,
.entity-card::before,
.era-card::before,
.track-table::before,
.settings-card::before,
.floating-menu::before,
.modal-card::before,
.player-bar::before,
.stack-section::before,
.search-toolbar-panel::before,
.empty-state::before,
.empty-panel::before,
.loading-state::before,
.mobile-bottom-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background:
    var(--glass-sheen),
    radial-gradient(circle at 14% 0%, rgba(255, 255, 255, 0.14), transparent 24%),
    radial-gradient(circle at 96% 10%, rgb(var(--theme-secondary-rgb) / 0.1), transparent 16%),
    radial-gradient(circle at 6% 92%, rgb(var(--theme-primary-rgb) / 0.07), transparent 20%);
}

.sidebar::after,
.topbar::after,
.right-panel::after,
.hero-panel::after,
.stat-card::after,
.entity-card::after,
.era-card::after,
.track-table::after,
.settings-card::after,
.floating-menu::after,
.modal-card::after,
.player-bar::after,
.stack-section::after,
.search-toolbar-panel::after,
.empty-state::after,
.empty-panel::after,
.loading-state::after,
.mobile-bottom-nav::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background: var(--glass-prism);
  opacity: 0.98;
  filter: saturate(150%) contrast(116%) drop-shadow(0 0 10px rgb(var(--theme-secondary-rgb) / 0.08));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.sidebar > *,
.topbar > *,
.right-panel > *,
.hero-panel > *,
.stat-card > *,
.entity-card > *,
.era-card > *,
.track-table > *,
.settings-card > *,
.floating-menu > *,
.modal-card > *,
.player-bar > *,
.stack-section > *,
.search-toolbar-panel > *,
.empty-state > *,
.empty-panel > *,
.loading-state > *,
.mobile-bottom-nav > * {
  position: relative;
  z-index: 1;
}

@keyframes liquid-selection-drift {
  0% {
    transform: translate3d(-4%, 2%, 0) scale(0.94);
    background-position: 0% 0%, 100% 100%;
  }

  50% {
    transform: translate3d(4%, -3%, 0) scale(1.02);
    background-position: 100% 8%, 0% 100%;
  }

  100% {
    transform: translate3d(-2%, 3%, 0) scale(0.96);
    background-position: 12% 0%, 88% 100%;
  }
}

body.theme-light {
  color-scheme: light;
  --bg: #f5f7fb;
  --bg-secondary: #e9edf5;
  --panel: rgba(255, 255, 255, 0.72);
  --panel-strong: rgba(255, 255, 255, 0.94);
  --panel-soft: rgba(18, 24, 35, 0.045);
  --border: rgba(17, 24, 39, 0.1);
  --border-strong: rgba(17, 24, 39, 0.18);
  --text: #101621;
  --muted: #5d6678;
  --soft: #737d90;
  --shadow-xl: 0 28px 70px rgba(25, 33, 49, 0.16);
  --shadow-lg: 0 16px 38px rgba(25, 33, 49, 0.11);
  --glass-overlay: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.18));
  --glass-surface: linear-gradient(135deg, rgba(255, 255, 255, 0.55), rgb(var(--theme-secondary-rgb) / 0.08), rgb(var(--theme-primary-rgb) / 0.08));
}

body.theme-light::before {
  background:
    radial-gradient(circle at top left, rgb(var(--theme-primary-rgb) / 0.12), transparent 34%),
    radial-gradient(circle at 80% 0%, rgb(var(--theme-secondary-rgb) / 0.14), transparent 30%),
    linear-gradient(180deg, #ffffff 0%, var(--bg) 100%);
}

body.no-liquid-glass .sidebar,
body.no-liquid-glass .topbar,
body.no-liquid-glass .right-panel,
body.no-liquid-glass .hero-panel,
body.no-liquid-glass .stat-card,
body.no-liquid-glass .entity-card,
body.no-liquid-glass .era-card,
body.no-liquid-glass .track-table,
body.no-liquid-glass .settings-card,
body.no-liquid-glass .floating-menu,
body.no-liquid-glass .modal-card,
body.no-liquid-glass .player-bar,
body.no-liquid-glass .stack-section,
body.no-liquid-glass .search-toolbar-panel,
body.no-liquid-glass .empty-state,
body.no-liquid-glass .empty-panel,
body.no-liquid-glass .loading-state,
body.no-liquid-glass .mobile-bottom-nav,
body.no-liquid-glass .global-search input,
body.no-liquid-glass .topbar-home-link,
body.no-liquid-glass .search-suggestions {
  background: var(--panel-strong);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: var(--shadow-lg);
}

body.no-liquid-glass .sidebar::before,
body.no-liquid-glass .topbar::before,
body.no-liquid-glass .right-panel::before,
body.no-liquid-glass .hero-panel::before,
body.no-liquid-glass .stat-card::before,
body.no-liquid-glass .entity-card::before,
body.no-liquid-glass .era-card::before,
body.no-liquid-glass .track-table::before,
body.no-liquid-glass .settings-card::before,
body.no-liquid-glass .floating-menu::before,
body.no-liquid-glass .modal-card::before,
body.no-liquid-glass .player-bar::before,
body.no-liquid-glass .stack-section::before,
body.no-liquid-glass .search-toolbar-panel::before,
body.no-liquid-glass .empty-state::before,
body.no-liquid-glass .empty-panel::before,
body.no-liquid-glass .loading-state::before,
body.no-liquid-glass .mobile-bottom-nav::before,
body.no-liquid-glass .sidebar::after,
body.no-liquid-glass .topbar::after,
body.no-liquid-glass .right-panel::after,
body.no-liquid-glass .hero-panel::after,
body.no-liquid-glass .stat-card::after,
body.no-liquid-glass .entity-card::after,
body.no-liquid-glass .era-card::after,
body.no-liquid-glass .track-table::after,
body.no-liquid-glass .settings-card::after,
body.no-liquid-glass .floating-menu::after,
body.no-liquid-glass .modal-card::after,
body.no-liquid-glass .player-bar::after,
body.no-liquid-glass .stack-section::after,
body.no-liquid-glass .search-toolbar-panel::after,
body.no-liquid-glass .empty-state::after,
body.no-liquid-glass .empty-panel::after,
body.no-liquid-glass .loading-state::after,
body.no-liquid-glass .mobile-bottom-nav::after,
body.no-liquid-glass .liquid-selection-orb {
  display: none;
}

.artist-grid .entity-card img,
.profile-link img,
.mobile-profile-avatar {
  border-radius: 50%;
}

@keyframes liquid-orb-flow {
  0% {
    transform: translate3d(-5%, 3%, 0) scale(0.97);
    opacity: 0.72;
  }

  50% {
    transform: translate3d(5%, -4%, 0) scale(1.03);
    opacity: 0.96;
  }

  100% {
    transform: translate3d(-3%, 4%, 0) scale(0.98);
    opacity: 0.76;
  }
}

@keyframes liquid-orb-specular {
  0% {
    transform: translate3d(-9%, -6%, 0) scale(0.96);
    opacity: 0.52;
  }

  50% {
    transform: translate3d(8%, 7%, 0) scale(1.04);
    opacity: 0.9;
  }

  100% {
    transform: translate3d(-5%, 5%, 0) scale(0.98);
    opacity: 0.58;
  }
}

@keyframes liquid-control-pulse {
  0%,
  100% {
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 1px 0 0 rgb(var(--theme-secondary-rgb) / 0.07), inset -1px 0 0 rgb(var(--theme-primary-rgb) / 0.07);
  }

  50% {
    box-shadow: 0 18px 30px rgba(0, 0, 0, 0.14), 0 0 0 1px rgb(var(--theme-secondary-rgb) / 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 1px 0 0 rgb(var(--theme-secondary-rgb) / 0.12), inset -1px 0 0 rgb(var(--theme-primary-rgb) / 0.12);
  }
}

@keyframes liquid-highlight-drift {
  0%,
  100% {
    opacity: 0.18;
    background-position: 46% 50%, 18% 22%, 50% 50%;
  }

  50% {
    opacity: 0.26;
    background-position: 54% 50%, 24% 18%, 50% 50%;
  }
}

.sidebar-icon-link,
.sidebar-playlist-link,
.sidebar-playlist-placeholder,
.playlist-nav-item,
.nav-menu-link,
.mobile-bottom-link,
.primary-button,
.ghost-button,
.pill-button,
.mini-button,
.icon-circle,
.play-button,
.row-play,
.topbar-home-link,
.profile-link {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 260ms ease,
    background 280ms ease,
    box-shadow 320ms ease,
    color 220ms ease;
}

.sidebar-icon-link::after,
.sidebar-playlist-link::after,
.playlist-nav-item::after,
.nav-menu-link::after,
.mobile-bottom-link::after,
.primary-button::after,
.ghost-button::after,
.pill-button::after,
.mini-button::after,
.icon-circle::after,
.play-button::after,
.row-play::after,
.topbar-home-link::after,
.profile-link::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  opacity: 0.12;
  transform: none;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.045), transparent 36%, rgb(var(--theme-secondary-rgb) / 0.04) 66%, rgb(var(--theme-primary-rgb) / 0.042) 100%),
    radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.08), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.01), rgba(0, 0, 0, 0.06));
  background-size: 140% 100%, 120% 120%, 100% 100%;
  background-position: 46% 50%, 18% 22%, 50% 50%;
  transition:
    opacity 240ms ease,
    transform 360ms cubic-bezier(0.22, 1, 0.36, 1),
    background-position 480ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sidebar-icon-link > *,
.sidebar-playlist-link > *,
.playlist-nav-item > *,
.nav-menu-link > *,
.mobile-bottom-link > *,
.primary-button > *,
.ghost-button > *,
.pill-button > *,
.mini-button > *,
.icon-circle > *,
.play-button > *,
.row-play > *,
.topbar-home-link > *,
.profile-link > * {
  position: relative;
  z-index: 2;
}

.sidebar-icon-link:hover::after,
.sidebar-playlist-link:hover::after,
.playlist-nav-item:hover::after,
.nav-menu-link:hover::after,
.mobile-bottom-link:hover::after,
.primary-button:hover::after,
.ghost-button:hover::after,
.pill-button:hover::after,
.mini-button:hover::after,
.icon-circle:hover::after,
.play-button:hover::after,
.row-play:hover::after,
.topbar-home-link:hover::after,
.profile-link:hover::after {
  opacity: 0.12;
  transform: none;
  background-position: 46% 50%, 18% 22%, 50% 50%;
}

.sidebar-icon-link.is-active::after,
.sidebar-playlist-link.is-active::after,
.playlist-nav-item.is-active::after,
.nav-menu-link.is-active::after,
.mobile-bottom-link.is-active::after,
.icon-circle.is-active::after {
  opacity: 0.06;
  transform: none;
  background-position: 46% 50%, 18% 22%, 50% 50%;
}

.row-play.is-visualizer::after,
.play-button.is-playing::after {
  opacity: 0.06;
  transform: none;
  background-position: 46% 50%, 18% 22%, 50% 50%;
}

.icon-circle.is-active::after,
.row-play.is-visualizer::after,
.play-button.is-playing::after {
  animation: none;
}

.liquid-selection-orb {
  --liquid-follow-duration: 42ms;
  --liquid-follow-ease: linear;
  --liquid-resize-duration: 58ms;
  --liquid-radius-duration: 58ms;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  box-sizing: border-box;
  opacity: 0;
  border: calc(var(--line) + 0.1px) solid var(--liquid-droplet-edge);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0.002)),
    var(--liquid-droplet-fill);
  backdrop-filter: saturate(112%) brightness(0.99);
  -webkit-backdrop-filter: saturate(112%) brightness(0.99);
  box-shadow: var(--liquid-droplet-shadow);
  transform: translate3d(0, 0, 0);
  transform-origin: center;
  filter: saturate(103%);
  transition:
    opacity 120ms linear,
    left var(--liquid-follow-duration) var(--liquid-follow-ease),
    top var(--liquid-follow-duration) var(--liquid-follow-ease),
    width var(--liquid-resize-duration) var(--liquid-follow-ease),
    height var(--liquid-resize-duration) var(--liquid-follow-ease),
    border-radius var(--liquid-radius-duration) var(--liquid-follow-ease),
    box-shadow 240ms ease,
    filter 240ms ease;
  will-change: left, top, width, height, border-radius, opacity, filter;
  contain: layout style paint;
}

[data-liquid-panel-key],
[data-liquid-orb-host="true"] {
  isolation: isolate;
}

[data-liquid-panel-key][data-liquid-panel-static="true"],
[data-liquid-orb-host="true"][data-liquid-orb-static="true"] {
  position: relative;
}

[data-liquid-orb-host="true"] > :not(.liquid-selection-orb) {
  position: relative;
  z-index: 2;
}

.liquid-selection-orb::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(118deg, transparent 12%, rgba(255, 255, 255, 0.075) 26%, rgba(255, 255, 255, 0.012) 42%, transparent 58%, rgb(var(--theme-secondary-rgb) / 0.055) 76%, rgb(var(--theme-primary-rgb) / 0.06) 100%),
    radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.12), transparent 24%),
    radial-gradient(circle at 86% 82%, rgba(255, 255, 255, 0.03), transparent 20%);
  opacity: 0.64;
}

.liquid-selection-orb::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.01);
  backdrop-filter: blur(1.2px) saturate(116%);
  -webkit-backdrop-filter: blur(1.2px) saturate(116%);
  -webkit-mask-image: radial-gradient(ellipse at center, transparent 52%, black 74%);
  mask-image: radial-gradient(ellipse at center, transparent 52%, black 74%);
  opacity: 0.8;
  transition:
    opacity 220ms ease,
    backdrop-filter 220ms ease,
    -webkit-backdrop-filter 220ms ease;
}

.liquid-selection-orb.is-visible {
  opacity: 0.84;
}

.liquid-selection-orb.is-snapping {
  --liquid-follow-duration: 0ms;
  --liquid-resize-duration: 0ms;
  --liquid-radius-duration: 0ms;
}

.liquid-selection-orb.is-shifting {
  --liquid-follow-duration: 1220ms;
  --liquid-follow-ease: cubic-bezier(0.16, 0.9, 0.22, 1);
  --liquid-resize-duration: 1120ms;
  --liquid-radius-duration: 1060ms;
  opacity: 0.94;
  filter: saturate(114%);
}

.liquid-selection-orb.is-shifting::after {
  backdrop-filter: blur(5px) saturate(126%);
  -webkit-backdrop-filter: blur(5px) saturate(126%);
  opacity: 0.96;
}

.liquid-selection-orb.is-shifting .liquid-selection-orb-core {
  transform: scale(1.035, 0.982);
}

.liquid-selection-orb.is-shifting .liquid-selection-orb-specular {
  transform: scale(1.05, 0.97);
}

.liquid-selection-orb.is-playing {
  box-shadow: 0 18px 32px rgba(0, 0, 0, 0.13), 0 0 0 1px rgb(var(--theme-secondary-rgb) / 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgb(var(--theme-primary-rgb) / 0.08), inset 0 -10px 16px rgba(0, 0, 0, 0.16);
}

.liquid-selection-orb-core,
.liquid-selection-orb-specular {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transition: transform 1220ms cubic-bezier(0.16, 0.9, 0.22, 1);
}

.liquid-selection-orb-core {
  inset: 1px;
  background:
    radial-gradient(circle at 50% 52%, rgba(255, 255, 255, 0.008) 0%, rgba(255, 255, 255, 0.003) 44%, rgba(255, 255, 255, 0.014) 74%, rgba(255, 255, 255, 0.032) 100%),
    radial-gradient(circle at 78% 76%, rgb(var(--theme-primary-rgb) / 0.08), transparent 28%),
    radial-gradient(circle at 82% 28%, rgb(var(--theme-secondary-rgb) / 0.09), transparent 26%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.008), rgba(0, 0, 0, 0.05));
  animation: liquid-orb-flow 7.2s ease-in-out infinite;
  animation-delay: var(--liquid-core-delay, -2.4s);
}

.liquid-selection-orb-specular {
  background:
    radial-gradient(ellipse at 24% 18%, rgba(255, 255, 255, 0.18), transparent 34%),
    radial-gradient(ellipse at 72% 82%, rgba(255, 255, 255, 0.045), transparent 26%),
    linear-gradient(108deg, transparent 18%, rgba(255, 255, 255, 0.085) 30%, rgba(255, 255, 255, 0.014) 46%, transparent 64%);
  opacity: 0.54;
  animation: liquid-orb-specular 6.4s cubic-bezier(0.22, 1, 0.36, 1) infinite;
  animation-delay: var(--liquid-specular-delay, -3.1s);
}

.sidebar {
  padding: 12px 10px;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 12px;
  align-self: start;
  position: sticky;
  top: 14px;
  height: calc(100vh - 132px);
  min-height: calc(100vh - 132px);
  max-height: calc(100vh - 132px);
  overflow: visible;
  isolation: isolate;
  z-index: 95;
}

.brand-lockup,
.sidebar-heading,
.topbar,
.section-header,
.hero-actions,
.player-buttons,
.player-progress,
.panel-header,
.settings-user,
.modal-actions,
.window-controls,
.track-actions {
  display: flex;
  align-items: center;
}

.brand-lockup,
.sidebar-heading,
.section-header,
.panel-header {
  justify-content: space-between;
}

.panel-header {
  padding: 14px 18px 10px;
}

.panel-header .icon-circle {
  flex-shrink: 0;
}

.brand-link,
.user-chip,
.playlist-nav-item,
.track-main,
.track-album,
.entity-meta,
.hero-copy,
.form-field,
.volume-stack {
  display: grid;
}

.brand-link {
  grid-template-columns: 44px 1fr;
  gap: 14px;
  align-items: center;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.brand-link.compact {
  grid-template-columns: 44px;
  justify-content: center;
}

.brand-link.compact > div:last-child {
  display: none;
}

.brand-link strong,
.brand-word-secondary {
  display: block;
  line-height: 1.02;
}

.brand-link strong {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.025em;
}

.brand-word-secondary {
  margin-top: 2px;
  color: #8f96a7;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.brand-logo-shell {
  width: 44px;
  height: 44px;
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 14px;
  overflow: visible;
}

.brand-logo-main,
.brand-logo-accent {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.brand-logo-main {
  filter: drop-shadow(0 12px 20px rgb(var(--theme-primary-rgb) / 0.18));
}

.brand-logo-accent {
  display: none;
  background: var(--accent-strong);
  mask-image: url("/brand-logo/colorless");
  mask-mode: luminance;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: url("/brand-logo/colorless");
  -webkit-mask-mode: luminance;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  opacity: 0.9;
  filter: drop-shadow(0 10px 16px rgb(var(--theme-secondary-rgb) / 0.22));
  pointer-events: none;
}

@supports ((mask-image: url("")) or (-webkit-mask-image: url(""))) {
  .brand-logo-accent {
    display: block;
  }

  .brand-logo-main {
    opacity: 0;
  }
}

.brand-kicker,
.eyebrow,
.hero-meta,
.entity-meta span,
.playlist-nav-item span,
.helper-copy,
.track-main span,
.track-album span,
.user-chip span {
  font-size: 0.82rem;
  color: var(--muted);
}

.sidebar-close,
.mobile-only {
  display: none;
}

.mobile-bottom-nav {
  display: none;
}

.mini-button,
.pill-button,
.ghost-button,
.primary-button,
.icon-circle,
.play-button {
  transition:
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 260ms ease,
    background 280ms ease,
    color 220ms ease,
    box-shadow 320ms ease;
}

.sidebar-section,
.content-shell,
.hero-copy,
.stack-section,
.settings-grid,
.right-panel-body,
.track-body,
.playlist-picker {
  display: grid;
  gap: 14px;
}

.right-panel-body,
.queue-panel {
  align-content: start;
  grid-auto-rows: max-content;
}

.stack-section {
  padding: 20px;
}

.stat-card {
  padding: 20px;
}

.search-toolbar-panel {
  padding: 18px;
  border-radius: 22px;
  box-shadow: var(--glass-shadow);
  z-index: 180;
}

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

.inline-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
}

.inline-toolbar input {
  min-width: 240px;
}

.inline-toolbar-actions,
.search-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.inline-toolbar-actions {
  margin-left: auto;
}

.search-toolbar-actions {
  margin-top: 14px;
}

.recent-searches {
  margin-top: 16px;
  display: grid;
  gap: 10px;
}

.recent-searches-label {
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--soft);
}

.recent-searches-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.recent-search-chip,
.recent-search-clear {
  min-height: 36px;
  padding: 0 14px;
}

.compact-sidebar {
  justify-items: center;
}

.expanded-sidebar {
  justify-items: stretch;
}

.sidebar-icon-nav,
.sidebar-playlist-rail {
  display: grid;
  gap: 8px;
  width: 100%;
}

.sidebar-playlist-rail {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  align-content: start;
  overflow: visible;
}

.sidebar-playlist-rail .mini-button {
  width: 100%;
  padding: 0;
  display: grid;
  place-items: center;
}

.sidebar-icon-link,
.sidebar-playlist-link,
.sidebar-playlist-placeholder {
  width: 100%;
  min-height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  border: var(--line) solid transparent;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.008)),
    rgba(8, 11, 16, 0.12);
  color: var(--muted);
  position: relative;
  overflow: visible;
  backdrop-filter: blur(8px) saturate(128%);
  -webkit-backdrop-filter: blur(8px) saturate(128%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), inset 1px 0 0 rgb(var(--theme-secondary-rgb) / 0.05), inset -1px 0 0 rgb(var(--theme-primary-rgb) / 0.045);
}

.sidebar-icon-link:hover,
.sidebar-playlist-link:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.006)),
    rgba(8, 11, 16, 0.14);
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.075);
}

.sidebar-icon-link.is-active,
.sidebar-playlist-link.is-active {
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.05);
}

.sidebar-item-label {
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(-8px);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  padding: 10px 12px;
  border-radius: 14px;
  border: var(--line) solid var(--border);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.008)),
    rgba(10, 13, 18, 0.42);
  color: var(--text);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(8px) saturate(128%);
  -webkit-backdrop-filter: blur(8px) saturate(128%);
  transition: opacity 180ms ease, transform 180ms ease;
  z-index: 98;
}

.sidebar-icon-link:hover .sidebar-item-label,
.sidebar-playlist-link:hover .sidebar-item-label,
.sidebar-icon-link:focus-visible .sidebar-item-label,
.sidebar-playlist-link:focus-visible .sidebar-item-label {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
  pointer-events: none;
}

.sidebar-expanded .sidebar-item-label {
  position: static;
  transform: none;
  opacity: 1;
  pointer-events: auto;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  z-index: auto;
}

.sidebar-expanded .sidebar-icon-link,
.sidebar-expanded .sidebar-playlist-link {
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  justify-items: start;
  padding: 8px 10px;
}

.sidebar-expanded .sidebar-playlist-rail .mini-button {
  justify-self: stretch;
}

.sidebar-expanded .sidebar-playlist-link img,
.sidebar-expanded .sidebar-playlist-link .playlist-nav-cover {
  width: 34px;
  height: 34px;
}

.sidebar-playlist-link img,
.sidebar-playlist-link .playlist-nav-cover,
.sidebar-playlist-placeholder .button-icon {
  width: 36px;
  height: 36px;
}

.sidebar-playlist-link .playlist-nav-cover,
.sidebar-playlist-link img {
  border-radius: 12px;
}

.sidebar-playlist-placeholder {
  background: rgba(255, 255, 255, 0.015);
  border-color: var(--border);
}

.sidebar-profile {
  width: 44px;
  height: 44px;
}

.playlist-nav-item {
  grid-template-columns: 48px 1fr;
  gap: 12px;
  padding: 10px;
  border-radius: 16px;
}

.playlist-nav-item:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.008)),
    rgba(8, 11, 16, 0.12);
}

.playlist-nav-item.is-active {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.014), rgba(255, 255, 255, 0.003)),
    rgba(8, 11, 16, 0.085);
  border-color: rgba(255, 255, 255, 0.055);
}

.playlist-nav-item img,
.playlist-nav-cover {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 14px;
}

.sidebar-empty {
  padding: 16px;
  color: var(--muted);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.008)),
    var(--panel-soft);
  border-radius: 16px;
  border: var(--line) solid rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.user-chip {
  grid-template-columns: 46px 1fr;
  gap: 12px;
  padding: 10px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.008)),
    rgba(8, 11, 16, 0.12);
  border: var(--line) solid rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.user-chip img,
.profile-link img,
.settings-user img {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
}

.user-chip-fallback,
.profile-fallback {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #264655, #4a7ff0);
  color: white;
  font-weight: 800;
}

.user-chip-fallback,
.profile-link > .profile-fallback {
  width: 100%;
  height: 100%;
}

.user-chip-fallback.large {
  width: 72px;
  height: 72px;
}

.button-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.button-icon svg {
  width: 100%;
  height: 100%;
}

.content-shell {
  gap: 14px;
  min-width: 0;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  min-height: 68px;
  position: sticky;
  top: 14px;
  z-index: 220;
  border-radius: 18px;
}

.topbar-start,
.topbar-actions,
.global-search {
  display: flex;
  align-items: center;
  gap: 12px;
}

.topbar-actions {
  flex-wrap: nowrap;
  min-width: 44px;
  justify-content: flex-end;
}

.global-search {
  flex: 1 1 auto;
  max-width: 820px;
  min-width: 0;
  align-self: stretch;
  gap: 10px;
  position: relative;
}

.global-search input,
.form-field input,
.form-field select,
.form-field textarea,
.search-grid input,
.search-grid select,
.inline-toolbar input,
.inline-toolbar select {
  width: 100%;
  border: var(--line) solid var(--border);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012) 52%, rgba(255, 255, 255, 0.006)),
    rgba(8, 11, 16, 0.12);
  color: var(--text);
  border-radius: 16px;
  padding: 14px 16px;
  outline: none;
  backdrop-filter: blur(8px) saturate(128%);
  -webkit-backdrop-filter: blur(8px) saturate(128%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), inset 1px 0 0 rgb(var(--theme-secondary-rgb) / 0.05), inset -1px 0 0 rgb(var(--theme-primary-rgb) / 0.045), 0 10px 22px rgba(0, 0, 0, 0.07);
}

.global-search input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  height: 44px;
  max-height: 44px;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 44px;
}

.search-suggestions {
  position: absolute;
  left: 56px;
  right: 0;
  top: calc(100% + 8px);
  display: grid;
  gap: 6px;
  padding: 8px;
  border: var(--line) solid var(--border);
  border-radius: 16px;
  background: var(--panel-strong);
  backdrop-filter: blur(14px) saturate(132%);
  -webkit-backdrop-filter: blur(14px) saturate(132%);
  box-shadow: var(--shadow-lg);
  z-index: 260;
}

.search-suggestion-item {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 12px;
}

.search-suggestion-item:hover {
  background: var(--accent-bg);
}

.search-suggestion-item img,
.suggestion-fallback {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  object-fit: cover;
}

.suggestion-fallback {
  display: grid;
  place-items: center;
  background: var(--accent-bg);
  color: var(--text);
  font-weight: 800;
}

.search-suggestion-item strong,
.search-suggestion-item small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-suggestion-item small {
  color: var(--muted);
  margin-top: 2px;
}

.topbar-home-link {
  width: 44px;
  min-width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: var(--line) solid rgba(255, 255, 255, 0.075);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.036), rgba(255, 255, 255, 0.008)),
    rgba(8, 11, 16, 0.12);
  backdrop-filter: blur(8px) saturate(128%);
  -webkit-backdrop-filter: blur(8px) saturate(128%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), inset 1px 0 0 rgb(var(--theme-secondary-rgb) / 0.055), inset -1px 0 0 rgb(var(--theme-primary-rgb) / 0.05), 0 10px 24px rgba(0, 0, 0, 0.08);
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.topbar-home-link:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.1);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)),
    rgba(8, 11, 16, 0.12);
}

.topbar-home-link .brand-logo-shell {
  width: 26px;
  height: 26px;
}

.form-field input[type="range"] {
  padding: 0;
  border: none;
  background: transparent;
  min-height: 28px;
}

.form-field input[type="color"] {
  padding: 6px;
  min-height: 56px;
}

.toggle-field {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-weight: 700;
}

.toggle-field input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

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

.detail-row {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: var(--line) solid var(--border);
  border-radius: 14px;
  background: var(--panel-soft);
}

.detail-row span {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
}

.detail-row strong {
  color: var(--text);
  overflow-wrap: anywhere;
}

.notes-panel,
.era-date-list {
  margin-top: 12px;
  padding: 14px;
  border: var(--line) solid var(--border);
  border-radius: 14px;
  background: var(--panel-soft);
  color: var(--muted);
  line-height: 1.6;
  white-space: pre-wrap;
}

.detail-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.detail-link {
  padding: 9px 12px;
  border: var(--line) solid var(--border);
  border-radius: 999px;
  color: var(--text);
  background: var(--accent-bg);
}

.customize-card {
  width: min(840px, calc(100vw - 28px));
  max-height: min(88vh, 760px);
  display: grid;
  gap: 16px;
  padding: 24px;
  overflow: auto;
}

.customize-card .form-field {
  gap: 7px;
}

.customize-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 2px;
}

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

.image-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
  gap: 12px;
  max-height: min(42vh, 380px);
  overflow: auto;
  padding: 2px 4px 4px 2px;
}

.image-choice {
  border: var(--line) solid var(--border);
  border-radius: 10px;
  padding: 0;
  overflow: hidden;
  background: var(--panel-soft);
  aspect-ratio: 1;
  min-width: 0;
}

.image-choice.is-selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

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

.topbar-start {
  position: relative;
}

.menu-trigger {
  background: rgba(8, 11, 16, 0.14);
}

.nav-popover {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: min(360px, calc(100vw - 32px));
  padding: 14px;
  display: grid;
  gap: 14px;
  border-radius: 20px;
  border: var(--line) solid var(--border-strong);
  background: rgba(8, 11, 16, 0.54);
  box-shadow: var(--shadow-xl);
  backdrop-filter: blur(8px) saturate(126%);
  -webkit-backdrop-filter: blur(8px) saturate(126%);
  z-index: 30;
}

.nav-popover-section,
.nav-menu-list,
.nav-menu-playlists {
  display: grid;
  gap: 10px;
}

.nav-popover-label {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--soft);
}

.nav-menu-link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 14px;
  color: var(--muted);
  background: rgba(8, 11, 16, 0.12);
}

.nav-menu-link:hover {
  color: var(--text);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.006)),
    rgba(8, 11, 16, 0.12);
}

.nav-menu-link.is-active {
  color: var(--text);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.014), rgba(255, 255, 255, 0.003)),
    rgba(8, 11, 16, 0.085);
  border-color: rgba(255, 255, 255, 0.055);
}

.nav-popover-user {
  padding-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.sidebar-empty.compact {
  padding: 12px;
  font-size: 0.82rem;
}

.main-view,
.settings-grid {
  display: grid;
  gap: 18px;
}

.hero-panel {
  padding: 28px;
  display: grid;
  grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
  gap: 24px;
  overflow: hidden;
}

.hero-panel h1,
.section-header h2,
.modal-title {
  font-family: "Space Grotesk", sans-serif;
  letter-spacing: -0.04em;
}

.hero-panel h1 {
  margin: 6px 0 0;
  font-size: clamp(2.4rem, 4vw, 4.2rem);
  line-height: 1.02;
  overflow-wrap: anywhere;
}

.hero-panel p,
.section-header p,
.helper-copy,
.empty-state p {
  color: var(--muted);
  line-height: 1.68;
}

.hero-art img,
.entity-card img,
.era-card img,
.cover-art {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-art {
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 220px;
  max-height: 220px;
  border-radius: 24px;
  overflow: hidden;
  background: var(--accent-surface);
  border: var(--line) solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 1px 0 0 rgb(var(--theme-secondary-rgb) / 0.05), inset -1px 0 0 rgb(var(--theme-primary-rgb) / 0.045);
}

.entity-placeholder,
.cover-art-fallback,
.playlist-cover-gradient {
  display: grid;
  place-items: center;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.008)),
    var(--accent-surface);
  border: var(--line) solid rgba(255, 255, 255, 0.065);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.entity-placeholder.tall {
  height: 100%;
}

.primary-button,
.ghost-button,
.pill-button,
.mini-button,
.icon-circle,
.play-button {
  border-radius: 12px;
  border: var(--line) solid rgba(255, 255, 255, 0.075);
  padding: 0 14px;
  min-height: 40px;
  backdrop-filter: blur(8px) saturate(128%);
  -webkit-backdrop-filter: blur(8px) saturate(128%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), inset 1px 0 0 rgb(var(--theme-secondary-rgb) / 0.055), inset -1px 0 0 rgb(var(--theme-primary-rgb) / 0.05), 0 10px 22px rgba(0, 0, 0, 0.075);
}

.section-actions,
.hero-actions,
.track-actions,
.topbar-actions {
  gap: 10px;
  flex-wrap: wrap;
}

.primary-button,
.play-button {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.008)),
    linear-gradient(135deg, rgb(var(--theme-primary-rgb) / 0.44) 0%, rgb(var(--theme-secondary-rgb) / 0.3) 100%);
  color: #06100b;
  font-weight: 800;
  border-color: rgb(var(--theme-primary-rgb) / 0.16);
}

.ghost-button,
.pill-button,
.mini-button,
.icon-circle {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.008)),
    rgba(8, 11, 16, 0.12);
  color: var(--text);
  border-color: var(--border);
}

.primary-button:hover,
.ghost-button:hover,
.pill-button:hover,
.mini-button:hover,
.icon-circle:hover,
.play-button:hover,
.profile-link:hover {
  transform: translate3d(0, -2px, 0);
  border-color: rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), inset 1px 0 0 rgb(var(--theme-secondary-rgb) / 0.075), inset -1px 0 0 rgb(var(--theme-primary-rgb) / 0.07), 0 14px 24px rgba(0, 0, 0, 0.085);
}

.icon-circle {
  width: 40px;
  min-width: 40px;
  padding: 0;
  display: inline-grid;
  place-items: center;
}

.icon-circle.is-active {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.032), rgba(255, 255, 255, 0.008)),
    rgba(8, 11, 16, 0.13);
  border-color: rgba(255, 255, 255, 0.08);
  color: rgb(var(--theme-primary-rgb) / 0.98);
  animation: none;
}

.row-play.is-visualizer {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.032), rgba(255, 255, 255, 0.008)),
    rgba(8, 11, 16, 0.13);
  border-color: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.row-play:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.008)),
    rgba(8, 11, 16, 0.13);
  border-color: rgba(255, 255, 255, 0.08);
}

.row-play.is-visualizer,
.play-button.is-playing {
  animation: none;
}

.icon-circle.passive {
  pointer-events: none;
}

.icon-circle.is-disabled,
.icon-circle:disabled {
  opacity: 0.38;
  color: var(--soft);
  border-color: rgba(255, 255, 255, 0.04);
  background: rgba(255, 255, 255, 0.025);
  cursor: not-allowed;
}

.play-button {
  width: 46px;
  min-width: 46px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  color: #fff;
}

.play-button.is-playing {
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 1px 0 0 rgb(var(--theme-secondary-rgb) / 0.06), inset -1px 0 0 rgb(var(--theme-primary-rgb) / 0.06), 0 12px 22px rgba(0, 0, 0, 0.08);
}

.play-button .button-icon {
  color: inherit;
}

.card-grid,
.stat-grid {
  display: grid;
  gap: 16px;
  align-content: start;
}

.artist-grid,
.playlist-grid,
.era-grid {
  grid-template-columns: repeat(auto-fill, minmax(182px, 182px));
  justify-content: start;
}

.stat-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.entity-card,
.era-card,
.stat-card {
  overflow: hidden;
}

.entity-card,
.era-card {
  display: grid;
  box-shadow: var(--glass-shadow);
  transition:
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 260ms ease,
    box-shadow 320ms ease,
    background 280ms ease;
}

.entity-card:hover,
.era-card:hover {
  transform: translate3d(0, -2px, 0);
  border-color: rgba(255, 255, 255, 0.11);
  box-shadow: 0 18px 32px rgba(0, 0, 0, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 1px 0 0 rgb(var(--theme-secondary-rgb) / 0.08), inset -1px 0 0 rgb(var(--theme-primary-rgb) / 0.08);
}

.entity-card img,
.playlist-cover-gradient,
.era-card img {
  aspect-ratio: 1 / 1;
  max-height: 182px;
  border: var(--line) solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 1px 0 0 rgb(var(--theme-secondary-rgb) / 0.045), inset -1px 0 0 rgb(var(--theme-primary-rgb) / 0.04), 0 12px 22px rgba(0, 0, 0, 0.1);
}

.era-card-art {
  position: relative;
  overflow: hidden;
}

.era-card-art > a,
.era-card-art > .entity-placeholder {
  display: block;
}

.entity-meta {
  gap: 4px;
  padding: 16px;
}

.player-track > div,
.track-main > div,
.track-album,
.queue-item > div,
.playlist-picker-item > div,
.playlist-nav-item > div,
.user-chip > div,
.entity-meta {
  min-width: 0;
}

.player-track strong,
.player-track span,
.track-main strong,
.track-main span,
.track-album strong,
.track-album span,
.queue-item strong,
.queue-item span,
.playlist-picker-item strong,
.playlist-picker-item span,
.playlist-nav-item strong,
.playlist-nav-item span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.track-table {
  overflow: hidden;
}

.track-head,
.track-row {
  display: grid;
  grid-template-columns: minmax(240px, 2fr) minmax(150px, 1fr) minmax(120px, 0.8fr) minmax(160px, 1fr) minmax(192px, 1.02fr);
  gap: 12px;
  align-items: center;
}

.track-head {
  padding: 12px 16px;
  color: var(--soft);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.022), rgba(255, 255, 255, 0.006));
}

.track-row {
  position: relative;
  isolation: isolate;
  padding: 12px 16px;
  border: 1px solid transparent;
  border-radius: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.014), rgba(255, 255, 255, 0.004));
  transition:
    background 280ms ease,
    border-color 260ms ease,
    box-shadow 320ms ease,
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.track-row:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.009));
  transform: translate3d(0, -2px, 0);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.track-row.is-current {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.016), rgba(255, 255, 255, 0.004)),
    rgba(8, 11, 16, 0.1);
  border-color: rgba(255, 255, 255, 0.065);
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.row-play,
.cover-art.tiny {
  width: 40px;
  height: 40px;
}

.row-play,
.cover-art {
  border-radius: 14px;
}

.row-play {
  border: 1px solid var(--border);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.008)),
    rgba(8, 11, 16, 0.12);
  color: var(--text);
  display: grid;
  place-items: center;
  backdrop-filter: blur(6px) saturate(125%);
  -webkit-backdrop-filter: blur(6px) saturate(125%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), inset 1px 0 0 rgb(var(--theme-secondary-rgb) / 0.06), inset -1px 0 0 rgb(var(--theme-primary-rgb) / 0.055);
}

.track-main {
  grid-template-columns: 40px 40px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.track-album,
.track-meta {
  gap: 4px;
}

.track-meta {
  display: grid;
  grid-template-columns: minmax(40px, 48px) max-content;
  justify-content: end;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding-right: 4px;
}

.track-actions {
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
  padding-right: 2px;
}

.track-meta > span {
  min-width: 40px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.track-actions .icon-circle {
  width: 40px;
  min-width: 40px;
  min-height: 40px;
}

.track-link,
.track-subcopy,
.player-track-title,
.player-track-artist {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.track-link {
  font-weight: 700;
}

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

.player-track-artist {
  font-weight: 700;
}

.track-link.subtle {
  font-weight: 600;
}

.track-dates {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 0.82rem;
}

.track-dates strong {
  color: var(--soft);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-right: 6px;
}

.track-link:hover,
.track-subcopy:hover,
.player-track-title:hover,
.player-track-artist:hover {
  color: var(--text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

.track-link.is-current,
.mini-card-title.is-current,
.player-track-title.is-current {
  color: rgb(var(--theme-primary-rgb) / 0.98);
  text-shadow: 0 0 18px rgb(var(--theme-primary-rgb) / 0.16);
}

.track-link.is-error,
.mini-card-title.is-error,
.player-track-title.is-error {
  color: #7f8696;
}

.track-subcopy,
.player-track-artist {
  color: var(--muted);
}

.mini-visualizer {
  width: 16px;
  height: 16px;
  display: inline-grid;
  place-items: center;
  position: relative;
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: opacity;
}

.mini-visualizer-orbit,
.mini-visualizer-core {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 999px;
  backface-visibility: hidden;
  will-change: transform, opacity;
}

.mini-visualizer-orbit.orbit-a {
  width: 7px;
  height: 7px;
  border: 1.4px solid currentColor;
  opacity: 0;
  animation: visualizer-ring 3.1s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.mini-visualizer-orbit.orbit-b {
  width: 7px;
  height: 7px;
  border: 1.4px solid currentColor;
  opacity: 0;
  animation: visualizer-ring-inner 3.1s cubic-bezier(0.22, 1, 0.36, 1) infinite;
  animation-delay: 1.55s;
}

.mini-visualizer-core {
  width: 4px;
  height: 4px;
  background: currentColor;
  transform: translate(-50%, -50%);
  opacity: 0.92;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.12);
  animation: visualizer-core 3.1s ease-in-out infinite;
}

.mini-loading-dots {
  width: 18px;
  height: 18px;
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: repeat(3, 3px);
  align-items: center;
  justify-content: center;
  justify-items: center;
  gap: 2px;
  line-height: 0;
  margin: 0;
  transform-origin: center center;
  pointer-events: none;
  backface-visibility: hidden;
  will-change: transform;
}

.row-play {
  position: relative;
}

.row-play .mini-loading-dots {
  position: absolute;
  inset: 0;
  margin: auto;
  transform: translateX(5px) rotate(-90deg) translateZ(0);
}

.mini-card-play .mini-loading-dots {
  transform: translateX(4.6px) rotate(-90deg) translateZ(0);
}

.mini-loading-dots span {
  display: block;
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.34;
  animation: mini-loading-dot 0.96s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.mini-loading-dots span:nth-child(2) {
  animation-delay: 0.14s;
}

.mini-loading-dots span:nth-child(3) {
  animation-delay: 0.28s;
}

@keyframes visualizer-ring {
  0% {
    transform: translate(-50%, -50%) scale(0.6);
    opacity: 0;
  }

  18% {
    opacity: 0.8;
  }

  70% {
    opacity: 0.18;
  }

  100% {
    transform: translate(-50%, -50%) scale(2.25);
    opacity: 0;
  }
}

@keyframes visualizer-ring-inner {
  0% {
    transform: translate(-50%, -50%) scale(0.6);
    opacity: 0;
  }

  18% {
    opacity: 0.72;
  }

  70% {
    opacity: 0.16;
  }

  100% {
    transform: translate(-50%, -50%) scale(2.25);
    opacity: 0;
  }
}

@keyframes visualizer-core {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(0.94);
    opacity: 0.86;
  }

  50% {
    transform: translate(-50%, -50%) scale(1.08);
    opacity: 1;
  }
}

@keyframes mini-loading-dot {
  0%,
  100% {
    opacity: 0.28;
    transform: translateY(0);
  }

  50% {
    opacity: 1;
    transform: translateY(-2px);
  }
}

.mini-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(176px, 176px));
  justify-content: start;
  gap: 14px;
}

.home-carousel-section .section-header {
  align-items: flex-end;
  gap: 16px;
}

.home-carousel {
  width: 100%;
}

.home-carousel .mini-card-grid.is-paged {
  grid-template-columns: repeat(var(--mini-card-columns, 4), minmax(0, 1fr));
  justify-content: stretch;
  gap: 16px;
}

.home-carousel-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.home-carousel-page {
  min-width: 46px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-align: center;
  white-space: nowrap;
}

.carousel-arrow {
  width: 40px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  border: var(--line) solid rgba(255, 255, 255, 0.085);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.042), rgba(255, 255, 255, 0.01)),
    rgba(12, 15, 21, 0.28);
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 12px 26px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, opacity 180ms ease;
}

.carousel-arrow:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: rgb(var(--theme-primary-rgb) / 0.34);
}

.carousel-arrow:disabled {
  cursor: default;
  opacity: 0.38;
}

.carousel-arrow .button-icon {
  width: 18px;
  height: 18px;
}

.mini-card {
  min-height: 248px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
  border-radius: 18px;
  border: var(--line) solid var(--border);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0.008)),
    rgba(8, 11, 16, 0.12);
  overflow: hidden;
  box-shadow: var(--glass-shadow);
  transition:
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 260ms ease,
    background 280ms ease,
    box-shadow 320ms ease;
}

.mini-card:hover {
  transform: translate3d(0, -2px, 0);
  border-color: rgba(255, 255, 255, 0.11);
  box-shadow: 0 18px 32px rgba(0, 0, 0, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 1px 0 0 rgb(var(--theme-secondary-rgb) / 0.08), inset -1px 0 0 rgb(var(--theme-primary-rgb) / 0.08);
}

.mini-card.is-current {
  border-color: rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.016), rgba(255, 255, 255, 0.004)),
    rgba(8, 11, 16, 0.1);
  box-shadow: 0 18px 32px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.04), var(--glass-shadow);
}

.mini-card-art {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  overflow: hidden;
  min-width: 0;
}

.mini-card-art > a,
.mini-card-art > .cover-art,
.mini-card-art > img {
  display: block;
  width: 100%;
  height: 100%;
}

.mini-card-play {
  position: absolute;
  right: 8px;
  bottom: 8px;
  backdrop-filter: blur(6px) saturate(125%);
  -webkit-backdrop-filter: blur(6px) saturate(125%);
}

.mini-card-copy {
  min-width: 0;
  display: grid;
  gap: 6px;
  align-content: start;
}

.mini-card-title,
.mini-card-subtitle,
.mini-card-meta {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  line-height: 1.28;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.mini-card-title {
  font-weight: 800;
}

.mini-card-title.is-current {
  color: rgb(var(--theme-primary-rgb) / 0.98);
  text-shadow: 0 0 18px rgb(var(--theme-primary-rgb) / 0.16);
}

.mini-card-subtitle,
.mini-card-meta {
  color: var(--muted);
  font-size: 0.83rem;
}

.mini-card-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.era-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pill {
  display: inline-flex;
  align-items: center;
  padding: 7px 11px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0.008)),
    var(--accent-soft);
  border: var(--line) solid rgb(var(--theme-primary-rgb) / 0.12);
  font-size: 0.78rem;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.pill.muted {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.006)),
    rgba(8, 11, 16, 0.11);
  border-color: var(--border);
}

.player-bar {
  position: fixed;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 240;
  display: grid;
  grid-template-columns: minmax(220px, 1.1fr) minmax(320px, 1.3fr) minmax(190px, 0.9fr);
  gap: 12px;
  padding: 12px 14px;
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.032), rgba(255, 255, 255, 0.008)),
    linear-gradient(135deg, rgb(var(--theme-primary-rgb) / 0.07), transparent 44%, rgb(var(--theme-secondary-rgb) / 0.09) 100%),
    rgba(8, 11, 16, 0.24);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: var(--glass-shadow-strong);
}

.mobile-bottom-nav {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 245;
  display: none;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  padding: 8px 10px;
  min-height: var(--mobile-nav-height);
  border: var(--line) solid rgba(255, 255, 255, 0.08);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.032), rgba(255, 255, 255, 0.008)),
    rgba(8, 11, 16, 0.28);
  backdrop-filter: blur(9px) saturate(128%);
  -webkit-backdrop-filter: blur(9px) saturate(128%);
  box-shadow: var(--glass-shadow-strong);
}

.mobile-bottom-link {
  display: grid;
  justify-items: center;
  gap: 6px;
  min-width: 0;
  padding: 10px 6px 8px;
  border-radius: 16px;
  color: var(--muted);
  transition: background 240ms ease, color 220ms ease, transform 240ms cubic-bezier(0.22, 1, 0.36, 1), border-color 240ms ease, box-shadow 300ms ease;
}

.mobile-bottom-link .button-icon {
  width: 20px;
  height: 20px;
}

.mobile-bottom-link:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.008)),
    rgba(8, 11, 16, 0.12);
  color: var(--text);
}

.mobile-bottom-link.is-active {
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.06);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.014), rgba(255, 255, 255, 0.003)),
    rgba(8, 11, 16, 0.09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 10px 18px rgba(0, 0, 0, 0.06);
}

.mobile-bottom-label {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.mobile-bottom-avatar {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
}

.mobile-bottom-avatar > img,
.mobile-bottom-avatar > .profile-fallback {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
}

.mobile-bottom-avatar > .profile-fallback {
  font-size: 0.68rem;
}

.player-track,
.player-extra {
  display: flex;
  align-items: center;
  gap: 14px;
}

.player-extra {
  justify-content: flex-end;
}

.player-track {
  min-width: 0;
}

.player-track-copy {
  min-width: 0;
  flex: 1 1 auto;
}

.player-track-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.player-track .cover-art {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  border: var(--line) solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 1px 0 0 rgb(var(--theme-secondary-rgb) / 0.045), inset -1px 0 0 rgb(var(--theme-primary-rgb) / 0.04), 0 12px 22px rgba(0, 0, 0, 0.1);
}

.player-controls {
  display: grid;
  gap: 10px;
}

.player-buttons {
  justify-content: center;
  gap: 8px;
}

.player-progress {
  gap: 10px;
}

.progress-slider {
  width: 100%;
}

.volume-stack {
  width: min(168px, 100%);
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.player-utility-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.right-panel {
  position: sticky;
  top: 14px;
  align-self: start;
  height: calc(100vh - 132px);
  width: 100%;
  overflow: hidden;
  padding: 0;
  transform: translateX(18px);
  transition: transform 180ms ease, opacity 180ms ease;
  opacity: 0;
  pointer-events: none;
  z-index: 40;
  min-width: 0;
}

.right-panel.is-open {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

.right-panel-body {
  height: calc(100% - 64px);
  overflow-y: auto;
  padding: 10px 18px var(--right-panel-safe-space);
  overscroll-behavior: contain;
  scroll-padding-bottom: calc(var(--right-panel-safe-space) + 18px);
}

.queue-item,
.playlist-picker-item {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 10px;
  border-radius: 16px;
  border: var(--line) solid rgba(255, 255, 255, 0.075);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.008)),
    rgba(8, 11, 16, 0.12);
  color: var(--text);
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), inset 1px 0 0 rgb(var(--theme-secondary-rgb) / 0.05), inset -1px 0 0 rgb(var(--theme-primary-rgb) / 0.045);
}

.queue-item {
  min-height: 72px;
}

.queue-item.is-current,
.playlist-picker-item:hover {
  border-color: rgba(255, 255, 255, 0.08);
}

.queue-item:hover,
.playlist-picker-item:hover {
  transform: translate3d(0, -2px, 0);
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 1px 0 0 rgb(var(--theme-secondary-rgb) / 0.07), inset -1px 0 0 rgb(var(--theme-primary-rgb) / 0.07);
}

.queue-item.is-current strong {
  color: var(--text);
}

.queue-item,
.playlist-picker-item {
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease, opacity 180ms ease;
}

.queue-item.is-current {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.016), rgba(255, 255, 255, 0.004)),
    rgba(8, 11, 16, 0.1);
  border-color: rgba(255, 255, 255, 0.065);
  animation: queue-current-enter 260ms ease;
}

.queue-item.is-history {
  opacity: 0.58;
}

.queue-item.is-error {
  opacity: 0.42;
  border-color: rgba(255, 120, 120, 0.12);
  background: rgba(255, 120, 120, 0.04);
}

.queue-item.is-error strong,
.queue-item.is-error span {
  color: var(--soft);
}

.queue-item.is-history strong,
.queue-item.is-history span {
  color: var(--soft);
}

.queue-section-label {
  margin: 4px 0 2px;
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--soft);
}

.queue-item img,
.playlist-picker-item img {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  object-fit: cover;
}

.lyrics-copy {
  white-space: pre-wrap;
  line-height: 1.7;
  color: var(--text);
}

.empty-state,
.empty-panel,
.loading-state {
  padding: 28px;
  border-radius: 20px;
  text-align: center;
}

.floating-menu,
.toast {
  position: fixed;
  z-index: 258;
}

.floating-menu {
  min-width: 220px;
  max-width: min(320px, calc(100vw - 28px));
  max-height: calc(100vh - 28px);
  padding: 10px;
  border-radius: 20px;
  overflow: hidden auto;
  overscroll-behavior: contain;
  box-shadow: var(--glass-shadow-strong);
}

.floating-menu-item {
  width: 100%;
  display: block;
  padding: 11px 12px;
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  border: none;
  text-align: left;
}

.floating-menu-item:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.008)),
    rgba(8, 11, 16, 0.12);
}

.floating-menu-title {
  padding: 8px 12px 10px;
  color: var(--muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 18% 0%, rgb(var(--theme-primary-rgb) / 0.065), transparent 24%),
    radial-gradient(circle at 82% 0%, rgb(var(--theme-secondary-rgb) / 0.085), transparent 22%),
    rgba(4, 6, 8, 0.42);
  backdrop-filter: blur(8px) saturate(124%);
  -webkit-backdrop-filter: blur(8px) saturate(124%);
  display: grid;
  place-items: center;
  padding: 20px;
  z-index: 140;
}

@keyframes queue-current-enter {
  0% {
    transform: translateX(8px);
    background: rgb(var(--theme-primary-rgb) / 0.02);
  }

  100% {
    transform: translateX(0);
    background: rgb(var(--theme-primary-rgb) / 0.09);
  }
}

.modal-card {
  width: min(720px, 100%);
  padding: 22px;
}

.modal-card.narrow {
  width: min(520px, 100%);
}

.modal-title {
  margin: 8px 0 0;
  font-size: 2rem;
}

.form-field {
  gap: 8px;
}

.settings-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.settings-card {
  padding: 20px;
}

.settings-card h3 {
  margin-top: 0;
}

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

.theme-color-input {
  width: 100%;
  min-height: 56px;
  border-radius: 16px;
  overflow: hidden;
}

.theme-color-input::-webkit-color-swatch-wrapper {
  padding: 0;
}

.theme-color-input::-webkit-color-swatch,
.theme-color-input::-moz-color-swatch {
  border: none;
  border-radius: 12px;
}

.toast {
  left: 50%;
  bottom: 112px;
  transform: translateX(-50%);
  padding: 12px 16px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.008)),
    rgba(8, 11, 16, 0.32);
  border: var(--line) solid rgb(var(--theme-primary-rgb) / 0.13);
  backdrop-filter: blur(8px) saturate(126%);
  -webkit-backdrop-filter: blur(8px) saturate(126%);
  box-shadow: var(--glass-shadow);
}

.profile-link {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.032), rgba(255, 255, 255, 0.008)),
    rgba(8, 11, 16, 0.12);
  border: var(--line) solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), inset 1px 0 0 rgb(var(--theme-secondary-rgb) / 0.06), inset -1px 0 0 rgb(var(--theme-primary-rgb) / 0.055), 0 10px 22px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(8px) saturate(128%);
  -webkit-backdrop-filter: blur(8px) saturate(128%);
  overflow: hidden;
}

.cover-art-fallback span {
  font-weight: 800;
  color: white;
}

.spinner {
  width: 34px;
  height: 34px;
  margin: 0 auto 10px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.15);
  border-top-color: var(--accent);
  animation: spin 0.9s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 1260px) {
  .app-shell {
    grid-template-columns: var(--max-sidebar) minmax(0, 1fr);
  }

  .app-shell.queue-open {
    grid-template-columns: var(--max-sidebar) minmax(0, 1fr);
  }

  .app-shell.sidebar-expanded,
  .app-shell.sidebar-expanded.queue-open {
    grid-template-columns: var(--expanded-sidebar) minmax(0, 1fr);
  }

  .right-panel {
    position: fixed;
    right: 18px;
    top: 18px;
    bottom: 96px;
    height: auto;
    width: min(calc(100vw - 36px), var(--max-right-panel));
    transform: translateX(108%);
    transition: transform 180ms ease;
    z-index: 40;
  }

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

@media (max-width: 1040px) {
  .hero-panel,
  .settings-grid {
    grid-template-columns: 1fr;
  }

  .track-head {
    display: none;
  }

  .track-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .track-album,
  .track-status,
  .track-dates,
  .track-meta {
    padding-left: 90px;
  }

  .player-bar {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .player-extra {
    justify-content: space-between;
  }

  .search-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 980px) {
  html,
  body {
    scroll-padding-bottom: calc(324px + env(safe-area-inset-bottom, 0px));
  }

  .app-shell {
    grid-template-columns: minmax(0, 1fr);
    padding: 12px 12px calc(324px + env(safe-area-inset-bottom, 0px));
  }

  .app-shell.sidebar-expanded,
  .app-shell.queue-open,
  .app-shell.sidebar-expanded.queue-open {
    grid-template-columns: minmax(0, 1fr);
  }

  .sidebar {
    display: none;
  }

  .window-controls {
    display: none;
  }

  .mobile-bottom-nav.mobile-only {
    display: grid;
  }

  .topbar {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .topbar,
  .topbar-start,
  .topbar-actions {
    flex-wrap: wrap;
  }

  .topbar-actions {
    display: none;
  }

  .nav-popover {
    left: -6px;
    width: min(340px, calc(100vw - 24px));
  }

  .player-bar {
    left: 12px;
    right: 12px;
    bottom: calc(var(--mobile-nav-height) + var(--mobile-nav-gap) + 12px + env(safe-area-inset-bottom, 0px));
    padding: 12px;
  }

  .right-panel-body {
    padding-bottom: calc(214px + env(safe-area-inset-bottom, 0px));
    scroll-padding-bottom: calc(214px + env(safe-area-inset-bottom, 0px));
  }

  .player-track {
    gap: 12px;
  }

  .player-track .cover-art {
    width: 52px;
    height: 52px;
  }

  .player-track-actions .icon-circle:nth-child(2),
  .volume-stack {
    display: none;
  }

  .player-buttons {
    gap: 6px;
  }

  .player-buttons .icon-circle,
  .player-utility-buttons .icon-circle,
  .player-track-actions .icon-circle {
    width: 36px;
    min-width: 36px;
    min-height: 36px;
  }

  .play-button {
    width: 42px;
    min-width: 42px;
    min-height: 42px;
  }

  .player-extra {
    justify-content: space-between;
  }

  .mobile-volume-field {
    display: none;
  }

  .track-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 10px 12px;
    align-items: center;
  }

  .track-album,
  .track-status,
  .track-dates {
    display: none;
  }

  .track-main {
    grid-template-columns: 34px 34px minmax(0, 1fr);
    gap: 8px;
  }

  .row-play,
  .cover-art.tiny {
    width: 34px;
    height: 34px;
  }

  .track-link {
    font-size: 0.9rem;
    line-height: 1.18;
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .track-subcopy {
    font-size: 0.76rem;
  }

  .track-meta {
    padding-left: 0;
    justify-content: flex-end;
    align-self: center;
  }

  .track-meta > span,
  .track-actions [data-action="toggle-like"],
  .track-actions [data-action="open-playlist-picker"],
  .track-actions [data-action="download-track"] {
    display: none;
  }

  .track-actions {
    gap: 0;
  }

  .track-actions .icon-circle {
    width: 34px;
    min-width: 34px;
    min-height: 34px;
  }

  .right-panel {
    left: 12px;
    right: 12px;
    top: 12px;
    bottom: calc(var(--mobile-nav-height) + 212px + env(safe-area-inset-bottom, 0px));
    width: auto;
  }

  .search-grid,
  .inline-toolbar {
    grid-template-columns: 1fr;
    flex-direction: column;
  }

  .inline-toolbar-actions {
    margin-left: 0;
    width: 100%;
  }

  .inline-toolbar-actions > *,
  .search-toolbar-actions > * {
    width: 100%;
    justify-content: center;
  }

  .mini-card-grid {
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 10px;
  }

  .mini-card {
    min-height: 0;
    gap: 8px;
    padding: 8px;
    border-radius: 14px;
  }

  .mini-card-art {
    border-radius: 12px;
  }

  .mini-card-play {
    right: 6px;
    bottom: 6px;
  }

  .mini-card-play.row-play {
    width: 32px;
    height: 32px;
  }

  .mini-card-copy {
    gap: 4px;
  }

  .mini-card-title {
    font-size: 0.82rem;
    -webkit-line-clamp: 2;
  }

  .mini-card-subtitle,
  .mini-card-meta {
    font-size: 0.72rem;
    -webkit-line-clamp: 1;
  }

  .mini-card-foot {
    display: none;
  }

  .artist-grid,
  .playlist-grid,
  .era-grid {
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  }

  .toast {
    bottom: calc(var(--mobile-nav-height) + 226px + env(safe-area-inset-bottom, 0px));
  }
}