:root {
  color-scheme: dark;
  --bg: #000000;
  --sidebar: #050505;
  --surface: #121212;
  --surface-raised: #181818;
  --surface-hover: #282828;
  --surface-soft: #242424;
  --text: #f6f6f6;
  --muted: #b3b3b3;
  --muted-dark: #767676;
  --line: rgba(255, 255, 255, 0.08);
  --accent: #1ed760;
  --accent-strong: #1fdf64;
  --accent-ink: #07180c;
  --danger: #ff6b6b;
  --player-height: 118px;
  --radius: 10px;
}

* { box-sizing: border-box; }

html, body, .app-shell, .workspace, main, .content-grid, .results-panel,
.browse-layout, .browse-main, .results-list {
  min-width: 0;
  max-width: 100%;
  overflow-x: clip;
}

html,
body {
  width: 100%;
  min-width: 0;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--bg);
}

body {
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button,
input { font: inherit; }

button {
  border: 0;
  color: inherit;
}

button:not(:disabled) { cursor: pointer; }

button:focus-visible,
input:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 2px;
}

button:disabled { cursor: not-allowed; opacity: 0.42; }

svg { display: block; }

.app-shell {
  display: grid;
  grid-template-columns: 256px minmax(0, 1fr);
  width: 100%;
  height: 100dvh;
  background: var(--bg);
}

.sidebar {
  position: fixed;
  z-index: 20;
  top: 0;
  bottom: 8px;
  left: 0;
  display: flex;
  flex-direction: column;
  width: 256px;
  padding: 18px 12px 14px;
  overflow: hidden;
  background: var(--sidebar);
}

.app-shell.has-player .sidebar { bottom: var(--player-height); }

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  padding: 4px 8px 22px;
  background: transparent;
  color: #ffffff;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.7px;
}

.brand-mark {
  display: flex;
  align-items: end;
  gap: 3px;
  width: 26px;
  height: 26px;
  padding: 5px;
  border-radius: 50%;
  background: var(--accent);
}

.brand-mark span {
  display: block;
  width: 3px;
  border-radius: 999px;
  background: var(--accent-ink);
}

.brand-mark span:nth-child(1) { height: 8px; }
.brand-mark span:nth-child(2) { height: 14px; }
.brand-mark span:nth-child(3) { height: 11px; }

.primary-nav,
.library-shortcuts {
  display: grid;
  gap: 4px;
}

.nav-button,
.shortcut-button {
  display: flex;
  align-items: center;
  width: 100%;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  text-align: left;
  transition: color 160ms ease, background 160ms ease;
}

.nav-button {
  gap: 16px;
  min-height: 46px;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 700;
}

.nav-button svg {
  width: 23px;
  height: 23px;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.9;
}

