:root {
  --primary: #10c0b5;
  --primary-bright: #0ff2e6;
  --primary-dark: #0b9e94;
  --accent: #f3b24c;
  --bg: #0b1220;
  --surface: #10192b;
  --surface-2: #0d1728;
  --text: #e5ecf5;
  --muted: #94a9c6;
  --line: rgba(255,255,255,.075);
  --radius: 18px;
  --shadow: 0 18px 46px rgba(0,0,0,.30);
  --player-h: 98px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: "Space Grotesk", "DM Sans", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  background-color: var(--bg);
  background-image:
    radial-gradient(1200px 820px at 16% 8%, rgba(16,192,181,.18), transparent 55%),
    radial-gradient(980px 760px at 84% -6%, rgba(243,178,76,.16), transparent 52%),
    linear-gradient(135deg,#0b1220 0%,#0f1d33 48%,#07111d 100%);
  background-attachment: fixed;
  letter-spacing: .1px;
  overflow-x: hidden;
}
button, input { font: inherit; }
button { color: inherit; }
button, [data-route], [data-release], [data-artist], [data-track] { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible { outline: 2px solid rgba(15,242,230,.9); outline-offset: 2px; }
img { display: block; max-width: 100%; }

.shell-width { width: min(1280px, calc(100% - 48px)); margin-inline: auto; }
.app-shell { min-height: 100vh; padding-bottom: calc(var(--player-h) + 44px); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: linear-gradient(180deg,rgba(10,17,32,.96),rgba(8,15,28,.91));
  backdrop-filter: blur(20px) saturate(1.2);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 12px 28px rgba(0,0,0,.28);
}
.masthead { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 20px; padding: 17px 0 13px; }
.brand { display: inline-flex; align-items: center; gap: 16px; width: fit-content; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; }
.brand-disc {
  width: 58px; height: 58px; border-radius: 50%; flex: 0 0 auto; position: relative; display: grid; place-items: center;
  background:
    radial-gradient(circle at 31% 28%,rgba(255,255,255,.22),rgba(255,255,255,0) 33%),
    radial-gradient(circle at center,#06101b 0 13%,transparent 14%),
    repeating-radial-gradient(circle at center,rgba(255,255,255,.04) 0 1px,transparent 2px 5px),
    conic-gradient(from 25deg,rgba(16,192,181,.85),rgba(243,178,76,.88),rgba(17,86,116,.9),rgba(16,192,181,.82));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 9px 27px rgba(0,0,0,.38), 0 0 34px rgba(16,192,181,.12);
}
.brand-disc::after { content:""; position:absolute; inset:8px; border-radius:50%; border:1px solid rgba(255,255,255,.10); }
.brand-disc-hole { width: 11px; height: 11px; border-radius: 50%; background:#091220; box-shadow: inset 0 0 0 3px rgba(255,255,255,.25); }
.brand-copy { display: grid; }
.brand-kicker, .eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 2px; color: var(--muted); text-transform: uppercase; }
.brand-title { font-size: 26px; line-height: 1.05; font-weight: 900; letter-spacing: -.5px; color:#fff; margin-top:2px; }
.brand-subtitle { color: var(--muted); font-size: 12px; margin-top:5px; }
.masthead-actions { display:flex; align-items:center; gap:10px; }
.round-icon { position:relative; display:grid; place-items:center; width:42px; height:42px; border-radius:50%; border:1px solid rgba(255,255,255,.09); background:rgba(255,255,255,.045); cursor:pointer; transition:.18s ease; }
.round-icon:hover { background:rgba(16,192,181,.11); border-color:rgba(16,192,181,.28); transform:translateY(-1px); }
.queue-lines, .queue-lines::before, .queue-lines::after { display:block; width:16px; height:2px; border-radius:2px; background:currentColor; }
.queue-lines { position:relative; }
.queue-lines::before,.queue-lines::after { content:""; position:absolute; left:0; }
.queue-lines::before { top:-5px; width:12px; }
.queue-lines::after { top:5px; width:8px; }
.queue-count { position:absolute; right:-2px; top:-4px; min-width:18px; height:18px; padding:0 4px; border-radius:999px; display:grid; place-items:center; font-size:10px; font-weight:900; color:#06121a; background:var(--accent); border:2px solid #0a1220; }
.is-hidden { display:none !important; }

.nav-rail { display:grid; grid-template-columns: minmax(360px, 1fr) minmax(390px, .92fr); gap:14px; align-items:center; padding:0 0 14px; }
.main-nav, .global-search { border:1px solid rgba(255,255,255,.06); border-radius:14px; background:rgba(255,255,255,.028); box-shadow:inset 0 0 0 1px rgba(255,255,255,.014); }
.main-nav { display:flex; align-items:center; gap:4px; padding:6px; }
.nav-link { border:0; background:transparent; border-radius:10px; padding:11px 18px; font-weight:800; font-size:14px; color:#d9e5f3; cursor:pointer; transition:.18s ease; }
.nav-link:hover { background:rgba(16,192,181,.08); }
.nav-link.is-active { color:var(--primary-bright); background:linear-gradient(135deg,rgba(16,192,181,.20),rgba(243,178,76,.12)); box-shadow: inset 0 0 0 1px rgba(16,192,181,.10); }
.global-search { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px; padding:6px 7px 6px 13px; }
.search-icon { width:14px; height:14px; border:2px solid var(--muted); border-radius:50%; position:relative; opacity:.85; }
.search-icon::after { content:""; position:absolute; width:6px; height:2px; background:var(--muted); right:-5px; bottom:-3px; transform:rotate(45deg); border-radius:2px; }
.global-search input { width:100%; min-width:0; border:0; outline:0; background:transparent; color:var(--text); padding:7px 6px; font-size:13px; }
.global-search input::placeholder { color:#7086a5; }
.global-search button { border:0; border-radius:9px; padding:9px 14px; font-weight:850; cursor:pointer; color:#04171c; background:linear-gradient(135deg,var(--primary-bright),var(--primary)); }

.page { padding-top:24px; }
.view { min-height: 60vh; animation: viewIn .24s ease; }
@keyframes viewIn { from{opacity:0;transform:translateY(7px)} to{opacity:1;transform:none} }
.loading-state, .empty-state { min-height:330px; display:grid; place-content:center; justify-items:center; gap:12px; text-align:center; color:var(--muted); }
.spinner { width:28px; height:28px; border-radius:50%; border:3px solid rgba(255,255,255,.08); border-top-color:var(--primary); animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

.hero {
  position:relative; min-height:390px; border-radius:24px; overflow:hidden; isolation:isolate; border:1px solid rgba(255,255,255,.075); box-shadow:0 28px 70px rgba(0,0,0,.34); background:#101827;
}
.hero-bg { position:absolute; inset:0; background-size:cover; background-position:center; filter:saturate(1.05); transform:scale(1.03); }
.hero-bg::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(5,10,20,.96) 0%,rgba(5,10,20,.80) 38%,rgba(5,10,20,.24) 70%,rgba(5,10,20,.36) 100%), linear-gradient(0deg,rgba(5,10,20,.82),rgba(5,10,20,0) 50%); }
.hero-glow { position:absolute; inset:auto -10% -58% auto; width:600px; height:600px; border-radius:50%; background:radial-gradient(circle,rgba(16,192,181,.23),transparent 65%); z-index:-1; }
.hero-content { position:relative; z-index:1; width:min(660px,72%); min-height:390px; display:flex; flex-direction:column; justify-content:flex-end; padding:42px; }
.hero .eyebrow { color:#9ee4dd; }
.hero-title { margin:8px 0 10px; font-size:clamp(38px,6vw,76px); line-height:.95; letter-spacing:-2.6px; font-weight:950; color:#fff; text-wrap:balance; }
.hero-meta { display:flex; flex-wrap:wrap; gap:9px 16px; color:#c3d1e4; font-size:13px; }
.hero-desc { max-width:590px; margin:14px 0 0; color:#aebed2; line-height:1.65; font-size:14px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.primary-btn,.secondary-btn,.ghost-btn { border:0; border-radius:999px; padding:11px 18px; font-weight:900; cursor:pointer; transition:.18s ease; }
.primary-btn { color:#041418; background:linear-gradient(135deg,var(--primary-bright),var(--primary)); box-shadow:0 10px 24px rgba(16,192,181,.18); }
.primary-btn:hover { transform:translateY(-2px); box-shadow:0 14px 32px rgba(16,192,181,.25); }
.secondary-btn { color:#fff; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.10); backdrop-filter:blur(8px); }
.secondary-btn:hover,.ghost-btn:hover { background:rgba(255,255,255,.15); }
.ghost-btn { color:#cde7e5; background:rgba(16,192,181,.08); border:1px solid rgba(16,192,181,.18); }

.section { margin-top:28px; padding:14px 12px 8px; border-radius:20px; background:radial-gradient(720px 250px at 12% 0%,rgba(16,192,181,.07),transparent 67%); }
.section-header { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin:3px 4px 15px; }
.section-header h2 { margin:2px 0 0; font-size:23px; letter-spacing:-.3px; }
.section-link { border:0; background:none; color:#8ff4ec; font-weight:800; cursor:pointer; }
.album-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:15px; }
.album-card { position:relative; border:1px solid rgba(255,255,255,.05); border-radius:18px; overflow:hidden; background:linear-gradient(160deg,rgba(17,27,46,.91),rgba(10,18,34,.95)); box-shadow:0 10px 28px rgba(0,0,0,.18); cursor:pointer; transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease; }
.album-card:hover { transform:translateY(-6px); border-color:rgba(16,192,181,.28); box-shadow:0 22px 42px rgba(0,0,0,.34),inset 0 0 0 1px rgba(16,192,181,.12); }
.album-cover { position:relative; aspect-ratio:1; overflow:hidden; background:radial-gradient(circle at 22% 20%,rgba(16,192,181,.14),transparent 40%),#0f1728; }
.album-cover img { width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.album-card:hover .album-cover img { transform:scale(1.025); }
.vinyl { position:absolute; right:-17%; bottom:-18%; width:70%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 40% 40%,rgba(255,255,255,.18),rgba(255,255,255,0) 43%), radial-gradient(circle at center,#07111d 0 10%,rgba(243,178,76,.75) 11% 15%,transparent 16%), repeating-radial-gradient(circle at center,rgba(0,0,0,.22) 0 1px,rgba(255,255,255,.06) 2px 3px,transparent 4px 7px), conic-gradient(from 0deg,rgba(16,192,181,.75),rgba(243,178,76,.72),rgba(23,80,126,.72),rgba(16,192,181,.66)); opacity:.88; box-shadow:-8px -8px 26px rgba(0,0,0,.28); }
.album-play { position:absolute; right:13px; bottom:13px; z-index:2; width:42px; height:42px; border-radius:50%; border:0; display:grid; place-items:center; color:#06161b; background:linear-gradient(135deg,var(--primary-bright),var(--primary)); opacity:0; transform:translateY(7px); cursor:pointer; transition:.2s ease; box-shadow:0 10px 25px rgba(0,0,0,.3); }
.album-card:hover .album-play,.album-play:focus-visible { opacity:1; transform:none; }
.album-info { padding:12px 14px 14px; }
.album-title { font-weight:900; line-height:1.34; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.album-meta { margin-top:7px; color:var(--muted); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.album-badges { display:flex; gap:7px; flex-wrap:wrap; margin-top:10px; }
.tag { display:inline-flex; align-items:center; min-height:24px; padding:3px 9px; border-radius:999px; font-size:11px; font-weight:800; color:#8ff4ec; background:rgba(16,192,181,.12); border:1px solid rgba(16,192,181,.22); }
.tag.gold { color:#ffd994; background:rgba(243,178,76,.11); border-color:rgba(243,178,76,.22); }

.track-list { display:grid; gap:7px; }
.track-row { display:grid; grid-template-columns:42px minmax(0,1.6fr) minmax(140px,.8fr) minmax(150px,.7fr) 44px; gap:12px; align-items:center; min-height:64px; padding:8px 11px; border-radius:14px; border:1px solid transparent; transition:.18s ease; }
.track-row:hover { background:rgba(255,255,255,.035); border-color:rgba(255,255,255,.045); }
.track-row.is-current { background:linear-gradient(90deg,rgba(16,192,181,.11),rgba(16,192,181,.02)); border-color:rgba(16,192,181,.15); }
.track-index-btn { width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.07); background:rgba(255,255,255,.035); cursor:pointer; color:#dce7f4; }
.track-row:hover .track-index-btn,.track-row.is-current .track-index-btn { color:#06181b; background:var(--primary); border-color:transparent; }
.track-main { min-width:0; }
.track-title { font-weight:850; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.track-sub { margin-top:3px; font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.track-release,.track-code { color:#8da4c3; font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.track-more { width:36px; height:36px; border-radius:50%; border:0; background:transparent; color:var(--muted); cursor:pointer; }
.track-more:hover { background:rgba(255,255,255,.06); color:#fff; }

.artist-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:16px; }
.artist-card { border:0; background:transparent; padding:0; text-align:center; cursor:pointer; }
.artist-image { width:100%; aspect-ratio:1; border-radius:50%; overflow:hidden; background:linear-gradient(145deg,#11253a,#0c1729); border:1px solid rgba(255,255,255,.07); box-shadow:0 12px 30px rgba(0,0,0,.22); transition:.22s ease; }
.artist-image img { width:100%; height:100%; object-fit:cover; }
.artist-card:hover .artist-image { transform:translateY(-5px); box-shadow:0 20px 40px rgba(0,0,0,.32),0 0 0 1px rgba(16,192,181,.22); }
.artist-name { margin-top:11px; font-size:14px; font-weight:900; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.artist-stat { margin-top:4px; font-size:11px; color:var(--muted); }

.detail-hero { display:grid; grid-template-columns:minmax(260px,360px) 1fr; gap:26px; padding:22px; border-radius:22px; border:1px solid rgba(255,255,255,.07); background:radial-gradient(600px 330px at 12% 8%,rgba(16,192,181,.12),transparent 62%),rgba(12,21,37,.84); box-shadow:var(--shadow); }
.detail-cover { position:relative; aspect-ratio:1; border-radius:18px; overflow:hidden; box-shadow:0 20px 38px rgba(0,0,0,.34); background:#101a2b; }
.detail-cover img { width:100%; height:100%; object-fit:cover; }
.detail-cover .vinyl { width:61%; right:-15%; bottom:-15%; }
.detail-copy { display:flex; flex-direction:column; justify-content:flex-end; min-width:0; padding:10px 0; }
.detail-copy h1 { margin:7px 0 10px; font-size:clamp(36px,5.5vw,72px); line-height:.98; letter-spacing:-2.2px; }
.detail-meta { display:flex; flex-wrap:wrap; gap:9px 15px; color:var(--muted); font-size:13px; }
.detail-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; }

.artist-hero { display:grid; grid-template-columns:190px 1fr; gap:25px; align-items:end; padding:25px; border-radius:23px; border:1px solid rgba(255,255,255,.07); background:radial-gradient(620px 300px at 8% 4%,rgba(243,178,76,.12),transparent 63%),rgba(11,20,35,.84); box-shadow:var(--shadow); }
.artist-hero-image { width:190px; aspect-ratio:1; border-radius:50%; overflow:hidden; background:#101a2b; box-shadow:0 20px 38px rgba(0,0,0,.35); }
.artist-hero-image img { width:100%; height:100%; object-fit:cover; }
.artist-hero h1 { font-size:clamp(42px,7vw,82px); margin:7px 0 8px; letter-spacing:-2.5px; line-height:.95; }

.search-summary { padding:18px 20px; border:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.025); border-radius:18px; }
.search-summary h1 { margin:5px 0 4px; font-size:32px; }
.search-summary p { margin:0; color:var(--muted); }

.queue-backdrop { position:fixed; inset:0; z-index:1001; background:rgba(0,0,0,.42); opacity:0; pointer-events:none; transition:.22s ease; backdrop-filter:blur(2px); }
.queue-backdrop.is-open { opacity:1; pointer-events:auto; }
.queue-panel { position:fixed; right:0; top:0; bottom:0; width:min(430px,94vw); z-index:1002; padding:22px; background:linear-gradient(160deg,rgba(14,25,43,.98),rgba(7,14,26,.99)); border-left:1px solid rgba(255,255,255,.08); box-shadow:-22px 0 60px rgba(0,0,0,.38); transform:translateX(105%); transition:transform .25s ease; overflow-y:auto; }
.queue-panel.is-open { transform:none; }
.queue-head { display:flex; justify-content:space-between; align-items:center; gap:12px; position:sticky; top:-22px; padding:22px 0 14px; background:linear-gradient(180deg,#0c1728 70%,rgba(12,23,40,0)); z-index:2; }
.queue-head h2 { margin:3px 0 0; }
.queue-list { display:grid; gap:8px; padding-bottom:30px; }
.queue-item { display:grid; grid-template-columns:50px minmax(0,1fr) 34px; gap:10px; align-items:center; padding:8px; border-radius:13px; background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.04); cursor:pointer; }
.queue-item.is-current { border-color:rgba(16,192,181,.25); background:rgba(16,192,181,.08); }
.queue-thumb { width:50px; height:50px; border-radius:10px; overflow:hidden; background:#152136; }
.queue-thumb img { width:100%; height:100%; object-fit:cover; }
.queue-copy { min-width:0; }
.queue-title { font-size:13px; font-weight:850; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.queue-artist { margin-top:3px; font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.queue-remove { width:30px; height:30px; border-radius:50%; border:0; background:transparent; color:#7389a8; cursor:pointer; }
.queue-remove:hover { color:#fff; background:rgba(255,255,255,.06); }

.player-bar { position:fixed; left:18px; right:18px; bottom:16px; z-index:50; min-height:var(--player-h); display:grid; grid-template-columns:minmax(240px,1fr) minmax(350px,1.35fr) minmax(210px,1fr); gap:18px; align-items:center; padding:10px 15px; border-radius:19px; border:1px solid rgba(255,255,255,.09); background:linear-gradient(150deg,rgba(14,25,43,.94),rgba(8,15,28,.96)); box-shadow:0 20px 60px rgba(0,0,0,.40); backdrop-filter:blur(22px) saturate(1.3); }
.now-playing { display:grid; grid-template-columns:62px minmax(0,1fr); gap:11px; align-items:center; min-width:0; }
.player-cover-wrap { width:62px; height:62px; border:0; padding:0; border-radius:13px; overflow:hidden; background:transparent; cursor:pointer; }
.player-cover { width:100%; height:100%; display:block; background-size:cover; background-position:center; }
.cover-fallback { background:radial-gradient(circle at 30% 25%,rgba(15,242,230,.32),transparent 34%), conic-gradient(from 25deg,#0f7f78,#e2a546,#174f74,#0f7f78); }
.player-meta { min-width:0; display:grid; gap:4px; }
.text-button { border:0; background:none; padding:0; text-align:left; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.player-track-title { font-size:13px; font-weight:900; color:#fff; }
.player-track-artist { font-size:11px; color:var(--muted); }
.player-center { display:grid; gap:8px; }
.transport { display:flex; align-items:center; justify-content:center; gap:13px; }
.control-button,.play-button { border:0; display:grid; place-items:center; cursor:pointer; transition:.17s ease; }
.control-button { width:34px; height:34px; border-radius:50%; color:#c4d2e4; background:transparent; }
.control-button:hover,.control-button.is-active { color:var(--primary-bright); background:rgba(16,192,181,.08); }
.play-button { width:43px; height:43px; border-radius:50%; color:#06161b; background:linear-gradient(135deg,var(--primary-bright),var(--primary)); box-shadow:0 9px 22px rgba(16,192,181,.18); }
.play-button:hover { transform:scale(1.04); }
.progress-row { display:grid; grid-template-columns:38px 1fr 38px; gap:9px; align-items:center; }
.time-label { font-size:10px; color:#7f94b0; font-variant-numeric:tabular-nums; text-align:center; }
.range { accent-color:var(--primary); cursor:pointer; }
.progress { width:100%; }
.player-actions { display:flex; justify-content:flex-end; align-items:center; gap:9px; }
.volume-icon { color:#879ab4; font-size:13px; }
.volume { width:min(110px,35%); }

.toast { position:fixed; left:50%; bottom:calc(var(--player-h) + 35px); z-index:140; transform:translate(-50%,16px); padding:10px 15px; border-radius:999px; color:#dff9f6; background:rgba(5,17,26,.95); border:1px solid rgba(16,192,181,.25); box-shadow:0 12px 34px rgba(0,0,0,.34); opacity:0; pointer-events:none; transition:.2s ease; font-size:12px; }
.toast.is-showing { opacity:1; transform:translate(-50%,0); }

@media (max-width:1180px) {
  .album-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .artist-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
  .player-bar { grid-template-columns:minmax(210px,.9fr) minmax(330px,1.3fr) minmax(170px,.7fr); }
}
@media (max-width:920px) {
  :root { --player-h: 112px; }
  .shell-width { width:min(100% - 28px,1280px); }
  .nav-rail { grid-template-columns:1fr; }
  .main-nav { justify-content:center; }
  .global-search { order:-1; }
  .hero { min-height:350px; }
  .hero-content { width:85%; min-height:350px; padding:30px; }
  .album-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .artist-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .detail-hero { grid-template-columns:minmax(220px,300px) 1fr; }
  .track-row { grid-template-columns:42px minmax(0,1fr) minmax(110px,.6fr) 40px; }
  .track-code { display:none; }
  .player-bar { left:8px; right:8px; bottom:8px; grid-template-columns:1fr 1.1fr; gap:10px; padding:9px 11px; }
  .player-actions { display:none; }
}
@media (max-width:680px) {
  :root { --player-h: 130px; }
  .app-shell { padding-bottom:calc(var(--player-h) + 30px); }
  .site-header { position:relative; }
  .masthead { padding:13px 0 10px; }
  .brand-disc { width:48px; height:48px; }
  .brand-title { font-size:22px; }
  .brand-subtitle { display:none; }
  .nav-rail { padding-bottom:11px; }
  .main-nav { overflow-x:auto; justify-content:flex-start; scrollbar-width:none; }
  .main-nav::-webkit-scrollbar { display:none; }
  .nav-link { flex:0 0 auto; padding:10px 15px; }
  .global-search button { padding:9px 11px; }
  .page { padding-top:16px; }
  .hero { min-height:400px; }
  .hero-bg::after { background:linear-gradient(0deg,rgba(5,10,20,.96) 0%,rgba(5,10,20,.72) 55%,rgba(5,10,20,.30) 100%); }
  .hero-content { width:100%; min-height:400px; justify-content:flex-end; padding:24px 21px; }
  .hero-title { font-size:42px; letter-spacing:-1.5px; }
  .hero-desc { display:none; }
  .section { margin-top:21px; padding-inline:3px; }
  .section-header { align-items:center; }
  .section-header h2 { font-size:20px; }
  .album-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }
  .album-info { padding:10px 11px 12px; }
  .album-title { font-size:13px; }
  .album-play { opacity:1; transform:none; width:38px; height:38px; }
  .artist-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; }
  .artist-name { font-size:12px; }
  .detail-hero { grid-template-columns:1fr; padding:15px; gap:16px; }
  .detail-cover { max-width:330px; width:100%; margin-inline:auto; }
  .detail-copy { padding:3px; }
  .detail-copy h1 { font-size:42px; }
  .artist-hero { grid-template-columns:110px 1fr; gap:16px; padding:17px; align-items:center; }
  .artist-hero-image { width:110px; }
  .artist-hero h1 { font-size:34px; letter-spacing:-1px; }
  .track-row { grid-template-columns:38px minmax(0,1fr) 36px; min-height:58px; gap:8px; padding-inline:6px; }
  .track-release,.track-code { display:none; }
  .player-bar { min-height:var(--player-h); grid-template-columns:1fr; align-content:center; padding:9px 11px 10px; }
  .now-playing { grid-template-columns:48px minmax(0,1fr); }
  .player-cover-wrap { width:48px; height:48px; border-radius:10px; }
  .player-center { position:absolute; left:60px; right:12px; top:7px; }
  .transport { justify-content:flex-end; gap:4px; }
  .control-button { width:30px; height:30px; }
  .transport #shuffleButton,.transport #repeatButton { display:none; }
  .play-button { width:37px; height:37px; }
  .progress-row { position:absolute; left:-49px; right:0; top:76px; grid-template-columns:34px 1fr 34px; }
  .player-meta { padding-right:158px; }
  .queue-player-button { display:none; }
}
@media (max-width:420px) {
  .shell-width { width:calc(100% - 20px); }
  .brand-kicker { letter-spacing:1.4px; }
  .album-grid { gap:9px; }
  .artist-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hero-content { padding:21px 17px; }
  .hero-title { font-size:38px; }
}

/* v2.1 language switch */
.language-switch {
  min-width:58px;
  height:38px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:999px;
  padding:0 14px;
  background:rgba(255,255,255,.045);
  color:#dce8f6;
  font-size:12px;
  font-weight:900;
  letter-spacing:.04em;
  cursor:pointer;
  transition:.18s ease;
}
.language-switch:hover {
  border-color:rgba(16,192,181,.34);
  background:rgba(16,192,181,.10);
  color:#b8fff8;
}
.player-track-artist { display:block; }


/* v2.5 DSP-style Now Playing */
.player-bar.has-track { cursor:pointer; }
.player-bar.has-track .now-playing { cursor:pointer; }
.player-bar.has-track .player-track-artist { pointer-events:none; }
.player-bar.has-track .now-playing:hover .player-track-title { color:var(--primary-bright); }

.now-playing-page { position:relative; min-height:min(720px,calc(100vh - 245px)); border-radius:30px; overflow:hidden; border:1px solid rgba(255,255,255,.08); background:linear-gradient(145deg,rgba(14,28,47,.96),rgba(5,13,24,.98)); box-shadow:0 28px 80px rgba(0,0,0,.30); isolation:isolate; }
.now-playing-backdrop { position:absolute; inset:-40px; z-index:-2; background-size:cover; background-position:center; filter:blur(50px) saturate(.9); opacity:.24; transform:scale(1.12); }
.now-playing-page::after { content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(circle at 24% 30%,rgba(16,192,181,.15),transparent 35%),linear-gradient(100deg,rgba(5,13,24,.76),rgba(5,13,24,.92)); }
.now-playing-page-head { height:74px; display:grid; grid-template-columns:44px 1fr 44px; align-items:center; gap:12px; padding:14px 20px 0; font-size:11px; font-weight:900; letter-spacing:.18em; text-transform:uppercase; color:#94a9c4; }
.now-playing-page-head > span { text-align:center; }
.now-playing-back,.now-playing-queue-button { width:42px; height:42px; border:1px solid rgba(255,255,255,.08); border-radius:50%; background:rgba(255,255,255,.045); color:#eef7ff; font-size:26px; cursor:pointer; }
.now-playing-queue-button { font-size:19px; }
.now-playing-layout { min-height:560px; display:grid; grid-template-columns:minmax(300px,500px) minmax(320px,1fr); gap:clamp(38px,7vw,100px); align-items:center; padding:24px clamp(28px,6vw,82px) 62px; }
.now-playing-artwork { width:min(100%,500px); aspect-ratio:1; justify-self:center; overflow:hidden; border-radius:26px; background:#142238; box-shadow:0 32px 72px rgba(0,0,0,.46),0 0 0 1px rgba(255,255,255,.07); }
.now-playing-artwork img { width:100%; height:100%; object-fit:cover; display:block; }
.now-playing-content { min-width:0; max-width:690px; }
.now-playing-content h1 { margin:9px 0 8px; font-size:clamp(42px,6vw,82px); line-height:.98; letter-spacing:-.045em; overflow-wrap:anywhere; }
.now-playing-artist { margin:0 0 22px; color:#b9c9dc; font-size:clamp(17px,2vw,23px); font-weight:750; }
.now-playing-album { display:flex; flex-direction:column; gap:4px; max-width:100%; margin:0 0 34px; padding:0; border:0; background:transparent; color:#e9f1fb; text-align:left; cursor:pointer; font-size:14px; font-weight:800; }
.now-playing-album span { color:#7188a6; font-size:9px; letter-spacing:.15em; text-transform:uppercase; }
.now-playing-album:hover { color:var(--primary-bright); }
.now-playing-progress-wrap { margin-top:18px; }
.now-playing-progress { width:100%; height:5px; }
.now-playing-times { display:flex; justify-content:space-between; margin-top:8px; color:#7890ad; font-size:11px; font-variant-numeric:tabular-nums; }
.now-playing-controls { display:flex; align-items:center; justify-content:center; gap:clamp(10px,2vw,22px); margin-top:24px; }
.now-playing-control,.now-playing-play { border:0; display:grid; place-items:center; cursor:pointer; transition:.18s ease; }
.now-playing-control { width:48px; height:48px; border-radius:50%; color:#c6d5e7; background:rgba(255,255,255,.035); }
.now-playing-control:hover,.now-playing-control.is-active { color:var(--primary-bright); background:rgba(16,192,181,.10); transform:translateY(-1px); }
.now-playing-play { width:70px; height:70px; border-radius:50%; color:#041517; background:linear-gradient(135deg,var(--primary-bright),var(--primary)); box-shadow:0 16px 34px rgba(16,192,181,.22); font-size:23px; }
.now-playing-play:hover { transform:scale(1.045); }
.now-playing-up-next { margin-top:28px; }
.now-playing-queue-list { display:grid; gap:8px; }
.now-playing-queue-row { width:100%; display:grid; grid-template-columns:58px minmax(0,1fr) 38px; gap:13px; align-items:center; padding:9px 11px; border:1px solid rgba(255,255,255,.05); border-radius:15px; background:rgba(255,255,255,.025); color:#fff; text-align:left; cursor:pointer; }
.now-playing-queue-row:hover { border-color:rgba(16,192,181,.22); background:rgba(16,192,181,.055); }
.now-playing-queue-cover { width:58px; height:58px; overflow:hidden; border-radius:11px; background:#142238; }
.now-playing-queue-cover img { width:100%; height:100%; object-fit:cover; }
.now-playing-queue-copy { min-width:0; display:grid; gap:4px; }
.now-playing-queue-copy strong,.now-playing-queue-copy small { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.now-playing-queue-copy strong { font-size:13px; }
.now-playing-queue-copy small { color:#8196b0; font-size:11px; }
.now-playing-queue-play { color:var(--primary-bright); text-align:center; }
.now-playing-empty { min-height:460px; }

@media (max-width:900px) {
  .now-playing-layout { grid-template-columns:minmax(230px,380px) minmax(260px,1fr); gap:34px; padding-inline:28px; }
  .now-playing-content h1 { font-size:clamp(38px,7vw,60px); }
}
@media (max-width:680px) {
  .now-playing-page { min-height:auto; border-radius:22px; }
  .now-playing-page-head { height:60px; padding:10px 12px 0; }
  .now-playing-layout { min-height:auto; grid-template-columns:1fr; gap:26px; padding:14px 18px 34px; }
  .now-playing-artwork { width:min(86vw,420px); border-radius:20px; }
  .now-playing-content { width:100%; }
  .now-playing-content .eyebrow { display:none; }
  .now-playing-content h1 { margin-top:0; font-size:clamp(34px,11vw,52px); }
  .now-playing-artist { font-size:16px; margin-bottom:14px; }
  .now-playing-album { margin-bottom:22px; }
  .now-playing-controls { gap:9px; margin-top:18px; }
  .now-playing-control { width:42px; height:42px; }
  .now-playing-play { width:62px; height:62px; }
}


/* v2.6 immersive Now Playing sheet */
body.now-playing-open { overflow:hidden; }
.now-playing-overlay {
  position:fixed;
  inset:0;
  z-index:90;
  pointer-events:none;
  visibility:hidden;
}
.now-playing-overlay[aria-hidden="false"] { visibility:visible; pointer-events:auto; }
.now-playing-overlay-scrim {
  position:absolute;
  inset:0;
  background:rgba(2,8,16,.52);
  backdrop-filter:blur(0px);
  opacity:0;
  transition:opacity .34s ease, backdrop-filter .34s ease;
}
.now-playing-sheet {
  position:absolute;
  left:12px;
  right:12px;
  top:12px;
  bottom:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  border:1px solid rgba(255,255,255,.09);
  border-bottom:0;
  border-radius:30px 30px 0 0;
  background:linear-gradient(155deg,#0c182a 0%,#07111f 57%,#050b14 100%);
  box-shadow:0 -24px 80px rgba(0,0,0,.50);
  transform:translate3d(0,104%,0) scale(.985);
  transform-origin:50% 100%;
  opacity:.96;
  transition:transform .42s cubic-bezier(.22,.78,.22,1),opacity .30s ease;
  will-change:transform;
}
.now-playing-overlay.is-open .now-playing-overlay-scrim {
  opacity:1;
  backdrop-filter:blur(7px);
}
.now-playing-overlay.is-open .now-playing-sheet {
  transform:translate3d(0,0,0) scale(1);
  opacity:1;
}
.now-playing-overlay.is-closing .now-playing-sheet {
  transition-timing-function:cubic-bezier(.55,.08,.82,.42);
}
.now-playing-sheet .now-playing-page {
  min-height:calc(100dvh - 12px);
  border:0;
  border-radius:30px 30px 0 0;
  box-shadow:none;
  background:transparent;
}
.now-playing-sheet .now-playing-page::after {
  background:
    radial-gradient(circle at 22% 28%,rgba(16,192,181,.16),transparent 34%),
    radial-gradient(circle at 80% 15%,rgba(243,178,76,.08),transparent 28%),
    linear-gradient(105deg,rgba(5,13,24,.69),rgba(5,13,24,.92));
}
.now-playing-sheet .now-playing-backdrop { opacity:.22; filter:blur(62px) saturate(.95); }
.now-playing-sheet .now-playing-page-head {
  height:68px;
  padding:12px clamp(16px,2vw,28px) 0;
  position:sticky;
  top:0;
  z-index:8;
  background:linear-gradient(180deg,rgba(5,13,24,.72),rgba(5,13,24,0));
  backdrop-filter:blur(2px);
}
.now-playing-sheet .now-playing-back {
  font-size:28px;
  line-height:1;
  transform:translateY(-2px);
}
.now-playing-sheet .now-playing-layout {
  min-height:calc(100dvh - 92px);
  grid-template-columns:minmax(260px,460px) minmax(300px,620px);
  justify-content:center;
  gap:clamp(32px,6vw,88px);
  padding:12px clamp(26px,6vw,84px) 34px;
}
.now-playing-sheet .now-playing-artwork {
  width:min(40vw,52dvh,460px);
  max-width:100%;
  border-radius:24px;
}
.now-playing-sheet .now-playing-content h1 {
  font-size:clamp(36px,5.2vw,72px);
  line-height:.96;
}
.now-playing-sheet .now-playing-artist { margin-bottom:16px; }
.now-playing-sheet .now-playing-album { margin-bottom:24px; }
.now-playing-sheet .now-playing-progress-wrap { margin-top:14px; }
.now-playing-sheet .now-playing-controls { margin-top:19px; }
.now-playing-sheet .now-playing-up-next {
  width:min(1100px,calc(100% - 56px));
  margin:0 auto 54px;
  padding:20px 6px 8px;
  border-top:1px solid rgba(255,255,255,.07);
}
.now-playing-overlay-empty {
  min-height:100%;
  display:grid;
  place-content:center;
  gap:16px;
  text-align:center;
}
.now-playing-close {
  position:absolute;
  top:18px;
  left:20px;
  width:44px;
  height:44px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.05);
  color:#fff;
  font-size:28px;
}

/* Laptop / medium-height windows: keep the essentials above the fold. */
@media (min-width:721px) and (max-height:840px) {
  .now-playing-sheet .now-playing-page-head { height:56px; padding-top:7px; }
  .now-playing-sheet .now-playing-layout {
    min-height:calc(100dvh - 68px);
    grid-template-columns:minmax(220px,360px) minmax(280px,560px);
    gap:clamp(26px,5vw,62px);
    padding:4px clamp(22px,5vw,62px) 20px;
  }
  .now-playing-sheet .now-playing-artwork {
    width:min(35vw,calc(100dvh - 210px),360px);
  }
  .now-playing-sheet .now-playing-content h1 { font-size:clamp(32px,5vw,54px); margin:6px 0 6px; }
  .now-playing-sheet .now-playing-artist { font-size:16px; margin-bottom:10px; }
  .now-playing-sheet .now-playing-album { margin-bottom:14px; }
  .now-playing-sheet .now-playing-progress-wrap { margin-top:8px; }
  .now-playing-sheet .now-playing-controls { margin-top:12px; gap:12px; }
  .now-playing-sheet .now-playing-control { width:42px; height:42px; }
  .now-playing-sheet .now-playing-play { width:62px; height:62px; }
  .now-playing-sheet .now-playing-up-next { margin-top:8px; }
}

@media (min-width:721px) and (max-width:980px) {
  .now-playing-sheet .now-playing-layout {
    grid-template-columns:minmax(220px,340px) minmax(270px,1fr);
    gap:30px;
    padding-inline:28px;
  }
  .now-playing-sheet .now-playing-artwork { width:min(36vw,44dvh,340px); }
  .now-playing-sheet .now-playing-content h1 { font-size:clamp(34px,5.7vw,56px); }
}

@media (max-width:720px) {
  .now-playing-sheet { left:0; right:0; top:8px; border-radius:26px 26px 0 0; }
  .now-playing-sheet .now-playing-page { min-height:100dvh; border-radius:26px 26px 0 0; }
  .now-playing-sheet .now-playing-page-head { height:58px; padding:8px 13px 0; }
  .now-playing-sheet .now-playing-layout {
    min-height:auto;
    grid-template-columns:1fr;
    gap:18px;
    padding:6px 18px 28px;
  }
  .now-playing-sheet .now-playing-artwork {
    width:min(78vw,42dvh,390px);
    border-radius:20px;
  }
  .now-playing-sheet .now-playing-content { width:min(100%,520px); margin-inline:auto; }
  .now-playing-sheet .now-playing-content .eyebrow { display:none; }
  .now-playing-sheet .now-playing-content h1 { margin:0 0 5px; font-size:clamp(32px,9.5vw,48px); }
  .now-playing-sheet .now-playing-artist { margin-bottom:10px; font-size:15px; }
  .now-playing-sheet .now-playing-album { margin-bottom:16px; }
  .now-playing-sheet .now-playing-controls { margin-top:14px; gap:9px; }
  .now-playing-sheet .now-playing-up-next { width:calc(100% - 28px); margin-bottom:38px; }
}

@media (max-width:720px) and (max-height:760px) {
  .now-playing-sheet .now-playing-artwork { width:min(62vw,34dvh,270px); }
  .now-playing-sheet .now-playing-layout { gap:12px; padding-bottom:20px; }
  .now-playing-sheet .now-playing-content h1 { font-size:clamp(28px,8.5vw,40px); }
  .now-playing-sheet .now-playing-progress-wrap { margin-top:7px; }
  .now-playing-sheet .now-playing-controls { margin-top:10px; }
  .now-playing-sheet .now-playing-control { width:40px; height:40px; }
  .now-playing-sheet .now-playing-play { width:58px; height:58px; }
}

@media (prefers-reduced-motion:reduce) {
  .now-playing-overlay-scrim,.now-playing-sheet { transition-duration:.01ms !important; }
}

/* V2.8: queue controls must remain interactive above the immersive player. */
.now-playing-queue-button, .now-playing-up-next [data-now-action="queue"] { position:relative; z-index:30; pointer-events:auto !important; touch-action:manipulation; }
body.queue-open .now-playing-overlay { pointer-events:none; }
body.queue-open .queue-backdrop, body.queue-open .queue-panel { pointer-events:auto; }


/* V2.9 media copy deterrence. */
img, .album-cover, .detail-cover, .player-cover, .now-playing-artwork, .hero { -webkit-user-drag: none; }
img { user-select: none; -webkit-user-select: none; }


/* V2.10 protected artwork rendering: no catalog artwork is emitted as an <img src>. */
.protected-image {
  display:block;
  width:100%;
  height:100%;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  user-select:none;
  -webkit-user-select:none;
  -webkit-user-drag:none;
  pointer-events:none;
}
.hero-bg.protected-image,
.now-playing-backdrop.protected-image { pointer-events:none; }
.album-cover > .protected-image { transition:transform .35s ease; }
.album-card:hover .album-cover > .protected-image { transform:scale(1.025); }
.detail-cover > .protected-image,
.now-playing-artwork > .protected-image,
.now-playing-queue-cover > .protected-image,
.queue-thumb > .protected-image { width:100%; height:100%; }