/* PRCMN phone layout — rebuilt from Spotify Android 9.1.98.
   Loaded only on touch phones: <link media="(max-width: 860px) and (hover: none)">.
   Sizes come from the APK's resources/code and from screenshots of the app on a 411dp-wide emulator;
   1dp is taken as 1 CSS px. Sections follow the screens: shell, nav, mini player, Home, Search,
   rows, detail pages, Now Playing, then the rest. */

/* ---------- design tokens (all measured on the device) ----------
   base #121212 · tiles #2a2a2a · chips #333 · accent #1ed760.
   Translucency, as Spotify layers it:
   1. bottom scrim — black fading in from ~130dp above the screen edge: alpha .11 → .67 → .79 at the
      tab bar's top → 1; content stays visible through it, the mini player floats on it;
   2. page tint — the cover's colour fading into #121212 (album/playlist over 470dp, artist over the
      120dp under the photo); Home has none;
   3. buttons over artwork — round, black at 35%;
   4. Now Playing — the cover's colour fading down to #121212, never a blur. */
:root { --player-h: 56px; --navm-h: 48px; --edge: 16px; --over-art: rgba(0, 0, 0, 0.35); }
#app { display: flex; flex-direction: column; padding: 0; gap: 0; }
#gbar, #sidebar { display: none; }
#main, html[data-theme="light"] #main { border-radius: 0; background-image: none; }
#view, #view:has(> .home-top) { padding: 18px var(--edge) 30px; }
body.has-player #main { margin-bottom: 0; padding-bottom: calc(var(--navm-h) + 84px); }
body.float-mode.has-player #main { padding-bottom: calc(var(--navm-h) + 16px); }
.page-title { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 16px; }
.shelf { margin-bottom: 32px; }
/* section header: 22sp bold, 10dp above its row (home_section_header_bottom_spacing) */
.shelf-title { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 10px; }
.shelf-all { font-size: 13px; }
#toast { bottom: calc(var(--navm-h) + 84px); }

/* ---------- bottom navigation (Compose tab bar, read from the APK) ----------
   equal-width tabs, 48dp min height, 2dp side / 1dp bottom padding, 4dp top padding,
   24dp icon, 4dp gap, 11sp regular label; #fff selected, #b3b3b3 idle */
#nav-mobile {
  display: flex; position: fixed; left: 0; right: 0; bottom: 0; height: var(--navm-h); z-index: 45;
  padding-bottom: env(safe-area-inset-bottom); background: none;
}
/* the bottom scrim (token 1): starts 82dp above the tab bar and reaches black at the screen edge */
#nav-mobile::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--navm-h) + 82px);
  z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.11) 6px, rgba(0, 0, 0, 0.67) 56px,
    rgba(0, 0, 0, 0.79) 82px, #000 100%);
}
html[data-theme="light"] #nav-mobile::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.67) 56px, #fff 100%);
}
#nav-mobile .nav-item {
  flex: 1; flex-direction: column; gap: 4px; min-height: 48px; padding: 4px 2px 1px;
  justify-content: flex-start; align-items: center; border-radius: 0;
  font-size: 11px; font-weight: 400; letter-spacing: 0;
}

/* ---------- mini player (now_playing_bar.xml / floating_now_playing_bar_*) ----------
   56dp tall, 8dp margins and radius, cover-coloured, 40dp art, ⊕ and a plain Play/Pause at 40dp,
   2dp progress line inset 8dp */