.nav-button:hover,
.nav-button.active,
.shortcut-button:hover { color: #ffffff; }

.nav-button.active { background: #1f1f1f; }

.sidebar-rule {
  height: 1px;
  margin: 22px 8px 14px;
  background: var(--line);
}

.shortcut-button {
  gap: 12px;
  min-height: 54px;
  padding: 5px 8px;
}

.shortcut-button strong,
.shortcut-button small { display: block; }
.shortcut-button strong { font-size: 13px; }
.shortcut-button small { margin-top: 3px; color: var(--muted-dark); font-size: 11px; }

.shortcut-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 4px;
  color: white;
  font-size: 18px;
}

.liked-icon { background: linear-gradient(135deg, #5539d1, #b4a5ff); }
.queue-icon { background: linear-gradient(135deg, #27303a, #5d6c7a); font-weight: 900; }

.sidebar-footer {
  display: grid;
  gap: 6px;
  margin-top: auto;
  padding: 14px 8px 0;
  border-top: 1px solid var(--line);
  color: var(--muted-dark);
  font-size: 11px;
}

.storage-pill,
.backend-summary,
.app-version { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.storage-pill { color: var(--muted); font-weight: 700; }
.storage-pill.error { color: var(--danger); }

.workspace {
  grid-column: 2;
  height: calc(100dvh - 8px);
  margin: 8px 8px 0 0;
  overflow: hidden;
  border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(180deg, #313131 0, var(--surface) 220px);
}

.app-shell.has-player .workspace { height: calc(100dvh - var(--player-height)); }

.topbar {
  position: sticky;
  z-index: 10;
  top: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 76px;
  padding: 14px 28px;
  background: linear-gradient(180deg, rgba(28, 28, 28, 0.98), rgba(24, 24, 24, 0.9));
  backdrop-filter: blur(12px);
}

.topbar-navigation { flex: 0 0 auto; }

.round-button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.62);
  color: #ffffff;
}

.round-button svg { width: 17px; fill: currentColor; }

.topbar-title { min-width: 0; }
h1, h2, h3 { margin: 0; line-height: 1.15; letter-spacing: -0.4px; }
h1 { font-size: clamp(22px, 2.1vw, 30px); font-weight: 800; }
h2 { font-size: 20px; font-weight: 800; }
h3 { font-size: 18px; font-weight: 800; }
.subtitle { margin: 4px 0 0; color: #d2d2d2; font-size: 12px; }

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin-left: auto;
}

.account-summary {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 8px;
  padding: 4px 5px 4px 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
}

.account-summary[hidden],
.settings-form[hidden] { display: none; }

.profile-orb {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffb86b, #e84d8a);
}

.current-user-display {
  max-width: 132px;
  overflow: hidden;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-button,
.icon-text-button,
.primary-action,
.secondary-action,
.mini-button,
.link-button,
.history-chip,
.tab-button {
  transition: transform 150ms ease, background 150ms ease, color 150ms ease, opacity 150ms ease;
}

.settings-button,
.icon-text-button {
  min-height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  background: #ffffff;
  color: #080808;
  font-size: 12px;
  font-weight: 800;
}

.icon-text-button { display: inline-flex; align-items: center; gap: 6px; background: rgba(0, 0, 0, 0.54); color: #ffffff; }
.icon-text-button svg { width: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.settings-button:hover,
.icon-text-button:hover,
.primary-action:hover:not(:disabled) { transform: scale(1.03); }

.link-button {
  min-height: 28px;
  padding: 0 7px;
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.link-button:hover { color: #ffffff; text-decoration: underline; }

main {
  height: calc(100% - 76px);
  padding: 0 28px 36px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: #5a5a5a transparent;
}

main::-webkit-scrollbar { width: 10px; }
main::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 999px; background: #666; background-clip: padding-box; }

.search-panel {
  display: grid;
  grid-template-columns: minmax(250px, 460px) 1fr;
  align-items: center;
  gap: 10px 16px;
  padding: 12px 0 20px;
}

.search-bar {
  position: relative;
  grid-row: 1 / span 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
}

.search-bar::before {
  position: absolute;
  z-index: 1;
  top: 15px;
  left: 15px;
  width: 13px;
  height: 13px;
  border: 2px solid #111;
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.search-bar::after {
  position: absolute;
  z-index: 1;
  top: 29px;
  left: 27px;
  width: 7px;
  height: 2px;
  border-radius: 2px;
  background: #111;
  content: "";
  transform: rotate(45deg);
  pointer-events: none;
}

.search-bar input {
  width: 100%;
  min-height: 44px;
  padding: 0 14px 0 42px;
  border: 0;
  border-radius: 999px;
  background: #ffffff;
  color: #161616;
  font-size: 16px;
  -webkit-appearance: none;
  appearance: none;
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
  font-weight: 600;
}

.search-bar input::placeholder { color: #5e5e5e; }
.search-bar input:focus { outline: 2px solid #ffffff; outline-offset: 2px; }

.search-bar button {
  min-width: 78px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 12px;
  font-weight: 800;
}

.search-tabs,
.heading-actions,
.entity-actions,
.results-actions-bar,
.track-actions { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }

.tab-button {
  min-height: 30px;
  padding: 0 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.11);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
}

.tab-button:hover { background: rgba(255, 255, 255, 0.19); transform: scale(1.03); }
.tab-button.active { background: #ffffff; color: #121212; }
.entity-actions .is-saved { border-color:rgba(30,215,96,.45); color:var(--accent); }
.catalog-load-more { display:grid; place-items:center; padding:20px 0 8px; }
.catalog-load-more .secondary-action { min-width:180px; }

.search-suggestion-panel { grid-column:1 / -1; padding:14px; border:1px solid rgba(255,255,255,.08); border-radius:9px; background:linear-gradient(135deg,rgba(30,215,96,.1),rgba(255,255,255,.035) 42%,rgba(255,255,255,.02)); }
.search-suggestion-panel[hidden] { display:none; }
.search-suggestion-heading { display:flex; align-items:end; justify-content:space-between; gap:12px; margin-bottom:10px; }.search-suggestion-heading .eyebrow { margin:0 0 4px; }.search-suggestion-heading h2 { margin:0; font-size:18px; }.search-suggestion-detail { max-width:190px; color:var(--muted); font-size:10px; line-height:1.25; text-align:right; }
.search-suggestion-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }.search-suggestion { display:grid; grid-template-columns:27px minmax(0,1fr); gap:8px; align-items:center; min-height:55px; padding:8px; border:1px solid rgba(255,255,255,.08); border-radius:7px; background:rgba(0,0,0,.2); color:#fff; text-align:left; transition:background 150ms ease,transform 150ms ease,border-color 150ms ease; }.search-suggestion:hover { border-color:rgba(30,215,96,.62); background:rgba(255,255,255,.09); transform:translateY(-1px); }.search-suggestion-icon { display:grid; place-items:center; width:27px; height:27px; border-radius:50%; background:rgba(30,215,96,.16); color:var(--accent); font-size:15px; font-weight:800; }.search-suggestion-content { display:grid; min-width:0; gap:2px; }.search-suggestion strong { overflow:hidden; color:#fff; font-size:11px; line-height:1.2; text-overflow:ellipsis; white-space:nowrap; }.search-suggestion small { overflow:hidden; color:var(--muted); font-size:9px; line-height:1.2; text-overflow:ellipsis; white-space:nowrap; }

.compact-heading {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.search-history-heading h2 { display: none; }
.history-list { grid-column: 2; display: flex; gap: 6px; flex-wrap: wrap; }
.history-list[hidden] { display: none; }

.history-chip {
  max-width: 180px;
  min-height: 28px;
  padding: 0 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.history-chip:hover { background: rgba(255,255,255,0.17); color: #fff; }
.history-empty { color: var(--muted-dark); font-size: 12px; }

.home-panel,
.library-panel,
.entity-panel,
.results-panel,
.recommendations-panel,
.queue-panel,
.recently-panel,
.favorites-panel { min-width: 0; }

.home-panel { padding: 0 0 34px; }
.library-panel { display:grid; gap:22px; padding:8px 0 42px; }
.library-panel[hidden] { display:none; }
#library-create-button[hidden] { display:none; }
.library-hero { display:flex; align-items:end; justify-content:space-between; gap:18px; min-height:132px; padding:26px; border-radius:8px; background:linear-gradient(125deg,#254f3b,#27332e 48%,#191919); }
.library-hero h2 { font-size:34px; }
.library-signed-out { display:grid; grid-template-columns:64px minmax(0,1fr) auto; align-items:center; gap:18px; padding:22px; border:1px solid var(--line); border-radius:8px; background:var(--surface-raised); }
.library-signin-mark,.library-avatar { display:grid; place-items:center; border-radius:50%; background:#39795a; color:#fff; font-weight:900; }
.library-signin-mark { width:64px; height:64px; font-size:28px; }
.library-signed-out h3 { font-size:18px; }
.library-signed-out p { margin:5px 0 0; color:var(--muted); font-size:12px; line-height:1.4; }
.library-content { display:grid; gap:28px; }
.library-content[hidden] { display:none; }
.library-profile { display:flex; align-items:center; gap:12px; }
.library-avatar { width:48px; height:48px; font-size:18px; }
.library-profile div { display:grid; gap:3px; }
.library-profile strong { font-size:15px; }
.library-profile small { color:var(--muted); font-size:11px; }
.library-group { min-width:0; }
.library-group-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:11px; }
.library-group-heading h3 { font-size:19px; }
.playlists-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px; }
.playlist-card,.playlist-empty-card { display:grid; min-width:0; min-height:76px; padding:9px; border-radius:7px; background:var(--surface-raised); color:#fff; text-align:left; transition:background 150ms ease,transform 150ms ease; }
.playlist-card { grid-template-columns:58px minmax(0,1fr); align-items:center; gap:11px; }
.playlist-card:hover,.playlist-empty-card:hover { background:var(--surface-hover); transform:translateY(-1px); }
.playlist-card-art,.playlist-card-art img { width:58px; height:58px; border-radius:4px; }
.playlist-card-art { display:grid; place-items:center; overflow:hidden; background:#303030; color:var(--muted); font-size:23px; }
.playlist-card-art img { display:block; object-fit:cover; }
.playlist-card-text { display:grid; min-width:0; gap:4px; }
.playlist-card-text strong,.playlist-card-text small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.playlist-card-text strong { font-size:13px; }
.playlist-card-text small { color:var(--muted); font-size:10px; }
.playlist-empty-card { grid-template-columns:44px minmax(0,1fr); grid-template-areas:"icon title" "icon detail"; align-items:center; column-gap:11px; }
.playlist-empty-card span { grid-area:icon; display:grid; place-items:center; width:44px; height:44px; border-radius:4px; background:#303030; font-size:24px; }
.playlist-empty-card strong { grid-area:title; align-self:end; font-size:13px; }
.playlist-empty-card small { grid-area:detail; align-self:start; color:var(--muted); font-size:10px; }
.library-empty-card { cursor:default; }
.library-empty-card:hover { background:var(--surface-raised); transform:none; }
.library-track-list { padding:5px 14px; border-radius:8px; background:var(--surface-raised); }
.playlist-picker-list { display:grid; gap:5px; max-height:320px; margin:14px 0; overflow-y:auto; }
.playlist-picker-item { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:46px; padding:0 12px; border-radius:6px; background:#181818; color:#fff; text-align:left; }
.playlist-picker-item:hover { background:#343434; }
.playlist-picker-item span { overflow:hidden; font-size:12px; font-weight:750; text-overflow:ellipsis; white-space:nowrap; }
.playlist-picker-item small,.optional-label { color:var(--muted); font-size:10px; font-weight:500; }
.playlist-picker-create { width:100%; }
.home-panel.is-collapsed { padding-bottom: 18px; }
.home-panel.is-collapsed .home-sections,
.home-sections[hidden] { display: none; }

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

.home-heading { margin-bottom: 18px; }
.panel-subtitle { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.35; }
.panel-subtitle.error, .status.error { color: var(--danger); }
.eyebrow, .entity-kind, .browse-left-heading { margin: 0 0 4px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }

.home-sections { display: grid; gap: 34px; }
.home-section { min-width: 0; }
.home-section-header { margin-bottom: 12px; }
.home-section-header h2 { font-size: 21px; }
.home-section-subtitle { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.home-section-body { min-width: 0; }
.home-catalog-rail { display:flex; gap:12px; margin-right:-10px; padding:2px 10px 9px 1px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity; scrollbar-width:none; }
.home-catalog-rail::-webkit-scrollbar { display:none; }
.home-catalog-card { display:grid; grid-template-rows:146px auto auto; flex:0 0 146px; gap:6px; min-width:0; padding:0 0 9px; border-radius:7px; background:transparent; color:#fff; text-align:left; scroll-snap-align:start; transition:background 150ms ease,transform 150ms ease; }
.home-catalog-card:hover,.home-catalog-card:focus-visible { background:rgba(255,255,255,.08); outline:none; transform:translateY(-2px); }
.home-catalog-card.is-playing { color:var(--accent); }
.home-catalog-art,.home-catalog-image { width:146px; height:146px; }
.home-catalog-image { display:block; border-radius:6px; object-fit:cover; }
.home-catalog-card strong,.home-catalog-card small { margin:0 8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.home-catalog-card strong { align-self:end; font-size:12px; line-height:1.25; }
.home-catalog-card small { color:var(--muted); font-size:10px; }
.home-resume-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.home-resume-grid.has-single-item { grid-template-columns: minmax(0, 1fr); }
.home-resume-tile { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 9px; align-items: center; min-height: 62px; padding: 7px; overflow: hidden; border-radius: 6px; background: rgba(255,255,255,.075); color: #fff; text-align: left; transition: background 160ms ease, transform 160ms ease; }
.home-resume-tile:hover, .home-resume-tile:focus-visible { background: rgba(255,255,255,.14); outline: none; transform: translateY(-1px); }
.home-resume-tile.is-playing { background: rgba(30,215,96,.14); }
.home-resume-art, .home-resume-image { width: 48px; height: 48px; }
.home-resume-image { display: block; border-radius: 3px; object-fit: cover; }
.home-resume-details { min-width: 0; }
.home-resume-title, .home-resume-artist { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-resume-title { color: #fff; font-size: 12px; font-weight: 800; line-height: 1.25; }
.home-resume-artist { margin-top: 3px; color: var(--muted); font-size: 10px; }
.home-start-section { padding: 17px; border: 1px solid rgba(255,255,255,.07); border-radius: 8px; background: linear-gradient(135deg, rgba(46,46,46,.92), rgba(24,24,24,.94)); }
.home-start-section .home-section-header { margin-bottom: 13px; }
.home-search-cta { min-height: 42px; padding: 0 18px; border-radius: 999px; background: #fff; color: #111; font-size: 13px; font-weight: 850; }
.home-search-cta::before { margin-right: 8px; color: #444; content: "⌕"; font-size: 20px; vertical-align: -1px; }
.home-shortcuts { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.home-shortcut { min-height: 30px; padding: 0 12px; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; background: rgba(255,255,255,.08); color: #fff; font-size: 11px; font-weight: 750; transition: background 160ms ease; }
.home-shortcut:hover { background: rgba(255,255,255,.16); }
.home-feature-section .home-section-header { margin-bottom: 11px; }
.home-feature-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; min-height: 156px; overflow: hidden; border-radius: 8px; box-shadow: inset 0 1px rgba(255,255,255,.1); }
.home-feature-card::before { position: absolute; top: -80px; right: -30px; width: 230px; height: 230px; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; box-shadow: 0 0 0 32px rgba(255,255,255,.035), 0 0 0 64px rgba(255,255,255,.025); content: ""; transform: rotate(-18deg); }
.home-feature-content { position: relative; z-index: 1; display: grid; justify-items: start; gap: 6px; min-width: 0; padding: 18px; background: transparent; color: #fff; text-align: left; }
.home-feature-kind { color: rgba(255,255,255,.72); font-size: 10px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.home-feature-title { max-width: 440px; overflow: hidden; font-size: clamp(22px, 2.5vw, 31px); line-height: 1.05; text-overflow: ellipsis; white-space: nowrap; }
.home-feature-subtitle { max-width: 490px; overflow: hidden; color: rgba(255,255,255,.77); font-size: 12px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.home-feature-play { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 7px; min-height: 38px; margin: 0 17px 17px 0; padding: 0 16px; border-radius: 999px; background: #fff; color: #111; font-size: 12px; font-weight: 850; transition: transform 160ms ease; }
.home-feature-play:hover { transform: scale(1.04); }
.home-feature-play span { font-size: 11px; }
.home-track-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.home-track-row { display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 65px; padding: 7px 4px; border-radius: 5px; color: #fff; transition: background 150ms ease; }
.home-track-row:hover, .home-track-row:focus-visible { background: rgba(255,255,255,.1); outline: none; }
.home-track-row.is-playing { background: rgba(30,215,96,.11); }
.home-track-art, .home-track-image { width: 50px; height: 50px; }
.home-track-image { display: block; border-radius: 3px; object-fit: cover; }
.home-track-content { min-width: 0; }
.home-track-title { overflow: hidden; color: #fff; font-size: 13px; font-weight: 750; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.home-track-row.is-playing .home-track-title { color: var(--accent); }
.home-track-meta { margin-top: 4px; overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.home-track-row .result-actions { grid-area: auto; }
.home-quiet-status { margin: 0; color: var(--muted); font-size: 12px; }
.home-loading-grid { pointer-events: none; }
.home-loading-tile { min-height: 62px; border-radius: 6px; background: linear-gradient(100deg, #242424 20%, #333 38%, #242424 56%); background-size: 200% 100%; animation: home-shimmer 1.3s linear infinite; }
@keyframes home-shimmer { to { background-position: -200% 0; } }
.discover-section { min-width: 0; }
.discover-section-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.discover-section h3 { font-size: 21px; }
.discover-toggle { font-size: 11px; }

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

.discover-card {
  position: relative;
  display: grid;
  align-content: end;
  gap: 5px;
  min-height: 202px;
  padding: 14px;
  overflow: hidden;
  border-radius: 7px;
  background: var(--surface-raised);
  color: #ffffff;
  text-align: left;
  transition: background 180ms ease, transform 180ms ease;
}

.discover-card::before {
  position: absolute;
  top: 18px;
  right: 16px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(255,255,255,0.14));
  content: "";
  transform: rotate(18deg);
}

.discover-card::after {
  position: absolute;
  top: 51px;
  right: 43px;
  width: 42px;
  height: 42px;
  border: 7px solid rgba(0,0,0,0.28);
  border-radius: 50%;
  content: "";
}

.discover-card:hover { background: var(--surface-hover); transform: translateY(-3px); }
.discover-card > * { position: relative; z-index: 1; }
.discover-kind { justify-self: start; margin-bottom: auto; padding: 4px 7px; border-radius: 999px; background: rgba(0,0,0,0.34); color: rgba(255,255,255,0.92); font-size: 10px; font-weight: 800; }
.discover-title { font-size: 15px; font-weight: 800; line-height: 1.22; overflow-wrap: anywhere; }
.discover-subtitle { color: rgba(255,255,255,0.72); font-size: 12px; line-height: 1.3; overflow-wrap: anywhere; }
.accent-teal, .accent-emerald, .accent-green { background: linear-gradient(145deg, #196f56, #102f29); }
.accent-blue, .accent-sky, .accent-cyan { background: linear-gradient(145deg, #205fa6, #172941); }
.accent-indigo, .accent-violet, .accent-purple { background: linear-gradient(145deg, #7049ad, #2d214d); }
.accent-amber, .accent-orange, .accent-lime { background: linear-gradient(145deg, #b4641e, #49270e); }
.accent-rose, .accent-red { background: linear-gradient(145deg, #ae3956, #4b1725); }
.accent-slate, .accent-gray { background: linear-gradient(145deg, #4b6977, #203038); }

.entity-panel {
  margin: 2px 0 28px;
  padding: 24px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, #384242, #1e2423 56%, #151515);
}

.entity-header { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: start; margin-bottom: 18px; }
.entity-header .link-button { align-self: start; color: #ffffff; background: rgba(0,0,0,0.34); }
.entity-kind { color: rgba(255,255,255,0.7); }
.entity-header h2 { font-size: clamp(26px, 4vw, 42px); overflow-wrap: anywhere; }
.entity-header p { margin: 6px 0 0; color: rgba(255,255,255,0.76); overflow-wrap: anywhere; }
.entity-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; max-width: 560px; }
.entity-search input { min-height: 38px; padding: 0 12px; border: 1px solid rgba(255,255,255,0.16); border-radius: 5px; background: rgba(0,0,0,0.24); color: #fff; }

.primary-action,
.secondary-action,
.mini-button,
.primary-link {
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}
.primary-action, .primary-link { display: inline-grid; place-items: center; background: var(--accent); color: var(--accent-ink); text-decoration: none; }
.primary-link.disabled { opacity: 0.55; }
.secondary-action, .mini-button { background: rgba(255,255,255,0.12); color: #ffffff; }
.secondary-action:hover:not(:disabled), .mini-button:hover:not(:disabled) { background: rgba(255,255,255,0.22); }

.content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  gap: 28px;
  align-items: start;
  padding-bottom: 32px;
}

.content-grid.browse-mode { grid-template-columns: minmax(0, 1fr); }
.content-grid.browse-mode .side-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.side-panels { display: grid; gap: 24px; }

.results-panel { padding-top: 4px; }
.status { max-width: 42%; color: var(--muted); font-size: 12px; text-align: right; }
.results-actions-bar { margin: -3px 0 12px; }
.results-actions-bar[hidden] { display: none; }
.results-list, .recommendations-list, .track-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }

.browse-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.browse-layout.has-left { grid-template-columns: 190px minmax(0, 1fr); }
.browse-left { min-width: 0; padding-right: 16px; border-right: 1px solid var(--line); }
.browse-left[hidden] { display: none; }
.entity-results-list { display: grid; gap: 8px; }
.entity-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(144px, 1fr)); gap: 9px; }
.browse-left .entity-card-grid { grid-template-columns: 1fr; }
.entity-card {
  display: grid;
  gap: 8px;
  min-height: 104px;
  padding: 10px;
  border-radius: 6px;
  background: var(--surface-raised);
  color: #fff;
  text-align: left;
}
.entity-card:hover { background: var(--surface-hover); }
.entity-avatar { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, #737373, #2c2c2c); color: #fff; font-weight: 800; }
.collection-card { grid-template-columns: 58px minmax(0, 1fr); align-items: center; min-height: 66px; }
.entity-card-image-wrap, .entity-card-image { width: 58px; height: 58px; }
.entity-card-image { display: block; object-fit: cover; border-radius: 3px; }
.entity-card-title { font-size: 12px; font-weight: 800; line-height: 1.28; overflow-wrap: anywhere; }
.entity-card-meta { margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.25; overflow-wrap: anywhere; }
.browse-nav { display: grid; gap: 6px; }
.browse-nav-button { width: 100%; min-height: 46px; padding: 8px; border-radius: 5px; background: var(--surface-raised); color: #fff; text-align: left; }
.browse-nav-button:hover, .browse-nav-button.active { background: var(--surface-hover); }
.browse-nav-label { display: block; font-size: 12px; font-weight: 800; }
.browse-nav-description { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
.load-more-button { justify-self: start; }

.result-item {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 65px;
  padding: 8px;
  border-radius: 5px;
  color: #ffffff;
  transition: background 140ms ease;
}

.result-item:hover, .result-item:focus-visible { background: rgba(255,255,255,0.11); outline: none; }
.result-item.is-loading { cursor: progress; opacity: 0.55; }
.result-item { touch-action: pan-y; }
.result-item.is-swipe-queue::before, .result-item.is-swipe-save::before { position:absolute; z-index:0; top:4px; right:3px; bottom:4px; left:3px; display:flex; align-items:center; padding:0 15px; border-radius:5px; color:#07180c; font-size:10px; font-weight:900; letter-spacing:.03em; content:""; }.result-item.is-swipe-queue::before { justify-content:flex-start; background:var(--accent); content:"ADD TO QUEUE"; }.result-item.is-swipe-save::before { justify-content:flex-end; background:#fff; content:"LIKE SONG"; }.result-item.is-swipe-queue > *, .result-item.is-swipe-save > * { position:relative; z-index:1; }
.thumbnail-wrap, .thumbnail { width: 48px; height: 48px; }
.thumbnail { display: block; border-radius: 3px; background: #343434; object-fit: cover; }
.placeholder { display: grid; place-items: center; color: var(--muted); font-size: 10px; }
.result-content { min-width: 0; }
.track-title-row { display: flex; align-items: center; min-width: 0; gap: 7px; }
.result-title, .compact-title { color: #fff; font-size: 13px; font-weight: 700; line-height: 1.25; overflow: hidden; overflow-wrap: anywhere; text-overflow: ellipsis; white-space: nowrap; }
.result-title:hover { color: var(--accent); }
.result-meta, .compact-meta { margin-top: 4px; color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.result-views { margin-top: 2px; color: var(--muted-dark); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.result-actions { display: flex; align-items: center; gap: 4px; opacity: 1; }
.row-icon-button {
  position: relative;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
}
.row-icon-button:hover,
.row-icon-button:focus-visible { background: rgba(255,255,255,0.12); color: #ffffff; outline: none; }
.more-button::before { content: "•••"; font-size: 16px; font-weight: 900; letter-spacing: 1px; transform: translateY(-3px); }
.add-button::before { display:none; }
.add-button::after { display:none; }
.add-button.is-saved { color: var(--accent); }
.add-button { font-size: 24px; font-weight: 400; line-height: 1; }
.track-menu-shell { position: relative; }
.track-overflow-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 7px);
  right: 0;
  display: grid;
  min-width: 196px;
  padding: 5px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 7px;
  background: #2a2a2a;
  box-shadow: 0 12px 30px rgba(0,0,0,0.48);
}
.track-overflow-menu[hidden] { display: none; }
.track-menu-action { min-height: 34px; padding: 0 10px; border-radius: 4px; background: transparent; color: #ffffff; font-size: 12px; font-weight: 650; text-align: left; }
.track-menu-action:hover { background: rgba(255,255,255,0.12); }
.result-item.is-playing, .compact-track.is-playing, .recommendation-track.is-playing { background: rgba(30,215,96,0.11); }
.result-item.is-playing .result-title, .compact-track.is-playing .compact-title, .recommendation-track.is-playing .recommendation-title { color: var(--accent); }

.search-top-result { padding:4px 0 13px; }.search-top-eyebrow { margin:0 0 7px; color:var(--muted); font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }.search-top-card { display:grid; grid-template-columns:104px minmax(0,1fr) auto; gap:16px; align-items:center; min-height:130px; padding:13px; border-radius:9px; background:linear-gradient(115deg,#343434,#222 52%,#1a1a1a); }.search-top-art,.search-top-image { width:104px; height:104px; }.search-top-image { display:block; border-radius:5px; object-fit:cover; }.search-top-content { min-width:0; }.search-top-content h3 { margin:0; overflow:hidden; color:#fff; font-size:23px; line-height:1.1; text-overflow:ellipsis; white-space:nowrap; }.search-top-content p { margin:6px 0 0; overflow:hidden; color:var(--muted); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }.search-top-views { display:block; margin-top:5px; color:var(--muted-dark); font-size:10px; }.search-top-actions { display:flex; align-items:center; gap:5px; }.search-top-play { display:inline-flex; align-items:center; gap:7px; min-height:38px; padding:0 16px; border-radius:999px; background:#fff; color:#111; font-size:12px; font-weight:900; }.search-top-play:hover { transform:scale(1.03); }.search-top-actions .result-actions { gap:0; }
.search-lane { padding:13px 0 6px; }.search-lane-header { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:5px; }.search-lane-header h3 { margin:0; color:#fff; font-size:18px; }.search-lane-header span { color:var(--muted-dark); font-size:10px; text-align:right; }.search-track-lane { display:grid; gap:2px; margin:0; padding:0; list-style:none; }.search-card-rail { display:flex; gap:9px; padding:2px 1px 8px; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; }.search-card-rail::-webkit-scrollbar { display:none; }.search-explore-card { display:grid; flex:0 0 134px; min-height:150px; gap:7px; padding:10px; border-radius:7px; background:var(--surface-raised); color:#fff; text-align:left; }.search-explore-card:hover { background:var(--surface-hover); }.search-explore-card strong { overflow:hidden; font-size:12px; line-height:1.25; text-overflow:ellipsis; white-space:nowrap; }.search-explore-card small { overflow:hidden; color:var(--muted); font-size:10px; text-overflow:ellipsis; white-space:nowrap; }.search-artist-card { grid-template-rows:1fr auto auto; }.search-artist-avatar { display:grid; place-items:center; width:64px; height:64px; border-radius:50%; background:linear-gradient(135deg,#5d5d5d,#262626); color:#fff; font-size:24px; font-weight:900; }.search-collection-card { grid-template-rows:92px auto auto; }.search-collection-art,.search-collection-image { width:100%; height:92px; }.search-collection-image { display:block; border-radius:4px; object-fit:cover; }
.search-recovery { padding:24px 16px; border:1px solid rgba(255,255,255,.1); border-radius:8px; background:var(--surface-raised); }.search-recovery h3 { margin:0; font-size:19px; }.search-recovery p { margin:6px 0 14px; color:var(--muted); font-size:12px; }.search-recovery-actions { display:flex; gap:7px; flex-wrap:wrap; }
.search-artist-image { display:block; width:64px; height:64px; border-radius:50%; object-fit:cover; }

.playing-indicator { display: none; align-items: end; flex: 0 0 auto; gap: 2px; width: 14px; height: 14px; }
.is-playing .playing-indicator { display: inline-flex; }
.playing-bar { width: 2px; height: 5px; border-radius: 99px; background: var(--accent); animation: playing-bars 0.9s ease-in-out infinite; }
.playing-bar:nth-child(2) { animation-delay: 0.15s; }.playing-bar:nth-child(3) { animation-delay: 0.3s; }
@keyframes playing-bars { 0%,100% { height: 5px; opacity: .55; } 50% { height: 13px; opacity: 1; } }

.recommendations-panel, .queue-panel, .recently-panel, .favorites-panel { padding: 16px; border-radius: 8px; background: var(--surface-raised); }
.recommendation-track { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 9px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.recommendation-track:last-child { border-bottom: 0; }
.recommendation-thumb-wrap, .recommendation-thumb { width: 46px; height: 46px; }
.recommendation-thumb { display: block; border-radius: 3px; object-fit: cover; }
.recommendation-content { min-width: 0; }
.recommendation-title { color: #fff; font-size: 12px; font-weight: 700; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recommendation-meta, .recommendation-reason { margin-top: 3px; color: var(--muted); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recommendation-reason { color: #80cf9c; }
.recommendation-actions { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 4px; }
.recommendation-actions .mini-button, .track-actions .mini-button { min-width: 0; min-height: 27px; padding: 0 4px; font-size: 10px; }

.compact-track { padding: 9px 0; border-bottom: 1px solid var(--line); }
.compact-track:last-child { border-bottom: 0; }
.compact-track-content { min-width: 0; }
.track-actions { margin-top: 7px; }
.empty-item { padding: 15px 0; color: var(--muted); font-size: 12px; }
.count-pill { display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 8px; border-radius: 999px; background: #303030; color: #fff; font-size: 11px; font-weight: 800; }

.loading-card { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 13px; align-items: center; min-height: 76px; padding: 10px 0; }
.loading-spinner { width: 30px; height: 30px; border: 3px solid rgba(255,255,255,0.14); border-top-color: var(--accent); border-radius: 50%; animation: loading-spin .85s linear infinite; }
.loading-content, .loading-lines { display: grid; gap: 7px; }.loading-label { font-size: 12px; font-weight: 700; }.loading-line { display:block; height: 7px; border-radius: 10px; background: #333; }.loading-line.short { width: 68%; }.loading-line.tiny { width: 42%; }
@keyframes loading-spin { to { transform: rotate(360deg); } }

.player-panel {
  position: fixed;
  z-index: 40;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: 72px minmax(190px, 1fr) minmax(360px, 560px) minmax(150px, 1fr);
  grid-template-areas: "art info controls actions" "art info progress actions";
  align-items: center;
  gap: 4px 16px;
  min-height: var(--player-height);
  padding: 12px 22px;
  border-top: 1px solid rgba(255,255,255,.13);
  background: linear-gradient(135deg,rgba(36,36,36,.98),rgba(18,18,18,.98));
  box-shadow: 0 -14px 36px rgba(0,0,0,.28);
}
.player-panel[hidden] { display: none; }
.now-art, .now-art-image { grid-area: art; width: 72px; height: 72px; border-radius: 8px; }.now-art { overflow:hidden; background:#333; }.now-art-image { display:block; object-fit:cover; }
.now-playing { grid-area:info; min-width:0; padding:0; background:transparent; text-align:left; }.now-playing:not(:disabled):hover .now-title { text-decoration:underline; }.now-label { color:var(--muted-dark); font-size:9px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }.now-title { margin-top:3px; overflow:hidden; color:#fff; font-size:12px; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }.now-artist, .now-duration { margin-top:3px; overflow:hidden; color:var(--muted); font-size:11px; text-overflow:ellipsis; white-space:nowrap; }.now-duration { display:none; }
.player-controls { grid-area: controls; display:grid; grid-template-columns:30px 34px 30px; gap:9px; justify-content:center; align-items:center; }.player-icon-button { position:relative; display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; background:transparent; color:#fff; }.toggle-button { width:34px; height:34px; background:#fff; color:#000; }.toggle-button:hover:not(:disabled) { transform:scale(1.06); }.toggle-button::before { width:0; height:0; margin-left:2px; border-top:7px solid transparent; border-bottom:7px solid transparent; border-left:11px solid currentColor; content:""; }.toggle-button.is-playing::before, .toggle-button.is-playing::after { display:block; width:4px; height:14px; margin:0; border:0; border-radius:1px; background:currentColor; content:""; }.toggle-button.is-playing::before { transform:translateX(-2px); }.toggle-button.is-playing::after { transform:translateX(2px); }.previous-button::before,.next-button::after { width:2px; height:13px; border-radius:2px; background:currentColor; content:""; }.previous-button::after,.next-button::before { width:0; height:0; border-top:7px solid transparent; border-bottom:7px solid transparent; content:""; }.previous-button::after { border-right:10px solid currentColor; }.next-button::before { border-left:10px solid currentColor; }.previous-button::before { margin-right:-1px; }.next-button::after { margin-left:-1px; }
.player-progress { grid-area: progress; display:grid; grid-template-columns:36px minmax(0,1fr) 36px; gap:7px; align-items:center; }.player-time { color:var(--muted); font-size:10px; text-align:center; }.player-seek { --seek-progress:0%; width:100%; height:15px; margin:0; cursor:pointer; accent-color:var(--accent); }.player-seek::-webkit-slider-runnable-track { height:4px; border-radius:99px; background:linear-gradient(to right,var(--accent) 0,var(--accent) var(--seek-progress),#555 var(--seek-progress),#555 100%); }.player-seek::-webkit-slider-thumb { width:10px; height:10px; margin-top:-3px; border-radius:50%; background:#fff; appearance:none; }.player-seek::-moz-range-track { height:4px; border-radius:99px; background:#555; }.player-seek::-moz-range-progress { height:4px; border-radius:99px; background:var(--accent); }
.player-actions { grid-area: actions; display:flex; justify-content:flex-end; gap:7px; }.player-actions .mini-button { min-width:58px; }

/* Larger, touch-friendly transport controls. These overrides keep the same
   markup usable in desktop browsers and Capacitor WebViews. */
.player-controls { grid-template-columns:48px 58px 48px; gap:14px; }
.player-icon-button { width:48px; height:48px; background:rgba(255,255,255,.08); transition:transform 150ms ease,background 150ms ease; }
.player-icon-button:hover:not(:disabled) { background:rgba(255,255,255,.17); transform:scale(1.06); }
.toggle-button { width:58px; height:58px; background:var(--accent); color:var(--accent-ink); box-shadow:0 5px 18px rgba(30,215,96,.22); }
.toggle-button:hover:not(:disabled) { background:var(--accent-strong); transform:scale(1.08); }
.toggle-button::before { border-top-width:10px; border-bottom-width:10px; border-left-width:15px; }
.toggle-button.is-playing::before,.toggle-button.is-playing::after { width:5px; height:21px; }
.previous-button::before,.next-button::after { height:19px; }
.previous-button::after,.next-button::before { border-top-width:10px; border-bottom-width:10px; }
.previous-button::after { border-right-width:14px; }.next-button::before { border-left-width:14px; }
.player-progress { grid-template-columns:42px minmax(0,1fr) 42px; gap:9px; }
.player-time { font-size:11px; }
.player-seek { height:22px; }
.player-seek::-webkit-slider-runnable-track { height:6px; }
.player-seek::-webkit-slider-thumb { width:15px; height:15px; margin-top:-4px; box-shadow:0 1px 5px rgba(0,0,0,.5); }
.player-seek::-moz-range-track,.player-seek::-moz-range-progress { height:6px; }
.player-seek::-moz-range-thumb { width:15px; height:15px; border:0; }
audio { display:none; }

.lyrics-panel[hidden] { display:none; }
.lyrics-panel { position:fixed; z-index:100; inset:0; display:grid; grid-template-rows:auto minmax(0,1fr) auto; overflow:hidden; background:radial-gradient(circle at 82% -10%,#385944 0,transparent 36%),linear-gradient(180deg,#252525 0,#121212 36%,#090909 100%); animation:lyrics-panel-in 180ms ease-out; }
@keyframes lyrics-panel-in { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
.lyrics-header { display:grid; grid-template-columns:48px minmax(0,1fr) 48px; gap:12px; align-items:center; min-height:90px; padding:18px max(24px,calc((100vw - 1020px) / 2)); border-bottom:1px solid rgba(255,255,255,.06); background:rgba(16,16,16,.33); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
.lyrics-close-button,.lyrics-toggle-button { display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.1); color:#fff; transition:background 150ms ease,transform 150ms ease; }.lyrics-close-button { font-size:30px; font-weight:300; line-height:1; }.lyrics-close-button:hover,.lyrics-toggle-button:hover:not(:disabled) { background:rgba(255,255,255,.18); transform:scale(1.04); }.lyrics-toggle-button { position:relative; justify-self:end; }.lyrics-toggle-button::before { width:0; height:0; margin-left:3px; border-top:8px solid transparent; border-bottom:8px solid transparent; border-left:12px solid currentColor; content:""; }.lyrics-toggle-button.is-playing::before,.lyrics-toggle-button.is-playing::after { width:4px; height:16px; margin:0; border:0; border-radius:2px; background:currentColor; content:""; }.lyrics-toggle-button.is-playing::before { transform:translateX(-3px); }.lyrics-toggle-button.is-playing::after { transform:translateX(3px); }
.lyrics-track-header { min-width:0; }.lyrics-kicker { margin:0; color:var(--accent); font-size:10px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }.lyrics-track-header h2 { margin:3px 0 0; overflow:hidden; color:#fff; font-size:16px; line-height:1.18; text-overflow:ellipsis; white-space:nowrap; }.lyrics-artist { margin:2px 0 0; overflow:hidden; color:var(--muted); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.lyrics-scroll { min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-color:rgba(255,255,255,.3) transparent; scroll-behavior:smooth; }.lyrics-state { width:min(100% - 48px,780px); margin:0 auto; padding:calc(18vh - 20px) 0; color:var(--muted); font-size:16px; line-height:1.5; text-align:center; }.lyrics-lines { display:grid; gap:8px; width:min(100% - 48px,820px); margin:0 auto; padding:20vh 0 32vh; list-style:none; }.lyrics-line { margin:0; }.lyrics-line-button,.lyrics-line-static { width:100%; padding:5px 0; background:transparent; color:rgba(255,255,255,.38); font-size:clamp(27px,4vw,46px); font-weight:800; letter-spacing:-.04em; line-height:1.13; text-align:left; transition:color 180ms ease,transform 180ms ease,opacity 180ms ease; }.lyrics-line-static { display:block; color:rgba(255,255,255,.76); white-space:pre-wrap; }.lyrics-line-button:hover,.lyrics-line-button:focus-visible { color:rgba(255,255,255,.76); }.lyrics-line.is-current .lyrics-line-button { color:#fff; transform:scale(1.012); transform-origin:left center; }.lyrics-line.is-past .lyrics-line-button { color:rgba(255,255,255,.56); }
.lyrics-footer { display:flex; justify-content:space-between; gap:16px; padding:14px max(24px,calc((100vw - 1020px) / 2)) calc(14px + env(safe-area-inset-bottom)); border-top:1px solid rgba(255,255,255,.06); background:rgba(12,12,12,.82); color:var(--muted-dark); font-size:11px; backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }

.settings-panel[hidden] { display: none; }
.settings-panel { position:fixed; z-index:80; inset:0; display:grid; place-items:center; padding:16px; background:rgba(0,0,0,.7); backdrop-filter:blur(5px); }
.settings-card { width:min(100%,420px); padding:22px; border:1px solid rgba(255,255,255,.1); border-radius:10px; background:#242424; box-shadow:0 24px 60px rgba(0,0,0,.5); }.settings-subtitle { margin:5px 0 0; color:var(--muted); font-size:12px; }.settings-form { display:grid; gap:9px; margin-top:17px; }.settings-form label { color:#fff; font-size:12px; font-weight:700; }.settings-form input { min-height:42px; padding:0 12px; border:1px solid #777; border-radius:5px; background:#121212; color:#fff; }.settings-form input:focus { border-color:#fff; outline:0; box-shadow:0 0 0 2px #fff; }.settings-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:6px; }.settings-status { min-height:18px; color:var(--muted); font-size:12px; }.settings-status.error { color:var(--danger); }.auth-tabs { display:flex; gap:8px; margin-top:18px; }.auth-tabs .tab-button { flex:1; }
.playback-quality-fieldset { display:grid; gap:8px; margin:8px 0 1px; padding:0; border:0; }.playback-quality-fieldset legend { padding:0; color:#fff; font-size:12px; font-weight:700; }.playback-quality-hint { margin:0; color:var(--muted); font-size:11px; line-height:1.35; }.playback-quality-options { display:grid; gap:6px; }.playback-quality-option { display:flex; align-items:center; gap:10px; min-height:54px; padding:8px 10px; border:1px solid rgba(255,255,255,.13); border-radius:7px; background:#181818; cursor:pointer; transition:border-color 160ms ease,background 160ms ease; }.playback-quality-option:has(input:checked) { border-color:var(--accent); background:rgba(29,185,84,.1); }.playback-quality-option input { flex:0 0 auto; width:17px; min-height:17px; height:17px; margin:0; padding:0; accent-color:var(--accent); }.playback-quality-option span { display:grid; gap:2px; min-width:0; }.playback-quality-option strong { color:#fff; font-size:12px; }.playback-quality-option small { color:var(--muted); font-size:10px; line-height:1.25; }.playback-quality-option:focus-within { outline:2px solid #fff; outline-offset:2px; }

.bottom-nav, .floating-search-button { display:none; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

@media (max-width: 1080px) {
  .content-grid { grid-template-columns: minmax(0,1fr) 280px; gap:20px; }
  .discover-grid { grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); gap:12px; }
  .discover-card { min-height:185px; }
  .browse-layout.has-left { grid-template-columns: 160px minmax(0,1fr); }
}

@media (max-width: 860px) {
  .app-shell { grid-template-columns: 210px minmax(0,1fr); }.sidebar { width:210px; }.workspace { grid-column:2; }.brand { font-size:16px; }.content-grid { grid-template-columns:1fr; }.side-panels { grid-template-columns:repeat(2,minmax(0,1fr)); }.content-grid.browse-mode .side-panels { grid-template-columns:repeat(2,minmax(0,1fr)); }.player-panel { grid-template-columns:54px minmax(130px,1fr) minmax(260px,390px) minmax(80px,1fr); padding:8px 12px; }.player-actions .mini-button { min-width:auto; }
}

@media (max-width: 720px) {
  html, body { -webkit-text-size-adjust:100%; }
  input[inputmode="search"], .search-bar input, .entity-search input { font-size:16px !important; -webkit-appearance:none; appearance:none; touch-action:manipulation; }
  :root { --player-height: 112px; --mobile-nav-height: 68px; }
  html.is-native-android { --native-android-top-inset: max(30px, env(safe-area-inset-top, 0px)); }
  html, body { height:100%; overflow:hidden; }
  .app-shell { display:block; height:100dvh; }.sidebar { display:none; }.workspace, .app-shell.has-player .workspace { height:100dvh; margin:0; border-radius:0; background:linear-gradient(180deg,#303030 0,#121212 190px); }.topbar { min-height:64px; padding:12px 16px; background:linear-gradient(180deg,rgba(32,32,32,.98),rgba(32,32,32,.75)); }.topbar-navigation { display:none; }.topbar-title h1 { font-size:23px; }.subtitle { font-size:11px; }.topbar-actions { gap:5px; }.icon-text-button { display:grid; place-items:center; width:34px; padding:0; }.icon-text-button span { display:none; }.settings-button { min-height:30px; padding:0 12px; }.account-summary { max-width:160px; }.current-user-display { max-width:86px; }
  html.is-native-android .app-shell { padding-top:var(--native-android-top-inset); }
  html.is-native-android .workspace, html.is-native-android .app-shell.has-player .workspace { height:calc(100dvh - var(--native-android-top-inset)); }
  main { height:calc(100% - 64px); padding:0 16px calc(var(--mobile-nav-height) + 22px + env(safe-area-inset-bottom)); }.app-shell.has-player main { padding-bottom:calc(var(--mobile-nav-height) + var(--player-height) + 24px + env(safe-area-inset-bottom)); }
  .search-panel { display:none; }.search-panel.is-overlay-open { position:fixed; z-index:60; top:70px; right:10px; bottom:calc(var(--mobile-nav-height) + 8px + env(safe-area-inset-bottom)); left:10px; display:block; padding:14px; overflow-y:auto; border:1px solid var(--line); border-radius:10px; background:#242424; box-shadow:0 18px 50px rgba(0,0,0,.6); }.app-shell.has-player .search-panel.is-overlay-open { bottom:calc(var(--mobile-nav-height) + var(--player-height) + 8px + env(safe-area-inset-bottom)); }.search-bar { grid-template-columns:minmax(0,1fr) auto; }.search-bar button { min-width:70px; }.search-tabs { margin-top:11px; }.search-history-heading { justify-content:space-between; margin-top:17px; }.search-history-heading h2 { display:block; font-size:15px; }.history-list { margin-top:10px; }.history-chip { max-width:100%; }
  .home-panel { padding-top:20px; padding-bottom:27px; }.home-heading { margin-bottom:15px; }.home-heading h2 { font-size:22px; }.panel-heading { margin-bottom:12px; }.home-sections { gap:26px; }.discover-section h3 { font-size:19px; }.discover-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }.discover-card { min-height:156px; padding:11px; }.discover-card::before { top:14px; right:10px; width:68px; height:68px; }.discover-card::after { top:38px; right:29px; width:29px; height:29px; border-width:5px; }.discover-title { font-size:13px; }.discover-subtitle { display:none; }.discover-kind { font-size:9px; }
  .library-panel { padding-top:12px; }.library-hero { min-height:112px; padding:18px; }.library-hero h2 { font-size:27px; }.library-signed-out { grid-template-columns:50px minmax(0,1fr); gap:12px; padding:16px; }.library-signin-mark { width:50px; height:50px; }.library-signed-out .primary-action { grid-column:1 / -1; width:100%; min-height:40px; }.playlists-grid { grid-template-columns:1fr; }.library-track-list { padding:4px 10px; }
  .entity-panel { margin-top:20px; padding:18px; }.entity-header { gap:10px; }.entity-header h2 { font-size:27px; }.entity-search { grid-template-columns:1fr; }.entity-search .secondary-action { width:100%; }
  .content-grid, .content-grid.browse-mode .side-panels, .side-panels { grid-template-columns:1fr; gap:20px; }.results-panel { padding-top:0; }.results-panel h2 { font-size:20px; }.status { font-size:10px; }.browse-layout.has-left { grid-template-columns:1fr; }.browse-left { padding:0 0 12px; border-right:0; border-bottom:1px solid var(--line); }.browse-left .entity-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.browse-left .collection-card { grid-template-columns:48px minmax(0,1fr); }.browse-left .entity-card-image-wrap, .browse-left .entity-card-image { width:48px; height:48px; }.browse-nav { grid-template-columns:1fr 1fr; }.result-item, .browse-layout.has-left .result-item { grid-template-columns:56px minmax(0,1fr) 64px; grid-template-areas:"thumb content actions"; gap:8px; min-height:72px; padding:8px 5px; }.thumbnail-wrap { grid-area:thumb; }.thumbnail-wrap,.thumbnail { width:56px; height:56px; }.result-content { grid-area:content; }.result-title { font-size:13px; }.result-views { display:block; color:var(--muted-dark); font-size:9px; }.result-actions { grid-area:actions; min-width:64px; justify-content:flex-end; gap:1px; }.row-icon-button { width:30px; height:30px; flex:0 0 30px; }.recommendations-panel,.queue-panel,.recently-panel,.favorites-panel { padding:14px; }
  .home-panel { padding-top:16px; padding-bottom:30px; }.home-sections { gap:27px; }.home-section-header { margin-bottom:10px; }.home-section-header h2 { font-size:20px; }.home-section-subtitle { font-size:11px; }.home-catalog-rail { gap:9px; margin-right:-16px; padding-right:16px; }.home-catalog-card { grid-template-rows:126px auto auto; flex-basis:126px; }.home-catalog-art,.home-catalog-image { width:126px; height:126px; }.home-resume-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }.home-resume-tile { grid-template-columns:44px minmax(0,1fr); min-height:58px; gap:8px; padding:7px; }.home-resume-art,.home-resume-image { width:44px; height:44px; }.home-resume-title { font-size:11px; }.home-resume-artist { font-size:9px; }.home-start-section { padding:15px; }.home-search-cta { min-height:40px; }.home-feature-card { min-height:144px; }.home-feature-content { padding:16px; }.home-feature-title { max-width:250px; font-size:25px; }.home-feature-subtitle { max-width:245px; font-size:11px; }.home-feature-play { min-height:36px; margin:0 13px 13px 0; padding:0 13px; }.home-track-row { grid-template-columns:48px minmax(0,1fr) auto; min-height:62px; gap:8px; padding:6px 2px; }.home-track-art,.home-track-image { width:48px; height:48px; }.home-track-row .result-actions { grid-area:auto; gap:1px; }.home-track-title { font-size:12px; }.home-track-meta { font-size:10px; }
  .player-panel { right:0; bottom:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom)); left:0; grid-template-columns:44px minmax(0,1fr) 100px; grid-template-areas:"art info controls" "progress progress progress"; min-height:var(--player-height); padding:7px 12px 5px; gap:2px 9px; border-top-color:#333; }.now-art,.now-art-image { width:44px; height:44px; }.now-label,.now-duration { display:none; }.now-title { margin:0; font-size:12px; }.now-artist { font-size:10px; }.player-controls { grid-template-columns:28px 36px 28px; gap:4px; }.player-controls .previous-button,.player-controls .next-button { display:flex; width:28px; height:28px; }.toggle-button { width:36px; height:36px; }.player-progress { grid-area:progress; display:grid; grid-template-columns:minmax(0,1fr); gap:0; width:100%; }.player-progress .player-time { display:none; }.player-seek { height:13px; }.player-actions { display:none; }
  .lyrics-header { min-height:78px; padding:12px 16px; }.lyrics-close-button,.lyrics-toggle-button { width:38px; height:38px; }.lyrics-close-button { font-size:27px; }.lyrics-track-header h2 { font-size:14px; }.lyrics-artist { font-size:11px; }.lyrics-lines { width:calc(100% - 38px); gap:7px; padding:17vh 0 28vh; }.lyrics-line-button { font-size:clamp(26px,8.1vw,36px); line-height:1.16; }.lyrics-state { width:calc(100% - 44px); padding:22vh 0; font-size:15px; }.lyrics-footer { padding:12px 16px calc(12px + env(safe-area-inset-bottom)); font-size:10px; }.lyrics-footer span:first-child { display:none; }
  html.is-native-android .lyrics-panel { padding-top:var(--native-android-top-inset); }
  .bottom-nav { position:fixed; z-index:45; right:0; bottom:0; left:0; display:grid; grid-template-columns:repeat(3,1fr); min-height:var(--mobile-nav-height); padding:7px 12px calc(7px + env(safe-area-inset-bottom)); border-top:1px solid rgba(255,255,255,.07); background:rgba(0,0,0,.9); box-shadow:0 -10px 28px rgba(0,0,0,.3); backdrop-filter:blur(18px) saturate(135%); -webkit-backdrop-filter:blur(18px) saturate(135%); }.bottom-nav-button { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-height:52px; padding:3px 5px; overflow:hidden; border-radius:9px; background:transparent; color:rgba(255,255,255,.5); font-size:10px; font-weight:700; letter-spacing:.01em; transition:color 180ms ease,transform 180ms ease; }.bottom-nav-button::before { position:absolute; inset:3px 17px 17px; border-radius:999px; background:rgba(255,255,255,0); content:""; transition:background 180ms ease,box-shadow 180ms ease; }.bottom-nav-icon,.bottom-nav-label { position:relative; z-index:1; }.bottom-nav-icon { width:24px; height:24px; opacity:.72; transform:translateY(1px); transition:opacity 180ms ease,transform 180ms ease; }.bottom-nav-label { max-width:100%; overflow:hidden; font-size:10px; line-height:1.1; text-overflow:ellipsis; white-space:nowrap; opacity:.82; transition:opacity 180ms ease; }.bottom-nav-button.active { color:#fff; }.bottom-nav-button.active::before { background:rgba(255,255,255,.13); box-shadow:inset 0 1px rgba(255,255,255,.08); }.bottom-nav-button.active .bottom-nav-icon { opacity:1; transform:translateY(0); }.bottom-nav-button.active .bottom-nav-label { opacity:1; }.bottom-nav-button:active { transform:scale(.95); }.bottom-nav-button:focus-visible { outline-offset:-3px; }.floating-search-button { display:none; }
  .floating-search-button { position:fixed; z-index:56; top:72px; right:16px; display:none; place-items:center; width:42px; height:42px; border:1px solid rgba(255,255,255,.16); border-radius:50%; background:rgba(30,30,30,.94); color:#fff; box-shadow:0 8px 22px rgba(0,0,0,.35); }
  .floating-search-button::before { width:13px; height:13px; border:2px solid currentColor; border-radius:50%; content:""; }
  .floating-search-button::after { position:absolute; width:7px; height:2px; margin:14px 0 0 13px; border-radius:2px; background:currentColor; content:""; transform:rotate(45deg); }
  .floating-search-button.is-visible { display:grid; }
  .search-top-card, .search-lane, .search-lane-body, .search-track-lane,
  .entity-panel, .entity-header, .entity-search, .results-actions-bar,
  .panel-heading { min-width:0; max-width:100%; }
  .entity-header { grid-template-columns:34px minmax(0,1fr); gap:8px; margin-bottom:12px; }
  .entity-back-button { display:grid; place-items:center; width:32px; height:32px; padding:0; border-radius:50%; font-size:28px; line-height:1; }
  .entity-kind, .entity-header p { display:none; }
  .entity-header h2 { margin:0; font-size:22px; line-height:1.15; }
  .search-top-card { overflow:hidden; }
  .search-top-content h3, .search-top-content p, .search-top-views,
  .search-lane-header h3, .search-lane-header span { overflow-wrap:anywhere; }
  .search-card-rail { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin:0; padding:2px 0 8px; overflow:visible; }
  .search-explore-card { width:100%; min-width:0; flex:none; }
  .results-list > li { min-width:0; max-width:100%; }
  .settings-panel { align-items:end; padding:10px 10px calc(10px + env(safe-area-inset-bottom)); }.settings-card { width:100%; max-height:calc(100dvh - 20px); overflow-y:auto; }.settings-form input { font-size:16px; }
}

@media (max-width: 720px) {
  .search-suggestion-panel { margin-top:7px; padding:12px; }.search-suggestion-heading { align-items:start; }.search-suggestion-heading h2 { font-size:16px; }.search-suggestion-detail { display:none; }.search-suggestion-list { grid-template-columns:1fr 1fr; gap:6px; }.search-suggestion { min-height:50px; padding:7px; }.search-suggestion:nth-child(n+5) { display:none; }
  .search-top-result { padding-top:0; }.search-top-card { grid-template-columns:76px minmax(0,1fr); gap:10px; min-height:100px; padding:10px; }.search-top-art,.search-top-image { width:76px; height:76px; }.search-top-content h3 { font-size:17px; }.search-top-views { display:none; }.search-top-actions { grid-column:1 / -1; justify-content:flex-end; margin-top:-3px; }.search-top-play { min-height:34px; padding:0 14px; }.search-lane { padding-top:15px; }.search-card-rail { margin-right:0; overflow:visible; }.search-explore-card { flex-basis:124px; min-height:140px; }.search-collection-card { grid-template-rows:82px auto auto; }.search-collection-art,.search-collection-image { height:82px; }
}

@media (max-width: 380px) {
  main { padding-right:11px; padding-left:11px; }.topbar { padding-right:11px; padding-left:11px; }.topbar-title h1 { font-size:20px; }.subtitle { display:none; }.discover-card { min-height:138px; }.discover-grid { gap:7px; }.discover-title { font-size:12px; }.settings-button { padding:0 10px; }.account-summary { max-width:125px; }.profile-orb { width:18px; height:18px; }.current-user-display { max-width:65px; }
}

@media (max-width: 720px) {
  .player-panel { grid-template-columns:56px minmax(0,1fr) 142px; padding:10px 14px 8px; gap:6px 11px; border-top-color:#444; border-radius:14px 14px 0 0; }
  .now-art,.now-art-image { width:56px; height:56px; border-radius:8px; }
  .now-title { font-size:13px; }.now-artist { font-size:11px; }
  .player-controls { grid-template-columns:42px 52px 42px; gap:5px; }
  .player-controls .previous-button,.player-controls .next-button { width:42px; height:42px; }
  .player-controls .toggle-button { width:52px; height:52px; }
  .player-progress { grid-template-columns:minmax(0,1fr); gap:0; }
  .player-progress .player-time { display:none; }
  .player-seek { height:20px; }
}