:root {
  color-scheme: dark;
  --bg: #070908;
  --panel: #0e1110;
  --panel-2: #151917;
  --text: #f4f7f5;
  --muted: #929b96;
  --line: rgba(255, 255, 255, 0.08);
  --accent: #b7ff3c;
  --accent-2: #3cf2a2;
  --player-height: 96px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: var(--bg); color: var(--text); }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.app-shell { display: grid; grid-template-columns: 246px minmax(0, 1fr); min-height: 100vh; padding-bottom: var(--player-height); }
.sidebar { position: fixed; inset: 0 auto var(--player-height) 0; width: 246px; padding: 26px 18px 22px; background: #080a09; border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.brand { display: flex; align-items: center; gap: 11px; padding: 0 8px 25px; color: #fff; text-decoration: none; font-size: 15px; font-weight: 850; letter-spacing: .12em; }
.brand-mark { width: 29px; height: 29px; border-radius: 9px; background: var(--accent); display: flex; align-items: end; justify-content: center; gap: 3px; padding: 7px; box-shadow: 0 0 28px rgba(183, 255, 60, .2); }
.brand-mark i { width: 3px; border-radius: 2px; background: #0a0c0a; }
.brand-mark i:nth-child(1) { height: 8px; }.brand-mark i:nth-child(2) { height: 15px; }.brand-mark i:nth-child(3) { height: 11px; }
.primary-nav { display: grid; gap: 5px; }
.primary-nav a { display: flex; align-items: center; gap: 13px; padding: 11px 12px; color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 650; border-radius: 9px; }
.primary-nav a span { width: 20px; font-size: 22px; line-height: 1; }
.primary-nav a:hover, .primary-nav a.active { color: var(--text); background: var(--panel-2); }
.library-heading { display: flex; justify-content: space-between; align-items: center; margin: 30px 10px 10px; color: #737b77; font-size: 11px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.library-heading button, .playlist-list button { border: 0; background: transparent; cursor: pointer; }
.library-heading button { color: var(--muted); font-size: 22px; }
.playlist-list { display: grid; gap: 4px; }
.playlist-list button { padding: 8px 10px; color: var(--muted); text-align: left; font-size: 13px; border-radius: 8px; }
.playlist-list button:hover { color: var(--text); background: rgba(255,255,255,.04); }
.profile-chip { width:100%; margin-top:auto; border:0; border-top:1px solid var(--line); padding:17px 8px 0; display:flex; align-items:center; gap:10px; background:transparent; text-align:left; cursor:pointer; }
.profile-chip > span, .avatar { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: linear-gradient(145deg, var(--accent), var(--accent-2)); color: #071009; font-weight: 900; }
.profile-chip div { display: grid; }.profile-chip strong { font-size: 13px; }.profile-chip small { color: var(--muted); font-size: 11px; }

.main-view { grid-column: 2; min-width: 0; background: radial-gradient(circle at 50% -10%, rgba(76, 140, 87, .22), transparent 34%), linear-gradient(180deg, #151a17 0, #0b0e0c 470px, var(--bg) 800px); padding: 18px clamp(24px, 3.4vw, 54px) 64px; }
.topbar { height: 52px; display: grid; grid-template-columns: auto minmax(220px, 430px) 1fr; align-items: center; gap: 22px; }
.history-buttons { display: flex; gap: 8px; }.history-buttons button { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; background: rgba(5,7,6,.65); color: var(--muted); font-size: 25px; cursor: pointer; }
.search-box { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 15px; border-radius: 12px; background: rgba(255,255,255,.08); border: 1px solid transparent; }
.search-box:focus-within { border-color: rgba(183,255,60,.45); background: #161b18; }
.search-box span { color: var(--muted); font-size: 20px; }.search-box input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 13px; }
.search-box input::placeholder { color: #87908b; }.avatar { justify-self: end; cursor: pointer; }
.hero { padding: 58px 0 25px; }.eyebrow { color: var(--accent); font-size: 11px; font-weight: 900; letter-spacing: .19em; }.hero h1 { margin: 10px 0 8px; max-width: 720px; font-size: clamp(36px, 5.2vw, 72px); line-height: .98; letter-spacing: -.055em; }.hero p { margin: 0; max-width: 550px; color: #aeb6b2; font-size: 15px; }
.quick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 23px 0 42px; }
.quick-card { position: relative; height: 68px; display: flex; align-items: center; gap: 14px; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.075); cursor: pointer; text-align: left; transition: background .16s ease, transform .16s ease; }
.quick-card:hover { background: rgba(255,255,255,.13); transform: translateY(-1px); }.quick-copy { min-width:0;display:grid;gap:3px;padding-right:50px; }.quick-card strong { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px; }.quick-card small { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:9px; }.cover { width: 68px; height: 68px; flex: 0 0 68px; display: grid; place-items: center; font-weight: 950; box-shadow: 8px 0 24px rgba(0,0,0,.17); }.gradient-one { background: linear-gradient(145deg,#612bde,#b2a8ff); }.gradient-two { background: linear-gradient(145deg,#ff7d36,#ffcf69); color:#2a1308; }.gradient-three { background: linear-gradient(145deg,#125d52,#5beca7); }.gradient-four { background: linear-gradient(145deg,#20271d,#b7ff3c); color:#10150d; }.play-mini { position: absolute; right: 14px; width: 35px; height: 35px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: #081007; font-size: 12px; opacity: 0; transform: translateY(5px); transition: .16s ease; box-shadow: 0 8px 20px rgba(0,0,0,.35); }.quick-card:hover .play-mini { opacity: 1; transform: none; }
.content-section { margin-top: 8px; }.section-title { display: flex; align-items: end; justify-content: space-between; gap: 20px; }.section-title h2 { margin: 0; font-size: 23px; letter-spacing: -.025em; }.section-title p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }.section-title button { border: 0; background: transparent; color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; cursor: pointer; }
.taste-onboarding { display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:17px;padding:14px 16px;border:1px solid rgba(183,255,60,.2);border-radius:12px;background:linear-gradient(110deg,rgba(183,255,60,.1),rgba(255,255,255,.025)); }.taste-onboarding div { display:grid;gap:4px; }.taste-onboarding strong { font-size:13px; }.taste-onboarding span { color:var(--muted);font-size:10px; }.taste-onboarding button { flex:0 0 auto;padding:9px 12px;border:0;border-radius:999px;background:var(--accent);color:#0b1108;font-size:10px;font-weight:850;cursor:pointer; }
.album-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }.album-card { min-width:0;padding:11px 11px 16px;border:1px solid transparent;border-radius:12px;background:rgba(255,255,255,.035);color:var(--text);text-align:left;cursor:pointer; }.album-card:hover { background: rgba(255,255,255,.07); border-color: var(--line); }.album-art { position:relative;aspect-ratio:1;overflow:hidden;display:grid;place-items:center;border-radius:9px;box-shadow:0 15px 30px rgba(0,0,0,.25); }.album-art span { font-size: clamp(28px,4vw,58px); font-weight: 950; letter-spacing: -.09em; }.art-one { background: linear-gradient(145deg,#273c18,#b7ff3c); color:#11190b; }.art-two { background: linear-gradient(145deg,#1a1947,#696dff); }.art-three { background: radial-gradient(circle at 30% 20%,#ffb84a,transparent 32%),linear-gradient(145deg,#cf334e,#571e93); }.art-four { background: linear-gradient(145deg,#1e4c42,#46e8bd); color:#0a211a; }.album-card h3 { margin: 13px 2px 5px; font-size: 14px; }.album-card p { margin: 0 2px; color: var(--muted); font-size: 11px; line-height: 1.45; }

.player-bar { position: fixed; z-index: 10; inset: auto 0 0; height: var(--player-height); display: grid; grid-template-columns: minmax(230px, .9fr) minmax(360px, 1.25fr) minmax(200px, .9fr); align-items: center; gap: 20px; padding: 0 22px; background: linear-gradient(180deg,rgba(18,22,19,.98),rgba(9,12,10,.99)); backdrop-filter: blur(24px); border-top: 1px solid rgba(255,255,255,.1); box-shadow: 0 -18px 48px rgba(0,0,0,.28); }
.now-playing { display: flex; align-items: center; gap: 12px; min-width: 0; }.now-cover { position:relative;width:56px;height:56px;flex:0 0 56px;display:grid;place-items:center;overflow:hidden;border-radius:10px;background:linear-gradient(145deg,#263122,var(--accent));color:#10180d;font-weight:950;font-size:11px;box-shadow:0 10px 28px rgba(0,0,0,.28); }.now-cover img { position:absolute;inset:0;width:100%;height:100%;object-fit:cover; }.now-playing div:nth-child(2) { display: grid; min-width: 0; }.now-playing strong,.now-playing span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.now-playing strong { font-size: 12px; }.now-playing span { margin-top: 3px; color: var(--muted); font-size: 10px; }.now-playing button,.transport button,.player-actions button { border: 0; background: transparent; color: var(--muted); cursor: pointer; transition:color .16s ease,background .16s ease,transform .16s ease; }.now-playing button:hover,.transport button:hover,.player-actions button:hover { color:var(--text); }
.transport { display:grid;gap:7px; }.transport-buttons { display:flex;justify-content:center;align-items:center;gap:8px; }.control-button { position:relative;width:34px;height:34px;display:grid;place-items:center;border-radius:50%; }.control-button:hover { background:rgba(255,255,255,.06)!important;transform:translateY(-1px); }.control-button.is-active { color:var(--accent)!important; }.transport-buttons .play-main { width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:#606361;color:#090b0a;box-shadow:none; }.transport-buttons .play-main:hover { background:#777a78;color:#090b0a;transform:scale(1.05); }.player-icon { display:block;color:currentColor;line-height:1; }.icon-shuffle { font-size:19px;transform:rotate(-4deg); }.icon-repeat { font-size:21px;transform:rotate(-10deg); }.repeat-one { display:none;position:absolute;right:3px;top:1px;width:11px;height:11px;place-items:center;border-radius:50%;background:var(--accent);color:#10150d;font-size:7px;font-weight:900; }.repeat-mode-one .repeat-one { display:grid; }.icon-play { width:0;height:0;margin-left:2px;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:12px solid currentColor; }.play-main.is-playing .icon-play { width:14px;height:15px;margin:0;border:0;background:linear-gradient(90deg,currentColor 0 35%,transparent 35% 65%,currentColor 65% 100%); }.icon-previous,.icon-next { position:relative;width:16px;height:16px;border-left:3px solid currentColor; }.icon-previous::before,.icon-next::before { content:"";position:absolute;left:1px;top:1px;border-top:7px solid transparent;border-bottom:7px solid transparent;border-right:10px solid currentColor; }.icon-next { transform:scaleX(-1); }.progress { display:grid;grid-template-columns:34px 1fr 34px;align-items:center;gap:9px;color:#777d79;font-size:9px;font-variant-numeric:tabular-nums; }.progress input,.player-actions input { appearance:none;height:4px;border-radius:999px;background:#4b504d;accent-color:#d6d8d7;cursor:pointer; }.progress input { width:100%; }.progress input::-webkit-slider-thumb,.player-actions input::-webkit-slider-thumb { appearance:none;width:10px;height:10px;border-radius:50%;background:#d6d8d7;box-shadow:none; }.progress input::-moz-range-thumb,.player-actions input::-moz-range-thumb { width:10px;height:10px;border:0;border-radius:50%;background:#d6d8d7; }.player-actions { display:flex;justify-content:end;align-items:center;gap:8px;color:var(--muted); }.player-actions input { width:min(100px,8vw); }.queue-toggle { height:34px;display:flex;align-items:center;gap:7px;padding:0 11px!important;border-radius:999px!important;font-size:11px;font-weight:750; }.queue-toggle span { font-size:16px; }.queue-toggle:hover,.queue-toggle.active,.queue-toggle.is-active { background:rgba(255,255,255,.07)!important;color:var(--accent)!important; }.mute-button { width:34px;height:34px;display:grid;place-items:center;border-radius:50%!important; }.mute-button:hover { background:rgba(255,255,255,.07)!important; }.volume-symbol { position:relative;width:13px;height:13px;display:block;border-left:5px solid currentColor; }.volume-symbol::before { content:"";position:absolute;left:-9px;top:3px;width:5px;height:7px;background:currentColor;border-radius:2px 0 0 2px; }.volume-symbol::after { content:"";position:absolute;left:4px;top:1px;width:7px;height:9px;border:1.5px solid currentColor;border-left:0;border-radius:0 10px 10px 0; }.mute-button.muted .volume-symbol::after,.mute-button.is-muted .volume-symbol::after { width:8px;height:1px;top:6px;left:3px;border:0;border-top:2px solid currentColor;transform:rotate(-45deg);border-radius:0; }

.search-view,.library-view { min-height:calc(100vh - 180px);padding:52px 0 30px; }.view-heading h1 { margin:8px 0 9px;font-size:clamp(38px,5vw,66px);letter-spacing:-.055em; }.view-heading p { margin:0;color:var(--muted); }.search-empty { min-height:330px;display:grid;place-items:center;align-content:center;gap:10px;color:var(--muted);text-align:center; }.search-empty div { width:68px;height:68px;display:grid;place-items:center;border-radius:50%;background:var(--panel-2);font-size:34px;color:var(--accent); }.search-empty strong { color:var(--text);font-size:18px; }.search-empty span { max-width:470px;font-size:12px;line-height:1.5; }.results-heading { display:flex;align-items:end;justify-content:space-between;margin:34px 0 12px; }.results-heading h2 { margin:0;font-size:22px; }.results-heading small { display:block;min-height:14px;margin-top:3px;color:var(--muted);font-size:10px; }.results-heading span { color:var(--muted);font-size:11px; }
.track-list { display:grid; }.track-row { display:grid;grid-template-columns:48px minmax(0,1.5fr) minmax(100px,.8fr) 60px 210px;align-items:center;gap:13px;padding:7px 9px;border-radius:11px;color:var(--muted);cursor:pointer;transition:background .14s ease,transform .14s ease; }.track-row:hover,.track-row.playing { background:rgba(255,255,255,.07); }.track-row:hover { transform:translateX(2px); }.track-row.playing .track-title { color:var(--accent); }.track-art { position:relative;width:48px;height:48px;display:grid;place-items:center;overflow:hidden;border-radius:8px;background:linear-gradient(145deg,#263122,var(--accent));color:#11180e;font-size:10px;font-weight:900;box-shadow:0 7px 18px rgba(0,0,0,.18); }.track-art .fallback-art { position:absolute;inset:0;display:grid;place-items:center; }.track-art img,.album-art img { position:relative;width:100%;height:100%;object-fit:cover; }.track-copy { min-width:0;display:grid;gap:3px; }.track-title,.track-artist { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }.track-title { color:var(--text);font-size:13px;font-weight:700; }.track-artist,.track-source,.track-duration { font-size:11px; }.track-source { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }.track-actions { display:flex;justify-content:end;gap:4px; }.track-actions button { width:31px;height:31px;display:grid;place-items:center;border:0;border-radius:9px;background:transparent;color:var(--muted);cursor:pointer;transition:background .14s ease,color .14s ease,transform .14s ease; }.track-actions button:hover,.track-actions button.active { color:var(--accent);background:rgba(183,255,60,.09);transform:translateY(-1px); }
.library-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:34px; }.playlist-card { min-height:170px;padding:18px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(145deg,rgba(183,255,60,.09),rgba(255,255,255,.025));cursor:pointer;display:flex;flex-direction:column;justify-content:end;transition:.16s ease; }.playlist-card:hover { border-color:rgba(183,255,60,.35);transform:translateY(-2px); }.playlist-card span { color:var(--accent);font-size:11px;font-weight:900;letter-spacing:.1em; }.playlist-card strong { margin-top:8px;font-size:18px; }.playlist-card small { margin-top:5px;color:var(--muted); }.dynamic-section { margin-top:42px; }
.collection-shell { grid-column:1/-1;min-width:0; }.play-all-button { padding:10px 15px;border:0;border-radius:999px;background:var(--accent);color:#0b1108;font-size:11px;font-weight:900;cursor:pointer; }.collection-shell .results-heading { margin-top:0; }
.loading-row { height:62px;border-radius:9px;background:linear-gradient(90deg,rgba(255,255,255,.03),rgba(255,255,255,.08),rgba(255,255,255,.03));background-size:220% 100%;animation:shimmer 1.2s infinite; }.loading-inline { opacity:.55;pointer-events:none; }.loading-inline-row { min-height:52px;display:flex;align-items:center;justify-content:center;gap:9px;color:var(--muted);font-size:11px; }.loading-inline-row i { width:14px;height:14px;border:2px solid rgba(255,255,255,.14);border-top-color:var(--accent);border-radius:50%;animation:spin .75s linear infinite; }.is-active { color:var(--accent)!important; } @keyframes shimmer { to { background-position:-220% 0; } } @keyframes spin { to { transform:rotate(360deg); } }
.modal { width:min(420px,calc(100vw - 30px));padding:30px;border:1px solid var(--line);border-radius:20px;background:#111512;color:var(--text);box-shadow:0 30px 90px rgba(0,0,0,.65); }.modal::backdrop { background:rgba(0,0,0,.72);backdrop-filter:blur(8px); }.modal-close { position:absolute;right:16px;top:13px;border:0;background:transparent;color:var(--muted);font-size:27px;cursor:pointer; }.modal-brand { display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.1em; }.modal h2 { margin:23px 0 7px;font-size:27px;letter-spacing:-.035em; }.modal > p { margin:0 0 20px;color:var(--muted);font-size:12px;line-height:1.5; }.auth-tabs { display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:10px;background:#090b0a;margin-bottom:18px; }.auth-tabs button { padding:9px;border:0;border-radius:8px;background:transparent;color:var(--muted);font-size:12px;font-weight:750;cursor:pointer; }.auth-tabs button.active { background:var(--panel-2);color:var(--text); }.modal form { display:grid;gap:13px; }.modal label { display:grid;gap:6px;color:#bbc2be;font-size:11px;font-weight:700; }.modal input { width:100%;height:43px;border:1px solid var(--line);border-radius:10px;background:#080a09;color:var(--text);outline:0;padding:0 12px; }.modal input:focus { border-color:rgba(183,255,60,.45); }.primary-button,.secondary-button { height:43px;border:0;border-radius:10px;font-weight:850;cursor:pointer; }.primary-button { margin-top:5px;background:var(--accent);color:#0b1008; }.secondary-button { width:100%;background:var(--panel-2);color:var(--text); }.form-error { min-height:15px;color:#ff7d83;font-size:11px;text-align:center; }.picker-list { display:grid;gap:5px;margin:18px 0;max-height:250px;overflow:auto; }.picker-list button { padding:12px;border:1px solid var(--line);border-radius:9px;background:#0b0e0c;color:var(--text);text-align:left;cursor:pointer; }.picker-list button:hover { border-color:var(--accent); }
.queue-panel { position:fixed;z-index:30;right:14px;bottom:calc(var(--player-height) + 14px);width:min(390px,calc(100vw - 28px));max-height:64vh;overflow:auto;padding:18px;border:1px solid rgba(255,255,255,.11);border-radius:18px;background:linear-gradient(180deg,rgba(23,28,24,.99),rgba(11,14,12,.99));box-shadow:0 28px 80px rgba(0,0,0,.62);backdrop-filter:blur(22px); }.queue-head { display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;padding:0 3px 4px; }.queue-head div { display:grid; }.queue-head span { color:var(--accent);font-size:9px;font-weight:900;letter-spacing:.14em; }.queue-head strong { margin-top:3px;font-size:18px; }.queue-head-actions { display:flex!important;grid-auto-flow:column;align-items:center;gap:5px; }.queue-head button { border:0;background:transparent;color:var(--muted);cursor:pointer; }.queue-head-actions button:first-child { padding:7px 9px;border-radius:8px;font-size:10px;font-weight:750; }.queue-head-actions button:first-child:hover { background:rgba(255,255,255,.07);color:var(--text); }.queue-head-actions button:last-child { width:30px;height:30px;border-radius:50%;font-size:22px; }.queue-head-actions button:last-child:hover { background:rgba(255,255,255,.07); }.queue-item { display:grid;grid-template-columns:42px minmax(0,1fr) 27px;align-items:center;gap:10px;padding:8px;border-radius:10px;cursor:pointer; }.queue-item:hover,.queue-item.active { background:rgba(255,255,255,.065); }.queue-item.active { box-shadow:inset 2px 0 var(--accent); }.queue-art { position:relative;width:42px;height:42px;overflow:hidden;border-radius:7px;background:var(--panel-2); }.queue-art img,.queue-art .fallback-art { position:absolute;inset:0;width:100%;height:100%;display:grid;place-items:center;object-fit:cover;background:linear-gradient(145deg,#263122,var(--accent));color:#11180e;font-size:9px;font-weight:900; }.queue-copy { min-width:0;display:grid;gap:3px; }.queue-item strong,.queue-item span { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }.queue-item strong { font-size:11px; }.queue-item span { color:var(--muted);font-size:9px; }.queue-item button { width:27px;height:27px;border:0;border-radius:8px;background:transparent;color:var(--muted);font-size:18px;cursor:pointer; }.queue-item button:hover { background:rgba(255,125,131,.1);color:#ff9499; }.playing-bars { display:flex!important;align-items:end;justify-content:center;gap:2px;width:22px;height:18px; }.playing-bars i { width:2px;background:var(--accent);animation:bars .8s ease-in-out infinite alternate; }.playing-bars i:nth-child(1) { height:7px; }.playing-bars i:nth-child(2) { height:14px;animation-delay:.2s; }.playing-bars i:nth-child(3) { height:10px;animation-delay:.4s; }.queue-empty { display:grid;gap:5px;padding:30px 16px;text-align:center; }.queue-empty strong { font-size:13px; }.queue-empty span { color:var(--muted);font-size:10px;line-height:1.5; } @keyframes bars { to { height:4px;opacity:.55; } }
.toast { position:fixed;z-index:50;left:50%;bottom:calc(var(--player-height) + 18px);transform:translate(-50%,20px);padding:11px 16px;border:1px solid var(--line);border-radius:10px;background:#202621;color:var(--text);font-size:12px;opacity:0;pointer-events:none;transition:.2s ease;box-shadow:0 12px 30px rgba(0,0,0,.4); }.toast.show { opacity:1;transform:translate(-50%,0); }

@media (max-width: 900px) { .app-shell { grid-template-columns: 88px minmax(0,1fr); }.sidebar { width: 88px; padding-inline: 12px; }.brand > span:last-child,.primary-nav a:not(.active){ font-size:0; }.primary-nav a span { font-size:22px; }.primary-nav a { justify-content:center; }.library-heading,.playlist-list,.profile-chip div { display:none; }.profile-chip { justify-content:center; }.main-view { grid-column:2; }.album-row { grid-template-columns:repeat(2,minmax(0,1fr)); }.player-bar { grid-template-columns:minmax(170px,.8fr) minmax(280px,1.2fr) auto;gap:12px; }.player-actions input,.mute-button { display:none; }.queue-toggle b { display:none; }.queue-toggle { width:38px;padding:0!important;justify-content:center; } }
@media (max-width: 620px) { :root { --player-height: 78px; }.app-shell { display:block; padding-bottom:calc(var(--player-height) + 62px); }.sidebar { position:fixed; z-index:20; inset:auto 0 var(--player-height); width:auto; height:62px; padding:0 14px; border:0; border-top:1px solid var(--line); flex-direction:row; align-items:center; background:#0b0e0c; }.brand,.library-heading,.playlist-list,.profile-chip { display:none; }.primary-nav { width:100%; display:flex; justify-content:space-around; }.primary-nav a,.primary-nav a:not(.active) { display:grid; place-items:center; gap:2px; min-width:72px; padding:7px; font-size:9px; }.primary-nav a span { width:auto; font-size:20px; }.main-view { padding:12px 15px 38px; }.topbar { grid-template-columns:1fr auto; }.history-buttons { display:none; }.hero { padding-top:39px; }.hero h1 { font-size:39px; }.quick-grid { grid-template-columns:1fr; }.quick-card:nth-child(n+4) { display:none; }.taste-onboarding { align-items:flex-start;flex-direction:column; }.album-row { display:flex; overflow:auto; padding-bottom:8px; scroll-snap-type:x mandatory; }.album-card { flex:0 0 154px; scroll-snap-align:start; }.section-title p { display:none; }.player-bar { grid-template-columns:minmax(0,1fr) auto auto;height:var(--player-height);gap:6px;padding:0 10px; }.transport { display:flex; }.transport-buttons button { display:none; }.transport-buttons .play-main { display:grid;width:40px;height:40px; }.progress { display:none; }.now-cover { width:48px;height:48px;flex-basis:48px; }.now-playing > button { display:none; }.queue-toggle { width:36px;height:36px; } }
@media (max-width:900px) { .library-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.track-row { grid-template-columns:46px minmax(0,1fr) 58px 144px; }.track-source { display:none; } }
@media (max-width:620px) { .track-row { grid-template-columns:44px minmax(0,1fr) 72px;padding-inline:3px; }.track-duration { display:none; }.track-actions button:not([data-next-track]):not([data-queue-track]) { display:none; }.library-grid { grid-template-columns:1fr 1fr; }.playlist-card { min-height:135px;padding:13px; }.toast { bottom:calc(var(--player-height) + 72px); }.queue-panel { bottom:calc(var(--player-height) + 70px); } }