#miniplayer {
  left: 8px; right: 8px; bottom: calc(var(--navm-h) + 8px); height: 56px; z-index: 46; /* floats on the scrim */
  display: flex; align-items: center; gap: 0; padding: 0 8px; border: none; border-radius: 8px;
  background: var(--art-bg, #282828); transition: background 0.4s;
  backdrop-filter: blur(20px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.pb-left { flex: 1; padding-left: 0; gap: 12px; }
#mini-art { width: 40px; height: 40px; }
#mini-title { font-size: 13px; font-weight: 700; color: #fff; }
#mini-artist { font-size: 13px; margin-top: 0; color: rgba(255, 255, 255, 0.7); }
#miniplayer .icon-btn:not(.liked) { color: #fff; }
.pb-left #mini-like { width: 40px; height: 40px; margin-left: auto; }
.pb-left #mini-like .ic { width: 24px; height: 24px; }
#mini-float, #mini-queue-m, #mini-shuffle, #mini-prev, #mini-next, #mini-repeat { display: none !important; }
.pb-center { flex-direction: row; max-width: none; width: auto; }
.pb-seek { position: absolute; left: 8px; right: 8px; bottom: 0; width: auto; }
.pb-seek span { display: none; }
.pb-bar { height: 2px; }
.pb-buttons { gap: 0; }
.pb-buttons .play-circle { width: 40px; height: 40px; margin: 0; background: none; color: #fff; box-shadow: none; }
.pb-buttons .play-circle .ic { width: 24px; height: 24px; }

/* ---------- chips (scroll sideways; selected = green with black text) ---------- */
.chip-row, .search-chips {
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
  margin-inline: calc(-1 * var(--edge)); padding-inline: var(--edge);
}
.chip-row::-webkit-scrollbar, .search-chips::-webkit-scrollbar, .carousel::-webkit-scrollbar { display: none; }
.chip { flex-shrink: 0; white-space: nowrap; height: 32px; padding: 0 16px; background: #333; color: #fff; font-size: 14px; }
.chip.active { background: #1ed760; color: #000; }
html[data-theme="light"] .chip:not(.active) { background: rgba(0, 0, 0, 0.07); color: var(--text); }

/* ---------- Home ----------
   header: a 32dp circle (avatar slot, here the theme switch) then the chips, 8dp apart;
   shortcuts: 2 columns 8dp apart, 48dp tiles with a 48dp cover, 4dp corners, 13sp bold title up to 2 lines;
   shelves: 164dp cards 16dp apart, 4dp corners, 13sp bold title over a 13sp grey subtitle */
.home-top { margin: -18px calc(-1 * var(--edge)) 16px; padding: 18px var(--edge) 10px; gap: 12px; }
.home-top .chip-row { margin-inline: 0 calc(-1 * var(--edge)); padding-inline: 0 var(--edge); gap: 8px; }
.home-theme { display: flex; width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; }
/* Home has no tint; once content scrolls under it the chip header is solid #121212 */
#main.scrolled .home-top, html[data-theme="light"] #main.scrolled .home-top { background: var(--main-bg); }
.quick-grid { grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 32px; }
.quick-card {
  height: 48px; gap: 8px; border-radius: 4px; background: #2a2a2a; box-shadow: none;
  font-size: 13px; font-weight: 700;
}
html[data-theme="light"] .quick-card { background: rgba(0, 0, 0, 0.06); }
.quick-card img, .art-ph-quick { width: 48px; height: 48px; }
.quick-card .qc-t {
  white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  line-height: 1.25; padding-right: 12px;
}
.carousel-wrap { margin-inline: 0; }
.carousel { grid-auto-columns: 164px; gap: 16px; scrollbar-width: none; }
.card { width: 164px; padding: 0; }
.card .art { width: 164px; height: 164px; border-radius: 4px; box-shadow: none; }
.card.artist .art { border-radius: 50%; }
.card .t { margin-top: 8px; font-size: 13px; font-weight: 700; line-height: 18px; }
.card .s { font-size: 13px; line-height: 18px; }
.shelf.expanded .carousel { grid-template-columns: repeat(auto-fill, 164px); }
.chart-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-inline: 0; gap: 16px; }
.chart-grid .card { width: auto; max-width: none; padding: 0; }

/* ---------- Search ----------
   browse page: white 48dp field with 6dp corners; "Browse all" tiles 2 columns, 68dp tall, 16dp apart.
   results: dark #363636 field, chips, then one flat list of rows ("Song • artist", artists round) */
.search-bar {
  background: #fff; border: none; border-radius: 6px; min-height: 48px; padding: 0 12px; gap: 12px;
}
.search-bar input { font-size: 16px; font-weight: 700; color: #000; }
.search-bar .search-ic, .search-bar .search-clear { color: #000; }
.search-bar input::placeholder { color: #535353; }
.search-bar:focus-within { background: #fff; border-color: transparent; box-shadow: none; }
.search-bar.has-q { background: #363636; border-radius: 6px; }
.search-bar.has-q input, .search-bar.has-q .search-ic, .search-bar.has-q .search-clear { color: #fff; }
.search-bar.has-q:focus-within { background: #363636; }
.mood-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.mood-card { aspect-ratio: auto; height: 68px; padding: 10px; border-radius: 4px; font-size: 16px; font-weight: 700; }
.mc-art { width: 64px; } /* the app's tilted cover is ~64dp on a 68dp tile */
.sr-flat { display: flex; flex-direction: column; }
/* Spotify shows no "All" chip until a filter is picked */
.search-chips .chip[data-f="all"].active { display: none; }

/* ---------- rows ----------
   Encore row (row_layout.xml): 64dp min height, 8dp vertical padding, 48dp artwork, 12dp gaps,
   16sp title (BodyMedium) over a 13sp subtitle (BodySmall) 2dp below, ⋮ only */
.track { gap: 12px; padding: 8px 0; min-height: 64px; border-radius: 0; }
.track img, .track .art-ph-track { width: 48px; height: 48px; }
.track .tt { font-size: 16px; }
.track .ts { font-size: 13px; margin-top: 2px; }
.track .tbtn { display: none; }
.track .btn-more { display: inline-flex !important; opacity: 1; }
.track .btn-qrm, .track .btn-qup, .track .btn-qdn { display: none !important; }
.track.q-user, .track.pl-track { cursor: pointer; }
.track .tdur, .track-head, .tcol { display: none; } /* Spotify's phone rows have no duration or column header */
.track.playing .eq { display: none; }
.track-list .t-num { display: none; }
/* album: no cover, title over artist */
.track-list.no-art .track { min-height: 56px; }
/* artist "Popular": rank, cover, title over the play count */
.track-list.artist-top .t-num { display: block; width: 16px; text-align: center; font-size: 16px; color: var(--muted); }
.track-list.artist-top .track .ts { display: none; }
.track-list.artist-top .track { display: grid; grid-template-columns: 16px 48px minmax(0, 1fr) auto; grid-template-rows: auto auto; }
.track-list.artist-top .track > .t-num, .track-list.artist-top .track > img, .track-list.artist-top .track > .art-ph-track { grid-row: 1 / 3; align-self: center; }
.track-list.artist-top .track > .tmeta { grid-column: 3; grid-row: 1; align-self: end; }
.track-list.artist-top .track > .tcol { display: block; grid-column: 3; grid-row: 2; align-self: start; margin-top: 2px; font-size: 13px; color: var(--muted); }
.track-list.artist-top .track > .btn-more { grid-column: 4; grid-row: 1 / 3; align-self: center; }
/* Library and search results show cards as rows */
.lib-grid, .sr-flat { gap: 0; }
.lib-grid { display: flex; flex-direction: column; }
.lib-grid .card, .sr-flat .card {
  width: auto; display: grid; grid-template-columns: 48px minmax(0, 1fr); grid-template-rows: auto auto;
  column-gap: 12px; align-content: center; min-height: 64px; padding: 8px 0; border-radius: 0;
}
.lib-grid .card .art, .sr-flat .card .art { grid-row: 1 / 3; width: 48px; height: 48px; border-radius: 4px; align-self: center; }
.lib-grid .card.artist .art, .sr-flat .card.artist .art { border-radius: 50%; }
.lib-grid .card .art .play-ov, .sr-flat .card .art .play-ov { display: none; }
.lib-grid .card .liked-heart { width: 45%; height: 45%; }
.lib-grid .card .t, .sr-flat .card .t { margin-top: 0; font-size: 16px; font-weight: 400; align-self: end; }
.lib-grid .card .s, .sr-flat .card .s { margin-top: 2px; font-size: 13px; -webkit-line-clamp: 1; align-self: start; }
#queue-list, #related-list { padding: 0; }
.q-head { padding: 14px 0 6px; font-size: 11px; letter-spacing: 0.03em; }
.q-note { display: none; }
.q-hint { padding: 4px 0 10px; font-size: 12.5px; }

/* ---------- album / playlist / artist pages ----------
   album & playlist: cover centred, 60% of the width (247dp of 411), title 24sp bold left-aligned,
   meta 13sp; action row (header_action_row_*): 48dp buttons, 4dp start / 8dp end margin,
   shuffle then a 52dp play at the end.
   artist: full-bleed photo with the name (48sp bold) over its bottom edge */
/* page tint (token 2): one gradient behind header and action row, from the cover's colour (#view's --art-bg,
   set by applyArtColor) to the page colour; the top value matches the app at ~58% of our extracted colour */
#view:has(> .detail-head) {
  background: linear-gradient(180deg, color-mix(in srgb, var(--art-bg, #535353) 58%, var(--main-bg)) 0, var(--main-bg) 470px) no-repeat;
}
#view:has(> .detail-head.artist) {
  background: linear-gradient(180deg, color-mix(in srgb, var(--art-bg, #535353) 58%, var(--main-bg)) calc(73vw), var(--main-bg) calc(73vw + 120px)) no-repeat;
}
.detail-head, html[data-theme="light"] .detail-head, .detail-actions, html[data-theme="light"] .detail-actions { background: none; border-radius: 0; }
/* back button over the artwork (token 3) */
body:has(#view > .detail-head):not(.np-open) #m-back {
  display: flex; position: fixed; top: 8px; left: 8px; z-index: 40; width: 40px; height: 40px;
  align-items: center; justify-content: center; border-radius: 50%; background: var(--over-art); color: #fff;
}
#m-back .ic { width: 24px; height: 24px; }
.detail-head {
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
  margin: -18px calc(-1 * var(--edge)) 0; padding: 48px var(--edge) 8px; text-align: left;
}
.detail-head img, .detail-head .detail-ph {
  width: min(60vw, 260px); height: min(60vw, 260px); align-self: center; border-radius: 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); margin-bottom: 16px;
}
.detail-head .detail-info { flex: 0 0 auto; min-width: 0; }
.detail-bar { display: none; } /* desktop's sticky bar */
.detail-kicker { display: none; }
.detail-info h1 { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; margin: 0 0 8px; }
.detail-head .sub { font-size: 13px; color: var(--muted); }
.detail-desc { font-size: 13px; }
.detail-head.artist { position: relative; padding: 0; min-height: calc(73vw); justify-content: flex-end; }
.cat-head { justify-content: flex-end; } /* title at the foot of the coloured header, as on desktop */
.detail-head.artist img, .detail-head.artist .detail-ph {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; margin: 0; box-shadow: none;
}
.detail-head.artist .detail-info {
  position: relative; padding: 48px var(--edge) 12px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.55));
}
.detail-head.artist h1 { font-size: 48px; font-weight: 800; letter-spacing: -0.04em; margin: 0 0 4px; color: #fff; }
.detail-head.artist .sub { color: rgba(255, 255, 255, 0.8); }
.detail-actions {
  display: flex; align-items: center; flex-wrap: nowrap; gap: 0;
  margin: 0 calc(-1 * var(--edge)) 8px; padding: 8px 8px 8px 4px;
}
.detail-actions .pill-btn:not(.primary):not(.follow) { width: 48px; height: 48px; justify-content: center; flex-shrink: 0; }
.detail-actions .pill-btn:not(.primary) .ic { width: 24px; height: 24px; }
.detail-actions .pill-btn.follow { margin: 0 12px; height: 32px; padding: 0 15px; font-size: 13px; font-weight: 700; }
#pl-shuffle, #br-shuffle { order: 1; margin-left: auto; }
.detail-actions .pill-btn.primary { order: 2; width: 52px; height: 52px; }
.pl-form-cover { width: 100px; height: 100px; }
.pl-form-actions { flex-direction: column-reverse; }
.pl-form-actions .pill-btn { width: 100%; justify-content: center; }

/* ---------- Now Playing ----------
   measured on the device (411x914dp): 24dp side margins; header = chevron, two centred lines
   ("Playing from Playlist" 11sp over the 13sp bold name), ⋮; the cover fills the width under it;
   then the current lyric line, the 20sp bold title with ⊕ at the right, the 3dp seek bar with 12sp times
   under it, the controls row (shuffle, prev 32dp, 64dp white play, next 32dp, repeat), and a bottom row
   (connect on the left, share and queue on the right). There is no tab row. */
body.np-open.has-player #nowplaying { margin-bottom: 0; }
/* token 4: the cover's colour fading to #121212 (the device shows ~42% of our extracted colour at the top) */
#nowplaying, html[data-theme="light"] #nowplaying {
  background: linear-gradient(180deg, color-mix(in srgb, var(--art-bg, #535353) 42%, #121212) 0, #121212 100%);
}
#np-bg { display: none; }
.np-handle { display: none; }
.np-inner { padding: 8px 24px calc(12px + env(safe-area-inset-bottom)); }
.np-topbar { min-height: 48px; }
.np-topbar .icon-btn { background: none; width: 40px; height: 40px; margin-inline: -8px; }
#nowplaying #np-more-top { display: flex; }
#nowplaying #np-sleep { display: none; }
.np-caption { font-size: 13px; font-weight: 700; letter-spacing: 0; text-transform: none; color: #fff; line-height: 1.3; text-align: center; }
.np-caption::before { content: attr(data-kind); display: block; font-size: 11px; font-weight: 400; color: #b3b3b3; }
.np-caption[data-kind=""]::before { display: none; }
.np-tabs { display: none; }
.np-pane { padding: 4px 0; }
#np-player.active {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr auto auto auto auto auto; align-content: stretch;
  overflow: hidden auto; padding: 40px 0 0; gap: 0; /* the cover starts ~56dp under the header */
}
#np-player.active > * { grid-column: 1 / -1; }
/* music video, as in Spotify's app: the video fills the whole Now Playing screen behind the controls, cropped like
   Canvas, with dark fades top and bottom so the header and controls stay readable */
/* the audio/video pill sits on the plain background in audio mode: Spotify's tinted #1affffff (#24ffffff pressed) */
body:not(.np-video) #np-vswitch:not(.on-media) { background: rgba(255, 255, 255, 0.1); }
body:not(.np-video) #np-vswitch:not(.on-media):active { background: rgba(255, 255, 255, 0.14); color: #fff; }
body.np-video #nowplaying { background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0, transparent 20%, transparent 45%, rgba(0, 0, 0, 0.85) 100%); }
body.np-video #np-player.active > .np-art-wrap { aspect-ratio: 1; min-height: 0; visibility: hidden; }
body.np-video #yt-holder { inset: 0; width: 100vw; height: 100vh; z-index: 59; } /* vh, not dvh: a resize makes YouTube rebuffer, and dvh changes whenever the address bar moves */
body.np-video #yt-holder iframe, body.np-video #yt-player {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: max(100vw, 177.78vh) !important; height: max(100vh, 56.25vw) !important;
}
#np-player.active > .np-art-wrap {
  grid-row: 1; justify-self: center; width: min(100%, 46vh); height: auto; aspect-ratio: 1; filter: none; transform: none;
}
#np-art { border-radius: 4px; }
#np-player.active > #np-lyric-preview {
  grid-row: 3; align-self: end; text-align: left; max-width: none; margin-bottom: 20px;
  font-size: 16px; font-weight: 700; color: #fff; text-shadow: none; min-height: 0;
}
#np-player.active > .np-meta { grid-row: 4; grid-column: 1; text-align: left; }
#np-player.active > .np-actions { grid-row: 4; grid-column: 2; align-self: center; width: auto; gap: 0; }
/* previewing a song you are not playing adds Play next and Add to queue: too wide to share the title's row on a
   phone, so the whole action row sits above the title */
#nowplaying.previewing #np-player.active > .np-actions { grid-row: 3; grid-column: 1 / -1; align-self: end; justify-content: flex-start; flex-wrap: nowrap; gap: 8px; margin: 12px 0 16px; }
/* 32px pills like the other small buttons here, so both fit beside the + on a 360px screen */
#nowplaying.previewing .np-actions .pill-btn { height: 32px; padding: 0 14px; font-size: 13px; min-width: 0; flex-shrink: 1; white-space: nowrap; overflow: hidden; }
#nowplaying.previewing .np-actions #np-like { margin-left: auto; flex-shrink: 0; }
#nowplaying.previewing #np-lyric-preview { display: none; }
/* that row is 60px more than the playing view has: a short screen has no spare room for it, so the cover gives
   it up (a tall phone's cover is capped by the screen width and barely changes) */
#nowplaying.previewing #np-player.active > .np-art-wrap { width: min(100%, calc(46vh - 60px)); }
#np-title {
  font-size: 20px; font-weight: 700; line-height: 1.22; letter-spacing: -0.01em; padding: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word;
}
#np-artist { font-size: 16px; font-weight: 400; color: #b3b3b3; margin-top: 2px; padding: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#np-addpl, #np-more, .np-volume, #np-float { display: none !important; }
.np-actions #np-like { padding: 0; width: 48px; height: 48px; justify-content: flex-end; background: none; border: none; color: #fff; }
.np-actions #np-like.liked { color: var(--accent-bright); }
.np-actions #np-like span { display: none; }
.np-actions #np-like .ic { width: 28px; height: 28px; }
#np-player.active > .np-seek {
  grid-row: 5; max-width: none; margin-top: 12px;
  flex-wrap: wrap; row-gap: 0; justify-content: space-between; font-size: 12px; color: #b3b3b3;
}
.np-seek input { order: -1; flex: 0 0 100%; -webkit-appearance: none; appearance: none; background: transparent; margin: 0; }
.np-seek input::-webkit-slider-runnable-track {
  height: 3px; border-radius: 2px;
  background: linear-gradient(to right, #fff var(--pct, 0%), rgba(255, 255, 255, 0.3) var(--pct, 0%));
}
.np-seek input::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -4.5px; border-radius: 50%; background: #fff; }
.np-seek input::-moz-range-track { height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.3); }
.np-seek input::-moz-range-progress { height: 3px; border-radius: 2px; background: #fff; }
.np-seek input::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: #fff; }
#np-player.active > .np-controls { grid-row: 6; justify-content: space-between; gap: 0; margin: 12px -12px 0; }
.np-controls .icon-btn { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; color: #fff; }
#np-prev .ic, #np-next .ic { width: 32px; height: 32px; }
#np-shuffle .ic, #np-repeat .ic { width: 24px; height: 24px; }
#np-shuffle.on, #np-repeat.on { color: var(--accent-bright); }
.play-big { width: 64px; height: 64px; }
.play-big .ic { width: 29px; height: 29px; }
#np-player.active > .np-bottom { grid-row: 7; display: flex; align-items: center; margin: 12px -12px 0; }
.np-bottom .icon-btn { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; color: #fff; }
.np-bottom .icon-btn .ic { width: 22px; height: 22px; }
.np-bottom-sp { flex: 1; }
#connect-pop:not(.hidden) { left: 16px; right: 16px; width: auto; bottom: 96px; }

/* ---------- the rest ---------- */
.sr-top { flex-direction: row; align-items: center; gap: 14px; padding: 12px; }
.sr-top img, .art-ph-sr { width: 92px; height: 92px; }
.sr-title { font-size: 20px; }
.sr-sub { margin: 6px 0 0; }
.sr-top .pill-btn.primary { display: none; }
.lyric-line { font-size: 22px; }
@media (max-width: 359px) { .quick-grid { grid-template-columns: 1fr; } }